From a90bb8aed70e1eba2186ceae0e5325e0f8d8ef9a Mon Sep 17 00:00:00 2001 From: Tben Date: Tue, 25 Jul 2023 14:43:08 +0100 Subject: [PATCH] updates --- app/api/test/route.ts | 7 ++ app/blog/[single].tsx | 178 ++++++++++++++++++++++++++++++++++++++++++ app/blog/page.tsx | 72 +++++++++++++++++ pages/blog/index.tsx | 161 -------------------------------------- styles/main.css | 10 +++ styles/tw_main.css | 34 +------- 6 files changed, 271 insertions(+), 191 deletions(-) create mode 100644 app/api/test/route.ts create mode 100644 app/blog/[single].tsx create mode 100644 app/blog/page.tsx delete mode 100644 pages/blog/index.tsx diff --git a/app/api/test/route.ts b/app/api/test/route.ts new file mode 100644 index 0000000..73991a7 --- /dev/null +++ b/app/api/test/route.ts @@ -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" }); +} diff --git a/app/blog/[single].tsx b/app/blog/[single].tsx new file mode 100644 index 0000000..4cc9def --- /dev/null +++ b/app/blog/[single].tsx @@ -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) { + // ## Get Contexts + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Javascript Variables + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## React Hooks { useState, useEffect, useRef, etc ... } + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Function Return + return ( + + + {blogPost.title} | Tben.me Blog + + + +
+ +

+ +

+ + + + + + +
+ + + + + ); + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +} + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * 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", + }; +}; diff --git a/app/blog/page.tsx b/app/blog/page.tsx new file mode 100644 index 0000000..4abec7c --- /dev/null +++ b/app/blog/page.tsx @@ -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 ( + +
+

My Blog

+
+ {posts.map((post: { slug: string; title: string; excerpt: string; date_created: string }, index: number) => ( + +

{post.title}

+ {post.excerpt} + {post.date_created.substring(0, 24)} + + ))} +
+
+ + ); + + /** ********************************************** */ +} diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx deleted file mode 100644 index 523468e..0000000 --- a/pages/blog/index.tsx +++ /dev/null @@ -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) { - /** - * 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 ( - - - Blog | Tben.me - - - -
-

- -

-
- {props.blogPosts.map((post: { slug: string; title: string; excerpt: string; date_created: string }, index: number) => ( - -

- -

- - - - - - - - ))} -
-
- - - ); - - /** ********************************************** */ -} - -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ -/** ****************************************************************************** */ - -/** - * 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, - }; - - /** ********************************************** */ - /** ********************************************** */ - /** ********************************************** */ -}; diff --git a/styles/main.css b/styles/main.css index f9d8f59..3de32b7 100644 --- a/styles/main.css +++ b/styles/main.css @@ -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; diff --git a/styles/tw_main.css b/styles/tw_main.css index a6222e2..9eaec3f 100644 --- a/styles/tw_main.css +++ b/styles/tw_main.css @@ -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 }