/** * ============================================================================== * Imports * ============================================================================== */ import React from "react"; import Head from "next/head"; import type { InferGetStaticPropsType, GetStaticProps, GetStaticPropsContext } from "next"; const datasquirel = require("datasquirel"); /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ import GeneralLayout from "../../layouts/general_layout/GeneralLayout"; import TextShuffler from "../../components/actions/TextShuffler"; // import httpFetch from "../../functions/backend/httpFetch"; /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props */ export default function BlogIndex(props: InferGetStaticPropsType) { /** * Get Contexts * * @abstract { React.useContext } */ /** ********************************************** */ /** * Javascript Variables * * @abstract Non hook variables and functions */ /** ********************************************** */ /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ /** ********************************************** */ /** * Function Return * * @abstract Main Function Return */ return ( Blog | Tben.me

{props.blogPosts.map((post: { slug: string; title: string; excerpt: string; date_created: string }, index: number) => (

))}
); /** ********************************************** */ } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * Server Side Props or Static Props * ============================================================================== */ export const getStaticProps: GetStaticProps = async ({ params }: GetStaticPropsContext) => { /** * User Auth * * @abstract grab user */ /** ********************************************** */ /** * 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 title,slug,excerpt,date_created from blog_posts limit 10", }); if (!postsResponse.success) { return { redirect: { destination: "/", permanent: false, }, }; } const posts = postsResponse.payload; /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ // ## Server Props Return return { props: { blogPosts: posts, }, revalidate: 3600, }; /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ };