Merge pull request #26 from Szedann/main

View Schedule button

Author: TheEpicBlock

components/Schedule.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from "preact/jsx-runtime";
 import FormattedDateTime from "../islands/DateTime.tsx";
 import { ScheduleEntryData, User } from "../lib/types.d.tsx";
 import UserLink from "./UserLink.tsx";
@@ -8,47 +7,49 @@ export function Schedule(
 ) {
   return (
     <div class="card">
-      <h1>Event Schedule</h1>
+      <h1 id="schedule">Event Schedule</h1>
       <div>
         {props.schedule.map((entry) => {
           return (
             <div key={entry.id} class="py-4">
               <h3 id={`event-${entry.id}`}>{entry.title}</h3>
               <table class="w-full">
-                <tr>
-                  <td>Type</td>
-                  <td>
-                    {entry.type?.split(" ").map((word) =>
-                      word.slice(0, 1).toUpperCase() + word.slice(1)
-                    ).join(" ") ?? "-"}
-                  </td>
-                </tr>
-                <tr>
-                  <td>Time</td>
-                  <td>
-                    {entry.start
-                      ? <FormattedDateTime time={entry.start} />
-                      : "-"} - {entry.end
-                      ? <FormattedDateTime time={entry.end} timeOnly />
-                      : "-"}
-                  </td>
-                </tr>
-                <tr>
-                  <td>Location</td>
-                  <td>
-                    {entry.location ?? "-"}
-                  </td>
-                </tr>
-                <tr>
-                  <td>Hosts</td>
-                  <td>
-                    <Authors authors={entry.authors} users={props.users} />
-                  </td>
-                </tr>
-                <tr>
-                  <td>Description</td>
-                  <td class="w-full">{entry.description ?? "-"}</td>
-                </tr>
+                <tbody>
+                  <tr>
+                    <td>Type</td>
+                    <td>
+                      {entry.type?.split(" ").map((word) =>
+                        word.slice(0, 1).toUpperCase() + word.slice(1)
+                      ).join(" ") ?? "-"}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Time</td>
+                    <td>
+                      {entry.start
+                        ? <FormattedDateTime time={entry.start} />
+                        : "-"} - {entry.end
+                        ? <FormattedDateTime time={entry.end} timeOnly />
+                        : "-"}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Location</td>
+                    <td>
+                      {entry.location ?? "-"}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Hosts</td>
+                    <td>
+                      <Authors authors={entry.authors} users={props.users} />
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Description</td>
+                    <td class="w-full">{entry.description ?? "-"}</td>
+                  </tr>
+                </tbody>
               </table>
             </div>
           );

routes/vanity/bc25.tsx

@@ -1,6 +1,11 @@
 import { RouteConfig, RouteContext } from "$fresh/server.ts";
 
-import { fetchEvent, fetchEventSchedule, fetchEventSubmissions, fetchUser } from "../../lib/platform-api.tsx";
+import {
+  fetchEvent,
+  fetchEventSchedule,
+  fetchEventSubmissions,
+  fetchUser,
+} from "../../lib/platform-api.tsx";
 import { asset, Head } from "$fresh/runtime.ts";
 import { getPagesMarkdown } from "../../lib/helpers.tsx";
 import { MarkdownBlocks } from "../../components/MarkdownBlocks.tsx";
@@ -20,12 +25,12 @@ export default async function Event(_req: Request, ctx: RouteContext) {
 
   const submissions = await fetchEventSubmissions(fetch, eventId);
   const schedule = await fetchEventSchedule(fetch, eventId);
-  schedule.sort((a, b) => (a.start ?? "") > (b.start ?? "") ? 1 : -1)
+  schedule.sort((a, b) => (a.start ?? "") > (b.start ?? "") ? 1 : -1);
   const users = await Promise.all(
-      [...new Set(schedule.flatMap((s) => s.authors))].map((author) =>
-        fetchUser(fetch, author)
-      ),
-    )
+    [...new Set(schedule.flatMap((s) => s.authors))].map((author) =>
+      fetchUser(fetch, author)
+    ),
+  );
   const content = await getPagesMarkdown(`event/${eventId}`);
   return (
     <div className="bg-[#86dbfe]">
@@ -177,6 +182,11 @@ export default async function Event(_req: Request, ctx: RouteContext) {
                 View Submissions
               </a>
             )}
+          {!!schedule && schedule.length > 0 && (
+            <a href="#schedule" class="button">
+              View Schedule
+            </a>
+          )}
         </div>
       </div>
       <div className="bg-[#185090] bg-repeat bg-[auto_96px] bg-[center_top_48px] pixelated -mb-20">
@@ -210,7 +220,9 @@ export default async function Event(_req: Request, ctx: RouteContext) {
             </div>
           </article>
           <MarkdownBlocks content={content} />
-          {schedule && schedule.length > 0 ? <Schedule schedule={schedule} users={users}></Schedule> : null}
+          {schedule && schedule.length > 0
+            ? <Schedule schedule={schedule} users={users}></Schedule>
+            : null}
         </div>
       </div>
     </div>

static/assets/vanity/bc25/main.css

@@ -6,6 +6,8 @@
 @layer components {
   * {
     border-radius: 0 !important;
+    scroll-behavior: smooth;
+    scroll-margin-top: 1em;
   }
   h1, h2, h3 {
     font-family: pixel;