From 35824fea0c536147e2b4999940076c89c722fc2a Mon Sep 17 00:00:00 2001 From: Paul-Louis NECH Date: Sun, 25 Apr 2021 14:55:22 +0200 Subject: [PATCH] lib: Genericize content --- next/content/posts/hello-world.md | 8 ++++++++ next/content/posts/next.md | 7 +++++++ next/lib/posts.js | 79 ++++--------------------------------------------------------------------------- next/lib/utils.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ next/posts/hello-world.md | 8 -------- next/posts/next.md | 7 ------- next/styles.css | 4 ++++ 7 files changed, 112 insertions(+), 90 deletions(-) create mode 100644 next/content/posts/hello-world.md create mode 100644 next/content/posts/next.md create mode 100644 next/lib/utils.js delete mode 100644 next/posts/hello-world.md delete mode 100644 next/posts/next.md diff --git a/next/content/posts/hello-world.md b/next/content/posts/hello-world.md new file mode 100644 index 0000000..6f8c1dd --- /dev/null +++ b/next/content/posts/hello-world.md @@ -0,0 +1,8 @@ +--- +title: Hello World +date: '2021-04-23' +--- + +> _C'est un petit pas pour l'homme, mais un grand pas pour le serverless._ + +**Ceci n'est pas un premier post.** diff --git a/next/content/posts/next.md b/next/content/posts/next.md new file mode 100644 index 0000000..037de79 --- /dev/null +++ b/next/content/posts/next.md @@ -0,0 +1,7 @@ +--- +title: NextJs Tutorial +date: '2021-04-23' +--- + +Gotta say the [Vercel Next.JS Tutorial](https://nextjs.org/learn/basics/create-nextjs-app) was a delight to follow. +A couple hours and this site is live. :) diff --git a/next/lib/posts.js b/next/lib/posts.js index 3563fef..36ecae3 100644 --- a/next/lib/posts.js +++ b/next/lib/posts.js @@ -1,84 +1,13 @@ -import fs from 'fs' -import path from 'path' -import matter from 'gray-matter' -import remark from 'remark' -import html from 'remark-html' - -const postsDirectory = path.join(process.cwd(), 'posts') +import {getAllContentData, getAllContentIds, getContentData} from './utils' export function getSortedPostsData() { - // Get file names under /posts - const fileNames = fs.readdirSync(postsDirectory) - const allPostsData = fileNames.map(fileName => { - // Remove ".md" from file name to get id - const id = fileName.replace(/\.md$/, '') - - // Read markdown file as string - const fullPath = path.join(postsDirectory, fileName) - const fileContents = fs.readFileSync(fullPath, 'utf8') - - // Use gray-matter to parse the post metadata section - const matterResult = matter(fileContents) - - // Combine the data with the id - return { - id, - ...matterResult.data - } - }) - // Sort posts by date - return allPostsData.sort((a, b) => { - if (a.date < b.date) { - return 1 - } else { - return -1 - } - }) + return getAllContentData('posts', true) } export function getAllPostIds() { - const fileNames = fs.readdirSync(postsDirectory) - - // Returns an array that looks like this: - // [ - // { - // params: { - // id: 'ssg-ssr' - // } - // }, - // { - // params: { - // id: 'pre-rendering' - // } - // } - // ] - // MUST be an array of objects - return fileNames.map(fileName => { - return { - params: { - id: fileName.replace(/\.md$/, '') - } - } - }) + return getAllContentIds("posts") } export async function getPostData(id) { - const fullPath = path.join(postsDirectory, `${id}.md`) - const fileContents = fs.readFileSync(fullPath, 'utf8') - - // Use gray-matter to parse the post metadata section - const matterResult = matter(fileContents) - - // Use remark to convert markdown into HTML string - const processedContent = await remark() - .use(html) - .process(matterResult.content) - const contentHtml = processedContent.toString() - - // Combine the data with the id and contentHtml - return { - id, - contentHtml, - ...matterResult.data - } + return getContentData("posts", id) } diff --git a/next/lib/utils.js b/next/lib/utils.js new file mode 100644 index 0000000..d030571 --- /dev/null +++ b/next/lib/utils.js @@ -0,0 +1,89 @@ +import path from "path"; +import fs from "fs"; +import matter from "gray-matter"; +import remark from "remark"; +import html from "remark-html"; + +function getContentDirectory(name) { + const dir = path.join(process.cwd(), "content", name); + console.log("gCD:", dir); + return dir; +} + +function getAllContentData(name, sorted = false) { + // Get file names under /content/{name} + const contentDirectory = getContentDirectory(name); + const fileNames = fs.readdirSync(contentDirectory); + console.log("gACD: total", fileNames.length, "items"); + + const allContentData = fileNames.map((fileName) => { + // Remove ".md" from file name to get id + const id = fileName.replace(/\.md$/, ""); + + // Read markdown file as string + const fullPath = path.join(contentDirectory, fileName); + const fileContents = fs.readFileSync(fullPath, "utf8"); + + // Use gray-matter to parse the post metadata section + const matterResult = matter(fileContents); + + // Combine the data with the id + return { + id, + ...matterResult.data, + }; + }); + + return sorted + ? allContentData.sort((a, b) => { + if (a.date < b.date) { + return 1; + } else { + return -1; + } + }) + : allContentData; +} + +function getAllContentIds(name) { + const fileNames = fs.readdirSync(getContentDirectory(name)); + console.log(`getAllContentIds: ${fileNames.length} ${name}(s).`); + + return fileNames.map((fileName) => { + return { + params: { + id: fileName.replace(/\.md$/, ""), + }, + }; + }); +} + +async function getContentData(name, id) { + const fullPath = path.join(getContentDirectory(name), `${id}.md`); + console.log("Got content fullPath:", fullPath); + const fileContents = fs.readFileSync(fullPath, "utf8"); + console.log("Got contents:", fileContents); + + // Use gray-matter to parse the post metadata section + const matterResult = matter(fileContents); + + // Use remark to convert markdown into HTML string + const processedContent = await remark() + .use(html) + .process(matterResult.content); + const contentHtml = processedContent.toString(); + + // Combine the data with the id and contentHtml + return { + id, + contentHtml, + ...matterResult.data, + }; +} + +export { + getContentDirectory, + getContentData, + getAllContentData, + getAllContentIds, +}; diff --git a/next/posts/hello-world.md b/next/posts/hello-world.md deleted file mode 100644 index 6f8c1dd..0000000 --- a/next/posts/hello-world.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Hello World -date: '2021-04-23' ---- - -> _C'est un petit pas pour l'homme, mais un grand pas pour le serverless._ - -**Ceci n'est pas un premier post.** diff --git a/next/posts/next.md b/next/posts/next.md deleted file mode 100644 index 037de79..0000000 --- a/next/posts/next.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: NextJs Tutorial -date: '2021-04-23' ---- - -Gotta say the [Vercel Next.JS Tutorial](https://nextjs.org/learn/basics/create-nextjs-app) was a delight to follow. -A couple hours and this site is live. :) diff --git a/next/styles.css b/next/styles.css index 2560f72..b3aa0a4 100644 --- a/next/styles.css +++ b/next/styles.css @@ -30,6 +30,10 @@ header { margin-bottom: 2em; } +main h1 { + margin-bottom: 1em; +} + footer { margin-top: 4em; text-align: center; -- libgit2 0.27.0