tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor single blog posts

Browse Source
This commit is contained in:
Benjamin Toby
2024-01-01 02:49:58 +01:00
parent b99a807788
commit 2ad9e44e19
9 changed files with 842 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/[single].tsx
+12 -7
View File
@@ -5,7 +5,11 @@
*/
import React from "react";
import Head from "next/head";
import type { InferGetStaticPropsType, GetStaticProps, GetStaticPaths } from "next";
import type {
InferGetStaticPropsType,
GetStaticProps,
GetStaticPaths,
} from "next";
const datasquirel = require("datasquirel");
/** ********************************************** */
@@ -28,7 +32,9 @@ import TextShuffler from "../../components/actions/TextShuffler";
* ==============================================================================
* @param {Object} props - Server props
*/
export default function BlogIndex({ blogPost }: InferGetStaticPropsType<typeof getStaticProps>) {
export default function BlogIndex({
blogPost,
}: InferGetStaticPropsType<typeof getStaticProps>) {
// ## Get Contexts
/** ********************************************** */
@@ -52,10 +58,7 @@ export default function BlogIndex({ blogPost }: InferGetStaticPropsType<typeof g
<React.Fragment>
<Head>
<title>{blogPost.title} | Tben.me Blog</title>
<meta
name="description"
content={blogPost.excerpt}
/>
<meta name="description" content={blogPost.excerpt} />
</Head>
<GeneralLayout>
<div className="flex flex-col items-start gap-2 mb-8 max-w-6xl w-full">
@@ -74,7 +77,9 @@ export default function BlogIndex({ blogPost }: InferGetStaticPropsType<typeof g
<TextShuffler textInput={blogPost.excerpt} />
</span>
<span className="text-base opacity-50">
<TextShuffler textInput={blogPost.date_created.substring(0, 24)} />
<TextShuffler
textInput={blogPost.date_created.substring(0, 24)}
/>
</span>
</div>
app/blog/[single]/Main.tsx
+49
View File
@@ -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>
);
}
app/blog/[single]/page.tsx
+75
View File
@@ -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>
);
/** ********************************************** */
}
app/blog/page.tsx
+2 -11
View File
@@ -16,6 +16,8 @@ export const metadata: Metadata = {
description: "Tech talks and tutorials by Tben",
};
export const revalidate = 3600;
/////////////////////////////////////////////
//* Main Function
/////////////////////////////////////////////
@@ -33,17 +35,6 @@ export default async function BlogIndex() {
});
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
/////////////////////////////////////////////