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

{ 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); } ) }
); /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ }; /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * 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], }, }; /** ********************************************** */ /** ********************************************** */ /** ********************************************** */ }