tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor single blog posts

Browse Source
This commit is contained in:
Benjamin Toby
2024-01-01 02:49:58 +01:00
parent b99a807788
commit 2ad9e44e19
9 changed files with 842 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/blog/[single].tsx
-178
View File
@@ -1,178 +0,0 @@
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
import Head from "next/head";
import type { InferGetStaticPropsType, GetStaticProps, GetStaticPaths } from "next";
const datasquirel = require("datasquirel");
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
import GeneralLayout from "../../layouts/general_layout/GeneralLayout";
import TextShuffler from "../../components/actions/TextShuffler";
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/
export default function BlogIndex({ blogPost }: InferGetStaticPropsType<typeof getStaticProps>) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<Head>
<title>{blogPost.title} | Tben.me Blog</title>
<meta
name="description"
content={blogPost.excerpt}
/>
</Head>
<GeneralLayout>
<div className="flex flex-col items-start gap-2 mb-8 max-w-6xl w-full">
<button
className="bg-transparent text-white/50 border-2 border-solid border-white/20"
onClick={(e) => {
window.history.back();
}}
>
Back
</button>
<h1 className="m-0">
<TextShuffler textInput={blogPost.title} />
</h1>
<span className="text-lg">
<TextShuffler textInput={blogPost.excerpt} />
</span>
<span className="text-base opacity-50">
<TextShuffler textInput={blogPost.date_created.substring(0, 24)} />
</span>
</div>
<span
className="flex flex-col items-start max-w-6xl w-full gap-4 text-xl"
dangerouslySetInnerHTML={{ __html: blogPost.body }}
></span>
</GeneralLayout>
</React.Fragment>
);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* Server Side Props or Static Props
* ==============================================================================
*/
export const getStaticProps: GetStaticProps = async ({ params }) => {
// ## Environment processes
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## User Authentication
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Page/Site Data Data Fetching
const postsResponse = await datasquirel.get({
key: process.env.DATASQUIREL_API_KEY,
db: "tbenme",
query: `select * from blog_posts WHERE slug='${params?.single}'`,
});
const post = postsResponse.payload[0];
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Server Props Return
return {
props: {
blogPost: post,
},
revalidate: 3600,
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
};
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* Server Side Props or Static Props
* ==============================================================================
*/
export const getStaticPaths: GetStaticPaths = async () => {
/**
* Data fetching
*
* @abstract fetch date from the server or externnal source
*/
const postsResponse = await datasquirel.get({
key: process.env.DATASQUIREL_API_KEY,
db: "tbenme",
query: `select slug from blog_posts`,
});
const posts: { slug: string }[] | null = postsResponse.payload;
const paths = posts?.map((entry) => {
return {
params: { single: entry.slug },
};
});
return {
paths: paths ? paths : [],
fallback: "blocking",
};
};