updates

2023-07-25 14:43:08 +01:00
parent 3f285b9399
commit a90bb8aed7
6 changed files with 271 additions and 191 deletions
@@ -0,0 +1,178 @@
+/**
+ * ==============================================================================
+ * 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",
+    };
+};
@@ -0,0 +1,72 @@
+/////////////////////////////////////////////
+//* IMPORTS
+/////////////////////////////////////////////
+import React from "react";
+import { Metadata } from "next";
+const datasquirel = require("datasquirel");
+
+import { headers, cookies } from "next/headers";
+
+/////////////////////////////////////////////
+//* Metadata
+/////////////////////////////////////////////
+
+export const metadata: Metadata = {
+    title: "Blog posts | Tben.me",
+    description: "Tech talks and tutorials by Tben",
+};
+
+/////////////////////////////////////////////
+//* Main Function
+/////////////////////////////////////////////
+/**
+ * Blog page index
+ * ==============================================================================
+ */
+export default async function BlogIndex() {
+    //* Data fetching
+    /////////////////////////////////////////////
+    const postsResponse = await datasquirel.get({
+        key: process.env.DATASQUIREL_API_KEY,
+        db: process.env.DB_NAME,
+        query: "select title,slug,excerpt,date_created from blog_posts limit 10",
+    });
+
+    const posts = postsResponse?.success ? postsResponse.payload : [];
+    try {
+        const test = await fetch("http://localhost:5000/api/test");
+        const result = await test.json();
+        console.log(result);
+    } catch (error: any) {
+        console.log(error.message);
+    }
+
+    console.log("Referer:", headers().get("referer"));
+    console.log("Host:", headers().get("host"));
+    // console.log(nextHeaders.cookies());
+
+    //* Main Function Return
+    /////////////////////////////////////////////
+    return (
+        <React.Fragment>
+            <div className="flex flex-col items-start max-w-6xl w-full">
+                <h1 className="mb-8">My Blog</h1>
+                <div className="flex flex-col items-start w-full gap-4">
+                    {posts.map((post: { slug: string; title: string; excerpt: string; date_created: string }, index: number) => (
+                        <a
+                            key={index}
+                            href={`/blog/${post.slug}`}
+                            className="flex flex-col items-start gap-2 w-full hover:bg-blue-600 border border-solid border-white/20 p-8 transition-all bg-primary/10"
+                        >
+                            <h2 className="m-0">{post.title}</h2>
+                            <span className="opacity-80">{post.excerpt}</span>
+                            <span className="text-sm opacity-50">{post.date_created.substring(0, 24)}</span>
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </React.Fragment>
+    );
+
+    /** ********************************************** */
+}