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

components/Header.js

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

components/Layout.js

@@ -1,15 +1,14 @@
-import Header from "./Header";
-import Meta from './Meta'
-import styles from '../styles/Layout.module.css'
+import Header from "./Header"
+import Meta from "./Meta"
+import styles from "../styles/Layout.module.css"
 
 export default function Layout(props) {
-const pathname = props.pathname
   return (
       <section
           className={styles.layout}
           style={{
             backgroundColor: `${props.bgColor && props.bgColor}`,
-      color: `${props.pathname == "info" && 'white'}`
+            color: props.pathname === "info" ? "white" : undefined
           }}
       >
         <Meta
@@ -19,5 +18,5 @@ const pathname = props.pathname
         <Header siteTitle={props.siteTitle} />
         <div className={styles.content}>{props.children}</div>
       </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>
             <meta name="viewport" content="width=device-width, initial-scale=1" />
             <meta charSet="utf-8" />
             <title>{props.siteTitle}</title>
             <meta name="Description" content={props.description}></meta>
         </Head>
-        </>
     )
 }

data/config.json

@@ -1,5 +1,5 @@
 {
-  "title":"Brevifolia",
-  "description":"Starter blog using Tina CMS with Next.js.",
-  "repositoryUrl":"https://github.com/kendallstrautman/brevifolia-next-tinacms"
+  "title": "Brevifolia",
+  "description": "Starter blog using Tina CMS with Next.js.",
+  "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",
-    "node-glob": "^1.2.0",
+    "next": "13.0.4",
+    "glob": "^8.0.3",
     "raw-loader": "^4.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-markdown": "^8.0.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.3"
   },
   "devDependencies": {
-    "eslint": "8.8.0",
-    "eslint-config-next": "12.0.10"
+    "eslint": "8.27.0",
+    "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 ReactMarkdown from 'react-markdown'
+import matter from "gray-matter"
+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')
-
-import Layout from '../../components/Layout'
-
-export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
-  function reformatDate(fullDate) {
+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 <></>
+}
 
+export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
   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 }) {
-  const { slug } = ctx.params
-  const content = await import(`../../posts/${slug}.md`)
+export async function getStaticProps(context) {
+  // extracting the slug from the context
+  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
-  const blogs = glob.sync('posts/**/*.md')
+  // getting all .md files from the posts directory
+  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]
-      .replace(/ /g, '-')
+      .split("/")[1]
+      .replace(/ /g, "-")
       .slice(0, -3)
       .trim()
   )
 
-  // create paths with `slug` param
-  const paths = blogSlugs.map(slug => `/blog/${slug}`)
+  // creating a path for each of the `slug` parameter
+  const paths = blogSlugs.map(slug => { return { params: { slug: slug} } })
+
   return {
     paths,
     fallback: false,

pages/index.js

@@ -1,6 +1,6 @@
-import matter from 'gray-matter'
-import Layout from '../components/Layout'
-import BlogList from '../components/BlogList'
+import matter from "gray-matter"
+import Layout from "../components/Layout"
+import BlogList from "../components/BlogList"
 
 const Index = props => {
   return (
@@ -19,30 +19,40 @@ const Index = props => {
 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) => {
-      // Create slug from filename
+  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('.')
+        .replace(/^.*[\\\/]/, "")
+        .split(".")
         .slice(0, -1)
-        .join('.')
+        .join(".")
+
+    // getting the .md file value associated
+    // with the current file name
     const value = values[index]
-      // Parse yaml metadata & markdownbody in document
+
+    // 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 data
-  })(require.context('../posts', true, /\.md$/))
 
   return {
     props: {

pages/info.js

@@ -1,10 +1,9 @@
-import Layout from '../components/Layout'
-import matter from 'gray-matter'
-import ReactMarkdown from 'react-markdown'
+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 }) {
-    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

@@ -4,13 +4,13 @@
 .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,
-.blog__link:hover li .blog__info h3,
-.blog__link:hover li .blog__info p {
+li .blog__link:hover .blog__info h2,
+li .blog__link:hover .blog__info h3,
+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;