187 lines
7.6 KiB
React
187 lines
7.6 KiB
React
|
/**
|
||
|
|
* ==============================================================================
|
||
|
|
* Imports
|
||
|
|
* ==============================================================================
|
||
|
|
*/
|
||
|
|
import React from "react";
|
||
|
|
import Head from "next/head";
|
||
|
|
const fs = require("fs");
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
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 }) {
|
||
|
|
// ## Get Contexts
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
// ## Javascript Variables
|
||
|
|
let reactKey = 0;
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
// ## React Hooks { useState, useEffect, useRef, etc ... }
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
// ## Function Return
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<Head>
|
||
|
|
<title>{ blogPost.title } | Tben.me Blog</title>
|
||
|
|
<meta name="description" content={ blogPost.description } />
|
||
|
|
</Head>
|
||
|
|
<GeneralLayout>
|
||
|
|
<div className="flex flex-col items-start gap-2 mb-8 max-w-3xl">
|
||
|
|
<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.description } />
|
||
|
|
</span>
|
||
|
|
<span className="text-base opacity-50">
|
||
|
|
<TextShuffler textInput={ blogPost.date.substring(0, 24) } />
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col items-start max-w-3xl w-full gap-4 text-lg">
|
||
|
|
{ blogPost.body.map((element) => {
|
||
|
|
reactKey++;
|
||
|
|
|
||
|
|
if (element.tag.match(/img/i)) {
|
||
|
|
return <img
|
||
|
|
src={ element.src }
|
||
|
|
width={ element.width }
|
||
|
|
height={ element.height }
|
||
|
|
className={ element.class }
|
||
|
|
alt={ element.alt }
|
||
|
|
style={ element.style }
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
|
||
|
|
function construtElement(elementEntry) {
|
||
|
|
if (elementEntry.children) {
|
||
|
|
return (
|
||
|
|
<elementEntry.tag
|
||
|
|
key={ reactKey }
|
||
|
|
className={ elementEntry.class ? elementEntry.class : null }
|
||
|
|
href={ elementEntry.href }
|
||
|
|
style={ element.style }
|
||
|
|
>
|
||
|
|
{ elementEntry.children.map(child => construtElement(child)) }
|
||
|
|
</elementEntry.tag>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<elementEntry.tag
|
||
|
|
key={ reactKey }
|
||
|
|
className={ elementEntry.class ? elementEntry.class : null }
|
||
|
|
href={ elementEntry.href }
|
||
|
|
>
|
||
|
|
{ elementEntry.content }
|
||
|
|
</elementEntry.tag>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return construtElement(element);
|
||
|
|
}
|
||
|
|
) }
|
||
|
|
</div>
|
||
|
|
</GeneralLayout>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
};
|
||
|
|
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
/** ****************************************************************************** */
|
||
|
|
|
||
|
|
/**
|
||
|
|
* ==============================================================================
|
||
|
|
* Server Side Props or Static Props
|
||
|
|
* ==============================================================================
|
||
|
|
* @param {Object} req - http incoming request object
|
||
|
|
* @param {Object} res - http response object
|
||
|
|
* @param {Object} query - queries attached to the url
|
||
|
|
*/
|
||
|
|
export async function getServerSideProps({ req, res, query }) {
|
||
|
|
// ## Environment processes
|
||
|
|
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
// ## User Authentication
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
// ## Page/Site Data Data Fetching
|
||
|
|
const blogPosts = JSON.parse(fs.readFileSync("./jsonData/blogposts.json", "utf8"));
|
||
|
|
|
||
|
|
let foundPost = blogPosts.filter(post => post.slug === query.single);
|
||
|
|
|
||
|
|
if (!foundPost || !foundPost[0]) return {
|
||
|
|
redirect: {
|
||
|
|
destination: "/blog",
|
||
|
|
permanent: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
|
||
|
|
// ## Server Props Return
|
||
|
|
return {
|
||
|
|
props: {
|
||
|
|
blogPost: foundPost[0],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
}
|