├── .env.example
├── .eslintrc.json
├── .gitignore
├── README.md
├── actions
    └── subscibers.ts
├── app
    ├── [...slug]
    │   └── page.tsx
    ├── api
    │   ├── guess
    │   │   └── route.ts
    │   ├── hello
    │   │   └── route.ts
    │   ├── increment
    │   │   └── route.ts
    │   └── subscribed
    │   │   └── route.ts
    ├── dx
    │   └── page.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    └── posts
    │   ├── [...slug]
    │       └── page.tsx
    │   └── page.tsx
├── components.json
├── components
    ├── analytics.tsx
    ├── animated-tooltip.tsx
    ├── bg-dx.tsx
    ├── callout.tsx
    ├── dx-header.tsx
    ├── form-intake.tsx
    ├── hacky-button.tsx
    ├── hero-section
    │   └── index.tsx
    ├── icons.tsx
    ├── join-section.tsx
    ├── lamp.tsx
    ├── mdx-card.tsx
    ├── mdx-components.tsx
    ├── mdx-tabs.tsx
    ├── mode-toggle.tsx
    ├── particles.tsx
    ├── scrollablepic.tsx
    ├── theme-provider.tsx
    ├── trendy.tsx
    ├── ui
    │   ├── Spotlight.tsx
    │   ├── background-beam.tsx
    │   ├── bg-box.tsx
    │   ├── blog-header.tsx
    │   ├── border-btn.tsx
    │   ├── button-std.tsx
    │   ├── button.tsx
    │   ├── card-binary-view.tsx
    │   ├── card-binary.tsx
    │   ├── feeder.tsx
    │   ├── floating-navbar.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── nav-menu.tsx
    │   ├── scollablepicview.tsx
    │   ├── separator.tsx
    │   ├── static-nav.tsx
    │   ├── tabs.tsx
    │   ├── text-gen.tsx
    │   ├── toast.tsx
    │   ├── toaster.tsx
    │   ├── twickled-line.tsx
    │   ├── twickled-view.tsx
    │   └── use-toast.ts
    └── views.tsx
├── content
    ├── authors
    │   └── kinfish.mdx
    ├── pages
    │   └── about.mdx
    └── posts
    │   ├── ai-in-startup.mdx
    │   ├── hacking-meeting.mdx
    │   ├── is-bun-dropin-replacement.mdx
    │   ├── my-interview-xp.mdx
    │   ├── rsc-mental-models-and-new-react-era.mdx
    │   └── top-frontend-toos-for-shipping-amazing-web.mdx
├── contentlayer.config.js
├── db
    ├── actions
    │   ├── index.ts
    │   └── save.ts
    ├── index.tsx
    ├── migrations
    │   ├── 0000_dear_squirrel_girl.sql
    │   └── meta
    │   │   ├── 0000_snapshot.json
    │   │   └── _journal.json
    └── schema.ts
├── drizzle.config.ts
├── lib
    ├── email-helper.ts
    ├── locals.ts
    ├── mdx-helper.ts
    ├── useMouse.tsx
    └── utils.ts
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public
    ├── assets
    │   └── fonts
    │   │   ├── CalSans-SemiBold.ttf
    │   │   ├── cd-semi.otf
    │   │   ├── jakarta.ttf
    │   │   └── product-font.ttf
    ├── blog-post-1.jpg
    ├── blog-post-2.jpg
    ├── blog-post-3.jpg
    ├── blog-post-4.jpg
    ├── images
    │   ├── blogs
    │   │   ├── ace.png
    │   │   ├── ai-2.png
    │   │   ├── ai.jpg
    │   │   ├── bun.png
    │   │   ├── daisy.png
    │   │   ├── flowbite.png
    │   │   ├── hacking-meeting.webp
    │   │   ├── hover.png
    │   │   ├── hyper.png
    │   │   ├── interview.webp
    │   │   ├── nextui.jpg
    │   │   ├── park-ui.png
    │   │   ├── preline.png
    │   │   ├── react.webp
    │   │   ├── shadcn.png
    │   │   ├── tailwindui.png
    │   │   ├── v0.png
    │   │   ├── xp.jpeg
    │   │   └── zoom1.jpg
    │   └── kinfe.jpeg
    ├── next.svg
    └── vercel.svg
├── site
    └── nav.tsx
├── tailwind.config.js
├── tsconfig.json
└── turbo.json


/.env.example:
--------------------------------------------------------------------------------
1 | DATABASE_URL=postgres://postgres.[PROJECT_ID]:[YOUR-PASSWORD]@aws-0-us-west-1.pooler.supabase.com:5432/postgres
2 | UPSTASH_REDIS_REST_URL="https://us1-.....upstash.io"
3 | UPSTASH_REDIS_REST_TOKEN=""
4 | 
5 | # A credentials for nodemailer from email and email password that you can generate from  - https://myaccount.google.com/u/{your_google_id}/apppasswords
6 | USER_EMAIL=''
7 | EMAIL_PASSWORD=''
8 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | 
 9 | .vscode
10 | # testing
11 | /coverage
12 | 
13 | # next.js
14 | /.next/
15 | /out/
16 | 
17 | # production
18 | /build
19 | 
20 | # misc
21 | .DS_Store
22 | *.pem
23 | 
24 | # debug
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 | 
29 | # local env files
30 | .env*.local
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | .contentlayer
39 | 
40 | 
41 | .env
42 | .turbo
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # KINFiSH lacks dumping 
 2 | 
 3 | All in one!
 4 | 
 5 | 
 6 | 
 7 | ## Tech Stack
 8 | 
 9 | - **Framework:** [Next.js](https://nextjs.org)
10 | - **Styling:** [Tailwind CSS](https://tailwindcss.com)
11 | - **User Management:** [Clerk](https://clerk.com)
12 | - **ORM:** [Drizzle ORM](https://orm.drizzle.team)
13 | - **UI Components:** [shadcn/ui](https://ui.shadcn.com)
14 | - **Email:** [React Email](https://react.email)
15 | - **Content Management:** [Contentlayer](https://www.contentlayer.dev)
16 | - **File Uploads:** [uploadthing](https://uploadthing.com)
17 | ## Running Locally
18 | 
19 | 1. Clone the repository
20 | 
21 |    ```bash
22 |    git clone https://github.com/Kinfe123/kinfish-dumpy.git
23 |    ```
24 | 
25 | 2. Change the dir
26 | 
27 |    ```bash
28 |    cd kinfish-dumpy
29 |    ```
30 | 
31 | 3. Install dependencies using pnpm
32 | 
33 |    ```bash
34 |    pnpm install
35 |    ```
36 | 
37 | 4. Copy the `.env.example` to `.env` and update the variables.
38 | 
39 |    ```bash
40 |    cp .env.example .env
41 |    ```
42 | 
43 | 5. Start the development server
44 | 
45 |    ```bash
46 |    pnpm run dev
47 |    ```
48 | 
49 | 
50 | 
51 | ## How do I deploy this?
52 | 
53 | Follow the deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
54 | 
55 | ## Contributing
56 | 
57 | Contributions are welcome! Please open an issue if you have any questions or suggestions. Your contributions will be acknowledged. See the [contributing guide](./CONTRIBUTING.md) for more information.
58 | 
59 | That's why this existed but i am using turbo just in case :)
60 | 


--------------------------------------------------------------------------------
/actions/subscibers.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { db } from "@/db";
 4 | import { subscribers } from "@/db/schema";
 5 | 
 6 | export async function getSubscriberEmals() {
 7 |   const req = await db.select().from(subscribers);
 8 |   const subEmails = req.map((r) => r.email)
 9 | 
10 |   return subEmails;
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/app/[...slug]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { notFound } from "next/navigation"
 2 | import { Metadata } from "next"
 3 | import { allPages } from "contentlayer/generated"
 4 | 
 5 | import { Mdx } from "@/components/mdx-components"
 6 | 
 7 | interface PageProps {
 8 |   params: {
 9 |     slug: string[]
10 |   }
11 | }
12 | 
13 | async function getPageFromParams(params: PageProps["params"]) {
14 |   const slug = params?.slug?.join("/")
15 |   const page = allPages.find((page) => page.slugAsParams === slug)
16 | 
17 |   if (!page) {
18 |     null
19 |   }
20 | 
21 |   return page
22 | }
23 | 
24 | export async function generateMetadata({
25 |   params,
26 | }: PageProps): Promise<Metadata> {
27 |   const page = await getPageFromParams(params)
28 | 
29 |   if (!page) {
30 |     return {}
31 |   }
32 | 
33 |   return {
34 |     title: page.title,
35 |     description: page.description,
36 |   }
37 | }
38 | 
39 | export async function generateStaticParams(): Promise<PageProps["params"][]> {
40 |   return allPages.map((page) => ({
41 |     slug: page.slugAsParams.split("/"),
42 |   }))
43 | }
44 | 
45 | export default async function PagePage({ params }: PageProps) {
46 |   const page = await getPageFromParams(params)
47 | 
48 |   if (!page) {
49 |     notFound()
50 |   }
51 | 
52 |   return (
53 |     <article className="py-6 prose dark:prose-invert">
54 |       <h1>{page.title}</h1>
55 |       {page.description && <p className="text-xl">{page.description}</p>}
56 |       <hr />
57 |       <Mdx code={page.body.code} />
58 |     </article>
59 |   )
60 | }
61 | 


--------------------------------------------------------------------------------
/app/api/guess/route.ts:
--------------------------------------------------------------------------------
 1 | import { db } from "@/db"
 2 | import { guesser } from "@/db/schema"
 3 | export async function POST(req: Request) {
 4 |     
 5 |     const body  = await req.json()
 6 |     const {name , phone , guess} = body
 7 |     if(name && phone && guess) {
 8 |         const req = await db.insert(guesser).values({name: name , phone:phone , guess:guess})
 9 |         console.log(req , ' the req')
10 | 
11 |         return new Response('Succesfully guessed' , {status:200})
12 | 
13 |     }else {
14 |         return new Response('Please provide a valid data' ,{status:404})
15 |     }
16 | }


--------------------------------------------------------------------------------
/app/api/hello/route.ts:
--------------------------------------------------------------------------------
1 | export async function GET(request: Request) {
2 |   return new Response('Hello, Next.js!')
3 | }
4 | 


--------------------------------------------------------------------------------
/app/api/increment/route.ts:
--------------------------------------------------------------------------------
 1 | import { Redis } from "@upstash/redis";
 2 | 
 3 | export var config = {
 4 |   runtime: "edge",
 5 | };
 6 | const redis = Redis.fromEnv();
 7 | export async function POST(req: Request) {
 8 |   const body = await req.json();
 9 |   const { slug } = body;
10 |   if (!slug) {
11 |     return new Response("Slug is not provided", { status: 404 });
12 |   }
13 |   const ip = req.headers.get("x-forwarded-for") ?? "";
14 |   const buf = await crypto.subtle.digest(
15 |     "SHA-256",
16 |     new TextEncoder().encode(ip)
17 |   );
18 |   const hash = Array.from(new Uint8Array(buf))
19 |     .map((b) => b.toString(16).padStart(2, "0"))
20 |     .join("");
21 | 
22 |   const isNew = await redis.set(["deduplicate", hash, slug].join(":"), true, {
23 |     nx: true,
24 |     ex: 24 * 60 * 60,
25 |   });
26 |   if(!isNew){
27 |     return new Response('User has already viewed the page' , {status:202})
28 |   }
29 |   const res = await redis.incr(["pageviews", "projects", slug].join(":"));
30 |   console.log('The number is : ' , res)
31 |   return new Response('The user has successfully added to the viewer list', {status: 200})
32 |   
33 | }
34 | 
35 | // export async function GET(req: Request) {}
36 | 


--------------------------------------------------------------------------------
/app/api/subscribed/route.ts:
--------------------------------------------------------------------------------
 1 | import { getSubscriberEmals } from "@/actions/subscibers";
 2 | import { db } from "@/db";
 3 | import { subscribers } from "@/db/schema";
 4 | import { transporter } from "@/lib/email-helper";
 5 | 
 6 | export async function POST(req: Request) {
 7 |   try {
 8 |     const { email } = await req.json();
 9 | 
10 |     const result = await getSubscriberEmals();
11 |     if (result.includes(email)) {
12 |       return new Response("duplicate", { status: 400 });
13 |     } else if (email) {
14 |       const req = await db.insert(subscribers).values({ email: email });
15 |       try {
16 |         const req2 = await transporter.sendMail({
17 |           from: `KinfeMichael Tariku <${process.env.USER_EMAIL}>`,
18 |           to: email,
19 |           subject: "Thanks for showing your interest for joining the gang",
20 |           text: "Hello there , KinfeMichael here -  Thanks for joining the farmer gang , I will keep in touch with you for an updates!... Stay Safe",
21 |         });
22 |         const req3 = await transporter.sendMail({
23 |           from: `KinfeMichael Tariku <${process.env.USER_EMAIL}>`,
24 |           to: process.env.ADMIN_EMAIL,
25 |           subject: "Hey Farmer , We have received a s subsciption email",
26 |           text: `Hello there , KinfeMichael here - We have received a new subsciption from email - ${email}`,
27 |         });
28 |         return new Response("Everything went fine", { status: 200 });
29 |       } catch (err) {
30 |         console.log("The error is  ", err);
31 |       }
32 | 
33 |       return new Response("Successfully Subscribed", { status: 200 });
34 |     } else {
35 |       return new Response("Please make sure to pass an input", { status: 400 });
36 |     }
37 |   } catch (err) {
38 |     return new Response("Please try again with valid input", { status: 404 });
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/app/dx/page.tsx:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import DxHeader from "@/components/dx-header";
 3 | import Particles from "@/components/particles";
 4 | import { extractFromLink } from "md-to-jsonify";
 5 | 
 6 | export const metadata = {
 7 |   title: "Dx Matters",
 8 | };
 9 | const DxPage = async () => {
10 |     // const url =
11 |     //   "https://api.github.com/repos/workos/awesome-developer-experience/git/blobs/fe28415d2d46ac325a12df8292f7cc005aef57ce";
12 | 
13 |     // const res = await extractFromLink(url);
14 |     // console.log(res);
15 |   return (
16 |     <div className="min-h-screen  mx-auto w-screen mt-0 px-6 lg:px-0 bg-transparent overflow-hidden bg-gradient-to-tr from-transparent to-transparent">
17 | 
18 |        <DxHeader />
19 |        
20 |     </div>
21 |   );
22 | };
23 | 
24 | export default DxPage;
25 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 |  
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 |  
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 |  
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 |  
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 |  
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 |  
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 |  
35 |     --radius: 0.5rem;
36 |   }
37 |  
38 |   .dark {
39 |     --background: 222.2 84% 4.9%;
40 |     --foreground: 210 40% 98%;
41 |  
42 |     --card: 222.2 84% 4.9%;
43 |     --card-foreground: 210 40% 98%;
44 |  
45 |     --popover: 222.2 84% 4.9%;
46 |     --popover-foreground: 210 40% 98%;
47 |  
48 |     --primary: 210 40% 98%;
49 |     --primary-foreground: 222.2 47.4% 11.2%;
50 |  
51 |     --secondary: 217.2 32.6% 17.5%;
52 |     --secondary-foreground: 210 40% 98%;
53 |  
54 |     --muted: 217.2 32.6% 17.5%;
55 |     --muted-foreground: 215 20.2% 65.1%;
56 |  
57 |     --accent: 217.2 32.6% 17.5%;
58 |     --accent-foreground: 210 40% 98%;
59 |  
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 210 40% 98%;
62 |  
63 |     --border: 217.2 32.6% 17.5%;
64 |     --input: 217.2 32.6% 17.5%;
65 |     --ring: 212.7 26.8% 83.9%;
66 |   }
67 | }
68 |  
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | import { Inter } from "next/font/google";
 3 | import { ThemeProvider } from "@/components/theme-provider";
 4 | import { Analytics } from "@/components/analytics";
 5 | import localFont from "next/font/local";
 6 | import { navItems } from "@/site/nav";
 7 | import FloatingNav from "@/components/ui/floating-navbar";
 8 | import { Toaster } from "@/components/ui/toaster";
 9 | const inter = Inter({ subsets: ["latin"] });
10 | 
11 | export const metadata = {
12 |   title: "KiNFiSH - Dumps all over the internet",
13 |   description: "a place where farms comes to reality",
14 | };
15 | 
16 | const fontHeading = localFont({
17 |   src: "../public/assets/fonts/CalSans-SemiBold.ttf",
18 |   variable: "--font-heading",
19 | });
20 | const fontHeadingAlt = localFont({
21 |   src: "../public/assets/fonts/cd-semi.otf",
22 |   variable: "--font-headingAlt",
23 | });
24 | 
25 | const fontSubHeading = localFont({
26 |   src: "../public/assets/fonts/product-font.ttf",
27 |   variable: "--font-subheading",
28 | });
29 | const fontSubAlt = localFont({
30 |   src: "../public/assets/fonts/jakarta.ttf",
31 |   variable: "--font-subalt",
32 | });
33 | 
34 | interface RootLayoutProps {
35 |   children: React.ReactNode;
36 | }
37 | 
38 | export default function RootLayout({ children }: RootLayoutProps) {
39 |   return (
40 |     <html lang="en">
41 |       <div className="">
42 |           
43 |         <body
44 |           //from-black to-purple-950 text-slate-900
45 |           // prev bg - from-black to-purple-950
46 |           className={`antialiased  overflow-x-hidden overflow-y-auto h-[100%]  relative h-full w-full bg-slate-950     text-slate-900 dark:text-slate-50 ${inter.className} ${fontHeading.variable} ${fontSubHeading.variable} ${fontHeadingAlt.variable} ${fontSubAlt.variable}  `}
47 |         >
48 |           <div className="absolute bottom-0 left-[-10%] right-0 top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]"></div>
49 |           <div className="absolute bottom-0 right-[-10%] top-[-5%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]"></div>
50 |           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
51 |             <div className="w-full mx-auto py-[-50px] px-0 font-subalt ">
52 |               <header>
53 |                 <FloatingNav navItems={navItems} />
54 |             
55 |               </header>
56 |               <main>{children}</main>
57 |             </div>
58 |             <Toaster />
59 |             <Analytics />
60 |           </ThemeProvider>
61 |         </body>
62 |       </div>
63 |     </html>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import HeroSection from "@/components/hero-section";
 3 | import Lamper from "@/components/lamp";
 4 | import Trendy from "@/components/trendy";
 5 | import { BackgroundBeamsDemo } from "@/components/ui/background-beam";
 6 | 
 7 | 
 8 | export default function Home() {
 9 |   return (
10 |     <div className="w-full flex flex-col justify-center items-center gap-6 font-subalt ">
11 |       <div>
12 |         
13 |         <HeroSection />
14 |         <div>
15 |           <Trendy />
16 |         </div>
17 |         <div className="max-w-full mx-auto  flex flex-col justify-center items-center">
18 |           <BackgroundBeamsDemo />
19 |         </div>
20 |         <div>
21 |           <Lamper />
22 |         </div>
23 | 
24 |         {/* <TwickledDemo /> */}
25 |       </div>
26 |     </div>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/app/posts/[...slug]/page.tsx:
--------------------------------------------------------------------------------
  1 | import { notFound } from "next/navigation";
  2 | import { allAuthors, allPosts } from "contentlayer/generated";
  3 | 
  4 | import { Metadata } from "next";
  5 | import { Mdx } from "@/components/mdx-components";
  6 | import { ChevronLeft, ChevronLeftCircle, EyeIcon, View } from "lucide-react";
  7 | import Link from "next/link";
  8 | import { cn, formatDate } from "@/lib/utils";
  9 | import { buttonVariants } from "@/components/ui/button";
 10 | import Image from "next/image";
 11 | import Views from "@/components/views";
 12 | import { Redis } from "@upstash/redis";
 13 | import { AnimatedTooltip } from "@/components/animated-tooltip";
 14 | 
 15 | const redis = Redis.fromEnv();
 16 | interface PostProps {
 17 |   params: {
 18 |     slug: string[];
 19 |   };
 20 | }
 21 | 
 22 | interface AuthorProps {
 23 |   id: string;
 24 |   name: string;
 25 |   designation: string;
 26 |   image: string;
 27 | }
 28 | 
 29 | export const revalidate = 30;
 30 | 
 31 | async function getPostFromParams(params: PostProps["params"]) {
 32 |   const slug = params?.slug?.join("/");
 33 |   const post = allPosts.find((post) => post.slugAsParams === slug);
 34 | 
 35 |   if (!post) {
 36 |     null;
 37 |   }
 38 | 
 39 |   return post;
 40 | }
 41 | 
 42 | export async function generateMetadata({
 43 |   params,
 44 | }: PostProps): Promise<Metadata> {
 45 |   const post = await getPostFromParams(params);
 46 | 
 47 |   if (!post) {
 48 |     return {};
 49 |   }
 50 |   const { title, image, description, slug } = post;
 51 |   return {
 52 |     title: post.title,
 53 |     description: post.description,
 54 |     openGraph: {
 55 |       title: `${title} - KiNFiSH Blog`,
 56 |       description,
 57 |       type: "article",
 58 |       url: `https://kinfish-dumpy.vercel.app/posts/${slug}`,
 59 |       images: [
 60 |         {
 61 |           url: image,
 62 |         },
 63 |       ],
 64 |     },
 65 |     twitter: {
 66 |       card: "summary_large_image",
 67 |       title,
 68 |       description,
 69 |       images: [image],
 70 |     },
 71 |   };
 72 | }
 73 | 
 74 | export default async function PostPage({ params }: PostProps) {
 75 |   const post = await getPostFromParams(params);
 76 |   const authors = post!.authors.map((author) =>
 77 |     allAuthors.find(({ slug }) => slug === `/authors/${author}`)
 78 |   );
 79 | 
 80 |   if (!post) {
 81 |     notFound();
 82 |   }
 83 |   const views =
 84 |     (await redis.get<number>(["pageviews", "projects", post.slug].join(":"))) ??
 85 |     0;
 86 | 
 87 |   const parseData = () => {
 88 |     let res: AuthorProps[] = [];
 89 | 
 90 |     if (authors) {
 91 |       authors.map((a) => {
 92 |         let user = {
 93 |           id: a!._id ?? "",
 94 |           name: a!.name ?? "",
 95 |           designation: a!.description ?? "",
 96 |           image: a!.avatar ?? "",
 97 |         };
 98 |         res.push(user);
 99 |       });
100 |     }
101 |     return res;
102 |   };
103 |   const authorFormat = parseData();
104 | 
105 |   return (
106 |     <div className=" relative gap-1 h-full py-0 mt-0 w-screen overflow-hidden font-subheading">
107 | 
108 | 
109 |       <div className=" relative  w-full min-h-[calc(100vh-600px)] border-b-[0.1px]  border-accent  mt-[-20px] py-10  z-20  ml-0">
110 |         <div className="absolute top-0 z-[-2] h-full w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"></div>
111 |         <div className="absolute top-[-150px] left-0  bg-gradient-to-br from-purple-400/20 blur-lg via-transparent to-transparent w-screen h-[450px]"></div>
112 |         <div className="absolute top-0 left-0 right-0  h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]"></div>
113 |         {/* <div className="absolute top-0 right-0  h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]"></div> */}
114 |         <div className='mb-10'/>
115 |         <div>
116 |           <Views slug={post.slug} />
117 |         </div>
118 |         <div className="flex flex-col justify-end items-end px-10">
119 |           {post.date && (
120 |             <time
121 |               dateTime={post.date}
122 |               className="block ml-auto text-md text-muted-foreground"
123 |             >
124 |               <EyeIcon className="inline w-4 h-4 text-muted-foreground mr-1" />  {views} <span className="mx-1"></span> {` `} ·{" "} <span className="mx-1"></span>   {formatDate(post.date)} <span className="mx-1"></span> {` `} ·{" "}
125 |               <span className="mx-1"></span> {` `} {post.readTime} {` min`}
126 |             </time>
127 |           )}
128 |           <h1 className="flex mt-2 text-6xl sm:text-7xl max-w-5xl font-heading  text-right  md:text-8xl lg:text-9xl leading-tight ml-auto  dark:text-transparent dark:bg-clip-text dark:bg-gradient-to-tr  dark:from-zinc-400/10 dark:via-white/90 dark:to-white/10">
129 |             {post.title}
130 |           </h1>
131 |           <p className="text-muted-foreground max-w-5xl mr-1 text-right text-xl md:text-xl">{post.description}</p>
132 |         </div>
133 | 
134 |         {authors?.length ? (
135 |           <div className="flex flex-col justify-center items-start mt-4 space-x-2 pr-20">
136 |             {authors.map((author) =>
137 |               author ? (
138 |                 <div
139 |                   key={author._id}
140 |                   className="flex flex-col gap-1 px-10 justify-end items-center"
141 |                 >
142 | 
143 |                   <Link
144 |                     key={author._id}
145 |                     href={`https://twitter.com/${author.twitter}`}
146 |                     className="flex items-center justify-end  space-x-5 text-sm"
147 |                   >
148 |                     <AnimatedTooltip items={authorFormat} />
149 |                     <br />
150 |                     <div className="flex-1 leading-tight text-right">
151 |                       <p className="font-medium text-md uppercase">{author.name}</p>
152 |                       <p className="text-[12px] text-muted-foreground">
153 |                         @{author.twitter}
154 |                       </p>
155 |                     </div>
156 | 
157 |                   </Link>
158 |                   <div className="flex justify-center mt-3 items-center">
159 |                     <Link
160 |                       href="/posts"
161 |                       className={cn(
162 |                         buttonVariants({ variant: "ghost" }),
163 |                         "inline-flex hover:bg-transparent"
164 |                       )}
165 |                     >
166 |                       <ChevronLeft className="mr-2 w-4 h-4" />
167 |                       See all posts
168 |                     </Link>
169 |                   </div>
170 |                 </div>
171 |               ) : null
172 |             )}
173 |           </div>
174 |         ) : null}
175 |       </div>
176 |       <article className="relative container mx-w-4xl flex-col py-24 max-w-4xl md:py-7 lg:py-16 font-heading2 prose text-[16.9px] dark:prose-invert">
177 |         {post.image && (
178 |           <div className="bg-gradient-to-tr to-transparent rounded-2xl border-none outline-none from-transparent/95">
179 |             {/* <Image
180 |               src={post.image}
181 |               alt={post.title}
182 |               width={1000}
183 |               height={405}
184 |               className="my-10 bg-transparent rounded-2xl border-2 transition-colors outline-none p-[2px]"
185 |               priority
186 |             /> */}
187 |           </div>
188 |         )}
189 |         <Mdx code={post.body.code} />
190 |         <hr className="mt-12" />
191 | 
192 |         {/* <div className="mt-10">
193 |       <UserSubscription />
194 |     </div> */}
195 |         <div className="flex justify-center mt-3 items-center">
196 |           <Link
197 |             href="/posts"
198 |             className={cn(
199 |               buttonVariants({ variant: "ghost" }),
200 |               "inline-flex hover:bg-transparent"
201 |             )}
202 |           >
203 |             <ChevronLeft className="mr-2 w-4 h-4" />
204 |             See all posts
205 |           </Link>
206 |         </div>
207 |         <div className="flex justify-end pt-5 mt-10 border-t border-none">
208 |           <Link
209 |             href={`https://github.com/Kinfe123/kinfish-dumpy/blob/main/content/posts/${params.slug}.mdx`}
210 |             target="_blank"
211 |             rel="noopener noreferrer"
212 |             className="text-sm text-gray-500 transition-colors hover:opacity-[80%]"
213 |           >
214 |             <p>Found a typo? Edit this page →</p>
215 |           </Link>
216 |         </div>
217 |       </article>
218 |     </div>
219 |   );
220 | }
221 | 


--------------------------------------------------------------------------------
/app/posts/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | import { allPosts } from "contentlayer/generated";
 4 | import { compareDesc } from "date-fns";
 5 | 
 6 | import { PostCard } from "@/components/ui/card-binary-view";
 7 | import Spotlight from "@/components/ui/Spotlight";
 8 | import BlogHeader from "@/components/ui/blog-header";
 9 | import { Redis } from "@upstash/redis";
10 | import { sumNums } from "@/lib/utils";
11 | import { getViewCount } from "../../lib/mdx-helper";
12 | 
13 | const redis = Redis.fromEnv();
14 | 
15 | export const metadata = {
16 |   title: "Blog",
17 | };
18 | 
19 | export default async function BlogPage() {
20 |   const posts = allPosts
21 |     .filter((post) => post.date)
22 |     .sort((a, b) => {
23 |       return compareDesc(new Date(a.date), new Date(b.date));
24 |     });
25 | 
26 |   const summed = await getViewCount()
27 | 
28 | 
29 |   
30 | 
31 |   return (
32 |     <div className="container max-w-4xl py-10 lg:py-14">
33 |       <div>
34 |         <Spotlight fill="#9284D4" className="-rotate-1" />
35 |       </div>
36 |       <div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
37 |         {/* <div className="flex-1 space-y-4">
38 |           <h1 className="inline-block fn font-headingAlt bg-gradient-to-tr from-white/50 bg-clip-text text-transparent to-white text-4xl tracking-tight lg:text-5xl">
39 |             What <span className="mx-[3px]"></span>i <span className="mx-[3px]"></span> thought
40 |           </h1>
41 |           <p className="text-xl  text-muted-foreground">
42 |            Homemade thought and farms - all the magic 
43 |           </p>
44 |         </div> */}
45 |         <BlogHeader totalViews={summed}/>
46 |       </div>
47 | 
48 |       <hr className="my-8" />
49 |       {posts?.length ? (
50 |         <div className="grid gap-10 sm:grid-cols-2">
51 |           {posts.map((post, index) => (
52 |             <PostCard
53 |               key={post._id}
54 |               title={post.title}
55 |               description={post.description!}
56 |               date={post.date}
57 |               slug={post.slug}
58 |             />
59 |           ))}
60 |         </div>
61 |       ) : (
62 |         <p>No posts published.</p>
63 |       )}
64 |     </div>
65 |   );
66 | }
67 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/components/analytics.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
4 | 
5 | export function Analytics() {
6 |   return <VercelAnalytics />
7 | }
8 | 


--------------------------------------------------------------------------------
/components/animated-tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import Image from "next/image";
 3 | import React, { useState } from "react";
 4 | import {
 5 |   motion,
 6 |   useTransform,
 7 |   AnimatePresence,
 8 |   useMotionValue,
 9 |   useSpring,
10 | } from "framer-motion";
11 | 
12 | export const AnimatedTooltip = ({
13 |   items,
14 | }: {
15 |   items: {
16 |     id: number | string;
17 |     name: string;
18 |     designation: string;
19 |     image: string;
20 |   }[];
21 | }) => {
22 |   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
23 |   const springConfig = { stiffness: 100, damping: 5 };
24 |   const x = useMotionValue(0); // going to set this value on mouse move
25 |   // rotate the tooltip
26 |   const rotate = useSpring(
27 |     useTransform(x, [-100, 100], [-45, 45]),
28 |     springConfig
29 |   );
30 |   // translate the tooltip
31 |   const translateX = useSpring(
32 |     useTransform(x, [-100, 100], [-50, 50]),
33 |     springConfig
34 |   );
35 |   const handleMouseMove = (event: any) => {
36 |     const halfWidth = event.target.offsetWidth / 2;
37 |     x.set(event.nativeEvent.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
38 |   };
39 | 
40 |   return (
41 |     <>
42 |       {items.map((item, idx) => (
43 |         <div
44 |           className="-mr-4  relative group"
45 |           key={item.name}
46 |         //   @ts-ignore
47 |           onMouseEnter={() => setHoveredIndex(item.id)}
48 |           onMouseLeave={() => setHoveredIndex(null)}
49 |         >
50 |           <AnimatePresence mode="wait">
51 |             {hoveredIndex === item.id && (
52 |               <motion.div
53 |                 initial={{ opacity: 0, y: 20, scale: 0.6 }}
54 |                 animate={{
55 |                   opacity: 1,
56 |                   y: 0,
57 |                   scale: 1,
58 |                   transition: {
59 |                     type: "spring",
60 |                     stiffness: 260,
61 |                     damping: 10,
62 |                   },
63 |                 }}
64 |                 exit={{ opacity: 0, y: 20, scale: 0.6 }}
65 |                 style={{
66 |                   translateX: translateX,
67 |                   rotate: rotate,
68 |                   whiteSpace: "nowrap",
69 |                 }}
70 |                 className="absolute -top-16 -left-1/2 translate-x-1/2 flex text-xs  flex-col items-center justify-center  bg=gradient-to-tr from-purple-400/10 to-transparent/5 border-2 rounded-xl  z-50 shadow-xl px-4 py-2"
71 |               >
72 |                 <div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " />
73 |                 <div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " />
74 |                 <div className="font-bold text-white relative z-30 text-base">
75 |                   {item.name}
76 |                 </div>
77 |                 <div className="text-white text-xs">{item.designation}</div>
78 |               </motion.div>
79 |             )}
80 |           </AnimatePresence>
81 |           <Image
82 |             onMouseMove={handleMouseMove}
83 |             height={150}
84 |             width={150}
85 |             src={item.image}
86 |             alt={item.name}
87 |             className="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"
88 |           />
89 |         </div>
90 |       ))}
91 |     </>
92 |   );
93 | };
94 | 


--------------------------------------------------------------------------------
/components/bg-dx.tsx:
--------------------------------------------------------------------------------
 1 | const ButtonShadowGradient = () => {
 2 |     return (
 3 |       <button className='relative inline-flex h-12 max-w-fit  items-center justify-center rounded-md bg-white px-6 font-medium text-gray-950 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50'>
 4 |         <div className='absolute -inset-0.5 -z-10 rounded-lg bg-gradient-to-b from-[#b534fa] to-[#8678f9] opacity-75 blur-md' />
 5 |         Coming Soon
 6 |       </button>
 7 |     );
 8 |   };
 9 |   
10 |   export default ButtonShadowGradient;
11 |   


--------------------------------------------------------------------------------
/components/callout.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | interface CalloutProps {
 4 |     icon?: string;
 5 |     children?: React.ReactNode;
 6 |     type?: "default" | "warning" | "danger";
 7 | }
 8 | 
 9 | export function Callout({ children, icon, type = "default", ...props }: CalloutProps) {
10 |     return (
11 |         <div
12 |             className={cn("my-6 flex items-start rounded-md border border-l-4 p-4", {
13 |                 "border-red-900 bg-red-50": type === "danger",
14 |                 "border-yellow-900 bg-yellow-50": type === "warning",
15 |             })}
16 |             {...props}
17 |         >
18 |             {icon && <span className="mr-4 text-2xl">{icon}</span>}
19 |             <div>{children}</div>
20 |         </div>
21 |     );
22 | }


--------------------------------------------------------------------------------
/components/dx-header.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useRef } from "react";
 4 | import Spotlight from "./ui/Spotlight";
 5 | import { motion, useInView } from "framer-motion";
 6 | import Particles from "./particles";
 7 | import ButtonShadowGradient from "./bg-dx";
 8 | const DxHeader = () => {
 9 |   const FADE_DOWN_ANIMATION_VARIANTS = {
10 |     hidden: { opacity: 0, y: -10 },
11 |     show: { opacity: 1, y: 0, transition: { type: "spring" } },
12 |   };
13 |   const ref = useRef(null);
14 |   const isInView = useInView(ref);
15 |   return (
16 |     <div>
17 |       <div className="max-w-6xl mx-auto">
18 |         {/* <Spotlight fill="#9284D4" /> */}
19 |       </div>
20 |       <div className="h-screen w-full dark:bg-transparent bg-white  dark:bg-grid-white/[0.06]  bg-opacity-[0.001] bg-grid-black/[0.1] relative flex items-center justify-center">
21 | 
22 |         {/* Radial gradient for the container to give a faded look */}
23 |         <div className="absolute mx-auto  pointer-events-none inset-0 flex items-center justify-center dark:bg-transparent bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_5%,black)]"></div>
24 |         <motion.div
25 |           initial="hidden"
26 |           className="flex flex-col justify-center items-center"
27 |           ref={ref}
28 |           animate={isInView ? "show" : "hidden"}
29 |           viewport={{ once: true }}
30 |           variants={{
31 |             hidden: {},
32 |             show: {
33 |               transition: {
34 |                 staggerChildren: 0.15,
35 |               },
36 |             },
37 |           }}
38 |         >
39 |           <div className="w-screen overflow-hidden">
40 | 
41 |             <Particles quantity={200} />
42 |             <Particles quantity={200} />
43 | 
44 |           </div>
45 |           <motion.h1
46 |             variants={FADE_DOWN_ANIMATION_VARIANTS}
47 |             className="text-4xl text-center  max-w-6xl mx-auto  font-bold font-heading bg-gradient-to-tr from-purple-300/80 to-white/90 bg-clip-text text-transparent tracking-tight sm:text-8xl md:text-[10rem] "
48 |           >
49 |             We really care about{" "}
50 |             <span className="bg-gradient-to-tr from-purple-600 to-black-400 text-transparent bg-clip-text">
51 |               DX
52 |             </span>
53 | 
54 |           </motion.h1>
55 |           <ButtonShadowGradient />
56 |           {/* <Particles quantity={200}/> */}
57 | 
58 |         </motion.div>
59 |       </div>
60 |     </div>
61 |   );
62 | };
63 | export default DxHeader;
64 | 


--------------------------------------------------------------------------------
/components/form-intake.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import { Input } from "@/components/ui/input";
  5 | import { Label } from "@/components/ui/label";
  6 | 
  7 | // import Background from "../grid-background/background"
  8 | import { Icons } from "./icons";
  9 | import {  toast } from "@/components/ui/use-toast";
 10 | 
 11 | export default function FormContact() {
 12 |   const [name, setName] = useState("");
 13 |   const [phone, setPhone] = useState("");
 14 |   const [loading, setLoading] = useState(false);
 15 |   const [guess, setGuess] = useState("");
 16 | //   const {toast} = useToast()
 17 | 
 18 |   const handleClick = async (e: any) => {
 19 |     e.preventDefault();
 20 |     setLoading(true);
 21 |     const res = await fetch("/api/guess", {
 22 |       method: "POST",
 23 |       body: JSON.stringify({
 24 |         name: name,
 25 |         phone: phone,
 26 |         guess: guess,
 27 |       }),
 28 |     });
 29 |     setLoading(false);
 30 |     if (!res.ok) {
 31 |       return toast({
 32 |         title: "Something went wrong.",
 33 |         description: "I can't receive your guess. Please try again.",
 34 |         variant: "destructive",
 35 |       });
 36 |     } else {
 37 |     
 38 |       return toast({
 39 |         title: "Successfully Sent",
 40 |         description: `Thanks ${name} for your guess. I will reach out and get back to you if that is a good guess! `,
 41 |         variant: "default",
 42 |       });
 43 |     }
 44 | 
 45 |     // we will be having two calls - 1 for email and 2 for form acceptance or we can merge them together to be deleived as one
 46 |   };
 47 |  
 48 | 
 49 |   return (
 50 |     <div className="mx-auto flex items-center justify-center">
 51 |       {/* <Background />  */}
 52 | 
 53 |       <div className="container mx-auto max-w-xl shadow-sm hover:shadow-sm transition-shadow duration-300 rounded overflow-hidden">
 54 |         <div className="py-6 p-6">
 55 |           {/* <h2 className="font-heading text-4xl leading-[1.1] sm:text-4xl md:text-6xl mb-3">
 56 |           Contact{" "}
 57 |           <span className="inline bg-gradient-to-tr from-purple-600 to-orange-400 font-bold bg-clip-text text-transparent">
 58 |             Us
 59 |           </span>
 60 |         </h2> */}
 61 |           <form
 62 |             className="space-y-6 font-heading2 text-left"
 63 |             onSubmit={handleClick}
 64 |           >
 65 |             <div className="space-y-2">
 66 |               <Label htmlFor="name">Telegram username</Label>
 67 |               <Input
 68 |                 id="name"
 69 |                 className=" bg-gradient-to-tr from-purple-500/5 rounded-lg via-transparent-400/5 to-transparent border-[0.2px] border-zinc-900  dark:border-inherit "
 70 |                 value={name}
 71 |                 onChange={(e) => setName(e.target.value)}
 72 |                 placeholder="Your Telegram username..."
 73 |                 required
 74 |               />
 75 |             </div>
 76 |             <div className="space-y-2">
 77 |               <Label htmlFor="email">Phone</Label>
 78 |               <Input
 79 |                 id="email"
 80 |                 className=" bg-gradient-to-tr from-purple-500/5 via-purple-400/5 to-transparent border-[0.2px] border-zinc-900  dark:border-inherit"
 81 |                 onChange={(e) => setPhone(e.target.value)}
 82 |                 value={phone}
 83 |                 placeholder="Your phone number.."
 84 |                 // type="email"
 85 |                 required
 86 |               />
 87 |             </div>
 88 |             <div className="space-y-2">
 89 |               <Label htmlFor="email">Guess who</Label>
 90 |               <Input
 91 |                 id="guess"
 92 |                 className=" bg-gradient-to-tr from-purple-500/5 via-purple-400/5 to-transparent border-[0.2px] border-zinc-900  dark:border-inherit"
 93 |                 onChange={(e) => setGuess(e.target.value)}
 94 |                 value={guess}
 95 |                 placeholder="Guess ...."
 96 |                 type="guess"
 97 |                 required
 98 |               />
 99 |             </div>
100 | 
101 |             <button
102 |               type="submit"
103 |               className={
104 |                 "font-heading hover:text-opacity-40 px-6 py-3 rounded-xl text-muted-foreground bg-gradient-from-tr from-zinc-600/20 via-black/10 to-black/10 border-[0.5px] border-purple-400/30 dark:text-white/90 transition ease-in-out duration-150  tracking-wide  dark:bg-gradient-to-tr dark:from-transparent dark:via-accent-2/10 dark:to-transparent hover:border-purple-400/20 hover:duration-200  hover:shadow-lg hover:bg-purple-400/5  mx-auto  flex justify-center items-center"
105 |               }
106 |               disabled={loading}
107 |               // onClick={handleClick}
108 |             >
109 |               {loading && (
110 |                 <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
111 |               )}
112 |               Submit
113 |             </button>
114 |           </form>
115 |         </div>
116 |       </div>
117 |     </div>
118 |   );
119 | }
120 | 


--------------------------------------------------------------------------------
/components/hacky-button.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useRef, useState } from "react";
 4 | // import { FiLock } from "react-icons/fi";
 5 | import {Lock} from 'lucide-react'
 6 | import { motion } from "framer-motion";
 7 | 
 8 | const HackyButton = ({text}: {text:string}) => {
 9 |   return (
10 |     <div className="grid min-h-fit place-content-center bgtranspaent p-4">
11 |       <EncryptButton word={text} />
12 |     </div>
13 |   );
14 | };
15 | 
16 | const CYCLES_PER_LETTER = 2;
17 | const SHUFFLE_TIME = 50;
18 | 
19 | const CHARS = "!@#$%^&*():{};|,.<>/?";
20 | 
21 | 
22 | type wordProps = {
23 |     word: string
24 | }
25 | export const EncryptButton = (props: wordProps) => {
26 |     const TARGET_TEXT = props.word;
27 |   const intervalRef = useRef(null);
28 | 
29 |   const [text, setText] = useState(TARGET_TEXT);
30 | 
31 |   const scramble = () => {
32 |     let pos = 0; 
33 | // @ts-ignore
34 |     intervalRef.current = setInterval(() => {
35 |       const scrambled = TARGET_TEXT.split("")
36 |         .map((char, index) => {
37 |           if (pos / CYCLES_PER_LETTER > index) {
38 |             return char;
39 |           }
40 | 
41 |           const randomCharIndex = Math.floor(Math.random() * CHARS.length);
42 |           const randomChar = CHARS[randomCharIndex];
43 | 
44 |           return randomChar;
45 |         })
46 |         .join("");
47 | 
48 |       setText(scrambled);
49 |       pos++;
50 | 
51 |       if (pos >= TARGET_TEXT.length * CYCLES_PER_LETTER) {
52 |         stopScramble();
53 |       }
54 |     }, SHUFFLE_TIME);
55 |   };
56 | 
57 |   const stopScramble = () => {
58 |     clearInterval(intervalRef.current || undefined);
59 | 
60 |     setText(TARGET_TEXT);
61 |   };
62 | 
63 |   return (
64 |     <motion.button
65 |       whileHover={{
66 |         scale: 1.025,
67 |       }}
68 |       whileTap={{
69 |         scale: 0.975,
70 |       }}
71 |       onMouseEnter={scramble}
72 |       onMouseLeave={stopScramble}
73 |       className="group relative overflow-hidden rounded-3xl bg-transparent mt-2 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6  text-white inline-block  border-[1px] border-slate-500 px-4 py-2 font-mono font-medium uppercase text-slate-300 transition-colors hover:text-indigo-300"
74 |     >
75 |       <div className="relative z-10 flex items-center gap-2">
76 |         <Lock />
77 |         <span>{text}</span>
78 |       </div>
79 |       <motion.span
80 |         initial={{
81 |           y: "100%",
82 |         }}
83 |         animate={{
84 |           y: "-100%",
85 |         }}
86 |         transition={{
87 |           repeat: Infinity,
88 |           repeatType: "mirror",
89 |           duration: 1,
90 |           ease: "linear",
91 |         }}
92 |         className="duration-300 absolute inset-0 z-0 scale-125 bg-gradient-to-t from-indigo-400/0 from-40% via-indigo-400/100 to-indigo-400/0 to-60% opacity-0 transition-opacity group-hover:opacity-100"
93 |       />
94 |     </motion.button>
95 |   );
96 | };
97 | 
98 | export default HackyButton;


--------------------------------------------------------------------------------
/components/hero-section/index.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { AnimatePresence, motion, useInView } from "framer-motion";
  4 | import Image from "next/image";
  5 | import Link from "next/link";
  6 | import React from "react";
  7 | import { Button } from "../ui/button";
  8 | import Feeder from "../ui/feeder";
  9 | import Spotlight from "../ui/Spotlight";
 10 | import { Github } from "lucide-react";
 11 | 
 12 | export default function HeroSection() {
 13 |   const ref = React.useRef(null);
 14 |   const isInView = useInView(ref);
 15 | 
 16 |   const FADE_DOWN_ANIMATION_VARIANTS = {
 17 |     hidden: { opacity: 0, y: -10 },
 18 |     show: { opacity: 1, y: 0, transition: { type: "spring" } },
 19 |   };
 20 |   return (
 21 |     <div className="mx-auto max-w-6xl mt-12 px-6 lg:px-8 bg-transparent relative">
 22 |       <div className="max-w-4xl absolute">
 23 |         <Spotlight fill="#9284D4" />
 24 |       </div>
 25 |       <div className="mx-auto max-w-5xl text-center ">
 26 |         <motion.div
 27 |           initial="hidden"
 28 |           ref={ref}
 29 |           animate={isInView ? "show" : "hidden"}
 30 |           viewport={{ once: true }}
 31 |           variants={{
 32 |             hidden: {},
 33 |             show: {
 34 |               transition: {
 35 |                 staggerChildren: 0.15,
 36 |               },
 37 |             },
 38 |           }}
 39 |         >
 40 |           <div className="absolute -top-4 -z-10 flex w-full justify-center">
 41 |             <div className="h-[310px] w-[310px] max-w-full animate-pulse-slow rounded-full bg-[#8678F9] opacity-20 blur-[100px]" />
 42 |           </div>
 43 |           <div className="absolute -top-4 -z-10 flex w-full justify-center">
 44 |             <div className="h-[310px] w-[310px] max-w-full animate-pulse-slow rounded-full bg-[#8678F9] opacity-20 blur-[100px]" />
 45 |           </div>
 46 | 
 47 |           <motion.h1
 48 |             variants={FADE_DOWN_ANIMATION_VARIANTS}
 49 |             className="text-4xl font-bold font-headingAlt bg-gradient-to-tr from-purple-300/80 to-white/90 bg-clip-text text-transparent tracking-normal sm:text-7xl  md:text-9xl"
 50 |           >
 51 |             <Feeder feed="Latest Blogs" />
 52 |             <div className="mb-4"></div>
 53 |             Beautifully made thoughts
 54 |           </motion.h1>
 55 |           <motion.p
 56 |             variants={FADE_DOWN_ANIMATION_VARIANTS}
 57 |             className="mt-6 text-lg leading-8"
 58 |           >
 59 |             A collection of handmade and crafted thought from KiNFiSH
 60 |           </motion.p>
 61 | 
 62 |           <motion.div
 63 |             variants={FADE_DOWN_ANIMATION_VARIANTS}
 64 |             className="mt-10 flex items-center justify-center gap-x-6 "
 65 |           >
 66 |             <Link href="/posts" className="z-50">
 67 |               <Button>Get started</Button>
 68 |             </Link>
 69 | 
 70 |             <Link
 71 |               href="https://github.com/Kinfe123/kinfish-dumpy"
 72 |               target="_blank"
 73 |               className="z-50"
 74 |             >
 75 |               <Button
 76 |                 variant="ghost"
 77 |                 className="outline-none bg-transparent hover:bg-transparent/5"
 78 |               >
 79 |                 <Github className="mx-2 " /> Get the github &nbsp;
 80 |                 <span aria-hidden="true">→</span>
 81 |               </Button>
 82 |             </Link>
 83 |           </motion.div>
 84 |         </motion.div>
 85 |       </div>
 86 |       <div className="mt-16 flow-root sm:mt-24">
 87 |         <motion.div
 88 |           className="rounded-md"
 89 |           initial={{ y: 100, opacity: 0 }} // Image starts from 100px below and fully transparent
 90 |           animate={{ y: 0, opacity: 1 }} // Image ends at its original position and fully opaque
 91 |           transition={{ type: "spring", stiffness: 50, damping: 20 }} // transition specifications
 92 |         >
 93 |           <AnimatePresence mode="wait">
 94 |             <motion.div
 95 |               initial={{ opacity: 0 }}
 96 |               animate={{ opacity: 1 }}
 97 |               exit={{ opacity: 0 }}
 98 |               transition={{ duration: 0.25 }}
 99 |             ></motion.div>
100 |           </AnimatePresence>
101 |         </motion.div>
102 |       </div>
103 |     </div>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |     AlertTriangle,
 3 |     ArrowRight,
 4 |     Check,
 5 |     ChevronLeft,
 6 |     ChevronRight,
 7 |     Command,
 8 |     CreditCard,
 9 |     File,
10 |     FileText,
11 |     HelpCircle,
12 |     Image,
13 |     Laptop,
14 |     Loader2,
15 |     LucideProps,
16 |     Moon,
17 |     MoreVertical,
18 |     Pizza,
19 |     Plus,
20 |     Settings,
21 |     SunMedium,
22 |     Trash,
23 |     Twitter,
24 |     User,
25 |     X,
26 |     // @ts-ignore
27 |     type Icon as LucideIcon,
28 |   } from "lucide-react"
29 |   
30 |   export type Icon = LucideIcon
31 |   
32 |   export const Icons = {
33 |     logo: Command,
34 |     close: X,
35 |     spinner: Loader2,
36 |     chevronLeft: ChevronLeft,
37 |     chevronRight: ChevronRight,
38 |     trash: Trash,
39 |     post: FileText,
40 |     page: File,
41 |     media: Image,
42 |     settings: Settings,
43 |     billing: CreditCard,
44 |     ellipsis: MoreVertical,
45 |     add: Plus,
46 |     warning: AlertTriangle,
47 |     user: User,
48 |     arrowRight: ArrowRight,
49 |     help: HelpCircle,
50 |     pizza: Pizza,
51 |     sun: SunMedium,
52 |     moon: Moon,
53 |     laptop: Laptop,
54 |     gitHub: ({ ...props }: LucideProps) => (
55 |       <svg
56 |         aria-hidden="true"
57 |         focusable="false"
58 |         data-prefix="fab"
59 |         data-icon="github"
60 |         role="img"
61 |         xmlns="http://www.w3.org/2000/svg"
62 |         viewBox="0 0 496 512"
63 |         {...props}
64 |       >
65 |         <path
66 |           fill="currentColor"
67 |           d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
68 |         ></path>
69 |       </svg>
70 |     ),
71 |     twitter: Twitter,
72 |     check: Check,
73 |   }


--------------------------------------------------------------------------------
/components/join-section.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React from "react";
 3 | import { BackgroundBeams } from "@/components/ui/background-beam";
 4 | import BorderBtn from "./ui/border-btn";
 5 | import { BoxesCore } from "./ui/bg-box";
 6 | 
 7 | export function BackgroundBeamsDemo() {
 8 |   return (
 9 |     <div className="h-[40rem] max-w-4xl rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased">
10 |      {/* <BoxesCore /> */}
11 |       <div className="max-w-2xl mx-auto p-4">
12 |         <h1 className="relative z-10 text-lg md:text-7xl  bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600  text-center font-sans font-bold">
13 |           Join the Jema
14 |         </h1>
15 |         <p></p>
16 |         <p className="text-neutral-500 max-w-lg mx-auto my-2 text-sm text-center relative z-10">
17 |           Welcome to MailJet, the best transactional email service on the web.
18 |           We provide reliable, scalable, and customizable email solutions for
19 |           your business. Whether you&apos;re sending order confirmations,
20 |           password reset emails, or promotional campaigns, MailJet has got you
21 |           covered.
22 |         </p>
23 |         <input
24 |           type="text"
25 |           placeholder="hi@.in"
26 |           className="rounded-lg border border-neutral-800 focus:ring-2 focus:ring-teal-500  w-full relative z-10 mt-4  bg-neutral-950 placeholder:text-neutral-700"
27 |         />
28 | 
29 |         <BorderBtn />
30 |       </div>
31 |       <BackgroundBeams />
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/components/lamp.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import React from "react";
  4 | import { motion } from "framer-motion";
  5 | import { cn } from "@/lib/utils";
  6 | export default function Lamper() {
  7 |   return (
  8 |     <LampContainer>
  9 |       <motion.h1
 10 |         initial={{ opacity: 0.5, y: 100 }}
 11 |         whileInView={{ opacity: 1, y: 0 }}
 12 |         transition={{
 13 |           delay: 0.3,
 14 |           duration: 0.8,
 15 |           ease: "easeInOut",
 16 |         }}
 17 |         className="mt-6 font-heading  bg-gradient-to-br from-slate-300 to-slate-500/20 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-9xl"
 18 |       >
 19 |        Thoughts speaks  <br />on blogs
 20 |       </motion.h1>
 21 |     </LampContainer>
 22 |   );
 23 | }
 24 | 
 25 | export const LampContainer = ({
 26 |   children,
 27 |   className,
 28 | }: {
 29 |   children: React.ReactNode;
 30 |   className?: string;
 31 | }) => {
 32 |   return (
 33 |     <div
 34 |       className={cn(
 35 |         "relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full rounded-md z-0",
 36 |         className
 37 |       )}
 38 |     >
 39 |       <div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
 40 |         <motion.div
 41 |           initial={{ opacity: 0.5, width: "15rem" }}
 42 |           whileInView={{ opacity: 1, width: "30rem" }}
 43 |           transition={{
 44 |             delay: 0.3,
 45 |             duration: 0.8,
 46 |             ease: "easeInOut",
 47 |           }}
 48 |           style={{
 49 |             backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
 50 |           }}
 51 |           className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-purple-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
 52 |         >
 53 |           <div className="absolute  w-[100%] left-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
 54 |           <div className="absolute  w-40 h-[100%] left-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
 55 |         </motion.div>
 56 |         <motion.div
 57 |           initial={{ opacity: 0.5, width: "15rem" }}
 58 |           whileInView={{ opacity: 1, width: "30rem" }}
 59 |           transition={{
 60 |             delay: 0.3,
 61 |             duration: 0.8,
 62 |             ease: "easeInOut",
 63 |           }}
 64 |           style={{
 65 |             backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
 66 |           }}
 67 |           className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-purple-500 text-white [--conic-position:from_290deg_at_center_top]"
 68 |         >
 69 |           <div className="absolute  w-40 h-[100%] right-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
 70 |           <div className="absolute  w-[100%] right-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
 71 |         </motion.div>
 72 |         <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl"></div>
 73 |         <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
 74 |         <div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-purple-500 opacity-50 blur-3xl"></div>
 75 |         <motion.div
 76 |           initial={{ width: "8rem" }}
 77 |           whileInView={{ width: "16rem" }}
 78 |           transition={{
 79 |             delay: 0.3,
 80 |             duration: 0.8,
 81 |             ease: "easeInOut",
 82 |           }}
 83 |           className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-purple-400 blur-2xl"
 84 |         ></motion.div>
 85 |         <motion.div
 86 |           initial={{ width: "15rem" }}
 87 |           whileInView={{ width: "30rem" }}
 88 |           transition={{
 89 |             delay: 0.3,
 90 |             duration: 0.8,
 91 |             ease: "easeInOut",
 92 |           }}
 93 |           className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-purple-400 "
 94 |         ></motion.div>
 95 | 
 96 |         <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-slate-950 "></div>
 97 |       </div>
 98 | 
 99 |       <div className="relative z-50 flex -translate-y-80 flex-col items-center px-5">
100 |         {children}
101 |       </div>
102 |     </div>
103 |   );
104 | };
105 | 


--------------------------------------------------------------------------------
/components/mdx-card.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 6 |     href?: string;
 7 |     disabled?: boolean;
 8 | }
 9 | 
10 | export function MdxCard({ href, className, children, disabled, ...props }: CardProps) {
11 |     return (
12 |         <div
13 |             className={cn(
14 |                 "group relative rounded-lg border p-6 shadow-md transition-shadow hover:shadow-lg",
15 |                 disabled && "cursor-not-allowed opacity-60",
16 |                 className,
17 |             )}
18 |             {...props}
19 |         >
20 |             <div className="flex flex-col justify-between space-y-4">
21 |                 <div className="space-y-2 [&>h3]:!mt-0 [&>h4]:!mt-0 [&>p]:text-muted-foreground">
22 |                     {children}
23 |                 </div>
24 |             </div>
25 |             {href && (
26 |                 <Link href={disabled ? "#" : href} className="absolute inset-0">
27 |                     <span className="sr-only">View</span>
28 |                 </Link>
29 |             )}
30 |         </div>
31 |     );
32 | }


--------------------------------------------------------------------------------
/components/mdx-components.tsx:
--------------------------------------------------------------------------------
  1 | // @ts-nocheck
  2 | import Image from "next/image"
  3 | import { useMDXComponent } from "next-contentlayer/hooks"
  4 | import { Callout } from "./callout";
  5 | import { MdxTabs , MdxTab } from "./mdx-tabs";
  6 | import { cn } from "@/lib/utils";
  7 | import { MdxCard } from "./mdx-card";
  8 | import FormIntake from "./form-intake";
  9 | import { toast  , useToast} from "@/components/ui/use-toast";
 10 | export const components = {
 11 |  
 12 |   h1: ({ className, ...props }) => (
 13 |       <h1
 14 |           className={cn("mt-2 scroll-m-20 text-4xl font-bold tracking-wide", className)}
 15 |           {...props}
 16 |       />
 17 |   ),
 18 |   h2: ({ className, ...props }) => (
 19 |       <h2
 20 |           className={cn(
 21 |               "mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-wide first:mt-0",
 22 |               className,
 23 |           )}
 24 |           {...props}
 25 |       />
 26 |   ),
 27 |   h3: ({ className, ...props }) => (
 28 |       <h3
 29 |           className={cn("mt-8 scroll-m-20 text-2xl font-semibold tracking-normal", className)}
 30 |           {...props}
 31 |       />
 32 |   ),
 33 |   h4: ({ className, ...props }) => (
 34 |       <h4
 35 |           className={cn("mt-8 scroll-m-20 text-xl font-semibold tracking-tight", className)}
 36 |           {...props}
 37 |       />
 38 |   ),
 39 |   h5: ({ className, ...props }) => (
 40 |       <h5
 41 |           className={cn("mt-8 scroll-m-20 text-lg font-semibold tracking-tight", className)}
 42 |           {...props}
 43 |       />
 44 |   ),
 45 |   h6: ({ className, ...props }) => (
 46 |       <h6
 47 |           className={cn("mt-8 scroll-m-20 text-base font-semibold tracking-tight", className)}
 48 |           {...props}
 49 |       />
 50 |   ),
 51 |   a: ({ className, ...props }) => (
 52 |       <a className={cn("font-medium underline underline-offset-4", className)} {...props} />
 53 |   ),
 54 |   p: ({ className, ...props }) => (
 55 |       <p className={cn("leading-7 [&:not(:first-child)]:mt-6", className)} {...props} />
 56 |   ),
 57 |   ul: ({ className, ...props }) => (
 58 |       <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
 59 |   ),
 60 |   ol: ({ className, ...props }) => (
 61 |       <ol className={cn("my-6 ml-6 list-decimal", className)} {...props} />
 62 |   ),
 63 |   li: ({ className, ...props }) => <li className={cn("mt-2", className)} {...props} />,
 64 |   blockquote: ({ className, ...props }) => (
 65 |       <blockquote
 66 |           className={cn("mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground", className)}
 67 |           {...props}
 68 |       />
 69 |   ),
 70 |   img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
 71 |       // rome-ignore lint/a11y/useAltText: <explanation>
 72 |       <img className={cn("rounded-md border", className)} alt={alt} {...props} />
 73 |   ),
 74 |   hr: ({ ...props }) => <hr className="my-4 md:my-8" {...props} />,
 75 |   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
 76 |       <div className="my-6 w-full overflow-y-auto">
 77 |           <table className={cn("w-full", className)} {...props} />
 78 |       </div>
 79 |   ),
 80 |   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
 81 |       <tr className={cn("m-0 border-t p-0 even:bg-muted", className)} {...props} />
 82 |   ),
 83 |   th: ({ className, ...props }) => (
 84 |       <th
 85 |           className={cn(
 86 |               "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
 87 |               className,
 88 |           )}
 89 |           {...props}
 90 |       />
 91 |   ),
 92 |   td: ({ className, ...props }) => (
 93 |       <td
 94 |           className={cn(
 95 |               "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
 96 |               className,
 97 |           )}
 98 |           {...props}
 99 |       />
100 |   ),
101 |   pre: ({ className, ...props }) => (
102 |       <pre
103 |           className={cn("mb-4 mt-6 overflow-x-auto rounded-lg border bg-black py-4", className)}
104 |           {...props}
105 |       />
106 |   ),
107 |   code: ({ className, ...props }) => (
108 |       <code
109 |           className={cn(
110 |               "relative rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm",
111 |               className,
112 |           )}
113 |           {...props}
114 |       />
115 |   ),
116 |   // Steps,
117 |   FormIntake,
118 |   toast,
119 |   useToast,
120 |   Tab: MdxTab,
121 |   Tabs: MdxTabs,
122 |   Image: Image as any,
123 |   Callout,
124 | Card: MdxCard,
125 | };
126 | 
127 | interface MdxProps {
128 |   code: string
129 | }
130 | 
131 | export function Mdx({ code }: MdxProps) {
132 |   const Component = useMDXComponent(code)
133 | 
134 |   return <Component components={components} />
135 | }
136 | 


--------------------------------------------------------------------------------
/components/mdx-tabs.tsx:
--------------------------------------------------------------------------------
 1 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 2 | 
 3 | interface MdxTabProps {
 4 |     children: React.ReactNode;
 5 |     items: string[];
 6 | }
 7 | 
 8 | export const MdxTabs = ({ children, items }: MdxTabProps) => {
 9 |     return (
10 |         <Tabs defaultValue={items[0]}>
11 |             <TabsList>
12 |                 {items.map((tab) => (
13 |                     <TabsTrigger value={tab} key={tab} asChild>
14 |                         <p>{tab}</p>
15 |                     </TabsTrigger>
16 |                 ))}
17 |             </TabsList>
18 |             {children}
19 |         </Tabs>
20 |     );
21 | };
22 | 
23 | export const MdxTab = ({
24 |     children,
25 |     value,
26 | }: {
27 |     children: React.ReactNode;
28 |     value: string;
29 | }) => {
30 |     return <TabsContent value={value}>{children}</TabsContent>;
31 | };


--------------------------------------------------------------------------------
/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | 
 5 | export function ModeToggle() {
 6 |   const { setTheme, theme } = useTheme()
 7 | 
 8 |   return (
 9 |     <button
10 |       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
11 |       className="border rounded-md w-6 h-6 flex items-center justify-center">
12 |       <span className="sr-only">Toggle mode</span>
13 |       {theme !== "dark" ? (
14 |         <svg
15 |           xmlns="http://www.w3.org/2000/svg"
16 |           fill="none"
17 |           viewBox="0 0 24 24"
18 |           strokeWidth={1.5}
19 |           stroke="currentColor"
20 |           className="w-4 h-4">
21 |           <path
22 |             strokeLinecap="round"
23 |             strokeLinejoin="round"
24 |             d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
25 |           />
26 |         </svg>
27 |       ) : (
28 |         <svg
29 |           xmlns="http://www.w3.org/2000/svg"
30 |           fill="none"
31 |           viewBox="0 0 24 24"
32 |           strokeWidth={1.5}
33 |           stroke="currentColor"
34 |           className="w-4 h-4">
35 |           <path
36 |             strokeLinecap="round"
37 |             strokeLinejoin="round"
38 |             d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
39 |           />
40 |         </svg>
41 |       )}
42 |     </button>
43 |   )
44 | }
45 | 


--------------------------------------------------------------------------------
/components/particles.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useRef, useEffect, useState } from "react";
  4 | import { useMousePosition } from "@/lib/useMouse";
  5 | 
  6 | interface ParticlesProps {
  7 | 	className?: string;
  8 | 	quantity?: number;
  9 | 	staticity?: number;
 10 | 	ease?: number;
 11 | 	refresh?: boolean;
 12 | }
 13 | 
 14 | export default function Particles({
 15 | 	className = "",
 16 | 	quantity = 30,
 17 | 	staticity = 50,
 18 | 	ease = 50,
 19 | 	refresh = false,
 20 | }: ParticlesProps) {
 21 | 	const canvasRef = useRef<HTMLCanvasElement>(null);
 22 | 	const canvasContainerRef = useRef<HTMLDivElement>(null);
 23 | 	const context = useRef<CanvasRenderingContext2D | null>(null);
 24 | 	const circles = useRef<any[]>([]);
 25 | 	const mousePosition = useMousePosition();
 26 | 	const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 27 | 	const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
 28 | 	const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
 29 | 
 30 | 	useEffect(() => {
 31 | 		if (canvasRef.current) {
 32 | 			context.current = canvasRef.current.getContext("2d");
 33 | 		}
 34 | 		initCanvas();
 35 | 		animate();
 36 | 		window.addEventListener("resize", initCanvas);
 37 | 
 38 | 		return () => {
 39 | 			window.removeEventListener("resize", initCanvas);
 40 | 		};
 41 | 	}, []);
 42 | 
 43 | 	useEffect(() => {
 44 | 		onMouseMove();
 45 | 	}, [mousePosition.x, mousePosition.y]);
 46 | 
 47 | 	useEffect(() => {
 48 | 		initCanvas();
 49 | 	}, [refresh]);
 50 | 
 51 | 	const initCanvas = () => {
 52 | 		resizeCanvas();
 53 | 		drawParticles();
 54 | 	};
 55 | 
 56 | 	const onMouseMove = () => {
 57 | 		if (canvasRef.current) {
 58 | 			const rect = canvasRef.current.getBoundingClientRect();
 59 | 			const { w, h } = canvasSize.current;
 60 | 			const x = mousePosition.x - rect.left - w / 2;
 61 | 			const y = mousePosition.y - rect.top - h / 2;
 62 | 			const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
 63 | 			if (inside) {
 64 | 				mouse.current.x = x;
 65 | 				mouse.current.y = y;
 66 | 			}
 67 | 		}
 68 | 	};
 69 | 
 70 | 	type Circle = {
 71 | 		x: number;
 72 | 		y: number;
 73 | 		translateX: number;
 74 | 		translateY: number;
 75 | 		size: number;
 76 | 		alpha: number;
 77 | 		targetAlpha: number;
 78 | 		dx: number;
 79 | 		dy: number;
 80 | 		magnetism: number;
 81 | 	};
 82 | 
 83 | 	const resizeCanvas = () => {
 84 | 		if (canvasContainerRef.current && canvasRef.current && context.current) {
 85 | 			circles.current.length = 0;
 86 | 			canvasSize.current.w = canvasContainerRef.current.offsetWidth;
 87 | 			canvasSize.current.h = canvasContainerRef.current.offsetHeight;
 88 | 			canvasRef.current.width = canvasSize.current.w * dpr;
 89 | 			canvasRef.current.height = canvasSize.current.h * dpr;
 90 | 			canvasRef.current.style.width = `${canvasSize.current.w}px`;
 91 | 			canvasRef.current.style.height = `${canvasSize.current.h}px`;
 92 | 			context.current.scale(dpr, dpr);
 93 | 		}
 94 | 	};
 95 | 
 96 | 	const circleParams = (): Circle => {
 97 | 		const x = Math.floor(Math.random() * canvasSize.current.w);
 98 | 		const y = Math.floor(Math.random() * canvasSize.current.h);
 99 | 		const translateX = 0;
100 | 		const translateY = 0;
101 | 		const size = Math.floor(Math.random() * 2) + 0.1;
102 | 		const alpha = 0;
103 | 		const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
104 | 		const dx = (Math.random() - 0.5) * 0.2;
105 | 		const dy = (Math.random() - 0.5) * 0.2;
106 | 		const magnetism = 0.1 + Math.random() * 4;
107 | 		return {
108 | 			x,
109 | 			y,
110 | 			translateX,
111 | 			translateY,
112 | 			size,
113 | 			alpha,
114 | 			targetAlpha,
115 | 			dx,
116 | 			dy,
117 | 			magnetism,
118 | 		};
119 | 	};
120 | 
121 | 	const drawCircle = (circle: Circle, update = false) => {
122 | 		if (context.current) {
123 | 			const { x, y, translateX, translateY, size, alpha } = circle;
124 | 			context.current.translate(translateX, translateY);
125 | 			context.current.beginPath();
126 | 			context.current.arc(x, y, size, 0, 2 * Math.PI);
127 | 			context.current.fillStyle = `rgba(255, 255, 255, ${alpha})`;
128 | 			context.current.fill();
129 | 			context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
130 | 
131 | 			if (!update) {
132 | 				circles.current.push(circle);
133 | 			}
134 | 		}
135 | 	};
136 | 
137 | 	const clearContext = () => {
138 | 		if (context.current) {
139 | 			context.current.clearRect(
140 | 				0,
141 | 				0,
142 | 				canvasSize.current.w,
143 | 				canvasSize.current.h,
144 | 			);
145 | 		}
146 | 	};
147 | 
148 | 	const drawParticles = () => {
149 | 		clearContext();
150 | 		const particleCount = quantity;
151 | 		for (let i = 0; i < particleCount; i++) {
152 | 			const circle = circleParams();
153 | 			drawCircle(circle);
154 | 		}
155 | 	};
156 | 
157 | 	const remapValue = (
158 | 		value: number,
159 | 		start1: number,
160 | 		end1: number,
161 | 		start2: number,
162 | 		end2: number,
163 | 	): number => {
164 | 		const remapped =
165 | 			((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
166 | 		return remapped > 0 ? remapped : 0;
167 | 	};
168 | 
169 | 	const animate = () => {
170 | 		clearContext();
171 | 		circles.current.forEach((circle: Circle, i: number) => {
172 | 			// Handle the alpha value
173 | 			const edge = [
174 | 				circle.x + circle.translateX - circle.size, // distance from left edge
175 | 				canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
176 | 				circle.y + circle.translateY - circle.size, // distance from top edge
177 | 				canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
178 | 			];
179 | 			const closestEdge = edge.reduce((a, b) => Math.min(a, b));
180 | 			const remapClosestEdge = parseFloat(
181 | 				remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),
182 | 			);
183 | 			if (remapClosestEdge > 1) {
184 | 				circle.alpha += 0.02;
185 | 				if (circle.alpha > circle.targetAlpha) {
186 | 					circle.alpha = circle.targetAlpha;
187 | 				}
188 | 			} else {
189 | 				circle.alpha = circle.targetAlpha * remapClosestEdge;
190 | 			}
191 | 			circle.x += circle.dx;
192 | 			circle.y += circle.dy;
193 | 			circle.translateX +=
194 | 				(mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /
195 | 				ease;
196 | 			circle.translateY +=
197 | 				(mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /
198 | 				ease;
199 | 			// circle gets out of the canvas
200 | 			if (
201 | 				circle.x < -circle.size ||
202 | 				circle.x > canvasSize.current.w + circle.size ||
203 | 				circle.y < -circle.size ||
204 | 				circle.y > canvasSize.current.h + circle.size
205 | 			) {
206 | 				// remove the circle from the array
207 | 				circles.current.splice(i, 1);
208 | 				// create a new circle
209 | 				const newCircle = circleParams();
210 | 				drawCircle(newCircle);
211 | 				// update the circle position
212 | 			} else {
213 | 				drawCircle(
214 | 					{
215 | 						...circle,
216 | 						x: circle.x,
217 | 						y: circle.y,
218 | 						translateX: circle.translateX,
219 | 						translateY: circle.translateY,
220 | 						alpha: circle.alpha,
221 | 					},
222 | 					true,
223 | 				);
224 | 			}
225 | 		});
226 | 		window.requestAnimationFrame(animate);
227 | 	};
228 | 
229 | 	return (
230 | 		<div className={className} ref={canvasContainerRef} aria-hidden="true">
231 | 			<canvas ref={canvasRef} />
232 | 		</div>
233 | 	);
234 | }


--------------------------------------------------------------------------------
/components/scrollablepic.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React, { useRef } from "react";
  3 | import { useScroll, useTransform, motion } from "framer-motion";
  4 |  
  5 | export const ContainerScroll = ({
  6 |   users,
  7 |   titleComponent,
  8 | }: {
  9 |   users: {
 10 |     name: string;
 11 |     designation: string;
 12 |     image: string;
 13 |     badge?: string;
 14 |   }[];
 15 |   titleComponent: string | React.ReactNode;
 16 | }) => {
 17 |   const containerRef = useRef<any>(null);
 18 |   const { scrollYProgress } = useScroll({
 19 |     target: containerRef,
 20 |   });
 21 |   const [isMobile, setIsMobile] = React.useState(false);
 22 | 
 23 |   React.useEffect(() => {
 24 |     const checkMobile = () => {
 25 |       setIsMobile(window.innerWidth <= 768);
 26 |     };
 27 |     checkMobile();
 28 |     window.addEventListener("resize", checkMobile);
 29 |     return () => {
 30 |       window.removeEventListener("resize", checkMobile);
 31 |     };
 32 |   }, []);
 33 | 
 34 |   const scaleDimensions = () => {
 35 |     return isMobile ? [0.7, 0.9] : [1.05, 1];
 36 |   };
 37 | 
 38 |   const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
 39 |   const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
 40 |   const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
 41 | 
 42 |   return (
 43 |     <div
 44 |       className="h-[120vh] flex items-center justify-center relative p-20"
 45 |       ref={containerRef}
 46 |     >
 47 |       <div
 48 |         className="py-40 w-full relative"
 49 |         style={{
 50 |           perspective: "1000px",
 51 |         }}
 52 |       >
 53 |         <Header translate={translate} titleComponent={titleComponent} />
 54 |         <Card
 55 |           rotate={rotate}
 56 |           translate={translate}
 57 |           scale={scale}
 58 |           users={users}
 59 |         />
 60 |       </div>
 61 |     </div>
 62 |   );
 63 | };
 64 | 
 65 | export const Header = ({ translate, titleComponent }: any) => {
 66 |   return (
 67 |     <motion.div
 68 |       style={{
 69 |         translateY: translate,
 70 |       }}
 71 |       className="div max-w-5xl mx-auto text-center"
 72 |     >
 73 |       {titleComponent}
 74 |     </motion.div>
 75 |   );
 76 | };
 77 | 
 78 | export const Card = ({
 79 |   rotate,
 80 |   scale,
 81 |   translate,
 82 |   users,
 83 | }: {
 84 |   rotate: any;
 85 |   scale: any;
 86 |   translate: any;
 87 |   users: {
 88 |     name: string;
 89 |     designation: string;
 90 |     image: string;
 91 |     badge?: string;
 92 |   }[];
 93 | }) => {
 94 |   return (
 95 |     <motion.div
 96 |       style={{
 97 |         rotateX: rotate, // rotate in X-axis
 98 |         scale,
 99 |         boxShadow:
100 |           "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003",
101 |       }}
102 |       className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-6 bg-[#222222] rounded-[30px] shadow-2xl"
103 |     >
104 |       <div className="bg-gray-100 h-full w-full rounded-2xl grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 overflow-hidden p-4">
105 |         {users.map((user, idx: number) => (
106 |           <motion.div
107 |             key={`user-${idx}`}
108 |             className="bg-white rounded-md cursor-pointer relative"
109 |             style={{ translateY: translate }}
110 |             whileHover={{
111 |               boxShadow:
112 |                 "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
113 |             }}
114 |           >
115 |             <div className="absolute top-2 right-2 rounded-full text-xs font-bold bg-white px-2 py-1">
116 |               {user.badge}
117 |             </div>
118 |             <img
119 |               src={user.image}
120 |               className="rounded-tr-md rounded-tl-md text-sm "
121 |               alt="thumbnail"
122 |             />
123 |             <div className="p-4">
124 |               <h1 className="font-semibold text-sm ">{user.name}</h1>
125 |               <h2 className=" text-gray-500 text-xs ">{user.designation}</h2>
126 |             </div>
127 |           </motion.div>
128 |         ))}
129 |       </div>
130 |     </motion.div>
131 |   );
132 | };
133 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
 5 | import type { ThemeProviderProps } from "next-themes/dist/types"
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/trendy.tsx:
--------------------------------------------------------------------------------
  1 | import { allPosts } from "@/.contentlayer/generated";
  2 | import { PostCard } from "./ui/card-binary-view";
  3 | import { compareDesc } from "date-fns";
  4 | import { Separator } from "./ui/separator";
  5 | import { TextGenerateEffect } from "./ui/text-gen";
  6 | 
  7 | import Link from "next/link";
  8 | import HackyButton from "./hacky-button";
  9 | const Trendy = () => {
 10 |   const posts = allPosts
 11 |     .filter((post) => post.date)
 12 |     .sort((a, b) => {
 13 |       PostCard;
 14 |       return compareDesc(new Date(a.date), new Date(b.date));
 15 |     });
 16 | 
 17 |   const firstTwo = [posts[0], posts[1]];
 18 |   return (
 19 |     <div className="flex flex-col gap-5 justify-center items-center container max-w-4xl py-6 lg:py-10">
 20 |       <h1 className="relative z-10 text-lg md:text-7xl font-headingAlt  bg-clip-text text-transparent bg-gradient-to-b from-purple-300/90 to-white/90  text-center font-bold">
 21 |         <TextGenerateEffect
 22 |           words="Get the trendy's one"
 23 |           className=" text-lg md:text-6xl font-headingAlt  bg-clip-text text-transparent bg-gradient-to-b from-purple-300/90 to-white/90  text-center "
 24 |         />
 25 |       </h1>
 26 |       <Separator />
 27 | 
 28 |       <div className="relative flex flex-col items-center gap-4 md:flex-row md:justify-between md:gap-8">
 29 |         <hr className="my-8" />
 30 |         {firstTwo?.length ? (
 31 |           <div className="grid gap-10 sm:grid-cols-2">
 32 |             {firstTwo.map((post, index) => (
 33 |               <PostCard
 34 |                 key={post._id}
 35 |                 title={post.title}
 36 |                 description={post.description!}
 37 |                 date={post.date}
 38 |                 slug={post.slug}
 39 |               />
 40 | 
 41 |               // <article
 42 |               //   key={post._id}
 43 |               //   className="group relative flex flex-col space-y-2"
 44 |               // >
 45 |               //   {post.image && (
 46 |               //     <Image
 47 |               //       src={post.image}
 48 |               //       alt={post.title}
 49 |               //       width={804}
 50 |               //       height={452}
 51 |               //       className="rounded-md border bg-muted transition-colors"
 52 |               //       priority={index <= 1}
 53 |               //     />
 54 |               //   )}
 55 |               //   <h2 className="text-2xl font-extrabold">{post.title}</h2>
 56 |               //   {post.description && (
 57 |               //     <p className="text-muted-foreground">{post.description}</p>
 58 |               //   )}
 59 |               //   {post.date && (
 60 |               //     <p className="text-sm text-muted-foreground">
 61 |               //       {formatDate(post.date)}
 62 |               //     </p>
 63 |               //   )}
 64 |               //   <Link href={post.slug} className="absolute inset-0">
 65 |               //     <span className="sr-only">View Article</span>
 66 |               //   </Link>
 67 |               // </article>
 68 |             ))}
 69 |             <div className="absolute -top-4 -z-10 flex w-full justify-center">
 70 |               <div className="h-[310px] w-[310px] max-w-full animate-pulse-slow rounded-full bg-[#8678F9] opacity-20 blur-[100px]" />
 71 |             </div>
 72 |             <div className="absolute -top-4 -z-10 flex w-full justify-center">
 73 |               <div className="h-[310px] w-[310px] max-w-full animate-pulse-slow rounded-full bg-[#8678F9] opacity-20 blur-[100px]" />
 74 |             </div>
 75 |           </div>
 76 |         ) : (
 77 |           <p>No posts published.</p>
 78 |         )}
 79 |       </div>
 80 |       <div>
 81 |         <Link href={"/posts"}>
 82 |           <HackyButton key={12} text="Explore More" />
 83 |           {/* <button className="bg-transparent mt-2 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6  text-white inline-block">
 84 |             <span className="absolute inset-0 overflow-hidden rounded-full">
 85 |               <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
 86 |             </span>
 87 |             <div className="relative flex space-x-2 items-center z-10 rounded-full bg-transparent py-2.5 px-4 ring-1 ring-white/10 ">
 88 |               <span>{"Explore More"}</span>
 89 |               <svg
 90 |                 width="16"
 91 |                 height="16"
 92 |                 viewBox="0 0 24 24"
 93 |                 fill="none"
 94 |                 xmlns="http://www.w3.org/2000/svg"
 95 |               >
 96 |                 <path
 97 |                   stroke="currentColor"
 98 |                   strokeLinecap="round"
 99 |                   strokeLinejoin="round"
100 |                   strokeWidth="1.5"
101 |                   d="M10.75 8.75L14.25 12L10.75 15.25"
102 |                 ></path>
103 |               </svg>
104 |             </div>
105 |             <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
106 |           </button> */}
107 |         </Link>
108 |       </div>
109 |     </div>
110 |   );
111 | };
112 | 
113 | export default Trendy;
114 | 


--------------------------------------------------------------------------------
/components/ui/Spotlight.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { cn } from "@/lib/utils";
 3 | type SpotlightProps = {
 4 |   className?: string;
 5 |   fill?: string;
 6 | };
 7 | 
 8 | const Spotlight = ({ className, fill }: SpotlightProps) => {
 9 |   return (
10 |     <svg
11 |       className={cn(
12 |         "animate-spotlight pointer-events-none absolute z-[1]  h-[169%] w-[138%] lg:w-[84%] opacity-0",
13 |         className
14 |       )}
15 |       xmlns="http://www.w3.org/2000/svg"
16 |       viewBox="0 0 3787 2842"
17 |       fill="none"
18 |     >
19 |       <g filter="url(#filter)">
20 |         <ellipse
21 |           cx="1924.71"
22 |           cy="273.501"
23 |           rx="1924.71"
24 |           ry="273.501"
25 |           transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
26 |           fill={fill || "white"}
27 |           fillOpacity="0.21"
28 |         ></ellipse>
29 |       </g>
30 |       <defs>
31 |         <filter
32 |           id="filter"
33 |           x="0.860352"
34 |           y="0.838989"
35 |           width="3785.16"
36 |           height="2840.26"
37 |           filterUnits="userSpaceOnUse"
38 |           colorInterpolationFilters="sRGB"
39 |         >
40 |           <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
41 |           <feBlend
42 |             mode="normal"
43 |             in="SourceGraphic"
44 |             in2="BackgroundImageFix"
45 |             result="shape"
46 |           ></feBlend>
47 |           <feGaussianBlur
48 |             stdDeviation="151"
49 |             result="effect1_foregroundBlur_1065_8"
50 |           ></feGaussianBlur>
51 |         </filter>
52 |       </defs>
53 |     </svg>
54 |   );
55 | };
56 | 
57 | export default Spotlight;
58 | 


--------------------------------------------------------------------------------
/components/ui/bg-box.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import React from "react";
 4 | import { motion } from "framer-motion";
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
 8 |   const rows = new Array(150).fill(1);
 9 |   const cols = new Array(100).fill(1);
10 |   let colors = [
11 |     "--sky-300",
12 |     "--pink-300",
13 |     "--green-300",
14 |     "--yellow-300",
15 |     "--red-300",
16 |     "--purple-300",
17 |     "--blue-300",
18 |     "--indigo-300",
19 |     "--violet-300",
20 |   ];
21 |   const getRandomColor = () => {
22 |     return colors[Math.floor(Math.random() * colors.length)];
23 |   };
24 | 
25 |   return (
26 |     <div
27 |       style={{
28 |         transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
29 |       }}
30 |       className={cn(
31 |         "absolute  left-1/4 p-4 -top-1/4 flex  -translate-x-1/2 -translate-y-1/2 w-full h-full z-0 ",
32 |         className
33 |       )}
34 |       {...rest}
35 |     >
36 |       {rows.map((_, i) => (
37 |         <motion.div
38 |           key={`row` + i}
39 |           className="w-16 h-8  border-l  border-slate-700 relative"
40 |         >
41 |           {cols.map((_, j) => (
42 |             <motion.div
43 |               whileHover={{
44 |                 backgroundColor: `var(${getRandomColor()})`,
45 |                 transition: { duration: 0 },
46 |               }}
47 |               animate={{
48 |                 transition: { duration: 2 },
49 |               }}
50 |               key={`col` + j}
51 |               className="w-16 h-8  border-r border-t border-slate-700 relative"
52 |             >
53 |               {j % 2 === 0 && i % 2 === 0 ? (
54 |                 <svg
55 |                   xmlns="http://www.w3.org/2000/svg"
56 |                   fill="none"
57 |                   viewBox="0 0 24 24"
58 |                   strokeWidth="1.5"
59 |                   stroke="currentColor"
60 |                   className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"
61 |                 >
62 |                   <path
63 |                     strokeLinecap="round"
64 |                     strokeLinejoin="round"
65 |                     d="M12 6v12m6-6H6"
66 |                   />
67 |                 </svg>
68 |               ) : null}
69 |             </motion.div>
70 |           ))}
71 |         </motion.div>
72 |       ))}
73 |     </div>
74 |   );
75 | };
76 | 
77 | export const Boxes = React.memo(BoxesCore);
78 | 


--------------------------------------------------------------------------------
/components/ui/blog-header.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion, useInView } from "framer-motion";
 4 | import { useRef } from "react";
 5 | import Feeder from "./feeder";
 6 | 
 7 | const BlogHeader = ({ totalViews }: { totalViews: number }) => {
 8 |   const ref = useRef(null);
 9 |   const isInView = useInView(ref);
10 |   const FADE_DOWN_ANIMATION_VARIANTS = {
11 |     hidden: { opacity: 0, y: -10 },
12 |     show: { opacity: 1, y: 0, transition: { type: "spring" } },
13 |   };
14 | 
15 |   return (
16 |     <div className="mx-auto max-w-2xl py-10 text-center">
17 |       <motion.div
18 |         initial="hidden"
19 |         ref={ref}
20 |         animate={isInView ? "show" : "hidden"}
21 |         viewport={{ once: true }}
22 |         variants={{
23 |           hidden: {},
24 |           show: {
25 |             transition: {
26 |               staggerChildren: 0.3,
27 |             },
28 |           },
29 |         }}
30 |       >
31 |         <Feeder feed={`🎉  We have passed ${totalViews} views`} />
32 |         <motion.h1
33 |           variants={FADE_DOWN_ANIMATION_VARIANTS}
34 |           className="text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-tr to-white sm:text-6xl lg:text-7xl font-headingAlt from-white/50"
35 |         >
36 |           <div className="mb-4"></div>
37 |           What <span className="mx-[3px]"></span>i{" "}
38 |           <span className="mx-[3px]"></span> thought
39 |         </motion.h1>
40 |         <motion.p
41 |           variants={FADE_DOWN_ANIMATION_VARIANTS}
42 |           className="mt-6 text-lg leading-8"
43 |         >
44 |           A collection of hand made and crafted thought from KiNFiSH
45 |         </motion.p>
46 | 
47 |         <motion.p
48 |           variants={FADE_DOWN_ANIMATION_VARIANTS}
49 |           className="mt-6 text-lg leading-8"
50 |         ></motion.p>
51 |       </motion.div>
52 |     </div>
53 |   );
54 | };
55 | 
56 | export default BlogHeader;
57 | 


--------------------------------------------------------------------------------
/components/ui/border-btn.tsx:
--------------------------------------------------------------------------------
 1 | const BorderBtn = () => {
 2 |   return (
 3 |     <div>
 4 |       <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
 5 |         <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
 6 |         <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
 7 |         Join z Gang
 8 |         </span>
 9 |       </button>
10 |     </div>
11 |   );
12 | };
13 | export default BorderBtn;
14 | 


--------------------------------------------------------------------------------
/components/ui/button-std.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | 
 4 | type ButtonStdProps = {
 5 |     text: string,
 6 |     route: string
 7 | }
 8 | const ButtonStd = (props : ButtonStdProps) => {
 9 |   return (
10 |     <div>
11 |       <Link href={`${props.route}`}>
12 |         <button className="bg-transparent mt-2 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6  text-white inline-block">
13 |           <span className="absolute inset-0 overflow-hidden rounded-full">
14 |             <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
15 |           </span>
16 |           <div className="relative flex space-x-2 items-center z-10 rounded-full bg-transparent py-1.5 px-4 ring-1 ring-white/10 ">
17 |             <span>{props.text}</span>
18 |             <svg
19 |               width="16"
20 |               height="16"
21 |               viewBox="0 0 24 24"
22 |               fill="none"
23 |               xmlns="http://www.w3.org/2000/svg"
24 |             >
25 |               <path
26 |                 stroke="currentColor"
27 |                 strokeLinecap="round"
28 |                 strokeLinejoin="round"
29 |                 strokeWidth="1.5"
30 |                 d="M10.75 8.75L14.25 12L10.75 15.25"
31 |               ></path>
32 |             </svg>
33 |           </div>
34 |           <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
35 |         </button>
36 |       </Link>
37 |     </div>
38 |   );
39 | };
40 | 
41 | export default ButtonStd;
42 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/components/ui/card-binary-view.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { EvervaultCard, Icon } from "../ui/card-binary";
 3 | import { Separator } from "./separator";
 4 | import Link from "next/link";
 5 | import ButtonStd from "./button-std";
 6 | import HackyButton from "../hacky-button";
 7 | 
 8 | type PostCardProps = {
 9 |   title: string;
10 |   description: string;
11 |   slug: string;
12 |   date: string;
13 | };
14 | export function PostCard(props: PostCardProps) {
15 |   return (
16 |     <div className="border border-black/[0.2] bg-gradient-to-tr from-purple-400/10 to-transparent/5 dark:border-white/[0.2] flex flex-col items-start max-w-sm mx-auto p-4 relative h-[25rem] w-[25rem]">
17 |       <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
18 |       <Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
19 |       <Icon className="absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black" />
20 |       <Icon className="absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black" />
21 | 
22 |       <EvervaultCard text={props.title} />
23 |       <Separator className="mt-2 text-purple-900" />
24 |       <h2 className="dark:text-white text-black mt-4 text-[14px] font-light">
25 |         {props.description}
26 |       </h2>
27 |       {/* <p className="text-sm border font-light dark:border-white/[0.2] border-black/[0.2] rounded-full mt-4 text-black dark:text-white px-2 py-0.5">
28 |         Watch me hover
29 |       </p> */}
30 |      
31 |       <ButtonStd route={props.slug} text="Read More" />
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/components/ui/card-binary.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useMotionValue } from "framer-motion";
  4 | import React, { useState, useEffect } from "react";
  5 | import { useMotionTemplate, motion } from "framer-motion";
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | export const EvervaultCard = ({
  9 |   text,
 10 |   className,
 11 | }: {
 12 |   text?: string;
 13 |   className?: string;
 14 | }) => {
 15 |   let mouseX = useMotionValue(0);
 16 |   let mouseY = useMotionValue(0);
 17 | 
 18 |   const [randomString, setRandomString] = useState("");
 19 | 
 20 |   useEffect(() => {
 21 |     let str = generateRandomString(1500);
 22 |     setRandomString(str);
 23 |   }, []);
 24 | 
 25 |   function onMouseMove({ currentTarget, clientX, clientY }: any) {
 26 |     let { left, top } = currentTarget.getBoundingClientRect();
 27 |     mouseX.set(clientX - left);
 28 |     mouseY.set(clientY - top);
 29 | 
 30 |     const str = generateRandomString(1500);
 31 |     setRandomString(str);
 32 |   }
 33 | 
 34 |   return (
 35 |     <div
 36 |       className={cn(
 37 |         "p-0.5  bg-transparent aspect-square  flex items-center justify-center w-full h-full relative",
 38 |         className
 39 |       )}
 40 |     >
 41 |       <div
 42 |         onMouseMove={onMouseMove}
 43 |         className="group/card rounded-3xl w-full relative overflow-hidden bg-transparent flex items-center justify-center h-full"
 44 |       >
 45 |         <CardPattern
 46 |           mouseX={mouseX}
 47 |           mouseY={mouseY}
 48 |           randomString={randomString}
 49 |         />
 50 |         <div className="relative z-10 flex items-center justify-center">
 51 |           <div className="relative h-44 w-44  rounded-full flex items-center justify-center text-white font-bold text-4xl">
 52 |             <div className="absolute w-full h-full bg-white/[0.8] dark:bg-transparent blur-sm rounded-full" />
 53 |             <span className="dark:text-white text-black z-20">{text}</span>
 54 |           </div>
 55 |         </div>
 56 |       </div>
 57 |     </div>
 58 |   );
 59 | };
 60 | 
 61 | export function CardPattern({ mouseX, mouseY, randomString }: any) {
 62 |   let maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`;
 63 |   let style = { maskImage, WebkitMaskImage: maskImage };
 64 | 
 65 |   return (
 66 |     <div className="pointer-events-none">
 67 |       <div className="absolute inset-0 rounded-2xl  [mask-image:linear-gradient(white,transparent)] group-hover/card:opacity-50"></div>
 68 |       <motion.div
 69 |         className="absolute inset-0 rounded-2xl bg-gradient-to-r from-purple-500 to-ornage-500 opacity-0  group-hover/card:opacity-100 backdrop-blur-xl transition duration-500"
 70 |         style={style}
 71 |       />
 72 |       <motion.div
 73 |         className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay  group-hover/card:opacity-100"
 74 |         style={style}
 75 |       >
 76 |         <p className="absolute inset-x-0 text-xs h-full break-words whitespace-pre-wrap text-white font-mono font-bold transition duration-500">
 77 |           {randomString}
 78 |         </p>
 79 |       </motion.div>
 80 |     </div>
 81 |   );
 82 | }
 83 | 
 84 | const characters =
 85 |   "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 86 | export const generateRandomString = (length: number) => {
 87 |   let result = "";
 88 |   for (let i = 0; i < length; i++) {
 89 |     result += characters.charAt(Math.floor(Math.random() * characters.length));
 90 |   }
 91 |   return result;
 92 | };
 93 | 
 94 | export const Icon = ({ className, ...rest }: any) => {
 95 |   return (
 96 |     <svg
 97 |       xmlns="http://www.w3.org/2000/svg"
 98 |       fill="none"
 99 |       viewBox="0 0 24 24"
100 |       strokeWidth="1.5"
101 |       stroke="currentColor"
102 |       className={className}
103 |       {...rest}
104 |     >
105 |       <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
106 |     </svg>
107 |   );
108 | };
109 | 


--------------------------------------------------------------------------------
/components/ui/feeder.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | 
 4 | 
 5 | const Feeder = ({feed}: {feed:string} ) => {
 6 |   return (
 7 |     <div>
 8 |       <button className="bg-purple-700/10 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 tracking-wide  text-white inline-block">
 9 |         <span className="absolute inset-0 overflow-hidden rounded-full">
10 |           <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
11 |         </span>
12 |         <div className="relative flex space-x-2 items-center z-10 rounded-full bg-gradient-to-tr from-black/90 to-transparent py-0.5 px-4 ring-1 ring-white/10 ">
13 |           <Link href={'/posts'}>
14 |             <span>{feed}</span>
15 |           </Link>
16 |           <svg
17 |             width="16"
18 |             height="16"
19 |             viewBox="0 0 24 24"
20 |             fill="none"
21 |             xmlns="http://www.w3.org/2000/svg"
22 |           >
23 |             <path
24 |               stroke="currentColor"
25 |               strokeLinecap="round"
26 |               strokeLinejoin="round"
27 |               strokeWidth="1.5"
28 |               d="M10.75 8.75L14.25 12L10.75 15.25"
29 |             ></path>
30 |           </svg>
31 |         </div>
32 |         <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
33 |       </button>
34 |     </div>
35 |   );
36 | };
37 | 
38 | export default Feeder;


--------------------------------------------------------------------------------
/components/ui/floating-navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React, { useState } from "react";
 3 | import {
 4 |   AnimatePresence,
 5 |   motion,
 6 |   useMotionValueEvent,
 7 |   useScroll,
 8 | } from "framer-motion";
 9 | import { cn } from "@/lib/utils";
10 | import Link from "next/link";
11 | import { Icon } from "./card-binary";
12 | const FloatingNav = ({
13 |   navItems,
14 |   className,
15 | }: {
16 |   navItems: {
17 |     name: string;
18 |     link: string;
19 |     icon?: JSX.Element;
20 |   }[];
21 |   className?: string;
22 | }) => {
23 |   const { scrollYProgress } = useScroll();
24 | 
25 |   const [visible, setVisible] = useState(false);
26 | 
27 |   useMotionValueEvent(scrollYProgress, "change", (current) => {
28 |     let direction = current - scrollYProgress.getPrevious();
29 | 
30 |     if (scrollYProgress.get() < 0.05) {
31 |       setVisible(true);
32 |     } else {
33 |       if (direction < 0) {
34 |         setVisible(true);
35 |       } else {
36 |         setVisible(false);
37 |       }
38 |     }
39 |   });
40 |   return (
41 |     <AnimatePresence mode="wait">
42 |       <div className="fixed justify-center z-10 items-center  max-w-fit  top-5 inset-x-0 mx-auto ">
43 |         <motion.div
44 |           initial={{
45 |             opacity: 1,
46 |             y: -100,
47 |           }}
48 |           animate={{
49 |             y: visible ? 0 : -100,
50 |             opacity: visible ? 1 : 0,
51 |           }}
52 |           transition={{
53 |             duration: 0.2,
54 |           }}
55 |           className="border border-black/[0.2] bg-gradient-to-tr from-purple-400/20 to-transparent dark:border-white/[0.2] flex flex-col items-center justify-center  max-w-sm mx-auto p-4 relative h-[55px] backdrop-blur-2xl  w-full "
56 |         >
57 |           <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
58 |           <Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
59 |           <Icon className="absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black" />
60 |           <Icon className="absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black" />
61 | 
62 |           <div className="flex pr-2 pl-8 py-2  items-center justify-center space-x-4 border border-transparent">
63 |             {navItems.map((navItem: any, idx: number) => (
64 |               <Link
65 |                 key={`link=${idx}`}
66 |                 href={navItem.link}
67 |                 className={cn(
68 |                   "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
69 |                 )}
70 |               >
71 |                 {/* <span className="block sm:hidden">{navItem.icon}</span> */}
72 |                 <span className="hidden text-sm sm:block mr-[1.20rem]">{navItem.name}</span>  <Icon className=" h-6 w-6 bg-transparent text-gray-300/40 transform rotate-45 mx-20 " />
73 |               </Link>
74 |             ))}
75 |             <button className="relative py-2 px-4 text-sm font-medium text-black rounded-full border dark:text-white border-neutral-200 dark:border-white/[0.2]">
76 |               <span>Login</span>
77 |               <span className="absolute inset-x-0 -bottom-px mx-auto w-1/2 h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent" />
78 |             </button>
79 |           </div>
80 |         </motion.div>
81 |         {/* </motion.div> */}
82 |       </div>
83 |     </AnimatePresence>
84 |   );
85 | };
86 | 
87 | export default FloatingNav;
88 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/nav-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React from "react";
  3 | import { motion } from "framer-motion";
  4 | import Link from "next/link";
  5 | import Image from "next/image";
  6 | 
  7 | const transition = {
  8 |   type: "spring",
  9 |   mass: 0.5,
 10 |   damping: 11.5,
 11 |   stiffness: 100,
 12 |   restDelta: 0.001,
 13 |   restSpeed: 0.001,
 14 | };
 15 | 
 16 | export const MenuItem = ({
 17 |   setActive,
 18 |   active,
 19 |   item,
 20 |   children,
 21 | }: {
 22 |   setActive: (item: string) => void;
 23 |   active: string | null;
 24 |   item: string;
 25 |   children?: React.ReactNode;
 26 | }) => {
 27 |   return (
 28 |     <div onMouseEnter={() => setActive(item)} className="relative ">
 29 |       <motion.p
 30 |         transition={{ duration: 0.3 }}
 31 |         className="cursor-pointer text-black hover:opacity-[0.9] dark:text-white"
 32 |       >
 33 |         {item}
 34 |       </motion.p>   
 35 |       {active !== null && (
 36 |         <motion.div
 37 |           initial={{ opacity: 0, scale: 0.85, y: 10 }}
 38 |           animate={{ opacity: 1, scale: 1, y: 0 }}
 39 |           transition={transition}
 40 |         >
 41 |           {active === item && (
 42 |             <div className="absolute top-[calc(100%_+_1.7rem)] left-1/2 transform -translate-x-1/2">
 43 |               <motion.div
 44 |                 transition={transition}
 45 |                 layoutId="active" // layoutId ensures smooth animation
 46 |                 className="bg-white dark:bg-black backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl"
 47 |               >
 48 |                 <motion.div
 49 |                   layout // layout ensures smooth animation
 50 |                   className="w-max h-full p-4"
 51 |                 >
 52 |                   {children}
 53 |                 </motion.div>
 54 |               </motion.div>
 55 |             </div>
 56 |           )}
 57 |         </motion.div>
 58 |       )}
 59 |     </div>
 60 |   );
 61 | };
 62 | 
 63 | export const Menu = ({
 64 |   setActive,
 65 |   children,
 66 | }: {
 67 |   setActive: (item: string | null) => void;
 68 |   children: React.ReactNode;
 69 | }) => {
 70 |   return (
 71 |     <nav
 72 |       onMouseLeave={() => setActive(null)} // resets the state
 73 |       className="relative rounded-full boder border-transparent dark:bg-black dark:border-white/[0.2] bg-white shadow-input flex justify-center space-x-4 px-8 py-6 "
 74 |     >
 75 |       {children}
 76 |     </nav>
 77 |   );
 78 | };
 79 | 
 80 | export const ProductItem = ({
 81 |   title,
 82 |   description,
 83 |   href,
 84 |   src,
 85 | }: {
 86 |   title: string;
 87 |   description: string;
 88 |   href: string;
 89 |   src: string;
 90 | }) => {
 91 |   return (
 92 |     <Link href={href} className="flex space-x-2">
 93 |       <Image
 94 |         src={src}
 95 |         width={140}
 96 |         height={70}
 97 |         alt={title}
 98 |         className="flex-shrink-0 rounded-md shadow-2xl"
 99 |       />
100 |       <div>
101 |         <h4 className="text-xl font-bold mb-1 text-black dark:text-white">
102 |           {title}
103 |         </h4>
104 |         <p className="text-neutral-700 text-sm max-w-[10rem] dark:text-neutral-300">
105 |           {description}
106 |         </p>
107 |       </div>
108 |     </Link>
109 |   );
110 | };
111 | 
112 | export const HoveredLink = ({ children, ...rest }: any) => {
113 |   return (
114 |     <Link
115 |       {...rest}
116 |       className="text-neutral-700 dark:text-neutral-200 hover:text-black "
117 |     >
118 |       {children}
119 |     </Link>
120 |   );
121 | };
122 | 


--------------------------------------------------------------------------------
/components/ui/scollablepicview.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React from "react";
  3 | import { ContainerScroll } from "../scrollablepic"
  4 | 
  5 | export function HeroScrollDemo() {
  6 |   return (
  7 |     <div className="flex flex-col ">
  8 |       <ContainerScroll
  9 |         users={users}
 10 |         titleComponent={
 11 |           <>
 12 |             <h1 className="text-4xl font-semibold text-black dark:text-white">
 13 |               Unleash the power of <br />
 14 |               <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
 15 |                 Scroll Animations
 16 |               </span>
 17 |             </h1>
 18 |           </>
 19 |         }
 20 |       />
 21 |     </div>
 22 |   );
 23 | }
 24 | 
 25 | export const users = [
 26 |   {
 27 |     name: "Manu Arora",
 28 |     designation: "Founder, Algochurn",
 29 |     image: "https://picsum.photos/id/10/300/300",
 30 |     badge: "Mentor",
 31 |   },
 32 |   {
 33 |     name: "Sarah Singh",
 34 |     designation: "Founder, Sarah's Kitchen",
 35 |     image: "https://picsum.photos/id/11/300/300",
 36 |     badge: "Mentor",
 37 |   },
 38 |   {
 39 |     name: "John Doe",
 40 |     designation: "Software Engineer, Tech Corp",
 41 |     image: "https://picsum.photos/id/12/300/300",
 42 |     badge: "Mentor",
 43 |   },
 44 |   {
 45 |     name: "Jane Smith",
 46 |     designation: "Product Manager, Innovate Inc",
 47 |     image: "https://picsum.photos/id/13/300/300",
 48 |     badge: "Mentor",
 49 |   },
 50 |   {
 51 |     name: "Robert Johnson",
 52 |     designation: "Data Scientist, DataWorks",
 53 |     image: "https://picsum.photos/id/14/300/300",
 54 |     badge: "Mentor",
 55 |   },
 56 |   {
 57 |     name: "Emily Davis",
 58 |     designation: "UX Designer, DesignHub",
 59 |     image: "https://picsum.photos/id/15/300/300",
 60 |     badge: "Mentor",
 61 |   },
 62 |   {
 63 |     name: "Michael Miller",
 64 |     designation: "CTO, FutureTech",
 65 |     image: "https://picsum.photos/id/16/300/300",
 66 |     badge: "Mentor",
 67 |   },
 68 |   {
 69 |     name: "Sarah Brown",
 70 |     designation: "CEO, StartUp",
 71 |     image: "https://picsum.photos/id/17/300/300",
 72 |   },
 73 |   {
 74 |     name: "James Wilson",
 75 |     designation: "DevOps Engineer, CloudNet",
 76 |     image: "https://picsum.photos/id/18/300/300",
 77 |     badge: "Something",
 78 |   },
 79 |   {
 80 |     name: "Patricia Moore",
 81 |     designation: "Marketing Manager, MarketGrowth",
 82 |     image: "https://picsum.photos/id/19/300/300",
 83 |     badge: "Mentor",
 84 |   },
 85 |   {
 86 |     name: "Richard Taylor",
 87 |     designation: "Frontend Developer, WebSolutions",
 88 |     image: "https://picsum.photos/id/20/300/300",
 89 |   },
 90 |   {
 91 |     name: "Linda Anderson",
 92 |     designation: "Backend Developer, ServerSecure",
 93 |     image: "https://picsum.photos/id/21/300/300",
 94 |   },
 95 |   {
 96 |     name: "William Thomas",
 97 |     designation: "Full Stack Developer, FullStack",
 98 |     image: "https://picsum.photos/id/22/300/300",
 99 |     badge: "Badger",
100 |   },
101 |   {
102 |     name: "Elizabeth Jackson",
103 |     designation: "Project Manager, ProManage",
104 |     image: "https://picsum.photos/id/23/300/300",
105 |     badge: "Mentor",
106 |   },
107 |   {
108 |     name: "David White",
109 |     designation: "Database Administrator, DataSafe",
110 |     image: "https://picsum.photos/id/24/300/300",
111 |     badge: "Advocate",
112 |   },
113 |   {
114 |     name: "Jennifer Harris",
115 |     designation: "Network Engineer, NetConnect",
116 |     image: "https://picsum.photos/id/25/300/300",
117 |   },
118 |   {
119 |     name: "Charles Clark",
120 |     designation: "Security Analyst, SecureIT",
121 |     image: "https://picsum.photos/id/26/300/300",
122 |   },
123 |   {
124 |     name: "Susan Lewis",
125 |     designation: "Systems Analyst, SysAnalyse",
126 |     image: "https://picsum.photos/id/27/300/300",
127 |   },
128 |   {
129 |     name: "Joseph Young",
130 |     designation: "Mobile Developer, AppDev",
131 |     image: "https://picsum.photos/id/28/300/300",
132 |     badge: "Mentor",
133 |   },
134 |   {
135 |     name: "Margaret Hall",
136 |     designation: "Quality Assurance, BugFree",
137 |     image: "https://picsum.photos/id/29/300/300",
138 |     badge: "Developer",
139 |   },
140 | ];
141 | 


--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/components/ui/static-nav.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React, { useState } from "react";
 3 | import {
 4 |   AnimatePresence,
 5 |   motion,
 6 |   useMotionValueEvent,
 7 |   useScroll,
 8 | } from "framer-motion";
 9 | import { cn } from "@/lib/utils";
10 | import Link from "next/link";
11 |  const StaticNavBar = ({
12 |   navItems,
13 |   className,
14 | }: {
15 |   navItems: {
16 |     name: string;
17 |     link: string;
18 |     icon?: JSX.Element;
19 |   }[];
20 |   className?: string;
21 | }) => {
22 |   const { scrollYProgress } = useScroll();
23 | 
24 |   const [visible, setVisible] = useState(false);
25 | 
26 |   useMotionValueEvent(scrollYProgress, "change", (current) => {
27 |     let direction = current - scrollYProgress.getPrevious();
28 | 
29 |     if (scrollYProgress.get() < 0.05) {
30 |       setVisible(false);
31 |     } else {
32 |       if (direction < 0) {
33 |         setVisible(true);
34 |       } else {
35 |         setVisible(false);
36 |       }
37 |     }
38 |   });
39 |   return (
40 |     <AnimatePresence mode="wait">
41 |       <motion.div
42 |         initial={{
43 |           opacity: 1,
44 |           y: -100,
45 |         }}
46 |         animate={{
47 |           y: true || visible  ? 0 : -100,
48 |           opacity: true || visible ? 1 : 0,
49 |         }}
50 |         transition={{
51 |           duration: 0.2,
52 |         }}
53 |         className={cn(
54 |           "flex max-w-fit  fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-full dark:bg-gradient-to-tr dark:from-stone-900 dark:to-zinc-800/70  bg-white shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-[5000] pr-2 pl-8 py-2  items-center justify-center space-x-4",
55 |           className,
56 |         )}
57 |       >
58 |         {navItems.map((navItem: any, idx: number) => (
59 |           <Link
60 |             key={`link=${idx}`}
61 |             href={navItem.link}
62 |             className={cn(
63 |               "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500",
64 |             )}
65 |           >
66 |             {/* <span className="block sm:hidden">{navItem.icon}</span> */}
67 |             <span className="hidden text-sm sm:block">{navItem.name}</span>
68 |           </Link>
69 |         ))}
70 |         <button className="relative py-2 px-4 text-sm font-medium text-black rounded-full border dark:text-white border-neutral-200 dark:border-white/[0.2]">
71 |           <span>Login</span>
72 |           <span className="absolute inset-x-0 -bottom-px mx-auto w-1/2 h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent" />
73 |         </button>
74 |       </motion.div>
75 |     </AnimatePresence>
76 |   );
77 | };
78 | 
79 | export default StaticNavBar
80 | 


--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/components/ui/text-gen.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | "use client";
 4 | import { useEffect } from "react";
 5 | import { motion, stagger, useAnimate } from "framer-motion";
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | export const TextGenerateEffect = ({
 9 |   words,
10 |   className,
11 | }: {
12 |   words: string;
13 |   className?: string;
14 | }) => {
15 |   const [scope, animate] = useAnimate();
16 |   let wordsArray = words.split(" ");
17 |   useEffect(() => {
18 |     animate(
19 |       "span",
20 |       {
21 |         opacity: 1,
22 |       },
23 |       {
24 |         duration: 2,
25 |         delay: stagger(0.2),
26 |       }
27 |     );
28 |   }, [scope.current]);
29 | 
30 |   const renderWords = (className: string) => {
31 |     return (
32 |       <motion.div ref={scope}>
33 |         {wordsArray.map((word, idx) => {
34 |           return (
35 |             <motion.span
36 |               key={word + idx}
37 |               className={cn('opacity-0' , className)}
38 |             >
39 |               {word}{" "}
40 |             </motion.span>
41 |           );
42 |         })}
43 |       </motion.div>
44 |     );
45 |   };
46 | 
47 |   return (
48 |     <div className={cn("font-bold", className)}>
49 |       <div className="mt-4">
50 |         <div className="  text-2xl leading-snug ">
51 |           {renderWords(className!)}
52 |         </div>
53 |       </div>
54 |     </div>
55 |   );
56 | };
57 | 


--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-transparent border-2 border-purple-400/5 rounded-2xl text-foreground",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 | 


--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/components/ui/twickled-line.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { cn } from "@/lib/utils";
  3 | import { motion, MotionValue, useInView } from "framer-motion";
  4 | import React, { useRef } from "react";
  5 | 
  6 | const transition = {
  7 |   duration: 0,
  8 |   ease: "linear",
  9 | };
 10 | 
 11 | export const GoogleGeminiEffect = ({
 12 |   pathLengths,
 13 |   title,
 14 |   description,
 15 |   className,
 16 | }: {
 17 |   pathLengths: MotionValue[];
 18 |   title?: string;
 19 |   description?: string;
 20 |   className?: string;
 21 | }) => {
 22 |   const FADE_DOWN_ANIMATION_VARIANTS = {
 23 |     hidden: { opacity: 0, y: -10 },
 24 |     show: { opacity: 1, y: 0, transition: { type: "spring" } },
 25 |   };
 26 |   const ref = useRef(null);
 27 |   const isInView = useInView(ref);
 28 |   return (
 29 |     <div className={cn("sticky top-80", className)}>
 30 |       <motion.div
 31 |         initial="hidden"
 32 |         ref={ref}
 33 |         animate={isInView ? "show" : "hidden"}
 34 |         viewport={{ once: true }}
 35 |         variants={{
 36 |           hidden: {},
 37 |           show: {
 38 |             transition: {
 39 |               staggerChildren: 0.30,
 40 |             },
 41 |           },
 42 |         }}
 43 |       >
 44 |         <motion.p
 45 |           variants={FADE_DOWN_ANIMATION_VARIANTS}
 46 |           className="pb-4 font-headingAlt  text-lg font-normal  text-center text-transparent bg-clip-text bg-gradient-to-b md:text-7xl from-neutral-100 to-zinc-400/80"
 47 |         >
 48 |           {title || `Build with Aceternity UI`}
 49 |         </motion.p>
 50 |       </motion.div>
 51 |       <p className="mx-auto mt-4 max-w-lg text-xs font-normal text-center md:text-xl text-neutral-400">
 52 |         {description ||
 53 |           `Scroll this component and see the bottom SVG come to life wow this
 54 |         works!`}
 55 |       </p>
 56 |       <div className="flex absolute -top-60 justify-center items-center w-full md:-top-40 h-[890px] bg-red-transparent">
 57 |         <button className="z-30 py-1 px-2 mx-auto mt-8 text-xs font-bold text-black bg-white rounded-full md:py-2 md:px-4 md:mt-24 md:text-base w-fit">
 58 |           Farming Makes Us Farmer
 59 |         </button>
 60 |       </div>
 61 |       <svg
 62 |         width="1440"
 63 |         height="890"
 64 |         viewBox="0 0 1440 890"
 65 |         xmlns="http://www.w3.org/2000/svg"
 66 |         className="absolute -top-60 w-full md:-top-40"
 67 |       >
 68 |         <motion.path
 69 |           d="M0 663C145.5 663 191 666.265 269 647C326.5 630 339.5 621 397.5 566C439 531.5 455 529.5 490 523C509.664 519.348 521 503.736 538 504.236C553.591 504.236 562.429 514.739 584.66 522.749C592.042 525.408 600.2 526.237 607.356 523.019C624.755 515.195 641.446 496.324 657 496.735C673.408 496.735 693.545 519.572 712.903 526.769C718.727 528.934 725.184 528.395 730.902 525.965C751.726 517.115 764.085 497.106 782 496.735C794.831 496.47 804.103 508.859 822.469 518.515C835.13 525.171 850.214 526.815 862.827 520.069C875.952 513.049 889.748 502.706 903.5 503.736C922.677 505.171 935.293 510.562 945.817 515.673C954.234 519.76 963.095 522.792 972.199 524.954C996.012 530.611 1007.42 534.118 1034 549C1077.5 573.359 1082.5 594.5 1140 629C1206 670 1328.5 662.5 1440 662.5"
 70 |           stroke="#FFB7C5"
 71 |           strokeWidth="2"
 72 |           fill="none"
 73 |           initial={{
 74 |             pathLength: 0,
 75 |           }}
 76 |           style={{
 77 |             pathLength: pathLengths[0],
 78 |           }}
 79 |           transition={transition}
 80 |         />
 81 |         <motion.path
 82 |           d="M0 587.5C147 587.5 277 587.5 310 573.5C348 563 392.5 543.5 408 535C434 523.5 426 526.235 479 515.235C494 512.729 523 510.435 534.5 512.735C554.5 516.735 555.5 523.235 576 523.735C592 523.735 616 496.735 633 497.235C648.671 497.235 661.31 515.052 684.774 524.942C692.004 527.989 700.2 528.738 707.349 525.505C724.886 517.575 741.932 498.33 757.5 498.742C773.864 498.742 791.711 520.623 810.403 527.654C816.218 529.841 822.661 529.246 828.451 526.991C849.246 518.893 861.599 502.112 879.5 501.742C886.47 501.597 896.865 506.047 907.429 510.911C930.879 521.707 957.139 519.639 982.951 520.063C1020.91 520.686 1037.5 530.797 1056.5 537C1102.24 556.627 1116.5 570.704 1180.5 579.235C1257.5 589.5 1279 587 1440 588"
 83 |           stroke="#FFDDB7"
 84 |           strokeWidth="2"
 85 |           fill="none"
 86 |           initial={{
 87 |             pathLength: 0,
 88 |           }}
 89 |           style={{
 90 |             pathLength: pathLengths[1],
 91 |           }}
 92 |           transition={transition}
 93 |         />
 94 |         <motion.path
 95 |           d="M0 514C147.5 514.333 294.5 513.735 380.5 513.735C405.976 514.94 422.849 515.228 436.37 515.123C477.503 514.803 518.631 506.605 559.508 511.197C564.04 511.706 569.162 512.524 575 513.735C588 516.433 616 521.702 627.5 519.402C647.5 515.402 659 499.235 680.5 499.235C700.5 499.235 725 529.235 742 528.735C757.654 528.735 768.77 510.583 791.793 500.59C798.991 497.465 807.16 496.777 814.423 499.745C832.335 507.064 850.418 524.648 866 524.235C882.791 524.235 902.316 509.786 921.814 505.392C926.856 504.255 932.097 504.674 937.176 505.631C966.993 511.248 970.679 514.346 989.5 514.735C1006.3 515.083 1036.5 513.235 1055.5 513.235C1114.5 513.235 1090.5 513.235 1124 513.235C1177.5 513.235 1178.99 514.402 1241 514.402C1317.5 514.402 1274.5 512.568 1440 513.235"
 96 |           stroke="#B1C5FF"
 97 |           strokeWidth="2"
 98 |           fill="none"
 99 |           initial={{
100 |             pathLength: 0,
101 |           }}
102 |           style={{
103 |             pathLength: pathLengths[2],
104 |           }}
105 |           transition={transition}
106 |         />
107 |         <motion.path
108 |           d="M0 438.5C150.5 438.5 261 438.318 323.5 456.5C351 464.5 387.517 484.001 423.5 494.5C447.371 501.465 472 503.735 487 507.735C503.786 512.212 504.5 516.808 523 518.735C547 521.235 564.814 501.235 584.5 501.235C604.5 501.235 626 529.069 643 528.569C658.676 528.569 672.076 511.63 695.751 501.972C703.017 499.008 711.231 498.208 718.298 501.617C735.448 509.889 751.454 529.98 767 529.569C783.364 529.569 801.211 507.687 819.903 500.657C825.718 498.469 832.141 499.104 837.992 501.194C859.178 508.764 873.089 523.365 891 523.735C907.8 524.083 923 504.235 963 506.735C1034.5 506.735 1047.5 492.68 1071 481.5C1122.5 457 1142.23 452.871 1185 446.5C1255.5 436 1294 439 1439.5 439"
109 |           stroke="#4FABFF"
110 |           strokeWidth="2"
111 |           fill="none"
112 |           initial={{
113 |             pathLength: 0,
114 |           }}
115 |           style={{
116 |             pathLength: pathLengths[3],
117 |           }}
118 |           transition={transition}
119 |         />
120 |         <motion.path
121 |           d="M0.5 364C145.288 362.349 195 361.5 265.5 378C322 391.223 399.182 457.5 411 467.5C424.176 478.649 456.916 491.677 496.259 502.699C498.746 503.396 501.16 504.304 503.511 505.374C517.104 511.558 541.149 520.911 551.5 521.236C571.5 521.236 590 498.736 611.5 498.736C631.5 498.736 652.5 529.236 669.5 528.736C685.171 528.736 697.81 510.924 721.274 501.036C728.505 497.988 736.716 497.231 743.812 500.579C761.362 508.857 778.421 529.148 794 528.736C810.375 528.736 829.35 508.68 848.364 502.179C854.243 500.169 860.624 500.802 866.535 502.718C886.961 509.338 898.141 519.866 916 520.236C932.8 520.583 934.5 510.236 967.5 501.736C1011.5 491 1007.5 493.5 1029.5 480C1069.5 453.5 1072 440.442 1128.5 403.5C1180.5 369.5 1275 360.374 1439 364"
122 |           stroke="#076EFF"
123 |           strokeWidth="2"
124 |           fill="none"
125 |           initial={{
126 |             pathLength: 0,
127 |           }}
128 |           style={{
129 |             pathLength: pathLengths[4],
130 |           }}
131 |           transition={transition}
132 |         />
133 | 
134 |         {/* Gaussian blur for the background paths */}
135 | 
136 |         <path
137 |           d="M0 663C145.5 663 191 666.265 269 647C326.5 630 339.5 621 397.5 566C439 531.5 455 529.5 490 523C509.664 519.348 521 503.736 538 504.236C553.591 504.236 562.429 514.739 584.66 522.749C592.042 525.408 600.2 526.237 607.356 523.019C624.755 515.195 641.446 496.324 657 496.735C673.408 496.735 693.545 519.572 712.903 526.769C718.727 528.934 725.184 528.395 730.902 525.965C751.726 517.115 764.085 497.106 782 496.735C794.831 496.47 804.103 508.859 822.469 518.515C835.13 525.171 850.214 526.815 862.827 520.069C875.952 513.049 889.748 502.706 903.5 503.736C922.677 505.171 935.293 510.562 945.817 515.673C954.234 519.76 963.095 522.792 972.199 524.954C996.012 530.611 1007.42 534.118 1034 549C1077.5 573.359 1082.5 594.5 1140 629C1206 670 1328.5 662.5 1440 662.5"
138 |           stroke="#FFB7C5"
139 |           strokeWidth="2"
140 |           fill="none"
141 |           pathLength={1}
142 |           filter="url(#blurMe)"
143 |         />
144 |         <path
145 |           d="M0 587.5C147 587.5 277 587.5 310 573.5C348 563 392.5 543.5 408 535C434 523.5 426 526.235 479 515.235C494 512.729 523 510.435 534.5 512.735C554.5 516.735 555.5 523.235 576 523.735C592 523.735 616 496.735 633 497.235C648.671 497.235 661.31 515.052 684.774 524.942C692.004 527.989 700.2 528.738 707.349 525.505C724.886 517.575 741.932 498.33 757.5 498.742C773.864 498.742 791.711 520.623 810.403 527.654C816.218 529.841 822.661 529.246 828.451 526.991C849.246 518.893 861.599 502.112 879.5 501.742C886.47 501.597 896.865 506.047 907.429 510.911C930.879 521.707 957.139 519.639 982.951 520.063C1020.91 520.686 1037.5 530.797 1056.5 537C1102.24 556.627 1116.5 570.704 1180.5 579.235C1257.5 589.5 1279 587 1440 588"
146 |           stroke="#FFDDB7"
147 |           strokeWidth="2"
148 |           fill="none"
149 |           pathLength={1}
150 |           filter="url(#blurMe)"
151 |         />
152 |         <path
153 |           d="M0 514C147.5 514.333 294.5 513.735 380.5 513.735C405.976 514.94 422.849 515.228 436.37 515.123C477.503 514.803 518.631 506.605 559.508 511.197C564.04 511.706 569.162 512.524 575 513.735C588 516.433 616 521.702 627.5 519.402C647.5 515.402 659 499.235 680.5 499.235C700.5 499.235 725 529.235 742 528.735C757.654 528.735 768.77 510.583 791.793 500.59C798.991 497.465 807.16 496.777 814.423 499.745C832.335 507.064 850.418 524.648 866 524.235C882.791 524.235 902.316 509.786 921.814 505.392C926.856 504.255 932.097 504.674 937.176 505.631C966.993 511.248 970.679 514.346 989.5 514.735C1006.3 515.083 1036.5 513.235 1055.5 513.235C1114.5 513.235 1090.5 513.235 1124 513.235C1177.5 513.235 1178.99 514.402 1241 514.402C1317.5 514.402 1274.5 512.568 1440 513.235"
154 |           stroke="#B1C5FF"
155 |           strokeWidth="2"
156 |           fill="none"
157 |           pathLength={1}
158 |           filter="url(#blurMe)"
159 |         />
160 |         <path
161 |           d="M0 438.5C150.5 438.5 261 438.318 323.5 456.5C351 464.5 387.517 484.001 423.5 494.5C447.371 501.465 472 503.735 487 507.735C503.786 512.212 504.5 516.808 523 518.735C547 521.235 564.814 501.235 584.5 501.235C604.5 501.235 626 529.069 643 528.569C658.676 528.569 672.076 511.63 695.751 501.972C703.017 499.008 711.231 498.208 718.298 501.617C735.448 509.889 751.454 529.98 767 529.569C783.364 529.569 801.211 507.687 819.903 500.657C825.718 498.469 832.141 499.104 837.992 501.194C859.178 508.764 873.089 523.365 891 523.735C907.8 524.083 923 504.235 963 506.735C1034.5 506.735 1047.5 492.68 1071 481.5C1122.5 457 1142.23 452.871 1185 446.5C1255.5 436 1294 439 1439.5 439"
162 |           stroke="#4FABFF"
163 |           strokeWidth="2"
164 |           fill="none"
165 |           pathLength={1}
166 |           filter="url(#blurMe)"
167 |         />
168 |         <path
169 |           d="M0.5 364C145.288 362.349 195 361.5 265.5 378C322 391.223 399.182 457.5 411 467.5C424.176 478.649 456.916 491.677 496.259 502.699C498.746 503.396 501.16 504.304 503.511 505.374C517.104 511.558 541.149 520.911 551.5 521.236C571.5 521.236 590 498.736 611.5 498.736C631.5 498.736 652.5 529.236 669.5 528.736C685.171 528.736 697.81 510.924 721.274 501.036C728.505 497.988 736.716 497.231 743.812 500.579C761.362 508.857 778.421 529.148 794 528.736C810.375 528.736 829.35 508.68 848.364 502.179C854.243 500.169 860.624 500.802 866.535 502.718C886.961 509.338 898.141 519.866 916 520.236C932.8 520.583 934.5 510.236 967.5 501.736C1011.5 491 1007.5 493.5 1029.5 480C1069.5 453.5 1072 440.442 1128.5 403.5C1180.5 369.5 1275 360.374 1439 364"
170 |           stroke="#076EFF"
171 |           strokeWidth="2"
172 |           fill="none"
173 |           pathLength={1}
174 |           filter="url(#blurMe)"
175 |         />
176 | 
177 |         <defs>
178 |           <filter id="blurMe">
179 |             <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
180 |           </filter>
181 |         </defs>
182 |       </svg>
183 |     </div>
184 |   );
185 | };
186 | 


--------------------------------------------------------------------------------
/components/ui/twickled-view.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useScroll, useTransform } from "framer-motion";
 3 | import React from "react";
 4 | import { GoogleGeminiEffect } from "@/components/ui/twickled-line"
 5 | 
 6 | export default  function TwickledDemo() {
 7 |   const ref = React.useRef(null);
 8 |   const { scrollYProgress } = useScroll({
 9 |     target: ref,
10 |     offset: ["start start", "end start"],
11 |   });
12 | 
13 |   const pathLengthFirst = useTransform(scrollYProgress, [0, 0.8], [0.2, 1.2]);
14 |   const pathLengthSecond = useTransform(scrollYProgress, [0, 0.8], [0.15, 1.2]);
15 |   const pathLengthThird = useTransform(scrollYProgress, [0, 0.8], [0.1, 1.2]);
16 |   const pathLengthFourth = useTransform(scrollYProgress, [0, 0.8], [0.05, 1.2]);
17 |   const pathLengthFifth = useTransform(scrollYProgress, [0, 0.8], [0, 1.2]);
18 | 
19 |   return (
20 |     <div
21 |       className="h-[400vh] bg-gradient-to-br from-transparent to-zinc-900/80 w-screen dark:border dark:border-white/[0.1] rounded-md relative pt-40 overflow-clip"
22 |       ref={ref}
23 |     >
24 |       <GoogleGeminiEffect
25 |      title="Explore and Build With KiNFiSH"
26 |      description="Something off looks very off from off"
27 |         pathLengths={[
28 |           pathLengthFirst,
29 |           pathLengthSecond,
30 |           pathLengthThird,
31 |           pathLengthFourth,
32 |           pathLengthFifth,
33 |         ]}
34 |       />
35 |     </div>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | // @ts-nocheck
  3 | import * as React from "react"
  4 | 
  5 | import type {
  6 |   ToastActionElement,
  7 |   ToastProps,
  8 | } from "@/components/ui/toast"
  9 | 
 10 | const TOAST_LIMIT = 1
 11 | const TOAST_REMOVE_DELAY = 1000000
 12 | 
 13 | type ToasterToast = ToastProps & {
 14 |   id: string
 15 |   title?: React.ReactNode
 16 |   description?: React.ReactNode
 17 |   action?: ToastActionElement
 18 | }
 19 | 
 20 | const actionTypes = {
 21 |   ADD_TOAST: "ADD_TOAST",
 22 |   UPDATE_TOAST: "UPDATE_TOAST",
 23 |   DISMISS_TOAST: "DISMISS_TOAST",
 24 |   REMOVE_TOAST: "REMOVE_TOAST",
 25 | } as const
 26 | 
 27 | let count = 0
 28 | 
 29 | function genId() {
 30 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 31 |   return count.toString()
 32 | }
 33 | 
 34 | type ActionType = typeof actionTypes
 35 | 
 36 | type Action =
 37 |   | {
 38 |       type: ActionType["ADD_TOAST"]
 39 |       toast: ToasterToast
 40 |     }
 41 |   | {
 42 |       type: ActionType["UPDATE_TOAST"]
 43 |       toast: Partial<ToasterToast>
 44 |     }
 45 |   | {
 46 |       type: ActionType["DISMISS_TOAST"]
 47 |       toastId?: ToasterToast["id"]
 48 |     }
 49 |   | {
 50 |       type: ActionType["REMOVE_TOAST"]
 51 |       toastId?: ToasterToast["id"]
 52 |     }
 53 | 
 54 | interface State {
 55 |   toasts: ToasterToast[]
 56 | }
 57 | 
 58 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 59 | 
 60 | const addToRemoveQueue = (toastId: string) => {
 61 |   if (toastTimeouts.has(toastId)) {
 62 |     return
 63 |   }
 64 | 
 65 |   const timeout = setTimeout(() => {
 66 |     toastTimeouts.delete(toastId)
 67 |     dispatch({
 68 |       type: "REMOVE_TOAST",
 69 |       toastId: toastId,
 70 |     })
 71 |   }, TOAST_REMOVE_DELAY)
 72 | 
 73 |   toastTimeouts.set(toastId, timeout)
 74 | }
 75 | 
 76 | export const reducer = (state: State, action: Action): State => {
 77 |   switch (action.type) {
 78 |     case "ADD_TOAST":
 79 |       return {
 80 |         ...state,
 81 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 82 |       }
 83 | 
 84 |     case "UPDATE_TOAST":
 85 |       return {
 86 |         ...state,
 87 |         toasts: state.toasts.map((t) =>
 88 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 89 |         ),
 90 |       }
 91 | 
 92 |     case "DISMISS_TOAST": {
 93 |       const { toastId } = action
 94 | 
 95 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 96 |       // but I'll keep it here for simplicity
 97 |       if (toastId) {
 98 |         addToRemoveQueue(toastId)
 99 |       } else {
100 |         state.toasts.forEach((toast) => {
101 |           addToRemoveQueue(toast.id)
102 |         })
103 |       }
104 | 
105 |       return {
106 |         ...state,
107 |         toasts: state.toasts.map((t) =>
108 |           t.id === toastId || toastId === undefined
109 |             ? {
110 |                 ...t,
111 |                 open: false,
112 |               }
113 |             : t
114 |         ),
115 |       }
116 |     }
117 |     case "REMOVE_TOAST":
118 |       if (action.toastId === undefined) {
119 |         return {
120 |           ...state,
121 |           toasts: [],
122 |         }
123 |       }
124 |       return {
125 |         ...state,
126 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
127 |       }
128 |   }
129 | }
130 | 
131 | const listeners: Array<(state: State) => void> = []
132 | 
133 | let memoryState: State = { toasts: [] }
134 | 
135 | function dispatch(action: Action) {
136 |   memoryState = reducer(memoryState, action)
137 |   listeners.forEach((listener) => {
138 |     listener(memoryState)
139 |   })
140 | }
141 | 
142 | type Toast = Omit<ToasterToast, "id">
143 | 
144 | function toast({ ...props }: Toast) {
145 |   const id = genId()
146 | 
147 |   const update = (props: ToasterToast) =>
148 |     dispatch({
149 |       type: "UPDATE_TOAST",
150 |       toast: { ...props, id },
151 |     })
152 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
153 | 
154 |   dispatch({
155 |     type: "ADD_TOAST",
156 |     toast: {
157 |       ...props,
158 |       id,
159 |       open: true,
160 |       onOpenChange: (open) => {
161 |         if (!open) dismiss()
162 |       },
163 |     },
164 |   })
165 | 
166 |   return {
167 |     id: id,
168 |     dismiss,
169 |     update,
170 |   }
171 | }
172 | 
173 | function useToast() {
174 |   const [state, setState] = React.useState<State>(memoryState)
175 | 
176 |   React.useEffect(() => {
177 |     listeners.push(setState)
178 |     return () => {
179 |       const index = listeners.indexOf(setState)
180 |       if (index > -1) {
181 |         listeners.splice(index, 1)
182 |       }
183 |     }
184 |   }, [state])
185 | 
186 |   return {
187 |     ...state,
188 |     toast,
189 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
190 |   }
191 | }
192 | 
193 | export { useToast, toast }
194 | 


--------------------------------------------------------------------------------
/components/views.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useEffect, useState } from "react";
 3 | 
 4 | type ViewProps = {
 5 |   slug: string;
 6 | };
 7 | 
 8 | const Views = (props: ViewProps) => {
 9 |   const { slug } = props;
10 |   const [viewed, setViewed] = useState(false);
11 |   useEffect(() => {
12 |     fetch("/api/increment", {
13 |       method: "POST",
14 |       headers: {
15 |         "Content-Type": "application/json",
16 |       },
17 |       body: JSON.stringify({ slug }),
18 |     });
19 |   }, [slug]);
20 |   return null;
21 | };
22 | 
23 | export default Views;
24 | 


--------------------------------------------------------------------------------
/content/authors/kinfish.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: kinfish
3 | avatar: /images/kinfe.jpeg
4 | twitter: KinfishT
5 | description: Dev @ Farmers
6 | ---


--------------------------------------------------------------------------------
/content/pages/about.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: About
 3 | description: About the site
 4 | ---
 5 | 
 6 | Blandit libero volutpat sed cras ornare arcu. Cursus sit amet dictum sit amet. Nunc vel risus commodo viverra maecenas accumsan. Libero id faucibus nisl tincidunt eget nullam non nisi est. Varius quam quisque id diam vel quam. Id donec ultrices tincidunt arcu non.
 7 | 
 8 | ## Consent
 9 | 
10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu. Nibh ipsum consequat nisl vel pretium lectus quam id leo. A arcu cursus vitae congue. Amet justo donec enim diam. Vel pharetra vel turpis nunc eget lorem. Gravida quis blandit turpis cursus in. Semper auctor neque vitae tempus. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Imperdiet nulla malesuada pellentesque elit eget.
11 | 
12 | Felis donec et odio pellentesque diam volutpat commodo sed.
13 | 
14 | Tortor consequat id porta nibh. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque fermentum dui faucibus in. Tortor posuere ac ut consequat semper viverra.
15 | 
16 | ## Information we collect
17 | 
18 | Amet justo donec enim diam. In hendrerit gravida rutrum quisque non. Hac habitasse platea dictumst quisque sagittis purus sit.
19 | 
20 | ## How we use your Information
21 | 
22 | Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Consectetur adipiscing elit pellentesque habitant. Ut tristique et egestas quis ipsum suspendisse ultrices gravida.
23 | 


--------------------------------------------------------------------------------
/content/posts/hacking-meeting.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Hacking Meetings
 3 | description: This is me try hacking a meetings
 4 | image: /images/blogs/zoom1.jpg
 5 | date: "2024-01-19"
 6 | authors:
 7 |   - kinfish
 8 | ---
 9 | 
10 | You know guys... when I was at the company, I used to attend meetings with a lot of people three times a day. Yeah, I know, it's so tiresome, and programmers are too lazy for this, though. "Talk is cheap, show me the code" was from Linus Torvalds, if I'm not mistaken.
11 | 
12 | Yeah, I decided to automate it. Hopefully, the meeting link is attached to the calendar invite. What I did was try to create a bot, kind of thing along with a webhook, to automate the hooking from the calendar based on their time and join the meeting using some scrapper tools. Yeah, it went pretty well. I thought it would be somehow buggy, but it was not that much buggy. The first time I joined the meeting based on the bot, yeah, I was too excited, and I thought a lot of things that I can do if I didn't attend the meeting because it was like time-consuming - 40+ minutes was really time-consuming, man. Yeah, my muscle was like this.
13 | 
14 | I fetched the data from the calendar -> check the arrival time -> when it reaches, it pops out the meeting link and joins the meeting. I was pretty happy with that. But then, I said, wait, what if I extend this further? Like, what if I get called in a meeting by the presenter or meeting leader to explain my task? Yeah, as you can see, we are going somewhere near AI. Yeah, it actually is. I want to feed AI about my current update, and I want it to give a summary based on the data I feed it. Or like ToD - topic of the day - and to kind of impersonate me and talk like me, which would be voice processing intensive, like making sure to listen for keywords that concern me, like my name, the task I am working on, or something like that.
15 | 
16 | I want that AI to explain, but not only that, I want the AI to take a summary note for that. I guess I can use external services like voice-intensive LLM out there, like Fehem - the famous one. I guess she is a girl, no offense 😂, for AI. Yeah, or I can build the native one there for some specific purpose of mine. I really want to make it more specific to meeting stuff. I guess there is also one closer to meeting utilities I may check out for API 😄. Yeah, the guess developers have to take this issue so seriously that we have a win-win situation.
17 | 
18 | Assuming we had some meeting-oriented job, all of the API-featured stuff is not implemented yet, but a non-AI version of it is there on a [GitHub](https://github.com/Kinfe123/AutoJoin-Meeting-From-Calendar.) repository, which was a while ago. Yeah, I wish you all stand with me. For those who don't have meetings, you don't need external effort, but I am definitely sure at some point you need some such kind of services, not only for devs but also other professionals. I believe this is not being lazy, and we do need to opt out from a bloated calendar. Hopefully, you find it insightful. I need it as a billionaire dollar idea, but I'll let you guys steal it 😭😄. Yeah, we need to make that happen.
19 | 


--------------------------------------------------------------------------------
/content/posts/is-bun-dropin-replacement.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Is Bun A Drop In Replacement 
  3 | description: This will be a brief discussion about bun being a replacement
  4 | image: /images/blogs/bun.png
  5 | date: "2023-01-01"
  6 | authors: 
  7 |   - kinfish
  8 | ---
  9 | 
 10 | 
 11 | # Bun: A Fast and Comprehensive Toolkit
 12 | 
 13 | 
 14 | <Callout>
 15 | > A wise man once told me, "When you start eating Bun, Node.js will feel bland".
 16 | </Callout>
 17 | 
 18 | Bun is a fast and comprehensive toolkit for JavaScript and TypeScript development. It is designed to handle various tasks involved in the development process, including running, building, testing, and debugging applications. Bun aims to provide a streamlined experience by allowing developers to work with JavaScript and TypeScript projects of different scales. Whether you're working on a small single-file project or a larger full-stack application, Bun aims to be a versatile tool that can handle the necessary tasks efficiently.
 19 | 
 20 | ## Naming Issue - Theo
 21 | 
 22 | The creator of T3, Theo, warned them about not using the name "buntime," but it seems they didn't heed the advice. This decision had consequences, as Bun became a compiler, package manager, and bundler.
 23 | 
 24 | ## What Makes Bun Different?
 25 | 
 26 | What sets Bun apart from other primitive JavaScript runtimes? The goal of Bun is to eliminate slowness and complexity while retaining the great features of JavaScript. It ensures that your favorite libraries and frameworks continue to work, and you don't need to unlearn the conventions you're already familiar with.
 27 | 
 28 | One notable difference is that Bun drops the use of Node.js's primitive JavaScript engine, Chrome V8, and instead utilizes the JavaScript core engine (Apple), which is optimized for startup time. Additionally, as a YC-funded company, Bun's long-term sustainability may be a concern, making it challenging for Jarred, the creator of Bun, to pay developers and recruit more creative developers to the team except for OSS guys.
 29 | 
 30 | Furthermore, while the camel was wandering with me, it shared a piece of advice: to use OCaml for building such runtimes and compilers due to its functional and powerful type safety features. However, it seems Zig was chosen instead, as Zig made the development process a "bun-dle" of joy, while OCaml and C++ couldn't "knead" up the same level of fun! Rest assured, Jarred Sumner was present during the camel's storytelling—just kidding! 😆
 31 | 
 32 | 
 33 | ## Behind the Drama: Exploring the Bun Ecosystem
 34 | 
 35 | Zig covers over 43% of Bun's codebase, alongside C++, both being performant choices for building runtimes and compilers.  However, let me share a secret: ThePrimeage, a somewhat average Rust user, is quite pissed off. This doesn't necessarily mean Zig is faster than the C++ on which Node.js is built. Also, keep in mind C++ is fast, but that doesn't mean any code written in C++ will be. Perhaps I'm more sensitive to the peculiar friction within the Node.js space. So, let's dive deeper into what's happening behind this drama.
 36 | 
 37 | ### Test Runner and Development Tools
 38 | 
 39 | - Is the built-in test runner in Bun legitimate, or do you need something else?
 40 | - What are people using nowadays? Is npm still the go-to package manager, or should you consider Yarn or pnpm? 
 41 | -  what about workspaces? Do people still rely on ts-node, or does nodemon suffice, even though it's not well-documented? Do you still need ts-watch or node-watch?
 42 | 
 43 | ### tsconfig and package.json
 44 | 
 45 | - What new additions have been made to tsconfig? 
 46 | - Should you start using modules yet? Are there any new fields in package.json, 
 47 | -  what should you be doing with the "targets" field if you're building a library? Should you stick with tsc, or is there a better alternative that everyone is using?
 48 | 
 49 | ### Express and ORM/Query Builders
 50 | 
 51 | - Is Express 5 already out? Just kidding! Well, the beta version seems to work, so can you just use that? 
 52 | -  speaking of which, what's the new ORM/query builder/driver du jour? Is the one you used a few months ago considered abandonware? Can you opt for something different? Is it production-ready?
 53 | 
 54 | ### Bun's Solutions
 55 | 
 56 | Surprisingly, all these questions are answered by Bun. Bun provides access to a faster runtime, which enhances the entire ecosystem that our projects rely on. It significantly speeds up test suites, bundlers, linters, and all the developer tooling that supports modern JavaScript development.
 57 | 
 58 | Let me ask you something: Do you consider the database as a bottleneck? While performing queries doesn't block the main thread, running JS does. However, performance is definitely a selling point for the Bun team. It's a way to provide the Node.js community with a better experience and address the performance obsession.
 59 | 
 60 | What about the network? Can that be a bottleneck too? Both caching mechanisms are employed. The great thing about Bun is that it doesn't check the network when installing packages. It relies on the oldy versions, possible number that can be represented by the caret (^) symbol, and it also ignores the latest package versions (@latest).
 61 | 
 62 | Some argue that all these benchmarks and comparisons are nitpicks and often unfair. The true value Bun offers is an improved developer experience (DX) with built-in TypeScript support.
 63 | 
 64 | Now, I'm curious to hear your thoughts. What do you think about all of this?
 65 | 
 66 | 
 67 | ## What Bun Replaces in Node.js
 68 | 
 69 | - Bunx: Bunx is five times faster than npx and eliminates the need for modules like dotenv and cross-env. It provides faster dependency installation and includes a default watch mode with websocket support.
 70 | 
 71 | - Transpiler: Bun can run various file types such as `.js`, `.ts`, `.cjs`, .`mjs`, .`jsx`, and `.tsx`. This eliminates the need for tools like esbuild, Webpack, Parcel, and Rollup.
 72 | 
 73 | - Node.js Compatibility: Bun aims for complete compatibility with the Node.js API. Most npm packages intended for Node.js environments can work seamlessly with Bun. Check the list of supported Node.js built-in modules on [the Bun documentation](https://bun.sh/docs/runtime/nodejs-apis).
 74 | 
 75 | - APIs: Bun implements a set of native APIs on the Bun global object and through built-in modules. These APIs are highly optimized and introduce new APIs primarily for server-side tasks where no standard exists. See the list of supported Bun APIs on [the Bun documentation](https://bun.sh/docs/runtime/bun-apis).
 76 | 
 77 | - Package Manager: Bun is an npm-compatible package manager that reads your package.json and writes to node_modules.
 78 | 
 79 | - Testing: Bun is Jest compatible, providing snapshot testing, mocking, and code coverage.
 80 | 
 81 | Bun also offers ESM and CommonJS compatibility, allowing you to use both module systems within the same file without complex configuration.
 82 | 
 83 | For more information, you can visit the Bun documentation links provided.
 84 | 
 85 | 
 86 | - Like yarn, npm, and pnpm, Bun acts as a package manager focused on saving disk space and boosting installation speed. Starting today, Projects that contain a bun.lockb file will automatically run bun install as the default Install Command using bun@1.
 87 | Bun is a fast JavaScript runtime. Its goal is to make the experience of building software faster, less frustrating, and more fun. Bun has been benchmarked in the cloud as well as locally, and it outperforms the Node.js runtime. It is on par with other server-side languages like Rust in terms of performance. For example, when benchmarked using wrk:
 88 | 
 89 | 
 90 | 
 91 | Bun is a fast JavaScript runtime. Its goal is to make the experience of building software faster, less frustrating, and more fun. Bun has been benchmarked in the cloud as well as locally, and it outperforms the Node.js runtime. It is on par with other server-side languages like Rust in terms of performance. For example, when benchmarked using wrk:
 92 | 
 93 | The source code for this test can be found at: [github](https://github.com/emilpriver/go-rust-bun)
 94 | 
 95 | 
 96 | ### Bun Benchmark
 97 | ```bash
 98 | ➜  ~ wrk -t16 -c1000 -d30 http://IP_ADDRESS:3000                                         [23/09/11|06:20pm]
 99 | Running 30s test @ http://IP_ADDRESS:3000
100 |   16 threads and 1000 connections
101 |   Thread Stats   Avg      Stdev     Max   +/- Stdev
102 |     Latency    42.61ms   15.20ms 647.53ms   95.99%
103 |     Req/Sec     1.48k   173.54     2.17k    80.20%
104 |   707302 requests in 30.10s, 88.36MB read
105 |   Socket errors: connect 0, read 83, write 0, timeout 0
106 | Requests/sec:  23497.18
107 | Transfer/sec:      2.94MB
108 | ```
109 | 
110 | ### Nodeje Benchmark
111 | ```bash
112 | ➜  ~ wrk -t16 -c1000 -d30 http://IP_ADDRESS:3000                                         [23/09/11|06:21pm]
113 | Running 30s test @ http://IP_ADDRESS:3000
114 |   16 threads and 1000 connections
115 |   Thread Stats   Avg      Stdev     Max   +/- Stdev
116 |     Latency    52.50ms   77.15ms   2.00s    98.27%
117 |     Req/Sec     1.23k   235.30     2.54k    78.12%
118 |   587719 requests in 30.10s, 91.92MB read
119 |   Socket errors: connect 0, read 0, write 0, timeout 434
120 | Requests/sec:  19524.73
121 | Transfer/sec:      3.05MB
122 | ```
123 | Some other benchmarks record 
124 | 
125 | ## Results
126 | 
127 | For results suffix with `-node` means that the framework is run in Node, otherwise is using Bun.
128 | 
129 | These results are measured in req/s:
130 | 
131 | | Framework              | Average     | Get (/)    | Params, query & header | Post JSON  |
132 | | ---------------------- | ----------- | ---------- | ---------------------- | ---------- |
133 | | uws (node)             | 369,192.103 | 457,538.99 | 389,308.63             | 260,728.69 |
134 | | stricjs (bun)          | 268,422.07  | 323,535.76 | 262,470.15             | 219,260.3  |
135 | | bun (bun)              | 262,250.81  | 325,012.5  | 238,600.42             | 223,139.51 |
136 | | elysia (bun)           | 261,538.61  | 321,378.82 | 248,866.5              | 214,370.51 |
137 | | vixeny (bun)           | 260,097.983 | 321,361.76 | 250,442.26             | 208,489.93 |
138 | | hyper-express (node)   | 241,177.05  | 350,373.13 | 274,099.12             | 99,058.9   |
139 | | hono (bun)             | 238,294.85  | 295,794.19 | 227,806.78             | 191,283.58 |
140 | | bun-web-standard (bun) | 233,734.623 | 282,952.77 | 220,206.67             | 198,044.43 |
141 | | nhttp (bun)            | 232,273.04  | 300,289.39 | 213,002.07             | 183,527.66 |
142 | | hyperbun (bun)         | 162,952.447 | 218,591.35 | 158,992.25             | 111,273.74 |
143 | | nbit (bun)             | 149,914.61  | 190,477.31 | 147,009.36             | 112,257.16 |
144 | | baojs (bun)            | 148,991.963 | 187,599.82 | 144,528.44             | 114,847.63 |
145 | | hono (deno)            | 132,527.407 | 167,513.6  | 137,757.28             | 92,311.34  |
146 | | h3 (node)              | 109,805.423 | 134,438.55 | 97,886.93              | 97,090.79  |
147 | | fast (deno)            | 94,872.417  | 111,352.95 | 94,498.72              | 78,765.58  |
148 | | cheetah (deno)         | 65,816.437  | 123,169.82 | 56,127.76              | 18,151.73  |
149 | | fastify (node)         | 65,813.137  | 78,048.68  | 67,553.99              | 51,836.74  |
150 | | oak (deno)             | 49,623.603  | 58,177.14  | 50,212.64              | 40,481.03  |
151 | | abc (deno)             | 42,806.143  | 54,345.39  | 45,928.65              | 28,144.39  |
152 | | koa (node)             | 39,195.18   | 45,212.34  | 40,435.12              | 31,938.08  |
153 | | express (bun)          | 29,432.237  | 38,914.36  | 33,669.54              | 15,712.81  |
154 | | hapi (node)            | 28,066.047  | 42,783.67  | 15,394.81              | 26,019.66  |
155 | | adonis (node)          | 23,047.5    | 22,368.91  | 21,316.67              | 25,456.92  |
156 | | express (node)         | 16,791.037  | 18,300.92  | 17,711.03              | 14,361.16  |
157 | | hono (node)            | 15,607.28   | 17,964.72  | 16,495.52              | 12,361.6   |
158 | | nest (node)            | 15,139.233  | 17,054.97  | 15,822.37              | 12,540.36  |
159 | | acorn (deno)           | 3,217.67    | 5,340.93   | 2,452.29               | 1,859.79   |
160 | 
161 | 
162 | 
163 | See more detail in [results](https://github.com/SaltyAom/bun-http-framework-benchmark/tree/main/results)
164 | 
165 | # Conclussion
166 | 
167 | Despite the impressive performance of Bun, it's important to note that it's not necessary to replace your current tech stack with Bun. Both Bun and Node.js have their strengths and are capable of fulfilling their respective roles effectively. It's possible that Node.js is working hard to keep up with the demands of the ecosystem. Ultimately, the choice of technology depends on your specific requirements and preferences.
168 | 
169 | For more information, you can visit the Bun documentation links provided.
170 | 
171 | 


--------------------------------------------------------------------------------
/content/posts/my-interview-xp.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: My interview experience in big tech company
 3 | description: Unveiling my  Experience in big tech company and how it went and lessons that i have learned from that
 4 | image: /images/blogs/interview.webp
 5 | date: "2024-01-05"
 6 | authors:
 7 |   - kinfish
 8 | ---
 9 | 
10 | 
11 | # Just rough overview of my experience from interviews
12 | 
13 | 
14 | - Yeah , One thing I have learned on having an interview with big tech companies is like you should always be talking to the end of the interview starting from a very first start like you should be making your self as leader like a team player plus ask a lot of questions - trust me on this + know exactly what the company values and principles from their website which is crucial for the question - 'why do you wanna join us' so guys where even not in big tech but other interview try being a team player as much as possible with out any grand exaggeration .. just keep it smooth ... Being nervous is so normal.. even I told him that I am so nervous so that he gave 2 or 3 min to relax and he was even talking me about other stuff like school and stuff like that + after you do all this time there is a time where you being asked about the project and stuff like that and mentioning about opensource contribution is heck keypoint with your contribution proof like what you actually did , what changed after your change and stuff like that ...since it is the actual replica of the work environment you will be working on except on closed source projects .
15 | - Yeah communication communication communication communication is really key you got have to take it consideration and take it really seriously over the technical side I can say... Honestly the technical questions was not that bad rather it was easy like he asked me to implement MRU - mostly recently used - you can call it as new varient of data structure but here there is some rule on ordering and putting stuff plus removing and inserting .
16 | - Yeah as the name implies it is just there will be a set of operation you need to do on most recently used value from your **MRU** data structure implementation which was the opposite of LRU which is the most famous interview questiosn and yeah first I allow my self to explain my thought process plus what data structure like nested data structure am gonna be using while implementing the algorithm + data structure and I just went through the farming approach so called brute force and explained to him why it does not scale as our input size grows which have a direct correlation with our output beside any auxiliary space since I ain't use any..and yeah coming up with brute force solution is so crucial so that even you even showed him how well you understood the question but also you will have a credit on doing so ..
17 | - so that even it can helps you on optimizing the code interms of time or space complexity yeah the brute force one took me about 5 min and I went to trying out the optimized approach which is somehow hard by that time plus the pressure yeah I just trying calming my self and continued explaining why brute force does not work and we need to optimize further and yeah with 3 or 4 minute I came up with some optimization which I really did interms of operation optimization like insertion and deletion and some other operation was a bit time and space costy which I optimized them later to constant time operation instead of avg O(n) time complexity and and I just went over writing the pseudo code while explaining my thoughts and I explained the fine details about why I did choose some data structure instead of other and stuff like that and yeah told him and explained him at my best which I hoped he understood my approach very clear and he was happy by my solution since we were having a fun at some point me trying to explain some crazy word that I usually use in amahric and getting a stutter Infront of him 🤣 which was kind of funny by that time and we both laughed and he requested me to calm down for more time if I need so. Yeah after about 10 min I finished implementing my solution and finished the analysis like auxiliary space , time , space , operation wise and stuff like that . More or less this was a bit of my experience with the company and we even shared our linkedin , by the end it was somehow a kind of question like what you major accomplishments, what is you proudest moment on your career - for me it was participating on hackaton and contributing to opensource project which he was really interested of listening to , we have talked about some of the contribution that I have done and why I did that , the impact , the pros and cons all of the flaws and by the end he asked me if I do have a question for him and I said nope and we have shared our good byes and that was the end of the interview process and after that I have doubt a lot of mistake which I did while the interview and which was not that bad but still something that need to addressed. And for further questions I'm might have another blog like a part 2 explaining a detail of my experience on that. Other than that I still don't know the result but I don't know if it will goes as I expected or not .. there were a mistake that I did but I really do well on technical + expressing my thought . And if anybody who guessed a company will have **100ETB card** except for this fellas who knows.   **sorry** for long post ;) guys .. hope you get lucky on this 
18 | 
19 | 
20 | 
21 | <FormIntake />
22 | 


--------------------------------------------------------------------------------
/content/posts/rsc-mental-models-and-new-react-era.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: RSC and Mental models - React on Server
  3 | description: Most of the thing about React Servers as well Nextjs Adoption
  4 | image: /images/blogs/ai-2.png
  5 | date: "2024-04-01"
  6 | authors:
  7 |   - kinfish
  8 | ---
  9 | 
 10 | 
 11 | ## Hm... Quite Interesting
 12 | 
 13 | They is a lot to cover about the new Mental Models / Archs that the react and Nextjs has come up with. Yeah we will discuss a lot of thing related to the **RSC** and Some points of confusion will be addressed.
 14 | 
 15 | #@ Good old days
 16 | 
 17 | Earlier , React is supposed to replace HTML + JS concept by something called JSX - which is a bundled rich components that makes your website interactive and responsive to the user. that we call it a frontend framework. i.e framework is not libraries. libraries are meant to solve a specific set of closly related task which 
 18 | you can call it as Module but they still have difference. Yeah the point is not this. so lets move on to our points.
 19 | 
 20 | Traditional server-clinet model does the job but we need better user xp at scale or not - use DRY here - no more memoized roundtrip from client to servers if you could think of it as recurssive function so called DP - Dynamic Programming. which helds us using client react API to do all the job but it is not at a scale 
 21 | so why dont we need something as preprocessor like C++ Macro tag - means liee somthing or somewhere the data can be store and process upfront and bringing the latest data to the end users. i am not saying this is the so effecient but it something that is not new for us. Devs lik PHP , Rails and other Server side langs not all but  been using this thing.
 22 | 
 23 | however bring this in to life on client framework is something cool or somehow bad yeah but the idea of pruning data on sever for UI layer is pretty cool. 
 24 | The clinet side is just no-brainer just what you want to see is there in react itself.
 25 | 
 26 | ## **RSC** sratching the surface
 27 | 
 28 | Lets start by definining **RSC** by my own terms - It is new Mental model for react that allows us to kind of deviate us from client heavy to hybrid or server heavy model.
 29 | Yeah we all know that React is all frontend framework , no idea about servers only cares about bundlers - ESbuilds :)
 30 | 
 31 | I can also be saying **RSC** is aiming for zero-bundle-size React Server Components, which aim to enable modern UX with a server-driven mental model. BUt this is so different from SSR(more of dyanmic) and SSG (more of static). You will learn about this one also.
 32 | 
 33 | 
 34 | ## SSR vs SSG ?  The combo ? 
 35 | So lets deep dive in , SSR is more technical word is like turning JSX into an HTML string, Yeah this is input and th bi-product symbosis.
 36 | 
 37 | 
 38 | When we break it down , it is a way to prepare and render your compoents on server instead of browser and send the final product to browser called HTML,  which can appear to result in a fast First Contentful Paint or Largest Contentful Paint.
 39 | 
 40 | so the most simplified step will looks something like this - JSX -> Server(runtime) -> HTML -> Client Browser.
 41 | 
 42 | 
 43 | With SSG, all the pages are generated at build time as static pages (with some Javascript tricks to load/preload content as fast as possible). The Time-To-First-Byte is the best you can get and you can host your website on a Static
 44 | 
 45 | But like you can consider it like this SSG is more for static website like something that the data can be processed at a build time. so it is always available as props from layout as high level access. which we can deploy it on CDN . but SSG is like for dyanmic content but there exists a data that always up-to-date and let us generate an HTML from that.
 46 | 
 47 | It is the limitation of SSR leads to us for most of the concepts around **RSC**. since JS is still need to be fetched from remote server just to go through hydration process. BUT what is hydration here tho ? Hydration is like water bringing a functionality to your body. it is like paiting of Javascript to our website to make it interactive for initially loaded page. You can break down the step ,   hydration = download html -> download js -> evaluate js -> attaching event listener -> paint the state. Yeah this step needs to be done even if it SSR'ed
 48 | There is some web framework that do  resumablity like qwik does - like serlializing everything on pause and resumes any where inside of your app. which is an optimization for hydration  
 49 | Enough of this concepts - lets get to **RSC** like i said .. it is something that makes react to be somehow more than UI framework .. Yeah it break it down.
 50 | 
 51 | As i said it is like migrating from client first to server first or hybrid so that we can significant reduce a bundle size that shipped to the client so that they user would have a good UX. 
 52 | 
 53 | 
 54 | 
 55 | so what happens is
 56 | 1 - The user opens their browser and requests to open the webpage.
 57 | 2 - The server creates rendered content in HTML file and sends it to the user.
 58 | 3 - Maeanwhile the static assets can be loaded either from CDN , Edge or Dedicated Servers
 59 | 4 - So the user is not trapped in to the Client - server waterfalls means at least it can get the HTML down the wire instead of being blocked waiting for something cocked finished 
 60 | 
 61 | With SSR, the website pages are generated at runtime on the server means it needs a runtime to serve those requests like Nodejs. The contents are also up-to-date even th roundtrip still persist from you to make a request and SSR gives you a latest data on server
 62 | 
 63 | we can say like SSR provides a faster load time not build time , ideal for static sites , for SEO since it already made the crawler can index that up but it comes with some cons tho like server costs for data heavy apps , caching might be an issue here, also Time-To-First-Byte is a bit slower because the content is generated on the server for each request but you can prevent this from happening by adding a caching layer with short TTL(Time To Live) to impove the performance becuase you can not deploy it on the Static CDN 
 64 | 
 65 | 
 66 | So RSC and SSR ar not the same thing but they are so complimentary to each other ,  enabling rendering into an intermediate abstraction format without needing to add to the JavaScript bundle ,this allows us for merging JSX tree node so called server tree with the client tree node without lossing any kind of state and interactivity. 
 67 | 
 68 | 
 69 | ## Server Components - Bad a** niggas
 70 | 
 71 | Those are the components that are render only on the sever. Those are the one that will be streamed down to the client browser. also they are a replacement for SSR but creating a really fast early paint and reduce JS bundles that the client needs to download. this not meant to dump on the JS , still JS is the most important part of it. since you can not avoid it , atleast we make something around and optimize it because **GREAT POWER COMES WITH GREAT CHUNK** 
 72 | 
 73 | if you are familiar with Nextjs - yeah it is server component first backend(hmm) framework solving a lof modern web problems. which you optout using  `use client` directive to acheive more of client first thing
 74 | 
 75 | Server comp renders before the client so using server component in client causes a waterfall issue (the stuff that comes first - server at a build time before hand). when we say clients we also mean by - client means any one who want to consume the server components may be browsers , another servers origins. One thing to note also the client compoents will be rendered once at compilation with undefined values.
 76 | 
 77 | 
 78 | So lets see some core concepts and we will see indepth more on part 2 or something like that
 79 | 
 80 | So wheen we talk about RSC we usaully have to talk about the backbone of it , which is Suspensing and Streaming. Let break down them up 
 81 | 
 82 | 
 83 | **Suspensing** is a big pipe architecture adoption, it is  all about streaming ,  handling promises  
 84 | streaming data and present the UI as soon as they are available.
 85 | 
 86 | ```js
 87 | <Suspense fallback={<LoadingForAsyncComp />}>
 88 |   <SomeAsyncComp />
 89 | </Suspense>
 90 | ```
 91 | 
 92 | here on the above we are streaming a data from server to client , also something that could take us sometimee like fetching from remote servers , yeah until all things get resolved when can make sure to display the fallback.
 93 | 
 94 | 
 95 | **Streaming**:  is like parallelism helping in popping the intial shells instead of blocking , yeah  server side html streaming and data fetching doing them at parallel is just an optimization. it is like moving from blocking to nonblocking model.
 96 | 
 97 | It is like sending the data bit by bit for the client. 
 98 | 
 99 | take a senarios where you display gallary of 100 picture with a given paginated page , so naive way is to block the everything till the data is available and showing spinner as fallback , which is not bad tho .. but what if the image differs in size like having 2 extreme sizes i.e 20MB - the highest and 10KB - the smallest so do you think i should sacrifice the FCP or LCP for this 
100 | size issue so another good possible solution will be what if we make size agnostic like we send the a pic as soon it as available and showing a spinner , shimmers or skeleon as fallback for each iamge till loaded intead of showing the same loading spinner for all waiting for all to resolve. so sending data bit by bit and construct html as fly time is suge a huge optimization that is made so far.
101 |  when using React Suspense, components would wait until all the data and components in their subtree were ready before rendering anything. This could lead to delays in displaying content to the user, especially if there were asynchronous operations or network requests involved.
102 | 
103 | With the streaming feature, React components can start rendering and streaming their content to the client as soon as it's ready, regardless of the completion status of other components or data in the tree. This allows for a more progressive rendering experience, where the user sees partial content being rendered incrementally
104 | 
105 | 
106 | and Streaming and Suspense are something that goes together well, like for streaming a contents you have to Suspense those who are not loaded properly with fallback.
107 | 
108 | ## Use client vs Use server nextjs api
109 | 
110 | it does really means the client and servre compoents, it is not even like that 
111 | 
112 | **Use client** means you are opting out server component(which means acheiving the client compoent), from nextjs default server first component approach and you are telling the bunlder - Turbopack that you need to split this code on seperate client folder so that later if can be fetched easily once we know where we put our serevr code and client codes.
113 | so when ever you need interactivity , you need to optout from using `use client` directive to use client first interactivity.
114 | 
115 | **Use server** means not a server compoents but it is the bridge between your server code and client components it like a code that you can generate from client on server like when the form submitted you can use `use server` to kind of bridge the connection between client codee to server code like recording something on db or something . those function exclusively runs on servers but triggered from the client
116 | 
117 | 
118 | Next up 
119 | 
120 | - RSC Payloads
121 | - ReactElement VS JSX 
122 | - In depth guide on ReactDOM client and server apis for parsing JSX Symtax tree -> HTML 
123 | - Suspense Behind the scene like readableStreams , promises , and SQS kind of implementation along with it 
124 | - Building Simple RSC framework - if i am fortunate with Nitro + vite  with @beka_cru on voice chat on my T[elegram channel](https://t.me/kinfishfarms)
125 | - Strict rules on react 19 - api less vs bundler heavy or strict rules
126 | 
127 | Yeah much is coming on the series
128 | 
129 | 
130 | 
131 | wanna collab on this post - hit me up at [Telegram](https://t.me/Kinfe123) or fork the project ena send pr i would love to see you here
132 | 
133 | 
134 | 


--------------------------------------------------------------------------------
/content/posts/top-frontend-toos-for-shipping-amazing-web.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title:  Best Frontend Dev Resource - Tailwind Titans
  3 | description: This will be introducing the most tool i used for building a amazing and user apealing web and shipping in a sec
  4 | image: /images/blogs/ai-2.png
  5 | date: "2024-04-20"
  6 | authors:
  7 |   - kinfish
  8 | ---
  9 | 
 10 | 
 11 | 
 12 | In this blog post, we'll dive into the world of most of Tailwind UI-based component libraries and UI utilities. Tailwind CSS has gained immense popularity in the web development community for its utility-first approach to styling, and many developers have leveraged this framework to create comprehensive component libraries and UI tools.
 13 | 
 14 | 
 15 | 
 16 |  So let cook them together
 17 | 
 18 | 
 19 | ## Shadcn/ui 
 20 | 
 21 | [**Shadcn**](https://ui.shadcn.com) - is not ui library but ,If there's one Tailwind UI library that straight-up dominated the scene in 2023, it's gotta be shadcn/ui, man. This bad boy is built on top of Tailwind CSS and Radix UI as a primitive, and it's bringing a whole new approach to the game – you just copy and paste the code for any component you need right into your project, giving you full ownership and control. The trade-off is you won't get those automatic updates, so your dev team's gotta be on point to handle the maintenance, but if you've got the chops, this level of customization is gonna be a game-changer, letting you make those components look and feel exactly how you want.
 22 | 
 23 | 
 24 | btw i got got a couple of pr i made the both for feat: and fix: hopefully they will live soon 
 25 | 
 26 | <Image
 27 |   width="1000"
 28 |   height="1000"
 29 |   alt="Image"
 30 | src="/images/blogs/shadcn.png"/>
 31 | 
 32 | 
 33 | ## NextUI
 34 | [**Nextui**](https://nextui.org) - Yo, despite the name, Next UI has got nothin' to do with Next.js, my man. But don't sleep on this bad boy – since v2.0, it's been built on the unstoppable combo of Tailwind CSS and React Aria, and it's one of the fastest-growing Tailwind-based UI libraries out there, hands down. The deal with Next UI is simple: you just import the React components from the @nextui-org/react npm package and start using 'em in your app. No extra hassle, no hoops to jump through – just straight-up, high-powered UI components ready to level up your project. And let me tell you, these components are clean, they're versatile, and they're packed with features that'll have your users sayin', "Damn, this is smooth." Tremor, another Tailwind-powered library, might get some shine, but Next UI is really takin' the scene by storm right now. If you're lookin' to bring some next-level UI to your app, this is the way to go, my friend.
 35 | 
 36 | <Image
 37 |   width="1000"
 38 |   height="1000"
 39 |   alt="Image"
 40 | 
 41 | src="/images/blogs/nextui.jpg"/>
 42 | 
 43 | ## Preline
 44 | 
 45 | [**Preline**](https://preline.co) - If you're talkin' about Tailwind UI libraries that'll have your project lookin' fresh as hell, you gotta put Preline on your radar, my dude. This bad boy's got the biggest free set of Tailwind component examples out there – we're talkin' over 60 components and 170 sections, all built to perfection and ready to take your app to the next level. And the best part? Every single one of 'em comes with full dark mode support, so you can make your UI shine no matter what mode your users prefer. Preline is straight-up the Tailwind UI powerhouse you need to elevate your project and have your users bein' like, "Damn, this is clean!
 46 | 
 47 | <Image
 48 |   width="1000"
 49 |   height="1000"
 50 |   alt="Image"
 51 | 
 52 | src="/images/blogs/preline.png"/>
 53 | 
 54 | 
 55 | 
 56 | ## Hover.dev
 57 | 
 58 | 
 59 | [**Hover.dev**](https://hover.dev) - If you're lookin' to take your UI game to the next level with some dope-as-hell animated components, you gotta check out HoverDev, my friend. This platform is straight-up empowerin' users with the power of Framer Motion, servin' up a killer collection of animated UI blocks that you can just copy and paste right into your projects. We're talkin' interactive components that'll have your users bein' like, "Damn, this is smooth!" And the best part? HoverDev's got a pricing structure that'll let you unlock even more advanced, heavily-animated components if you need 'em. Whether you're tryna keep it free and basic or you wanna go all-in on that premium, next-level interactivity, HoverDev's got you covered with a solution that'll make your UI shine brighter than the sun
 60 | 
 61 | <Image
 62 |   width="1000"
 63 |   height="1000"
 64 |   alt="Image"
 65 | 
 66 | src="/images/blogs/hover.png"/>
 67 | 
 68 | 
 69 | ## ParkUi 
 70 | [**ParkUI**](https://park-ui.com) -  Let me break down the deal with Park UI, fam. This Tailwind library might be relatively new on the scene, but it's a serious contender to the popular shadcn/ui, no doubt. The approach is similar in terms of coupling with Tailwind, but Park UI's got way more versatility goin' on. See, this bad boy comes with first-class support for both Tailwind CSS and Panda CSS - that's another atomic CSS library that takes a JavaScript-first approach. And on top of that, Park UI integrates seamlessly with React, Vue, and Solid via Ark UI, a headless UI library that's got official implementations for all those frameworks. So whether you're workin' with Tailwind, Panda CSS, or any of the major front-end frameworks, Park UI's got you covered with a consistent, high-quality set of components to level up your UI game. This library's bringin' the heat, my dude - definitely worth checkin' out if you wanna keep your options open and have a versatile Tailwind solution in your toolkit.R
 71 | 
 72 | 
 73 | 
 74 | <Image
 75 |   width="1000"
 76 |   height="1000"
 77 |   alt="Image"
 78 | 
 79 | src="/images/blogs/park-ui.png"/>
 80 | 
 81 | 
 82 | ## Aceternity UI
 83 | 
 84 | [**Aceternity**](https://ui.aceternity.com/) - We got Aceternity UI which is kind of similar with Hover.dev here and it's unlike your typical UI component libraries you've seen before. This collection of bespoke and meticulously crafted UI sections is built on top of the powerhouse duo of Tailwind CSS and Framer Motion. The brains behind this is the amazing Manu Arora, who's really brought something special to the table. Instead of the same old generic components, Aceternity UI delivers a unique set of UI pieces that'll make your projects stand out. If you're looking to elevate your Tailwind game with some next-level interactive and visually stunning UI, Aceternity UI is definitely worth checking out. This isn't your average off-the-shelf solution - it's a curated library of custom-built components that'll have your users sayin' "Whoa, that's fresh!"
 85 | 
 86 | <Image
 87 |   width="1000"
 88 |   height="1000"
 89 |   alt="Image"
 90 | src="/images/blogs/ace.png"/>
 91 | 
 92 | 
 93 | ## Flowbite
 94 | 
 95 | [**Flowbite**](https://flowbite.com) - This open-source library is straight-up bringin' the heat with over 600 UI components, sections, and pages - all built using the utility classes from Tailwind CSS and meticulously designed in Figma. If you're tryna start developing some killer user interfaces, Flowbite's got your back. It's packed with a massive selection of pre-built UI blocks that you can just plug and play into your projects. And the best part? It's all built on the solid foundation of Tailwind CSS, so you know it's gonna be easy to customize and integrate with your workflow. Whether you need components, sections, or full-blown page templates, Flowbite's got you covered. This library's a one-stop-shop for leveling up your Tailwind-powered UI development game
 96 | 
 97 | 
 98 | <Image
 99 |   width="1000"
100 |   height="1000"
101 |   alt="Image"
102 | src="/images/blogs/flowbite.png"/>
103 | 
104 | 
105 | 
106 | ## TailwindUI 
107 | 
108 | [**TailwindUI**](https://tailwindui.com) -  Yo, check out Tailwind UI if you wanna take your Tailwind CSS game to the next level. This collection of expertly crafted components and templates is brought to you by the same crew behind Tailwind CSS. We're talkin' a fully-fledged website built with TypeScript and JavaScript, currently serving as the core design system and library for well-known startups and companies. These meticulously designed components and templates seamlessly integrate with Tailwind, packed with advanced features to build killer UIs. Whether you need nav bars, card layouts, or form elements, Tailwind UI's got you covered. It's the ultimate toolkit for crafting top-notch user experiences on the solid foundation of Tailwind CSS.
109 | 
110 | 
111 | 
112 | <Image
113 |   width="1000"
114 |   height="1000"
115 |   alt="Image"
116 | src="/images/blogs/tailwindui.png"/>
117 | 
118 | 
119 | ## DaisyUI
120 | 
121 | [**DaisyUI**](https://daisyui.com/) - i dont like it personally , tailwinded bootstrap kind of it ,  but it deos a good job on locking you to it , but it is the most popular one fam , using semantic class name instead of tailwindcss because of the thing fewer classanme , fast dev , small bundle size
122 | <Image
123 |   width="1000"
124 |   height="1000"
125 |   alt="Image"
126 | src="/images/blogs/daisy.png"/>
127 | 
128 | 
129 | 
130 | ## HyperUI 
131 | [**HyperUI**](https://www.hyperui.dev/) - HyperUI, fam. This collection of free, copy-pastable Tailwind CSS components has been around since 2021, and it's pretty similar to Tailwind UI in terms of what it offers. You got your application, marketing, and e-commerce website components and sections, all ready for you to just copy and paste into your projects. The best part? There's nothing to install, so you can easily integrate it with any headless UI library you're workin' with. No fuss, no muss – just pure HTML/CSS that you can plug right in and get your development goin'. If you're tryna speed up your Tailwind-powered projects without sacrificing quality, HyperUI could be the way to go. It's a great resource for quickly building out UI elements, so you can focus on the rest of your app or website
132 | <Image
133 |   width="1000"
134 |   height="1000"
135 |   alt="Image"
136 | src="/images/blogs/hyper.png"/>
137 | 
138 | 
139 | 
140 | ## v0.dev 
141 | [**v0.dev**](https://v0.dev/) -  Yo, have you heard about shadcn/ui? This bad boy is a game-changer for your Tailwind-powered development projects. It's like having a personal UI designer on your team, but instead of sketching out designs, you just hit it with some simple text prompts or even images, and boom – it generates the code for you. And the best part? You can keep iterating on that UI, refining the look and feel until you've got the perfect components for your app or website. No more endless hours spent perfecting every little detail – shadcn/ui handles all that for you, so you can focus on the bigger picture. Just copy and paste the generated code, or add the component straight through the CLI – it's that easy. If you're serious about leveling up your Tailwind game, you gotta check out shadcn/ui. It's the ultimate UI generation tool that's gonna have your projects lookin' fresh AF.
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | <Image
150 |   width="1000"
151 |   height="1000"
152 |   alt="Image"
153 | src="/images/blogs/v0.png"/>
154 | 
155 | 
156 | 
157 | 
158 | Trust me if you compose all the power of each , you can really build amazing as fast as possible.
159 | 
160 | This is the most of them i used to build a good looking smooth website, but since there is a lot more i used other than , i will still keep mention their link down below so that you can expore about fam.
161 | 
162 | - https://ui.ibelick.com/
163 | - https://bg.ibelick.com/
164 | - https://uiverse.io/
165 | 
166 | 
167 | .... this list could be from you guys to add on so make sure to send a pr over [**here**](https://github.com/Kinfe123/kinfish-dumpy/blob/main/content/posts/top-frontend-toos-for-shipping-amazing-web.mdx) if you would like to have tool that fams can be using it.
168 | 
169 | 
170 | 
171 | 
172 | if you would like to reach me for anything - you can ping me on my email - [**kinfetare83@gmail.com**](mailto:kinfetare83@gmail.com)
173 | 
174 | 
175 | 
176 | 


--------------------------------------------------------------------------------
/contentlayer.config.js:
--------------------------------------------------------------------------------
  1 | import { defineDocumentType, makeSource } from "contentlayer/source-files";
  2 | import rehypeAutolinkHeadings from "rehype-autolink-headings";
  3 | import rehypePrettyCode from "rehype-pretty-code";
  4 | import rehypeSlug from "rehype-slug";
  5 | import remarkGfm from "remark-gfm";
  6 | 
  7 | /** @type {import('contentlayer/source-files').ComputedFields} */
  8 | const computedFields = {
  9 |   slug: {
 10 |     type: "string",
 11 |     resolve: (doc) => `/${doc._raw.flattenedPath}`,
 12 |   },
 13 |   slugAsParams: {
 14 |     type: "string",
 15 |     resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
 16 |   },
 17 |   readTime: {
 18 |     type: "number",
 19 |     resolve: (doc) => {
 20 |       const content = doc.body.raw
 21 |       const wordsPerMinute = 210
 22 |       const numberOfWords = content.split(/\s/g).length
 23 |       const minutes = numberOfWords / wordsPerMinute
 24 |       return Math.ceil(minutes)
 25 |     },
 26 |   },
 27 | 
 28 | };
 29 | 
 30 | export const Page = defineDocumentType(() => ({
 31 |   name: "Page",
 32 |   filePathPattern: `pages/**/*.mdx`,
 33 |   contentType: "mdx",
 34 |   fields: {
 35 |     title: {
 36 |       type: "string",
 37 |       required: true,
 38 |     },
 39 |     description: {
 40 |       type: "string",
 41 |     },
 42 |   },
 43 |   computedFields,
 44 | }));
 45 | export const Author = defineDocumentType(() => ({
 46 |   name: "Author",
 47 |   filePathPattern: `authors/**/*.mdx`,
 48 |   contentType: "mdx",
 49 |   fields: {
 50 |     name: {
 51 |       type: "string",
 52 |       require: true,
 53 |     },
 54 |     description: {
 55 |       type: "string",
 56 |       require: true,
 57 |     },
 58 |     avatar: {
 59 |       type: "string",
 60 |       require: true,
 61 |     },
 62 |     twitter: {
 63 |       type: "string",
 64 |       require: true,
 65 |     },
 66 |   },
 67 |   computedFields,
 68 | }));
 69 | export const Post = defineDocumentType(() => ({
 70 |   name: "Post",
 71 |   filePathPattern: `posts/**/*.mdx`,
 72 |   contentType: "mdx",
 73 |   fields: {
 74 |     title: {
 75 |       type: "string",
 76 |       required: true,
 77 |     },
 78 |     description: {
 79 |       type: "string",
 80 |     },
 81 |     date: {
 82 |       type: "date",
 83 |       required: true,
 84 |     },
 85 |     published: {
 86 |       type: "boolean",
 87 |       default: true,
 88 |     
 89 |     },
 90 |     image: {
 91 |       type: "string",
 92 |       required: true,
 93 |     },
 94 |     authors: {
 95 |       type: "list",
 96 |       of: { type: "string" },
 97 |       required: true,
 98 |     },
 99 |   },
100 |   computedFields,
101 | }));
102 | 
103 | export default makeSource({
104 |   contentDirPath: "./content",
105 |   documentTypes: [Post, Page, Author],
106 | 
107 |   mdx: {
108 |     remarkPlugins: [remarkGfm],
109 |     rehypePlugins: [
110 |       rehypeSlug,
111 |       [
112 |         rehypePrettyCode,
113 |         {
114 |           theme: "github-dark",
115 |           onVisitLine(node) {
116 |             // Prevent lines from collapsing in `display: grid` mode, and allow empty
117 |             // lines to be copy/pasted
118 |             if (node.children.length === 0) {
119 |               node.children = [{ type: "text", value: " " }];
120 |             }
121 |           },
122 |           onVisitHighlightedLine(node) {
123 |             node.properties.className.push("line--highlighted");
124 |           },
125 |           onVisitHighlightedWord(node) {
126 |             node.properties.className = ["word--highlighted"];
127 |           },
128 |         },
129 |       ],
130 |       [
131 |         rehypeAutolinkHeadings,
132 |         {
133 |           properties: {
134 |             className: ["subheading-anchor"],
135 |             ariaLabel: "Link to section",
136 |           },
137 |         },
138 |       ],
139 |     ],
140 |   },
141 | });
142 | 


--------------------------------------------------------------------------------
/db/actions/index.ts:
--------------------------------------------------------------------------------
1 | 'use server'
2 | 
3 | 
4 | export const increment = () => {
5 | 
6 | }


--------------------------------------------------------------------------------
/db/actions/save.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 | 
3 | export const countReq = async () => {
4 |   // to be implemented
5 | };
6 | 


--------------------------------------------------------------------------------
/db/index.tsx:
--------------------------------------------------------------------------------
 1 | import { drizzle } from 'drizzle-orm/postgres-js'
 2 | import postgres from 'postgres'
 3 | 
 4 | 
 5 | const connectionString = process.env.DATABASE_URL
 6 | 
 7 | const client = postgres(connectionString!)
 8 | export const db = drizzle(client);
 9 | 
10 | 


--------------------------------------------------------------------------------
/db/migrations/0000_dear_squirrel_girl.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE IF NOT EXISTS "visitor" (
2 | 	"id" serial NOT NULL,
3 | 	"name" text
4 | );
5 | 


--------------------------------------------------------------------------------
/db/migrations/meta/0000_snapshot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "id": "cb7f15bc-a896-4ada-9614-fb65427811b5",
 3 |   "prevId": "00000000-0000-0000-0000-000000000000",
 4 |   "version": "5",
 5 |   "dialect": "pg",
 6 |   "tables": {
 7 |     "visitor": {
 8 |       "name": "visitor",
 9 |       "schema": "",
10 |       "columns": {
11 |         "id": {
12 |           "name": "id",
13 |           "type": "serial",
14 |           "primaryKey": false,
15 |           "notNull": true
16 |         },
17 |         "name": {
18 |           "name": "name",
19 |           "type": "text",
20 |           "primaryKey": false,
21 |           "notNull": false
22 |         }
23 |       },
24 |       "indexes": {},
25 |       "foreignKeys": {},
26 |       "compositePrimaryKeys": {},
27 |       "uniqueConstraints": {}
28 |     }
29 |   },
30 |   "enums": {},
31 |   "schemas": {},
32 |   "_meta": {
33 |     "columns": {},
34 |     "schemas": {},
35 |     "tables": {}
36 |   }
37 | }


--------------------------------------------------------------------------------
/db/migrations/meta/_journal.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "5",
 3 |   "dialect": "mysql",
 4 |   "entries": [
 5 |     {
 6 |       "idx": 0,
 7 |       "version": "5",
 8 |       "when": 1704140027510,
 9 |       "tag": "0000_dear_squirrel_girl",
10 |       "breakpoints": true
11 |     }
12 |   ]
13 | }


--------------------------------------------------------------------------------
/db/schema.ts:
--------------------------------------------------------------------------------
 1 | import { serial, text, timestamp, pgTable } from "drizzle-orm/pg-core";
 2 | 
 3 | export var visitor = pgTable("visitor", {
 4 |   id: serial("id"),
 5 |   name: text("name"),
 6 | });
 7 | export var guesser = pgTable("guesser", {
 8 |   id: serial("id"),
 9 |   name: text("name"),
10 |   phone: text("phone"),
11 |   guess: text("guess"),
12 | });
13 | export var subscribers = pgTable("subscribers", {
14 |   id: serial("id"),
15 |   name: text("name"),
16 |   email: text("email"),
17 |   createdAt: timestamp("created_at").defaultNow().notNull(),
18 | });
19 | 


--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'drizzle-kit';
 2 | // import 'dotenv/config';
 3 | 
 4 | if (!process.env.DATABASE_URL) {
 5 |   throw new Error('DATABASE_URL environment variable is required.');
 6 | }
 7 | 
 8 | export default {
 9 |   schema: './db/schema.ts',
10 |   out: './db/migrations',
11 |   driver: 'pg',
12 |   dbCredentials: {
13 |    
14 |      connectionString: process.env.DATABASE_URL
15 |     // connectionString: process.env.DATABASE_URL,
16 |   },
17 | } satisfies Config;


--------------------------------------------------------------------------------
/lib/email-helper.ts:
--------------------------------------------------------------------------------
 1 | // @ts-ignore
 2 | 
 3 | import nodemailer from "nodemailer";
 4 | 
 5 | export const transporter = nodemailer.createTransport({
 6 |   service: "gmail",
 7 |   auth: {
 8 |     user: "kinfishfarms@gmail.com",
 9 |     pass: process.env.EMAIL_PASSWORD,
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/lib/locals.ts:
--------------------------------------------------------------------------------
1 |     


--------------------------------------------------------------------------------
/lib/mdx-helper.ts:
--------------------------------------------------------------------------------
 1 | import { allPosts } from "@/.contentlayer/generated";
 2 | import { Redis } from "@upstash/redis";
 3 | import { compareDesc } from "date-fns";
 4 | import { sumNums } from "./utils";
 5 | 
 6 | const redis = Redis.fromEnv();
 7 | export const getSlugs = () => {
 8 |   const posts = allPosts
 9 |     .filter((post) => post.date)
10 |     .sort((a, b) => {
11 |       return compareDesc(new Date(a.date), new Date(b.date));
12 |     });
13 | 
14 |   return posts;
15 | };
16 | 
17 | export const getViewCount = async () => {
18 |   const allSlugs = getSlugs().map((p) => `pageviews:projects:${p.slug}`);
19 |   const allViews = await redis.mget<(number | null)[]>(...allSlugs);
20 |   // @ts-ignore
21 |   return sumNums(allViews)
22 | };
23 | 


--------------------------------------------------------------------------------
/lib/useMouse.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | interface MousePosition {
 4 | 	x: number;
 5 | 	y: number;
 6 | }
 7 | 
 8 | export function useMousePosition(): MousePosition {
 9 | 	const [mousePosition, setMousePosition] = useState<MousePosition>({
10 | 		x: 0,
11 | 		y: 0,
12 | 	});
13 | 
14 | 	useEffect(() => {
15 | 		const handleMouseMove = (event: MouseEvent) => {
16 | 			setMousePosition({ x: event.clientX, y: event.clientY });
17 | 		};
18 | 
19 | 		window.addEventListener("mousemove", handleMouseMove);
20 | 
21 | 		return () => {
22 | 			window.removeEventListener("mousemove", handleMouseMove);
23 | 		};
24 | 	}, []);
25 | 
26 | 	return mousePosition;
27 | }


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx"
 2 | import { twMerge } from "tailwind-merge"
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs))
 6 | }
 7 | 
 8 | 
 9 | export function formatDate(input: string | number): string {
10 |   const date = new Date(input)
11 |   return date.toLocaleDateString("en-US", {
12 |     month: "long",
13 |     day: "numeric",
14 |     year: "numeric",
15 |   })
16 | }
17 | 
18 | export function absoluteUrl(path: string) {
19 |   return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
20 | }
21 | 
22 | 
23 | 
24 | export function sumNums(array: number[]) {
25 |   let sum = 0
26 |   for(let i=0; i<array.length; i++){
27 |     sum+=array[i]
28 |   }
29 |   return sum
30 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const { withContentlayer } = require("next-contentlayer");
 2 | 
 3 | /** @type {import('next').NextConfig} */
 4 | const nextConfig = {
 5 |   reactStrictMode: true,
 6 |   swcMinify: true,
 7 | };
 8 | 
 9 | module.exports = withContentlayer(nextConfig);
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-contentlayer",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "preview": "next build && next start",
 9 |     "start": "next start",
10 |     "lint": "next lint"
11 |   },
12 |   "dependencies": {
13 |     "@radix-ui/react-label": "^2.0.2",
14 |     "@radix-ui/react-separator": "^1.0.3",
15 |     "@radix-ui/react-slot": "^1.0.2",
16 |     "@radix-ui/react-tabs": "^1.0.4",
17 |     "@radix-ui/react-toast": "^1.1.5",
18 |     "@tabler/icons-react": "^2.44.0",
19 |     "@tailwindcss/aspect-ratio": "^0.4.2",
20 |     "@tailwindcss/typography": "^0.5.9",
21 |     "@types/node": "18.16.1",
22 |     "@types/react": "18.2.0",
23 |     "@types/react-dom": "18.2.1",
24 |     "@upstash/redis": "^1.27.1",
25 |     "@vercel/analytics": "^1.0.0",
26 |     "autoprefixer": "10.4.14",
27 |     "class-variance-authority": "^0.7.0",
28 |     "clsx": "^2.0.0",
29 |     "contentlayer": "^0.3.2",
30 |     "date-fns": "^3.0.6",
31 |     "drizzle-orm": "^0.29.2",
32 |     "eslint": "8.39.0",
33 |     "eslint-config-next": "13.3.1",
34 |     "flattenColorPalette": "link:ailwindcss/lib/util/flattenColorPalette",
35 |     "framer-motion": "^10.16.16",
36 |     "lucide-react": "^0.302.0",
37 |     "md-to-jsonify": "^1.0.0",
38 |     "mini-svg-data-uri": "^1.4.4",
39 |     "next": "13.4.1",
40 |     "next-contentlayer": "^0.3.2",
41 |     "next-themes": "^0.2.1",
42 |     "nodemailer": "^6.9.8",
43 |     "postcss": "8.4.23",
44 |     "postgres": "^3.4.3",
45 |     "react": "18.2.0",
46 |     "react-dom": "18.2.0",
47 |     "rehype": "^12.0.1",
48 |     "rehype-autolink-headings": "^6.1.1",
49 |     "rehype-pretty-code": "^0.9.5",
50 |     "rehype-slug": "^5.1.0",
51 |     "remark": "^14.0.2",
52 |     "remark-gfm": "^3.0.1",
53 |     "tailwind-merge": "^2.2.0",
54 |     "tailwindcss": "3.3.2",
55 |     "tailwindcss-animate": "^1.0.7",
56 |     "turbo": "^1.11.2",
57 |     "typescript": "5.0.4"
58 |   },
59 |   "devDependencies": {
60 |     "drizzle-kit": "^0.20.9"
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/assets/fonts/CalSans-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/assets/fonts/CalSans-SemiBold.ttf


--------------------------------------------------------------------------------
/public/assets/fonts/cd-semi.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/assets/fonts/cd-semi.otf


--------------------------------------------------------------------------------
/public/assets/fonts/jakarta.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/assets/fonts/jakarta.ttf


--------------------------------------------------------------------------------
/public/assets/fonts/product-font.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/assets/fonts/product-font.ttf


--------------------------------------------------------------------------------
/public/blog-post-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/blog-post-1.jpg


--------------------------------------------------------------------------------
/public/blog-post-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/blog-post-2.jpg


--------------------------------------------------------------------------------
/public/blog-post-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/blog-post-3.jpg


--------------------------------------------------------------------------------
/public/blog-post-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/blog-post-4.jpg


--------------------------------------------------------------------------------
/public/images/blogs/ace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/ace.png


--------------------------------------------------------------------------------
/public/images/blogs/ai-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/ai-2.png


--------------------------------------------------------------------------------
/public/images/blogs/ai.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/ai.jpg


--------------------------------------------------------------------------------
/public/images/blogs/bun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/bun.png


--------------------------------------------------------------------------------
/public/images/blogs/daisy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/daisy.png


--------------------------------------------------------------------------------
/public/images/blogs/flowbite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/flowbite.png


--------------------------------------------------------------------------------
/public/images/blogs/hacking-meeting.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/hacking-meeting.webp


--------------------------------------------------------------------------------
/public/images/blogs/hover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/hover.png


--------------------------------------------------------------------------------
/public/images/blogs/hyper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/hyper.png


--------------------------------------------------------------------------------
/public/images/blogs/interview.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/interview.webp


--------------------------------------------------------------------------------
/public/images/blogs/nextui.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/nextui.jpg


--------------------------------------------------------------------------------
/public/images/blogs/park-ui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/park-ui.png


--------------------------------------------------------------------------------
/public/images/blogs/preline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/preline.png


--------------------------------------------------------------------------------
/public/images/blogs/react.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/react.webp


--------------------------------------------------------------------------------
/public/images/blogs/shadcn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/shadcn.png


--------------------------------------------------------------------------------
/public/images/blogs/tailwindui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/tailwindui.png


--------------------------------------------------------------------------------
/public/images/blogs/v0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/v0.png


--------------------------------------------------------------------------------
/public/images/blogs/xp.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/xp.jpeg


--------------------------------------------------------------------------------
/public/images/blogs/zoom1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/blogs/zoom1.jpg


--------------------------------------------------------------------------------
/public/images/kinfe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kinfe123/kinfish-dumpy/d98ecaa67b879c44e5c765eda0b73fe08d067910/public/images/kinfe.jpeg


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/site/nav.tsx:
--------------------------------------------------------------------------------
 1 | import { IconHome, IconMessage, IconUser } from "@tabler/icons-react";
 2 | export const navItems = [
 3 | {
 4 |     name: "Home",
 5 |     link: "/",
 6 |     icon: <IconHome className="h-4 w-4 text-neutral-500 dark:text-white" />,
 7 |   },
 8 |   {
 9 |     name: "Blog",
10 |     link: "/posts",
11 |     icon: <IconUser className="h-4 w-4 text-neutral-500 dark:text-white" />,
12 |   },
13 |   {
14 |     name: "DX",
15 |     link: "/dx",
16 |     icon: <IconMessage className="h-4 w-4 text-neutral-500 dark:text-white" />,
17 |   },
18 | ];
19 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | // const defaultTheme = require("tailwindcss/defaultTheme");
  2 | // const colors = require("tailwindcss/colors");
  3 | const {
  4 |   default: flattenColorPalette,
  5 | } = require("tailwindcss/lib/util/flattenColorPalette");
  6 | const svgToDataUri = require("mini-svg-data-uri");
  7 |  
  8 | const colors = require("tailwindcss/colors");
  9 | 
 10 | /** @type {import('tailwindcss').Config} */
 11 | module.exports = {
 12 |   darkMode: ["class"],
 13 |   content: [
 14 |     "./pages/**/*.{ts,tsx}",
 15 |     "./components/**/*.{ts,tsx}",
 16 |     "./app/**/*.{ts,tsx}",
 17 |     "./src/**/*.{ts,tsx}",
 18 |   ],
 19 |   prefix: "",
 20 |   theme: {
 21 |     container: {
 22 |       center: true,
 23 |       padding: "2rem",
 24 |       screens: {
 25 |         "2xl": "1400px",
 26 |       },
 27 |     },
 28 |     extend: {
 29 |       colors: {
 30 |         border: "hsl(var(--border))",
 31 |         input: "hsl(var(--input))",
 32 |         ring: "hsl(var(--ring))",
 33 |         background: "hsl(var(--background))",
 34 |         foreground: "hsl(var(--foreground))",
 35 |         primary: {
 36 |           DEFAULT: "hsl(var(--primary))",
 37 |           foreground: "hsl(var(--primary-foreground))",
 38 |         },
 39 |         secondary: {
 40 |           DEFAULT: "hsl(var(--secondary))",
 41 |           foreground: "hsl(var(--secondary-foreground))",
 42 |         },
 43 |         destructive: {
 44 |           DEFAULT: "hsl(var(--destructive))",
 45 |           foreground: "hsl(var(--destructive-foreground))",
 46 |         },
 47 |         muted: {
 48 |           DEFAULT: "hsl(var(--muted))",
 49 |           foreground: "hsl(var(--muted-foreground))",
 50 |         },
 51 |         accent: {
 52 |           DEFAULT: "hsl(var(--accent))",
 53 |           foreground: "hsl(var(--accent-foreground))",
 54 |         },
 55 |         popover: {
 56 |           DEFAULT: "hsl(var(--popover))",
 57 |           foreground: "hsl(var(--popover-foreground))",
 58 |         },
 59 |         card: {
 60 |           DEFAULT: "hsl(var(--card))",
 61 |           foreground: "hsl(var(--card-foreground))",
 62 |         },
 63 |       },
 64 | 
 65 |       fontFamily: {
 66 |         heading: ["var(--font-heading)"],
 67 |         headingAlt: ["var(--font-headingAlt)"],
 68 |         subheading: ["var(--font-subheading)"],
 69 |         subalt: ["var(--font-subalt)"],
 70 |       },
 71 | 
 72 |       borderRadius: {
 73 |         lg: "var(--radius)",
 74 |         md: "calc(var(--radius) - 2px)",
 75 |         sm: "calc(var(--radius) - 4px)",
 76 |       },
 77 |       keyframes: {
 78 |         spotlight: {
 79 |           "0%": {
 80 |             opacity: 0,
 81 |             transform: "translate(-72%, -62%) scale(0.5)",
 82 |           },
 83 |           "100%": {
 84 |             opacity: 1,
 85 |             transform: "translate(-50%,-40%) scale(1)",
 86 |           },
 87 |         },
 88 |         "accordion-down": {
 89 |           from: { height: "0" },
 90 |           to: { height: "var(--radix-accordion-content-height)" },
 91 |         },
 92 | 
 93 |         "accordion-up": {
 94 |           from: { height: "var(--radix-accordion-content-height)" },
 95 |           to: { height: "0" },
 96 |         },
 97 |       },
 98 |       animation: {
 99 |         spotlight: "spotlight 2s ease .75s 1 forwards",
100 |         "accordion-down": "accordion-down 0.2s ease-out",
101 |         "accordion-up": "accordion-up 0.2s ease-out",
102 |       },
103 |     },
104 |   },
105 |   plugins: [
106 |     require("tailwindcss-animate"),
107 |     require("@tailwindcss/typography"),
108 |     require("@tailwindcss/aspect-ratio"),
109 |     addVariablesForColors,
110 |     function ({ matchUtilities, theme }) {
111 |       matchUtilities(
112 |         {
113 |           "bg-grid": (value) => ({
114 |             backgroundImage: `url("${svgToDataUri(
115 |               `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
116 |             )}")`,
117 |           }),
118 |           "bg-grid-small": (value) => ({
119 |             backgroundImage: `url("${svgToDataUri(
120 |               `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
121 |             )}")`,
122 |           }),
123 |           "bg-dot": (value) => ({
124 |             backgroundImage: `url("${svgToDataUri(
125 |               `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
126 |             )}")`,
127 |           }),
128 |         },
129 |         { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
130 |       );
131 |     }
132 |   ],
133 | };
134 | 
135 | function addVariablesForColors({ addBase, theme }) {
136 |   let allColors = flattenColorPalette(theme("colors"));
137 |   let newVars = Object.fromEntries(
138 |     Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
139 |   );
140 | 
141 |   addBase({
142 |     ":root": newVars,
143 |   });
144 | }
145 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "baseUrl": ".",
23 |     "paths": {
24 |       "@/*": ["./*"],
25 |       "contentlayer/generated": ["./.contentlayer/generated"]
26 |     }
27 |   },
28 |   "include": [
29 |     "next-env.d.ts",
30 |     "**/*.ts",
31 |     "**/*.tsx",
32 |     ".next/types/**/*.ts",
33 |     ".contentlayer/generated"
34 |   ],
35 |   "exclude": ["node_modules"]
36 | }
37 | 


--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://turbo.build/schema.json",
 3 |   "pipeline": {
 4 |     "build": {
 5 |       "outputs": [".next/**", "!.next/cache/**"]
 6 |     },
 7 |     "type-check": {}
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------