@abreen/tada 1.0.2 → 1.1.0

package/src/search/index.ts

@@ -2,8 +2,30 @@ import { getElement, applyBasePath } from '../util';
 
 const MAX_RESULTS = 24;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let pagefind: any = null;
+interface PagefindSubResult {
+  title?: string;
+  url: string;
+  excerpt?: string;
+}
+
+interface PagefindResult {
+  meta?: { title?: string; page?: string };
+  url: string;
+  excerpt?: string;
+  score: number;
+  sub_results?: PagefindSubResult[];
+}
+
+interface PagefindSearchResult {
+  data(): Promise<PagefindResult>;
+}
+
+interface Pagefind {
+  init(): Promise<void>;
+  search(query: string): Promise<{ results: PagefindSearchResult[] }>;
+}
+
+let pagefind: Pagefind | null = null;
 
 type SubResult = { title: string; url: string; excerpt: string };
 type Result = {
@@ -105,27 +127,23 @@ async function doSearch(state: State) {
 
   const search = await pagefind.search(state.value);
   const slice = search.results.slice(0, MAX_RESULTS);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const data = await Promise.all(slice.map((r: any) => r.data()));
+  const data = await Promise.all(slice.map(r => r.data()));
 
   const titlePostfix = window.siteVariables.titlePostfix ?? '';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const results: Result[] = data.map((d: any) => {
+  const results: Result[] = data.map((d: PagefindResult) => {
     let title: string = d.meta?.title ?? d.url;
     if (titlePostfix && title.endsWith(titlePostfix)) {
       title = title.slice(0, -titlePostfix.length);
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const subResults: SubResult[] = (d.sub_results ?? [])
-      .filter((s: any) => {
+      .filter((s: PagefindSubResult) => {
         try {
           return new URL(s.url, window.location.href).hash !== '';
         } catch {
           return s.url !== d.url;
         }
       })
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .map((s: any) => ({
+      .map((s: PagefindSubResult) => ({
         title: s.title ?? '',
         url: s.url,
         excerpt: s.excerpt ?? '',
@@ -133,7 +151,7 @@ async function doSearch(state: State) {
     return {
       title,
       url: d.url,
-      excerpt: d.excerpt,
+      excerpt: d.excerpt ?? '',
       score: d.score ?? 0,
       subResults,
       pageNumber: getPdfPageNumber(d.url, d.meta?.page),
@@ -324,14 +342,17 @@ export default (window: Window) => {
     if (pagefind) {
       return;
     }
-    // @ts-ignore pagefind.js is generated post-build, not resolvable at compile time
-    pagefind = await import(
-      /* webpackIgnore: true */ applyBasePath('/pagefind/pagefind.js')
-    );
+
+    pagefind = (await import(
+      applyBasePath('/pagefind/pagefind.js')
+    )) as Pagefind;
+
     await pagefind.init();
+
     const res = await fetch(applyBasePath('/pagefind/pagefind-entry.json'), {
       cache: 'no-cache',
     });
+
     if (res.ok) {
       entryETag = res.headers.get('ETag');
       entryLastModified = res.headers.get('Last-Modified');

package/src/search/style.scss

@@ -1,4 +1,4 @@
-@import '../_mixins.scss';
+@use '../mixins' as *;
 
 header {
   .search-controls {
@@ -9,7 +9,7 @@ header {
 
     input.search {
       background-color: var(--bg-color);
-      background-image: 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='hsl(20deg 8% 8%)' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
+      background-image: var(--icon-search);
       background-repeat: no-repeat;
       background-position: left 6px center;
       background-size: 16px 16px;
@@ -24,12 +24,6 @@ header {
         cursor: not-allowed;
       }
     }
-
-    @media (prefers-color-scheme: dark) {
-      input.search {
-        background-image: 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='hsl(20deg 20% 90%)' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-      }
-    }
   }
 
   .results-container.is-showing .results {
@@ -48,13 +42,6 @@ header {
   .results {
     opacity: 0;
     pointer-events: none;
-
-    @media (prefers-reduced-motion: no-preference) {
-      transform: translateY(-8px);
-      transition:
-        opacity 0.25s ease,
-        transform 0.25s ease;
-    }
     margin: 0 auto;
     background: var(--bg-color);
     color: var(--fg-color);
@@ -68,6 +55,13 @@ header {
     min-height: 80px;
     @include user-select(none);
 
+    @media (prefers-reduced-motion: no-preference) {
+      transform: translateY(-8px);
+      transition:
+        opacity 0.25s ease,
+        transform 0.25s ease;
+    }
+
     .results-info {
       display: flex;
       align-items: center;

package/src/style.scss

@@ -1,5 +1,8 @@
-@import './_mixins.scss';
-@import 'config/theme';
+@use 'mixins' as *;
+@use 'config/theme';
+@use 'base';
+@use 'layout';
+@use 'alerts';
 
 @font-face {
   font-family: 'Inter';
@@ -34,38 +37,6 @@
     format('woff2');
 }
 
-:root {
-  --box-border-width: 5px;
-
-  --gap: 12px;
-  --border-radius: 12px;
-  --control-border-width: 2px;
-  --label-border-width: 2px;
-  --focus-border-width: 3px;
-  --table-padding: 12px;
-  --details-padding: 12px;
-  --section-padding: 64px;
-
-  --main-width: 900px;
-
-  --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 8% 8%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 20% 90%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 6% 60%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-dark-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 6% 55%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-active: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='black' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-dark-active: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='white' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-
-  --icon-external-translucent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g opacity='0.3' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' fill='none'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 15 L15 9' stroke-linecap='round'/><path d='M9 9 H15 V15' stroke-linecap='round'/></g></svg>");
-  --icon-external-translucent-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g opacity='0.3' stroke='hsl(20deg 85% 90%)' stroke-width='2' stroke-linecap='round' fill='none'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 15 L15 9' stroke-linecap='round'/><path d='M9 9 H15 V15' stroke-linecap='round'/></g></svg>");
-
-  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-warning-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-p {
-  margin: 0 0 1rem 0;
-}
-
 ::selection {
   color: var(--bg-color);
   background: var(--fg-color);
@@ -76,26 +47,6 @@ p {
   outline-offset: 1px;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--heading-font);
-  -webkit-break-after: avoid;
-  break-after: avoid;
-  line-height: 1.3;
-
-  // Enable Inter's ligatures (for style)
-  font-feature-settings: 'dlig';
-}
-
-h1 {
-  font-size: 250%;
-  font-weight: 700;
-}
-
 .info {
   @include user-select(none);
   display: grid;
@@ -130,42 +81,6 @@ h1 {
   }
 }
 
-body {
-  color: var(--fg-color);
-  background-color: var(--bg-color);
-
-  font-family: var(--font);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-
-  /*
-   * Enable Inter's features for legibility:
-   * ss03 - round quotes & commas
-   * ss04 - disambiguation (make uppercase i and lowercase L distinct)
-   */
-  font-feature-settings: 'ss03', 'ss04';
-
-  @media (prefers-color-scheme: dark) {
-    & {
-      text-rendering: optimizeLegibility;
-      -webkit-font-smoothing: antialiased;
-    }
-  }
-}
-
-html {
-  overscroll-behavior: none;
-  background: var(--bg-color);
-}
-
-a {
-  color: var(--fg-color);
-  text-decoration-color: var(--fg2-color);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
-}
-
 a.disabled {
   color: var(--fg-color-translucent);
   text-decoration-color: var(--fg-color-translucent);
@@ -196,15 +111,6 @@ a.external::after {
   padding-right: 18px;
 }
 
-@media (prefers-color-scheme: dark) {
-  a.external::after {
-    background: var(--icon-external-link-dark);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-}
-
 @media (hover: hover) {
   a.external:hover::after {
     background: var(--icon-external-link-hover);
@@ -214,15 +120,6 @@ a.external::after {
   }
 }
 
-@media (hover: hover) and (prefers-color-scheme: dark) {
-  a.external:hover::after {
-    background: var(--icon-external-link-dark-hover);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-}
-
 a.external:active::after {
   background: var(--icon-external-link-active) !important;
   background-size: contain !important;
@@ -230,15 +127,6 @@ a.external:active::after {
   background-position: center center !important;
 }
 
-@media (prefers-color-scheme: dark) {
-  a.external:active::after {
-    background: var(--icon-external-link-dark-active) !important;
-    background-size: contain !important;
-    background-repeat: no-repeat !important;
-    background-position: center center !important;
-  }
-}
-
 a.external.disabled::after,
 a.external.disabled:active::after {
   background: var(--icon-external-translucent) !important;
@@ -247,16 +135,6 @@ a.external.disabled:active::after {
   background-position: center center !important;
 }
 
-@media (prefers-color-scheme: dark) {
-  a.external.disabled::after,
-  a.external.disabled:active::after {
-    background: var(--icon-external-translucent-dark) !important;
-    background-size: contain !important;
-    background-repeat: no-repeat !important;
-    background-position: center center !important;
-  }
-}
-
 .footnotes {
   margin-top: calc(var(--thematic-break-margin) / 2);
   padding-top: 32px;
@@ -508,114 +386,6 @@ tbody tr:last-child td {
   border-bottom: none;
 }
 
-.alert {
-  border: 3px solid var(--bg2-color);
-  position: relative;
-  margin: 1rem 0;
-}
-
-.alert.warning {
-  background: var(--warning-bg-color);
-  border-color: var(--warning-bg-color);
-}
-
-.alert.note {
-  background: var(--note-bg-color);
-  border-color: var(--note-bg-color);
-}
-
-.alert .title {
-  padding: 10px 6px;
-}
-
-.alert .content {
-  padding: 12px;
-
-  .styled-list {
-    color: var(--fg-color);
-  }
-
-  tt,
-  code {
-    background: inherit;
-    padding: inherit;
-  }
-
-  time[datetime].is-modified {
-    // Reset the underline color
-    text-decoration: underline dotted;
-  }
-
-  a {
-    text-decoration-color: var(--fg-color);
-  }
-
-  dfn {
-    color: inherit;
-  }
-}
-
-.alert .content > *:first-child {
-  margin-top: 0;
-}
-
-.alert .content > *:last-child {
-  margin-bottom: 0;
-}
-
-.alert .title::before {
-  left: 8px;
-  top: 8px;
-  position: absolute;
-  width: 32px;
-  height: 32px;
-}
-
-.alert.warning .title::before {
-  content: var(--icon-warning);
-}
-
-i.warning {
-  background: var(--icon-warning);
-  background-size: contain;
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: sub;
-}
-
-@media (prefers-color-scheme: dark) {
-  .alert.warning .title::before {
-    content: var(--icon-warning-dark);
-  }
-
-  i.warning {
-    background: var(--icon-warning-dark);
-    background-size: contain;
-  }
-}
-
-.alert.note .title::before {
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-@media (prefers-color-scheme: dark) {
-  .alert.note .title::before {
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
-}
-
-.alert .title {
-  font-weight: 700;
-  @include user-select(none);
-  padding-left: 48px;
-  margin: 0;
-}
-
-.alert > p:last-child {
-  margin-bottom: 0;
-}
-
 section {
   background: linear-gradient(
     0deg,
@@ -718,15 +488,9 @@ dfn {
   @include user-select(none);
 
   &::after {
-    content: 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='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
+    content: var(--icon-breadcrumb);
     vertical-align: middle;
   }
-
-  @media (prefers-color-scheme: dark) {
-    &::after {
-      content: 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='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-    }
-  }
 }
 
 img {
@@ -775,33 +539,6 @@ select {
   font-size: inherit;
 }
 
-pre,
-tt,
-code {
-  font-family: var(--mono-font);
-}
-
-tt,
-code {
-  font-size: var(--mono-font-size);
-  background: var(--bg2-color);
-  border-radius: var(--mono-border-radius);
-  padding: 0.12em 0.25em;
-  overflow-wrap: anywhere;
-}
-
-pre {
-  background: var(--bg2-color);
-  border-radius: var(--mono-border-radius);
-  line-height: var(--mono-line-height);
-  overflow: auto;
-  padding: var(--gap);
-
-  code {
-    padding: 0;
-  }
-}
-
 // Shiki dual-theme support (defaultColor: false — CSS custom properties only,
 // no inline color/background-color, so no !important needed)
 .shiki span {

package/src/toc/style.scss

@@ -1,4 +1,4 @@
-@import '../_mixins.scss';
+@use '../mixins' as *;
 
 :root {
   --highlight-hue: 59deg;
@@ -136,58 +136,24 @@ body.code .toc ol a {
 }
 
 .toc ol li.alert-item.warning a::before {
-  // fg-color
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-@media (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.warning a::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
+  content: var(--icon-warning-sm);
 }
 
 @media (hover: hover) {
   .toc ol li.alert-item.warning:hover a::before,
   .toc ol li.alert-item.warning a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
-}
-
-@media (hover: hover) and (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.warning:hover a::before,
-  .toc ol li.alert-item.warning a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/></svg>");
+    content: var(--icon-warning-sm-hover);
   }
 }
 
 .toc ol li.alert-item.note a::before {
-  // fg-color
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-@media (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.note a::before {
-    // fg-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
+  content: var(--icon-note-sm);
 }
 
 @media (hover: hover) {
   .toc ol li.alert-item.note:hover a::before,
   .toc ol li.alert-item.note a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 6% 60%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
-}
-
-@media (hover: hover) and (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.note:hover a::before,
-  .toc ol li.alert-item.note a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 6% 55%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/></svg>");
+    content: var(--icon-note-sm-hover);
   }
 }
 

package/src/util.ts

@@ -1,9 +1,12 @@
-export function debounce(fn: Function, time: number) {
+export function debounce<T extends (...args: unknown[]) => void>(
+  fn: T,
+  time: number,
+) {
   let timer: number;
-  return (...args: any[]) => {
+  return (...args: Parameters<T>) => {
     window.clearTimeout(timer);
     timer = window.setTimeout(() => {
-      fn.apply(null, args);
+      fn(...args);
     }, time);
   };
 }
@@ -106,8 +109,8 @@ export function formatDuration(ms: number): string {
 
   if (absMs < 1000) {
     // 0.0000ms - 999.99ms
-    let decimals = absMs < 10 ? 4 : absMs < 100 ? 3 : 2;
-    let val = roundTo(absMs, decimals);
+    const decimals = absMs < 10 ? 4 : absMs < 100 ? 3 : 2;
+    const val = roundTo(absMs, decimals);
     if (val >= 1000) {
       return sign + formatSecondsFromMs(absMs);
     }