feat: add subscribe calendar

app/.env.example

@@ -5,11 +5,16 @@ APP_SECRET=""
 APP_API_TOKEN=""
 CRON_SECRET=""
 
+PUBLIC_CAPRA_BASE_URL=""
+PUBLIC_FRYDE_BASE_URL=""
+PUBLIC_LIFLIG_BASE_URL=""
+
 PUBLIC_SANITY_PROJECT_ID=""
 PUBLIC_SANITY_DATASET=""
 PUBLIC_SANITY_API_VERSION=""
 PUBLIC_SANITY_STUDIO_URL=""
 SANITY_API_READ_TOKEN=""
+SANITY_API_WRITE_TOKEN=""
 
 AUTH_TRUST_HOST=""
 AUTH_SECRET=""
@@ -23,3 +28,5 @@ SUPABASE_CONNECTION_STRING=""
 SMTP_HOST=""
 SMTP_AUTH_USER=""
 SMTP_AUTH_KEY=""
+
+SLACK_HOOK=""

app/src/components/shared/EventFilter.svelte

@@ -31,11 +31,11 @@
   };
 </script>
 
-<ButtonGroup class="flex-row flex-wrap gap-2 pb-7 shadow-none md:self-end">
+<ButtonGroup class="flex-row flex-wrap gap-2 shadow-none md:justify-end md:self-end">
   {#each filter as { title, keyword }}
     <Button
       on:click={() => handleFilterChange(keyword)}
-      class={`${
+      class={`basis-1/4 whitespace-nowrap sm:basis-auto ${
         selectedFilter === keyword
           ? "h-8 !rounded-lg !border-zinc-800 bg-zinc-800 text-white hover:bg-zinc-800 dark:bg-zinc-600 dark:hover:bg-zinc-600"
           : "h-8 !rounded-lg border border-[#999] hover:border-black hover:bg-white dark:border-zinc-800 dark:bg-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-700"

app/src/components/shared/EventListItem.svelte

@@ -14,13 +14,13 @@
   href={`/event/${event._id}`}
   {target}
 >
-  <div class="flex flex-col gap-3 px-0 font-light md:flex-row lg:gap-2 lg:px-2">
+  <div class="flex flex-col gap-3 px-0 font-light lg:flex-row lg:gap-2 lg:px-2">
     <h2 class="max-w-md truncate whitespace-pre-wrap pr-3 text-xl">
       {event.title}
     </h2>
     <EventBadges {event} />
   </div>
-  <div class="flex flex-row items-center justify-between gap-6 pt-4 md:pt-0">
+  <div class="flex flex-row items-center justify-between gap-4 pt-4 md:pt-0">
     <EventLogos {event} height={5} />
     <ArrowRight class="mr-2" />
   </div>

app/src/components/shared/EventLogos.svelte

@@ -11,7 +11,7 @@
   export let height: number;
 </script>
 
-<div class="flex items-center gap-4">
+<div class="flex items-center justify-center gap-4">
   {#if event.organisers === "Alle"}
     <img class="block h-{height} dark:hidden" alt="Capra-logo" src={capraLogoBlack} />
     <img class="hidden h-{height} dark:block" alt="Capra-logo" src={capraLogoWhite} />

app/src/components/shared/SignedInDesktopMenu.svelte

@@ -33,10 +33,11 @@
   </Button>
   <Button
     color="alternative"
-    class="hidden h-9 rounded-2xl border-[#999] p-2.5"
+    class="h-9 rounded-2xl border-[#999] p-2.5"
     target="_blank"
     rel="noopener noreferrer"
     href={subscribeLink}
+    alt="Abonner på kalender"
   >
     <CalendarIcon strokeWidth={1.5} class="w-[16px]" />
   </Button>

app/src/components/shared/SignedInMobileMenu.svelte

@@ -46,11 +46,12 @@
       </Button>
       <Button
         color="alternative"
-        class="hidden h-9 w-32 border-[#999]"
+        class="h-9 w-32 border-[#999]"
         pill
         target="_blank"
         rel="noopener noreferrer"
         href={subscribeLink}
+        alt="Abonner på kalender"
       >
         <span class="mr-1.5">Subscribe</span>
         <CalendarIcon strokeWidth={1.5} class="w-[16px]" />

app/src/routes/+page.svelte

@@ -31,14 +31,14 @@
 </svelte:head>
 
 <section class="pb-8">
-  <div class="flex flex-col justify-between md:flex-row md:items-center">
-    <h1 class="pb-6 text-4xl font-semibold md:w-[30%] md:pt-10 md:text-5xl">
-      Kommende arrangementer
+  <div class="flex flex-col justify-between gap-4 py-6 md:flex-row md:items-center md:py-10">
+    <h1 class="text-4xl font-semibold md:text-5xl">
+      Kommende<br />arrangementer
     </h1>
     <EventFilter {selectedFilter} on:filterChange={({ detail }) => (selectedFilter = detail)} />
   </div>
 
-  <div class="flex flex-col gap-4 py-5">
+  <div class="flex flex-col gap-4 pb-5">
     {#if futureEventsFiltered.length}
       {#each futureEventsFiltered.slice(0, amountOfVisibleFutureEvents) as event}
         <EventListItem {event} />
@@ -63,7 +63,9 @@
 </section>
 
 <section class="pb-8">
-  <h1 class="pb-12 pt-10 text-4xl font-semibold md:w-[30%] md:text-5xl">Tidligere arrangementer</h1>
+  <h1 class="pb-6 pt-10 text-4xl font-semibold md:pb-10 md:text-5xl">
+    Tidligere<br /> arrangementer
+  </h1>
   {#if pastEvents.length}
     <div class="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
       {#each pastEvents.slice(0, amountOfVisiblePastEvents) as event}

app/src/routes/api/daily-recurring-event-scheduler/services/notification.ts

@@ -1,4 +1,4 @@
-import { PUBLIC_APP_DEFAULT_BASE_URL } from "$env/static/public";
+import { PUBLIC_APP_BASE_URL } from "$env/static/public";
 import { SLACK_HOOK } from "$env/static/private";
 import { urlFor } from "$lib/sanity/image";
 import type { Event } from "$models/sanity.model";
@@ -15,7 +15,7 @@ export const sendSlackNotification = async ({
   if (process.env.NODE_ENV === "development") return;
 
   const imageUrl = image ? urlFor(image).width(400).url() : null;
-  const eventUrl = `${PUBLIC_APP_DEFAULT_BASE_URL}/event/${id}`;
+  const eventUrl = `${PUBLIC_APP_BASE_URL}/event/${id}`;
 
   const startDate = new Date(start).toLocaleDateString("nb-NO", {
     hour: "2-digit",

app/src/routes/api/subscribe/+server.ts

@@ -1,24 +1,36 @@
-import { PUBLIC_APP_DEFAULT_BASE_URL } from "$env/static/public";
+import { PUBLIC_APP_BASE_URL } from "$env/static/public";
 import { getFutureEvents } from "$lib/server/sanity/queries";
 import type { RequestHandler } from "@sveltejs/kit";
-import ical, { ICalCalendarMethod, type ICalEventData } from "ical-generator";
+import ical, {
+  ICalCalendarMethod,
+  ICalEventTransparency,
+  type ICalEventData,
+} from "ical-generator";
 
 export const GET: RequestHandler = async () => {
   try {
     const events = await getFutureEvents();
-    const calendar = ical({ name: "Skjer", method: ICalCalendarMethod.REQUEST });
+    const calendar = ical({ name: "Skjer", method: ICalCalendarMethod.PUBLISH });
 
     events.forEach(
-      ({ _id: id, title: summary, summary: description, start, end, place: location }) => {
-        const url = `${PUBLIC_APP_DEFAULT_BASE_URL}/event/${id}`;
+      ({
+        _id: id,
+        title: summary,
+        summary: description = "",
+        place: location = "",
+        start,
+        end,
+      }) => {
+        const url = `${PUBLIC_APP_BASE_URL}/event/${id}`;
         const eventData: ICalEventData = {
           id,
           summary,
-          description: `${description ?? ""} ${url}`,
+          description: `${url} ${description}`,
           location,
           start,
           end,
           url,
+          transparency: ICalEventTransparency.TRANSPARENT,
         };
         calendar.createEvent(eventData);
       }

app/static/global.css

@@ -42,7 +42,7 @@
   --gray-600: #6e7683;
   --blue-600: #1e61cd;
   --magenta-100: #f9d7eb;
-
+  --bg-dark: #09090b;
   --max-width-0: 320px;
   --max-width-1: 768px;
 }
@@ -55,6 +55,12 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: var(--bg-dark);
+  }
+}
+
 body {
   margin: 0;
 }