tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
3867bba46e
personal-site/pages/blog/[single].jsx

303 lines
11 KiB
React
Raw Normal View History

add blog
2022-06-10 07:49:12 +00:00
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
import Head from "next/head";
updates
2022-08-06 18:48:47 +00:00
const https = require("https");
add blog
2022-06-10 07:49:12 +00:00
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
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
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<Head>
<title>{ blogPost.title } | Tben.me Blog</title>
updates
2022-08-06 18:48:47 +00:00
<meta name="description" content={ blogPost.excerpt } />
add blog
2022-06-10 07:49:12 +00:00
</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">
updates
2022-08-06 18:48:47 +00:00
<TextShuffler textInput={ blogPost.excerpt } />
add blog
2022-06-10 07:49:12 +00:00
</span>
<span className="text-base opacity-50">
updates
2022-08-06 18:48:47 +00:00
<TextShuffler textInput={ blogPost.date_created.substring(0, 24) } />
add blog
2022-06-10 07:49:12 +00:00
</span>
</div>
updates
2022-08-06 18:48:47 +00:00
<span className="flex flex-col items-start max-w-3xl w-full gap-4 text-lg" dangerouslySetInnerHTML={ { __html: blogPost.body } }></span>
add blog
2022-06-10 07:49:12 +00:00
</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
*/
updates
2022-08-06 18:48:47 +00:00
export async function getStaticProps({ params }) {
add blog
2022-06-10 07:49:12 +00:00
// ## Environment processes
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## User Authentication
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Page/Site Data Data Fetching
updates
2022-08-06 18:48:47 +00:00
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;
});
add blog
2022-06-10 07:49:12 +00:00
updates
2022-08-06 18:48:47 +00:00
// ## the whole response has been received, so we just print it out here
response.on("end", function () {
resolve(JSON.parse(str))
});
add blog
2022-06-10 07:49:12 +00:00
updates
2022-08-06 18:48:47 +00:00
response.on("error", (err) => {
console.log(err);
});
}
)
.end();
});
updates
2022-08-06 19:13:04 +00:00
// if (!postsResponse.success || !postsResponse.payload[0]) {
// return {
// redirect: {
// destination: "/blog",
// permanent: false
// }
// }
// }
add blog
2022-06-10 07:49:12 +00:00
updates
2022-08-06 18:48:47 +00:00
const post = postsResponse.payload[0];
add blog
2022-06-10 07:49:12 +00:00
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Server Props Return
return {
props: {
updates
2022-08-06 18:48:47 +00:00
blogPost: post,
add blog
2022-06-10 07:49:12 +00:00
},
updates
2022-08-06 19:06:43 +00:00
revalidate: 1000
add blog
2022-06-10 07:49:12 +00:00
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
updates
2022-08-06 18:48:47 +00:00
}
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* 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();
});
updates
2022-08-06 19:13:04 +00:00
// if (!postsResponse.success) {
// return {
// redirect: {
// destination: "/blog",
// permanent: false
// }
// }
// }
updates
2022-08-06 18:48:47 +00:00
const posts = postsResponse.payload;
const paths = posts.map((entry) => {
return {
params: { single: entry.slug }
}
})
return {
paths: paths,
updates
2022-08-06 19:06:43 +00:00
fallback: "blocking",
updates
2022-08-06 18:48:47 +00:00
}
}
// 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);
// }
// ) }
Reference in New Issue Copy Permalink