1
0
Fork 0

fix(www): Layout fixed to blog pages

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

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 TimeAgo from 'react-timeago'
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:site_name" content="freesewing.dev" key='site' />
</Head>
<article className="mb-12">
<article className="mb-12 px-8">
<div className="flex flex-row justify-between text-sm mb-1 mt-2">
<span><TimeAgo date={post.date} /> [{post.date}]</span>
<span>

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 Link from 'next/link'
import TimeAgo from 'react-timeago'
@ -18,12 +18,12 @@ const Preview = ({ app, post }) => (
backgroundSize: 'cover',
}}>
<div className="grow"></div>
<div className="text-right mb-8">
<div className="text-right mb-3 lg:mb-8">
<div className={`
bg-neutral text-neutral-content
bg-opacity-90
px-8 text-right
py-4
bg-neutral text-neutral-content bg-opacity-90 text-right
px-4 py-1
lg:px-8 lg:py-4
`}>
<h5 className={`
text-neutral-content
@ -55,7 +55,7 @@ const BlogIndexPage = (props) => {
return (
<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}/>)
}
</div>

View file

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