@abreen/tada 1.13.2 → 1.13.4

package/build/utils/trace-core.ts

@@ -187,17 +187,13 @@ export function renderTraceWidgetHtml({
     `<button class="trace-btn trace-first" disabled tabindex="-1" aria-label="First step" title="First step">${iconFirst}</button>` +
     `<button class="trace-btn trace-prev" disabled tabindex="-1" aria-label="Previous step" title="Previous step">${iconPrev}</button>` +
     `<span class="trace-step-counter"${counterStyle}>${counterContent}</span>` +
-    (disabled
-      ? `<button class="trace-btn trace-next" disabled tabindex="-1" aria-label="Next step" title="Next step">${iconNext}</button>`
-      : `<button class="trace-btn trace-next" aria-label="Next step" title="Next step">${iconNext}</button>`) +
-    (disabled
-      ? `<button class="trace-btn trace-last" disabled tabindex="-1" aria-label="Last step" title="Last step">${iconLast}</button>`
-      : `<button class="trace-btn trace-last" tabindex="-1" aria-label="Last step" title="Last step">${iconLast}</button>`);
+    `<button class="trace-btn trace-next" disabled tabindex="-1" aria-label="Next step" title="Next step">${iconNext}</button>` +
+    `<button class="trace-btn trace-last" disabled tabindex="-1" aria-label="Last step" title="Last step">${iconLast}</button>`;
   const wrapperAttrs = manifestUrl
     ? ` data-trace-manifest="${manifestUrl}"`
     : '';
   const wrapperClass = disabled
     ? 'trace-widget trace-disabled'
     : 'trace-widget';
-  return `<div class="${wrapperClass}"${wrapperAttrs}><noscript><p>This interactive trace requires JavaScript.</p></noscript><div class="trace-body"><div class="trace-toolbar"><div class="trace-controls" role="toolbar" aria-label="Trace navigation">${controls}</div></div><div class="trace-content"><div class="trace-diagram"></div><div class="trace-source-wrapper"><div class="trace-source">${highlightedSource}</div></div><pre class="trace-output"></pre></div></div></div>`;
+  return `<div class="${wrapperClass}"${wrapperAttrs}><noscript><p>This interactive trace requires JavaScript.</p></noscript><div class="trace-body"><div class="trace-toolbar"><div class="trace-controls" role="toolbar" aria-label="Trace navigation">${controls}</div></div><div class="trace-content"><div class="trace-diagram"></div><div class="trace-source-wrapper"><div class="trace-source">${highlightedSource}</div></div></div></div></div>`;
 }

package/init/content/labs/02/selection_sort.py

@@ -18,6 +18,6 @@ def selection(nums):
         swap(nums, i, index_smallest(nums, i))
 
 
-input1 = [4, 9, 2, 10, 19, 5, 7]
+input1 = [25, 31, 12, 9]
 selection(input1)
 print(input1)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/_base.scss

@@ -180,6 +180,73 @@ input[type='search'] {
   }
 }
 
+label:has(> input[type='checkbox']) {
+  display: inline-flex;
+  gap: 0.45em;
+  align-items: center;
+  font-size: var(--font-size-small);
+  font-weight: 500;
+
+  @include user-select(none);
+}
+
+input[type='checkbox'] {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-content: center;
+  width: 1.5em;
+  height: 1.25em;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: var(--fg-color);
+  appearance: none;
+  cursor: pointer;
+  background: var(--bg-color);
+  border: var(--control-border-width) solid var(--fg2-color);
+  border-radius: 0.25em;
+
+  &::after {
+    display: block;
+    width: 1.1em;
+    height: 1.1em;
+    content: '';
+    background-color: currentcolor;
+    opacity: 0;
+
+    @include contained-mask(var(--icon-check));
+  }
+
+  &:checked {
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  &:active:not(:disabled) {
+    color: var(--bg-color) !important;
+    background: var(--link-active-color) !important;
+  }
+
+  &:focus {
+    outline: 2px solid var(--theme-color);
+    outline-offset: 1px;
+    background-color: var(--bg2-color);
+    border-color: var(--fg-color);
+  }
+}
+
+@media (hover: hover) {
+  input[type='checkbox']:hover:not(:disabled) {
+    background: var(--bg2-color);
+  }
+}
+
 figure {
   margin: 1rem 0;
 

package/src/anchor/README.md

@@ -4,3 +4,12 @@ Append a link to each heading having an `id` attribute.
 
 When the link is clicked, `window.location` is updated and the heading is
 highlighted using the same function as the `toc` component.
+
+The heading link includes a real inline SVG hash icon, revealed on heading
+hover or link focus.
+
+For slide title headings (`div.slide > h2:first-child`), append a
+`Present from this slide` icon button. Clicking the button dispatches a
+bubbling `tada:slides-present` custom event with the slide index so the slides
+component can open presentation mode from that slide using the current
+`Full screen` checkbox state.

package/src/anchor/index.ts

@@ -2,32 +2,131 @@ function getElements(parent: HTMLElement): HTMLHeadingElement[] {
   return Array.from(parent.querySelectorAll('h1, h2, h3, h4, h5, h6'));
 }
 
+function createIcon(window: Window, type: 'hash' | 'present'): SVGSVGElement {
+  const svg = window.document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg',
+  );
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', '16');
+  svg.setAttribute('height', '16');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '1.5');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+
+  const paths =
+    type === 'hash'
+      ? ['M10 3 8 21', 'M16 3l-2 18', 'M4 9h17', 'M3 15h17']
+      : [
+          'M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z',
+          'M9 20h6',
+        ];
+
+  for (const d of paths) {
+    const path = window.document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'path',
+    );
+    path.setAttribute('d', d);
+    svg.appendChild(path);
+  }
+
+  return svg;
+}
+
+function getSlideIndex(slide: HTMLElement): number {
+  const rawIndex = slide.getAttribute('data-slide-index');
+  if (rawIndex != null) {
+    const parsed = Number.parseInt(rawIndex, 10);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+
+  const root = slide.closest('[data-slides-root]');
+  if (!root) {
+    return 0;
+  }
+
+  return Array.from(root.querySelectorAll('.slide')).indexOf(slide);
+}
+
+function isSlideTitleHeading(
+  heading: HTMLHeadingElement,
+): heading is HTMLHeadingElement & { parentElement: HTMLElement } {
+  const slide = heading.parentElement;
+  return (
+    heading.tagName === 'H2' &&
+    slide?.tagName === 'DIV' &&
+    slide.classList.contains('slide') &&
+    slide.firstElementChild === heading
+  );
+}
+
 export default (window: Window) => {
+  const view = window as Window & typeof globalThis;
   const elements = getElements(window.document.body);
-  if (elements == null) {
-    return;
-  }
+  const cleanups: (() => void)[] = [];
 
   elements.forEach(el => {
-    if (!el.id) {
+    if (el.id) {
+      const link = window.document.createElement('a');
+      link.className = 'heading-anchor';
+      link.href = `#${el.id}`;
+      link.title = 'Link to this heading';
+
+      // Move all existing child nodes into the link.
+      while (el.firstChild) {
+        link.appendChild(el.firstChild);
+      }
+      link.appendChild(createIcon(window, 'hash'));
+      el.appendChild(link);
+
+      const handleClick = () => {
+        el.focus();
+      };
+      link.addEventListener('click', handleClick);
+      cleanups.push(() => {
+        link.removeEventListener('click', handleClick);
+      });
+    }
+
+    if (!isSlideTitleHeading(el)) {
       return;
     }
 
-    const link = window.document.createElement('a');
-    link.className = 'heading-anchor';
-    link.href = `#${el.id}`;
-    link.title = 'Link to this heading';
+    const button = window.document.createElement('button');
+    button.type = 'button';
+    button.className = 'heading-present-button';
+    button.setAttribute('aria-label', 'Present from this slide');
+    button.title = 'Present from this slide';
+    button.appendChild(createIcon(window, 'present'));
+    el.appendChild(button);
 
-    // Move all existing child nodes into the link
-    while (el.firstChild) {
-      link.appendChild(el.firstChild);
-    }
-    el.appendChild(link);
+    const slide = el.parentElement;
+    const slideIndex = getSlideIndex(slide);
 
-    link.addEventListener('click', () => {
-      el.focus();
+    const handlePresentClick = () => {
+      button.dispatchEvent(
+        new view.CustomEvent('tada:slides-present', {
+          bubbles: true,
+          detail: { slideIndex },
+        }),
+      );
+    };
+    button.addEventListener('click', handlePresentClick);
+
+    cleanups.push(() => {
+      button.removeEventListener('click', handlePresentClick);
     });
   });
 
-  return () => {};
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
 };

package/src/anchor/style.scss

@@ -7,29 +7,89 @@ a.heading-anchor {
   @include subdued-link;
 }
 
-a.heading-anchor::after {
+.heading-anchor svg,
+.heading-present-button svg {
   display: inline-block;
   width: 1em;
   height: 1em;
+  vertical-align: middle;
+}
+
+.heading-anchor svg {
   margin-left: 4px;
   vertical-align: middle;
-  content: '';
   opacity: 0;
+}
 
-  @include contained-mask(var(--icon-anchor));
+.heading-present-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  margin-left: 4px;
+  font: inherit;
+  line-height: 1;
+  vertical-align: middle;
+  color: var(--fg-color);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  opacity: 0;
 }
 
-a.heading-anchor:focus-visible::after {
+a.heading-anchor:focus-visible svg,
+.heading-present-button:focus {
   opacity: 1;
 }
 
+.heading-present-button:focus {
+  outline-offset: 2px;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+button.heading-present-button:active:not(:disabled) {
+  color: var(--link-active-color) !important;
+  background: transparent !important;
+}
+
+body.is-presenting .heading-present-button {
+  display: none;
+}
+
 @media (hover: hover) {
-  h1:hover a.heading-anchor::after,
-  h2:hover a.heading-anchor::after,
-  h3:hover a.heading-anchor::after,
-  h4:hover a.heading-anchor::after,
-  h5:hover a.heading-anchor::after,
-  h6:hover a.heading-anchor::after {
+  button.heading-present-button:hover:not(:disabled) {
+    color: var(--fg2-color);
+    background: transparent;
+  }
+
+  h1:hover a.heading-anchor svg,
+  h2:hover a.heading-anchor svg,
+  h3:hover a.heading-anchor svg,
+  h4:hover a.heading-anchor svg,
+  h5:hover a.heading-anchor svg,
+  h6:hover a.heading-anchor svg,
+  h1:hover .heading-present-button,
+  h2:hover .heading-present-button,
+  h3:hover .heading-present-button,
+  h4:hover .heading-present-button,
+  h5:hover .heading-present-button,
+  h6:hover .heading-present-button {
     opacity: 1;
   }
 }
+
+@media (hover: none) {
+  .heading-present-button {
+    display: none;
+  }
+}
+
+@media print {
+  .heading-anchor svg,
+  .heading-present-button {
+    display: none;
+  }
+}

package/src/print/style.scss

@@ -82,10 +82,6 @@
     border: none;
   }
 
-  a.heading-anchor::after {
-    display: none;
-  }
-
   .external-link-tail::after,
   a.external:not(:has(.external-link-tail))::after {
     content: none;

package/src/slides/index.ts

@@ -5,6 +5,10 @@ interface TraceToolbarState {
 
 type PresentationMode = 'normal' | 'fullscreen';
 
+interface SlidesPresentDetail {
+  slideIndex?: number;
+}
+
 function isInteractive(
   view: Window & typeof globalThis,
   target: EventTarget | null,
@@ -45,17 +49,17 @@ export default function mountSlides(window: Window): void | (() => void) {
   const presentButton = document.querySelector(
     '[data-slides-present]',
   ) as HTMLButtonElement | null;
-  const presentFullscreenButton = document.querySelector(
-    '[data-slides-present-fullscreen]',
-  ) as HTMLButtonElement | null;
-  const rootScopeButton = presentButton ?? presentFullscreenButton;
+  const fullscreenCheckbox = document.querySelector(
+    '[data-slides-fullscreen]',
+  ) as HTMLInputElement | null;
+  const rootScopeButton = presentButton ?? fullscreenCheckbox;
   const scopedRoot = rootScopeButton
     ?.closest('main')
     ?.querySelector('[data-slides-root]');
   const root = (scopedRoot ??
     document.querySelector('[data-slides-root]')) as HTMLElement | null;
 
-  if (!view || !root || (!presentButton && !presentFullscreenButton)) {
+  if (!view || !root) {
     return;
   }
 
@@ -78,8 +82,8 @@ export default function mountSlides(window: Window): void | (() => void) {
   if (presentButton) {
     presentButton.disabled = false;
   }
-  if (presentFullscreenButton) {
-    presentFullscreenButton.disabled = false;
+  if (fullscreenCheckbox) {
+    fullscreenCheckbox.disabled = false;
   }
 
   const overlay = document.createElement('div');
@@ -252,7 +256,7 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
-  function enterPresentation(mode: PresentationMode): void {
+  function enterPresentation(mode: PresentationMode, slideIndex = 0): void {
     isPresenting = true;
     presentationMode = mode;
     hidePresentationControls();
@@ -260,8 +264,8 @@ export default function mountSlides(window: Window): void | (() => void) {
     document.body.classList.add('is-presenting');
     setTraceToolbarVisibility(true);
     resetReadyTraces();
-    setActiveSlide(0);
-    focusSlide(slides[0]);
+    setActiveSlide(slideIndex);
+    focusSlide(slides[activeIndex]);
   }
 
   function driveTrace(delta: 1 | -1): boolean {
@@ -329,12 +333,8 @@ export default function mountSlides(window: Window): void | (() => void) {
     focusSlide(slides[activeIndex]);
   }
 
-  function handlePresentClick(): void {
-    enterPresentation('normal');
-  }
-
-  async function handlePresentFullscreenClick(): Promise<void> {
-    enterPresentation('fullscreen');
+  async function handlePresentFullscreenClick(slideIndex = 0): Promise<void> {
+    enterPresentation('fullscreen', slideIndex);
 
     if (typeof fullscreenTarget.requestFullscreen !== 'function') {
       presentationMode = 'normal';
@@ -348,8 +348,17 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
-  function handlePresentFullscreenButtonClick(): void {
-    void handlePresentFullscreenClick();
+  function startPresentation(slideIndex = 0): void {
+    if (fullscreenCheckbox?.checked === true) {
+      void handlePresentFullscreenClick(slideIndex);
+      return;
+    }
+
+    enterPresentation('normal', slideIndex);
+  }
+
+  function handlePresentClick(): void {
+    startPresentation(0);
   }
 
   function handleCloseClick(): void {
@@ -439,29 +448,34 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
+  function handleSlidesPresent(event: Event): void {
+    const detail = (event as CustomEvent<SlidesPresentDetail>).detail ?? {};
+    const slideIndex =
+      typeof detail.slideIndex === 'number' &&
+      Number.isFinite(detail.slideIndex)
+        ? detail.slideIndex
+        : 0;
+
+    startPresentation(slideIndex);
+  }
+
   presentButton?.addEventListener('click', handlePresentClick);
-  presentFullscreenButton?.addEventListener(
-    'click',
-    handlePresentFullscreenButtonClick,
-  );
   closeButton.addEventListener('click', handleCloseClick);
   document.addEventListener('fullscreenchange', handleFullscreenChange);
   window.addEventListener('keydown', handleKeydown);
   window.addEventListener('mousemove', handleMouseMove);
   slidesRoot.addEventListener('click', handleSlideClick);
+  slidesRoot.addEventListener('tada:slides-present', handleSlidesPresent);
 
   return () => {
     exitPresentation();
     presentButton?.removeEventListener('click', handlePresentClick);
-    presentFullscreenButton?.removeEventListener(
-      'click',
-      handlePresentFullscreenButtonClick,
-    );
     closeButton.removeEventListener('click', handleCloseClick);
     document.removeEventListener('fullscreenchange', handleFullscreenChange);
     window.removeEventListener('keydown', handleKeydown);
     window.removeEventListener('mousemove', handleMouseMove);
     slidesRoot.removeEventListener('click', handleSlideClick);
+    slidesRoot.removeEventListener('tada:slides-present', handleSlidesPresent);
     overlay.remove();
   };
 }

package/src/trace/index.ts

@@ -11,7 +11,7 @@ interface WidgetElements {
   root: HTMLElement;
   source: HTMLElement;
   controls: HTMLElement;
-  output: HTMLElement;
+  content: HTMLElement;
   diagram: HTMLElement;
 }
 
@@ -193,6 +193,27 @@ function scaleDiagramSvg(diagram: HTMLElement, doc: Document): void {
   svg.setAttribute('height', String(baseHeight * scale));
 }
 
+function updateOutput(
+  content: HTMLElement,
+  output: string,
+  doc: Document,
+): void {
+  const existing = content.querySelector(
+    ':scope > .trace-output',
+  ) as HTMLPreElement | null;
+  if (!output) {
+    existing?.remove();
+    return;
+  }
+
+  const outputElement = existing ?? doc.createElement('pre');
+  if (!existing) {
+    outputElement.className = 'trace-output';
+    content.append(outputElement);
+  }
+  outputElement.textContent = output;
+}
+
 function renderWidgetState(
   state: WidgetState,
   elements: WidgetElements,
@@ -215,7 +236,7 @@ function renderWidgetState(
       output += s.stdout;
     }
   }
-  elements.output.textContent = output;
+  updateOutput(elements.content, output, doc);
 
   const prevHeight = elements.diagram.scrollHeight;
   elements.diagram.innerHTML = entry.svg;
@@ -249,12 +270,9 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
 
   await loadChunk(state, manifestUrl, 0);
 
-  const entry = getStep(state);
-
   const source = root.querySelector('.trace-source') as HTMLElement;
+  const content = root.querySelector('.trace-content') as HTMLElement;
   const diagram = root.querySelector('.trace-diagram') as HTMLElement;
-  const output = root.querySelector('.trace-output') as HTMLPreElement;
-  output.textContent = entry.stdout || '';
 
   const controls = root.querySelector('.trace-controls') as HTMLElement;
   const firstBtn = controls.querySelector('.trace-first') as HTMLButtonElement;
@@ -296,7 +314,7 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
     next.focus();
   });
 
-  const elements: WidgetElements = { root, source, controls, output, diagram };
+  const elements: WidgetElements = { root, source, controls, content, diagram };
 
   renderWidgetState(state, elements, doc);
 }

package/templates/_theme.scss

@@ -58,6 +58,7 @@
   --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 28'><path d='M11 4 L8 20 M17 4 L14 20 M5 9 H21 M3 15 H19' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
+  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M5 12.5 10 17 19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColor %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColor %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");

package/templates/default.html

@@ -6,9 +6,10 @@
     <% if (page.slides) { %>
     <div class="slides-header" data-pagefind-ignore>
       <button type="button" data-slides-present disabled>Present</button>
-      <button type="button" data-slides-present-fullscreen disabled>
-        Present (Full Screen)
-      </button>
+      <label>
+        <input type="checkbox" data-slides-fullscreen checked disabled>
+        Full screen
+      </label>
     </div>
     <% } %>
     <%= content %>