SSR

astro.config.mjs

@@ -1,33 +1,32 @@
-import { defineConfig } from "astro/config";
-
-import tailwind from "@astrojs/tailwind";
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
 
 // https://docs.astro.build/en/guides/markdown-content/#modifying-frontmatter-programmatically
 import { remarkReadingTime } from './remark-reading-time.mjs';
 
-// https://astro.build/config
-import react from "@astrojs/react";
+import react from '@astrojs/react';
 
 // https://docs.astro.build/en/guides/integrations-guide/vercel/
-import vercel from '@astrojs/vercel/static';
+// import vercel from '@astrojs/vercel/static';
+
+// https://astro.build/config
 
 // https://astro.build/config
+import vercel from '@astrojs/vercel/serverless';
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://bliss.berlin",
+  site: 'https://bliss.berlin',
   integrations: [tailwind(), react()],
   renderers: ['@astrojs/renderer-react'],
   markdown: {
     shikiConfig: {
       theme: 'github-dark',
-      wrap: true
+      wrap: true,
     },
     remarkPlugins: [remarkReadingTime],
-    extendDefaultPlugins: true
+    extendDefaultPlugins: true,
   },
-  output: 'static',
-  adapter: vercel({
-    analytics: true
-  })
-});
+  output: 'server',
+  adapter: vercel(),
+});

src/components/Arrow.astro

@@ -1,5 +1,5 @@
 ---
-
+import { Image } from 'astro:assets';
 ---
 
 <div>

src/components/AuthorList.tsx

@@ -1,4 +1,4 @@
-import type { Author } from "@utils/types";
+import type { Author } from '@utils/types';
 
 type Props = {
   authors: Author[];
@@ -7,14 +7,16 @@ export default function AuthorList({ authors }: Props) {
   return (
     <div className="flex items-center">
       {authors.map((author: Author) => (
-        <img
-          src={`/authors/${author.toLowerCase().replaceAll(" ", "-")}.jpg`}
+        <Image
+          src={`/authors/${author
+            .toLowerCase()
+            .replaceAll(' ', '-')}.jpg`}
           alt={`Image of ${author}`}
           className="-ml-3 rounded-full w-7 h-7 first:-ml-0"
         />
       ))}
       <p className="px-2 tracking-wider truncate text-md text-secondary">
-        {authors.join(", ")}
+        {authors.join(', ')}
       </p>
     </div>
   );

src/components/Card.astro

@@ -1,6 +1,7 @@
 ---
 // Import the necessary components or types
 import type { Paper } from "./data/papers";
+import { Image } from 'astro:assets';
 
 interface Props {
   paper: Paper;
@@ -18,7 +19,7 @@ const { paper, hasBorder } = Astro.props as Props;
         class="flex flex-col sm:flex-row sm:space-x-10 sm:items-center sm:max-h-min no-underline"
       >
         <div
-          class={`w-full h-[90px] sm:max-w-[200px] flex 
+          class={`w-full h-[90px] sm:max-w-[200px] flex
         will-change-transform items-center justify-center rounded-lg overflow-hidden sm:ml-2 object-cover`}
         >
           <img

src/components/CardPreview.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from 'astro:assets';
 interface Props {
   post: any;
 }

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-
+import { Image } from 'astro:assets';
 ---
 
 <div

src/components/Header.astro

@@ -1,7 +1,9 @@
 ---
 import Badge from "@components/Badge";
+import { Image } from 'astro:assets';
 const anchorLinks: string[] = ["speaker Series"];
-
+import type { ImageMetadata } from 'astro';
+const image = import.meta.glob<{ default: ImageMetadata }>('/public/assets/bliss-logo.png')
 const { headerTitle } = Astro.props;
 ---
 
@@ -12,9 +14,9 @@ const { headerTitle } = Astro.props;
   <div class="container flex justify-between">
     <div class="flex items-center justify-start space-x-[50px]">
       <a id="logo" href="/" class="relative group">
-        <img
+        <Image
           alt="bliss logo"
-          src="/assets/bliss-logo.png"
+          src={image['/public/assets/bliss-logo.png']()}
           height={80}
           width={80}
         />

src/components/SpeakerSeries.tsx

@@ -1,116 +1,115 @@
-import { speakers } from "./data/speakers";
+import { speakers } from './data/speakers';
 
 export const SpeakerSeries = () => {
+  return (
+    <div className="flex items-center flex-wrap justify-center">
+      <div id="speaker Series" className="pt-32 sm:my-40 text-center">
+        <strong className="text-4xl sm:text-5xl text-transparent bg-clip-text bg-red-right">
+          Speaker Series
+        </strong>
+        <p className="mt-4 font-light leading-relaxed text-secondary text-md sm:text-xl">
+          Get your <strong className="text-primary">free</strong>{' '}
+          tickets for the speaker series now!
+        </p>
 
-    return <div className="flex items-center flex-wrap justify-center" >
-        <div id="speaker Series" className="pt-32 sm:my-40 text-center">
-            <strong
-                className="text-4xl sm:text-5xl text-transparent bg-clip-text bg-red-right"
+        <div className="flex items-center justify-center my-2">
+          <div className="flex items-center hover:cursor-pointer mr-10">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              className="w-6 h-6 mr-2"
+              fill="currentColor"
             >
-                Speaker Series
-            </strong>
-            <p
-                className="mt-4 font-light leading-relaxed text-secondary text-md sm:text-xl"
+              <path d="M18,4.48a8.45,8.45,0,0,0-12,12l5.27,5.28a1,1,0,0,0,1.42,0L18,16.43A8.45,8.45,0,0,0,18,4.48ZM16.57,15,12,19.59,7.43,15a6.46,6.46,0,1,1,9.14,0ZM9,7.41a4.32,4.32,0,0,0,0,6.1,4.31,4.31,0,0,0,7.36-3,4.24,4.24,0,0,0-1.26-3.05A4.3,4.3,0,0,0,9,7.41Zm4.69,4.68a2.33,2.33,0,1,1,.67-1.63A2.33,2.33,0,0,1,13.64,12.09Z"></path>
+            </svg>
+            <a
+              href="https://www.google.com/maps/place/52.51169098971815,13.325654094872284"
+              target="_blank"
             >
-                Get your <strong className="text-primary">free</strong> tickets for the
-                speaker series now!
-            </p>
+              TU Berlin H1012
+            </a>
+          </div>
 
-            <div className="flex items-center justify-center my-2">
-                <div className="flex items-center hover:cursor-pointer mr-10">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        className="w-6 h-6 mr-2"
-                        fill="currentColor"
-                    ><path
-                        d="M18,4.48a8.45,8.45,0,0,0-12,12l5.27,5.28a1,1,0,0,0,1.42,0L18,16.43A8.45,8.45,0,0,0,18,4.48ZM16.57,15,12,19.59,7.43,15a6.46,6.46,0,1,1,9.14,0ZM9,7.41a4.32,4.32,0,0,0,0,6.1,4.31,4.31,0,0,0,7.36-3,4.24,4.24,0,0,0-1.26-3.05A4.3,4.3,0,0,0,9,7.41Zm4.69,4.68a2.33,2.33,0,1,1,.67-1.63A2.33,2.33,0,0,1,13.64,12.09Z"
-                    ></path></svg
-                    >
-                    <a
-                        href="https://www.google.com/maps/place/52.51169098971815,13.325654094872284"
-                        target="_blank">TU Berlin H1012</a
-                    >
-                </div>
+          <div className="flex items-center">
+            <img
+              src="/assets/clock.svg"
+              className="w-6 h-6 mr-2 stroke-white fill-white"
+              alt="clock"
+            />
+            <p>6:45pm</p>
+          </div>
+        </div>
 
-                <div className="flex items-center">
-                    <img
-                        src="/assets/clock.svg"
-                        className="w-6 h-6 mr-2 stroke-white fill-white"
-                        alt="clock"
-                    />
-                    <p>6:45pm</p>
-                </div>
-            </div>
+        <div className="mt-6 text-center">
+          <a
+            href="https://www.meetup.com/bliss-speaker-series/"
+            className="p-3 px-12 bg-accent text-gray-300 rounded-md px-2 text-lg hover:bg-gray-200 hover:text-gray-700 sm:text-xl text-center duration-300"
+          >
+            Get Your Ticket
+          </a>
+        </div>
 
-            <div className="mt-6 text-center">
-                <a
-                    href="https://www.meetup.com/bliss-speaker-series/"
-                    className="p-3 px-12 bg-accent text-gray-300 rounded-md px-2 text-lg hover:bg-gray-200 hover:text-gray-700 sm:text-xl text-center duration-300"
-                >Get Your Ticket</a
+        <ol className="relative border-l border-gray-200 dark:border-gray-700">
+          {speakers
+            .sort((a, b) => a.date - b.date)
+            .map((speaker) => (
+              <a
+                href={speaker.url}
+                key={speaker.date.toISOString()}
+                aria-label="Event details"
+                className="no-underline"
+              >
+                <li
+                  className={`py-1 mt-6 rounded-md duration-200 ${
+                    speaker.past ? '' : 'hover:bg-li'
+                  }`}
                 >
-            </div>
-
-            <ol className="relative border-l border-gray-200 dark:border-gray-700">
-                {
-                    speakers
-                        .sort((a, b) => a.date - b.date)
-                        .map((speaker) => (
-                            <a
-                                href={speaker.url}
-                                key={speaker.date.toISOString()}
-                                aria-label="Event details"
-                                className="no-underline"
-                            >
-                                <li
-                                    className={`py-1 mt-6 rounded-md duration-200 ${speaker.past ? "" : "hover:bg-li"
-                                        }`}
-                                >
-                                    <div
-                                        className={`absolute -left-1.5 w-3 h-3 bg-gray-200 rounded-full mt-1.5 border ${speaker.next
-                                            ? "border-white"
-                                            : "border-gray-900 bg-gray-700"
-                                            }`}
-                                    />
-                                    <div className="text-left pl-4 border-left">
-                                        <p
-                                            className={`text-base sm:text-lg ${speaker.past
-                                                ? "text-gray-500"
-                                                : "text-secondary"
-                                                }`}
-                                        >
-                                            {speaker.date.toLocaleDateString(
-                                                "en-US",
-                                                {
-                                                    year: "numeric",
-                                                    month: "long",
-                                                    day: "numeric",
-                                                },
-                                            )}
-                                        </p>
-                                        <p
-                                            className={`text-xl sm:text-2xl font-bold ${speaker.past
-                                                ? "text-gray-500"
-                                                : "text-transparent bg-clip-text bg-red-right"
-                                                }`}
-                                        >
-                                            {speaker.title}
-                                        </p>
-                                        <p
-                                            className={`text-lg sm:text-xl ${speaker.past
-                                                ? "text-gray-500"
-                                                : "text-secondary"
-                                                }`}
-                                        >
-                                            {speaker.name},{" "}
-                                            <strong>{speaker.affiliation}</strong>
-                                        </p>
-                                    </div>
-                                </li>
-                            </a>
-                        ))
-                }
-            </ol>
-        </div>
-    </div >
-}
+                  <div
+                    className={`absolute -left-1.5 w-3 h-3 bg-gray-200 rounded-full mt-1.5 border ${
+                      speaker.next
+                        ? 'border-white'
+                        : 'border-gray-900 bg-gray-700'
+                    }`}
+                  />
+                  <div className="text-left pl-4 border-left">
+                    <p
+                      className={`text-base sm:text-lg ${
+                        speaker.past
+                          ? 'text-gray-500'
+                          : 'text-secondary'
+                      }`}
+                    >
+                      {speaker.date.toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })}
+                    </p>
+                    <p
+                      className={`text-xl sm:text-2xl font-bold ${
+                        speaker.past
+                          ? 'text-gray-500'
+                          : 'text-transparent bg-clip-text bg-red-right'
+                      }`}
+                    >
+                      {speaker.title}
+                    </p>
+                    <p
+                      className={`text-lg sm:text-xl ${
+                        speaker.past
+                          ? 'text-gray-500'
+                          : 'text-secondary'
+                      }`}
+                    >
+                      {speaker.name},{' '}
+                      <strong>{speaker.affiliation}</strong>
+                    </p>
+                  </div>
+                </li>
+              </a>
+            ))}
+        </ol>
+      </div>
+    </div>
+  );
+};

src/components/hackathon/Partners.astro

@@ -1,3 +1,9 @@
+---
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+const image = import.meta.glob<{ default: ImageMetadata }>('/public/assets/bliss-logo.png')
+---
+
 <div id="partners" class="sm:my-40 text-center">
   <strong
     class="font-semibold text-3xl sm:text-5xl text-transparent bg-clip-text bg-red-right"
@@ -6,7 +12,7 @@
   </strong>
   <div class="flex justify-center mt-20 space-x-10">
     <a href="https://google.de" class="partner-logo">
-      <img src="/assets/partners/google.png" alt="Google" />
+      <Image src={image["/public/assets/bliss-logo.png"]()} alt="Google" />
     </a>
   </div>
 </div>