BlogList updated

2022-11-18 16:58:08 +01:00
parent 9c3387c87a
commit 37e23c3932
11 changed files with 93 additions and 90 deletions
--- a/components/BlogList.js
+++ b/components/BlogList.js
@@ -1,5 +1,5 @@
-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"
 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>
--- a/components/Header.js
+++ b/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'}>
-                        <h1>{isInfoPage ? 'close' : 'info'}</h1>
+                    <Link href={isInfoPage ? "/" : "/info"}>
+                        <h1>{isInfoPage ? "close" : "info"}</h1>
                    </Link>
                </div>
            </nav>
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,6 +1,6 @@
 import Header from "./Header";
-import Meta from './Meta'
-import styles from '../styles/Layout.module.css'
+import Meta from "./Meta"
+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
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head"

 export default function Meta(props) {
    return (
--- a/package-lock.json
+++ b/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==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
    },
    "function-bind": {
      "version": "1.1.1",
@@ -1289,17 +1282,33 @@
      "dev": true
    },
    "glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+      "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
      "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"
+        "minimatch": "^5.0.1",
+        "once": "^1.3.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==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
    },
    "yallist": {
      "version": "4.0.0",
--- a/package.json
+++ b/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",
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,12 +1,12 @@
-import '../styles/globals.css'
-import { Work_Sans } from '@next/font/google'
+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'],
+  weight: ["400", "700"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
 })

 function MyApp({ Component, pageProps }) {
--- a/pages/api/hello.js
+++ b/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" })
 }
--- a/pages/blog/[slug].js
+++ b/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}>
@@ -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
+  // creating a path for each of the `slug` parameter
  const paths = blogSlugs.map(slug => `/blog/${slug}`)
+
  return {
    paths,
    fallback: false,
--- a/pages/index.js
+++ b/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 (
@@ -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(/^.*[\\\/]/, '')
-        .split('.')
+        .replace(/^.*[\\\/]/, "")
+        .split(".")
        .slice(0, -1)
-        .join('.')
+        .join(".")

    // getting the .md file value associated
    // with the current file name
--- a/pages/info.js
+++ b/pages/info.js
@@ -1,6 +1,6 @@
-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 }) {