Merge branch 'dev'

.github/workflows/deploy.yml

@@ -122,14 +122,14 @@ jobs:
         uses: actions/checkout@v4
 
       - name: 👀 Read app name
-        uses: SebRollen/toml-action@v1.0.2
+        uses: SebRollen/toml-action@v1.2.0
         id: app_name
         with:
           file: fly.toml
           field: app
 
       - name: 🎈 Setup Fly
-        uses: superfly/flyctl-actions/setup-flyctl@v1.4
+        uses: superfly/flyctl-actions/setup-flyctl@1.5
 
       - name: 🚀 Deploy Staging
         if: ${{ github.ref == 'refs/heads/dev' }}

Dockerfile

@@ -53,8 +53,8 @@ WORKDIR /myapp
 COPY --from=production-deps /myapp/node_modules /myapp/node_modules
 COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma
 
-COPY --from=build /myapp/build /myapp/build
-COPY --from=build /myapp/public /myapp/public
+COPY --from=build /myapp/build/server /myapp/build/server
+COPY --from=build /myapp/build/client /myapp/build/client
 COPY --from=build /myapp/package.json /myapp/package.json
 COPY --from=build /myapp/start.sh /myapp/start.sh
 COPY --from=build /myapp/prisma /myapp/prisma

app/components/arrow.tsx

@@ -0,0 +1,31 @@
+import { ArrowRightIcon } from "@radix-ui/react-icons";
+import { type ClassValue } from "clsx";
+
+import { cn } from "~/lib/utils";
+
+export interface ArrowProps {
+  orientation?: "up" | "right" | "down" | "left";
+  className?: string | ClassValue[];
+}
+
+export function Arrow({ orientation = "right", className }: ArrowProps) {
+  return (
+    <>
+      <div
+        className={cn(
+          "flex h-12 w-12 items-center rounded-full border border-current text-current",
+          className,
+        )}
+      >
+        <ArrowRightIcon
+          className={cn(
+            "mx-auto h-8 w-8",
+            orientation === "down" && "rotate-90",
+            orientation === "left" && "rotate-180",
+            orientation === "up" && "-rotate-90",
+          )}
+        />
+      </div>
+    </>
+  );
+}

app/components/auto-link.tsx

@@ -0,0 +1,33 @@
+/**
+ * This function converts plain text with links into text
+ * where the links have been replaced with an anchor tag.
+ * Grabbed this from here: https://www.30secondsofcode.org/react/s/auto-link/
+ * @param { text }
+ * @returns A string of text where the detected links were replaced with anchor tags.
+ */
+export function AutoLink({ text }: { text: string }) {
+  const delimiter =
+    /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
+
+  return (
+    <>
+      {text.split(delimiter).map((word) => {
+        const match = word.match(delimiter);
+        if (match) {
+          const url = match[0];
+          return (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={url.startsWith("http") ? url : `http://${url}`}
+              className="underline"
+            >
+              {url}
+            </a>
+          );
+        }
+        return word;
+      })}
+    </>
+  );
+}

app/components/dinner-card.tsx

@@ -2,10 +2,10 @@ import type { Event } from "@prisma/client";
 import type { SerializeFrom } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 
-import { getEventImageUrl } from "~/utils";
-
 import { Button } from "./ui/button";
 
+import { getEventImageUrl } from "~/utils/misc";
+
 export function DinnerCard({
   event,
   preferredLocale,
@@ -17,30 +17,29 @@ export function DinnerCard({
   const imageUrl = getEventImageUrl(event.imageId);
 
   return (
-    <div className="relative mx-auto overflow-hidden rounded-lg border border-border bg-muted shadow-lg">
+    <div className="relative mx-auto w-full overflow-hidden">
       <img
         src={imageUrl}
         alt=""
         width={640}
         height={480}
-        className="max-h-28 w-full object-cover object-center"
+        className="max-h-96 w-full rounded-xl object-cover object-center"
       />
-      <div className="flex flex-col gap-3 p-5">
-        <div>
-          <strong className="text-3xl">{event.title}</strong>
-        </div>
-
+      <div className="mt-5 flex flex-col gap-7 p-5">
         <div>
           <time
-            className="text-sm font-semibold text-primary"
+            className="text-sm"
             dateTime={parsedDate.toISOString()}
             suppressHydrationWarning
           >
-            {`${parsedDate.toLocaleDateString(
-              preferredLocale,
-            )} - ${parsedDate.toLocaleTimeString(preferredLocale)}`}
+            {`${parsedDate.toLocaleDateString(preferredLocale, {
+              dateStyle: "medium",
+            })} - ${parsedDate.toLocaleTimeString(preferredLocale, { timeStyle: "short" })}`}
           </time>
         </div>
+
+        <div className="text-3xl text-primary">{event.title}</div>
+
         <div>
           <p className="line-clamp-5">{event.description}</p>
         </div>

app/components/dinner-view.tsx

@@ -1,7 +1,9 @@
 import type { Address, Event } from "@prisma/client";
 import { SerializeFrom } from "@remix-run/node";
 
-import { getEventImageUrl } from "~/utils";
+import { AutoLink } from "./auto-link";
+
+import { getEventImageUrl } from "~/utils/misc";
 
 export interface DinnerViewProps {
   event:
@@ -14,39 +16,42 @@ export function DinnerView({ event }: DinnerViewProps) {
   const imageUrl = getEventImageUrl(event.imageId);
 
   return (
-    <div className="mx-auto flex max-w-3xl grow flex-col gap-5">
-      <div className="flex flex-col gap-2">
-        <h1 className="text-4xl font-bold">{event.title}</h1>
-      </div>
-
-      <div className="flex flex-col gap-3">
+    <div className="mx-auto flex max-w-4xl grow flex-col gap-5">
+      <div className="flex flex-col gap-7">
         <img
           src={imageUrl}
           alt=""
-          width={1200}
-          height={800}
-          className="max-h-28 w-full rounded-xl object-cover shadow-xl"
+          width={640}
+          height={480}
+          className="max-h-96 w-full rounded-xl object-cover shadow-xl"
         />
 
-        <div>
-          <div className="font-semibold text-primary">
-            <time dateTime={eventDate.toISOString()} suppressHydrationWarning>
-              {`${eventDate.toLocaleDateString(
-                "de-CH",
-              )} - ${eventDate.toLocaleTimeString("de-CH")}`}
-            </time>
-          </div>
+        <div className="font-small">
+          <time dateTime={eventDate.toISOString()} suppressHydrationWarning>
+            {`${eventDate.toLocaleDateString("de-CH", {
+              dateStyle: "medium",
+            })} - ${eventDate.toLocaleTimeString("de-CH", { timeStyle: "short" })}`}
+          </time>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <h1 className="text-3xl text-primary">{event.title}</h1>
+        </div>
+
+        {/* <div>
           <p>{`${event.address.streetName} ${event.address.houseNumber}`}</p>
           <p>{`${event.address.zip} ${event.address.city}`}</p>
-        </div>
+        </div> */}
       </div>
 
-      <div className="font-semibold text-primary">
+      {/* <div className="font-semibold text-primary">
         <p>{`Cost, ${event.price} CHF (Non-Profit)`}</p>
-      </div>
+      </div> */}
 
       <div>
-        <p className="whitespace-pre-line">{event.description}</p>
+        <p className="whitespace-pre-line">
+          <AutoLink text={event.description} />
+        </p>
       </div>
     </div>
   );

app/components/footer.tsx

@@ -3,8 +3,8 @@ import { Link } from "@remix-run/react";
 
 export function Footer() {
   return (
-    <div className="mt-10 bg-muted text-muted-foreground">
-      <div className="mx-auto max-w-3xl p-2">
+    <div className="mt-40 border-t border-gray-50 bg-gray-950 text-gray-50">
+      <div className="mx-auto max-w-4xl p-2">
         <div className="flex flex-col gap-3">
           <p className="font-bold lowercase">moku pona</p>
           <ul className="flex flex-col gap-2">