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 2023-07-25 14:43:08 +01:00
parent 3f285b9399
commit a90bb8aed7
6 changed files with 271 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/api/test/route.ts Normal file
View 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
View 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
View 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>
);
/** ********************************************** */
}

161
pages/blog/index.tsx
View File

@ -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,
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
};

10
styles/main.css
View File

@ -38,6 +38,16 @@ body {
background-color: var(--dark-color);
color: white;
}
@media (max-width: 1200px) {
main {
padding-top: 200px;
}
}
@media (max-width: 600px) {
main {
padding-top: 150px;
}
}
a {
text-decoration: none;

34
styles/tw_main.css
View File

@ -110,10 +110,6 @@
position: relative
}
.bottom-\[20px\] {
bottom: 20px
}
.left-0 {
left: 0px
}
@ -134,30 +130,10 @@
top: 0px
}
.bottom-\[40px\] {
bottom: 40px
}
.top-\[320px\] {
top: 320px
}
.top-\[340px\] {
top: 340px
}
.top-\[330px\] {
top: 330px
}
.top-\[30px\] {
top: 30px
}
.top-\[40px\] {
top: 40px
}
.top-\[35px\] {
top: 35px
}
@ -553,6 +529,10 @@
padding-left: 1.5rem
}
.pt-20 {
padding-top: 5rem
}
.pt-\[500px\] {
padding-top: 500px
}
@ -767,12 +747,6 @@
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 {
flex-direction: row
}