@abreen/tada 1.0.0

package/src/layout.scss

@@ -0,0 +1,144 @@
+@import './_mixins.scss';
+
+:root {
+  --toc-width: 260px;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  scroll-padding-top: calc(var(--header-collapsed-height) + var(--gap));
+}
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body > .container {
+  position: relative;
+  padding: 0 var(--gap);
+  margin-top: calc(var(--header-collapsed-height) + var(--gap));
+}
+
+.body {
+  padding-bottom: 2rem;
+}
+
+body.default .body,
+body.literate .body {
+  > *:first-child {
+    margin-top: 0;
+  }
+}
+
+body.default .title-and-info,
+body.default nav.toc,
+body.literate .title-and-info,
+body.literate nav.toc {
+  margin-bottom: 2rem;
+}
+
+body.default .title-and-info,
+body.literate .title-and-info {
+  h1 {
+    margin: 0;
+  }
+}
+
+body.default main table,
+body.literate main table {
+  width: 100%;
+}
+
+@media (max-width: 899px) {
+  .toc-is-active .main-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .toc-is-active .main-content > .title-and-info {
+    order: 0;
+  }
+
+  .toc-is-active .main-content > nav.toc {
+    order: 1;
+  }
+
+  .toc-is-active .main-content > .body {
+    order: 2;
+  }
+
+  body.default.toc-is-active nav.toc,
+  body.literate.toc-is-active nav.toc {
+    background: var(--bg2-color);
+    padding: var(--gap);
+  }
+
+  body.code.toc-is-active nav.toc {
+    display: none;
+  }
+}
+
+@media (min-width: 900px) {
+  body.default main table,
+  body.literate main table {
+    width: auto;
+    min-width: 400px;
+    margin: 1rem auto;
+  }
+
+  :not(.toc-is-active) > .container > .main-content {
+    max-width: var(--main-width);
+    margin: 0 auto;
+  }
+
+  .toc-is-active .main-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--gap);
+  }
+
+  .toc-is-active .main-content > .title-and-info {
+    flex: 0 0 100%;
+  }
+
+  .toc-is-active .main-content > .body {
+    order: 1;
+    flex: 1;
+    min-width: 0;
+  }
+
+  body.toc-is-active nav.toc {
+    box-sizing: border-box;
+    width: var(--toc-width);
+    flex-shrink: 0;
+    align-self: flex-start;
+    position: sticky;
+    top: var(--header-collapsed-height);
+    height: calc(100vh - var(--header-collapsed-height));
+    overflow-y: auto;
+    margin-bottom: 0;
+  }
+
+  body.code.toc-is-active nav.toc {
+    top: calc(var(--header-collapsed-height) + var(--gap));
+    height: calc(100vh - var(--header-collapsed-height) - var(--gap));
+  }
+}
+
+@media (min-width: 1300px) {
+  .toc-is-active .main-content {
+    max-width: calc(var(--toc-width) + var(--gap) + 960px);
+    margin: 0 auto;
+  }
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 1rem;
+  &.split {
+    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
+  }
+}

package/src/literate/style.scss

@@ -0,0 +1,60 @@
+body.literate .body pre:has(.code-row) {
+  background: var(--bg2-color);
+  border-radius: var(--mono-border-radius);
+  overflow-x: auto;
+  overscroll-behavior-x: none;
+  padding: 0;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+
+  code {
+    padding-right: var(--gap);
+  }
+
+  .code-row {
+    &:first-child {
+      padding-top: var(--gap);
+    }
+
+    &:last-child {
+      padding-bottom: var(--gap);
+    }
+  }
+}
+
+body.literate .literate-code-output {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--gap);
+  font-size: var(--mono-font-size);
+
+  > pre {
+    margin-top: 0;
+  }
+
+  > pre:last-child {
+    white-space: pre-wrap;
+  }
+
+  @media (max-width: 899px) {
+    > pre:first-child {
+      margin-bottom: 0;
+    }
+
+    > pre:last-child::before {
+      content: 'Output';
+      display: block;
+      font-size: var(--font-size-small);
+      font-style: italic;
+      color: var(--fg2-color);
+    }
+  }
+
+  @media (min-width: 900px) {
+    grid-template-columns: 1fr 1fr;
+
+    > pre:last-child {
+      min-width: 150px;
+    }
+  }
+}

package/src/print/README.md

@@ -0,0 +1,4 @@
+# The `print` component
+
+If the user is printing, force all `<details>` elements to be
+open, then restore their collapsed state afterwards.

package/src/print/index.ts

@@ -0,0 +1,32 @@
+export default (window: Window) => {
+  function getDetailsElements(parent: HTMLElement): HTMLDetailsElement[] {
+    return Array.from(parent.querySelectorAll('details')).filter(
+      el => el?.parentElement?.tagName?.toLowerCase() !== 'header',
+    );
+  }
+
+  function handleBeforePrint() {
+    for (const el of getDetailsElements(window.document.body)) {
+      if (el.getAttribute('open') == null) {
+        el.setAttribute('data-was-closed', 'true');
+      }
+      el.setAttribute('open', '');
+    }
+  }
+  window.addEventListener('beforeprint', handleBeforePrint);
+
+  function handleAfterPrint() {
+    for (const el of getDetailsElements(window.document.body)) {
+      if (el.getAttribute('data-was-closed') != null) {
+        el.removeAttribute('data-was-closed');
+        el.removeAttribute('open');
+      }
+    }
+  }
+  window.addEventListener('afterprint', handleAfterPrint);
+
+  return () => {
+    window.removeEventListener('afterprint', handleAfterPrint);
+    window.removeEventListener('beforeprint', handleBeforePrint);
+  };
+};

package/src/print/style.scss

@@ -0,0 +1,82 @@
+:root {
+  --print-font-size: 15px;
+}
+
+@media print {
+  html,
+  body,
+  main,
+  section {
+    background: none !important;
+  }
+
+  main {
+    padding-top: 0;
+  }
+
+  hr {
+    height: 0;
+    border-bottom: 2px solid gray;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  header {
+    display: none !important;
+  }
+
+  main {
+    max-width: none;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-size: var(--print-font-size);
+    color: #000;
+  }
+
+  pre {
+    font-size: var(--print-font-size);
+    border: none;
+    padding: 0;
+  }
+
+  .footnotes {
+    break-inside: avoid;
+  }
+
+  a.footnote-ref {
+    text-decoration: none;
+  }
+
+  .footnote-backref {
+    display: none !important;
+  }
+
+  main details {
+    border: 2px solid #000;
+  }
+
+  main details .alert {
+    border: none;
+    padding: 0;
+  }
+
+  section {
+    border: none;
+    padding: 0;
+    width: 100%;
+  }
+
+  .heading-anchor::after {
+    display: none;
+  }
+
+  a.external::after {
+    display: none;
+  }
+}

package/src/question/README.md

@@ -0,0 +1,3 @@
+# The `question` component
+
+Handles the click behavior of Q&A blocks whose answers are hidden by default.

package/src/question/index.ts

@@ -0,0 +1,25 @@
+export default (window: Window) => {
+  const bodies =
+    window.document.querySelectorAll<HTMLElement>('.question-a-body');
+  bodies.forEach(el => {
+    el.setAttribute('role', 'button');
+    el.setAttribute('tabindex', '0');
+    el.setAttribute('aria-label', 'Click to reveal answer');
+
+    const reveal = () => {
+      el.setAttribute('data-revealed', '');
+      el.removeAttribute('role');
+      el.removeAttribute('tabindex');
+      el.removeAttribute('aria-label');
+    };
+
+    el.addEventListener('click', reveal);
+    el.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        reveal();
+      }
+    });
+  });
+  return () => {};
+};

package/src/question/style.scss

@@ -0,0 +1,116 @@
+@import '../_mixins.scss';
+
+.question {
+  margin-bottom: 2rem;
+}
+
+.question-q,
+.question-a {
+  display: flex;
+  gap: 0.5em;
+  align-items: flex-start;
+}
+
+.question-q {
+  margin-bottom: 0.5em;
+}
+
+.question-label,
+.question-a-label {
+  color: var(--theme-color-text);
+  font-weight: 700;
+  flex-shrink: 0;
+  margin: 0;
+  @include user-select(none);
+}
+
+.question-q > span:last-child {
+  color: var(--fg-color);
+  font-weight: var(--font-weight);
+}
+
+.question-a-body {
+  flex: 1;
+  cursor: pointer;
+  @include user-select(none);
+}
+
+.question-a-body > ol:first-child,
+.question-a-body > ul:first-child {
+  margin-top: 0;
+}
+
+.question-a-body > *:last-child {
+  margin-bottom: 0;
+}
+
+.question-a-body > *,
+.question-a-body > * * {
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      color 0.25s,
+      background-color 0.25s;
+  }
+}
+
+.question-a-body:not([data-revealed]) > * {
+  color: transparent;
+  background-color: var(--bg2-color);
+  pointer-events: none;
+}
+
+.question-a-body:not([data-revealed]) > * * {
+  color: transparent;
+  background-color: var(--bg2-color);
+}
+
+.question-a-body::after {
+  content: 'Click to reveal';
+  display: block;
+  font-size: var(--font-size-small);
+  font-style: italic;
+  color: var(--fg2-color);
+  text-align: center;
+  pointer-events: none;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 0.25s;
+  }
+}
+
+.question-a-body[data-revealed]::after {
+  opacity: 0;
+}
+
+@media (hover: none) {
+  .question-a-body::after {
+    content: 'Tap to reveal';
+  }
+}
+
+.question-a-body[data-revealed] {
+  cursor: unset;
+  @include user-select(text);
+}
+
+@media print {
+  .question-a-body {
+    cursor: default;
+    @include user-select(text);
+
+    &:not([data-revealed]) > * {
+      color: inherit;
+      background-color: transparent;
+      pointer-events: auto;
+    }
+
+    &:not([data-revealed]) > * * {
+      color: inherit;
+      background-color: transparent;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+}

package/src/search/README.md

@@ -0,0 +1,6 @@
+# The `search` component
+
+The client-side logic that controls the `<input type="search">` element
+on the page and uses the [Pagefind][pagefind] index to provide results.
+
+[pagefind]: https://pagefind.app/