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/_document.js
+1
View File
@@ -6,6 +6,7 @@ export default function Document() {
<Html>
<Head>
{/* <script src="https://unpkg.com/@barba/core"></script> */}
{/* <script src="/scripts/swup.js"></script> */}
<script src="/scripts/main.js" defer></script>
</Head>
<body className="bg-black">
pages/about.jsx
-1
View File
@@ -132,7 +132,6 @@ const about = () => {
<a href='/documents/Benjamin_Toby_CV-updated.pdf' download={ true }>See my resume</a>
<a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
</div>
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
</GeneralLayout>
)
}
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(),
},
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
pages/contact.jsx
-1
View File
@@ -29,7 +29,6 @@ const contact = () => {
{ success === "Success" && <div className='message-response'>Success!!! <button onClick={ () => { window.location.reload() } }>Reload</button></div> }
{ success === "Failed" && <div className='message-response failed'>Failed <button onClick={ () => { window.location.reload() } }>Reload</button></div> }
</form>
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
</GeneralLayout>
)
}
pages/index.jsx
-1
View File
@@ -25,7 +25,6 @@ const index = () => {
border: "2px solid white"
} }>Contact Me</a>
</div>
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
</GeneralLayout>
)
}
pages/work.jsx
-2
View File
@@ -3,7 +3,6 @@ import Head from 'next/head'
import TextShuffler from '../components/actions/TextShuffler'
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
import PortfolioEntry from '../components/PortfolioEntry'
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
const myWork = () => {
const portfolioEntries = require("../components/portfolioEntries.json");
@@ -22,7 +21,6 @@ const myWork = () => {
<div className='portfolio-entries-block mt-4'>
{ portfolioEntries.map(entry => <PortfolioEntry key={ entry.title } title={ entry.title } description={ entry.description } url={ entry.url } image={ entry.image } />) }
</div>
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
</GeneralLayout>
)
}