/** * ============================================================================== * 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 ( { blogPost.title } | Tben.me Blog

); /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ }; /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * 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 { // } // function construtElement(elementEntry) { // if (elementEntry.children) { // return ( // // { elementEntry.children.map(child => construtElement(child)) } // // ) // } // return ( // // { elementEntry.content } // // ) // } // return construtElement(element); // } // ) }