update all depends

Reviewed-on: #23

.gitea/workflows/upload-image.yaml

@@ -14,14 +14,14 @@ on:
 
 jobs:
   docker:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Get branch name
         id: branch-name
-        uses: tj-actions/branch-names@v7
+        uses: tj-actions/branch-names@v8
 
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Restore Docker Cache
         uses: actions/cache@v3
@@ -39,10 +39,10 @@ jobs:
           echo "Done"
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to Repo
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.REPO_USERNAME }}
           password: ${{ secrets.REPO_TOKEN }}
@@ -55,7 +55,7 @@ jobs:
           key: ${{ runner.os }}-buildx
 
       - name: Build and Push (Latest)
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         if: steps.branch-name.outputs.current_branch == 'master'
         with:
           push: true
@@ -65,7 +65,7 @@ jobs:
           cache-to: type=local,dest=/tmp/.buildx-cache
 
       - name: Build and Push (Other Branches)
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         if: steps.branch-name.outputs.current_branch != 'master'
         with:
           push: true

.gitignore

@@ -145,4 +145,4 @@ dist
 .pnp.*
 
 # Config
-config.json
+config.yml

Dockerfile

@@ -1,15 +1,12 @@
-FROM node:lts-slim
+FROM fascinated/docker-images:node-pnpm-latest
 
 ENV NODE_ENV=production
 WORKDIR /usr/src/app
 
-RUN apt update
-RUN DEBIAN_FRONTEND=noninteractive apt install wget -y
-
 # Copy package.json and package-lock.json separately to fully utilize Docker layer caching
 COPY package.json ./
-COPY package-lock.json ./
-RUN npm ci --production --silent && npm cache clean --force
+COPY pnpm-lock.yaml ./
+RUN pnpm install --production --silent
 
 # Opt out of Next.js telemetry
 RUN npx next telemetry disable
@@ -17,9 +14,6 @@ RUN npx next telemetry disable
 # Copy the rest of the files
 COPY . .
 
-# Remove development dependencies
-RUN npm prune --production
-
 # Environment Variables
 ENV NODE_ENV=production
 

README.md

@@ -29,6 +29,10 @@ Simple Links is a lightweight alternative to Linktree and others.
 3. Run `docker compose up -d`
 4. The application is now updated
 
+## Support
+
+If you need any help, you can contact me on my Discord server [here](https://discord.gg/yjj2U3ctEG) or open a issue!
+
 ## What if I don't want buttons or icon only links?
 
 Just simply remove it from the config and it will not show anymore
@@ -36,103 +40,3 @@ Just simply remove it from the config and it will not show anymore
 ## Showing Discord status
 
 You must be in the [lanyard server](https://discord.gg/UrXF2cfJ7F) for it to work.
-
-## Help!!! I'm getting an error when launching it
-
-### Config Issue
-
-If your error looks similar to this you are most likely missing part of the config, as some new things may have been added.
-
-```bash
-simple-links | Type error: Property 'theme' does not exist on type '{ name: string; description: string; avatar: string; background: { showBackground: boolean; blur: boolean; darken: { enabled: boolean; amount: number; }; backgroundImage: string; }; infoCard: { transparency: number; }; metadata: { ...; }; options: { ...; }; analytics: { ...; }; links: { ...; }[]; }'.
-```
-
-## Config Example
-
-```json
-{
-  "name": "Your Name", // The name you want to display on the site
-  "description": "A description about yourself", // The description you want to use
-  "avatar": "https://cdn.fascinated.cc/KWprz2.jpg", // The avatar that is shown at the top of the site
-  // or use a local image
-  "avatar": "/avatar.webp",
-  // If you want to use a custom (not dark) background
-  "background": {
-    "showBackground": true, // Whether it is enabled or not
-    "blur": true, // Should we blur the background?
-    "darken": {
-      // Should we darken the background?
-      "enabled": true,
-      "amount": 0.7
-    },
-    "backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg", // The image to use in the background
-    // or use a local image
-    "backgroundImage": "/background.jpg"
-  },
-  "theme": "dark", // "dark" or "light" themes
-  // The card that displays your info and buttons
-  "infoCard": {
-    "transparency": 0.85 // How transparent should it be?
-  },
-  // Website options
-  "options": {
-    "showSourceLink": true // Should we show the "Source Code" link
-  },
-  // Show your discord status on the site (You MUST be in the Lanyard server)
-  // https://discord.gg/UrXF2cfJ7F
-  "discord": {
-    "id": "474221560031608833" // Your discord ID
-  },
-  // Search engine and embedding metadata (discord, twitter, etc embeds)
-  "metadata": {
-    "title": "Your Name", // The title of the embed
-    "description": "website description", // The description of the embed
-    "themeColor": "#6441a5", // The color of the embed
-    "authors": [
-      // SEO metadata
-      {
-        "name": "Fascinated",
-        "url": "https://fascinated.cc"
-      }
-    ]
-  },
-  // The buttons to show links for
-  "links": [
-    {
-      "title": "Git", // The shown title of the button
-      "url": "https://git.fascinated.cc", // Where the button goes to when clicked
-      "icon": "fab fa-github", // The icon of the button (can be removed to show no icon)
-      // The color of the icon (tailwindcss colors)
-      "color": "bg-green-700"
-    },
-    {
-      "title": "Twitch",
-      "url": "https://twitch.tv/fascinated_",
-      "icon": "fab fa-twitch",
-      "color": "bg-[#6441a5]"
-    },
-    {
-      "title": "Documentation",
-      "url": "https://docs.fascinated.cc",
-      "color": "bg-neutral-700"
-    }
-  ],
-  // Icon only links
-  "socialLinks": [
-    {
-      "icon": "fab fa-twitter", // The icon to use
-      "color": "#1DA1F2", // An optional color
-      "url": "https://twitter.com" // The link to go to
-    },
-    {
-      "icon": "fab fa-reddit",
-      "color": "#FF4300",
-      "url": "https://www.reddit.com/user/ImFascinatedMC"
-    },
-    {
-      "icon": "fab fa-git-alt",
-      "url": "https://git.fascinated.cc"
-    }
-  ]
-}
-```

config-example.json

@@ -1,73 +0,0 @@
-{
-  "configVersion": "0.1.4",
-  "name": "Your Name",
-  "description": "A description about yourself",
-  "avatar": "/avatar.webp",
-  "background": {
-    "showBackground": true,
-    "blur": true,
-    "darken": {
-      "enabled": true,
-      "amount": 0.7
-    },
-    "backgroundImage": "/background.jpg"
-  },
-  "theme": "dark",
-  "infoCard": {
-    "transparency": 0.85
-  },
-  "discord": {
-    "id": "set me"
-  },
-  "options": {
-    "showSourceLink": true
-  },
-  "metadata": {
-    "title": "Your Name",
-    "description": "website description",
-    "themeColor": "#6441a5",
-    "authors": [
-      {
-        "name": "Fascinated",
-        "url": "https://fascinated.cc"
-      }
-    ]
-  },
-  "links": [
-    {
-      "title": "Git",
-      "url": "https://git.fascinated.cc",
-      "icon": "fab fa-git-alt",
-      "color": {
-        "normal": "bg-green-700"
-      }
-    },
-    {
-      "title": "Twitch",
-      "url": "https://twitch.tv/fascinated_",
-      "icon": "fab fa-twitch",
-      "color": "bg-[#6441a5]"
-    },
-    {
-      "title": "Documentation",
-      "url": "https://docs.fascinated.cc",
-      "color": "bg-neutral-700"
-    }
-  ],
-  "socialLinks": [
-    {
-      "icon": "fab fa-twitter",
-      "color": "#1DA1F2",
-      "url": "https://twitter.com"
-    },
-    {
-      "icon": "fab fa-reddit",
-      "color": "#FF4300",
-      "url": "https://www.reddit.com/user/ImFascinatedMC"
-    },
-    {
-      "icon": "fab fa-git-alt",
-      "url": "https://git.fascinated.cc"
-    }
-  ]
-}

config-example.yml

@@ -0,0 +1,75 @@
+# The version of the config (DO NOT CHANGE)
+configVersion: "0.2.0"
+# Your name to show in the info card
+name: "Your Name"
+# The description shown in the info card
+description: "A description about yourself"
+# The avatar to show
+avatar: "/avatar.webp"
+# Background configuration
+background:
+  # Should we use a custom background?
+  showBackground: true
+  # Should we blur that background?
+  blur: true
+  # Should we darken that background? and by how much
+  darken:
+    enabled: true
+    amount: 0.7
+  # The image to show when the background is enabled
+  backgroundImage: "/background.jpg"
+# The theme to use (light or dark)
+theme: "dark"
+# The info card settings
+infoCard:
+  # How transparent should it be?
+  transparency: 0.85
+# Discord settings (Status indicator)
+discord:
+  # Your discord id
+  id: "set me"
+# Global settings for the site
+options:
+  # Should we show the "Website Source" button?
+  showSourceLink: true
+# Metadata for the website (controls embed settings and SEO info)
+# see: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
+metadata:
+  title: "Your Name"
+  description: "website description"
+  themeColor: "#6441a5"
+  authors:
+    - name: "Fascinated"
+      url: "https://fascinated.cc"
+# The links to show (buttons)
+links:
+  # The title of the button
+  - title: "Git"
+    # Where the button goes to
+    url: "https://git.fascinated.cc"
+    # The icon of the button
+    # see: https://fontawesome.com/search
+    icon: "fab fa-git-alt"
+    # The color of the button (TailwindCSS colors or hex color, see below for hex)
+    color: "bg-green-700"
+  - title: "Twitch"
+    url: "https://twitch.tv/fascinated_"
+    icon: "fab fa-twitch"
+    color: "bg-[#6441a5]"
+  - title: "Documentation"
+    url: "https://docs.fascinated.cc"
+    color: "bg-neutral-700"
+# The links to show (icons only, below buttons)
+socialLinks:
+  # The icon to use
+  # see: https://fontawesome.com/search
+  - icon: "fab fa-twitter"
+    # The color of the icon
+    color: "#1DA1F2"
+    # Where the icon goes to when clicked
+    url: "https://twitter.com"
+  - icon: "fab fa-reddit"
+    color: "#FF4300"
+    url: "https://www.reddit.com/user/ImFascinatedMC"
+  - icon: "fab fa-git-alt"
+    url: "https://git.fascinated.cc"

docker-compose.yml

@@ -13,5 +13,5 @@ services:
     ports:
       - 3000:3000
     volumes:
-      - ./config.json:/usr/src/app/config.json:ro # The application config (Must be created before starting the service)
+      - ./config.yml:/usr/src/app/config.yml:ro # The application config (Must be created before starting the service)
       - ./public:/usr/src/app/public:rw # Used for public facing images (eg: avatar and background)

next.config.js

@@ -1,3 +1,5 @@
+const withYaml = require("next-plugin-yaml");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -12,4 +14,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withYaml(nextConfig);

package.json

@@ -1,32 +1,35 @@
 {
   "name": "simple-links",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "private": false,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next build && next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "update-depends": "npm-check -u"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@types/node": "20.4.1",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.44.0",
-    "eslint-config-next": "13.4.9",
-    "next": "13.4.9",
-    "postcss": "8.4.25",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "sharp": "^0.32.2",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.6",
-    "use-lanyard": "^1.4.4"
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.1",
+    "eslint-config-next": "^14.2.7",
+    "next": "^14.2.7",
+    "next-plugin-yaml": "^1.0.1",
+    "npm-check": "^6.0.1",
+    "postcss": "^8.4.41",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "sharp": "^0.33.5",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "use-lanyard": "^1.5.2"
   }
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "local>Fascinated/renovate-config"
+  ]
+}

src/app/components/Avatar.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { Config } from "@/src/types/config";
 import Image from "next/image";
 import { Fragment } from "react";
 import { useLanyardWS } from "use-lanyard";
 
-import Config from "../../../config.json";
+const config: Config = require("../../../config.yml") as any;
 
 function LanyardWrapper(props: { children: any }) {
   return <Fragment>{props.children}</Fragment>;
@@ -12,7 +13,7 @@ function LanyardWrapper(props: { children: any }) {
 
 export default function Avatar(props: any) {
   const { avatar } = props;
-  const { discord }: any = Config;
+  const { discord }: any = config;
 
   return (
     <div className="relative inline-block">
@@ -39,10 +40,10 @@ function LanyardComponent(props: { discord: any }) {
   const hasLanyard = lanyardData !== undefined;
 
   const statusColor = {
-    online: "bg-green-400",
-    offline: "bg-slate-400",
-    dnd: "bg-red-500",
-    idle: "bg-orange-400",
+    online: "bg-[#43B581]",
+    offline: "bg-transparent",
+    dnd: "bg-[#F04747]",
+    idle: "bg-[#FAA61A]",
   };
   const currentStatus =
     lanyardData !== undefined

src/app/layout.tsx

@@ -1,20 +1,18 @@
-import { config } from "@fortawesome/fontawesome-svg-core";
+import { Config } from "@/src/types/config";
+import { config as fontAwesomeConfig } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ReactNode } from "react";
 
-import Config from "../../config.json";
-config.autoAddCss = false;
+const config: Config = require("../../config.yml") as any;
+fontAwesomeConfig.autoAddCss = false;
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata = Config.metadata; // Site metadata from the config
+export const metadata = config.metadata; // Site metadata from the config
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

src/app/page.tsx

@@ -1,12 +1,15 @@
+import { Config } from "@/src/types/config";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fab } from "@fortawesome/free-brands-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
-import Config from "../../config.json";
+import Link from "next/link";
 import Avatar from "./components/Avatar";
 
+const config: Config = require("../../config.yml") as any;
+
 library.add(fab, far, fas); // Loading in the icons from FontAwesome
 
 export default function Home() {
@@ -20,7 +23,7 @@ export default function Home() {
     options,
     description,
     theme,
-  } = Config; // All of the settings pulled from the config file
+  } = config; // All the settings pulled from the config file
 
   // Theme colors to use when using the selected theme
   // all used colors are from TailwindCSS
@@ -51,29 +54,26 @@ export default function Home() {
   const selectedTheme = themeColors[theme] || themeColors.dark; // The theme to use (fallback of dark)
 
   return (
-    <>
+    <div className={"relative"}>
+      {/* Background Image */}
+      {background.showBackground && background.backgroundImage && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          alt="Background image"
+          src={background.backgroundImage}
+          className={`absolute z-0 object-cover w-full h-full ${background.blur && "blur-sm"} brightness-${background.darken.enabled && background.darken.amount / 2}`}
+        />
+      )}
+
       <main
         className={`flex flex-col items-center justify-center w-screen h-screen ${selectedTheme.backgroundColor} ${selectedTheme.textColor}`}
       >
-        {/* Background Image */}
-        {background.showBackground && background.backgroundImage && (
-          <Image
-            alt="Background image"
-            src={background.backgroundImage}
-            fill={true}
-            style={{
-              zIndex: 0,
-              filter: `${background.blur && "blur(4px)"} brightness(${
-                background.darken.enabled && background.darken.amount / 2
-              })`,
-            }}
-          />
-        )}
+        {/* Info Card */}
         <div
-          className={`${selectedTheme.infoCardColor} rounded-lg text-center shadow-lg`}
+          className={`${infoCard.transparency != 0 && `${selectedTheme.infoCardColor} shadow-lg rounded-lg`} text-center`}
           style={{
             zIndex: 1,
-            opacity: infoCard.transparency,
+            opacity: infoCard.transparency != 0 ? infoCard.transparency : 1,
           }}
         >
           <div className="m-5">
@@ -106,7 +106,13 @@ export default function Home() {
                       target="_blank"
                       rel="noopener noreferrer"
                       className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded
-                      ${selectedTheme.buttonTextColor} ${color} hover:brightness-75 transition gap-2`}
+                      ${selectedTheme.buttonTextColor} ${color} hover:brightness-75 transition gap-2 shadow-lg`}
+                      style={{
+                        opacity:
+                          infoCard.transparency != 0
+                            ? infoCard.transparency
+                            : 0.8,
+                      }}
                     >
                       {link.icon && <FontAwesomeIcon icon={icons} />}
                       <p>{link.title}</p>
@@ -127,7 +133,13 @@ export default function Home() {
                       href={link.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="hover:brightness-75 transition"
+                      className="hover:brightness-75 transition shadow-lg"
+                      style={{
+                        opacity:
+                          infoCard.transparency != 0
+                            ? infoCard.transparency
+                            : 0.8,
+                      }}
                     >
                       {link.icon && (
                         <FontAwesomeIcon
@@ -148,16 +160,21 @@ export default function Home() {
           className={`absolute bottom-0 right-0 mb-5 mr-5 ${selectedTheme.footerTextColor}`}
         >
           {options.showSourceLink && (
-            <a
+            <Link
               href="https://git.fascinated.cc/Fascinated/simple-links"
               target="_blank"
               className="mt-5"
             >
-              Website Source
-            </a>
+              <Image
+                src="https://cdn.fascinated.cc/assets/simple-links/icon.png"
+                alt="Simple Links Icon"
+                width={32}
+                height={32}
+              />
+            </Link>
           )}
         </div>
       </main>
-    </>
+    </div>
   );
 }

src/types/config.d.ts

@@ -0,0 +1,55 @@
+export interface Config {
+  configVersion: string;
+  name: string;
+  description: string;
+  avatar: string;
+  background: {
+    showBackground: boolean;
+    blur: boolean;
+    darken: {
+      enabled: boolean;
+      amount: number;
+    };
+    backgroundImage: string;
+  };
+  theme: string;
+  infoCard: {
+    transparency: number;
+  };
+  discord: {
+    id: string;
+  };
+  options: {
+    showSourceLink: boolean;
+  };
+  metadata: {
+    title: string;
+    description: string;
+    themeColor: string;
+    authors: {
+      name: string;
+      url: string;
+    }[];
+  };
+  links: {
+    title: string;
+    url: string;
+    icon: string;
+    color:
+      | {
+          normal: string;
+        }
+      | string;
+  }[];
+  socialLinks: {
+    icon: string;
+    color: string;
+    url: string;
+  }[];
+}
+
+// Parse the YAML content and convert it to the defined type
+declare module "*.yml" {
+  const content: any;
+  export default content;
+}

start.sh

@@ -1,7 +1,7 @@
 workDir=/usr/src/app
 
 baseUrl=https://git.fascinated.cc/Fascinated/simple-links/raw/branch/master/public/
-toDownload=("avatar.webp" "background.jpg")
+toDownload=("avatar.webp" "background.jpg" "favicon.ico")
 
 echo "Checking if files need to be downloaded"
 if [ -z "$(ls -A $workDir/public)" ]; then

tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./config.json",
+    "./config.yml",
   ],
   theme: {},
   plugins: [],

tsconfig.json

@@ -21,8 +21,16 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "typeRoots": ["./src/types", "./node_modules/@types"],
+    "types": ["node"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "src/types/**/*.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }