latest updates

.dockerignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

Dockerfile

@@ -0,0 +1,34 @@
+FROM node:lts AS base
+WORKDIR /app
+
+# By copying only the package.json and package-lock.json here, we ensure that the following `-deps` steps are independent of the source code.
+# Therefore, the `-deps` steps will be skipped if only the source code changes.
+COPY package.json pnpm-lock.yaml ./
+
+RUN corepack enable
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store pnpm fetch --frozen-lockfile
+RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store pnpm install --frozen-lockfile --prod
+ 
+
+
+
+FROM base AS build-deps
+RUN pnpm install
+
+FROM build-deps AS build
+COPY . .
+RUN pnpm run build
+
+FROM base AS runtime
+COPY --from=prod-deps /app/node_modules ./node_modules
+COPY --from=build /app/dist ./dist
+
+ENV HOST=0.0.0.0
+ENV PORT=4321
+EXPOSE 4321
+CMD node ./dist/server/entry.mjs

config.yaml

@@ -1,13 +1,15 @@
 title: Gallery
 description: this is a very long description so i can test if my css for this works fine 
 icon: /avatar.jpg
-background: /bg.png
+background: /background.png
+socialIcons: true
 socials:
-  - name: bsky
+  - name: bluesky
     url: https://lio.to/bluesky
   - name: twitter
     url: https://lio.to/twitter
   - name: furaffinity
-    url: https://lio.to/bluesky
+    url: https://lio.to/furaffinity
+    icon: paw
   - name: mastodon
     url: https://lio.to/mastodon

src/components/IndexSidebar.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import config from "../../config.yaml";
-import SocialCard from "./SocialCard.astro";
+import Social from "./Social.astro";
 const {} = Astro.props;
 ---
 
@@ -29,15 +29,16 @@ const {} = Astro.props;
         id="socials"
         class="flex gap-4 columns-2 md:columns-4  pt-4"
       >
-        {
-          config.socials &&
-            config.socials.map((s) => (
-              <a href={s.url} target="_blank">
-                {/* <img src={s.icon} alt={s.name} /> */}
-                <span class="hover:underline">{s.name}</span>
-              </a>
-            ))
-        }
+      {
+        config.socials &&
+          config.socials.map((s) => (
+            <Social href={s.url} text={s.name} icon={s.icon} />
+          // <a href={s.url} target="_blank" rel="noopener noreferrer">
+            //   {/* <img src={s.icon} alt={s.name} /> */}
+            //   <span class="">{s.name}</span>
+            // </a>
+          ))
+      }
       </div>
       <!-- Links to Subpages -->
       <br />

src/components/Sidebar.astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import config from "../../config.yaml";
+import Social from "./Social.astro";
 const {} = Astro.props;
 ---
 
@@ -24,10 +25,11 @@ const {} = Astro.props;
     {
       config.socials &&
         config.socials.map((s) => (
-          <a href={s.url} target="_blank" rel="noopener noreferrer">
-            {/* <img src={s.icon} alt={s.name} /> */}
-            <span class="">{s.name}</span>
-          </a>
+          <Social href={s.url} text={s.name} image={s.icon} alt={s.name} />
+        // <a href={s.url} target="_blank" rel="noopener noreferrer">
+          //   {/* <img src={s.icon} alt={s.name} /> */}
+          //   <span class="">{s.name}</span>
+          // </a>
         ))
     }
     <br />

src/components/Social.astro

@@ -0,0 +1,19 @@
+---
+import config from "../../config.yaml";
+const { href, text, icon } = Astro.props;
+---
+
+{
+  config.socialIcons && (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      <i class={`fa-brands fa-${icon ? icon : text.toLowerCase()}`} />
+    </a>
+  )
+}
+{
+  !config.socialIcons && (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      <i class={`fa-brands fa-${icon ? icon : text.toLowerCase()}`} />
+    </a>
+  )
+}

src/components/SocialCard.astro

@@ -1,18 +0,0 @@
----
-const { href, text, image, alt } = Astro.props;
----
-
-<div class="relative bg-black max-w-xl mx-auto mt-10 h-16">
-  <a href={href} class="block">
-    {
-      image && (
-        <img class="h-16 object-cover rounded-md" src={image} alt={alt} />
-      )
-    }
-
-    <div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div>
-    <div class="absolute inset-0 flex items-center justify-center">
-      <h2 class="text-white text-3xl font-bold">{text}</h2>
-    </div>
-  </a>
-</div>

src/config.d.ts

@@ -1,5 +1,6 @@
 declare module "*config.yaml" {
   const value: {
+    [x: string]: any;
     title?: string;
     description?: string;
     icon?: string;
@@ -18,6 +19,7 @@ declare module "*config.yml" {
     description?: string;
     icon?: string;
     background?: string;
+    socialIcons?: boolean;
     socials: {
       name: string;
       link: string;

src/layouts/Index.astro

@@ -9,6 +9,7 @@ import config from "../../config.yaml";
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <meta name="generator" content={Astro.generator} />
     <title>{config.title}</title>
   </head>