@anantagnanam/lms 0.0.0-stage → 0.2.0

package/astro/components/CourseCatalog.astro

@@ -0,0 +1,96 @@
+---
+import CourseCard from "./CourseCard.astro";
+import type { CourseCard as CourseCardData, Page } from "@anantagnanam/lms/types";
+interface Props {
+  page: Page<CourseCardData>;
+  title: string;
+  description: string;
+  error?: string;
+}
+const { page, title, description, error } = Astro.props;
+const query = Astro.url.searchParams;
+const nextUrl = new URL(Astro.url);
+nextUrl.searchParams.set("cursor", page.cursor ?? "");
+---
+
+<section class="lms-hero">
+  <p class="lms-eyebrow">LEARNING THAT STAYS WITH YOU</p>
+  <h1>{title}</h1>
+  <p class="lms-lead">{description}</p>
+  <div class="lms-hero-notes">
+    <span>◎ Free courses</span>
+    <span>✓ Guided progress</span>
+    <span>∞ Lifelong curiosity</span>
+  </div>
+</section>
+<section class="lms-catalog" aria-label="Course catalog">
+  <div class="lms-section-heading">
+    <div>
+      <p class="lms-eyebrow">CHOOSE YOUR NEXT STEP</p>
+      <h2>Find your learning path</h2>
+    </div>
+  </div>
+  <form class="lms-filters" method="get" action={Astro.url.pathname}>
+    <label>
+      <span>Course title</span>
+      <input
+        type="search"
+        name="q"
+        value={query.get("q") ?? ""}
+        placeholder="Start typing a course title…"
+      />
+    </label>
+    <label>
+      <span>Level</span>
+      <select name="level">
+        <option value="all" selected={!query.get("level") || query.get("level") === "all"}>
+          All levels
+        </option>
+        {["beginner", "intermediate", "advanced"].map((level) => (
+          <option value={level} selected={query.get("level") === level}>
+            {level}
+          </option>
+        ))}
+      </select>
+    </label>
+    <label>
+      <span>Category</span>
+      <input name="category" value={query.get("category") ?? ""} placeholder="Any category" />
+    </label>
+    <button class="lms-btn" type="submit">
+      Find courses
+    </button>
+  </form>
+  {error && (
+    <p class="lms-notice lms-notice-error" role="alert">
+      {error}
+    </p>
+  )}
+  <div class="lms-cards">
+    {page.items.map((course) => (
+      <CourseCard course={course} />
+    ))}
+  </div>
+  {!page.items.length && !error && (
+    <div class="lms-empty">
+      <span aria-hidden="true">◎</span>
+      <h3>
+        {query.get("q") || query.get("category")
+          ? "No matching courses"
+          : "A new chapter is coming"}
+      </h3>
+      <p>
+        {query.get("q") || query.get("category")
+          ? "Try another course title or category."
+          : "New courses will appear here when they are published."}
+      </p>
+    </div>
+  )}
+  {page.hasMore && page.cursor && (
+    <nav class="lms-pagination" aria-label="Catalog pagination">
+      <a class="lms-btn lms-btn-outline" href={nextUrl.href}>
+        More courses →
+      </a>
+    </nav>
+  )}
+</section>

package/astro/components/CourseOverview.astro

@@ -0,0 +1,308 @@
+---
+import { Image } from "emdash/ui";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
+import type {
+  CourseDetail,
+  PublicEnrollment,
+  ProgressSummary,
+  Page,
+  Review,
+  CohortMembership,
+} from "@anantagnanam/lms/types";
+import { courseUrl, lessonUrl, certificateUrl, loginUrl } from "@anantagnanam/lms/server";
+import { basePath, loginPath } from "virtual:anantagnanam-lms/config";
+interface Props {
+  course: CourseDetail;
+  enrollment?: PublicEnrollment | null;
+  progress?: ProgressSummary;
+  reviews?: Page<Review>;
+  cohortId?: string;
+  cohortMembership?: CohortMembership | null;
+}
+const {
+  course,
+  enrollment = null,
+  progress,
+  reviews,
+  cohortId,
+  cohortMembership = null,
+} = Astro.props;
+const active =
+  enrollment &&
+  ["active", "completed"].includes(enrollment.status) &&
+  enrollment.effectiveAccess === "granted";
+const next = progress?.nextLessonId;
+const revisit =
+  !next && enrollment?.status === "completed"
+    ? course.modules
+        .flatMap((module) => module.lessons)
+        .find((lesson) => progress?.availability[lesson.id]?.available)
+    : undefined;
+---
+
+<nav class="lms-breadcrumbs" aria-label="Breadcrumb">
+  <a href={basePath}>Courses</a>
+  <span aria-hidden="true">/</span>
+  <span>{course.title}</span>
+</nav>
+<header class="lms-course-hero">
+  <div>
+    <p class="lms-eyebrow">{course.category || "YOUR NEXT LEARNING JOURNEY"}</p>
+    <h1>{course.title}</h1>
+    <p class="lms-lead">{course.summary}</p>
+    <div class="lms-tags">
+      <span>{course.level === "all" ? "All levels" : course.level}</span>
+      <span>{course.lessonCount} lessons</span>
+      <span>{course.durationMinutes} minutes</span>
+      <span>{course.language}</span>
+    </div>
+    {course.instructorName && (
+      <p class="lms-instructor">
+        Guided by <strong>{course.instructorName}</strong>
+      </p>
+    )}
+  </div>
+  <aside class="lms-enroll-card">
+    {course.featuredImage && <Image image={course.featuredImage} width={600} height={360} />}
+    <span class="lms-eyebrow">FREE TO LEARN</span>
+    <h2>{active ? "Your next step awaits" : "Begin your learning journey"}</h2>
+    {active && progress ? (
+      <>
+        <label class="lms-progress-label" for="course-progress">
+          {progress.completed} of {progress.total} required lessons complete
+        </label>
+        <progress id="course-progress" max="100" value={progress.percent}>
+          {progress.percent}%
+        </progress>
+        {next && (
+          <a class="lms-btn" href={lessonUrl(basePath, course.slug, next)}>
+            {enrollment.status === "completed" ? "Revisit lessons" : "Continue learning"} →
+          </a>
+        )}
+        {revisit && (
+          <a class="lms-btn" href={lessonUrl(basePath, course.slug, revisit.id)}>
+            Revisit lessons →
+          </a>
+        )}
+        {!next && progress.blockedLessonId && (
+          <LessonAvailabilityNote availability={progress.availability[progress.blockedLessonId]} />
+        )}
+        {enrollment.certificate && (
+          <a
+            class="lms-btn lms-btn-outline"
+            href={certificateUrl(basePath, enrollment.certificate.id)}
+          >
+            View certificate
+          </a>
+        )}
+      </>
+    ) : enrollment ? (
+      <div class="lms-notice">
+        <strong>
+          {enrollment.status === "pending"
+            ? "Your request is awaiting approval"
+            : enrollment.status === "active" || enrollment.status === "completed"
+              ? `Course access ${enrollment.effectiveAccess}`
+              : `Enrollment ${enrollment.status}`}
+        </strong>
+        <p>
+          {enrollment.status === "pending"
+            ? "An administrator will review your request. Check My Learning for updates."
+            : enrollment.decisionReason || "Contact an administrator to manage your access."}
+        </p>
+        <a href={`${basePath}/my-learning`}>Open My Learning →</a>
+        {progress?.blockedLessonId && (
+          <LessonAvailabilityNote availability={progress.availability[progress.blockedLessonId]} />
+        )}
+      </div>
+    ) : !Astro.locals.user ? (
+      <a class="lms-btn" href={loginUrl(loginPath, Astro.url.pathname + Astro.url.search)}>
+        Sign in to enroll →
+      </a>
+    ) : cohortId && cohortMembership?.status !== "active" ? (
+      <div class="lms-notice">
+        <p>
+          {cohortMembership
+            ? `Cohort membership ${cohortMembership.status}.`
+            : "This cohort requires administrator approval."}
+        </p>
+        <a class="lms-btn" href={`${basePath}/cohorts/${encodeURIComponent(cohortId)}`}>
+          {cohortMembership ? "View cohort membership" : "Request cohort membership"} →
+        </a>
+      </div>
+    ) : course.enrollmentMode === "invite" && !cohortId ? (
+      <p class="lms-notice">An administrator will enroll invited learners in this course.</p>
+    ) : (
+      <form data-lms-route="learner/enroll" data-lms-reload>
+        <input type="hidden" name="courseId" value={course.id} />
+        {cohortId && <input type="hidden" name="cohortId" value={cohortId} />}
+        <button class="lms-btn" type="submit">
+          {course.enrollmentMode === "approval" && !cohortId
+            ? "Request enrollment"
+            : "Enroll for free"}{" "}
+          →
+        </button>
+        <p data-lms-feedback aria-live="polite"></p>
+      </form>
+    )}
+    <ul class="lms-benefits">
+      <li>Learn at your own pace</li>
+      {course.sequential && <li>Follow a clear lesson sequence</li>}
+      {course.certificateEnabled && <li>Earn a completion certificate</li>}
+      {course.accessDays > 0 && <li>{course.accessDays} days of access</li>}
+    </ul>
+  </aside>
+</header>
+<div class="lms-course-content">
+  <section class="lms-content-section">
+    <p class="lms-eyebrow">A LITTLE CURIOSITY GOES A LONG WAY</p>
+    <h2>About this course</h2>
+    {course.description
+      .split(/\n\s*\n/)
+      .filter(Boolean)
+      .map((paragraph) => (
+        <p class="lms-text">{paragraph}</p>
+      ))}
+  </section>
+  {course.outcomes.length > 0 && (
+    <section class="lms-content-section lms-outcomes">
+      <h2>What you'll learn</h2>
+      <ul>
+        {course.outcomes.map((outcome) => (
+          <li>
+            <span aria-hidden="true">✓</span>
+            {outcome}
+          </li>
+        ))}
+      </ul>
+    </section>
+  )}
+  {course.requirements.length > 0 && (
+    <section class="lms-content-section">
+      <h2>Before you begin</h2>
+      <ul>
+        {course.requirements.map((requirement) => (
+          <li>{requirement}</li>
+        ))}
+      </ul>
+    </section>
+  )}
+  {course.prerequisites.length > 0 && (
+    <section class="lms-content-section">
+      <h2>Complete these courses first</h2>
+      <ul>
+        {course.prerequisites.map((prerequisite) => (
+          <li>
+            {prerequisite.slug ? (
+              <a href={courseUrl(basePath, prerequisite.slug)}>{prerequisite.title}</a>
+            ) : (
+              prerequisite.title
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  )}
+  <section class="lms-content-section">
+    <div class="lms-section-heading">
+      <div>
+        <p class="lms-eyebrow">ONE STEP AT A TIME</p>
+        <h2>Your course curriculum</h2>
+      </div>
+      <span>{course.modules.length} modules</span>
+    </div>
+    <div class="lms-curriculum">
+      {course.modules.map((module, moduleIndex) => (
+        <details open={moduleIndex === 0}>
+          <summary>
+            <span>
+              <small>MODULE {moduleIndex + 1}</small>
+              <strong>{module.title}</strong>
+            </span>
+            <span>{module.lessons.length} lessons</span>
+          </summary>
+          {module.description && <p>{module.description}</p>}
+          {(module.releaseDays > 0 || module.unlockAt) && (
+            <p class="lms-muted">
+              {module.releaseDays > 0 ? `Unlocks ${module.releaseDays} days after approval` : ""}
+              {module.unlockAt
+                ? ` · Available from ${new Date(module.unlockAt).toLocaleDateString("en-IN")}`
+                : ""}
+            </p>
+          )}
+          <ol>
+            {module.lessons.map((lesson, index) => (
+              <li>
+                <span class="lms-lesson-number">
+                  {enrollment?.progress[lesson.id]?.completedAt
+                    ? "✓"
+                    : String(index + 1).padStart(2, "0")}
+                </span>
+                <div>
+                  {(
+                    enrollment && ["active", "completed"].includes(enrollment.status)
+                      ? progress?.availability[lesson.id]?.available
+                      : lesson.preview
+                  ) ? (
+                    <a href={lessonUrl(basePath, course.slug, lesson.id)}>{lesson.title}</a>
+                  ) : (
+                    <strong>{lesson.title}</strong>
+                  )}
+                  <small>
+                    {lesson.kind} · {lesson.durationMinutes} min
+                    {!lesson.required ? " · optional" : ""}
+                  </small>
+                  <LessonAvailabilityNote availability={progress?.availability[lesson.id]} />
+                </div>
+                {lesson.preview && <span class="lms-badge">Preview</span>}
+              </li>
+            ))}
+          </ol>
+        </details>
+      ))}
+    </div>
+  </section>
+  {reviews && reviews.items.length > 0 && (
+    <section class="lms-content-section">
+      <h2>From fellow learners</h2>
+      <div class="lms-reviews">
+        {reviews.items.map((review) => (
+          <article>
+            <p class="lms-review-stars" aria-label={`${review.rating} out of 5 stars`}>
+              {"★".repeat(review.rating)}
+              {"☆".repeat(5 - review.rating)}
+            </p>
+            <p class="lms-text">{review.body}</p>
+            <small>{review.authorName}</small>
+          </article>
+        ))}
+      </div>
+    </section>
+  )}
+  {active && progress && progress.completed > 0 && (
+    <section class="lms-content-section">
+      <h2>Share your experience</h2>
+      <form class="lms-form" data-lms-route="learner/review">
+        <input type="hidden" name="courseId" value={course.id} />
+        <label>
+          <span>Your rating</span>
+          <select name="rating" required>
+            <option value="5">5 · Excellent</option>
+            <option value="4">4 · Very good</option>
+            <option value="3">3 · Good</option>
+            <option value="2">2 · Could improve</option>
+            <option value="1">1 · Needs work</option>
+          </select>
+        </label>
+        <label>
+          <span>Your review</span>
+          <textarea name="body" required rows={4} maxlength={3000}></textarea>
+        </label>
+        <button class="lms-btn" type="submit">
+          Submit review
+        </button>
+        <p data-lms-feedback aria-live="polite"></p>
+      </form>
+    </section>
+  )}
+</div>

package/astro/components/LearnerDashboard.astro

@@ -0,0 +1,127 @@
+---
+import type { CourseCard, PublicEnrollment, ProgressSummary, Page } from "@anantagnanam/lms/types";
+import { courseUrl, lessonUrl, certificateUrl } from "@anantagnanam/lms/server";
+import { basePath } from "virtual:anantagnanam-lms/config";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
+interface Props {
+  page: Page<{ course: CourseCard; enrollment: PublicEnrollment; progress: ProgressSummary }>;
+  error?: string;
+}
+const { page, error } = Astro.props;
+const next = new URL(Astro.url);
+next.searchParams.set("cursor", page.cursor ?? "");
+---
+
+<header class="lms-dashboard-header">
+  <p class="lms-eyebrow">YOUR LEARNING JOURNEY</p>
+  <h1>Welcome back{Astro.locals.user?.name ? `, ${Astro.locals.user.name.split(" ")[0]}` : ""}.</h1>
+  <p class="lms-lead">A little progress today becomes lasting knowledge tomorrow.</p>
+</header>
+{error && (
+  <p role="alert" class="lms-notice lms-notice-error">
+    {error}
+  </p>
+)}
+<div class="lms-dashboard-grid">
+  <section>
+    <div class="lms-section-heading">
+      <h2>My courses</h2>
+      <a href={basePath}>Explore more →</a>
+    </div>
+    {!page.items.length && !error && (
+      <div class="lms-empty">
+        <span aria-hidden="true">◎</span>
+        <h3>Your first step starts here</h3>
+        <p>Choose a free course and make room for a little curiosity.</p>
+        <a class="lms-btn" href={basePath}>
+          Find a course →
+        </a>
+      </div>
+    )}
+    {page.items.map(({ course, enrollment, progress }) => (
+      <article class="lms-learning-card">
+        <div class="lms-learning-card-top">
+          <span class="lms-eyebrow">{course.category || "LEARNING PATH"}</span>
+          <span class="lms-badge">{enrollment.status}</span>
+        </div>
+        <h3>
+          <a href={courseUrl(basePath, course.slug)}>{course.title}</a>
+        </h3>
+        <p>{course.summary}</p>
+        <div class="lms-progress-label">
+          <span>
+            {progress.completed}/{progress.total} required lessons
+          </span>
+          <strong>{progress.percent}%</strong>
+        </div>
+        <progress value={progress.percent} max="100">
+          {progress.percent}%
+        </progress>
+        {enrollment.status === "pending" && (
+          <p class="lms-notice">Your request is awaiting administrator approval.</p>
+        )}
+        {enrollment.decisionReason && <p class="lms-notice">{enrollment.decisionReason}</p>}
+        {enrollment.status !== "pending" && enrollment.effectiveAccess !== "granted" && (
+          <p class="lms-notice">
+            Course access {enrollment.effectiveAccess}. Your learning progress is saved.
+          </p>
+        )}
+        <div class="lms-actions">
+          {!progress.nextLessonId && progress.blockedLessonId && (
+            <LessonAvailabilityNote
+              availability={progress.availability[progress.blockedLessonId]}
+            />
+          )}
+          {["active", "completed"].includes(enrollment.status) &&
+            enrollment.effectiveAccess === "granted" &&
+            progress.nextLessonId && (
+              <a class="lms-btn" href={lessonUrl(basePath, course.slug, progress.nextLessonId)}>
+                Continue learning →
+              </a>
+            )}
+          <a class="lms-btn lms-btn-outline" href={courseUrl(basePath, course.slug)}>
+            Course overview
+          </a>
+          {enrollment.certificate && (
+            <a
+              class="lms-btn lms-btn-outline"
+              href={certificateUrl(basePath, enrollment.certificate.id)}
+            >
+              Certificate ✧
+            </a>
+          )}
+        </div>
+        {enrollment.status === "pending" && (
+          <form
+            data-lms-route="learner/cancel"
+            data-lms-reload
+            data-lms-confirm="Cancel this enrollment request?"
+          >
+            <input type="hidden" name="courseId" value={course.id} />
+            <button class="lms-text-button" type="submit">
+              Cancel request
+            </button>
+            <p data-lms-feedback aria-live="polite"></p>
+          </form>
+        )}
+      </article>
+    ))}
+    {page.hasMore && page.cursor && (
+      <a class="lms-btn lms-btn-outline" href={next.href}>
+        More learning records →
+      </a>
+    )}
+  </section>
+  <aside class="lms-notifications">
+    <p class="lms-eyebrow">STAY IN THE LOOP</p>
+    <h2>Your updates</h2>
+    <div data-lms-notifications>
+      <p class="lms-muted">Loading your updates…</p>
+    </div>
+    <div class="lms-learning-tip">
+      <span aria-hidden="true">∞</span>
+      <h3>Small steps. Deep understanding.</h3>
+      <p>Return to a lesson, write down a question, or explain a new idea in your own words.</p>
+    </div>
+  </aside>
+</div>

package/astro/components/LearningShell.astro

@@ -0,0 +1,37 @@
+---
+import { basePath } from "virtual:anantagnanam-lms/config";
+import "../styles.css";
+const path = Astro.url.pathname;
+---
+
+<div class="lms-root">
+  <nav class="lms-subnav" aria-label="Learning">
+    <a href={basePath} aria-current={path === basePath ? "page" : undefined}>
+      Explore courses
+    </a>
+    <a href={`${basePath}/paths`} aria-current={path === `${basePath}/paths` ? "page" : undefined}>
+      Learning paths
+    </a>
+    <a
+      href={`${basePath}/my-learning/library`}
+      aria-current={path === `${basePath}/my-learning/library` ? "page" : undefined}
+    >
+      My library &amp; preferences
+    </a>
+    <a
+      href={`${basePath}/my-learning`}
+      aria-current={path === `${basePath}/my-learning` ? "page" : undefined}
+    >
+      My learning
+    </a>
+    {Astro.locals.user && Astro.locals.user.role >= 20 && (
+      <a href={`${basePath}/teach`}>Course studio</a>
+    )}
+  </nav>
+  <main id="lms-main" class="lms-container">
+    <slot />
+  </main>
+</div>
+<script>
+  import "../client";
+</script>

package/astro/components/LessonAvailabilityNote.astro

@@ -0,0 +1,26 @@
+---
+import type { LessonAvailability } from "@anantagnanam/lms/types";
+interface Props {
+  availability?: LessonAvailability;
+}
+const { availability } = Astro.props;
+---
+
+{availability && !availability.available && (
+  <small class="lms-lock-note">
+    {availability.reason}
+    {availability.releaseAt && (
+      <span>
+        {" "}
+        Available from{" "}
+        <time datetime={availability.releaseAt}>
+          {new Date(availability.releaseAt).toLocaleString("en-IN", {
+            timeZone: "UTC",
+            timeZoneName: "short",
+          })}
+        </time>
+        .
+      </span>
+    )}
+  </small>
+)}

package/astro/components/LessonContent.astro

@@ -0,0 +1,53 @@
+---
+import { PortableText, type TypedObject } from "emdash/ui";
+import MediaPlayer from "./MediaPlayer.astro";
+import type { PublicLesson } from "@anantagnanam/lms/types";
+interface Props {
+  lesson: PublicLesson;
+}
+const { lesson } = Astro.props;
+---
+
+{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}
+    captions={lesson.captions ?? []}
+  />
+)}
+{lesson.transcript && (
+  <details class="lms-resources">
+    <summary>Read transcript</summary>
+    <p class="lms-text">{lesson.transcript}</p>
+  </details>
+)}
+<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>
+)}