fix(frontend): project list item on project overview page

components/frontend/src/lib/components/hackathon/ProjectCard.svelte

@@ -7,7 +7,7 @@
     let {
         num,
         title,
-        description,
+        excerpt,
         creator,
         track,
         imageUrl,
@@ -19,7 +19,10 @@
     }: {
         num: number;
         title: string;
-        description: string;
+        /** The description, flattened out of markdown and cut to a row's worth
+         *  by the loader — never the raw body. Absent when the project has no
+         *  description, or has one with nothing quotable in it. */
+        excerpt?: string;
         /** Who proposed it. Omitted when the creator is no longer a member. */
         creator?: string;
         /** Track name. Omitted when the project has no track, or its track was
@@ -76,10 +79,20 @@
         </div>
         <!-- The description is the one genuinely prose-shaped thing on the card,
              so it takes the sans face. `max-width` in `ch` rather than `w-2/3`
-             keeps the measure readable at any container width. -->
-        <p class="prose m-0 max-w-[52ch] text-xs leading-snug text-ink-2">
-            {description}
-        </p>
+             keeps the measure readable at any container width.
+
+             Two lines and no more. The loader already cut the text to a hundred
+             characters, so the clamp is only what holds on a narrow screen,
+             where those hundred characters still run to three lines and the row
+             stops being scannable. -->
+        {#if excerpt}
+            <p
+                class="prose m-0 line-clamp-2 max-w-[52ch] text-xs leading-snug
+                       text-ink-2"
+            >
+                {excerpt}
+            </p>
+        {/if}
         <!-- Author and track on one line, each behind its own icon, so the two
              facts read as attributes of the row rather than sentences. The
              icons carry no information a sighted reader needs spelling out and

components/frontend/src/lib/utils/projectExcerpt.ts

@@ -0,0 +1,12 @@
+/**
+ * How much of a project's description a list row carries.
+ *
+ * Lives here rather than in either loader because the participant list and the
+ * organiser's review queue show the same projects: a row that says more on one
+ * page than the other reads as two different descriptions of one project.
+ *
+ * Paired with `markdownExcerpt`, which flattens the markdown before cutting —
+ * so this counts the characters someone reads, not the `##` and `**` they do
+ * not.
+ */
+export const PROJECT_EXCERPT_CHARS = 100

components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.server.ts

@@ -10,6 +10,8 @@ import {
 import { enabledCapabilities } from "$lib/server/hackathon/phaseForm"
 import { fail } from "@sveltejs/kit"
 import { ClientError, Status } from "nice-grpc-common"
+import { markdownExcerpt } from "$lib/utils/markdown"
+import { PROJECT_EXCERPT_CHARS } from "$lib/utils/projectExcerpt"
 
 // No owner/admin check here: reviewing proposals is an organiser action and
 // lives under Manage Projects, which gates itself (see $lib/navigation's
@@ -136,7 +138,7 @@ export const load: PageServerLoad = async (event) => {
     id: p.id,
     num: ordered.length - i,
     title: p.title,
-    description: p.description,
+    excerpt: markdownExcerpt(p.description, PROJECT_EXCERPT_CHARS),
     creator: memberNames.get(p.creatorId),
     track: p.trackId ? trackNames.get(p.trackId) : undefined,
     imageUrl: p.image,
@@ -159,7 +161,7 @@ export const load: PageServerLoad = async (event) => {
     id: p.id,
     num: myProposals.length - i,
     title: p.title,
-    description: p.description,
+    excerpt: markdownExcerpt(p.description, PROJECT_EXCERPT_CHARS),
     creator: memberNames.get(p.creatorId),
     track: p.trackId ? trackNames.get(p.trackId) : undefined,
     imageUrl: p.image,

components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.svelte

@@ -89,7 +89,7 @@
                 <ProjectCard
                     num={proposal.num}
                     title={proposal.title}
-                    description={proposal.description}
+                    excerpt={proposal.excerpt}
                     creator={proposal.creator}
                     track={proposal.track}
                     imageUrl={proposal.imageUrl}
@@ -115,7 +115,7 @@
                 <ProjectCard
                     num={project.num}
                     title={project.title}
-                    description={project.description}
+                    excerpt={project.excerpt}
                     creator={project.creator}
                     track={project.track}
                     imageUrl={project.imageUrl}

components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.server.ts

@@ -10,6 +10,8 @@ import {
   type ProjectFilter,
 } from "$lib/utils/projectFilter"
 import { error } from "@sveltejs/kit"
+import { markdownExcerpt } from "$lib/utils/markdown"
+import { PROJECT_EXCERPT_CHARS } from "$lib/utils/projectExcerpt"
 
 // The review queue: every project in the hackathon, one status at a time.
 //
@@ -97,7 +99,7 @@ export const load: PageServerLoad = async (event) => {
     id: p.id,
     num: shown.length - i,
     title: p.title,
-    description: p.description,
+    excerpt: markdownExcerpt(p.description, PROJECT_EXCERPT_CHARS),
     creator: memberNames.get(p.creatorId),
     track: p.trackId ? trackNames.get(p.trackId) : undefined,
     imageUrl: p.image,

components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.svelte

@@ -103,7 +103,7 @@
                 <ProjectCard
                     num={project.num}
                     title={project.title}
-                    description={project.description}
+                    excerpt={project.excerpt}
                     creator={project.creator}
                     track={project.track}
                     imageUrl={project.imageUrl}