layouts/PostSimple.js

@@ -0,0 +1,66 @@
+import Link from '@/components/Link'
+import PageTitle from '@/components/PageTitle'
+import SectionContainer from '@/components/SectionContainer'
+import { BlogSeo } from '@/components/SEO'
+import siteMetadata from '@/data/siteMetadata'
+
+const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+
+export default function PostLayout({ frontMatter, authorDetails, next, prev, children }) {
+  const { date, title } = frontMatter
+
+  return (
+    <SectionContainer>
+      <BlogSeo url={`${siteMetadata.siteUrl}/blog/${frontMatter.slug}`} {...frontMatter} />
+      <article>
+        <div>
+          <header>
+            <div className="space-y-1 text-center pb-10 border-b border-gray-200 dark:border-gray-700">
+              <dl>
+                <div>
+                  <dt className="sr-only">Published on</dt>
+                  <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
+                    <time dateTime={date}>
+                      {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
+                    </time>
+                  </dd>
+                </div>
+              </dl>
+              <div>
+                <PageTitle>{title}</PageTitle>
+              </div>
+            </div>
+          </header>
+          <div
+            className="pb-8 divide-y divide-gray-200 xl:divide-y-0 dark:divide-gray-700 "
+            style={{ gridTemplateRows: 'auto 1fr' }}
+          >
+            <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2">
+              <div className="pt-10 pb-8 prose dark:prose-dark max-w-none">{children}</div>
+            </div>
+            <footer>
+              <div className="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base">
+                <div className="pt-4 xl:pt-8">
+                  <Link
+                    href={`/blog/${prev.slug}`}
+                    className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                  >
+                    &larr; {prev.title}
+                  </Link>
+                </div>
+                <div className="pt-4 xl:pt-8">
+                  <Link
+                    href={`/blog/${next.slug}`}
+                    className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                  >
+                    {next.title} &rarr;
+                  </Link>
+                </div>
+              </div>
+            </footer>
+          </div>
+        </div>
+      </article>
+    </SectionContainer>
+  )
+}