complete site added

iamvishnusankar · Jun 19, 2023 · b8cfd99 · b8cfd99
1 parent 7ec5f78
commit b8cfd99
Show file tree

Hide file tree

Showing 115 changed files with 15,367 additions and 2,334 deletions.
diff --git a/docs/.env.example b/docs/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_APP_URL=
+GITHUB_ACCESS_TOKEN=
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -11,6 +11,8 @@
 # next.js
 /.next/
 /out/
+/.contentlayer/
+sitemap.xml
 
 # production
 /build
@@ -33,3 +35,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
diff --git a/docs/app/api/og/route.tsx b/docs/app/api/og/route.tsx
@@ -0,0 +1,130 @@
+import { ImageResponse } from "@vercel/og";
+
+import { ogImageSchema } from "@/lib/validations/og";
+
+export const runtime = "edge";
+
+const photo = fetch(
+  new URL(`../../../public/logo.jpg`, import.meta.url)
+).then((res) => res.arrayBuffer());
+
+const ranadeRegular = fetch(
+  new URL("../../../assets/fonts/Ranade-Regular.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+
+const satoshiBold = fetch(
+  new URL("../../../assets/fonts/Satoshi-Bold.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+
+export async function GET(req: Request) {
+  try {
+    const fontRegular = await ranadeRegular;
+    const fontBold = await satoshiBold;
+
+    const url = new URL(req.url);
+    const values = ogImageSchema.parse(Object.fromEntries(url.searchParams));
+    const heading =
+      values.heading.length > 140
+        ? `${values.heading.substring(0, 140)}...`
+        : values.heading;
+
+    const { mode } = values;
+    const paint = mode === "dark" ? "#fff" : "#000";
+
+    const fontSize = heading.length > 100 ? "70px" : "100px";
+
+    return new ImageResponse(
+      (
+        <div
+          tw="flex relative flex-col p-12 w-full h-full items-start"
+          style={{
+            color: paint,
+            background:
+              mode === "dark"
+                ? "linear-gradient(90deg, #000 0%, #111 100%)"
+                : "white",
+          }}
+        >
+          <img
+            tw="h-[50px] w-[212px]"
+            alt="logo"
+            // @ts-ignore
+            src={await photo}
+          />
+
+          <div tw="flex flex-col flex-1 py-10">
+            <div
+              tw="flex text-xl uppercase font-bold tracking-tight"
+              style={{ fontFamily: "Ranade", fontWeight: "normal" }}
+            >
+              {values.type}
+            </div>
+            <div
+              tw="flex leading-[1.1] text-[80px] font-bold"
+              style={{
+                fontFamily: "Satoshi",
+                fontWeight: "bold",
+                marginLeft: "-3px",
+                fontSize,
+              }}
+            >
+              {heading}
+            </div>
+          </div>
+          <div tw="flex items-center w-full justify-between">
+            <div
+              tw="flex text-xl"
+              style={{ fontFamily: "Ranade", fontWeight: "normal" }}
+            >
+              next-site map
+            </div>
+            <div
+              tw="flex items-center text-xl"
+              style={{ fontFamily: "Ranade", fontWeight: "normal" }}
+            >
+              <svg width="32" height="32" viewBox="0 0 48 48" fill="none">
+                <path
+                  d="M30 44v-8a9.6 9.6 0 0 0-2-7c6 0 12-4 12-11 .16-2.5-.54-4.96-2-7 .56-2.3.56-4.7 0-7 0 0-2 0-6 3-5.28-1-10.72-1-16 0-4-3-6-3-6-3-.6 2.3-.6 4.7 0 7a10.806 10.806 0 0 0-2 7c0 7 6 11 12 11a9.43 9.43 0 0 0-1.7 3.3c-.34 1.2-.44 2.46-.3 3.7v8"
+                  stroke={paint}
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M18 36c-9.02 4-10-4-14-4"
+                  stroke={paint}
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <div tw="flex ml-2">github.com/iamvishnusankar/next-sitemap</div>
+            </div>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: "Ranade",
+            data: fontRegular,
+            weight: 400,
+            style: "normal",
+          },
+          {
+            name: "Satoshi",
+            data: fontBold,
+            weight: 700,
+            style: "normal",
+          },
+        ],
+      }
+    );
+  } catch (error) {
+    return new Response(`Failed to generate image`, {
+      status: 500,
+    });
+  }
+}
diff --git a/docs/app/components/CodeCopyButton.tsx b/docs/app/components/CodeCopyButton.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { FC, ReactNode, useRef, useState } from "react";
 import clsx from "clsx";
+import { useToast } from "@/app/components/ui/use-toast";
 
 interface CodeCopyButtonProps {
   children: ReactNode;
@@ -9,8 +10,12 @@ interface CodeCopyButtonProps {
 const CodeCopyButton: FC<CodeCopyButtonProps> = ({ children }) => {
   const textInput = useRef<HTMLDivElement>(null);
   const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
   const onCopy = () => {
     setCopied(true);
+    toast({
+      title: "Successfully copied to clipboard",
+    });
     if (textInput.current !== null && textInput.current.textContent !== null)
       navigator.clipboard.writeText(textInput.current.textContent);
     setTimeout(() => {
@@ -23,14 +28,17 @@ const CodeCopyButton: FC<CodeCopyButtonProps> = ({ children }) => {
       <div
         ref={textInput}
         onClick={onCopy}
-        className={clsx("rounded border-2 bg-black p-1 dark:bg-gray-800", {
-          "border border-green-500 text-green-500 hover:dark:bg-black rounded-lg p-2 hover:cursor-pointer":
-            copied,
-          "border border-gray-950 dark:border-neutral-300 hover:dark:bg-black bg-inherit rounded-lg p-2 hover:cursor-pointer":
-            !copied,
-        })}
+        className={clsx(
+          "rounded border-2 bg-black p-1 px-5 dark:bg-gray-800 font-ranadeMedium max-md:text-sm w-fit",
+          {
+            "border border-green-500 text-green-500 hover:dark:bg-black rounded-lg p-2 hover:cursor-pointer":
+              copied,
+            "border border-gray-950 dark:border-neutral-300 hover:dark:bg-black bg-inherit rounded-lg p-2 hover:cursor-pointer":
+              !copied,
+          }
+        )}
       >
-        <code lang="bash">{children}</code>
+        <code lang="en">{children}</code>
       </div>
     </>
   );

diff --git a/docs/app/components/Footer.tsx b/docs/app/components/Footer.tsx
@@ -1,55 +1,45 @@
-import { FC } from 'react'
+import { FC } from "react";
 
 interface FooterProps {}
 
 const Footer: FC<FooterProps> = ({}) => {
   return (
     <>
-      <div className="bg-neutral-200 dark:bg-slate-900  flex flex-col md:flex-row justify-evenly items-center p-3 border-t border-slate-300 dark:border-slate-700 text-sm">
-        <div className="flex flex-row max-md:flex-col">
+      <div className="bg-neutral-200 dark:bg-slate-900  flex flex-col md:flex-row md:justify-evenly items-center p-3 border-t border-slate-300 dark:border-slate-700 text-sm font-ranadeLight">
+        <div className="flex flex-row max-md:flex-col items-center">
           <p className=" px-2">
             Created by:&nbsp;
             <a
-              href="https://iamvishnusankar.com"
+              href="https://github.com/iamvishnusankar/next-sitemap/graphs/contributors"
               target="_blank"
               className="hover:underline hover:cursor-pointer"
             >
-              Vishnu Sankar.&nbsp;
+              Vishnu Sankar & Contributors.&nbsp;
             </a>
           </p>
           <p className=" max-md:my-2 px-2">
-            Website Created by:&nbsp;
+            Font From:&nbsp;
             <a
-              href="https://shreyas-chaliha.vercel.app"
+              href="https://www.fontshare.com/"
               target="_blank"
               className="hover:underline hover:cursor-pointer"
             >
-              Trace.&nbsp;
+              Fontshare.&nbsp;
             </a>
           </p>
         </div>
-        <div className=" flex flex-row">
-          Source: &nbsp;
+        <div className=" flex flex-col md:flex-row items-center mb:4">
           <a
-            href="https://github.com/iamvishnusankar/next-sitemap"
+            href="https://github.com/iamvishnusankar/next-sitemap/docs"
             target="_blank"
-            className="hover:underline hover:cursor-pointer"
+            className="text-slate-400 hover:underline hover:cursor-pointer hover:text-neutral-200"
           >
-            Package.&nbsp;
+            Website Source.&nbsp;
           </a>
-          <p className="hover:underline hover:cursor-pointer px-2">
-            <a
-              href=" https://github.com/trace2798/website"
-              target="_blank"
-              className="hover:underline hover:cursor-pointer"
-            >
-              Website.&nbsp;
-            </a>
-          </p>
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/docs/app/components/GithubStars.tsx b/docs/app/components/GithubStars.tsx
@@ -0,0 +1,43 @@
+import { siteConfig } from "@/config/site";
+import Link from "next/link";
+
+interface GithubStarsProps {
+  stars: string;
+}
+
+const GithubStars: React.FC<GithubStarsProps> = ({ stars }) => {
+  return (
+    <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center mt-10">
+      {stars && (
+        <Link
+          href={siteConfig.links.github}
+          target="_blank"
+          rel="noreferrer"
+          className="flex"
+        >
+          <div className="flex h-10 w-10 items-center justify-center space-x-2 rounded-md border border-slate-500 dark:border-neutral-300 hover:bg-slate-900 hover:text-neutral-200 dark:hover:bg-neutral-200 dark:hover:text-black">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              className="h-5 w-5 "
+            >
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+            </svg>
+          </div>
+          <div className="flex items-center">
+            <div className="h-4 w-4 border-y-8 border-l-0 border-r-8 border-solid  border-y-transparent"></div>
+            <div className="flex h-10 items-center rounded-md border border-slate-500 hover:bg-slate-900 hover:text-neutral-200 dark:border-neutral-300 dark:hover:bg-neutral-200 dark:hover:text-black px-4 font-medium">
+              {stars} stars on GitHub
+            </div>
+          </div>
+        </Link>
+      )}
+      <h1 className="text-base xl:text-xl capitalize">
+        Proudly Open source. MIT license.
+      </h1>
+    </div>
+  );
+};
+
+export default GithubStars;
diff --git a/docs/app/components/Icons.tsx b/docs/app/components/Icons.tsx
@@ -6,7 +6,7 @@ export const Icons = {
   Sun,
   Moon,
   Laptop,
-  ArrowRight
+  ArrowRight,
 }
 
 export default Icons
diff --git a/docs/app/components/Navbar.tsx b/docs/app/components/Navbar.tsx
@@ -1,9 +1,12 @@
+'use client'
 import Link from "next/link";
 import { ThemeToggle } from "./ThemeToggle";
 import { buttonVariants } from "./blocks/Button";
 import SocialIcons from "./blocks/SocialIcons";
+import { useState } from "react";
 
 const Navbar = async () => {
+
   return (
     <div className="fixed backdrop-blur-sm bg-neutral-200 dark:bg-slate-900 z-50 top-0 left-0 right-0 h-20 border-b border-slate-300 dark:border-slate-700 shadow-sm flex items-center justify-between">
       <div className="container max-w-7xl mx-auto w-full flex justify-between items-center font-satoshiBold">

diff --git a/docs/app/components/Navbar/MobileMenu.tsx b/docs/app/components/Navbar/MobileMenu.tsx
@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import { useRouter } from "next/navigation";
+import MenuItem from "./NavbarItem";
+import SocialIcons from "../blocks/SocialIcons";
+
+interface MobileMenuProps {
+  visible?: boolean;
+}
+
+const MobileMenu: React.FC<MobileMenuProps> = ({ visible }) => {
+  const router = useRouter();
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className="absolute rounded-xl shadow-md w-[40vw] md:w-[30vw] bg-neutral-100 dark:bg-slate-700 h-auto overflow-hidden left-0 top-12 text-sm">
+      <div className="flex flex-col cursor-pointer">
+        <MenuItem onClick={() => router.push("/")} label="Home" />
+        <MenuItem onClick={() => router.push("/docs")} label="Documentation" />
+        <MenuItem onClick={() => router.push("/examples")} label="Examples" />
+        <hr />
+      </div>
+      <div className="w-full flex justify-center py-2 md:hidden">
+        <SocialIcons />
+      </div>
+    </div>
+  );
+};
+
+export default MobileMenu;