feat(fs.org): Initial import of freesewing.dev code

2022-01-02 17:16:15 +01:00 · 2022-01-02 17:16:15 +01:00 · ccac712133
commit ccac712133
parent 7fb05ac25d
25 changed files with 1561 additions and 9 deletions
--- a/packages/freesewing.org/pages/blog/[slug].js
+++ b/packages/freesewing.org/pages/blog/[slug].js
@ -0,0 +1,133 @@
+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'
+import Head from 'next/head'
+import HelpUs from 'site/components/help-us.js'
+
+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()
+
+  return (
+    <Page app={app} title={post.title}>
+      <Head>
+        <meta property="og:title" content={post.title} key="title" />
+        <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://freesewing.dev/blog/${post.slug}`} key='url' />
+        <meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/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" />
+        <meta property="og:locale" content="en_US" key='locale' />
+        <meta property="og:site_name" content="freesewing.dev" key='site' />
+      </Head>
+      <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>
+        <HelpUs blog slug={`/blog/${post.slug}`} />
+      </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}/>
+    </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