179 lines
6.8 KiB
TypeScript
179 lines
6.8 KiB
TypeScript
|
/**
|
||
|
|
* ==============================================================================
|
||
|
|
* 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",
|
||
|
|
};
|
||
|
|
};
|