2021-12-26 16:43:35 +01:00
|
|
|
import Page from 'shared/components/wrappers/page.js'
|
|
|
|
|
import useApp from 'site/hooks/useApp.js'
|
|
|
|
|
import strapiLoader from 'shared/strapi/loader'
|
|
|
|
|
import { posts } from 'site/prebuild/strapi.blog.en.js'
|
|
|
|
|
import TimeAgo from 'react-timeago'
|
|
|
|
|
import MdxWrapper from 'shared/components/wrappers/mdx'
|
|
|
|
|
import Markdown from 'react-markdown'
|
2021-12-28 16:22:49 +01:00
|
|
|
import Head from 'next/head'
|
2021-12-30 19:18:59 +01:00
|
|
|
import Popout from 'shared/components/popout.js'
|
2021-12-26 16:43:35 +01:00
|
|
|
|
|
|
|
|
const strapi = "https://posts.freesewing.org"
|
|
|
|
|
|
|
|
|
|
const Author = ({ author }) => (
|
|
|
|
|
<div id="author" className="flex flex-col lg:flex-row m-auto p-2 items-center">
|
|
|
|
|
<div className="theme-gradient w-40 h-40 p-2 rounded-full aspect-square hidden lg:block">
|
|
|
|
|
<div
|
|
|
|
|
className={`
|
|
|
|
|
w-lg bg-cover bg-center rounded-full aspect-square
|
|
|
|
|
hidden lg:block
|
|
|
|
|
`}
|
|
|
|
|
style={{backgroundImage: `url(${strapi}${author?.img})`}}
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="theme-gradient p-2 rounded-full aspect-square w-40 h-40 lg:hidden m-auto">
|
|
|
|
|
<img
|
|
|
|
|
className={`block w-full h-full mx-auto rounded-full`}
|
|
|
|
|
src={`${strapi}${author?.img}`}
|
|
|
|
|
alt={author?.displayname}
|
|
|
|
|
width={author?.picture?.width}
|
|
|
|
|
height={author?.picture?.height}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={`
|
|
|
|
|
text-center p-2 px-4 rounded-r-lg bg-opacity-50
|
|
|
|
|
lg:text-left
|
|
|
|
|
`}
|
|
|
|
|
>
|
|
|
|
|
<p className="text-xl">
|
|
|
|
|
<span className="font-semibold"> {author?.displayname}</span>
|
|
|
|
|
<span className="text-sm pl-2 opacity-70">Wrote this</span>
|
|
|
|
|
</p>
|
|
|
|
|
<div className="prose mdx">
|
|
|
|
|
<Markdown>{author?.about}</Markdown>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const PostPage = ({ post, author }) => {
|
|
|
|
|
const app = useApp()
|
2021-12-28 20:01:59 +01:00
|
|
|
console.log(post)
|
2021-12-26 16:43:35 +01:00
|
|
|
return (
|
|
|
|
|
<Page app={app} title={post.title}>
|
2021-12-28 16:22:49 +01:00
|
|
|
<Head>
|
|
|
|
|
<meta property="og:title" content={post.title} key="title" />
|
2021-12-28 20:01:59 +01:00
|
|
|
<meta property="og:type" content="article" key='type' />
|
|
|
|
|
<meta property="og:description" content={post.intro || post.title} key='description' />
|
|
|
|
|
<meta property="og:article:author" content={author.displayname} key='author' />
|
|
|
|
|
<meta property="og:url" content={`https://canary.freesewing.dev/blog/${post.slug}`} key='url' />
|
2021-12-30 19:18:59 +01:00
|
|
|
<meta property="og:image" content={`https://canary.backend.freesewing.org/en/dev/blog/${post.slug}`} key='image' />
|
|
|
|
|
<meta property="og:image:type" content="image/png" />
|
|
|
|
|
<meta property="og:image:width" content="1200" />
|
|
|
|
|
<meta property="og:image:height" content="630" />
|
2021-12-28 20:01:59 +01:00
|
|
|
<meta property="og:locale" content="en_US" key='locale' />
|
|
|
|
|
<meta property="og:site_name" content="freesewing.dev" key='site' />
|
2021-12-28 16:22:49 +01:00
|
|
|
</Head>
|
2021-12-26 16:43:35 +01:00
|
|
|
<article className="mb-12">
|
|
|
|
|
<div className="flex flex-row justify-between text-sm mb-1 mt-2">
|
|
|
|
|
<span><TimeAgo date={post.date} /> [{post.date}]</span>
|
|
|
|
|
<span>
|
|
|
|
|
By <a
|
|
|
|
|
href="#author"
|
|
|
|
|
className="text-secondary hover:text-secondary-focus"
|
|
|
|
|
>
|
|
|
|
|
{author?.displayname || 'FIXME: No displayname'}
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<figure>
|
|
|
|
|
<img
|
|
|
|
|
src={`${strapi}${post.image.formats.large.url}`}
|
|
|
|
|
alt={post.caption}
|
|
|
|
|
className="shadow m-auto"
|
|
|
|
|
/>
|
|
|
|
|
<figcaption
|
|
|
|
|
className="text-center mb-8 prose m-auto"
|
|
|
|
|
dangerouslySetInnerHTML={{__html: post.caption}}
|
|
|
|
|
/>
|
|
|
|
|
</figure>
|
|
|
|
|
<div className="strapi prose lg:prose-lg mb-12 m-auto">
|
|
|
|
|
<MdxWrapper mdx={post.mdx} app={app} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="max-w-prose text-lg lg:text-xl">
|
|
|
|
|
<Author author={author} />
|
|
|
|
|
</div>
|
2021-12-30 19:18:59 +01:00
|
|
|
<details className="mt-4">
|
|
|
|
|
<summary>Click here to learn how you can help us improve this page</summary>
|
|
|
|
|
<Popout comment by="joost" className='max-w-prose'>
|
|
|
|
|
<h6>Does this look ok?</h6>
|
|
|
|
|
<img className="my-4 rounded" src={`https://canary.backend.freesewing.org/og-img/en/dev/blog/${post.slug}`} />
|
|
|
|
|
<p>
|
|
|
|
|
I recently added a backend endpoint to auto-generate pretty (I hope) Open Graph images.
|
|
|
|
|
They are those little preview images you see when you paste a link in Discord (for example).
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
This idea is that it will auto-generate an image, but I am certain there are some edge cases
|
|
|
|
|
where that will not work.
|
|
|
|
|
There are hundreds of pages on this website and checking them all one by one is not something
|
|
|
|
|
I see myself doing. But since you are here on this page, perhaps you could see if the image
|
|
|
|
|
above looks ok.
|
|
|
|
|
</p>
|
|
|
|
|
<p>If it does look ok, then Yay! that is great and no need to do anything.</p>
|
|
|
|
|
<p>
|
|
|
|
|
If it is not ok, please let me know about it.
|
|
|
|
|
Either by <a href="https://discord.freesewing.org/" className="text-secondary">
|
|
|
|
|
reaching out on Discord
|
|
|
|
|
</a> or feel free to <a
|
|
|
|
|
href="https://github.com/freesewing/freesewing/issues/new/choose"
|
|
|
|
|
className="text-secondary"
|
|
|
|
|
>create
|
|
|
|
|
an issue on Github</a>.
|
|
|
|
|
</p>
|
|
|
|
|
<p>Thank you, I really appreciate your help with this.</p>
|
|
|
|
|
</Popout>
|
|
|
|
|
</details>
|
2021-12-26 16:43:35 +01:00
|
|
|
</article>
|
|
|
|
|
</Page>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Page app={app} title='Blog' slug='blog'>
|
|
|
|
|
<article className="mb-12">
|
|
|
|
|
<div className="strapi prose lg:prose-lg mb-12 m-auto">
|
|
|
|
|
<MdxWrapper mdx={props.post.mdx} />
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
<Author author={author} type={props.type} t={props.t}/>
|
|
|
|
|
<pre>{JSON.stringify(props, null, 2)}</pre>
|
|
|
|
|
</Page>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const getStaticProps = async (props) => {
|
|
|
|
|
const { post, author } = await strapiLoader('en', 'dev', 'blog', props.params.slug)
|
|
|
|
|
|
|
|
|
|
return { props: { post, author, slug: `blog/${props.params.slug}` } }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const getStaticPaths = async () => {
|
|
|
|
|
const paths = []
|
|
|
|
|
for (const post of posts) paths.push({
|
|
|
|
|
params: {slug: post.slug}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
paths,
|
|
|
|
|
fallback: false,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default PostPage
|
