updates
This commit is contained in:
Tben
parent
3f285b9399
commit
a90bb8aed7
7
app/api/test/route.ts
Normal file
7
app/api/test/route.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
export async function GET(request: Request, context?: {}) {
|
||||||
|
console.log(request.headers);
|
||||||
|
|
||||||
|
return NextResponse.json({ name: "Benjamin Toby" });
|
||||||
|
}
|
||||||
178
app/blog/[single].tsx
Normal file
178
app/blog/[single].tsx
Normal file
@ -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",
|
||||||
|
};
|
||||||
|
};
|
||||||
72
app/blog/page.tsx
Normal file
72
app/blog/page.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
/////////////////////////////////////////////
|
||||||
|
//* IMPORTS
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
import React from "react";
|
||||||
|
import { Metadata } from "next";
|
||||||
|
const datasquirel = require("datasquirel");
|
||||||
|
|
||||||
|
import { headers, cookies } from "next/headers";
|
||||||
|
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
//* Metadata
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Blog posts | Tben.me",
|
||||||
|
description: "Tech talks and tutorials by Tben",
|
||||||
|
};
|
||||||
|
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
//* Main Function
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
/**
|
||||||
|
* Blog page index
|
||||||
|
* ==============================================================================
|
||||||
|
*/
|
||||||
|
export default async function BlogIndex() {
|
||||||
|
//* Data fetching
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
const postsResponse = await datasquirel.get({
|
||||||
|
key: process.env.DATASQUIREL_API_KEY,
|
||||||
|
db: process.env.DB_NAME,
|
||||||
|
query: "select title,slug,excerpt,date_created from blog_posts limit 10",
|
||||||
|
});
|
||||||
|
|
||||||
|
const posts = postsResponse?.success ? postsResponse.payload : [];
|
||||||
|
try {
|
||||||
|
const test = await fetch("http://localhost:5000/api/test");
|
||||||
|
const result = await test.json();
|
||||||
|
console.log(result);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.log(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Referer:", headers().get("referer"));
|
||||||
|
console.log("Host:", headers().get("host"));
|
||||||
|
// console.log(nextHeaders.cookies());
|
||||||
|
|
||||||
|
//* Main Function Return
|
||||||
|
/////////////////////////////////////////////
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<div className="flex flex-col items-start max-w-6xl w-full">
|
||||||
|
<h1 className="mb-8">My Blog</h1>
|
||||||
|
<div className="flex flex-col items-start w-full gap-4">
|
||||||
|
{posts.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">{post.title}</h2>
|
||||||
|
<span className="opacity-80">{post.excerpt}</span>
|
||||||
|
<span className="text-sm opacity-50">{post.date_created.substring(0, 24)}</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
|
||||||
|
/** ********************************************** */
|
||||||
|
}
|
||||||
@ -1,161 +0,0 @@
|
|||||||
/**
|
|
||||||
* ==============================================================================
|
|
||||||
* Imports
|
|
||||||
* ==============================================================================
|
|
||||||
*/
|
|
||||||
import React from "react";
|
|
||||||
import Head from "next/head";
|
|
||||||
|
|
||||||
import type { InferGetStaticPropsType, GetStaticProps, GetStaticPropsContext } from "next";
|
|
||||||
const datasquirel = require("datasquirel");
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
/** ********************************************** */
|
|
||||||
/** ********************************************** */
|
|
||||||
|
|
||||||
import GeneralLayout from "../../layouts/general_layout/GeneralLayout";
|
|
||||||
import TextShuffler from "../../components/actions/TextShuffler";
|
|
||||||
// import httpFetch from "../../functions/backend/httpFetch";
|
|
||||||
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ==============================================================================
|
|
||||||
* Main Component { Functional }
|
|
||||||
* ==============================================================================
|
|
||||||
* @param {Object} props - Server props
|
|
||||||
*/
|
|
||||||
export default function BlogIndex(props: InferGetStaticPropsType<typeof getStaticProps>) {
|
|
||||||
/**
|
|
||||||
* Get Contexts
|
|
||||||
*
|
|
||||||
* @abstract { React.useContext }
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Javascript Variables
|
|
||||||
*
|
|
||||||
* @abstract Non hook variables and functions
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* React Hooks
|
|
||||||
*
|
|
||||||
* @abstract { useState, useEffect, useRef, etc ... }
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function Return
|
|
||||||
*
|
|
||||||
* @abstract Main Function Return
|
|
||||||
*/
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<Head>
|
|
||||||
<title>Blog | Tben.me</title>
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Tech talks"
|
|
||||||
/>
|
|
||||||
</Head>
|
|
||||||
<GeneralLayout>
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
}
|
|
||||||
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
/** ****************************************************************************** */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Server Side Props or Static Props
|
|
||||||
* ==============================================================================
|
|
||||||
*/
|
|
||||||
export const getStaticProps: GetStaticProps = async ({ params }: GetStaticPropsContext) => {
|
|
||||||
/**
|
|
||||||
* User Auth
|
|
||||||
*
|
|
||||||
* @abstract grab user
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 title,slug,excerpt,date_created from blog_posts limit 10",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!postsResponse.success) {
|
|
||||||
return {
|
|
||||||
redirect: {
|
|
||||||
destination: "/",
|
|
||||||
permanent: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const posts = postsResponse.payload;
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
/** ********************************************** */
|
|
||||||
/** ********************************************** */
|
|
||||||
|
|
||||||
// ## Server Props Return
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
blogPosts: posts,
|
|
||||||
},
|
|
||||||
revalidate: 3600,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** ********************************************** */
|
|
||||||
/** ********************************************** */
|
|
||||||
/** ********************************************** */
|
|
||||||
};
|
|
||||||
@ -38,6 +38,16 @@ body {
|
|||||||
background-color: var(--dark-color);
|
background-color: var(--dark-color);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
main {
|
||||||
|
padding-top: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
main {
|
||||||
|
padding-top: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
@ -110,10 +110,6 @@
|
|||||||
position: relative
|
position: relative
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-\[20px\] {
|
|
||||||
bottom: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-0 {
|
.left-0 {
|
||||||
left: 0px
|
left: 0px
|
||||||
}
|
}
|
||||||
@ -134,30 +130,10 @@
|
|||||||
top: 0px
|
top: 0px
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-\[40px\] {
|
|
||||||
bottom: 40px
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-\[320px\] {
|
|
||||||
top: 320px
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-\[340px\] {
|
.top-\[340px\] {
|
||||||
top: 340px
|
top: 340px
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-\[330px\] {
|
|
||||||
top: 330px
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-\[30px\] {
|
|
||||||
top: 30px
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-\[40px\] {
|
|
||||||
top: 40px
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-\[35px\] {
|
.top-\[35px\] {
|
||||||
top: 35px
|
top: 35px
|
||||||
}
|
}
|
||||||
@ -553,6 +529,10 @@
|
|||||||
padding-left: 1.5rem
|
padding-left: 1.5rem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pt-20 {
|
||||||
|
padding-top: 5rem
|
||||||
|
}
|
||||||
|
|
||||||
.pt-\[500px\] {
|
.pt-\[500px\] {
|
||||||
padding-top: 500px
|
padding-top: 500px
|
||||||
}
|
}
|
||||||
@ -767,12 +747,6 @@
|
|||||||
width: 60%
|
width: 60%
|
||||||
}
|
}
|
||||||
|
|
||||||
.xl\:scale-100 {
|
|
||||||
--tw-scale-x: 1;
|
|
||||||
--tw-scale-y: 1;
|
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
|
|
||||||
}
|
|
||||||
|
|
||||||
.xl\:flex-row {
|
.xl\:flex-row {
|
||||||
flex-direction: row
|
flex-direction: row
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user