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

@@ -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 { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-import jsxA11y from "eslint-plugin-jsx-a11y";
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
 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 __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+const eslintConfig = defineConfig([
+  ...nextVitals,
   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",
-  "homepage": "https://new.lucidcreations.media/",
-  "version": "0.1.0",
+  "name": "werewolf-kid-creations-website",
+  "homepage": "https://werewolfkid.monster/",
+  "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-dom": "^19.1.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.35.0",
-    "@types/node": "^24.5.2",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
-    "eslint": "^9.35.0",
-    "eslint-config-next": "15.5.3",
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "eslint": "^9.39.1",
+    "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",
-    "prettier": "3.6.2",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.0"
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "3.7.4",
+    "typescript": "^5.9.3",
+    "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

@@ -24,11 +24,6 @@ export default function RootLayout(props: { children: React.ReactNode }) {
       <meta property="image" content="/images/logo/new-logo.png" />
       <meta property="image:type" content="image/png" />
       <meta property="image:width" content="653px" />
-      <link
-        rel="apple-touch-icon"
-        href="/images/logo/favicon/apple-touch-icon.png"
-        sizes="any"
-      />
       <meta
         property="og:title"
         content={
@@ -77,6 +72,18 @@ export default function RootLayout(props: { children: React.ReactNode }) {
       <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

@@ -12,11 +12,13 @@ export const metadata: Metadata = {
 const colorScheme = {
   primary: "cyan",
   secondary: "cyan.600",
-  bg: "cyan.950",
+  bg: "teal.950",
   button: "#5bbdbc",
   buttonText: "gray.950"
 };
 
+const socialSubdomain = "https://social.werewolfkid.monster/";
+
 export default function Home() {
   return (
     <VStack
@@ -108,7 +110,7 @@ export default function Home() {
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="http://social.werewolfkid.monster/gumroad/"
+            href={`${socialSubdomain}gumroad`}
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Gumroad"}
@@ -130,7 +132,7 @@ export default function Home() {
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="https://community.lucidcreations.media/"
+            href="https://community.werewolfkid.monster/"
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"The Cove"}
@@ -148,7 +150,7 @@ export default function Home() {
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="http://social.werewoldkid.monster/discord"
+            href={`${socialSubdomain}discord`}
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Discord Server"}
@@ -167,19 +169,10 @@ export default function Home() {
         </Heading>
 
         <HStack gap="6" wrap="wrap" justifyContent="center">
-          {/* <Link
-            target="_blank"
-            color={colorScheme.buttonText}
-            href="https://werewolfkid.monster/"
-          >
-            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
-              {"Werewolf Kid Website"}
-            </Button>
-          </Link> */}
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="http://social.werwolfkid.com/bsky"
+            href={`${socialSubdomain}bsky`}
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Bsky"}
@@ -188,7 +181,7 @@ export default function Home() {
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="http://social.werwolfkid.com/fa"
+            href={`${socialSubdomain}fa`}
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"FurAffinity"}
@@ -210,7 +203,7 @@ export default function Home() {
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="http://social.werewolfkid.monster/twitch"
+            href={`${socialSubdomain}twitch`}
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"Twitch"}
@@ -219,7 +212,7 @@ export default function Home() {
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="http://social.werewolfkid.monster/yt-vods"
+            href={`${socialSubdomain}yt-vods`}
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"YouTube VODs"}
@@ -228,7 +221,7 @@ export default function Home() {
           <Link
             target="_blank"
             color={colorScheme.buttonText}
-            href="http://social.werewolfkid.monster/yt-archives"
+            href={`${socialSubdomain}yt-archives`}
           >
             <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
               {"YouTube Archives"}

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"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }