feat: Submissions SEO, fix #21

worldwidepixel · worldwidepixel · commit aa4815538af8 · 2025-07-19T21:19:03.000-07:00
diff --git a/routes/[event]/submissions.tsx b/routes/[event]/submissions.tsx
@@ -9,6 +9,7 @@ import { formatPlural, getDevtools } from "../../lib/helpers.tsx";
 import { Submission } from "../../lib/types.d.tsx";
 import { Submission as SubmissionComponent } from "../../components/Submission.tsx";
 import { FullCreditsGeneration } from "../../islands/CopyButton.tsx";
+import { Head } from "$fresh/runtime.ts";
 
 export default async function Submissions(_req: Request, ctx: RouteContext) {
   const event = await fetchEvent(fetch, ctx.params.event);
@@ -36,58 +37,73 @@ export default async function Submissions(_req: Request, ctx: RouteContext) {
   const devtools = getDevtools(_req);
 
   return (
-    <div
-      class="flex flex-col gap-4 mb-16"
-      style={`--color-mf-link: #${event.colors.primary}; --color-mf-event-background: #${event.colors.secondary}`}
-    >
-      <a
-        href={`/${event.id}`}
-        class="card flex flex-row gap-4 clickable"
-        style={`background-color: #${event.colors.secondary}`}
+    <>
+      <Head>
+        <title>{event.name} Submissions - ModFest</title>
+        <meta
+          property="og:title"
+          content={`${event.name} Submissions - ModFest`}
+        />
+        <meta
+          property="og:description"
+          content={`All submissions to ${event.name}.`}
+        />
+        <meta property="og:image" content={event.images.background} />
+        <meta name="twitter:card" content="summary_large_image" />
+      </Head>
+      <div
+        class="flex flex-col gap-4 mb-16"
+        style={`--color-mf-link: #${event.colors.primary}; --color-mf-event-background: #${event.colors.secondary}`}
       >
-        <div class="icon">
-          <img
-            alt={`Transparent icon for to ${event.name}`}
-            class="h-16"
-            src={event.images.transparent}
-          />
+        <a
+          href={`/${event.id}`}
+          class="card flex flex-row gap-4 clickable"
+          style={`background-color: #${event.colors.secondary}`}
+        >
+          <div class="icon">
+            <img
+              alt={`Transparent icon for to ${event.name}`}
+              class="h-16"
+              src={event.images.transparent}
+            />
+          </div>
+          <div>
+            <h1
+              style={{
+                color: (event.id !== "bc23"
+                  ? "var(--color-mf-heading)"
+                  : "var(--color-mf-card)"),
+              }}
+            >
+              {event.name}
+            </h1>
+            <p>
+              {`${event.name} ${
+                event.phase == "modding" ? "has" : "had"
+              } a total of ${
+                formatPlural("submission", submissions.length)
+              } created by ${
+                formatPlural(
+                  "modder",
+                  participants.size,
+                )
+              }${event.phase === "modding" ? " so far" : ""}.`}
+            </p>
+          </div>
+        </a>
+        {devtools &&
+          <FullCreditsGeneration submissions={submissions} users={users} />}
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {submissions.map((submission: Submission, submissionIndex) => (
+            <SubmissionComponent
+              submission={submission}
+              users={users}
+              key={submissionIndex}
+              devtools={devtools}
+            />
+          ))}
         </div>
-        <div>
-          <h1
-            style={{
-              color: (event.id !== "bc23"
-                ? "var(--color-mf-heading)"
-                : "var(--color-mf-card)"),
-            }}
-          >
-            {event.name}
-          </h1>
-          <p>
-            {`${event.name} ${
-              event.phase == "modding" ? "has" : "had"
-            } a total of ${
-              formatPlural("submission", submissions.length)
-            } created by ${
-              formatPlural(
-                "modder",
-                participants.size,
-              )
-            }${event.phase === "modding" ? " so far" : ""}.`}
-          </p>
-        </div>
-      </a>
-      {devtools &&
-        <FullCreditsGeneration submissions={submissions} users={users} />}
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        {submissions.map((submission: Submission, submissionIndex) => (
-          <SubmissionComponent
-            submission={submission}
-            users={users}
-            key={submissionIndex}
-            devtools={devtools}
-          />
-        ))}
       </div>
-    </div>
+    </>
   );
 }
