Cleanup post caching

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<any>(null);

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$/,

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 <Component {...pageProps} />
 }

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 (
         <Layout name='' title='PaulW.XYZ'>
             <section className='block'>
@@ -25,7 +25,7 @@ function HomePage({ posts }: any) {
             <section className='block'>
                 <table style={{ width: '100%' }}>
                     <th className='h2'>Posts</th> <th>Posted</th>
-                    {Posts?.map((post: any) => {
+                    {props.postsMeta?.map((post: any) => {
                         return <tr key={post.slug}>
                             <td className='h5'>
                                 <Link href={`posts/${post.slug}`}>
@@ -42,4 +42,10 @@ function HomePage({ posts }: any) {
     )
 }
 
+export async function getServerSideProps() {
+    return {
+        props: { postsMeta: getPostsMeta() }
+    };
+}
+
 export default HomePage;

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 (<>
         <Layout name={post.title} title={post.title} ancestors={[{ name: 'Posts', path: 'posts' }]}>
             <div className={style.imageBlock} style={{ backgroundImage: post.cover ? `url(/assets/images/${post.cover})` : '' }}>

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 (
         <Layout name='Posts'>
             <>
             <section className='h4 block'>
             Post Name <span style={{float: 'right', margin: 'auto 1rem'}}> Created on </span> <span style={{float: 'right', margin: 'auto 1rem'}}>Last Updated </span> 
             </section>
-            {Posts.map((post: any) => {
+            {props.postsMeta.map((post: any) => {
                 return <section key='' className='h5 block'>
                     <Link href={`posts/${post.slug}`}>
                         {post.title}
@@ -27,4 +27,10 @@ function HomePage({posts}: any) {
     )
 }
 
+export async function getServerSideProps() {
+    return {
+        props: { postsMeta: getPostsMeta() }
+    };
+}
+
 export default HomePage;

util/post-cache.d.ts

@@ -1 +0,0 @@
-export default function cachePostLinkData(): any;

util/post-cache.js

@@ -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;
-    }
-}

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<any> = []): Post[];
-export function getPost(rawslug: string, filter: Array<any> = []): Post;
+export function getPost(rawslug: string, filter: Array<any> = []): Post;
+export function getPostsMeta(): PostMeta[];

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 };
+
+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 };