308 lines
11 KiB
JavaScript
308 lines
11 KiB
JavaScript
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
import React from "react";
|
|
import Head from "next/head";
|
|
const https = require("https");
|
|
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
|
|
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.excerpt } />
|
|
</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.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-3xl w-full gap-4 text-lg" dangerouslySetInnerHTML={ { __html: blogPost.body } }></span>
|
|
</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 getStaticProps({ params }) {
|
|
// ## Environment processes
|
|
|
|
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
|
|
// ## User Authentication
|
|
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
|
|
// ## Page/Site Data Data Fetching
|
|
const postsResponse = await new Promise((resolve, reject) => {
|
|
https
|
|
.get(
|
|
/** ********************* Get Options object */
|
|
{
|
|
host: "datasquirel.tben.me",
|
|
path: `/api/query/get?db=tbenme&query=select+*+from+blog_posts+where+slug='${params.single}'`,
|
|
headers: {
|
|
Authorization: process.env.DATASQUIREL_API_KEY,
|
|
},
|
|
},
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
|
|
/** ********************* Callback function */
|
|
(response) => {
|
|
var str = "";
|
|
|
|
// ## another chunk of data has been received, so append it to `str`
|
|
response.on("data", function (chunk) {
|
|
str += chunk;
|
|
});
|
|
|
|
// ## the whole response has been received, so we just print it out here
|
|
response.on("end", function () {
|
|
resolve(JSON.parse(str))
|
|
});
|
|
|
|
response.on("error", (err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
)
|
|
.end();
|
|
});
|
|
|
|
if (!postsResponse.success) {
|
|
return {
|
|
redirect: {
|
|
destination: "/blog",
|
|
permanent: false
|
|
}
|
|
}
|
|
}
|
|
|
|
const post = postsResponse.payload[0];
|
|
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
|
|
// ## Server Props Return
|
|
return {
|
|
props: {
|
|
blogPost: post,
|
|
},
|
|
};
|
|
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
}
|
|
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
/** ****************************************************************************** */
|
|
|
|
/**
|
|
* ==============================================================================
|
|
* 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 getStaticPaths() {
|
|
/**
|
|
* Data fetching
|
|
*
|
|
* @abstract fetch date from the server or externnal source
|
|
*/
|
|
const postsResponse = await new Promise((resolve, reject) => {
|
|
https
|
|
.get(
|
|
/** ********************* Get Options object */
|
|
{
|
|
host: "datasquirel.tben.me",
|
|
path: `/api/query/get?db=tbenme&query=select+slug+from+blog_posts`,
|
|
headers: {
|
|
Authorization: process.env.DATASQUIREL_API_KEY,
|
|
},
|
|
},
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
/** ********************************************** */
|
|
|
|
/** ********************* Callback function */
|
|
(response) => {
|
|
var str = "";
|
|
|
|
// ## another chunk of data has been received, so append it to `str`
|
|
response.on("data", function (chunk) {
|
|
str += chunk;
|
|
});
|
|
|
|
// ## the whole response has been received, so we just print it out here
|
|
response.on("end", function () {
|
|
resolve(JSON.parse(str))
|
|
});
|
|
|
|
response.on("error", (err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
)
|
|
.end();
|
|
});
|
|
|
|
if (!postsResponse.success) {
|
|
return {
|
|
redirect: {
|
|
destination: "/blog",
|
|
permanent: false
|
|
}
|
|
}
|
|
}
|
|
|
|
const posts = postsResponse.payload;
|
|
|
|
const paths = posts.map((entry) => {
|
|
return {
|
|
params: { single: entry.slug }
|
|
}
|
|
})
|
|
|
|
return {
|
|
paths: paths,
|
|
fallback: true,
|
|
}
|
|
}
|
|
|
|
// Legacy
|
|
|
|
// { blogPost.body.map((element) => {
|
|
// reactKey++;
|
|
|
|
// if (element.tag.match(/img/i)) {
|
|
// return <img
|
|
// key={ reactKey }
|
|
// 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);
|
|
// }
|
|
// ) }
|