diff --git a/.gitignore b/.gitignore index 08f4540..f34e9e3 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,8 @@ _/ # auto generated files yarn.lock package-lock.json -pages.json +posts.json +posts/ # dependencies .pnp/ diff --git a/source/generate.ts b/source/generate.ts index 259800f..0a80068 100644 --- a/source/generate.ts +++ b/source/generate.ts @@ -1,82 +1,166 @@ /** - * It reads markdown files and write its content and metadata to a json file that can be used by React. - * - Files and directories names starting with a underscore (_ <- this thing), will be ignored - * - Symbolic links are also be ignored as of the moment - * - Filename-to-url encoder not perfect. Some filenames might cause problem (like files containing special characters) + * It reads markdown files and write its content and metadata to json files that can be imported by React. + * - Files and directories names starting with a underscore (_) will be ignored + * - Symbolic links are ignored as of the moment + * - Filename-to-url encoder is not perfect. Some non-url-friendly filenames might cause problems */ import fs from "fs" // read and write files import path from "path" // get relative path import matter from "gray-matter" // parse markdown metadata -// import createDOMPurify from "dompurify" // sanitize result html -// import { JSDOM } from "jsdom" // create empty window for fom purifier to work. Morea info here: https://github.com/cure53/DOMPurify import toc from "markdown-toc" // table of contents generation -// const window = new JSDOM("").window -// const DOMPurify = createDOMPurify(window) - const dirPath = "./markdown" // where it will look for markdown documents -const outPath = "./src/pages.json" // path to the json database +const outPath = "./src/data" // path to the json database -const removeExceptionArray = ["content", "meta"] // gray-matter creates unnecessary properties +// data that will be converted to JSON string +const result = { + date: {}, + tags: {}, + posts: {}, +} -const pageList = {} // data that will be converted to JSON string +// creates directory/directories +// https://stackoverflow.com/a/40686946/12979111 +function mkDirByPathSync(targetDir, { isRelativeToScript = false } = {}) { + const sep = path.sep + const initDir = path.isAbsolute(targetDir) ? sep : "" + const baseDir = isRelativeToScript ? __dirname : "." + + return targetDir.split(sep).reduce((parentDir, childDir) => { + const curDir = path.resolve(baseDir, parentDir, childDir) + try { + fs.mkdirSync(curDir) + } catch (err) { + if (err.code === "EEXIST") { + // curDir already exists! + return curDir + } + + // To avoid `EISDIR` error on Mac and `EACCES`-->`ENOENT` and `EPERM` on Windows. + if (err.code === "ENOENT") { + // Throw the original parentDir error on curDir `ENOENT` failure. + throw new Error( + `EACCES: permission denied, mkdir '${parentDir}'` + ) + } + + const caughtErr = + ["EACCES", "EPERM", "EISDIR"].indexOf(err.code) > -1 + if ( + !caughtErr || + (caughtErr && curDir === path.resolve(targetDir)) + ) { + throw err // Throw if it's just the last created dir. + } + } + + return curDir + }, initDir) +} -// big brain recursive function // only supports folders and files (no symbolic links) -// does not scale well for large amount of folders and files -function addFiles(filesPath: string) { +// does not scale well for large number of folders +// it calls itself for every directory it finds +function recursiveParser(fileOrFolderPath: string) { // ignore if file/directory name starts with a underscore - const fileOrFolderName = filesPath.substring(filesPath.lastIndexOf("/") + 1) + const fileOrFolderName = fileOrFolderPath.substring( + fileOrFolderPath.lastIndexOf("/") + 1 + ) if (fileOrFolderName.startsWith("_")) return - // not perfect. Some filenames might cause problem. - const stats = fs.lstatSync(filesPath) // checks if the path leads to a directory or a file + // not perfect. Some filenames might cause problems. + const stats = fs.lstatSync(fileOrFolderPath) // checks if the path leads to a directory or a file // don't use replaceAll - const urlPath = `/${path.relative(dirPath, filesPath)}` // path tha will be used for url - .replace(/\.[^/.]+$/, "") // remove .md file extension + const urlPath = `/${path.relative(dirPath, fileOrFolderPath)}` // path that will be used as site url + .replace(/\.[^/.]+$/, "") // remove file extension .replace(/ /g, "-") // replace space with a dash "-" // if it's a directory, apply this function to every files/folders in it - // if it's a file, read and add it to pageList + // if it's a file, parse and save it to file if (stats.isDirectory()) { - fs.readdirSync(filesPath).map((child) => - addFiles(`${filesPath}/${child}`) + fs.readdirSync(fileOrFolderPath).map((child) => + recursiveParser(`${fileOrFolderPath}/${child}`) ) } else if (stats.isFile()) { // skip if file is not a markdown file if (!fileOrFolderName.endsWith(".md")) { - console.log(`Ignoring non markdown file at: ${filesPath}`) + console.log(`Ignoring non markdown file at: ${fileOrFolderPath}`) return } - pageList[urlPath] = matter(fs.readFileSync(filesPath, "utf8")) // parse markdown metadata + const parsedMarkdown = matter(fs.readFileSync(fileOrFolderPath, "utf8")) // parse markdown metadata + const contentJSONFile = `${outPath}/posts${urlPath}.json` - // sanitizing should happens here but this code removes blockquote for some reason - // I might have to take a look at https://github.com/cure53/DOMPurify/issues/186 later - // pageList[urlPath].content = DOMPurify.sanitize( - // pageList[urlPath].content - // ) - - pageList[urlPath].meta = pageList[urlPath].data // change property name from data to meta - - pageList[urlPath].meta.toc = toc(pageList[urlPath].content).content - // removes unnecessary data - Object.keys(pageList[urlPath]).forEach( - (key) => - removeExceptionArray.includes(key) || - delete pageList[urlPath][key] + mkDirByPathSync( + contentJSONFile.substring(0, contentJSONFile.lastIndexOf("/") + 1) ) + + // write content to json file + fs.writeFileSync( + contentJSONFile, + JSON.stringify({ + content: parsedMarkdown.content, + }) + ) + + result.posts[urlPath] = parsedMarkdown.data + + // date + if (!result.posts[urlPath].date) { + throw Error(`Date does not exist in file: ${urlPath}`) + } + result.posts[urlPath].date = new Date( + parsedMarkdown.data.date + ).toLocaleString("default", { + month: "short", + day: "numeric", + year: "numeric", + }) + if (result.date[result.posts[urlPath].date]) + result.date[result.posts[urlPath].date].push(urlPath) + else result.date[result.posts[urlPath].date] = [urlPath] + + //tags + if (result.posts[urlPath].tags) { + result.posts[urlPath].tags.forEach((tag) => { + if (result.tags[tag]) result.tags[tag].push(urlPath) + else result.tags[tag] = [urlPath] + }) + } + + // toc + result.posts[urlPath].toc = toc(result.posts[urlPath].content).content } } -// start recursive function + check if it's a directory +/** Step 1 + * Deleting existing files + */ +try { + fs.rmSync(`${outPath}/posts`, { recursive: true }) + // eslint-disable-next-line no-empty +} catch (err) {} + +try { + fs.unlinkSync(`${outPath}/posts.json`) + // eslint-disable-next-line no-empty +} catch (err) {} + +/** Step 2 + * Populate result and write to src/data/posts/ + */ + +// check if it's a directory and start recursive function if (fs.lstatSync(dirPath).isDirectory()) { - addFiles(dirPath) + recursiveParser(dirPath) } else { - console.log("Path is not a directory. Result file will be empty.") + throw Error("Initial path given does not lead to a directory") } -// write to json file -fs.writeFileSync(outPath, JSON.stringify(pageList) + "\n") +/** Step 3 + * write to src/data/posts.json + */ + +fs.writeFileSync(`${outPath}/posts.json`, JSON.stringify(result) + "\n") diff --git a/source/markdown/_template.md b/source/markdown/_template.md deleted file mode 100644 index 050964d..0000000 --- a/source/markdown/_template.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: -comment: -licenses: -widgets: -article: -author: ---- - -Put something here diff --git a/source/markdown/about.md b/source/markdown/about.md index bf7cd4c..69bc4d8 100644 --- a/source/markdown/about.md +++ b/source/markdown/about.md @@ -1,6 +1,5 @@ --- title: About -author: developomp date: April 20, 2021 --- diff --git a/source/markdown/games.md b/source/markdown/games.md index 725f37e..cb3c03e 100644 --- a/source/markdown/games.md +++ b/source/markdown/games.md @@ -1,7 +1,6 @@ --- title: games date: Aug 16, 2020 -author: developomp --- - [TicTacToe](/games/tictactoe) diff --git a/source/markdown/goals.md b/source/markdown/goals.md index 7bee78d..c2b24c3 100644 --- a/source/markdown/goals.md +++ b/source/markdown/goals.md @@ -1,7 +1,6 @@ --- title: goals -date: May 11, 2021 -author: developomp +date: 2021-05-11 --- - skill diff --git a/source/markdown/quotes/1.md b/source/markdown/quotes/1.md index 1b1563f..538dcc2 100644 --- a/source/markdown/quotes/1.md +++ b/source/markdown/quotes/1.md @@ -1,8 +1,8 @@ --- title: Quote NO.1 date: Aug 16, 2020 -tags: quotes -author: developomp +tags: + - quotes --- > "Get the fuck out of my lawn" diff --git a/source/markdown/quotes/2.md b/source/markdown/quotes/2.md index 9e8c3f2..6c6d7c2 100644 --- a/source/markdown/quotes/2.md +++ b/source/markdown/quotes/2.md @@ -1,8 +1,8 @@ --- title: Quote NO.2 date: Feb 20, 2021 -tags: quotes -author: developomp +tags: + - quotes --- In a Q&A session in Aalto Talk with Linus Torvalds, hosted by Aalto Center for Entrepreneurship (ACE) in Otaniemi. diff --git a/source/markdown/quotes/3.md b/source/markdown/quotes/3.md index 3de47ef..a2998e4 100644 --- a/source/markdown/quotes/3.md +++ b/source/markdown/quotes/3.md @@ -1,8 +1,8 @@ --- title: Quote NO.3 date: March 18, 2021 -tags: quotes -author: developomp +tags: + - quotes --- In the introduction of one of his book: "The Future of the mind" (9th paragraph) diff --git a/source/markdown/quotes/me/1.md b/source/markdown/quotes/me/1.md index ceaf35a..5b41c84 100644 --- a/source/markdown/quotes/me/1.md +++ b/source/markdown/quotes/me/1.md @@ -1,8 +1,8 @@ --- title: My Quote NO.1 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Let's find problems in ourselves first diff --git a/source/markdown/quotes/me/10.md b/source/markdown/quotes/me/10.md index b54d7bc..aa3b37b 100755 --- a/source/markdown/quotes/me/10.md +++ b/source/markdown/quotes/me/10.md @@ -1,8 +1,8 @@ --- title: My Quote NO.10 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Don't forget what you planned to be diff --git a/source/markdown/quotes/me/11.md b/source/markdown/quotes/me/11.md index 7371cc4..68a16e7 100755 --- a/source/markdown/quotes/me/11.md +++ b/source/markdown/quotes/me/11.md @@ -1,8 +1,8 @@ --- title: My Quote NO.11 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Yesterday is a lecture for today diff --git a/source/markdown/quotes/me/12.md b/source/markdown/quotes/me/12.md index 463ad6d..ea4edb3 100755 --- a/source/markdown/quotes/me/12.md +++ b/source/markdown/quotes/me/12.md @@ -1,8 +1,8 @@ --- title: My Quote NO.12 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Practice isn't a action. Its a formation. diff --git a/source/markdown/quotes/me/13.md b/source/markdown/quotes/me/13.md index 5904508..ba5092a 100755 --- a/source/markdown/quotes/me/13.md +++ b/source/markdown/quotes/me/13.md @@ -1,8 +1,8 @@ --- title: My Quote NO.13 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Don't forget the peaks and the valleys of your life. diff --git a/source/markdown/quotes/me/14.md b/source/markdown/quotes/me/14.md index 7c5330e..dbde39e 100755 --- a/source/markdown/quotes/me/14.md +++ b/source/markdown/quotes/me/14.md @@ -1,8 +1,8 @@ --- title: My Quote NO.14 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Those who see only the present lose their future.
diff --git a/source/markdown/quotes/me/15.md b/source/markdown/quotes/me/15.md index a90498b..a97c12b 100755 --- a/source/markdown/quotes/me/15.md +++ b/source/markdown/quotes/me/15.md @@ -1,8 +1,8 @@ --- title: My Quote NO.15 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > The depth of a proverb is proportional to the depth of the reader's thoughts. diff --git a/source/markdown/quotes/me/16.md b/source/markdown/quotes/me/16.md index 6d1fa2c..45f6adb 100755 --- a/source/markdown/quotes/me/16.md +++ b/source/markdown/quotes/me/16.md @@ -1,8 +1,8 @@ --- title: My Quote NO.16 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Words of wisdom deepens the more you think about it. diff --git a/source/markdown/quotes/me/17.md b/source/markdown/quotes/me/17.md index 79c2057..b283e96 100755 --- a/source/markdown/quotes/me/17.md +++ b/source/markdown/quotes/me/17.md @@ -1,8 +1,8 @@ --- title: My Quote NO.17 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > God didn't bless us with the best, so let's do it ourself. diff --git a/source/markdown/quotes/me/18.md b/source/markdown/quotes/me/18.md index 18e5d47..2d72d41 100755 --- a/source/markdown/quotes/me/18.md +++ b/source/markdown/quotes/me/18.md @@ -1,8 +1,8 @@ --- title: My Quote NO.18 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > I got a purpose now, so why sit down?
diff --git a/source/markdown/quotes/me/19.md b/source/markdown/quotes/me/19.md index 6f4886c..c4cc22b 100755 --- a/source/markdown/quotes/me/19.md +++ b/source/markdown/quotes/me/19.md @@ -1,8 +1,8 @@ --- title: My Quote NO.19 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Finding the problem is the first step to solving anything diff --git a/source/markdown/quotes/me/2.md b/source/markdown/quotes/me/2.md index deada42..144d175 100644 --- a/source/markdown/quotes/me/2.md +++ b/source/markdown/quotes/me/2.md @@ -1,8 +1,8 @@ --- title: My Quote NO.2 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Don't be great for your fame, but be famous for your greatness. diff --git a/source/markdown/quotes/me/20.md b/source/markdown/quotes/me/20.md index 0637b87..ab381c5 100755 --- a/source/markdown/quotes/me/20.md +++ b/source/markdown/quotes/me/20.md @@ -1,8 +1,8 @@ --- title: My Quote NO.20 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Look at the clock and wait for the next minute to come.
diff --git a/source/markdown/quotes/me/21.md b/source/markdown/quotes/me/21.md index ae29536..04625ce 100755 --- a/source/markdown/quotes/me/21.md +++ b/source/markdown/quotes/me/21.md @@ -1,8 +1,8 @@ --- title: My Quote NO.21 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Kill an ant. Throw it and try to find it.
diff --git a/source/markdown/quotes/me/22.md b/source/markdown/quotes/me/22.md index 81ef4f8..7827285 100755 --- a/source/markdown/quotes/me/22.md +++ b/source/markdown/quotes/me/22.md @@ -1,8 +1,8 @@ --- title: My Quote NO.22 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Lot of things learned, nothing useful. diff --git a/source/markdown/quotes/me/23.md b/source/markdown/quotes/me/23.md index cb49a4b..3426b65 100755 --- a/source/markdown/quotes/me/23.md +++ b/source/markdown/quotes/me/23.md @@ -1,8 +1,8 @@ --- title: My Quote NO.23 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > To give 10, one should know a 100. diff --git a/source/markdown/quotes/me/24.md b/source/markdown/quotes/me/24.md index c037bc5..a40132d 100755 --- a/source/markdown/quotes/me/24.md +++ b/source/markdown/quotes/me/24.md @@ -1,8 +1,8 @@ --- title: My Quote NO.24 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Think about everything diff --git a/source/markdown/quotes/me/25.md b/source/markdown/quotes/me/25.md index 8125ed9..98b811b 100644 --- a/source/markdown/quotes/me/25.md +++ b/source/markdown/quotes/me/25.md @@ -1,8 +1,8 @@ --- title: My Quote NO.25 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Challenge yourself to give your best at all time. diff --git a/source/markdown/quotes/me/26.md b/source/markdown/quotes/me/26.md index 56f9fac..a2156a9 100644 --- a/source/markdown/quotes/me/26.md +++ b/source/markdown/quotes/me/26.md @@ -1,8 +1,8 @@ --- title: My Quote NO.26 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Escape from the valleys of life doesn't happen in an instant. diff --git a/source/markdown/quotes/me/27.md b/source/markdown/quotes/me/27.md index dab5323..fb46474 100644 --- a/source/markdown/quotes/me/27.md +++ b/source/markdown/quotes/me/27.md @@ -1,8 +1,8 @@ --- title: My Quote NO.27 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Sometimes I am amazed by the fact that I am aware of anything. diff --git a/source/markdown/quotes/me/28.md b/source/markdown/quotes/me/28.md index 3cd2465..8c203e6 100644 --- a/source/markdown/quotes/me/28.md +++ b/source/markdown/quotes/me/28.md @@ -1,8 +1,8 @@ --- title: My Quote NO.28 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Mind is like a sword. It will be dull if you stop sharpening it. diff --git a/source/markdown/quotes/me/29.md b/source/markdown/quotes/me/29.md index 387f33c..8cf8e5d 100644 --- a/source/markdown/quotes/me/29.md +++ b/source/markdown/quotes/me/29.md @@ -1,8 +1,8 @@ --- title: My Quote NO.29 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Even if the day comes when we can live for hundreds of years, we'll still make a world where hard working is a necessity. diff --git a/source/markdown/quotes/me/3.md b/source/markdown/quotes/me/3.md index c303f66..bddbd71 100644 --- a/source/markdown/quotes/me/3.md +++ b/source/markdown/quotes/me/3.md @@ -1,8 +1,8 @@ --- title: My Quote NO.3 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > If you have a proverbs, record it. Treat it as if it's a jewel. In the future, this fine gem will be the eyes of many, and a lamp to light the ways of people. diff --git a/source/markdown/quotes/me/30.md b/source/markdown/quotes/me/30.md index 2c2dede..61e0f9a 100644 --- a/source/markdown/quotes/me/30.md +++ b/source/markdown/quotes/me/30.md @@ -1,8 +1,8 @@ --- title: My Quote NO.30 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > If you think too much about the answer, you'll forget what the question was. diff --git a/source/markdown/quotes/me/31.md b/source/markdown/quotes/me/31.md index 2abb293..9321756 100644 --- a/source/markdown/quotes/me/31.md +++ b/source/markdown/quotes/me/31.md @@ -1,8 +1,8 @@ --- title: My Quote NO.31 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > People earns highest respect from me are those who appreciate critiques. diff --git a/source/markdown/quotes/me/32.md b/source/markdown/quotes/me/32.md index b8813c7..04f5cf0 100644 --- a/source/markdown/quotes/me/32.md +++ b/source/markdown/quotes/me/32.md @@ -1,8 +1,8 @@ --- title: My Quote NO.32 date: May 10, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Any field is fascinating as long as there are no exams. diff --git a/source/markdown/quotes/me/4.md b/source/markdown/quotes/me/4.md index 27448c5..4c6d08c 100644 --- a/source/markdown/quotes/me/4.md +++ b/source/markdown/quotes/me/4.md @@ -1,8 +1,8 @@ --- title: My Quote NO.4 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > I don't want to call it learning that I didn't learn with my heart when I learn. diff --git a/source/markdown/quotes/me/5.md b/source/markdown/quotes/me/5.md index c0e4d5a..f3f2770 100644 --- a/source/markdown/quotes/me/5.md +++ b/source/markdown/quotes/me/5.md @@ -1,8 +1,8 @@ --- title: My Quote NO.5 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Don't define anything different from normality as a failure. diff --git a/source/markdown/quotes/me/6.md b/source/markdown/quotes/me/6.md index e42bc6d..eb01753 100644 --- a/source/markdown/quotes/me/6.md +++ b/source/markdown/quotes/me/6.md @@ -1,8 +1,8 @@ --- title: My Quote NO.6 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > What did you do when everyone in the world ran? diff --git a/source/markdown/quotes/me/7.md b/source/markdown/quotes/me/7.md index bc30103..6d1027a 100755 --- a/source/markdown/quotes/me/7.md +++ b/source/markdown/quotes/me/7.md @@ -1,8 +1,8 @@ --- title: My Quote NO.7 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > The 1000 miles you've walked so far are not important. What's important is diff --git a/source/markdown/quotes/me/8.md b/source/markdown/quotes/me/8.md index 30e94d5..fe980c5 100755 --- a/source/markdown/quotes/me/8.md +++ b/source/markdown/quotes/me/8.md @@ -1,8 +1,8 @@ --- title: My Quote NO.8 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > Out of all the thing you've done and haven't done, which one do you regret more? diff --git a/source/markdown/quotes/me/9.md b/source/markdown/quotes/me/9.md index 5bd4066..987f564 100755 --- a/source/markdown/quotes/me/9.md +++ b/source/markdown/quotes/me/9.md @@ -1,8 +1,8 @@ --- title: My Quote NO.9 date: March 22, 2021 -tags: quotes -author: developomp +tags: + - quotes --- > People who don't know what they're talking about are the poorest people in the world. diff --git a/source/package.json b/source/package.json index 1ad8e0e..f1f0a30 100644 --- a/source/package.json +++ b/source/package.json @@ -26,7 +26,6 @@ "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^13.1.9", - "dompurify": "^2.2.8", "gray-matter": "^4.0.3", "local-storage-fallback": "^4.1.2", "markdown-toc": "^1.2.0", diff --git a/source/src/pages/Page.tsx b/source/src/pages/Page.tsx index 39f017e..9015e24 100644 --- a/source/src/pages/Page.tsx +++ b/source/src/pages/Page.tsx @@ -2,83 +2,107 @@ import React from "react" import marked from "marked" import { Helmet } from "react-helmet-async" -import pages from "../pages.json" +import posts from "../data/posts.json" import NotFound from "./NotFound" +import Spinner from "../components/Spinner" -export default class Page extends React.Component { +interface PageProps {} + +interface PageState { // eslint-disable-next-line @typescript-eslint/no-explicit-any - fetched: any + fetchedPage: any + loading: boolean +} +export default class Page extends React.Component { constructor(props) { super(props) + this.state = { + fetchedPage: undefined, + loading: true, + } + } - const fetched = pages[location.pathname.replace(/\/$/, "")] // remove a trailing slash - if (!fetched) return + async componentDidMount() { + const url = location.pathname.replace(/\/$/, "") + const fetchedPage = posts.posts[url] // remove a trailing slash - fetched.content = fetched?.content ? fetched.content : "No content" - fetched.toc = fetched.meta?.toc ? fetched.meta.toc : undefined - fetched.title = fetched.meta?.title ? fetched.meta.title : "No title" - fetched.date = fetched.meta?.date ? fetched.meta.date : "Unknown date" - fetched.author = fetched.meta?.author - ? fetched.meta.author - : "Unknown author" + if (!fetchedPage) { + this.setState({ + loading: false, + }) + return + } - this.fetched = fetched + const fetched_content = (await import(`../data/posts${url}.json`)) + .content + fetchedPage.content = fetched_content ? fetched_content : "No content" + fetchedPage.toc = fetchedPage?.toc ? fetchedPage.toc : undefined + fetchedPage.title = fetchedPage?.title ? fetchedPage.title : "No title" + fetchedPage.date = fetchedPage?.date ? fetchedPage.date : "Unknown date" + + this.setState({ + fetchedPage: fetchedPage, + loading: false, + }) } render() { - if (!this.fetched) return + if (this.state.loading) { + return + } else { + if (!this.state.fetchedPage) return - return ( - <> - - pomp | {this.fetched.title} + return ( + <> + + pomp | {this.state.fetchedPage.title} - - - - - - - -
-

{this.fetched.title}

- - Published on {this.fetched.date} by{" "} - {this.fetched.author} - -
- { - this.fetched.toc && ( - <> -
- Table of Content: -
-
-
- - ) // add toc if it exists - } -
-
- - ) + + + + +
+

{this.state.fetchedPage.title}

+ + Published on {this.state.fetchedPage.date} by + developomp + +
+ { + this.state.fetchedPage.toc && ( + <> +
+ Table of Content: +
+
+
+ + ) // add toc if it exists + } +
+
+ + ) + } } } diff --git a/source/src/pages/PostList.tsx b/source/src/pages/PostList.tsx index 7423305..01c0dfe 100644 --- a/source/src/pages/PostList.tsx +++ b/source/src/pages/PostList.tsx @@ -5,7 +5,7 @@ import marked from "marked" import { Helmet } from "react-helmet-async" import theming from "../theming" -import pages from "../pages.json" +import posts from "../data/posts.json" const StyledPostList = styled.div` padding-top: 2rem; @@ -50,62 +50,77 @@ const StyledPostCard = styled.div` padding: 10px 20px; ` -interface HomeProps { +interface PostListProps { title: string howMany?: number } -export default class PostList extends React.Component { +interface PostListState { + howMany: number + isLimited: boolean h1Text: string - PostCards: Array = [] + PostCards: Array +} +export default class PostList extends React.Component< + PostListProps, + PostListState +> { constructor(props) { super(props) - let howMany = props.howMany | 0 - + const howMany = props.howMany | 0 const isLimited = howMany ? true : false + const h1Text = isLimited ? `${howMany} recent posts` : "All posts" - this.h1Text = isLimited ? `${howMany} recent posts` : "All posts" + this.state = { + howMany: howMany, + isLimited: isLimited, + h1Text: h1Text, + PostCards: [], + } + } - for (const pagePath in pages) { - if (isLimited && howMany <= 0) continue + async componentDidMount() { + const PostCards: Array = [] + let howMany = this.state.howMany - const post = pages[pagePath] + for (const postPath in posts.posts) { + if (this.state.isLimited && howMany <= 0) continue + const data = await import(`../data/posts${postPath}.json`) - this.PostCards.push( - + const post = posts.posts[postPath] + + PostCards.push( + - - {post.meta?.title - ? post.meta.title - : "Unknown title"} + + {post?.title ? post.title : "Unknown title"} - Published on{" "} - {post.meta?.date ? post.meta.date : "Unknown date"} by{" "} - {post.meta?.author - ? post.meta.author - : "Unknown author"} + Published on {post?.date ? post.date : "Unknown date"}
- Read more + Read more ) howMany-- } + this.setState({ + PostCards: PostCards, + }) } render() { @@ -116,18 +131,16 @@ export default class PostList extends React.Component { - - - {this.h1Text} + {this.state.h1Text}
- {this.PostCards} + {this.state.PostCards} )