@anantagnanam/lms 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ananta Gnanam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,99 @@
-# Temporary Holding Version
+# @anantagnanam/lms
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A native LMS for EmDash 1.4 with Astro 7 and React 19. Version 0.2.0 provides free courses, flexible enrollment, cohorts, lessons, quizzes, assignments, progress, certificates, discussions, moderation, reporting, notifications, published course editions, learning paths, a private library, and native media resume.
+
+This is a free preview release. Before upgrading from 0.1.0, back up the full host database, rebuild the site, and run **LMS settings → Course edition migration** until complete. Do not downgrade after migration begins. Production database/auth/email verification, backup restoration, accessibility and capacity checks remain operator release gates. Payment processing is deferred.
+
+## Installation
+
+Install the public npm release in an existing EmDash site:
+
+```sh
+npm install --save-exact @anantagnanam/lms@0.2.0
+```
+
+This is a trusted native dependency configured by the site developer. Local builds can also be installed from their release tarball.
+
+```js
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+import emdash from "emdash/astro";
+import { anantagnanamLmsPlugin } from "@anantagnanam/lms";
+import { lmsAstro } from "@anantagnanam/lms/astro";
+
+const learning = { basePath: "/academy", loginPath: "/login" };
+
+export default defineConfig({
+  output: "server",
+  // Keep the site's existing adapter and other options.
+  integrations: [
+    react(),
+    lmsAstro({ ...learning, layout: "./src/layouts/Base.astro" }),
+    emdash({
+      // Keep the site's existing database, storage, and auth provider.
+      plugins: [anantagnanamLmsPlugin(learning)],
+    }),
+  ],
+});
+```
+
+Keep existing plugin and integration registrations alongside these. Use the same `basePath` and `loginPath` for both registrations. Omit `layout` for the standalone academy layout. A custom layout receives `title`, `description`, and `robots` and must render a slot. The host supplies learner signup and sign-in through its EmDash authentication provider.
+
+After rebuilding the site, visit:
+
+- `/academy`: course catalog
+- `/academy/my-learning`: learner dashboard
+- `/academy/my-learning/library`: saved courses, joined path progress, preferences and own-data downloads
+- `/academy/paths`: published learning paths
+- `/academy/teach`: instructor course studio
+- `/academy/teach/courses/<courseId>/lessons/<lessonId>`: private saved author preview
+- `/_emdash/admin/plugins/anantagnanam-lms`: administration
+
+The native plugin declares course, enrollment, cohort, certificate, discussion, review, notification, and audit storage. EmDash creates the plugin storage namespace. No LMS SQL migration or separate authentication store is needed.
+
+The lesson editor identifies inline text, imported rich content, or linked published CMS content. Imported rich content is read-only in the studio; linked lessons can be edited and published in EmDash. Author previews show saved content. Quiz drafts expose save/retry/conflict state and use revisions to prevent stale overwrites. Older attempts are revision zero; integrations must send `expectedDraftRevision` after each acknowledged draft save.
+
+Existing courses now have separate saved drafts and published editions. Save a draft, then use **Publish saved draft** to publish for new enrollments. **Saved revision history** can restore earlier material into a draft. Existing learners retain their original curriculum, grading rules, progress and certificates. Linked CMS lesson text is captured at course publication; media URLs remain references. Instructor assignments take effect when saved.
+
+After upgrading, run **LMS settings → Course edition migration** batches until complete. Checkpoints survive interruption; courses also upgrade lazily before editing or enrollment. Keep a full database backup: course exports contain only draft curriculum, and this migration is not a full backup or cross-site import. Publication scheduling, editorial review and moving existing enrollments between editions remain future work.
+
+## Enrollment and access
+
+`open` courses enroll learners immediately. `approval` courses create pending requests. `invite` courses require administrator enrollment. Cohort membership always requires an administrator decision. Administrators can reject, suspend, restore, cancel, and date access without deleting progress.
+
+An enrollment has separate lifecycle, administrative access, and individual grants. Current cohort membership and dates are authoritative for cohort access. A public free or manual grant can continue independently of a suspended or expired cohort.
+
+## Commerce boundary
+
+This release performs no payments. Paid publication and paid enrollment are blocked. `@anantagnanam/lms/commerce` exports only interfaces for money, orders, checkout, verified payment events, refunds, and purchase grants. Future payment providers can add their ledger and purchase grants without replacing enrollment or progress records.
+
+## Exports
+
+| Export              | Purpose                                                 |
+| ------------------- | ------------------------------------------------------- |
+| `@anantagnanam/lms` | Descriptor factory and constants                        |
+| `/runtime`          | Native runtime factory                                  |
+| `/astro`            | Astro integration and injected server routes            |
+| `/server`           | Public/learner read helpers and URL builders            |
+| `/admin`            | React admin pages, course studio, and widget            |
+| `/components`       | Astro components for custom site composition            |
+| `/styles.css`       | Scoped learner styles                                   |
+| `/types`            | Course, enrollment, progress, assessment, and API types |
+| `/schemas`          | Validated authoring and request schemas                 |
+| `/commerce`         | Future provider-independent commerce interfaces         |
+
+Private HTTP calls use an EmDash session and `X-EmDash-Request: 1`. API routes begin at `/_emdash/api/plugins/anantagnanam-lms`. Learner rendering helpers accept only the read routes required by the included pages.
+
+Notifications always appear in the learner dashboard. Email is optional and disabled by default. Configure an EmDash email transport and working cron scheduler before enabling email or inactivity reminders. Certificates use the browser's print/save-as-PDF flow.
+
+Learners can opt out of email from their library; this also suppresses queued email when maintenance next runs. Personal weekly lesson goals are stored targets, not measured activity reports. The library exports the learner's own records in pages of up to five records per section, with quiz answer keys and scoring snapshots removed. Continue through every page and section for a complete download; it is not a full database backup.
+
+Administrators can publish ordered learning paths. Joining saves the path's original course list but does not enroll the learner in its courses or bypass approval, prerequisites or access dates. Course completion contributes to path progress even when access later expires. Course enrollment still pins the actual curriculum edition.
+
+Native audio/video supports resume and playback speed, revision-fenced saves, WebVTT caption tracks and readable transcripts. Captions and media hosted elsewhere require appropriate CORS. YouTube/Vimeo controls and resume remain provider-managed. Playback reports never complete lessons or verify attendance. New caption/transcript fields have compatible defaults; enrollment playback fields are optional for existing records.
+
+The studio can duplicate a saved course as a new draft, duplicate lessons and move lessons between modules. Review copied access/date settings before publishing. **LMS settings → Operational health** shows maintenance freshness, notification backlog/failures and migration status. A healthy heartbeat does not certify the deployment.
+
+See the [release-readiness assessment](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/release-readiness.md), [platform feature matrix](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/platform-feature-matrix.md), and [security policy](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/SECURITY.md) for remaining release gates and capabilities.
+
+Full documentation: [repository](https://github.com/anantagnanam/anantagnanam-emdash-plugins), [installation](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/installation.md), [architecture](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/architecture.md), and [release scope](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/release-scope.md).

package/astro/client.ts

@@ -0,0 +1,355 @@
+import { API_BASE } from "@anantagnanam/lms";
+import { renderQuiz } from "./quiz-player.js";
+import { initializeMedia } from "./media-player.js";
+import type { Discussion, Notification, Page, PublicQuizAttempt } from "@anantagnanam/lms/types";
+
+async function call<T>(route: string, input: Record<string, unknown>, method = "POST"): Promise<T> {
+  let url = `${API_BASE}/${route}`;
+  const headers: Record<string, string> = { "X-EmDash-Request": "1", Accept: "application/json" };
+  if (method === "GET") {
+    const query = new URLSearchParams();
+    for (const [key, value] of Object.entries(input))
+      if (value !== undefined) query.set(key, String(value));
+    url += `?${query}`;
+  } else headers["Content-Type"] = "application/json";
+  const response = await fetch(url, {
+    method,
+    signal: AbortSignal.timeout(20_000),
+    credentials: "same-origin",
+    headers,
+    ...(method === "POST" ? { body: JSON.stringify(input) } : {}),
+  });
+  const result = (await response.json()) as {
+    success: boolean;
+    data?: T;
+    error?: { message?: string; code?: string };
+  };
+  if (!response.ok || !result.success)
+    throw Object.assign(new Error(result.error?.message ?? "Please try again."), {
+      code: result.error?.code,
+      status: response.status,
+    });
+  return result.data as T;
+}
+function node<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  text?: string,
+  className?: string,
+): HTMLElementTagNameMap[K] {
+  const element = document.createElement(tag);
+  if (text !== undefined) element.textContent = text;
+  if (className) element.className = className;
+  return element;
+}
+function feedback(root: Element, message: string, error = false) {
+  const target = root.querySelector<HTMLElement>("[data-lms-feedback]");
+  if (target) {
+    target.textContent = message;
+    target.dataset.tone = error ? "error" : "success";
+    target.setAttribute("role", error ? "alert" : "status");
+  }
+}
+function data(element: HTMLElement): Record<string, string> {
+  return { courseId: element.dataset.courseId ?? "", lessonId: element.dataset.lessonId ?? "" };
+}
+
+function forms() {
+  for (const form of document.querySelectorAll<HTMLFormElement>(
+    "form[data-lms-route]:not([data-lms-bound])",
+  )) {
+    form.dataset.lmsBound = "true";
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      if (form.dataset.lmsBusy === "true") return;
+      if (form.dataset.lmsConfirm && !window.confirm(form.dataset.lmsConfirm)) return;
+      const input: Record<string, unknown> = Object.fromEntries(new FormData(form));
+      if ("rating" in input) input.rating = Number(input.rating);
+      if ("shared" in input) input.shared = input.shared === "true";
+      if ("saved" in input) input.saved = input.saved === "true";
+      if (form.dataset.lmsRoute === "learner/preferences/save") {
+        input.data = {
+          emailNotifications: input.emailNotifications === "true",
+          weeklyGoalLessons: Number(input.weeklyGoalLessons),
+        };
+        input.expectedRevision = input.expectedRevision || null;
+        delete input.emailNotifications;
+        delete input.weeklyGoalLessons;
+      }
+      if ("attachmentUrl" in input && input.attachmentUrl === "") input.attachmentUrl = null;
+      if ("parentId" in input && input.parentId === "") input.parentId = null;
+      const buttons = [...form.querySelectorAll<HTMLButtonElement>('button[type="submit"]')];
+      form.dataset.lmsBusy = "true";
+      buttons.forEach((button) => (button.disabled = true));
+      feedback(form, "Saving…");
+      try {
+        const route = form.dataset.lmsRoute!;
+        const result = await call<{ status?: string }>(route, input);
+        feedback(
+          form,
+          route === "learner/enroll"
+            ? result.status === "pending"
+              ? "Enrollment requested. An administrator will review it."
+              : "You're enrolled. Your learning journey is ready."
+            : route === "learner/cohort/request"
+              ? "Cohort request received. An administrator will review it."
+              : route === "learner/assignment"
+                ? "Assignment submitted for grading."
+                : route === "learner/review" || route === "learner/discussion"
+                  ? "Your contribution has been submitted."
+                  : "Saved.",
+        );
+        if (route === "learner/discussion") {
+          const body = form.elements.namedItem("body");
+          if (body instanceof HTMLTextAreaElement) body.value = "";
+          const parent = form.elements.namedItem("parentId");
+          if (parent instanceof HTMLInputElement) parent.value = "";
+          const root = form.closest<HTMLElement>("[data-lms-discussions]");
+          if (root) await renderDiscussions(root);
+        }
+        if (form.hasAttribute("data-lms-reload")) window.location.reload();
+      } catch (cause) {
+        feedback(
+          form,
+          cause instanceof Error ? cause.message : "Could not save. Please try again.",
+          true,
+        );
+      } finally {
+        form.dataset.lmsBusy = "false";
+        buttons.forEach((button) => (button.disabled = false));
+      }
+    });
+  }
+}
+
+async function renderDiscussions(root: HTMLElement, cursor?: string, append = false) {
+  const list = root.querySelector<HTMLElement>("[data-lms-discussion-list]");
+  if (!list) return;
+  try {
+    const page = await call<Page<Discussion> & { pending: Discussion[] }>(
+      "learner/discussions",
+      { ...data(root), cursor },
+      "GET",
+    );
+    if (!append) list.replaceChildren();
+    root.querySelector("[data-lms-discussion-more]")?.remove();
+    if (!page.items.length && !page.pending.length && !append)
+      list.append(node("p", "Start a thoughtful conversation.", "lms-muted"));
+    for (const item of [...page.items, ...(!append ? page.pending : [])]) {
+      const article = node("article", undefined, "lms-discussion");
+      if (item.parentId) article.style.marginInlineStart = "1.2rem";
+      article.append(
+        node("strong", item.authorName),
+        node("p", item.body),
+        node(
+          "small",
+          item.status === "pending"
+            ? "Awaiting moderation · visible only to you"
+            : new Date(item.createdAt).toLocaleString(),
+        ),
+      );
+      if (item.status === "published" && !item.parentId) {
+        const reply = node("button", "Reply", "lms-text-button");
+        reply.type = "button";
+        reply.addEventListener("click", () => {
+          const form = root.querySelector<HTMLFormElement>("form");
+          if (!form) return;
+          let parent = form.elements.namedItem("parentId");
+          if (!(parent instanceof HTMLInputElement)) {
+            parent = node("input");
+            (parent as HTMLInputElement).type = "hidden";
+            (parent as HTMLInputElement).name = "parentId";
+            form.append(parent as HTMLInputElement);
+          }
+          (parent as HTMLInputElement).value = item.id;
+          feedback(form, `Replying to ${item.authorName}.`);
+          form.querySelector("textarea")?.focus();
+        });
+        article.append(reply);
+      }
+      list.append(article);
+    }
+    if (page.hasMore && page.cursor) {
+      const more = node("button", "More discussion", "lms-btn lms-btn-outline");
+      more.type = "button";
+      more.dataset.lmsDiscussionMore = "true";
+      more.addEventListener("click", () => void renderDiscussions(root, page.cursor, true));
+      root.append(more);
+    }
+  } catch (cause) {
+    list.replaceChildren(
+      node("p", cause instanceof Error ? cause.message : "Could not load discussion.", "lms-muted"),
+    );
+  }
+}
+
+function quizzes() {
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-quiz]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    const start = root.querySelector<HTMLButtonElement>("[data-lms-quiz-start]")!;
+    start.addEventListener("click", async () => {
+      if (start.disabled) return;
+      start.disabled = true;
+      feedback(root, "Preparing your quiz…");
+      try {
+        const attempt = await call<PublicQuizAttempt>("learner/quiz/start", data(root));
+        start.hidden = true;
+        feedback(root, "Your attempt has started.");
+        renderQuiz(root, attempt, call);
+      } catch (cause) {
+        start.disabled = false;
+        feedback(root, cause instanceof Error ? cause.message : "Could not start quiz.", true);
+      }
+    });
+  }
+}
+async function updates(root: HTMLElement, cursor?: string, append = false) {
+  try {
+    const page = await call<Page<Omit<Notification, "email">>>(
+      "learner/notifications",
+      { cursor },
+      "GET",
+    );
+    if (!append) root.replaceChildren();
+    root.querySelector("[data-lms-more]")?.remove();
+    if (!page.items.length && !append)
+      root.append(node("p", "Your learning updates will appear here.", "lms-muted"));
+    for (const item of page.items) {
+      const article = node("article", undefined, "lms-notification");
+      article.append(node("strong", item.title), node("p", item.message));
+      if (!item.read) {
+        const button = node("button", "Mark as read");
+        button.type = "button";
+        button.addEventListener("click", async () => {
+          button.disabled = true;
+          try {
+            await call("learner/notification/read", { id: item.id });
+            button.remove();
+          } catch {
+            button.disabled = false;
+          }
+        });
+        article.append(button);
+      }
+      root.append(article);
+    }
+    if (page.hasMore && page.cursor) {
+      const more = node("button", "More updates", "lms-text-button");
+      more.type = "button";
+      more.dataset.lmsMore = "true";
+      more.addEventListener("click", () => void updates(root, page.cursor, true));
+      root.append(more);
+    }
+  } catch (cause) {
+    root.replaceChildren(
+      node("p", cause instanceof Error ? cause.message : "Could not load updates.", "lms-muted"),
+    );
+  }
+}
+
+function initialize() {
+  forms();
+  quizzes();
+  initializeMedia(call);
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-export]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    const select = root.querySelector<HTMLSelectElement>("[data-lms-export-section]")!;
+    const button = root.querySelector<HTMLButtonElement>("[data-lms-export-download]")!;
+    let cursor: string | undefined;
+    let pageNumber = 1;
+    select.addEventListener("change", () => {
+      cursor = undefined;
+      pageNumber = 1;
+      button.disabled = false;
+      button.textContent = "Download first page";
+      feedback(root, "");
+    });
+    button.addEventListener("click", async () => {
+      button.disabled = true;
+      select.disabled = true;
+      try {
+        const page = await call<Page<unknown>>(
+          "learner/export",
+          { section: select.value, cursor, limit: 5 },
+          "GET",
+        );
+        const url = URL.createObjectURL(
+          new Blob([JSON.stringify(page, null, 2)], { type: "application/json" }),
+        );
+        const link = node("a");
+        link.href = url;
+        link.download = `lms-${select.value}-${pageNumber}.json`;
+        document.body.append(link);
+        link.click();
+        link.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+        cursor = page.cursor;
+        pageNumber++;
+        button.disabled = !page.hasMore;
+        button.textContent = page.hasMore ? "Download next page" : "Section downloaded";
+        feedback(
+          root,
+          page.hasMore
+            ? "Page downloaded. Download the next page to continue."
+            : "All pages in this section downloaded. Choose another section to continue.",
+        );
+      } catch (error) {
+        button.disabled = false;
+        feedback(root, error instanceof Error ? error.message : "Export failed.", true);
+      } finally {
+        select.disabled = false;
+      }
+    });
+  }
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-lesson]:not([data-lms-started])",
+  )) {
+    root.dataset.lmsStarted = "true";
+    if (root.dataset.preview !== "true")
+      void call("learner/start", data(root)).catch((cause) => {
+        const button = root.querySelector<HTMLButtonElement>("[data-lms-complete]");
+        if (button) button.disabled = true;
+        const form = root.querySelector("form[data-lms-route='learner/complete']");
+        if (form)
+          feedback(form, cause instanceof Error ? cause.message : "Could not start lesson.", true);
+      });
+  }
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-discussions]:not([data-lms-loaded])",
+  )) {
+    root.dataset.lmsLoaded = "true";
+    void renderDiscussions(root);
+  }
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-notifications]:not([data-lms-loaded])",
+  )) {
+    root.dataset.lmsLoaded = "true";
+    void updates(root);
+  }
+  for (const button of document.querySelectorAll<HTMLButtonElement>(
+    "[data-lms-print]:not([data-lms-bound])",
+  )) {
+    button.dataset.lmsBound = "true";
+    button.addEventListener("click", () => window.print());
+  }
+  for (const button of document.querySelectorAll<HTMLButtonElement>(
+    "[data-lms-copy-link]:not([data-lms-bound])",
+  )) {
+    button.dataset.lmsBound = "true";
+    button.addEventListener("click", async () => {
+      const status = document.querySelector("[data-lms-copy-status]");
+      const url = location.origin + location.pathname;
+      try {
+        await navigator.clipboard.writeText(url);
+        if (status) status.textContent = "Verification link copied.";
+      } catch {
+        if (status) status.textContent = `Verification link: ${url}`;
+      }
+    });
+  }
+}
+initialize();
+document.addEventListener("astro:page-load", initialize);

package/astro/components/CertificateCard.astro

@@ -0,0 +1,83 @@
+---
+import type { Certificate } from "@anantagnanam/lms/types";
+interface Verification {
+  id: string;
+  valid: boolean;
+  shared: boolean;
+  learnerName: string | null;
+  courseTitle: string;
+  issuerName: string;
+  issuedAt: string;
+}
+interface Props {
+  verification: Verification;
+  certificate?: Certificate | null;
+}
+const { verification, certificate } = Astro.props;
+---
+
+<section class="lms-certificate-page">
+  <header class="lms-certificate-intro">
+    <p class="lms-eyebrow">A MILESTONE WORTH REMEMBERING</p>
+    <h1>{certificate ? "Your learning, recognised" : "Certificate verification"}</h1>
+    <p class="lms-lead">
+      {verification.valid
+        ? "This certificate was issued for a completed learning path."
+        : "This certificate has been revoked."}
+    </p>
+  </header>
+  <article class:list={["lms-certificate", { "lms-certificate-revoked": !verification.valid }]}>
+    <div class="lms-certificate-top">
+      <span>{verification.issuerName}</span>
+      <span class="lms-certificate-mark" aria-hidden="true">
+        ∞
+      </span>
+    </div>
+    <p class="lms-eyebrow">CERTIFICATE OF COMPLETION</p>
+    <p>This recognises</p>
+    <h2>
+      {certificate?.learnerName ??
+        verification.learnerName ??
+        "A learner who keeps their name private"}
+    </h2>
+    <p>for successfully completing</p>
+    <h3>{verification.courseTitle}</h3>
+    <div class="lms-certificate-rule"></div>
+    <div class="lms-certificate-bottom">
+      <div>
+        <span class="lms-eyebrow">ISSUED</span>
+        <p>
+          {new Date(verification.issuedAt).toLocaleDateString("en-IN", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </p>
+      </div>
+      <div>
+        <span class="lms-eyebrow">STATUS</span>
+        <p>{verification.valid ? "Verified completion ✓" : "Revoked"}</p>
+      </div>
+    </div>
+    <small>Certificate {verification.id}</small>
+  </article>
+  {certificate && (
+    <div class="lms-certificate-controls">
+      <button class="lms-btn" type="button" data-lms-print>
+        Print or save as PDF
+      </button>
+      <form data-lms-route="learner/certificate/share" data-lms-reload>
+        <input type="hidden" name="courseId" value={certificate.courseId} />
+        <input type="hidden" name="shared" value={certificate.shared ? "false" : "true"} />
+        <button class="lms-btn lms-btn-outline" type="submit">
+          {certificate.shared ? "Keep my name private" : "Share my name on verification"}
+        </button>
+        <p data-lms-feedback aria-live="polite"></p>
+      </form>
+      <button class="lms-btn lms-btn-outline" type="button" data-lms-copy-link>
+        Copy verification link
+      </button>
+      <p data-lms-copy-status aria-live="polite"></p>
+    </div>
+  )}
+</section>

package/astro/components/CourseCard.astro

@@ -0,0 +1,61 @@
+---
+import { Image } from "emdash/ui";
+import { courseUrl } from "@anantagnanam/lms/server";
+import { basePath } from "virtual:anantagnanam-lms/config";
+import type { CourseCard } from "@anantagnanam/lms/types";
+interface Props {
+  course: CourseCard;
+}
+const { course } = Astro.props;
+---
+
+<article class="lms-course-card">
+  <a
+    class="lms-card-art"
+    href={courseUrl(basePath, course.slug)}
+    aria-label={`Explore ${course.title}`}
+    tabindex="-1"
+  >
+    {course.featuredImage ? (
+      <Image image={course.featuredImage} width={760} height={440} loading="lazy" />
+    ) : (
+      <div class="lms-course-cover">
+        <svg viewBox="0 0 120 100" width="140" height="116" aria-hidden="true">
+          <path
+            d="M60 28C45 17 23 18 13 25v55c14-8 31-8 47 2 16-10 33-10 47-2V25c-10-7-32-8-47 3Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M60 29v53M25 35c9-2 16-1 24 3M25 46c9-2 16-1 24 3M25 57c9-2 16-1 24 3M71 38c9-4 16-5 24-3M71 49c9-4 16-5 24-3M71 60c9-4 16-5 24-3"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+        </svg>
+        <span>{course.category || "A new perspective"}</span>
+      </div>
+    )}
+    <span class="lms-free-label">FREE</span>
+  </a>
+  <div class="lms-card-body">
+    <div class="lms-card-meta">
+      <span>{course.category || "Learning"}</span>
+      <span>{course.level === "all" ? "All levels" : course.level}</span>
+    </div>
+    <h2>
+      <a href={courseUrl(basePath, course.slug)}>{course.title}</a>
+    </h2>
+    <p>{course.summary}</p>
+    <div class="lms-card-footer">
+      <span>
+        {course.lessonCount} lessons · {course.durationMinutes} min
+      </span>
+      <span aria-hidden="true">↗</span>
+    </div>
+    {course.instructorName && <small>With {course.instructorName}</small>}
+  </div>
+</article>