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

updates

Browse Source
This commit is contained in:
Tben 2022-08-06 19:48:47 +01:00
parent 3c3d053b9d
commit b8368b503d
3 changed files with 813 additions and 1205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1717
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

228
pages/blog/[single].jsx
View File

@ -5,7 +5,7 @@
*/ */
import React from "react"; import React from "react";
import Head from "next/head"; import Head from "next/head";
const fs = require("fs"); const https = require("https");
/** ********************************************** */ /** ********************************************** */
/** ********************************************** */ /** ********************************************** */
@ -57,7 +57,7 @@ export default function BlogIndex({ blogPost }) {
<React.Fragment> <React.Fragment>
<Head> <Head>
<title>{ blogPost.title } | Tben.me Blog</title> <title>{ blogPost.title } | Tben.me Blog</title>
<meta name="description" content={ blogPost.description } /> <meta name="description" content={ blogPost.excerpt } />
</Head> </Head>
<GeneralLayout> <GeneralLayout>
<div className="flex flex-col items-start gap-2 mb-8 max-w-3xl"> <div className="flex flex-col items-start gap-2 mb-8 max-w-3xl">
@ -69,58 +69,14 @@ export default function BlogIndex({ blogPost }) {
>Back</button> >Back</button>
<h1 className="m-0"><TextShuffler textInput={ blogPost.title } /></h1> <h1 className="m-0"><TextShuffler textInput={ blogPost.title } /></h1>
<span className="text-lg"> <span className="text-lg">
<TextShuffler textInput={ blogPost.description } /> <TextShuffler textInput={ blogPost.excerpt } />
</span> </span>
<span className="text-base opacity-50"> <span className="text-base opacity-50">
<TextShuffler textInput={ blogPost.date.substring(0, 24) } /> <TextShuffler textInput={ blogPost.date_created.substring(0, 24) } />
</span> </span>
</div> </div>
<div className="flex flex-col items-start max-w-3xl w-full gap-4 text-lg"> <span className="flex flex-col items-start max-w-3xl w-full gap-4 text-lg" dangerouslySetInnerHTML={ { __html: blogPost.body } }></span>
{ 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);
}
) }
</div>
</GeneralLayout> </GeneralLayout>
</React.Fragment> </React.Fragment>
); );
@ -144,7 +100,7 @@ export default function BlogIndex({ blogPost }) {
* @param {Object} res - http response object * @param {Object} res - http response object
* @param {Object} query - queries attached to the url * @param {Object} query - queries attached to the url
*/ */
export async function getServerSideProps({ req, res, query }) { export async function getStaticProps({ params }) {
// ## Environment processes // ## Environment processes
@ -159,16 +115,53 @@ export async function getServerSideProps({ req, res, query }) {
/** ********************************************** */ /** ********************************************** */
// ## Page/Site Data Data Fetching // ## Page/Site Data Data Fetching
const blogPosts = JSON.parse(fs.readFileSync("./jsonData/blogposts.json", "utf8")); 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,
},
},
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
let foundPost = blogPosts.filter(post => post.slug === query.single); /** ********************* Callback function */
(response) => {
var str = "";
if (!foundPost || !foundPost[0]) return { // ## 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: { redirect: {
destination: "/blog", destination: "/blog",
permanent: false permanent: false
} }
} }
}
const post = postsResponse.payload[0];
/** ********************************************** */ /** ********************************************** */
/** ********************************************** */ /** ********************************************** */
@ -177,7 +170,7 @@ export async function getServerSideProps({ req, res, query }) {
// ## Server Props Return // ## Server Props Return
return { return {
props: { props: {
blogPost: foundPost[0], blogPost: post,
}, },
}; };
@ -185,3 +178,130 @@ export async function getServerSideProps({ req, res, query }) {
/** ********************************************** */ /** ********************************************** */
/** ********************************************** */ /** ********************************************** */
} }
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* 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 <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);
// }
// ) }

57
pages/blog/index.jsx
View File

@ -8,7 +8,7 @@ import Head from "next/head";
// const contentful = require('contentful'); // const contentful = require('contentful');
const fs = require("fs") const https = require("https")
/** ********************************************** */ /** ********************************************** */
/** ********************************************** */ /** ********************************************** */
@ -74,11 +74,11 @@ export default function BlogIndex(props) {
<a <a
href={ `/blog/${post.slug}` } 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" 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 } key={ post.slug }
> >
<h2 className="m-0"><TextShuffler textInput={ post.title } /></h2> <h2 className="m-0"><TextShuffler textInput={ post.title } /></h2>
<span className="opacity-80"><TextShuffler textInput={ post.description } /></span> <span className="opacity-80"><TextShuffler textInput={ post.excerpt } /></span>
<span className="text-sm opacity-50"><TextShuffler textInput={ post.date.substring(0, 24) } /></span> <span className="text-sm opacity-50"><TextShuffler textInput={ post.date_created.substring(0, 24) } /></span>
</a> </a>
) } ) }
</div> </div>
@ -135,7 +135,53 @@ export async function getStaticProps({ req, res, query }) {
// }) // })
// console.log(blogPosts.data); // console.log(blogPosts.data);
const posts = JSON.parse(fs.readFileSync("./jsonData/blogposts.json", "utf8")) const postsResponse = await new Promise((resolve, reject) => {
https
.get(
/** ********************* Get Options object */
{
host: "datasquirel.tben.me",
path: `/api/query/get?db=tbenme&query=select+title,slug,excerpt,date_created+from+blog_posts+limit+10`,
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: "/",
permanent: false
}
}
}
const posts = postsResponse.payload;
/** ********************************************** */ /** ********************************************** */
/** ********************************************** */ /** ********************************************** */
@ -146,6 +192,7 @@ export async function getStaticProps({ req, res, query }) {
props: { props: {
blogPosts: posts, blogPosts: posts,
}, },
revalidate: 1000
}; };
/** ********************************************** */ /** ********************************************** */