VSinerva/freesewing
1
0
Fork 0
Code Activity

fix(www): Layout fixed to blog pages

Browse source
This commit is contained in:
Joost De Cock 2022-05-30 16:40:51 +02:00
parent 5e13e7933c
commit cb01cd6b8e
3 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/freesewing.org/pages/blog/[slug].js
View file

@ -1,4 +1,4 @@
import Page from 'shared/components/wrappers/page.js' import Page from 'site/components/wrappers/page.js'
import useApp from 'site/hooks/useApp.js' import useApp from 'site/hooks/useApp.js'
import TimeAgo from 'react-timeago' import TimeAgo from 'react-timeago'
import MdxWrapper from 'shared/components/wrappers/mdx' import MdxWrapper from 'shared/components/wrappers/mdx'
@ -68,7 +68,7 @@ const PostPage = ({ post, author }) => {
<meta property="og:locale" content="en_US" key='locale' /> <meta property="og:locale" content="en_US" key='locale' />
<meta property="og:site_name" content="freesewing.dev" key='site' /> <meta property="og:site_name" content="freesewing.dev" key='site' />
</Head> </Head>
<article className="mb-12"> <article className="mb-12 px-8">
<div className="flex flex-row justify-between text-sm mb-1 mt-2"> <div className="flex flex-row justify-between text-sm mb-1 mt-2">
<span><TimeAgo date={post.date} /> [{post.date}]</span> <span><TimeAgo date={post.date} /> [{post.date}]</span>
<span> <span>

14
packages/freesewing.org/pages/blog/index.js
View file

@ -1,4 +1,4 @@
import Page from 'shared/components/wrappers/page.js' import Page from 'site/components/wrappers/page.js'
import useApp from 'site/hooks/useApp.js' import useApp from 'site/hooks/useApp.js'
import Link from 'next/link' import Link from 'next/link'
import TimeAgo from 'react-timeago' import TimeAgo from 'react-timeago'
@ -18,12 +18,12 @@ const Preview = ({ app, post }) => (
backgroundSize: 'cover', backgroundSize: 'cover',
}}> }}>
<div className="grow"></div> <div className="grow"></div>
<div className="text-right mb-8"> <div className="text-right mb-3 lg:mb-8">
<div className={` <div className={`
bg-neutral text-neutral-content bg-neutral text-neutral-content bg-opacity-90 text-right
bg-opacity-90 px-4 py-1
px-8 text-right lg:px-8 lg:py-4
py-4
`}> `}>
<h5 className={` <h5 className={`
text-neutral-content text-neutral-content
@ -55,7 +55,7 @@ const BlogIndexPage = (props) => {
return ( return (
<Page app={app} title={t('blog')} slug='blog'> <Page app={app} title={t('blog')} slug='blog'>
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2"> <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 px-8">
{props.posts.map(post => <Preview app={app} post={post} key={post.slug}/>) {props.posts.map(post => <Preview app={app} post={post} key={post.slug}/>)
} }
</div> </div>

4
packages/freesewing.shared/components/wrappers/mdx.js
View file

@ -15,6 +15,8 @@ import customComponents from 'shared/components/mdx'
// Previous-Next navigation // Previous-Next navigation
import PrevNext from '../mdx/prev-next' import PrevNext from '../mdx/prev-next'
const Null = (props) => null
const MdxWrapper = ({mdx, app, t, components={}}) => { const MdxWrapper = ({mdx, app, t, components={}}) => {
const [mdxModule, setMdxModule] = useState() const [mdxModule, setMdxModule] = useState()
@ -36,7 +38,7 @@ const MdxWrapper = ({mdx, app, t, components={}}) => {
} }
// React component for MDX content // React component for MDX content
const MdxContent = mdxModule ? mdxModule.default : Fragment const MdxContent = mdxModule ? mdxModule.default : Null
return app return app
? ( ? (