@anantagnanam/lms 0.0.0-stage → 0.1.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,78 @@
-# 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.1.0 provides free courses, flexible enrollment, cohorts, lessons, quizzes, assignments, progress, certificates, discussions, moderation, reporting, and notifications.
+
+## Installation
+
+Install the public npm release in an existing EmDash site:
+
+```sh
+npm install @anantagnanam/lms
+```
+
+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/teach`: instructor course studio
+- `/_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.
+
+## 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.
+
+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,433 @@
+import { API_BASE } from "@anantagnanam/lms";
+import type {
+  Answers,
+  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,
+    credentials: "same-origin",
+    headers,
+    ...(method === "POST" ? { body: JSON.stringify(input) } : {}),
+  });
+  const result = (await response.json()) as {
+    success: boolean;
+    data?: T;
+    error?: { message?: string };
+  };
+  if (!response.ok || !result.success)
+    throw new Error(result.error?.message ?? "Please try again.");
+  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 ("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 readAnswers(form: HTMLFormElement, attempt: PublicQuizAttempt): Answers {
+  const answers: Answers = {};
+  const values = new FormData(form);
+  for (const question of attempt.questions) {
+    const picked = values.getAll(question.id).map(String);
+    if (question.type === "multiple") answers[question.id] = picked;
+    else if (picked[0]) answers[question.id] = picked[0];
+  }
+  return answers;
+}
+function renderQuiz(root: HTMLElement, attempt: PublicQuizAttempt) {
+  const content = root.querySelector<HTMLElement>("[data-lms-quiz-content]")!;
+  content.replaceChildren();
+  const form = node("form");
+  const timer = node("p", "", "lms-quiz-timer");
+  timer.setAttribute("aria-live", "off");
+  form.append(timer);
+  for (const question of attempt.questions) {
+    const fieldset = node("fieldset", undefined, "lms-quiz-question");
+    fieldset.append(node("legend", question.prompt));
+    if (question.type === "short") {
+      const input = node("input");
+      input.name = question.id;
+      input.type = "text";
+      input.maxLength = 2000;
+      input.setAttribute("aria-label", "Your answer");
+      const saved = attempt.answers?.[question.id];
+      if (typeof saved === "string") input.value = saved;
+      fieldset.append(input);
+    } else
+      for (const option of question.options) {
+        const label = node("label", undefined, "lms-quiz-option");
+        const input = node("input");
+        input.name = question.id;
+        input.type = question.type === "multiple" ? "checkbox" : "radio";
+        input.value = option.id;
+        const saved = attempt.answers?.[question.id];
+        input.checked = Array.isArray(saved) ? saved.includes(option.id) : saved === option.id;
+        label.append(input, node("span", option.text));
+        fieldset.append(label);
+      }
+    form.append(fieldset);
+  }
+  const button = node("button", "Submit answers", "lms-btn");
+  button.type = "submit";
+  form.append(button);
+  content.append(form);
+  let interval: ReturnType<typeof setInterval> | undefined;
+  let saving: ReturnType<typeof setTimeout> | undefined;
+  let submitting = false;
+  const stop = () => {
+    if (interval) clearInterval(interval);
+    if (saving) clearTimeout(saving);
+  };
+  form.addEventListener("input", () => {
+    if (saving) clearTimeout(saving);
+    saving = setTimeout(() => {
+      if (!submitting && form.isConnected)
+        void call("learner/quiz/draft", {
+          ...data(root),
+          attemptId: attempt.id,
+          answers: readAnswers(form, attempt),
+        }).catch(() => {});
+    }, 700);
+  });
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    if (submitting) return;
+    submitting = true;
+    button.disabled = true;
+    stop();
+    feedback(root, "Checking your answers…");
+    try {
+      const result = await call<{ attempt: PublicQuizAttempt }>("learner/quiz/submit", {
+        ...data(root),
+        attemptId: attempt.id,
+        answers: readAnswers(form, attempt),
+      });
+      feedback(
+        root,
+        `${result.attempt.passed ? "Passed" : "Not passed yet"} · ${result.attempt.percent}%`,
+      );
+      const outcome = node("div");
+      for (const item of result.attempt.feedback) {
+        const section = node("div", undefined, "lms-notice");
+        const question = attempt.questions.find((entry) => entry.id === item.questionId);
+        section.append(
+          node("strong", `${item.correct ? "✓" : "○"} ${question?.prompt ?? "Question"}`),
+        );
+        if (item.explanation) section.append(node("p", item.explanation));
+        outcome.append(section);
+      }
+      content.replaceChildren(outcome);
+      const start = root.querySelector<HTMLButtonElement>("[data-lms-quiz-start]");
+      if (start) {
+        start.hidden = result.attempt.passed;
+        start.disabled = false;
+        start.textContent = "Try another attempt";
+      }
+      if (result.attempt.passed) {
+        const continueLink = node("a", "Continue learning →", "lms-btn");
+        continueLink.href = root.dataset.nextUrl ?? window.location.pathname;
+        content.append(continueLink);
+      }
+    } catch (cause) {
+      feedback(
+        root,
+        cause instanceof Error ? cause.message : "Could not submit your answers.",
+        true,
+      );
+      button.disabled = false;
+      submitting = false;
+      const start = root.querySelector<HTMLButtonElement>("[data-lms-quiz-start]");
+      if (start) {
+        start.disabled = false;
+        start.hidden = false;
+        start.textContent = "Start a new attempt";
+      }
+    }
+  });
+  if (attempt.expiresAt) {
+    const tick = () => {
+      if (!form.isConnected) {
+        stop();
+        return;
+      }
+      const remaining = Math.max(
+        0,
+        Math.ceil((Date.parse(attempt.expiresAt!) - Date.now()) / 1000),
+      );
+      timer.textContent = `Time remaining ${Math.floor(remaining / 60)}:${String(remaining % 60).padStart(2, "0")}`;
+      if (!remaining) {
+        stop();
+        form.requestSubmit();
+      }
+    };
+    interval = setInterval(tick, 1000);
+    tick();
+  } else timer.textContent = "Take your time. This quiz is untimed.";
+}
+
+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);
+      } 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();
+  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>