updates
This commit is contained in:
Tben
@@ -1,302 +0,0 @@
|
||||
/**
|
||||
* ==============================================================================
|
||||
* 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
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## React Hooks { useState, useEffect, useRef, etc ... }
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## Function Return
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Head>
|
||||
<title>{ blogPost.title } | Tben.me Blog</title>
|
||||
<meta name="description" content={ blogPost.excerpt } />
|
||||
</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.excerpt } />
|
||||
</span>
|
||||
<span className="text-base opacity-50">
|
||||
<TextShuffler textInput={ blogPost.date_created.substring(0, 24) } />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className="flex flex-col items-start max-w-3xl w-full gap-4 text-lg" dangerouslySetInnerHTML={ { __html: blogPost.body } }></span>
|
||||
</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 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.com",
|
||||
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 || !postsResponse.payload[0]) {
|
||||
// return {
|
||||
// redirect: {
|
||||
// destination: "/blog",
|
||||
// permanent: false
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const post = postsResponse.payload[0];
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## Server Props Return
|
||||
return {
|
||||
props: {
|
||||
blogPost: post,
|
||||
},
|
||||
revalidate: 3600
|
||||
};
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
}
|
||||
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
|
||||
/**
|
||||
* ==============================================================================
|
||||
* 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.com",
|
||||
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: "blocking",
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
// }
|
||||
// ) }
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* ==============================================================================
|
||||
* Imports
|
||||
* ==============================================================================
|
||||
*/
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import type { InferGetStaticPropsType, GetStaticProps, GetStaticPaths } from "next";
|
||||
const datasquirel = require("datasquirel");
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
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 }: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
// ## Get Contexts
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## Javascript Variables
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## React Hooks { useState, useEffect, useRef, etc ... }
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## Function Return
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Head>
|
||||
<title>{blogPost.title} | Tben.me Blog</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={blogPost.excerpt}
|
||||
/>
|
||||
</Head>
|
||||
<GeneralLayout>
|
||||
<div className="flex flex-col items-start gap-2 mb-8 max-w-6xl w-full">
|
||||
<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.excerpt} />
|
||||
</span>
|
||||
<span className="text-base opacity-50">
|
||||
<TextShuffler textInput={blogPost.date_created.substring(0, 24)} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className="flex flex-col items-start max-w-6xl w-full gap-4 text-xl"
|
||||
dangerouslySetInnerHTML={{ __html: blogPost.body }}
|
||||
></span>
|
||||
</GeneralLayout>
|
||||
</React.Fragment>
|
||||
);
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
}
|
||||
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
|
||||
/**
|
||||
* Server Side Props or Static Props
|
||||
* ==============================================================================
|
||||
*/
|
||||
export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
// ## Environment processes
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## User Authentication
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## Page/Site Data Data Fetching
|
||||
const postsResponse = await datasquirel.get({
|
||||
key: process.env.DATASQUIREL_API_KEY,
|
||||
db: "tbenme",
|
||||
query: `select * from blog_posts WHERE slug='${params?.single}'`,
|
||||
});
|
||||
|
||||
const post = postsResponse.payload[0];
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
|
||||
// ## Server Props Return
|
||||
return {
|
||||
props: {
|
||||
blogPost: post,
|
||||
},
|
||||
revalidate: 3600,
|
||||
};
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
};
|
||||
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
|
||||
/**
|
||||
* Server Side Props or Static Props
|
||||
* ==============================================================================
|
||||
*/
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
/**
|
||||
* Data fetching
|
||||
*
|
||||
* @abstract fetch date from the server or externnal source
|
||||
*/
|
||||
const postsResponse = await datasquirel.get({
|
||||
key: process.env.DATASQUIREL_API_KEY,
|
||||
db: "tbenme",
|
||||
query: `select slug from blog_posts`,
|
||||
});
|
||||
|
||||
const posts: { slug: string }[] | null = postsResponse.payload;
|
||||
|
||||
const paths = posts?.map((entry) => {
|
||||
return {
|
||||
params: { single: entry.slug },
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
paths: paths ? paths : [],
|
||||
fallback: "blocking",
|
||||
};
|
||||
};
|
||||
@@ -6,9 +6,8 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
|
||||
|
||||
// const contentful = require('contentful');
|
||||
const https = require("https")
|
||||
import type { InferGetStaticPropsType, GetStaticProps, GetStaticPropsContext } from "next";
|
||||
const datasquirel = require("datasquirel");
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
@@ -31,7 +30,7 @@ import TextShuffler from "../../components/actions/TextShuffler";
|
||||
* ==============================================================================
|
||||
* @param {Object} props - Server props
|
||||
*/
|
||||
export default function BlogIndex(props) {
|
||||
export default function BlogIndex(props: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
/**
|
||||
* Get Contexts
|
||||
*
|
||||
@@ -65,29 +64,42 @@ export default function BlogIndex(props) {
|
||||
<React.Fragment>
|
||||
<Head>
|
||||
<title>Blog | Tben.me</title>
|
||||
<meta name="description" content="Tech talks" />
|
||||
<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.slug }
|
||||
>
|
||||
<h2 className="m-0"><TextShuffler textInput={ post.title } /></h2>
|
||||
<span className="opacity-80"><TextShuffler textInput={ post.excerpt } /></span>
|
||||
<span className="text-sm opacity-50"><TextShuffler textInput={ post.date_created.substring(0, 24) } /></span>
|
||||
</a>
|
||||
) }
|
||||
<div className="flex flex-col items-start max-w-6xl w-full">
|
||||
<h1 className="mb-8">
|
||||
<TextShuffler textInput="My Blog" />
|
||||
</h1>
|
||||
<div className="flex flex-col items-start w-full gap-4">
|
||||
{props.blogPosts.map((post: { slug: string; title: string; excerpt: string; date_created: string }, index: number) => (
|
||||
<a
|
||||
key={index}
|
||||
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 bg-primary/10"
|
||||
>
|
||||
<h2 className="m-0">
|
||||
<TextShuffler textInput={post.title} />
|
||||
</h2>
|
||||
<span className="opacity-80">
|
||||
<TextShuffler textInput={post.excerpt} />
|
||||
</span>
|
||||
<span className="text-sm opacity-50">
|
||||
<TextShuffler textInput={post.date_created.substring(0, 24)} />
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</GeneralLayout>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
/** ********************************************** */
|
||||
};
|
||||
}
|
||||
|
||||
/** ****************************************************************************** */
|
||||
/** ****************************************************************************** */
|
||||
@@ -97,27 +109,15 @@ export default function BlogIndex(props) {
|
||||
/** ****************************************************************************** */
|
||||
|
||||
/**
|
||||
* ==============================================================================
|
||||
* 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({ req, res, query }) {
|
||||
export const getStaticProps: GetStaticProps = async ({ params }: GetStaticPropsContext) => {
|
||||
/**
|
||||
* User Auth
|
||||
*
|
||||
* @abstract grab user
|
||||
*/
|
||||
// const contentfulClient = contentful.createClient({
|
||||
// space: process.env.CONTENTFUL_SPACE_ID,
|
||||
// accessToken: process.env.CONTENTFUL_API_KEY,
|
||||
// });
|
||||
|
||||
// const posts = await contentfulClient.getEntries()
|
||||
|
||||
// console.log(posts);
|
||||
|
||||
/** ********************************************** */
|
||||
|
||||
@@ -126,59 +126,19 @@ export async function getStaticProps({ req, res, query }) {
|
||||
*
|
||||
* @abstract fetch date from the server or externnal source
|
||||
*/
|
||||
// let blogPosts = await httpFetch({
|
||||
// options: {
|
||||
// method:"DELETE",
|
||||
// path: "/api/tben-blogs"
|
||||
// },
|
||||
// paradigm:"https"
|
||||
// })
|
||||
|
||||
// console.log(blogPosts.data);
|
||||
const postsResponse = await new Promise((resolve, reject) => {
|
||||
https
|
||||
.get(
|
||||
/** ********************* Get Options object */
|
||||
{
|
||||
host: "datasquirel.com",
|
||||
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();
|
||||
const postsResponse = await datasquirel.get({
|
||||
key: process.env.DATASQUIREL_API_KEY,
|
||||
db: "tbenme",
|
||||
query: "select title,slug,excerpt,date_created from blog_posts limit 10",
|
||||
});
|
||||
|
||||
if (!postsResponse.success) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/",
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
permanent: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const posts = postsResponse.payload;
|
||||
@@ -192,10 +152,10 @@ export async function getStaticProps({ req, res, query }) {
|
||||
props: {
|
||||
blogPosts: posts,
|
||||
},
|
||||
revalidate: 3600
|
||||
revalidate: 3600,
|
||||
};
|
||||
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
/** ********************************************** */
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user