/** * ============================================================================== * 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) { // ## Get Contexts /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ // ## Javascript Variables /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ // ## React Hooks { useState, useEffect, useRef, etc ... } /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ // ## Function Return return ( {blogPost.title} | Tben.me Blog

); /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * 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", }; };