Improved docker workflow

Dockerfile

@@ -1,5 +1,7 @@
 FROM node:21-alpine AS base
 
+ENV NODE_ENV production
+
 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
@@ -9,8 +11,9 @@ WORKDIR /app
 # Install dependencies based on the preferred package manager
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
 RUN \
-  if [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then npm install --global pnpm && pnpm i --frozen-lockfile; \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
   else echo "Lockfile not found." && exit 1; \
   fi
 
@@ -27,8 +30,6 @@ RUN npm run build
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV production
-
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 solidjs
 
@@ -37,8 +38,6 @@ COPY --from=builder /app/public ./public
 COPY --from=builder --chown=solidjs:nodejs /app/.output ./.output
 COPY --from=builder --chown=solidjs:nodejs /app/.vinxi ./.vinxi
 
-RUN npm install vinxi
-
 USER solidjs
 
 EXPOSE 3000
@@ -47,4 +46,4 @@ ENV PORT 3000
 # set hostname to localhost
 ENV HOSTNAME "0.0.0.0"
 
-CMD ["npx", "vinxi", "start"]
+CMD ["node", ".output/server/index.mjs"]

docker.sh

@@ -68,7 +68,7 @@ if [ $deploy ]; then
 fi
 
 # Run Docker container in the background and capture container ID
-docker build -t $image_name .
+docker build --no-cache -t $image_name .
 
 if [ $deploy ]; then
   container_id=$(docker run --name $container_name -p 3000:3000 -d $image_name)

package.json

@@ -17,7 +17,7 @@
     "@solidjs/router": "^0.10.5",
     "@solidjs/start": "^0.4.2",
     "drizzle-orm": "^0.29.2",
-    "drizzle-zod": "^0.5.1",
+    "postgres": "^3.4.3",
     "solid-js": "^1.8.7",
     "solid-start": "^0.3.10",
     "vinxi": "0.0.62"
@@ -26,11 +26,11 @@
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "dotenv": "^16.3.1",
     "drizzle-kit": "^0.20.9",
+    "drizzle-zod": "^0.5.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-solid": "^0.13.1",
     "pg": "^8.11.3",
-    "postgres": "^3.4.3",
     "prettier": "^3.1.1",
     "prettier-plugin-organize-imports": "^3.2.4",
     "sass": "^1.69.6",

public/assets/icons/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="#ffffff" d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>

public/assets/icons/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="#ffffff" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>

public/assets/icons/external.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="#ffffff" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>

public/assets/logos/kotlin.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<g id="Logotypes">
+	<g>
+		
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="500.0035" y1="579.1058" x2="-9.653803e-02" y2="1079.2058" gradientTransform="matrix(0.9998 0 0 0.9998 9.651873e-02 -578.99)">
+			<stop offset="3.435144e-03" style="stop-color:#E44857"/>
+			<stop offset="0.4689" style="stop-color:#C711E1"/>
+			<stop offset="1" style="stop-color:#7F52FF"/>
+		</linearGradient>
+		<polygon class="st0" points="500,500 0,500 0,0 500,0 250,250   "/>
+	</g>
+</g>
+</svg>

src/components/Footer.tsx

@@ -6,7 +6,7 @@ function Footer() {
       <div class="footerIcon">
         <img
           class="footerImage"
-          src="https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"
+          src="/assets/lilJudd.png"
           alt="A cute Image of lil Judd <3"
         />
         <p>li'l Judd</p>
@@ -31,30 +31,21 @@ function Footer() {
               target="_blank"
             >
               The code of the bot{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
             <a
               href="https://git.moonleay.net/Websites/liljudd-website"
               target="_blank"
             >
               The code of the website{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
             <a
               href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban"
               target="_blank"
             >
               The todo list{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
             <a href="/acknowledgements">Acknowledgements</a>
           </div>
@@ -64,32 +55,20 @@ function Footer() {
           <div class="footerLinks">
             <a href="https://moonleay.net/">
               My homepage{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
             <a href="https://moonleay.net/blog/" target="_blank">
               My blog{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
             <a href="/contact">Contact me</a>
             <a href="https://status.moonleay.net/" target="_blank">
               Server Status{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
             <a href="https://discord.gg/HTZRktfH4A" target="_blank">
               Support Discord{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
           </div>
         </div>
@@ -104,10 +83,7 @@ function Footer() {
               target="_blank"
             >
               The license{" "}
-              <img
-                src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg"
-                alt="external link"
-              />
+              <img src="/assets/icons/external.svg" alt="external link" />
             </a>
           </div>
         </div>

src/components/NavBar.tsx

@@ -6,11 +6,7 @@ function NavBar() {
       <ul>
         <li class="navElem">
           <a class="textBx" href="/">
-            <img
-              id="logo"
-              src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
-              alt="The Bots Logo"
-            />
+            <img id="logo" src="/assets/logox256.png" alt="The Bots Logo" />
             li&apos;l Judd
           </a>
         </li>

src/entry-server.tsx

@@ -7,7 +7,7 @@ export default createHandler(() => (
         <head>
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
+          <link rel="icon" href="/assets/favicon.ico" />
           {assets}
         </head>
         <body id="app">

src/routes/[...404].tsx

@@ -7,7 +7,7 @@ export default function NotFound() {
     <>
       <Title>Not Found</Title>
       <HttpStatusCode code={404} />
-      <section class="section">
+      <section class="index">
         <h1>404 - Whoops, ink spill!</h1>
         <h5>li'l Judd couldn't find this turf.</h5>
         <div>

src/routes/about.tsx

@@ -9,10 +9,7 @@ function about() {
           <h2>Why does this bot exist?</h2>
           <p>
             We had a person in our team, who sent{" "}
-            <a
-              href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png"
-              target="_blank"
-            >
+            <a href="/assets/screenshots/oldplanningmsg.png" target="_blank">
               these planning messages
             </a>{" "}
             and I thought that this should be automated. Some time later the

src/routes/contact.tsx

@@ -7,27 +7,18 @@ function contact() {
         <h1>Contact</h1>
         <section class="contact">
           <a href="mailto:contact@moonleay.net" target="_blank">
-            <img
-              src="https://static.moonleay.net/img/lilJuddWeb/logos/email.svg"
-              alt="Email"
-            />
+            <img src="/assets/icons/email.svg" alt="Email" />
             contact@moonleay.net
           </a>
           <a
             href="https://discord.com/users/372703841151614976"
             target="_blank"
           >
-            <img
-              src="https://static.moonleay.net/img/lilJuddWeb/logos/discord.svg"
-              alt="Discord"
-            />
+            <img src="/assets/icons/discord.svg" alt="Discord" />
             @moonleay
           </a>
           <a href="https://discord.gg/HTZRktfH4A" target="_blank">
-            <img
-              src="https://static.moonleay.net/img/lilJuddWeb/logos/discord.svg"
-              alt="discord"
-            />
+            <img src="/assets/icons/discord.svg" alt="discord" />
             li'l Judd's home base
           </a>
         </section>

src/routes/features.tsx

@@ -8,28 +8,28 @@ function features() {
         <h1 class="title">Features</h1>
         <div class="gridlayout">
           <ImageSection
-            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/timeplanner.png"
+            imgUrl="/assets/screenshots/timeplanner.png"
             imgAlt="Screenshot of the time planning feature of li'l Judd"
             title="Time Planning and Management"
             description="Helps you to see on which days your fellow team mates are available."
             note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day."
           />
           <ImageSection
-            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png"
+            imgUrl="/assets/screenshots/matchplanner.png"
             imgAlt="Screenshot of the match planning feature of li'l Judd"
             title="Match Planner"
             description="Make sure that you know when your next match is and who will participate."
             note="The bot can send these planning messages, when the command /match is used. Members can click the buttons on each message to communicate, if they will participate in the match. Participating members will get a role until the match has started."
           />
           <ImageSection
-            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
+            imgUrl="/assets/screenshots/notifs.png"
             imgAlt="Screenshot of the notification feature of li'l Judd"
             title="Notifications"
             description="Make sure that you and your team members vote in the Time Planner."
             note="The bot can add roles. The first one gets pinged, when the time planner sends the messages, the other one gets assigned to the available members of the day, so that it is possible to ping all available people."
           />
           <ImageSection
-            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png"
+            imgUrl="/assets/screenshots/rotationstatus.png"
             imgAlt="Screenshot of the current x map rotation in li'l Judd's status"
             title="Rotation Status"
             description="Li'l Judd can show you the current map rotation in his status."
@@ -37,7 +37,7 @@ function features() {
           />
           <ImageSection
             span
-            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/unknown.png"
+            imgUrl="/assets/screenshots/unknown.png"
             imgAlt="A Question Mark"
             title="More to come.."
             description="The bot is still in development. More features will be added."

src/routes/how-do-i.tsx

@@ -15,12 +15,12 @@ function howDoI() {
         <div class="imgwrapper">
           <img
             class="desktop"
-            src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png"
+            src="/assets/screenshots/featureexample.png"
             alt="A screenshot of the example in Discord."
           />
           <img
             class="mobile"
-            src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexamplemobile.png"
+            src="/assets/screenshots/featureexamplemobile.png"
             alt="A screenshot of the example in Discord."
           />
           {/* <p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p> */}
@@ -36,12 +36,12 @@ function howDoI() {
         <div class="imgwrapper">
           <img
             class="desktop"
-            src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png"
+            src="/assets/screenshots/matchexample.png"
             alt="A screenshot of the example in Discord."
           />
           <img
             class="mobile"
-            src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexamplemobile.png"
+            src="/assets/screenshots/matchexamplemobile.png"
             alt="A screenshot of the example in Discord."
           />
           {/* <p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p> */}

src/routes/stack.tsx

@@ -5,10 +5,7 @@ function stack() {
     <>
       <h1 class="stack-title">The Stack</h1>
       <section class="stack-section">
-        <img
-          src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg"
-          alt="Kotlin 'K' logo"
-        />
+        <img src="/assets/logos/kotlin.svg" alt="Kotlin 'K' logo" />
         <div class="stackgrid_3 stackitm">
           <h1>The Kotlin programming language</h1>
           <p>
@@ -18,10 +15,7 @@ function stack() {
         </div>
       </section>
       <section class="stack-section">
-        <img
-          src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png"
-          alt="The Kord logo"
-        />
+        <img src="/assets/logos/kord.png" alt="The Kord logo" />
         <div class="stackgrid_3 stackitm">
           <h1>The Kord library</h1>
           <p>A Kotlin library for creating Discord bots. Pretty bare bones.</p>
@@ -29,7 +23,7 @@ function stack() {
       </section>
       <section class="stack-section">
         <img
-          src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png"
+          src="/assets/logos/kordextensions.png"
           alt="The Kord-Extensions logo"
         />
         <div class="stackgrid_3 stackitm">
@@ -38,10 +32,7 @@ function stack() {
         </div>
       </section>
       <section class="stack-section">
-        <img
-          src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png"
-          alt="The PostgreSQL elephant"
-        />
+        <img src="/assets/logos/pgelephant.png" alt="The PostgreSQL elephant" />
         <div class="stackgrid_3 stackitm">
           <h1>The PostgreSQL database</h1>
           <p>

src/styles/GlobalLayout.css

@@ -15,7 +15,7 @@
 body {
   color: rgb(var(--foreground-rgb));
   background-color: black;
-  background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/bg.jpg");
+  background-image: url("/assets/bg.jpg");
   background-repeat: repeat;
   background-size: 300px;
   background-position: center;