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"

.github/workflows/vercel-preview.yaml

@@ -4,8 +4,8 @@ env:
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
 on:
   # Trigger the workflow on push or pull request,
- # push:
+  # push:
- #   branches: [main, stable]
+  #   branches: [main, stable]
   pull_request:
     # These types of PRs
     types: [opened, synchronize, reopened]
@@ -13,6 +13,26 @@ 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

.github/workflows/vercel-production.yaml

@@ -10,8 +10,28 @@ on:
 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"

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,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+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.27.0",
+    "@chakra-ui/react": "^3.30.0",
     "@emotion/react": "^11.14.0",
-    "next": "15.5.3",
+    "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.35.0",
+    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.10.1",
-    "@types/react": "^19.1.13",
+    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.1.9",
+    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.44.0",
+    "@typescript-eslint/parser": "^8.48.1",
-    "eslint": "^9.35.0",
+    "eslint": "^9.39.1",
-    "eslint-config-next": "15.5.3",
+    "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.44.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,27 +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>
-      <meta name="theme-color" content="#00ffff" />
+      <meta
-      <link rel="icon" href="/images/logo/favicon/favicon.ico" sizes="any" />
+        property="title"
-      <link
+        content={
-        rel="apple-touch-icon"
+          typeof metadata.title === "string"
-        href="/images/logo/favicon/apple-touch-icon.png"
+            ? metadata.title
-        sizes="any"
+            : "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" content="/images/logo/new-logo.png" />
-      <meta property="image:type" content="image/png" />
-      <meta property="image:width" content="653px" />
       <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

@@ -9,6 +9,16 @@ export const metadata: Metadata = {
     "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
@@ -18,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" />
@@ -25,7 +36,7 @@ export default function Home() {
           lineHeight="1"
           w="80vw"
           as="h1"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="4rem"
           textAlign="center"
         >
@@ -35,7 +46,7 @@ export default function Home() {
           lineHeight="1"
           w="80vw"
           as="h2"
-          color="cyan.600"
+          color={colorScheme.secondary}
           fontSize="2rem"
           textAlign="center"
         >
@@ -64,7 +75,7 @@ export default function Home() {
         </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 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 isn't pertinent enough to mention here."
+            "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">
@@ -87,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"
@@ -96,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://social.werewolfkid.monster/gumroad/"
+          >
-            >
+            <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"
@@ -118,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://social.werewoldkid.monster/discord"
+          >
-            >
+            <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"
@@ -158,38 +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://werewolfkid.monster/"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
-              {"Werewolf Kid Website"}
-            </Link>
-          </Button>
-          <Button variant="solid" bgColor="teal" fontSize="xl">
-            <Link
-              target="_blank"
-              color="whiteAlpha.950"
-              href="http://social.werwolfkid.com/bsky"
-            >
               {"Bsky"}
-            </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}fa`}
-              href="http://social.werwolfkid.com/fa"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"FurAffinity"}
-            </Link>
+            </Button>
-          </Button>
+          </Link>
         </HStack>
 
         <Heading
-          as="h5"
+          as="h3"
-          color="cyan"
+          color={colorScheme.primary}
           fontSize="2.5rem"
           textAlign="center"
           lineHeight="1"
@@ -198,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://social.werewolfkid.monster/twitch"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Twitch"}
-            </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}yt-vods`}
-              href="http://social.werewolfkid.monster/yt-vods"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"YouTube VODs"}
-            </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}yt-archives`}
-              href="http://social.werewolfkid.monster/yt-archives"
+          >
-            >
+            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"YouTube Archives"}
-            </Link>
+            </Button>
-          </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"
+  ]
 }