@anantagnanam/lms 0.0.0-stage → 0.1.0

package/astro/components/LessonPlayer.astro

@@ -0,0 +1,323 @@
+---
+import { PortableText, type TypedObject } from "emdash/ui";
+import MediaPlayer from "./MediaPlayer.astro";
+import type {
+  CourseDetail,
+  PublicLesson,
+  PublicEnrollment,
+  ProgressSummary,
+} from "@anantagnanam/lms/types";
+import { courseUrl, lessonUrl, certificateUrl } from "@anantagnanam/lms/server";
+import { basePath } from "virtual:anantagnanam-lms/config";
+interface Props {
+  course: CourseDetail;
+  lesson: PublicLesson;
+  enrollment?: PublicEnrollment | null;
+  progress?: ProgressSummary;
+  preview?: boolean;
+}
+const { course, lesson, enrollment = null, progress, preview = false } = Astro.props;
+const all = course.modules.flatMap((module) => module.lessons);
+const index = all.findIndex((item) => item.id === lesson.id);
+const nextLesson = all[index + 1];
+const nextUrl = nextLesson
+  ? lessonUrl(basePath, course.slug, nextLesson.id)
+  : `${basePath}/my-learning`;
+const current = enrollment?.progress[lesson.id];
+const complete = Boolean(current?.completedAt);
+const attempt = current?.quizAttempts.at(-1);
+const assignment = current?.assignments.at(-1);
+---
+
+<nav class="lms-breadcrumbs" aria-label="Breadcrumb">
+  <a href={basePath}>Courses</a>
+  <span>/</span>
+  <a href={courseUrl(basePath, course.slug)}>{course.title}</a>
+  <span>/</span>
+  <span>{lesson.title}</span>
+</nav>
+<div
+  class="lms-reader-grid"
+  data-lms-lesson
+  data-course-id={course.id}
+  data-lesson-id={lesson.id}
+  data-preview={preview ? "true" : "false"}
+>
+  <aside class="lms-course-sidebar">
+    <a href={courseUrl(basePath, course.slug)} class="lms-sidebar-course">
+      {course.title}
+    </a>
+    {progress && (
+      <>
+        <p>{progress.percent}% complete</p>
+        <progress max="100" value={progress.percent}>
+          {progress.percent}%
+        </progress>
+      </>
+    )}
+    {course.modules.map((module, moduleIndex) => (
+      <details open={module.lessons.some((entry) => entry.id === lesson.id)}>
+        <summary>
+          <small>MODULE {moduleIndex + 1}</small>
+          {module.title}
+        </summary>
+        <ol>
+          {module.lessons.map((entry) => (
+            <li>
+              <a
+                href={lessonUrl(basePath, course.slug, entry.id)}
+                aria-current={entry.id === lesson.id ? "page" : undefined}
+              >
+                <span aria-hidden="true">
+                  {enrollment?.progress[entry.id]?.completedAt ? "✓" : "○"}
+                </span>
+                <span>
+                  {entry.title}
+                  <small>
+                    {entry.kind} · {entry.durationMinutes} min
+                  </small>
+                </span>
+              </a>
+            </li>
+          ))}
+        </ol>
+      </details>
+    ))}
+  </aside>
+  <article class="lms-lesson">
+    <header>
+      <p class="lms-eyebrow">
+        LESSON {index + 1} OF {all.length} · {lesson.kind.toUpperCase()}
+        {preview ? " · FREE PREVIEW" : ""}
+      </p>
+      <h1>{lesson.title}</h1>
+      {lesson.summary && <p class="lms-lead">{lesson.summary}</p>}
+    </header>
+    {preview && (
+      <p class="lms-notice">
+        You're viewing a free preview.{" "}
+        <a href={courseUrl(basePath, course.slug)}>Enroll to save your progress →</a>
+      </p>
+    )}
+    {lesson.mediaUrl && ["video", "audio", "live"].includes(lesson.kind) && (
+      <MediaPlayer
+        url={lesson.mediaUrl}
+        kind={lesson.kind as "video" | "audio" | "live"}
+        title={lesson.title}
+        startsAt={lesson.liveStartsAt}
+      />
+    )}
+    <div class="lms-lesson-body">
+      {lesson.portableText.length > 0 ? (
+        <PortableText value={lesson.portableText as TypedObject[]} />
+      ) : (
+        lesson.body
+          .split(/\n\s*\n/)
+          .filter(Boolean)
+          .map((paragraph) => <p class="lms-text">{paragraph}</p>)
+      )}
+    </div>
+    {lesson.resources.length > 0 && (
+      <section class="lms-resources">
+        <h2>Keep exploring</h2>
+        <ul>
+          {lesson.resources.map((resource) => (
+            <li>
+              <a href={resource.url} target="_blank" rel="noopener noreferrer">
+                <span aria-hidden="true">↗</span>
+                <span>
+                  {resource.title}
+                  {resource.description && <small>{resource.description}</small>}
+                </span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </section>
+    )}
+    {!preview && lesson.kind === "quiz" && lesson.quiz && (
+      <section class="lms-assessment">
+        <p class="lms-eyebrow">CHECK YOUR UNDERSTANDING</p>
+        <h2>Lesson quiz</h2>
+        <p>
+          {lesson.quiz.questionCount} questions · Pass with {lesson.quiz.passingPercent}% ·{" "}
+          {lesson.quiz.maxAttempts} attempts
+          {lesson.quiz.timeLimitMinutes
+            ? ` · ${lesson.quiz.timeLimitMinutes} minutes per attempt`
+            : ""}
+        </p>
+        {complete ? (
+          <p class="lms-notice">✓ Quiz passed. {attempt?.percent}%</p>
+        ) : (
+          <div
+            data-lms-quiz
+            data-course-id={course.id}
+            data-lesson-id={lesson.id}
+            data-next-url={nextUrl}
+          >
+            <button class="lms-btn" type="button" data-lms-quiz-start>
+              {attempt?.status === "in_progress" ? "Resume quiz" : "Start quiz"}
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+            <div data-lms-quiz-content></div>
+          </div>
+        )}
+        {current?.quizAttempts.length ? (
+          <details>
+            <summary>Your quiz attempts</summary>
+            <ol>
+              {current.quizAttempts.map((item) => (
+                <li>
+                  {new Date(item.startedAt).toLocaleString("en-IN")} ·{" "}
+                  {item.status === "expired"
+                    ? "Time expired"
+                    : item.status === "in_progress"
+                      ? "In progress"
+                      : `${item.percent}% · ${item.passed ? "Passed" : "Try again"}`}
+                </li>
+              ))}
+            </ol>
+          </details>
+        ) : null}
+      </section>
+    )}
+    {!preview && lesson.kind === "assignment" && lesson.assignment && (
+      <section class="lms-assessment">
+        <p class="lms-eyebrow">PUT LEARNING INTO PRACTICE</p>
+        <h2>Your assignment</h2>
+        <p class="lms-text">{lesson.assignment.instructions}</p>
+        <p>
+          {lesson.assignment.passingPoints}/{lesson.assignment.maxPoints} points to pass
+          {lesson.assignment.dueAt
+            ? ` · Due ${new Date(lesson.assignment.dueAt).toLocaleString("en-IN")}`
+            : ""}
+        </p>
+        {assignment && (
+          <div class="lms-notice">
+            <strong>
+              {assignment.status === "submitted"
+                ? "Submitted · awaiting feedback"
+                : `Graded · ${assignment.points}/${assignment.maxPoints}`}
+            </strong>
+            <p class="lms-text">{assignment.feedback}</p>
+            <details>
+              <summary>Your submission</summary>
+              <p class="lms-text">{assignment.body}</p>
+              {assignment.attachmentUrl && (
+                <a href={assignment.attachmentUrl} target="_blank" rel="noopener noreferrer">
+                  Open attachment ↗
+                </a>
+              )}
+            </details>
+          </div>
+        )}
+        {!complete &&
+          (!assignment ||
+            (assignment.status === "graded" && lesson.assignment.allowResubmission)) && (
+            <form class="lms-form" data-lms-route="learner/assignment" data-lms-reload>
+              <input type="hidden" name="courseId" value={course.id} />
+              <input type="hidden" name="lessonId" value={lesson.id} />
+              <label>
+                <span>Your work</span>
+                <textarea name="body" required rows={8} maxlength={20_000}></textarea>
+              </label>
+              <label>
+                <span>Attachment link (optional)</span>
+                <input name="attachmentUrl" type="url" placeholder="https://…" />
+              </label>
+              <button class="lms-btn" type="submit">
+                Submit assignment
+              </button>
+              <p data-lms-feedback aria-live="polite"></p>
+            </form>
+          )}
+      </section>
+    )}
+    {!preview && !["quiz", "assignment"].includes(lesson.kind) && (
+      <section class="lms-lesson-completion">
+        {complete ? (
+          <p class="lms-notice">✓ You've completed this lesson.</p>
+        ) : (
+          <form data-lms-route="learner/complete" data-lms-reload>
+            <input type="hidden" name="courseId" value={course.id} />
+            <input type="hidden" name="lessonId" value={lesson.id} />
+            <button class="lms-btn" type="submit" data-lms-complete>
+              Mark lesson complete ✓
+            </button>
+            {lesson.minStudySeconds > 0 && (
+              <p class="lms-muted">
+                Study this lesson for at least {lesson.minStudySeconds} seconds before marking it
+                complete.
+              </p>
+            )}
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        )}
+      </section>
+    )}
+    {enrollment?.certificate && (
+      <div class="lms-achievement">
+        <span aria-hidden="true">✧</span>
+        <div>
+          <h2>Look how far you've come</h2>
+          <p>You've completed this learning path.</p>
+          <a class="lms-btn" href={certificateUrl(basePath, enrollment.certificate.id)}>
+            View your certificate →
+          </a>
+        </div>
+      </div>
+    )}
+    <nav class="lms-lesson-navigation" aria-label="Lesson navigation">
+      {index > 0 ? (
+        <a href={lessonUrl(basePath, course.slug, all[index - 1]!.id)}>← Previous lesson</a>
+      ) : (
+        <a href={courseUrl(basePath, course.slug)}>← Course overview</a>
+      )}
+      {index + 1 < all.length && (
+        <a href={lessonUrl(basePath, course.slug, all[index + 1]!.id)}>Next lesson →</a>
+      )}
+    </nav>
+    {!preview && (
+      <>
+        <section class="lms-content-section">
+          <h2>A note to your future self</h2>
+          <p class="lms-muted">Only you can see these notes.</p>
+          <form class="lms-form" data-lms-route="learner/note">
+            <input type="hidden" name="courseId" value={course.id} />
+            <input type="hidden" name="lessonId" value={lesson.id} />
+            <label>
+              <span>Your lesson notes</span>
+              <textarea name="note" rows={5} maxlength={10_000}>{current?.note ?? ""}</textarea>
+            </label>
+            <button class="lms-btn lms-btn-outline" type="submit">
+              Save notes
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        </section>
+        <section
+          class="lms-content-section"
+          data-lms-discussions
+          data-course-id={course.id}
+          data-lesson-id={lesson.id}
+        >
+          <h2>Learn together</h2>
+          <p class="lms-muted">Ask a question, share an insight, or help another learner.</p>
+          <div data-lms-discussion-list></div>
+          <form class="lms-form" data-lms-route="learner/discussion">
+            <input type="hidden" name="courseId" value={course.id} />
+            <input type="hidden" name="lessonId" value={lesson.id} />
+            <label>
+              <span>Your contribution</span>
+              <textarea name="body" rows={4} required maxlength={5000}></textarea>
+            </label>
+            <button class="lms-btn lms-btn-outline" type="submit">
+              Post to discussion
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        </section>
+      </>
+    )}
+  </article>
+</div>

package/astro/components/MediaPlayer.astro

@@ -0,0 +1,60 @@
+---
+interface Props {
+  url: string;
+  kind: "video" | "audio" | "live";
+  title: string;
+  startsAt?: string | null;
+}
+const { url, kind, title, startsAt } = Astro.props;
+let embed: string | null = null;
+try {
+  const parsed = new URL(url, Astro.url.origin);
+  if (["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"].includes(parsed.hostname)) {
+    const id =
+      parsed.hostname === "youtu.be"
+        ? parsed.pathname.slice(1)
+        : (parsed.searchParams.get("v") ??
+          parsed.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/)?.[1]);
+    if (id && /^[a-zA-Z0-9_-]{11}$/.test(id))
+      embed = `https://www.youtube-nocookie.com/embed/${id}`;
+  } else if (["vimeo.com", "www.vimeo.com", "player.vimeo.com"].includes(parsed.hostname)) {
+    const id = parsed.pathname.match(/\/(?:video\/)?(\d+)$/)?.[1];
+    if (id) embed = `https://player.vimeo.com/video/${id}`;
+  }
+} catch {}
+---
+
+<div class="lms-media">
+  {kind === "live" ? (
+    <div class="lms-live-card">
+      <p class="lms-eyebrow">LIVE LEARNING SESSION</p>
+      <h2>{title}</h2>
+      {startsAt && (
+        <p>
+          Starts{" "}
+          {new Date(startsAt).toLocaleString("en-IN", { dateStyle: "long", timeStyle: "short" })}
+        </p>
+      )}
+      <a class="lms-btn" href={url} target="_blank" rel="noopener noreferrer">
+        Open meeting ↗
+      </a>
+    </div>
+  ) : kind === "audio" ? (
+    <audio src={url} controls preload="metadata" aria-label={title}></audio>
+  ) : embed ? (
+    <iframe
+      src={embed}
+      title={title}
+      allow="fullscreen; picture-in-picture; encrypted-media"
+      allowfullscreen
+      referrerpolicy="strict-origin-when-cross-origin"
+    ></iframe>
+  ) : (
+    <video src={url} controls preload="metadata" aria-label={title}></video>
+  )}
+  {kind !== "live" && (
+    <a class="lms-media-link" href={url} target="_blank" rel="noopener noreferrer">
+      Open media separately ↗
+    </a>
+  )}
+</div>

package/astro/components/index.ts

@@ -0,0 +1,7 @@
+export { default as LearningShell } from "./LearningShell.astro";
+export { default as CourseCatalog } from "./CourseCatalog.astro";
+export { default as CourseOverview } from "./CourseOverview.astro";
+export { default as LessonPlayer } from "./LessonPlayer.astro";
+export { default as LearnerDashboard } from "./LearnerDashboard.astro";
+export { default as CertificateCard } from "./CertificateCard.astro";
+export { default as CourseCard } from "./CourseCard.astro";

package/astro/layouts/AcademyLayout.astro

@@ -0,0 +1,84 @@
+---
+import { basePath, loginPath } from "virtual:anantagnanam-lms/config";
+import { loginUrl } from "@anantagnanam/lms/server";
+import "../styles.css";
+interface Props {
+  title: string;
+  description?: string;
+  robots?: string;
+}
+const {
+  title,
+  description = "Courses and guided learning from Ananta Gnanam.",
+  robots,
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title} · Ananta Gnanam</title>
+    <meta name="description" content={description} />
+    {robots && <meta name="robots" content={robots} />}
+    <style is:global>
+      body {
+        margin: 0;
+        background: #f7faf8;
+        color: #18271e;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      a {
+        color: inherit;
+      }
+      html {
+        scroll-behavior: smooth;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        html {
+          scroll-behavior: auto;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="lms-root">
+      <a class="lms-skip" href="#lms-main">
+        Skip to learning content
+      </a>
+      <header class="lms-site-header">
+        <a class="lms-brand" href={basePath}>
+          <span class="lms-brand-mark" aria-hidden="true">
+            ∞
+          </span>
+          <span>
+            Ananta Gnanam<small>ACADEMY</small>
+          </span>
+        </a>
+        <nav aria-label="Academy navigation">
+          <a href={basePath}>Explore courses</a>
+          <a href={`${basePath}/my-learning`}>My learning</a>
+          <a href="/">Main site ↗</a>
+          {!Astro.locals.user && (
+            <a class="lms-btn lms-btn-small" href={loginUrl(loginPath, Astro.url.pathname)}>
+              Sign in
+            </a>
+          )}
+        </nav>
+      </header>
+      <slot />
+      <footer class="lms-site-footer">
+        <a href="/">Ananta Gnanam</a>
+        <p>Infinite knowledge. Lifelong learning.</p>
+        <a href={basePath}>Keep exploring →</a>
+      </footer>
+    </div>
+  </body>
+</html>

package/astro/pages/certificate.astro

@@ -0,0 +1,57 @@
+---
+import Layout from "virtual:anantagnanam-lms/layout";
+import LearningShell from "../components/LearningShell.astro";
+import CertificateCard from "../components/CertificateCard.astro";
+import { lmsPublic, lmsLearner, LmsError } from "@anantagnanam/lms/server";
+import type { Certificate } from "@anantagnanam/lms/types";
+export const prerender = false;
+Astro.response.headers.set("Cache-Control", "private, no-store");
+let verification:
+  | {
+      id: string;
+      valid: boolean;
+      shared: boolean;
+      learnerName: string | null;
+      courseTitle: string;
+      issuerName: string;
+      issuedAt: string;
+      courseId?: string;
+    }
+  | undefined;
+let certificate: Certificate | null = null;
+let error = "";
+try {
+  verification = await lmsPublic<typeof verification>(
+    Astro.locals,
+    "certificates/verify",
+    { id: Astro.params.certificateId },
+    Astro.url.origin,
+  );
+  if (Astro.locals.user) {
+    try {
+      certificate = await lmsLearner<Certificate>(
+        Astro.locals,
+        "learner/certificate-by-id",
+        { id: Astro.params.certificateId },
+        Astro.url.origin,
+      );
+    } catch {}
+  }
+} catch (cause) {
+  Astro.response.status = cause instanceof LmsError ? cause.status : 503;
+  error = cause instanceof Error ? cause.message : "Certificate unavailable.";
+}
+---
+
+<Layout title="Learning certificate" robots="noindex, follow">
+  <LearningShell>
+    {verification ? (
+      <CertificateCard verification={verification} certificate={certificate} />
+    ) : (
+      <section class="lms-gate">
+        <h1>Certificate unavailable</h1>
+        <p>{error}</p>
+      </section>
+    )}
+  </LearningShell>
+</Layout>

package/astro/pages/cohort.astro

@@ -0,0 +1,102 @@
+---
+import Layout from "virtual:anantagnanam-lms/layout";
+import LearningShell from "../components/LearningShell.astro";
+import { lmsPublic, lmsLearner, loginUrl, courseUrl, LmsError } from "@anantagnanam/lms/server";
+import { basePath, loginPath } from "virtual:anantagnanam-lms/config";
+import type { CohortMembership, CourseCard } from "@anantagnanam/lms/types";
+export const prerender = false;
+Astro.response.headers.set("Cache-Control", "private, no-store");
+let cohort:
+  | {
+      id: string;
+      title: string;
+      startsAt: string | null;
+      endsAt: string | null;
+      courses: CourseCard[];
+    }
+  | undefined;
+let membership: CohortMembership | null = null;
+let error = "";
+try {
+  cohort = await lmsPublic<typeof cohort>(
+    Astro.locals,
+    "cohort",
+    { id: Astro.params.cohortId },
+    Astro.url.origin,
+  );
+  if (Astro.locals.user)
+    membership = await lmsLearner<CohortMembership | null>(
+      Astro.locals,
+      "learner/cohort",
+      { cohortId: Astro.params.cohortId },
+      Astro.url.origin,
+    );
+} catch (cause) {
+  Astro.response.status = cause instanceof LmsError ? cause.status : 503;
+  error = cause instanceof Error ? cause.message : "Cohort unavailable.";
+}
+---
+
+<Layout title={cohort?.title ?? "Cohort unavailable"} robots="noindex, follow">
+  <LearningShell>
+    {cohort ? (
+      <>
+        <header class="lms-dashboard-header">
+          <p class="lms-eyebrow">LEARN WITH A COHORT</p>
+          <h1>{cohort.title}</h1>
+          <p class="lms-lead">
+            A shared learning journey, with membership approved by an administrator.
+          </p>
+          {cohort.startsAt && (
+            <p>
+              Starts {new Date(cohort.startsAt).toLocaleDateString("en-IN")}
+              {cohort.endsAt
+                ? ` · Ends ${new Date(cohort.endsAt).toLocaleDateString("en-IN")}`
+                : ""}
+            </p>
+          )}
+        </header>
+        {membership ? (
+          <div class="lms-notice">
+            <strong>Membership {membership.status}</strong>
+            {membership.reason && <p>{membership.reason}</p>}
+            {membership.status === "pending" && (
+              <p>Your request is awaiting administrator approval.</p>
+            )}
+          </div>
+        ) : Astro.locals.user ? (
+          <form data-lms-route="learner/cohort/request" data-lms-reload>
+            <input type="hidden" name="cohortId" value={cohort.id} />
+            <button class="lms-btn" type="submit">
+              Request cohort membership →
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        ) : (
+          <a class="lms-btn" href={loginUrl(loginPath, Astro.url.pathname)}>
+            Sign in to request membership →
+          </a>
+        )}
+        <section class="lms-content-section">
+          <h2>Learning paths in this cohort</h2>
+          {cohort.courses.map((course) => (
+            <article class="lms-learning-card">
+              <h3>{course.title}</h3>
+              <p>{course.summary}</p>
+              <a
+                href={`${courseUrl(basePath, course.slug)}?cohort=${encodeURIComponent(cohort.id)}`}
+              >
+                Open course →
+              </a>
+            </article>
+          ))}
+        </section>
+      </>
+    ) : (
+      <section class="lms-gate">
+        <h1>Cohort unavailable</h1>
+        <p>{error}</p>
+      </section>
+    )}
+  </LearningShell>
+</Layout>