tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add blog

Browse Source
This commit is contained in:
Tben
2022-06-10 08:49:12 +01:00
parent 0b7c30d9c9
commit 445a233536
16 changed files with 816 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/blog/[single].jsx
+186
View File
@@ -0,0 +1,186 @@
/**
* ==============================================================================
* 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],
},
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
pages/blog/index.jsx
+131
View File
@@ -0,0 +1,131 @@
/**
* ==============================================================================
* 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(props) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
// const blogPosts = require("../../jsonData/blogposts.json");
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<Head>
<title>Blog | Tben.me</title>
<meta name="description" content="Tech talks" />
</Head>
<GeneralLayout>
<h1 className="mb-8"><TextShuffler textInput="My Blog" /></h1>
<div className="flex flex-col items-start w-full gap-4">
{ props.blogPosts.map(post =>
<a
href={ `/blog/${post.slug}` }
className="flex flex-col items-start gap-2 w-full hover:bg-blue-600 border border-solid border-white/20 p-8 transition-all"
key={ post.id }
>
<h2 className="m-0"><TextShuffler textInput={ post.title } /></h2>
<span className="opacity-80"><TextShuffler textInput={ post.description } /></span>
<span className="text-sm opacity-50"><TextShuffler textInput={ post.date.substring(0, 24) } /></span>
</a>
) }
</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 = fs.readFileSync("./jsonData/blogposts.json", "utf8");
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Server Props Return
return {
props: {
blogPosts: JSON.parse(blogPosts).reverse(),
},
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}