diff --git a/components/BlogList.js b/components/BlogList.js index 82b2b0e..17c7506 100644 --- 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 }) => {

{post.frontmatter.title}

{reformatDate(post.frontmatter.date)}

- {truncateSummary(post.markdownBody)} + {truncateSummary(post.markdownBody)}
diff --git a/components/Header.js b/components/Header.js index 78e6994..dd1fb2c 100644 --- 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) {

{props.siteTitle}

- -

{isInfoPage ? 'close' : 'info'}

+ +

{isInfoPage ? "close" : "info"}

diff --git a/components/Layout.js b/components/Layout.js index bee26bd..a494f45 100644 --- 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 }} > - return (
@@ -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, diff --git a/pages/index.js b/pages/index.js index a47e0ce..cf1aea7 100644 --- 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 diff --git a/pages/info.js b/pages/info.js index b2ccd60..4a39669 100644 --- 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 }) {