BlogList updated

components/BlogList.js

@@ -1,5 +1,5 @@
-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";
 
@@ -30,7 +30,7 @@ const BlogList = ({ allBlogs }) => {
                             <div className={styles.blog__info}>
                                 <h2>{post.frontmatter.title}</h2>
                                 <h3>{reformatDate(post.frontmatter.date)}</h3>
-                                <ReactMarkdown disallowedElements={['a']}>{truncateSummary(post.markdownBody)}</ReactMarkdown>
+                                <ReactMarkdown disallowedElements={["a"]}>{truncateSummary(post.markdownBody)}</ReactMarkdown>
                             </div>
                         </Link>
                     </li>

components/Header.js

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import styles from '../styles/Header.module.css'
+import styles from "../styles/Header.module.css"
 
 export default function Header(props) {
     const isInfoPage = typeof window !== "undefined" && window.location.pathname === "/info"
@@ -15,8 +15,8 @@ export default function Header(props) {
                     <h1>{props.siteTitle}</h1>
                 </Link>
                 <div>
-                    <Link href={isInfoPage ? '/' : '/info'}>
+                    <Link href={isInfoPage ? "/" : "/info"}>
-                        <h1>{isInfoPage ? 'close' : 'info'}</h1>
+                        <h1>{isInfoPage ? "close" : "info"}</h1>
                     </Link>
                 </div>
             </nav>

components/Layout.js

@@ -1,6 +1,6 @@
 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) {
   return (
@@ -8,7 +8,7 @@ export default function Layout(props) {
           className={styles.layout}
           style={{
             backgroundColor: `${props.bgColor && props.bgColor}`,
-            color: props.pathname === "info" ? 'white' : undefined
+            color: props.pathname === "info" ? "white" : undefined
           }}
       >
         <Meta

components/Meta.js

@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head"
 
 export default function Meta(props) {
     return (

package-lock.json

@@ -477,11 +477,6 @@
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
       "dev": true
     },
-    "async": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-      "integrity": "sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w=="
-    },
     "axe-core": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz",
@@ -502,8 +497,7 @@
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-      "dev": true
     },
     "big.js": {
       "version": "5.2.2",
@@ -1234,8 +1228,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
-      "dev": true
     },
     "function-bind": {
       "version": "1.1.1",
@@ -1289,17 +1282,33 @@
       "dev": true
     },
     "glob": {
-      "version": "7.2.3",
+      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^3.1.1",
+        "minimatch": "^5.0.1",
-        "once": "^1.3.0",
+        "once": "^1.3.0"
-        "path-is-absolute": "^1.0.0"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
       }
     },
     "glob-parent": {
@@ -1311,11 +1320,6 @@
         "is-glob": "^4.0.3"
       }
     },
-    "glob-to-regexp": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.1.0.tgz",
-      "integrity": "sha512-zNKwUvfFs4IbHMLzBDl4v5YbFNs64e4yGkptl4DncCYwmhMQORQflvs7XsEv50+M5bJqbgjBqnV+zZ8vF490yQ=="
-    },
     "globals": {
       "version": "13.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.18.0.tgz",
@@ -1469,7 +1473,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -1478,8 +1481,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-      "dev": true
     },
     "inline-style-parser": {
       "version": "0.1.1",
@@ -2138,15 +2140,6 @@
         "use-sync-external-store": "1.2.0"
       }
     },
-    "node-glob": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/node-glob/-/node-glob-1.2.0.tgz",
-      "integrity": "sha512-c0R4Wab2SAlwdBr5ehPANnbLzxv5dBMUdEYy8ilqBDkqvEIf74JGhaLhCh/EuhgzPTXuEOUoqDnAKdODpHXMNg==",
-      "requires": {
-        "async": "^1.3.0",
-        "glob-to-regexp": "^0.1.0"
-      }
-    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2223,7 +2216,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -2497,6 +2489,22 @@
       "dev": true,
       "requires": {
         "glob": "^7.1.3"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
       }
     },
     "run-parallel": {
@@ -2960,8 +2968,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-      "dev": true
     },
     "yallist": {
       "version": "4.0.0",

package.json

@@ -11,7 +11,7 @@
     "@next/font": "13.0.4",
     "gray-matter": "^4.0.3",
     "next": "13.0.4",
-    "node-glob": "^1.2.0",
+    "glob": "^8.0.3",
     "raw-loader": "^4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pages/_app.js

@@ -1,12 +1,12 @@
-import '../styles/globals.css'
+import "../styles/globals.css"
-import { Work_Sans } from '@next/font/google'
+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'],
+  weight: ["400", "700"],
-  style: ['normal', 'italic'],
+  style: ["normal", "italic"],
-  subsets: ['latin'],
+  subsets: ["latin"],
 })
 
 function MyApp({ Component, pageProps }) {

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) {
-
-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 <></>
 
+export default function BlogTemplate({ frontmatter, markdownBody, siteTitle }) {
   return (
     <Layout siteTitle={siteTitle}>
       <article className={styles.blog}>
@@ -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}`)
+
   return {
     paths,
     fallback: false,

pages/index.js

@@ -1,6 +1,6 @@
-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 (
@@ -22,7 +22,7 @@ export async function getStaticProps() {
   // getting the website config
   const siteConfig = await import(`../data/config.json`)
 
-  const webpackContext = require.context('../posts', true, /\.md$/)
+  const webpackContext = require.context("../posts", true, /\.md$/)
   // the list of file names contained
   // inside the "posts" directory
   const keys = webpackContext.keys()
@@ -34,10 +34,10 @@ export async function getStaticProps() {
     // dynamically creating the post slug
     // from file name
     const slug = key
-        .replace(/^.*[\\\/]/, '')
+        .replace(/^.*[\\\/]/, "")
-        .split('.')
+        .split(".")
         .slice(0, -1)
-        .join('.')
+        .join(".")
 
     // getting the .md file value associated
     // with the current file name

pages/info.js

@@ -1,6 +1,6 @@
-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 }) {