update

.dockerignore

@@ -1,2 +1 @@
-.DS_Store
-node_modules
+.DS_Store

Dockerfile

@@ -1,13 +1,11 @@
-FROM codeberg.org/korbs/bun:amd64 AS runtime
+FROM node:lts AS runtime
 WORKDIR /app
 
 COPY . .
 
-RUN bun install
-RUN bun run build
+RUN npm run build
 
 ENV HOST=0.0.0.0
 ENV PORT=4321
-ENV SKIP_KEYSTATIC=true
 EXPOSE 4321
-CMD bun ./dist/server/entry.mjs
+CMD node ./dist/server/entry.mjs

bunfig.toml

@@ -0,0 +1,3 @@
+# Flurry and Zorn are on SudoVanilla Packages
+[install]
+registry = "https://npm.sudovanilla.org"

package.json

@@ -20,9 +20,9 @@
     "@iconoir/vue": "^7.9.0",
     "@keystatic/astro": "^5.0.2",
     "@keystatic/core": "^0.5.38",
-    "@meilisearch/instant-meilisearch": "^0.21.0",
+    "@meilisearch/instant-meilisearch": "^0.21.1",
     "@minpluto/zorn": "^0.4.51",
-    "astro": "^4.16.5",
+    "astro": "^4.16.6",
     "astro-auto-import": "^0.4.4",
     "astro-color-mode": "^0.7.1",
     "astro-json-element": "^1.1.4",
@@ -36,6 +36,6 @@
     "vue": "^3.5.12"
   },
   "devDependencies": {
-    "sass": "^1.79.5"
+    "sass": "^1.80.3"
   }
 }

src/components/Feature.astro

@@ -1,4 +1,5 @@
 ---
+// Properties
 const {
   Title,
   Description,
@@ -11,8 +12,12 @@ const {
   CTA_Secondary_Link,
   Label,
   LabelVarient,
-  Custom
+  Custom,
+  CreditImage
 } = Astro.props;
+
+// Icons
+import { InfoCircle } from "@iconoir/vue";
 ---
 
 <div class="large-card">
@@ -43,6 +48,7 @@ const {
   </div>
   <div class="lc-end">
     {Custom ? <slot/> : <img loading="lazy" src={Image} alt={ImageAlt} style={ImageProperties} />}
+    {CreditImage ? <InfoCircle title={CreditImage} id="video-credit-js" width={16} height={16} /> : null}
   </div>
 </div>
 
@@ -63,7 +69,12 @@ const {
         flex-direction: column-reverse;
       }
       img {
-        box-shadow: 20px 20px 0px 0px #13151a;
+        box-shadow: 10px 10px 0px 0px #13151a;
+        transition: 1s box-shadow;
+        &:hover {
+          box-shadow: 20px 20px 0px 0px #13151a;
+          transition: 1s box-shadow;
+        }
       }
     }
     &:nth-child(5) {
@@ -72,7 +83,12 @@ const {
         flex-direction: column-reverse;
       }
       img {
-        box-shadow: 20px 20px 0px 0px #13151a;
+        box-shadow: 10px 10px 0px 0px #13151a;
+        transition: 1s box-shadow;
+        &:hover {
+          box-shadow: 20px 20px 0px 0px #13151a;
+          transition: 1s box-shadow;
+        }
       }
     }
     &:nth-child(7) {
@@ -81,7 +97,12 @@ const {
         flex-direction: column-reverse;
       }
       img {
-        box-shadow: 20px 20px 0px 0px #13151a;
+        box-shadow: 10px 10px 0px 0px #13151a;
+        transition: 1s box-shadow;
+        &:hover {
+          box-shadow: 20px 20px 0px 0px #13151a;
+          transition: 1s box-shadow;
+        }
       }
     }
     &:nth-child(9) {
@@ -90,7 +111,12 @@ const {
         flex-direction: column-reverse;
       }
       img {
-        box-shadow: 20px 20px 0px 0px #13151a;
+        box-shadow: 10px 10px 0px 0px #13151a;
+        transition: 1s box-shadow;
+        &:hover {
+          box-shadow: 20px 20px 0px 0px #13151a;
+          transition: 1s box-shadow;
+        }
       }
     }
     &:nth-child(11) {
@@ -99,7 +125,12 @@ const {
         flex-direction: column-reverse;
       }
       img {
-        box-shadow: 20px 20px 0px 0px #13151a;
+        box-shadow: 10px 10px 0px 0px #13151a;
+        transition: 1s box-shadow;
+        &:hover {
+          box-shadow: 20px 20px 0px 0px #13151a;
+          transition: 1s box-shadow;
+        }
       }
     }
     .lc-start {
@@ -142,10 +173,25 @@ const {
         color: black !important;
       }
     }
+    .lc-end {
+      position: relative;
+      #video-credit-js {
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        margin: 24px;
+        padding: 12px;
+      }
+    }
     img {
       border-radius: 10px;
       width: 100%;
-      box-shadow: -20px 20px 0px 0px #13151a;
+      box-shadow: -10px 10px 0px 0px #13151a;
+      transition: 1s box-shadow;
+      &:hover {
+        box-shadow: -20px 20px 0px 0px #13151a;
+        transition: 1s box-shadow;
+      }
     }
   }
 </style>

src/components/Hero.astro

@@ -49,6 +49,7 @@ import { InfoCircle } from "@iconoir/vue";
       font-size: 10px;
       opacity: 0.8;
       margin: 32px;
+      padding: 12px;
       a {
         color: white;
       }

src/pages/index.astro

@@ -37,6 +37,14 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
         <ReportColumns width={32} height={32} />
       </slot>
     </Heading>
+    <LargeCard
+      Title="ButterflyVu"
+      Description="Documention Site"
+      Image="https://md.sudovanilla.org/images/pexels-pixabay-326055.jpg"
+      CTA_Primary="Source Code"
+      CTA_Primary_Link="https://ark.sudovanilla.org/Korbs/butterflyvu"
+      CreditImage="Close-up Photo of Glowing Blue Butterflies by Pixabay on Pixels."
+    />
     <LargeCard
       Title="MinPluto"
       Description="Yet Another YouTube Frontend"
@@ -50,19 +58,13 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
       Image="https://md.sudovanilla.org/images/Screenshot%20from%202024-08-27%2001-41-34.png"
       CTA_Primary="Documentation"
       CTA_Primary_Link="/docs/zorn/introduction/"
-      Custom
-    >
-    <Zorn
-      Title="Ennie and Yoyki: Non-Girly Games"
-      Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
-      Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
-      Milieu
-    ></Zorn>
-    </LargeCard>
+    />
     <LargeCard
       Title="Init Privacy"
       Description="Taking Back Control"
       Image="https://md.sudovanilla.org/images/smartmockups_lvh9a29d.jpg"
+      Label="Development Paused"
+      LabelVarient="Warning"
       CTA_Primary="View"
       CTA_Primary_Link="/init/"
     />

src/styles/index.scss

@@ -57,6 +57,7 @@ body {
     color: white;
     background: black;
     cursor: default;
+    transition: 1s color, 1s background;
     mobilebar {
         display: none;
     }