Updated to Next.js 13

pages/_app.js

@@ -0,0 +1,18 @@
+import '../styles/globals.css'
+import { Work_Sans } from '@next/font/google'
+
+// importing the Inter font with
+// the Next.js 13 Font Optimization Feature
+const workSans = Work_Sans({
+  weight: ['400', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+})
+
+function MyApp({ Component, pageProps }) {
+  return <main className={workSans.className}>
+    <Component {...pageProps} />
+  </main>
+}
+
+export default MyApp

pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/blog/[slug].js

@@ -0,0 +1,82 @@
+import Image from "next/image"
+import matter from 'gray-matter'
+import ReactMarkdown from 'react-markdown'
+import styles from "../../styles/Blog.module.css"
+
+const glob = require('glob')
+
+import Layout from '../../components/Layout'
+
+export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
+  function reformatDate(fullDate) {
+    const date = new Date(fullDate)
+    return date.toDateString().slice(4)
+  }
+
+  // /*
+  //  ** Odd fix to get build to run
+  //  ** It seems like on first go the props
+  //  ** are undefined — could be a Next bug?
+  //  */
+  //
+  // if (!frontmatter) return <></>
+
+  return (
+    <Layout siteTitle={siteTitle}>
+      <article className={styles.blog}>
+        <figure className={styles.blog__hero}>
+          <Image
+            width="1920"
+            height="1080"
+            src={frontmatter.hero_image}
+            alt={`blog_hero_${frontmatter.title}`}
+          />
+        </figure>
+        <div className={styles.blog__info}>
+          <h1>{frontmatter.title}</h1>
+          <h3>{reformatDate(frontmatter.date)}</h3>
+        </div>
+        <div className={styles.blog__body}>
+          <ReactMarkdown>{markdownBody}</ReactMarkdown>
+        </div>
+        <h2 className={styles.blog__footer}>Written By: {frontmatter.author}</h2>
+      </article>
+    </Layout>
+  )
+}
+
+export async function getStaticProps({ ...ctx }) {
+  const { slug } = ctx.params
+  const content = await import(`../../posts/${slug}.md`)
+  const config = await import(`../../data/config.json`)
+  const data = matter(content.default)
+
+  return {
+    props: {
+      siteTitle: config.title,
+      frontmatter: data.data,
+      markdownBody: data.content,
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  //get all .md files in the posts dir
+  const blogs = glob.sync('posts/**/*.md')
+
+  //remove path and extension to leave filename only
+  const blogSlugs = blogs.map(file =>
+    file
+      .split('/')[1]
+      .replace(/ /g, '-')
+      .slice(0, -3)
+      .trim()
+  )
+
+  // create paths with `slug` param
+  const paths = blogSlugs.map(slug => `/blog/${slug}`)
+  return {
+    paths,
+    fallback: false,
+  }
+}

pages/index.js

@@ -0,0 +1,64 @@
+import matter from 'gray-matter'
+import Layout from '../components/Layout'
+import BlogList from '../components/BlogList'
+
+const Index = props => {
+  return (
+      <Layout
+          pathname="/"
+          siteTitle={props.title}
+          siteDescription={props.description}
+      >
+        <section>
+          <BlogList allBlogs={props.allBlogs} />
+        </section>
+      </Layout>
+  )
+}
+
+export default Index
+
+export async function getStaticProps() {
+  // getting the website config
+  const siteConfig = await import(`../data/config.json`)
+
+  const webpackContext = require.context('../posts', true, /\.md$/)
+  // the list of file names contained
+  // inside the "posts" directory
+  const keys = webpackContext.keys()
+  const values = keys.map(webpackContext)
+
+  // getting the post data from the files contained
+  // in the "posts" folder
+  const posts = keys.map((key, index) => {
+    // dynamically creating the post slug
+    // from file name
+    const slug = key
+        .replace(/^.*[\\\/]/, '')
+        .split('.')
+        .slice(0, -1)
+        .join('.')
+
+    // getting the .md file value associated
+    // with the current file name
+    const value = values[index]
+
+    // parsing the YAML metadata and markdown body
+    // contained in the .md file
+    const document = matter(value.default)
+
+    return {
+      frontmatter: document.data,
+      markdownBody: document.content,
+      slug,
+    }
+  })
+
+  return {
+    props: {
+      allBlogs: posts,
+      title: siteConfig.default.title,
+      description: siteConfig.default.description,
+    },
+  }
+}

pages/info.js

@@ -0,0 +1,33 @@
+import Layout from '../components/Layout'
+import matter from 'gray-matter'
+import ReactMarkdown from 'react-markdown'
+import styles from "../styles/Info.module.css"
+
+export default function Info({ frontmatter, markdownBody, title }) {
+  return (
+    <Layout
+      pathname="info"
+      bgColor={frontmatter.background_color}
+      siteTitle={title}
+    >
+      <section className={styles.info_blurb}>
+        <ReactMarkdown>{markdownBody}</ReactMarkdown>
+      </section>
+    </Layout>
+  )
+}
+
+export async function getStaticProps() {
+  const content = await import(`../data/info.md`)
+  const config = await import(`../data/config.json`)
+
+  const data = matter(content.default)
+
+  return {
+    props: {
+      title: config.title,
+      frontmatter: data.data,
+      markdownBody: data.content,
+    },
+  }
+}