Merge pull request #1 from Tonel/main

Next.js 13 Update

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# IntelliJ IDEA
+.idea

components/BlogList.js

@@ -1,45 +1,44 @@
-import Link from 'next/link'
+import Link from "next/link"
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from "react-markdown"
 import styles from "../styles/BlogList.module.css"
+import Image from "next/image"
+
+function truncateSummary(content) {
+    return content.slice(0, 200).trimEnd()
+}
+
+function reformatDate(fullDate) {
+    const date = new Date(fullDate)
+    return date.toDateString().slice(4)
+}
+
 const BlogList = ({ allBlogs }) => {
-    function truncateSummary(content) {
-        return content.slice(0, 200).trimEnd()
-    }
-
-    function reformatDate(fullDate) {
-        const date = new Date(fullDate)
-        return date.toDateString().slice(4)
-    }
-
     return (
-        <>
+        <ul>
-            <ul className={styles.list}>
+            {
-                {allBlogs.length > 1 &&
+                allBlogs && allBlogs.length > 1 &&
-                    allBlogs.map(post => (
+                allBlogs.map(post => (
-                        <Link key={post.slug} href={{ pathname: `/blog/${post.slug}` }}>
+                    <li key={post.slug}>
-                            <a className={styles.blog__link}>
+                        <Link href={{ pathname: `/blog/${post.slug}` }} className={styles.blog__link}>
-                                <li>
+                            <div className={styles.hero_image}>
-                                    <div className={styles.hero_image}>
+                                <Image
-                                        <img
+                                    width={384}
-                                            src={post.frontmatter.hero_image}
+                                    height={288}
-                                            alt={post.frontmatter.hero_image}
+                                    src={post.frontmatter.hero_image}
-                                        />
+                                    alt={post.frontmatter.hero_image}
-                                    </div>
+                                />
-                                    <div className={styles.blog__info}>
+                            </div>
-                                        <h2>{post.frontmatter.title}</h2>
+                            <div className={styles.blog__info}>
-                                        <h3> {reformatDate(post.frontmatter.date)}</h3>
+                                <h2>{post.frontmatter.title}</h2>
-                                        <p>
+                                <h3>{reformatDate(post.frontmatter.date)}</h3>
-                                            <ReactMarkdown
+                                <ReactMarkdown disallowedElements={["a"]}>{truncateSummary(post.markdownBody)}</ReactMarkdown>
-                                                children={truncateSummary(post.markdownBody)}
+                            </div>
-                                            />
-                                        </p>
-                                    </div>
-                                </li>
-                            </a>
                         </Link>
-                    ))}
+                    </li>
-            </ul>
+                ))
-        </>
+            }
+        </ul>
     )
 }
+
 export default BlogList

components/Header.js

@@ -1,28 +1,26 @@
-import Link from "next/link";
+import Link from "next/link"
-import styles from '../styles/Header.module.css'
+import styles from "../styles/Header.module.css"
 
 export default function Header(props) {
-  return (
+    const isInfoPage = typeof window !== "undefined" && window.location.pathname === "/info"
-    <header className={styles.header}>
+
-      <nav
+    return (
-        className={styles.nav}
+        <header className={styles.header}>
-        role="navigation"
+            <nav
-        aria-label="main navigation"
+                className={styles.nav}
-      >
+                role="navigation"
-        <Link href="/" passHref>
+                aria-label="main navigation"
-          <h1>{props.siteTitle}</h1>
+            >
-        </Link>
+                <Link href="/">
-        <div>
+                    <h1>{props.siteTitle}</h1>
-          <Link href={`${typeof window !== "undefined" &&
+                </Link>
-          window.location.pathname == "/info" ?
+                <div>
-          "/" : "/info"}`} passHref>
+                    <Link href={isInfoPage ? "/" : "/info"}>
-            <h1>{`${typeof window !== "undefined" &&
+                        <h1>{isInfoPage ? "close" : "info"}</h1>
-          window.location.pathname == "/info" ?
+                    </Link>
-          "close" : "info"}`}</h1>
+                </div>
-          </Link>
+            </nav>
-        </div>
+        </header>
-      </nav>
+    )
-    </header>
-  );
 }
 

components/Layout.js

@@ -1,23 +1,22 @@
-import Header from "./Header";
+import Header from "./Header"
-import Meta from './Meta'
+import Meta from "./Meta"
-import styles from '../styles/Layout.module.css'
+import styles from "../styles/Layout.module.css"
 
 export default function Layout(props) {
-const pathname = props.pathname
   return (
-    <section
+      <section
-    className={styles.layout}
+          className={styles.layout}
-    style={{
+          style={{
-      backgroundColor: `${props.bgColor && props.bgColor}`,
+            backgroundColor: `${props.bgColor && props.bgColor}`,
-      color: `${props.pathname == "info" && 'white'}`
+            color: props.pathname === "info" ? "white" : undefined
-    }}
+          }}
-  >
+      >
-    <Meta
+        <Meta
-      siteTitle={props.siteTitle}
+            siteTitle={props.siteTitle}
-      siteDescription={props.siteDescription}
+            siteDescription={props.siteDescription}
-    />
+        />
-    <Header siteTitle={props.siteTitle} />
+        <Header siteTitle={props.siteTitle} />
-    <div className={styles.content}>{props.children}</div>
+        <div className={styles.content}>{props.children}</div>
-  </section>
+      </section>
-  );
+  )
 }

components/Meta.js

@@ -1,14 +1,12 @@
-import Head from 'next/head'
+import Head from "next/head"
 
 export default function Meta(props) {
     return (
-        <>
+        <Head>
-            <Head>
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <meta charSet="utf-8" />
-                <meta charSet="utf-8" />
+            <title>{props.siteTitle}</title>
-                <title>{props.siteTitle}</title>
+            <meta name="Description" content={props.description}></meta>
-                <meta name="Description" content={props.description}></meta>
+        </Head>
-            </Head>
-        </>
     )
 }

data/config.json

@@ -1,5 +1,5 @@
 {
-  "title":"Brevifolia",
+  "title": "Brevifolia",
-  "description":"Starter blog using Tina CMS with Next.js.",
+  "description": "Starter blog using Tina CMS with Next.js.",
-  "repositoryUrl":"https://github.com/kendallstrautman/brevifolia-next-tinacms"
+  "repositoryUrl": "https://github.com/kendallstrautman/brevifolia-next-tinacms"
 }

package.json

@@ -8,16 +8,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@next/font": "13.0.4",
     "gray-matter": "^4.0.3",
-    "next": "12.0.10",
+    "next": "13.0.4",
-    "node-glob": "^1.2.0",
+    "glob": "^8.0.3",
     "raw-loader": "^4.0.2",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
-    "react-markdown": "^8.0.0"
+    "react-markdown": "^8.0.3"
   },
   "devDependencies": {
-    "eslint": "8.8.0",
+    "eslint": "8.27.0",
-    "eslint-config-next": "12.0.10"
+    "eslint-config-next": "13.0.4"
   }
 }

pages/_app.js

@@ -1,7 +1,18 @@
-import '../styles/globals.css'
+import "../styles/globals.css"
+import { Work_Sans } from "@next/font/google"
+
+// importing the Work Sans 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 <Component {...pageProps} />
+  return <main className={workSans.className}>
+    <Component {...pageProps} />
+  </main>
 }
 
 export default MyApp

pages/api/hello.js

@@ -1,5 +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' })
+  res.status(200).json({ name: "John Doe" })
 }

pages/blog/[slug].js

@@ -1,26 +1,16 @@
 import Image from "next/image"
-import matter from 'gray-matter'
+import matter from "gray-matter"
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from "react-markdown"
+import glob from "glob"
+import Layout from "../../components/Layout"
 import styles from "../../styles/Blog.module.css"
 
-const glob = require('glob')
+function reformatDate(fullDate) {
-
+  const date = new Date(fullDate)
-import Layout from '../../components/Layout'
+  return date.toDateString().slice(4)
+}
 
 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}>
@@ -37,7 +27,7 @@ export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
           <h3>{reformatDate(frontmatter.date)}</h3>
         </div>
         <div className={styles.blog__body}>
-          <ReactMarkdown children={markdownBody} />
+          <ReactMarkdown>{markdownBody}</ReactMarkdown>
         </div>
         <h2 className={styles.blog__footer}>Written By: {frontmatter.author}</h2>
       </article>
@@ -45,10 +35,15 @@ export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
   )
 }
 
-export async function getStaticProps({ ...ctx }) {
+export async function getStaticProps(context) {
-  const { slug } = ctx.params
+  // extracting the slug from the context
-  const content = await import(`../../posts/${slug}.md`)
+  const { slug } = context.params
+
   const config = await import(`../../data/config.json`)
+
+  // retrieving the Markdown file associated to the slug
+  // and reading its data
+  const content = await import(`../../posts/${slug}.md`)
   const data = matter(content.default)
 
   return {
@@ -61,20 +56,21 @@ export async function getStaticProps({ ...ctx }) {
 }
 
 export async function getStaticPaths() {
-  //get all .md files in the posts dir
+  // getting all .md files from the posts directory
-  const blogs = glob.sync('posts/**/*.md')
+  const blogs = glob.sync("posts/**/*.md")
 
-  //remove path and extension to leave filename only
+  // converting the file names to their slugs
   const blogSlugs = blogs.map(file =>
     file
-      .split('/')[1]
+      .split("/")[1]
-      .replace(/ /g, '-')
+      .replace(/ /g, "-")
       .slice(0, -3)
       .trim()
   )
 
-  // create paths with `slug` param
+  // creating a path for each of the `slug` parameter
-  const paths = blogSlugs.map(slug => `/blog/${slug}`)
+  const paths = blogSlugs.map(slug => { return { params: { slug: slug} } })
+
   return {
     paths,
     fallback: false,

pages/index.js

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

pages/info.js

@@ -1,10 +1,9 @@
-import Layout from '../components/Layout'
+import Layout from "../components/Layout"
-import matter from 'gray-matter'
+import matter from "gray-matter"
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from "react-markdown"
 import styles from "../styles/Info.module.css"
 
 export default function Info({ frontmatter, markdownBody, title }) {
-    console.log(markdownBody)
   return (
     <Layout
       pathname="info"
@@ -12,7 +11,7 @@ export default function Info({ frontmatter, markdownBody, title }) {
       siteTitle={title}
     >
       <section className={styles.info_blurb}>
-        <ReactMarkdown children={markdownBody} />
+        <ReactMarkdown>{markdownBody}</ReactMarkdown>
       </section>
     </Layout>
   )
@@ -21,6 +20,7 @@ export default function Info({ frontmatter, markdownBody, title }) {
 export async function getStaticProps() {
   const content = await import(`../data/info.md`)
   const config = await import(`../data/config.json`)
+
   const data = matter(content.default)
 
   return {

styles/BlogList.module.css

@@ -1,16 +1,16 @@
 .blog__link {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 .blog__link:hover {
   opacity: 1;
 }
-.blog__link:hover li div.hero_image img {
+li .blog__link:hover div.hero_image img {
   opacity: 0.8;
   transition: opacity 0.3s ease;
 }
-.blog__link:hover li .blog__info h2,
+li .blog__link:hover .blog__info h2,
-.blog__link:hover li .blog__info h3,
+li .blog__link:hover .blog__info h3,
-.blog__link:hover li .blog__info p {
+li .blog__link:hover .blog__info p {
   transform: translateX(10px);
   transition: transform 0.5s ease-out;
 }
@@ -22,10 +22,10 @@
 }
 .hero_image img {
   object-fit: cover;
-  object-position: 50% 50%;
   opacity: 1;
-  transition: opacity 0.3s ease;
   min-height: 100%;
+  width: 100%;
+  transition: opacity 0.3s ease;
 }
 .blog__info {
   display: flex;
@@ -42,7 +42,7 @@
   transform: translateX(0px);
   transition: transform 0.5s ease-out;
 }
-.blog__link li {
+li .blog__link {
   opacity: inherit;
   display: flex;
   justify-content: center;
@@ -60,7 +60,7 @@
   max-width: 900px;
 }
 @media (min-width: 768px) {
-    .blog__link li {
+  li .blog__link {
     min-height: 250px;
     height: 33.333vh;
     flex-direction: row;

styles/globals.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Work+Sans&display=swap");
-
 * {
 box-sizing: inherit;
 }
@@ -9,7 +7,6 @@ overflow-y: scroll;
 }
 body {
 margin: 0;
-font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
 overflow-x: hidden;
 color: #000;
 font-size: 16px;
@@ -136,7 +133,6 @@ h4,
 h5,
 h6,
 p {
-font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
 margin-left: 0;
 margin-right: 0;
 margin-top: 0;