From 415f950a42d99f1ea53ab8afefd559e45374062d Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 27 Apr 2022 04:03:21 -0400 Subject: [PATCH] Cleanup post caching --- components/fuzzy-bar.tsx | 2 +- next.config.js | 8 ++++---- pages/_app.tsx | 2 +- pages/index.tsx | 14 ++++++++++---- pages/posts/[page].tsx | 3 --- pages/posts/index.tsx | 16 +++++++++++----- util/post-cache.d.ts | 1 - util/post-cache.js | 16 ---------------- util/slug.d.ts | 17 +++++++++++++++-- util/slug.js | 30 ++++++++++++++++++++++++++---- 10 files changed, 68 insertions(+), 41 deletions(-) delete mode 100644 util/post-cache.d.ts delete mode 100644 util/post-cache.js diff --git a/components/fuzzy-bar.tsx b/components/fuzzy-bar.tsx index 3ca219c..c810e09 100644 --- a/components/fuzzy-bar.tsx +++ b/components/fuzzy-bar.tsx @@ -1,8 +1,8 @@ import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; import Fuzzy from './_fuzzy'; import pages from '../public/pages.json'; -import posts from '../public/posts.json'; import style from '../styles/fuzzy.module.css'; +import posts from '../public/posts.json' function FuzzyBar(): JSX.Element { const searchField = useRef(null); diff --git a/next.config.js b/next.config.js index df2edb3..971cbbe 100755 --- a/next.config.js +++ b/next.config.js @@ -6,13 +6,13 @@ module.exports = { webpack: (config, options) => { config.experiments = { asset: true }; - const { cachePostLinkData } = require('./util/post-cache'); + const { cachePostsMeta } = require('./util/slug'); config.plugins.push( { apply: (compiler) => { - compiler.hooks.beforeCompile.tap('cachePostLinkDataInit', _ => { - cachePostLinkData(); + compiler.hooks.initialize.tap('cachePostDataBC', _ => { + cachePostsMeta(); }); } } @@ -26,7 +26,7 @@ module.exports = { }, { test: /\.svg$/, - use: [{ loader: "@svgr/webpack" }], + use: [{ loader: '@svgr/webpack' }], }, { test: /\.md$/, diff --git a/pages/_app.tsx b/pages/_app.tsx index 8122073..8ee379d 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,6 +2,6 @@ import type { AppProps } from 'next/app' import 'normalize.css'; import '../styles/global.css'; -export default function MyApp({ Component, pageProps }: AppProps) { +export default function App({ Component, pageProps }: AppProps) { return } \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index fe2cc37..afb3fd1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,12 +2,12 @@ import Link from 'next/link'; import React from 'react'; import Layout from '../components/layout'; import Pages from '../public/pages.json'; -import Posts from '../public/posts.json'; import style from '../styles/home.module.css'; import prettyDatePrint from '../util/pretty-date'; +import { getPostsMeta, PostMeta } from '../util/slug'; -function HomePage({ posts }: any) { - Pages.sort((x, y) => { return (x.title).localeCompare(y.title) }); +function HomePage(props: {postsMeta: PostMeta[]}) { + props.postsMeta.sort((x, y) => { return (x.title).localeCompare(y.title) }); return (
@@ -25,7 +25,7 @@ function HomePage({ posts }: any) {
- {Posts?.map((post: any) => { + {props.postsMeta?.map((post: any) => { return
Posts Posted
@@ -42,4 +42,10 @@ function HomePage({ posts }: any) { ) } +export async function getServerSideProps() { + return { + props: { postsMeta: getPostsMeta() } + }; +} + export default HomePage; \ No newline at end of file diff --git a/pages/posts/[page].tsx b/pages/posts/[page].tsx index 19d3208..1eb62d6 100644 --- a/pages/posts/[page].tsx +++ b/pages/posts/[page].tsx @@ -1,12 +1,9 @@ import Layout from '../../components/layout'; -import { useRouter } from 'next/router'; import { getAllPosts, getPost } from '../../util/slug'; import ReactMarkdown from 'react-markdown'; -import Image from 'next/image'; import style from '../../styles/post.module.css'; function Post({ post }: any) { // eh - const router = useRouter(); return (<>
diff --git a/pages/posts/index.tsx b/pages/posts/index.tsx index 3471f60..88c680e 100644 --- a/pages/posts/index.tsx +++ b/pages/posts/index.tsx @@ -1,19 +1,19 @@ import Link from 'next/link'; import React from 'react'; import Layout from '../../components/layout'; -import Posts from '../../public/posts.json'; import prettyDatePrint from '../../util/pretty-date'; +import { getPostsMeta, PostMeta } from '../../util/slug'; -function HomePage({posts}: any) { - Posts.sort((x, y) => { return (x as any).title.localeCompare((x as any).title) }); - // todo: create a table-like interface +function HomePage(props: {postsMeta: PostMeta[]}) { + props.postsMeta.sort((x: any, y: any) => { return (x as any).title.localeCompare((y as any).title) }); + // todo: create a table-like user interface return ( <>
Post Name Created on Last Updated
- {Posts.map((post: any) => { + {props.postsMeta.map((post: any) => { return
{post.title} @@ -27,4 +27,10 @@ function HomePage({posts}: any) { ) } +export async function getServerSideProps() { + return { + props: { postsMeta: getPostsMeta() } + }; +} + export default HomePage; \ No newline at end of file diff --git a/util/post-cache.d.ts b/util/post-cache.d.ts deleted file mode 100644 index fb86317..0000000 --- a/util/post-cache.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function cachePostLinkData(): any; \ No newline at end of file diff --git a/util/post-cache.js b/util/post-cache.js deleted file mode 100644 index 87c102c..0000000 --- a/util/post-cache.js +++ /dev/null @@ -1,16 +0,0 @@ -const fs = require('fs'); -const { getAllPosts } = require('./slug'); -const { join } = require('path'); - -const publicDir = join(process.cwd(), 'public'); - -module.exports = { - cachePostLinkData: () => { - const posts = getAllPosts(['title', 'slug', 'created_at', 'last_updated']); - fs.writeFile(`${publicDir}/posts.json`, JSON.stringify(posts), (e) => { - if (e) - console.error(e); - }); - return posts; - } -} \ No newline at end of file diff --git a/util/slug.d.ts b/util/slug.d.ts index 4d89cb7..651655e 100644 --- a/util/slug.d.ts +++ b/util/slug.d.ts @@ -1,4 +1,17 @@ -interface Post { slug?: string, rawslug?: string, content?: string, title?: string }; +interface Post { + slug?: string; + rawslug?: string; + content?: string; + title?: string; +}; + +interface PostMeta { + title: string; + slug: string; + created_at: string; + last_updated: string; +}; export function getAllPosts(filter: Array = []): Post[]; -export function getPost(rawslug: string, filter: Array = []): Post; \ No newline at end of file +export function getPost(rawslug: string, filter: Array = []): Post; +export function getPostsMeta(): PostMeta[]; \ No newline at end of file diff --git a/util/slug.js b/util/slug.js index d57401a..bdd48bb 100644 --- a/util/slug.js +++ b/util/slug.js @@ -2,11 +2,13 @@ const fs = require('fs'); const matter = require('gray-matter'); const { join } = require('path'); -const postsDirectory = join(process.cwd(), 'posts'); +const postsDir = join(process.cwd(), 'posts'); +const cacheDir = join(process.cwd(), '.next', 'cache'); +const publicDir = join(process.cwd(), 'public'); function getPost(rawslug, filter = []) { const slug = rawslug.replace(/\.md$/, ''); - const path = join(postsDirectory, `${slug}.md`); + const path = join(postsDir, `${slug}.md`); const file = fs.readFileSync(path, 'utf-8'); const { data, content } = matter(file); @@ -35,7 +37,7 @@ function getPost(rawslug, filter = []) { } function getAllPosts(filter = []) { - const files = fs.readdirSync(postsDirectory); + const files = fs.readdirSync(postsDir); return files .filter(c => !c.match(/^\./)) @@ -44,4 +46,24 @@ function getAllPosts(filter = []) { }); } -module.exports = { getAllPosts, getPost }; \ No newline at end of file + +function cachePostsMeta() { // public access cache + const posts = getAllPosts(['title', 'slug', 'created_at', 'last_updated']); + fs.writeFile(join(publicDir, 'posts.json'), JSON.stringify(posts), (e) => { + if (e) + console.error(e); + }); + return posts; +} + +function getPostsMeta() { + const file = fs.readFileSync(join(publicDir, 'posts.json'), 'utf-8'); + + if (!file) { + return cachePostsMeta(); + } + + return JSON.parse(file); +} + +module.exports = { getAllPosts, getPost, getPostsMeta, cachePostsMeta }; \ No newline at end of file