Cleanup post caching

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;