add load more (#59)

Dev

.prettierignore

@@ -1,6 +1,5 @@
 # local env files
 .env*.local
-*.mdx
 
 # dependencies
 /node_modules

public/blogs/captionize.mdx

@@ -3,8 +3,8 @@ title: Captionize
 seoTitle: Web application that automatically generates descriptive captions for images using a Blind Language-Image Pre-training (BLIP) model.
 summary: How to run an image captioning web app
 isReleased: true
-lastModDate: 2019-04-20T09:15:00-0400
-firstModDate: 2019-04-20T09:15:00-0400
+lastModDate: 2018-04-20T09:15:00-0401
+firstModDate: 2018-04-20T09:15:00-0400
 minutesToRead: 18
 tags:
   - 'blpp'

public/blogs/middlewares.mdx

@@ -1,7 +1,7 @@
 ---
 title: Middlewares
 seoTitle: Middlewares & shit
-summary: A walkthrough over security headers setup with middlewares 
+summary: A walkthrough over security headers setup with middlewares
 isReleased: true
 lastModDate: 2021-04-20T09:15:00-0400
 firstModDate: 2024-02-01T09:15:00-0400
@@ -20,6 +20,7 @@ tags:
 > _Security through obscurity ain’t all that chief, but it's just a good complementary security measure._
 
 To test that you've removed this entirely you can use curl:
+
 </C>
 
 <Code
@@ -41,19 +42,21 @@ showLineNumbers={true}
 Google doesn't hide this info, but guess who does ?
 
 The feds
+
 </C>
 <Code
   code=
 
 {`
-➜  ~ curl -IsL https://cia.gov/ | grep -i server
+➜ ~ curl -IsL https://cia.gov/ | grep -i server
 
-➜  ~
+➜ ~
 `}
 language="bash"
 showLineNumbers={true}
 
 > </Code>
+
 <H3>Content Security Policy</H3>
 <C>
 Don't use `unsafe-inline` directive.

public/blogs/simple.mdx

@@ -3,15 +3,14 @@ title: Simple
 seoTitle: Simple yapping nonetheless
 summary: Simple yapping nonetheless
 isReleased: true
-lastModDate: 2019-04-20T09:15:00-0400
-firstModDate: 2019-04-20T09:15:00-0400
+lastModDate: 2015-04-20T09:15:00-0400
+firstModDate: 2015-04-20T09:15:00-0400
 minutesToRead: 30
 tags:
   - 'journey'
   - 'career'
 ---
 
-
 <H3>Server</H3>
 <C>
   First you might want to yeet the **`Server`** & **`X-Powered-By`** headers (the latter being
@@ -20,6 +19,7 @@ tags:
 > _Security through obscurity ain’t all that chief, but it's just a good complementary security measure._
 
 To test that you've removed this entirely you can use curl:
+
 </C>
 <C>
  If youd like to preserve the default values for a theme option but
@@ -84,4 +84,3 @@ To test that you've removed this entirely you can use curl:
           you can use. As an example, here we extend the fontFamily property to
           add the font-display class that can change the font used on an
 </C>
-

public/blogs/tester.mdx

@@ -11,6 +11,7 @@ tags:
   - 'vercel'
   - 'serverless'
 ---
+
 <H3>Privacy Policy</H3>
 <C>
    First we might talk about <L href={'/blog/simple'}>how to run in parallel</L> and run the app on any machine, you can choose from two methods:
@@ -20,12 +21,19 @@ Using **``getStaticQueryParams()``** for isolation or, you can use  <L href={'ht
 <S2/>
 *  \- **Referrer**: Static site generation 
 <S/>
-*  \- **Oppenheimer**: Beatle public asssessment
-<S/>
-*  \- **Crunch**: Shuttle is new
-<S3/>
 
->> *NOTE: The installation may take some time as the dependencies are quite heavy.*
+- \- **Oppenheimer**: Beatle public asssessment
+
+  {' '}
+
+  {' '}
+
+  <S />
+
+- \- **Crunch**: Shuttle is new
+  <S3 />
+
+> > _NOTE: The installation may take some time as the dependencies are quite heavy._
 
 </C>
 <Code
@@ -35,21 +43,22 @@ use wasm_bindgen::prelude::*;
 
 #[wasm_bindgen]
 pub struct NoiseMap {
-    pub width: usize,
-    pub height: usize,
-    pub scale: f64,
-    pub octaves: u8,
-    pub lacunarity: f64,
-    pub persistence: f64,
-    pub max_value: f64,
-    pub min_value: f64, #[wasm_bindgen(skip)]
-    pub map: Vec<f64>,
+pub width: usize,
+pub height: usize,
+pub scale: f64,
+pub octaves: u8,
+pub lacunarity: f64,
+pub persistence: f64,
+pub max_value: f64,
+pub min_value: f64, #[wasm_bindgen(skip)]
+pub map: Vec<f64>,
 }
 `}
 language="rust"
 showLineNumbers={true}
 
 > </Code>
+
 <H3>Your Information</H3>
 <C>
   When you sign up for our product or service, we may request certain
@@ -104,7 +113,7 @@ declare -A dotfiles=(
 )
 
 for file in "\${!dotfiles[@]}"; do
-  curl -o "\$HOME/\$file" "\${dotfiles[\$file]}"
+curl -o "\$HOME/\$file" "\${dotfiles[\$file]}"
 done
 `}>
 
@@ -123,9 +132,9 @@ done
                 When you use our service to generate AI images based on a word or phrase, we collect the input provided. This information is used solely to generate the requested image and is not stored or associated with your personal information.
             </C>
             <H3>Security</H3>
+
 <Code
-  code=
-{`import { Suspense } from 'react'
+  code={`import { Suspense } from 'react'
 import { list } from '@vercel/blob'
  
 export default function Page() {
@@ -150,13 +159,16 @@ async function VideoComponent({ fileName }) {
     </video>
   )
 }`}
-language="typescript"
-showLineNumbers={true}
-copy={false}
-> </Code>
-            <C>
-                All data is encrypted via SSL/TLS when transmitted from our servers to your browser.
-            </C>
+  language="typescript"
+  showLineNumbers={true}
+  copy={false}
+>
+  {' '}
+</Code>
+<C>
+  All data is encrypted via SSL/TLS when transmitted from our servers to your
+  browser.
+</C>
 
             <H3>Changes</H3>
             <C>

src/app/(pages)/blog/[slug]/page.tsx → src/app/(pages)/blog/[post]/page.tsx

@@ -4,14 +4,17 @@ import StyledMDX from '@/app/components/mdx/styled-mdx';
 import { Heading1 as H1 } from '@/app/components/reusables/headers';
 import { formatDate, isSameMonthAndYear } from '@/lib/funcs/dates';
 import { MediumSection } from '@/app/components/reusables/sections';
+import { ChevronUp } from 'lucide-react';
 import { notFound } from 'next/navigation';
 import { pub } from '@/lib/env';
 import { Badge } from '@/app/components/ui/badge';
 import { getPost } from '@/app/actions/blog';
+import { BLOG_URI } from '@/lib/constants';
+import Link from 'next/link';
 
-export default async function Blog({ params }: { params: { slug: string } }) {
-  const post = await getPost(params.slug);
-  if (post) {
+export default async function Blog({ params }: { params: { post: string } }) {
+  const post = await getPost(params.post);
+  if (post !== undefined) {
     return (
       <Suspense fallback={<LoadingScreen />}>
         <main>
@@ -26,7 +29,7 @@ export default async function Blog({ params }: { params: { slug: string } }) {
                 datePublished: post.parsedContent.attributes.firstModDate,
                 dateModified: post.parsedContent.attributes.lastModDate,
                 description: post.parsedContent.attributes.seoTitle,
-                url: pub.SITE_URL_PROD + `/blog/${post.filenameSlug}`,
+                url: pub.SITE_URL_PROD + BLOG_URI + `/${post.filenameSlug}`,
                 author: {
                   '@type': 'Person',
                   name: 'ashgw',
@@ -35,7 +38,9 @@ export default async function Blog({ params }: { params: { slug: string } }) {
             }}
           />
           <MediumSection>
-            <H1>{post.parsedContent.attributes.title}</H1>
+            <H1 id={post.parsedContent.attributes.title}>
+              {post.parsedContent.attributes.title}
+            </H1>
             <div className="flex justify-between items-center mb-8 text-sm sm:max-w-[450px]  md:max-w-[550px]  lg:max-w-[650px] xl:max-w-[750px] ">
               <p className="text-sm dimmed-0">
                 {formatDate(post.parsedContent.attributes.firstModDate)}
@@ -58,6 +63,12 @@ export default async function Blog({ params }: { params: { slug: string } }) {
             <article className="text-wrap">
               <StyledMDX source={post.parsedContent.body}></StyledMDX>
             </article>
+            <Link
+              href={`#${post.parsedContent.attributes.title}`}
+              className="fixed max-w-3 max-h-3 opacity-0 average-transition animate-bounce bottom-1 right-1 mx-12 md:px-18 lg:mx-24 xl:mx-[200px] my-12 hover:opacity-100"
+            >
+              <ChevronUp className="average-transition hover:scale-150" />
+            </Link>
           </MediumSection>
         </main>
       </Suspense>

src/app/(pages)/blog/loading.tsx

@@ -0,0 +1,2 @@
+import LoadingScreen from '@/app/loading';
+export default LoadingScreen;

src/app/(pages)/blog/page.tsx

@@ -14,7 +14,7 @@ export default async function BlogPage() {
             Unclassified, raw
           </h1>
           <BlogPosts blogPosts={blogPosts} />
-          <div className="w-auto h-1"></div>
+          <div className="w-auto h-full"></div>
         </section>
       </Suspense>
     );

src/app/(pages)/blog/posts.tsx

@@ -4,21 +4,20 @@ import BlogPostCard from '@/app/components/blog/blog-card';
 import { ChevronDown } from 'lucide-react';
 import { CheckCheck } from 'lucide-react';
 import { useState } from 'react';
+import Link from 'next/link';
 import type { ButtonHTMLAttributes } from 'react';
 
 const NoMoreImTiredBoss: React.FC<
   ButtonHTMLAttributes<HTMLButtonElement>
 > = () => {
-  return (
-    <button className="cursor-default">
-      <CheckCheck className="mt-5" />
-    </button>
-  );
+  return <CheckCheck className="mt-5 cursor-default" />;
 };
 
 export default function BlogPosts({ blogPosts }: { blogPosts: BlogData[] }) {
-  let [numVisible, setNumVisible] = useState<number>(2);
-  const loadMore = numVisible !== blogPosts.length;
+  const firstLoadVisibleNum = 2;
+  const perLoadVisibleNum = 1;
+  let [visibleNum, setVisibleNum] = useState<number>(firstLoadVisibleNum);
+  const loadMore = visibleNum <= blogPosts.length;
 
   return (
     <>
@@ -32,18 +31,20 @@ export default function BlogPosts({ blogPosts }: { blogPosts: BlogData[] }) {
           }
           return 1;
         })
-        .slice(0, numVisible)
+        .slice(0, visibleNum)
         .map((post) => (
           <BlogPostCard key={post.filenameSlug} blogData={post}></BlogPostCard>
         ))}
-      <div className="flex items-center justify-center m-14">
+      <div id="more" className="flex items-center justify-center m-14">
         {loadMore ? (
-          <button>
+          <Link href={'#more'}>
             <ChevronDown
-              onClick={() => setNumVisible(numVisible + 1)}
+              onClick={() => {
+                setVisibleNum(visibleNum + perLoadVisibleNum);
+              }}
               className="mt-5 animate-bounce cursor-pointer"
             />
-          </button>
+          </Link>
         ) : (
           <NoMoreImTiredBoss />
         )}

src/app/(pages)/x/page.tsx

@@ -1,47 +1,2 @@
-'use client';
-
-import React, { useState } from 'react';
-
-interface Todo {
-  id: number;
-  text: string;
-}
-
-const TodoComponent: React.FC = () => {
-  const [todos, setTodos] = useState<Todo[]>([
-    { id: 1, text: 'Todo 1' },
-    { id: 2, text: 'Todo 2' },
-    { id: 3, text: 'Todo 3' },
-  ]);
-
-  const addTodos = () => {
-    // You can add more todos to the list when the button is clicked
-    const newTodos: Todo[] = [
-      { id: 4, text: 'Todo 4' },
-      { id: 5, text: 'Todo 5' },
-    ];
-
-    setTodos((prevTodos) => [...prevTodos, ...newTodos]);
-  };
-
-  return (
-    <div className="todo-container transition-all duration-500 ease-in-out">
-      <h1 className="text-2xl font-bold mb-4">Todos</h1>
-      <ul>
-        {todos.map((todo) => (
-          <li key={todo.id} className="border p-2 mb-2 rounded">
-            {todo.text}
-          </li>
-        ))}
-      </ul>
-      <button
-        onClick={addTodos}
-        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
-      >
-        Add More Todos
-      </button>
-    </div>
-  );
-};
-
-export default TodoComponent;
+import NewNav from '@/app/components/nav/new-nav';
+export default NewNav;