Merge pull request 'upgrades' (#18) from upgrades into main

Reviewed-on: #18

.github/workflows/main.yml

@@ -17,11 +17,9 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
-      - uses: actions/checkout@v4
-
       - name: "Base requirements"
         run: |
           # packages
@@ -30,13 +28,15 @@ jobs:
           ansible-galaxy collection install community.general --force
           ansible-galaxy collection install ansible.posix --force
 
+      - uses: actions/checkout@v4
+
       # Corepack
       - name: Install Corepack
         run: npm install -g corepack
       - name: "Enable Corepack"
         run: corepack enable
       - name: "Install Yarn"
-        run: corepack prepare yarn@4.9.2 --activate
+        run: corepack prepare yarn@latest --activate
 
       # YARN
       - name: "Install Dependencies"
@@ -51,4 +51,3 @@ jobs:
         run: yarn lint # will run `yarn lint` command
       - name: "Build Code"
         run: yarn run build # will run `yarn build` command
-        

.github/workflows/vercel-preview.yaml

@@ -0,0 +1,44 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  # Trigger the workflow on push or pull request,
+  # push:
+  #   branches: [main, stable]
+  pull_request:
+    # These types of PRs
+    types: [opened, synchronize, reopened]
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-24.04
+    steps:
+      # Setup environment
+      - name: "Base requirements"
+        run: |
+          # packages
+          apk update && apk add --no-cache git docker docker-compose nodejs gpg openssh npm ansible
+          # ansible collections
+          ansible-galaxy collection install community.general --force
+          ansible-galaxy collection install ansible.posix --force
+
+      - uses: actions/checkout@v2
+
+      # Corepack
+      - name: Install Corepack
+        run: npm install -g corepack
+      - name: "Enable Corepack"
+        run: corepack enable
+      - name: "Install Yarn"
+        run: corepack prepare yarn@latest --activate
+
+      # Vercel
+      - uses: actions/checkout@v2
+      - name: "Install Vercel CLI"
+        run: npm install --global vercel@latest
+      - name: "Pull Vercel Environment Information"
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: "Build Project Artifacts"
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: "Deploy Project Artifacts to Vercel"
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/vercel-production.yaml

@@ -0,0 +1,42 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+      - stable
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-24.04
+
+    steps:
+      # Setup environment
+      - name: "Base requirements"
+        run: |
+          # packages
+          apk update && apk add --no-cache git docker docker-compose nodejs gpg openssh npm ansible
+          # ansible collections
+          ansible-galaxy collection install community.general --force
+          ansible-galaxy collection install ansible.posix --force
+
+      - uses: actions/checkout@v2
+
+      # Corepack
+      - name: Install Corepack
+        run: npm install -g corepack
+      - name: "Enable Corepack"
+        run: corepack enable
+      - name: "Install Yarn"
+        run: corepack prepare yarn@latest --activate
+
+      # Vercel
+      - name: "Install Vercel CLI"
+        run: npm install --global vercel@latest
+      - name: "Pull Vercel Environment Information"
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: "Build Project Artifacts"
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: "Deploy Project Artifacts to Vercel"
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

eslint.config.mjs

@@ -1,34 +1,41 @@
-import { dirname } from "path";
+import { defineConfig, globalIgnores } from "eslint/config";
-import { fileURLToPath } from "url";
+import nextVitals from "eslint-config-next/core-web-vitals";
-import { FlatCompat } from "@eslint/eslintrc";
-import jsxA11y from "eslint-plugin-jsx-a11y";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import reactPlugin from "eslint-plugin-react";
-import reactHooks from "eslint-plugin-react-hooks";
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import reactHooks from "eslint-plugin-react-hooks";
 
-const __filename = fileURLToPath(import.meta.url);
+const eslintConfig = defineConfig([
-const __dirname = dirname(__filename);
+  ...nextVitals,
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
   eslintPluginPrettierRecommended,
   reactPlugin.configs.flat.recommended,
   reactPlugin.configs.flat["jsx-runtime"],
   eslint.configs.recommended,
+  // tseslint.configs.recommended,
+  // tseslint.configs.stylistic,
+  // reactHooks.configs.flat.recommended,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+    "types/**"
+  ]),
   {
+    rules: {
+      "@typescript-eslint/no-empty-object-type": "off"
+    },
     plugins: {
       jsxA11y: jsxA11y.configs.strict,
-      "react-hooks": reactHooks,
+      reactHooks: reactHooks.configs.recommended,
       tseslint: tseslint.configs.recommended,
-      "tseslint-styles": tseslint.configs.stylistic
+      tseslintStyle: tseslint.configs.stylisticTypeChecked
     }
   }
-];
+]);
 
 export default eslintConfig;

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -1,49 +1,43 @@
 {
-  "name": "lucid-creations-website",
+  "name": "werewolf-kid-creations-website",
-  "homepage": "https://new.lucidcreations.media/",
+  "homepage": "https://werewolfkid.monster/",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
-  "description": "This is a personal website that I have no specific goals for other than to have fun and share things that I want to.",
-  "author": {
-    "name": "Lucid Creations Media",
-    "url": "https://lucidcreations.media",
-    "email": "social@lucidcreations.media"
-  },
   "license": "MIT",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "pretty": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.24.2",
+    "@chakra-ui/react": "^3.30.0",
     "@emotion/react": "^11.14.0",
-    "next": "15.4.6",
+    "next": "16.0.7",
     "next-themes": "^0.4.6",
-    "react": "^19.1.1",
+    "react": "^19.2.1",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.1",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.2.1",
+    "@types/node": "^24.10.1",
-    "@types/react": "^19.1.9",
+    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.1.7",
+    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.39.0",
+    "@typescript-eslint/parser": "^8.48.1",
-    "eslint": "^9.33.0",
+    "eslint": "^9.39.1",
-    "eslint-config-next": "15.4.6",
+    "eslint-config-next": "16.0.7",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
-    "prettier": "3.6.2",
+    "prettier": "3.7.4",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.39.0"
+    "typescript-eslint": "^8.48.1"
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.12.0"
 }

public/images/logo/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/images/logo/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/images/logo/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/app/layout.tsx

@@ -1,11 +1,89 @@
 import React from "react";
 import { Provider } from "@/components/ui/provider";
+import { metadata } from "./page";
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   const { children } = props;
+
+  const url = "https://werewolfkid.monster";
+  const img = "/images/logo/favicon/favicon.ico";
+  const domain = "werewolfkid.monster";
+
   return (
     <html suppressHydrationWarning>
-      <link rel="icon" href="/images/logo/favicon/favicon.ico" sizes="any" />
+      <meta
+        property="title"
+        content={
+          typeof metadata.title === "string"
+            ? metadata.title
+            : "error with metadata"
+        }
+      />
+      <meta name="theme-color" content="#00ffff" />
+      <link rel="icon" href={img} sizes="any" />
+      <meta property="image" content="/images/logo/new-logo.png" />
+      <meta property="image:type" content="image/png" />
+      <meta property="image:width" content="653px" />
+      <meta
+        property="og:title"
+        content={
+          typeof metadata.title === "string"
+            ? metadata.title
+            : "error with metadata"
+        }
+      />
+      <meta
+        property="og:description"
+        content={
+          typeof metadata.description === "string"
+            ? metadata.description
+            : "error with metadata"
+        }
+      />
+      <meta property="og:url" content={url} />
+      <meta property="og:type" content="website" />
+      <meta property="og:image" content="/images/logo/new-logo.png" />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:width" content="653px" />
+      <meta property="og:image:height" content="651px" />
+      <meta property="image:height" content="651px" />
+      <meta
+        name="twitter:title"
+        content={
+          typeof metadata.title === "string"
+            ? metadata.title
+            : "error with metadata"
+        }
+      />
+      <meta property="twitter:domain" content={domain} />
+      <meta property="twitter:url" content={url} />
+      <meta
+        name="twitter:description"
+        content={
+          typeof metadata.description === "string"
+            ? metadata.description
+            : "error with metadata"
+        }
+      />
+      <meta
+        name="twitter:image"
+        content="https://werewolfkid.monster/images/logo/new-logo.png"
+      />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta httpEquiv="content-language" content="en_US" />
+      <meta charSet="UTF-8" />
+      <link
+        rel="icon"
+        type="image/svg+xml"
+        href="/images/logo/favicon/favicon.svg"
+      />
+      <link rel="shortcut icon" href="/images/logo/favicon/favicon.ico" />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/images/logo/favicon/apple-touch-icon.png"
+      />
+      <link rel="manifest" href="/images/logo/favicon/site.webmanifest" />
       <body>
         <Provider>{children}</Provider>
       </body>

src/app/page.tsx

@@ -1,7 +1,24 @@
+import type { Metadata } from "next";
 import { Button, Heading, HStack, Link, Text, VStack } from "@chakra-ui/react";
-import newLogo from "../../public/images/logo/New Logo (transparent).png";
+import newLogo from "../../public/images/logo/new-logo.png";
 import Image from "next/image";
 
+export const metadata: Metadata = {
+  title: "Werwolf Kid Creations Website",
+  description:
+    "The LCM website and eShop has been temporarily discontinued due to various external factors that interfered with my ability to focus and work on my creative passions. Along with some legal challenges that I hope to get sorted soon. This website going to serve as a bio, place to find social links, host art of Lucid, and embeds from Gumroad for the 3D textures. I hope to relaunch the eShop on this domain in the future as well."
+};
+
+const colorScheme = {
+  primary: "cyan",
+  secondary: "cyan.600",
+  bg: "teal.950",
+  button: "#5bbdbc",
+  buttonText: "gray.950"
+};
+
+const socialSubdomain = "https://social.werewolfkid.monster/";
+
 export default function Home() {
   return (
     <VStack
@@ -11,6 +28,7 @@ export default function Home() {
       spaceY={12}
       pt="5vh"
       pb="20vh"
+      bg={colorScheme.bg}
     >
       <VStack spaceY={2}>
         <Image height={250} src={newLogo} alt="New LCM logo" />
@@ -18,11 +36,21 @@ export default function Home() {
           lineHeight="1"
           w="80vw"
           as="h1"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="4rem"
           textAlign="center"
         >
-          {"Lucid Creations Media Website"}
+          {"Werewolf Kid Creations"}
+        </Heading>
+        <Heading
+          lineHeight="1"
+          w="80vw"
+          as="h2"
+          color={colorScheme.secondary}
+          fontSize="2rem"
+          textAlign="center"
+        >
+          {"Formerly Lucid Creations Media"}
         </Heading>
       </VStack>
 
@@ -37,32 +65,32 @@ export default function Home() {
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "Last year I faced a layoff and haven't been able to get back into my field. I can no longer afford the costs of hosting this website on it's current platform. The website generated no sales and thus I had to make the difficult decision to shut the site down for now."
+            "Last year I faced a layoff and haven't been able to get back into my field. I can no longer afford the costs of hosting this website on its current platform. The website generated no sales and thus I had to make the difficult decision to shut the site down for now."
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "Another contributing factor is the fear of losing access to another payment processor. LCM was banned from Square and they gave no reason. It's probably because of \"adult material\". On top of that, especially with it getting in the spotlight again, my state is starting it's own ID check law for adult websites. I cannot catch a break. I have no way to do that since I already struggle to pay for hosting so it's probably a good time to just take a break from this endeavour for now."
+            "Another contributing factor is the fear of losing access to another payment processor. LCM was banned from Square and they gave no reason. It's probably because of \"adult material\". On top of that, especially with it getting in the spotlight again, my state is starting its own ID check law for adult websites. I cannot catch a break. I have no way to do that since I already struggle to pay for hosting so it's probably a good time to just take a break from this endeavour for now."
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            'I have no time frame for when or if I will reopen the eShop. I do wish to at some point, on a more modern platform. I know that the next few months will be hell for me and I will have no time to dedicate to any of this. I will have to see how things are once I start getting more free time and if I can start working on a new website, "remastering" old hypno files, and making new ones for the relaunch.'
+            "I have no time frame for when or if I will reopen the eShop. I do wish to at some point, on a more modern platform. I was originally expecting to be very busy till around the end of November or early December. However, my old job; which I wanted to work alongside starting my new job, let me go for some nonsense reasons that aren't pertinent enough to mention here."
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "Since LCM is not registered as an LLC yet I have been contemplating rebranding the company one last time. A few weeks before coming to this decision and making this page I was being pulled to shelf Kobold as Lucid's default form. I have been enjoying hearing/seeing everyone refer to me as wolf/werwolf so much that I might keep it this way. Just like when I changed my original fursona and alias it might be time to flip to a new chapter in my life."
+            'Since LCM was not registered as an LLC yet I have decided to rebrand the company one last time. I have been enjoying hearing/seeing everyone refer to me as wolf/werewolf so much that I want to keep it as Lucid\'s base/default form. To align with this change I am trying out the name "Werewolf Kid Creations". Lucid Creations Media still works, but I really want to lean into the new base form. I think it is time to flip to a new chapter in my life just like when I change my original fursona and online alias.'
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            'For a little while I was debating using "Kobold Kid", my new vanity domain name, as the new brand, but I have a new idea. I will sit on it for a few months before I make any decisions.'
+            "If I feel Lucid Creations Media should remain the company name I would still consider using Lucid's kobold form as a mascot for the company. I am going to run with the new name for now and see how everyone likes it."
           }
         </Text>
         <Text w="100%" textAlign="left" fontSize="lg">
           {
-            "Another option I was considering is keeping Kobold as marketing/mascot, but I am not sure about it."
+            "My current priorities are to test this rebrand, update usernames to match my new alias, and work on making the WerewolfKid.monster website. Which is going to serve the same purpose that the Kobold Kid website was going to be: a bio, place to find social links, art of Lucid, and embeds from Gumroad for the 3D textures. I hope to relaunch the eShop on this domain too with a new platform if I can figure out the legal hurdles of doing all of that."
           }
         </Text>
       </VStack>
@@ -70,7 +98,7 @@ export default function Home() {
       <VStack spaceY={6} w="80vw">
         <Heading
           as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -79,20 +107,20 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}gumroad`}
-              href="http://gumroad.social.koboldkid.com/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Gumroad"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
         </HStack>
 
         <Heading
-          as="h2"
+          as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -101,38 +129,38 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href="https://community.werewolfkid.monster/"
-              href="https://community.lucidcreations.media/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"The Cove"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href="https://vrchat.com/home/group/grp_781bbe4b-51ec-4025-a14f-cf23ced90507"
-              href="https://vrchat.com/home/group/grp_781bbe4b-51ec-4025-a14f-cf23ced90507"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Dreamy Drove"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}discord`}
-              href="http://discord.social.koboldkid.com/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Discord Server"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
         </HStack>
 
         <Heading
-          as="h4"
+          as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -141,29 +169,29 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}bsky`}
-              href="https://koboldkid.com/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
-              {"Kobold Kid Website"}
-            </Link>
-          </Button>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
-            <Link
-              target="_blank"
-              color="whiteAlpha.950"
-              href="http://bsky.social.koboldkid.com/"
-            >
               {"Bsky"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
+          <Link
+            target="_blank"
+            color={colorScheme.buttonText}
+            href={`${socialSubdomain}fa`}
+          >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
+              {"FurAffinity"}
+            </Button>
+          </Link>
         </HStack>
 
         <Heading
-          as="h5"
+          as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -172,33 +200,33 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          <Button variant="solid" bgColor="teal" fontSize="xl">
+          <Link
-            <Link
+            target="_blank"
-              target="_blank"
+            color={colorScheme.buttonText}
-              color="whiteAlpha.950"
+            href={`${socialSubdomain}twitch`}
-              href="http://yt-vods.social.koboldkid.com/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
-              {"YouTube VODs"}
-            </Link>
-          </Button>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
-            <Link
-              target="_blank"
-              color="whiteAlpha.950"
-              href="http://yt-archives.social.koboldkid.com/"
-            >
-              {"YouTube Archives"}
-            </Link>
-          </Button>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
-            <Link
-              target="_blank"
-              color="whiteAlpha.950"
-              href="http://twitch.social.koboldkid.com/"
-            >
               {"Twitch"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
+          <Link
+            target="_blank"
+            color={colorScheme.buttonText}
+            href={`${socialSubdomain}yt-vods`}
+          >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
+              {"YouTube VODs"}
+            </Button>
+          </Link>
+          <Link
+            target="_blank"
+            color={colorScheme.buttonText}
+            href={`${socialSubdomain}yt-archives`}
+          >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
+              {"YouTube Archives"}
+            </Button>
+          </Link>
         </HStack>
       </VStack>
     </VStack>

src/components/ui/color-mode.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-/* eslint-disable prettier/prettier */
 /* eslint-disable no-unused-vars */
 "use client";
 

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }