Refactor single blog posts

2024-01-01 02:49:58 +01:00
parent b99a807788
commit 2ad9e44e19
9 changed files with 842 additions and 733 deletions
@@ -0,0 +1,49 @@
+"use client";
+
+/////////////////////////////////////////////
+//* IMPORTS
+/////////////////////////////////////////////
+import React from "react";
+import TextShuffler from "../../../components/actions/TextShuffler";
+
+/////////////////////////////////////////////
+//* Main Function
+/////////////////////////////////////////////
+/**
+ * Blog page index
+ * ==============================================================================
+ */
+export default function Main({ post }: { post: any }) {
+    //* Main Function Return
+
+    return (
+        <React.Fragment>
+            <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={post.title} />
+                </h1>
+                <span className="text-lg">
+                    <TextShuffler textInput={post.excerpt} />
+                </span>
+                <span className="text-base opacity-50">
+                    <TextShuffler
+                        textInput={post.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: post.body }}
+            ></span>
+        </React.Fragment>
+    );
+}
@@ -0,0 +1,75 @@
+/////////////////////////////////////////////
+//* IMPORTS
+/////////////////////////////////////////////
+import React from "react";
+import { Metadata, ResolvingMetadata } from "next";
+import datasquirel from "datasquirel";
+
+import { redirect } from "next/navigation";
+import Main from "./Main";
+
+export const revalidate = 3600;
+
+/////////////////////////////////////////////
+//* Metadata
+/////////////////////////////////////////////
+
+async function getPost({ single }: { single: string }) {
+    const postResponse = await datasquirel.get({
+        key: process.env.DATASQUIREL_API_KEY,
+        db: process.env.DB_NAME,
+        query: "select * from blog_posts where slug = ?",
+        queryValues: [single],
+    });
+
+    const post =
+        postResponse?.success && postResponse.payload?.[0]
+            ? postResponse.payload[0]
+            : null;
+
+    return post;
+}
+
+export async function generateMetadata(
+    { params, searchParams }: any,
+    parent: ResolvingMetadata
+): Promise<Metadata> {
+    const single = params.single;
+
+    const post = await getPost({ single: single });
+
+    return {
+        title: post.title,
+        description: post.excerpt,
+    };
+}
+
+/////////////////////////////////////////////
+//* Main Function
+/////////////////////////////////////////////
+/**
+ * Blog page index
+ * ==============================================================================
+ */
+export default async function BlogIndex({
+    params: { single },
+}: {
+    params: any;
+}) {
+    //* Data fetching
+    const post = await getPost({ single: single });
+
+    if (!post) {
+        return redirect("/blog");
+    }
+
+    //* Main Function Return
+    /////////////////////////////////////////////
+    return (
+        <React.Fragment>
+            <Main post={post} />
+        </React.Fragment>
+    );
+
+    /** ********************************************** */
+}