milestone: beta

.env.example

@@ -0,0 +1,7 @@
+POSTGRES_USER=""
+POSTGRES_PASSWORD=""
+POSTGRES_DB=""
+POSTGRES_HOST=""
+POSTGRES_PORT=
+
+YOUTUBE_API_KEY=""

.github/workflows/lockb.yml

@@ -7,8 +7,6 @@ on:
     paths:
       - "**/package.json"
       - "**/bun.lockb"
-  pull_request:
-    types: [opened, reopened, synchronize]
 
 permissions:
   contents: write

.gitignore

@@ -37,4 +37,7 @@ next-env.d.ts
 # server
 *.sql
 *.db
-.env
+.env
+
+# million
+.million

components/primitives.ts

@@ -1,53 +1,53 @@
 import { tv } from "tailwind-variants";
 
 export const title = tv({
-  base: "tracking-tight inline font-semibold",
-  variants: {
-    color: {
-      violet: "from-[#FF1CF7] to-[#b249f8]",
-      yellow: "from-[#FF705B] to-[#FFB457]",
-      blue: "from-[#5EA2EF] to-[#0072F5]",
-      cyan: "from-[#00b7fa] to-[#01cfea]",
-      green: "from-[#6FEE8D] to-[#17c964]",
-      pink: "from-[#FF72E1] to-[#F54C7A]",
-      foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]",
+    base: "tracking-tight inline font-semibold",
+    variants: {
+        color: {
+            violet: "from-[#FF1CF7] to-[#b249f8]",
+            yellow: "from-[#FF705B] to-[#FFB457]",
+            blue: "from-[#5EA2EF] to-[#0072F5]",
+            cyan: "from-[#00b7fa] to-[#01cfea]",
+            green: "from-[#6FEE8D] to-[#17c964]",
+            pink: "from-[#FF72E1] to-[#F54C7A]",
+            foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]",
+        },
+        size: {
+            sm: "text-3xl lg:text-4xl",
+            md: "text-[2.3rem] lg:text-5xl leading-9",
+            lg: "text-4xl lg:text-6xl",
+        },
+        fullWidth: {
+            true: "w-full block",
+        },
     },
-    size: {
-      sm: "text-3xl lg:text-4xl",
-      md: "text-[2.3rem] lg:text-5xl leading-9",
-      lg: "text-4xl lg:text-6xl",
+    defaultVariants: {
+        size: "md",
     },
-    fullWidth: {
-      true: "w-full block",
-    },
-  },
-  defaultVariants: {
-    size: "md",
-  },
-  compoundVariants: [
-    {
-      color: [
-        "violet",
-        "yellow",
-        "blue",
-        "cyan",
-        "green",
-        "pink",
-        "foreground",
-      ],
-      class: "bg-clip-text text-transparent bg-gradient-to-b",
-    },
-  ],
+    compoundVariants: [
+        {
+            color: [
+                "violet",
+                "yellow",
+                "blue",
+                "cyan",
+                "green",
+                "pink",
+                "foreground",
+            ],
+            class: "bg-clip-text text-transparent bg-gradient-to-b",
+        },
+    ],
 });
 
 export const subtitle = tv({
-  base: "w-full md:w-1/2 my-2 text-lg lg:text-xl text-default-600 block max-w-full",
-  variants: {
-    fullWidth: {
-      true: "!w-full",
+    base: "w-full md:w-1/2 my-2 text-lg lg:text-xl text-default-600 block max-w-full",
+    variants: {
+        fullWidth: {
+            true: "!w-full",
+        },
+    },
+    defaultVariants: {
+        fullWidth: true,
     },
-  },
-  defaultVariants: {
-    fullWidth: true,
-  },
 });

components/theme-switch.tsx

@@ -7,80 +7,82 @@ import clsx from "clsx";
 import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
 
 export interface ThemeSwitchProps {
-  className?: string;
-  classNames?: SwitchProps["classNames"];
+    className?: string;
+    classNames?: SwitchProps["classNames"];
 }
 
 export const ThemeSwitch: FC<ThemeSwitchProps> = ({
-  className,
-  classNames,
+    className,
+    classNames,
 }) => {
-  const [isMounted, setIsMounted] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
 
-  const { theme, setTheme } = useTheme();
+    const { theme, setTheme } = useTheme();
 
-  const onChange = () => {
-    theme === "light" ? setTheme("dark") : setTheme("light");
-  };
+    const onChange = () => {
+        theme === "light" ? setTheme("dark") : setTheme("light");
+    };
 
-  const {
-    Component,
-    slots,
-    isSelected,
-    getBaseProps,
-    getInputProps,
-    getWrapperProps,
-  } = useSwitch({
-    isSelected: theme === "light",
-    onChange,
-  });
+    const {
+        Component,
+        slots,
+        isSelected,
+        getBaseProps,
+        getInputProps,
+        getWrapperProps,
+    } = useSwitch({
+        isSelected: theme === "light",
+        onChange,
+    });
 
-  useEffect(() => {
-    setIsMounted(true);
-  }, [isMounted]);
+    useEffect(() => {
+        setIsMounted(true);
+    }, [isMounted]);
 
-  // Prevent Hydration Mismatch
-  if (!isMounted) return <div className="w-6 h-6" />;
+    // Prevent Hydration Mismatch
+    if (!isMounted) return <div className="w-6 h-6" />;
 
-  return (
-    <Component
-      aria-label={isSelected ? "Switch to dark mode" : "Switch to light mode"}
-      {...getBaseProps({
-        className: clsx(
-          "px-px transition-opacity hover:opacity-80 cursor-pointer",
-          className,
-          classNames?.base,
-        ),
-      })}
-    >
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <div
-        {...getWrapperProps()}
-        className={slots.wrapper({
-          class: clsx(
-            [
-              "w-auto h-auto",
-              "bg-transparent",
-              "rounded-lg",
-              "flex items-center justify-center",
-              "group-data-[selected=true]:bg-transparent",
-              "!text-default-500",
-              "pt-px",
-              "px-0",
-              "mx-0",
-            ],
-            classNames?.wrapper,
-          ),
-        })}
-      >
-        {isSelected ? (
-          <MoonFilledIcon size={22} />
-        ) : (
-          <SunFilledIcon size={22} />
-        )}
-      </div>
-    </Component>
-  );
+    return (
+        <Component
+            aria-label={
+                isSelected ? "Switch to dark mode" : "Switch to light mode"
+            }
+            {...getBaseProps({
+                className: clsx(
+                    "px-px transition-opacity hover:opacity-80 cursor-pointer",
+                    className,
+                    classNames?.base,
+                ),
+            })}
+        >
+            <VisuallyHidden>
+                <input {...getInputProps()} />
+            </VisuallyHidden>
+            <div
+                {...getWrapperProps()}
+                className={slots.wrapper({
+                    class: clsx(
+                        [
+                            "w-auto h-auto",
+                            "bg-transparent",
+                            "rounded-lg",
+                            "flex items-center justify-center",
+                            "group-data-[selected=true]:bg-transparent",
+                            "!text-default-500",
+                            "pt-px",
+                            "px-0",
+                            "mx-0",
+                        ],
+                        classNames?.wrapper,
+                    ),
+                })}
+            >
+                {isSelected ? (
+                    <MoonFilledIcon size={22} />
+                ) : (
+                    <SunFilledIcon size={22} />
+                )}
+            </div>
+        </Component>
+    );
 };

config/fonts.ts

@@ -1,11 +1,11 @@
 import { Fira_Code as FontMono, Inter as FontSans } from "next/font/google";
 
 export const fontSans = FontSans({
-  subsets: ["latin"],
-  variable: "--font-sans",
+    subsets: ["latin"],
+    variable: "--font-sans",
 });
 
 export const fontMono = FontMono({
-  subsets: ["latin"],
-  variable: "--font-mono",
+    subsets: ["latin"],
+    variable: "--font-mono",
 });

config/site.ts

@@ -2,8 +2,7 @@ export type SiteConfig = typeof siteConfig;
 
 export const siteConfig = {
     name: "JSALStats",
-    description:
-        "Make beautiful websites regardless of your design experience.",
+    description: "The home of YouTube analytics for JackSucksAtLife!",
     navItems: [
         {
             label: "Home",

next.config.js

@@ -1,24 +1,44 @@
+const MillionLint = require("@million/lint");
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
     images: {
         remotePatterns: [
             {
-                protocol: 'https',
-                hostname: '**',
-                port: '',
-                pathname: '**',
+                protocol: "https",
+                hostname: "**",
+                port: "",
+                pathname: "**",
             },
         ],
     },
     async rewrites() {
         return [
             {
-                source: '/sitemap.xml',
-                destination: '/api/sitemap',
+                source: "/sitemap.xml",
+                destination: "/api/sitemap",
+            },
+        ];
+    },
+    async headers() {
+        return [
+            {
+                source: "/(.*)",
+                headers: [
+                    {
+                        key: "Access-Control-Allow-Origin",
+                        value: "*",
+                    },
+                    {
+                        key: "Access-Control-Allow-Methods",
+                        value: "GET",
+                    },
+                ],
             },
         ];
     },
 };
 
-module.exports = nextConfig;
+module.exports = MillionLint.next({
+    enabled: true,
+})(nextConfig);

package.json

@@ -5,11 +5,12 @@
   "scripts": {
     "dev": "concurrently 'next dev --turbo --port 5815' 'bun --watch ./server/index.ts'",
     "build": "next build",
-    "start:site": "next start --port 5815",
+    "start:site": "next start --port 5818",
     "start:server": "bun ./server/index.ts",
     "lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix"
   },
   "dependencies": {
+    "@million/lint": "^1.0.13",
     "@nextui-org/button": "2.0.38",
     "@nextui-org/code": "2.0.33",
     "@nextui-org/input": "2.2.5",

pages/404.tsx

@@ -19,7 +19,6 @@ export default function IndexPage() {
                 </div>
 
                 <Link
-                    isExternal
                     className={buttonStyles({
                         variant: "bordered",
                         radius: "full",

pages/_document.tsx

@@ -13,6 +13,7 @@ export default function Document() {
                     fontSans.variable,
                 )}
             >
+                {/* <script src="https://unpkg.com/react-scan/dist/auto.global.js" /> */}
                 <Main />
                 <NextScript />
             </body>

pages/api/video/[videoId].ts

@@ -4,7 +4,12 @@ export default async function Handler(
     req: NextApiRequest,
     res: NextApiResponse,
 ) {
-    // const videoId = req.query.videoId as string;
+    const reqVideoId = req.query.videoId as string;
 
-    return res.status(404).send(null);
+    const fetchRes = await fetch(
+        `http://localhost:5816/analytics/video/${reqVideoId}`,
+    );
+    const data = await fetchRes.json();
+
+    return res.status(fetchRes.status).json(data);
 }