@abreen/tada 1.8.1 → 1.10.1

package/src/code/index.ts

@@ -1,4 +1,6 @@
-export default async function mount(window: Window): Promise<void> {
+export default async function mount(
+  window: Window,
+): Promise<void | (() => void)> {
   const { document } = window;
   if (!document.body.classList.contains('code')) {
     return;
@@ -109,6 +111,11 @@ export default async function mount(window: Window): Promise<void> {
     syncing = false;
   });
 
-  new ResizeObserver(updateScrollbar).observe(codeBody);
+  const resizeObserver = new ResizeObserver(updateScrollbar);
+  resizeObserver.observe(codeBody);
   updateScrollbar();
+
+  return () => {
+    resizeObserver.disconnect();
+  };
 }

package/src/code/style.scss

@@ -1,34 +1,35 @@
 body.code .file-header {
   h1 {
-    margin: 0;
     padding: 0;
+    margin: 0;
     font-size: inherit;
     font-weight: inherit;
   }
 }
 
 body.code .code-body {
-  background: var(--bg2-color);
-  border-radius: var(--border-radius);
-  clip-path: inset(0 round var(--border-radius));
   display: grid;
   grid-template-columns: minmax(100%, max-content);
   overflow-x: auto;
   overscroll-behavior-x: none;
   scrollbar-width: none;
+  background: var(--bg2-color);
+  border-radius: var(--border-radius);
+  clip-path: inset(0 round var(--border-radius));
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+
   &::-webkit-scrollbar {
     display: none;
   }
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
 }
 
 body.code .code-scrollbar {
   position: sticky;
   bottom: 0;
+  z-index: 10;
   overflow-x: auto;
   overscroll-behavior-x: none;
-  z-index: 10;
 
   > div {
     height: 1px;
@@ -68,25 +69,25 @@ body.code pre code {
 }
 
 body.code .code-prose {
-  background-color: var(--bg2-color);
   display: grid;
   grid-template-columns: var(--code-gutter-width) 1fr;
+  background-color: var(--bg2-color);
 
   .code-prose-gutter {
     position: sticky;
     left: 0;
     z-index: 1;
+    margin-right: var(--gap);
     background: var(--bg2-color);
     border-right: 1px solid var(--fg2-color);
-    margin-right: var(--gap);
   }
 
   .code-prose-content {
-    color: var(--fg2-color);
-    min-width: 0;
     position: relative;
+    min-width: 0;
     padding: var(--gap) var(--gap) var(--gap)
       calc(var(--prose-indent, 0ch) - 0.2em);
+    color: var(--fg2-color);
 
     *:first-of-type {
       margin-top: 0;
@@ -107,8 +108,8 @@ body.code .code-prose {
     }
 
     code {
-      background: inherit;
       padding: inherit;
+      background: inherit;
     }
   }
 }
@@ -118,7 +119,7 @@ body.code .code-search-index {
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }

package/src/code.scss

@@ -6,18 +6,18 @@ body.code {
 
 .file-header {
   display: flex;
+  gap: var(--gap);
   align-items: center;
   justify-content: center;
-  gap: var(--gap);
-  border: 1px solid var(--fg2-color);
-  border-radius: var(--border-radius);
   padding: var(--gap);
   margin-bottom: var(--gap);
+  border: 1px solid var(--fg2-color);
+  border-radius: var(--border-radius);
 
   tt,
   code {
-    background: none;
     padding: 0;
+    background: none;
   }
 }
 
@@ -27,19 +27,20 @@ body.code {
 }
 
 .line-number {
-  display: block;
-  padding: 0 0.75em 0 0.75em;
-  text-align: right;
-  @include user-select(none);
-  color: var(--fg2-color);
-  font-family: var(--mono-font);
-  text-decoration: none;
   position: sticky;
   left: 0;
   z-index: 1;
+  display: block;
+  padding: 0 0.75em;
+  margin-right: var(--gap);
+  font-family: var(--mono-font);
+  color: var(--fg2-color);
+  text-align: right;
+  text-decoration: none;
   background: var(--bg2-color);
   border-right: 1px solid var(--fg2-color);
-  margin-right: var(--gap);
+
+  @include user-select(none);
 }
 
 a.line-number {
@@ -50,7 +51,7 @@ a.line-number {
   }
 
   &:target {
-    background: var(--fg2-color);
     color: var(--bg-color);
+    background: var(--fg2-color);
   }
 }

package/src/header/_base.scss

@@ -5,30 +5,26 @@
 }
 
 header {
-  backdrop-filter: var(--backdrop-filter);
-  background: var(--bg-color-translucent);
-
-  width: 100%;
   position: fixed;
   top: 0;
-
   z-index: 1000;
-
   display: grid;
   grid-template-columns: 1fr;
-
+  width: 100%;
+  background: var(--bg-color-translucent);
+  backdrop-filter: var(--backdrop-filter);
   view-transition-name: site-header;
 }
 
 header details summary {
+  position: relative;
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
   padding: 0 200px 0 0;
-  list-style-type: none;
-  cursor: pointer;
-  position: relative;
   container-type: inline-size;
+  cursor: pointer;
+  list-style-type: none;
 
   @media (hover: hover) {
     &:hover {
@@ -62,9 +58,9 @@ header details summary::marker {
 header summary::after {
   order: -1;
   height: 24px;
-  content: var(--icon-chevron);
-  margin-left: var(--gap);
   margin-right: 8px;
+  margin-left: var(--gap);
+  content: var(--icon-chevron);
 }
 
 header details[open] summary::after {
@@ -77,24 +73,24 @@ header .content {
 
 header summary .logo {
   flex: 0 0 auto;
-  color: var(--text-on-theme);
-  background: var(--theme-color);
   padding: 1px 6px;
   margin: 0 8px 0 0;
   font-size: var(--font-size-smaller);
   font-weight: 600;
+  color: var(--text-on-theme);
   pointer-events: none;
+  background: var(--theme-color);
 }
 
 header summary .site-title {
   flex: 1 1 0;
+  min-width: 0;
+  margin: 0 8px 0 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
   font-weight: 500;
+  white-space: nowrap;
   pointer-events: none;
-  margin: 0 8px 0 0;
 }
 
 @container (max-width: 200px) {
@@ -107,20 +103,20 @@ header > .header-controls {
   position: absolute;
   top: 0;
   right: 0;
+  z-index: 1;
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
   padding: 0 var(--gap) 0 0;
-  z-index: 1;
 }
 
 header .to-top-container {
   display: none;
   align-items: center;
   height: var(--header-collapsed-height);
-  pointer-events: none;
-  white-space: nowrap;
   padding: 0 var(--gap) 0 0;
+  white-space: nowrap;
+  pointer-events: none;
 
   &:has(.is-visible) {
     display: flex;
@@ -142,7 +138,7 @@ header .search-controls {
   input.search {
     width: 180px;
 
-    @media (max-width: 400px) {
+    @media (width <= 400px) {
       display: none;
     }
   }
@@ -153,25 +149,26 @@ header .search-controls {
   15% {
     background-position: 200% 0;
   }
+
   100% {
     background-position: -200% 0;
   }
 }
 
 header.loading::after {
-  content: '';
   position: absolute;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
   height: 3px;
+  content: '';
   background-image: linear-gradient(
     90deg,
     transparent 25%,
     var(--theme-color) 50%,
     transparent 75%
   );
-  background-size: 200% 100%;
   background-repeat: no-repeat;
+  background-size: 200% 100%;
   animation: shimmer 3s ease-in-out infinite;
 }

package/src/header/style.scss

@@ -4,7 +4,9 @@
 header nav {
   display: flex;
   flex-wrap: wrap;
+
   @include user-select(none);
+
   gap: var(--gap);
   margin: var(--gap);
 }
@@ -14,9 +16,9 @@ header nav div {
 }
 
 header nav ul {
-  list-style-type: none;
   padding: 0;
-  margin: 8px 0 0 0;
+  margin: 8px 0 0;
+  list-style-type: none;
 }
 
 header nav ul li {
@@ -24,8 +26,9 @@ header nav ul li {
 }
 
 header nav a {
-  border: none;
   display: inline;
+  border: none;
+
   @include subdued-link;
 }
 
@@ -33,17 +36,18 @@ header nav a.external {
   border: none;
 }
 
-@media only screen and (min-width: 740px) {
+@media only screen and (width >= 740px) {
   header details nav {
     min-height: 100px;
   }
 }
 
 header nav div > p {
+  padding-bottom: 2px;
   font-style: italic;
-  @include user-select(none);
   border-bottom: 1px solid var(--fg-color);
-  padding-bottom: 2px;
+
+  @include user-select(none);
 }
 
 @media (hover: hover) {
@@ -53,27 +57,27 @@ header nav div > p {
 }
 
 header .results-container {
-  display: block;
   position: absolute;
   top: var(--header-collapsed-height);
-  left: 0;
   right: 0;
+  left: 0;
+  z-index: 1000;
   box-sizing: border-box;
+  display: block;
   max-width: 640px;
-  margin: 0 auto;
   padding: var(--gap);
+  margin: 0 auto;
   pointer-events: none;
-  z-index: 1000;
 }
 
 header ol {
-  padding: 0;
   flex: 1;
   min-height: 0;
+  padding: 0;
   overflow-y: auto;
 
   .excerpt {
-    line-height: 2.5ex;
     height: 5ex;
+    line-height: 2.5ex;
   }
 }

package/src/index.ts

@@ -12,11 +12,13 @@ import './timezone/style.scss';
 import './toc/style.scss';
 import './trace/style.scss';
 import './navigate/style.scss';
+import './page-update/style.scss';
 
 import mountSearch from './search';
 import mountHeader from './header';
 import mountTop from './top';
 import mountNavigate from './navigate';
+import mountPageUpdate from './page-update';
 import { mountPerPageComponents } from './navigate/lifecycle';
 
 import { scheduleTask, formatDuration } from './util';
@@ -29,6 +31,7 @@ const PERSISTENT_COMPONENTS: Record<
   search: mountSearch,
   top: mountTop,
   navigate: mountNavigate,
+  pageUpdate: mountPageUpdate,
 };
 
 let startTime = -1;

package/src/literate/style.scss

@@ -3,11 +3,11 @@ body.literate {
 }
 
 body.literate .body pre:has(.code-row) {
-  background: var(--bg2-color);
-  border-radius: var(--mono-border-radius);
+  padding: 0;
   overflow-x: auto;
   overscroll-behavior-x: none;
-  padding: 0;
+  background: var(--bg2-color);
+  border-radius: var(--mono-border-radius);
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 
@@ -49,11 +49,11 @@ body.literate .literate-code-output {
     }
 
     > pre:last-child::before {
-      content: 'Output';
       display: block;
       font-size: var(--font-size-small);
       font-style: italic;
       color: var(--fg2-color);
+      content: 'Output';
     }
   }