explico 0.13.0 → 0.14.0

package/src/components/starlight/LayoutHeader.astro

@@ -1,8 +1,25 @@
 ---
 import DefaultHeader from '@astrojs/starlight/components/Header.astro';
+import { loadManifest } from '../../compiler/manifest';
+import { APPEARANCE_DEFAULTS } from '../../compiler/course-config';
+import ReadingMemoryNotice from './ReadingMemoryNotice.astro';
+
+// The course's `appearance` (zones, slide edges): `zones.css` and
+// `deck.css` read it as `:root:has([data-explico-zones='…'])`, so the first
+// painted frame already has it. Without the element (a page with no
+// header) the defaults apply.
+const { appearance = APPEARANCE_DEFAULTS } = await loadManifest();
 ---
 
 <DefaultHeader />
+<div
+  data-explico-appearance
+  data-explico-zones={appearance.zones}
+  data-explico-slides={appearance.slides}
+  hidden
+>
+</div>
+<ReadingMemoryNotice />
 
 <script>
   import { createBrowserPreferenceStore } from '../../session/PreferenceStore';

package/src/components/starlight/LayoutPageTitle.astro

@@ -15,6 +15,7 @@
 import DefaultPageTitle from '@astrojs/starlight/components/PageTitle.astro';
 import { loadManifest } from '../../compiler/manifest';
 import { isLessonSlug } from '../../compiler/lesson-derivation';
+import { chapterSlides, deckOfRoute, partDeckOf } from '../deck/deck-context';
 
 const route = Astro.locals.starlightRoute;
 const routeSlug = route.entry.id;
@@ -31,9 +32,42 @@ const part = manifest.parts.find((entry) => entry.dir === partDir);
 const isPartPage = part !== undefined && !isLessonSlug(routeSlug);
 
 const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+// A deck's page (docs/authoring/deck.md) opens on its Present button; a
+// chapter links to its slides — its own deck, or its section of its part's
+// deck — and a part's page to the part's deck.
+const deck = deckOfRoute(manifest, routeSlug);
+const chapterDeck = deck || isPartPage ? undefined : chapterSlides(manifest, routeSlug);
+const deckChapter = deck?.chapter
+  ? manifest.lessons.find((lesson) => lesson.slug === deck.chapter)
+  : undefined;
+const partDeck = isPartPage ? partDeckOf(manifest, partDir) : undefined;
+// A part's deck goes back to its part's page, when the part has one.
+const deckPart = deck?.part === undefined ? undefined : manifest.parts.find((entry) => entry.dir === deck.part);
 // A part is only a link when there is a page behind its directory URL.
 const partHref =
   part?.overview && !isPartPage ? `${base}${part.link}` : undefined;
+
+// Under the title of a chapter or a part's page, a line the sidebar's script
+// shows when the page changed since this reader last opened it
+// (`page-marks.ts`); hidden in the markup, and never shown without the
+// reader's yes to the course remembering their reading.
+const pageSlug = isPartPage ? `${partDir}/index` : routeSlug;
+const changelogHref = manifest.about.changelogHref;
+const tracked =
+  manifest.pageVersions?.record.pages[pageSlug] !== undefined &&
+  (manifest.readingMemory ?? 'ask') === 'ask' &&
+  (manifest.sidebarMarks?.changed ?? true);
+
+// The marks a deck's page puts on its frames for a reader
+// (`session/deck-memory.ts`): the sidebar's two (`sidebarMarks`), a frame not shown
+// yet as a page not opened yet, and none without reading memory.
+const deckMarks =
+  (manifest.readingMemory ?? 'ask') === 'ask'
+    ? [
+        ...((manifest.sidebarMarks?.unopened ?? true) ? ['unseen'] : []),
+        ...((manifest.sidebarMarks?.changed ?? true) ? ['changed'] : []),
+      ].join(' ')
+    : '';
 ---
 
 {
@@ -57,8 +91,84 @@ const partHref =
   )
 }
 <DefaultPageTitle />
+{
+  deck && (
+    // Not export chrome: the deck's standalone HTML presents offline.
+    <div class="deck-actions not-content" data-deck-actions data-deck-marks={deckMarks || undefined}>
+      <button type="button" class="deck-actions__present" data-deck-present>
+        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M7 4l13 8-13 8z" fill="currentColor" /></svg>
+        Present
+      </button>
+      {deckChapter && <a href={`${base}/${deckChapter.slug}/`}>Read the chapter</a>}
+      {deckPart?.overview && <a href={`${base}${deckPart.link}`}>Open the part</a>}
+      <span class="deck-actions__count">{deck.frames.length} slides</span>
+    </div>
+  )
+}
+{
+  chapterDeck && (
+    <div class="deck-actions not-content" data-explico-export-chrome="deck-actions">
+      <a href={`${base}/${chapterDeck.path}`}>Slides for this chapter</a>
+    </div>
+  )
+}
+{
+  partDeck && (
+    <div class="deck-actions not-content" data-explico-export-chrome="deck-actions">
+      <a href={`${base}/${partDeck.slug}/`}>Slides for this part</a>
+    </div>
+  )
+}
+{
+  tracked && (
+    <p class="page-changed not-content" data-explico-page-changed hidden>
+      <span class="page-changed__mark" aria-hidden="true" />
+      This page changed since you last opened it.
+      {changelogHref && (
+        <>
+          {' '}
+          <a href={changelogHref}>What changed</a>
+        </>
+      )}
+    </p>
+  )
+}
 
 <style>
+  .page-changed {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem 0.45rem;
+    margin: 0.5rem 0 0;
+    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-sm);
+    line-height: 1.4;
+  }
+
+  .page-changed[hidden] {
+    display: none;
+  }
+
+  .page-changed__mark {
+    flex: none;
+    width: 0.4375rem;
+    height: 0.4375rem;
+    border-radius: 50%;
+    background: var(--sl-color-text-accent);
+    transform: translateY(-0.05em);
+  }
+
+  .page-changed a {
+    color: var(--sl-color-text-accent);
+  }
+
+  @media print {
+    .page-changed {
+      display: none;
+    }
+  }
+
   .lesson-breadcrumb {
     margin-block-start: 1rem;
     /* The title's own `margin-top: 1rem` would otherwise open a second gap of