@gjermundgaraba-designs/simple-rat 0.7.0 → 0.8.0

package/src/footer/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./footer.ts";
+
 export type { ViewConfig } from "./footer.ts";

package/src/footnotes/footnotes.ts

@@ -1,8 +1,19 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
 /** A superscript number that jumps to the note numbered `noteNumber`; the note links back. */
-export const refView = <Message>(noteNumber: number, h: HtmlBuilder<Message>): Html =>
-  h.sup([], [h.a([h.Href(`#fn-${noteNumber}`), h.Id(`ref-${noteNumber}`)], [`${noteNumber}`])]);
+export const refView = <Message>(
+  noteNumber: number,
+  h: HtmlBuilder<Message>
+): Html =>
+  h.sup(
+    [],
+    [
+      h.a(
+        [h.Href(`#fn-${noteNumber}`), h.Id(`ref-${noteNumber}`)],
+        [`${noteNumber}`]
+      ),
+    ]
+  );
 
 /** Configuration for rendering the notes with `view`. */
 export type ViewConfig = Readonly<{
@@ -12,7 +23,10 @@ export type ViewConfig = Readonly<{
 
 /** The notes, numbered from 1, at the end of the page under a rule. Each ends in a `Back`
     link named for the reference it returns to. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.section(
     [h.Class("footnotes"), h.AriaLabel("Footnotes")],
     [
@@ -21,18 +35,22 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
         [],
         config.notes.map((note, index) => {
           const noteNumber = index + 1;
+
           return h.li(
             [h.Id(`fn-${noteNumber}`)],
             [
               ...note,
               " ",
               h.a(
-                [h.Href(`#ref-${noteNumber}`), h.AriaLabel(`Back to reference ${noteNumber}`)],
-                ["Back"],
+                [
+                  h.Href(`#ref-${noteNumber}`),
+                  h.AriaLabel(`Back to reference ${noteNumber}`),
+                ],
+                ["Back"]
               ),
-            ],
+            ]
           );
-        }),
+        })
       ),
-    ],
+    ]
   );

package/src/footnotes/index.ts

@@ -1,2 +1,3 @@
 export { refView, view } from "./footnotes.ts";
+
 export type { ViewConfig } from "./footnotes.ts";

package/src/header/header.ts

@@ -3,22 +3,25 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 /** Configuration for rendering the header with `view`. */
 export type ViewConfig = Readonly<{
   /** `NavLink`s, and optionally a `SchemeSwitch` last. */
-  items: ReadonlyArray<Html>;
+  items: readonly Html[];
 }>;
 
 /** The page's header: a nav named "Primary navigation", a line of lowercase links separated
     by middots, then a rule. Each item after the first sits in a `span` with its middot, so a
     wrapped line starts with the middot instead of ending on one. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.header(
     [],
     [
       h.nav(
         [h.AriaLabel("Primary navigation")],
         config.items.flatMap((item, index) =>
-          index === 0 ? [item] : [" ", h.span([], ["· ", item])],
-        ),
+          index === 0 ? [item] : [" ", h.span([], ["· ", item])]
+        )
       ),
       h.hr([]),
-    ],
+    ]
   );

package/src/header/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./header.ts";
+
 export type { ViewConfig } from "./header.ts";

package/src/heading/heading.ts

@@ -10,12 +10,20 @@ export type ViewConfig = Readonly<{
 
 /** A section heading with a `#` link to itself, shown on hover and focus. The page title is
     a plain `h1`. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { level, id, text } = config;
+
   const children: ReadonlyArray<Html | string> = [
     text,
     " ",
-    h.a([h.Class("self"), h.Href(`#${id}`), h.AriaLabel(`Link to ${text}`)], ["#"]),
+    h.a(
+      [h.Class("self"), h.Href(`#${id}`), h.AriaLabel(`Link to ${text}`)],
+      ["#"]
+    ),
   ];
+
   return level === 2 ? h.h2([h.Id(id)], children) : h.h3([h.Id(id)], children);
 };

package/src/heading/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./heading.ts";
+
 export type { ViewConfig } from "./heading.ts";

package/src/index.ts

@@ -1,20 +1,35 @@
-// simple rat's Foldkit components. Each renders the markup simple-rat.css styles; plain
-// elements (paragraphs, lists, quotes, kbd, mark, details) need no component.
 export * as Code from "./code/index.ts";
-export * as CodeBlock from "./codeBlock/index.ts";
-export * as CopyTab from "./copyTab/index.ts";
+
+export * as CodeBlock from "./code-block/index.ts";
+
+export * as CopyTab from "./copy-tab/index.ts";
+
 export * as Diagram from "./diagram/index.ts";
+
 export * as Footer from "./footer/index.ts";
+
 export * as Footnotes from "./footnotes/index.ts";
+
 export * as Header from "./header/index.ts";
+
 export * as Heading from "./heading/index.ts";
-export * as NavLink from "./navLink/index.ts";
+
+export * as NavLink from "./nav-link/index.ts";
+
 export * as Note from "./note/index.ts";
+
 export * as Pager from "./pager/index.ts";
-export * as PostList from "./postList/index.ts";
-export * as PostMeta from "./postMeta/index.ts";
+
+export * as PostList from "./post-list/index.ts";
+
+export * as PostMeta from "./post-meta/index.ts";
+
 export * as Scheme from "./scheme/index.ts";
+
 export * as Scrolls from "./scrolls/index.ts";
-export * as SkipLink from "./skipLink/index.ts";
+
+export * as SkipLink from "./skip-link/index.ts";
+
 export * as Swatch from "./swatch/index.ts";
+
 export * as Table from "./table/index.ts";

package/src/nav-link/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./nav-link.ts";
+
+export type { ViewConfig } from "./nav-link.ts";

package/src/{navLink/navLink.ts → nav-link/nav-link.ts}

@@ -11,8 +11,18 @@ export type ViewConfig = Readonly<{
 }>;
 
 /** A link in the header nav. Nav links never turn visited purple. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const pageAttributes = config.current === "Page" ? [h.AriaCurrent("page")] : [];
-  const sectionAttributes = config.current === "Section" ? [h.AriaCurrent("true")] : [];
-  return h.a([h.Href(config.href), ...pageAttributes, ...sectionAttributes], [config.label]);
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
+  const pageAttributes =
+    config.current === "Page" ? [h.AriaCurrent("page")] : [];
+
+  const sectionAttributes =
+    config.current === "Section" ? [h.AriaCurrent("true")] : [];
+
+  return h.a(
+    [h.Href(config.href), ...pageAttributes, ...sectionAttributes],
+    [config.label]
+  );
 };

package/src/note/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./note.ts";
+
 export type { ViewConfig } from "./note.ts";

package/src/note/note.ts

@@ -10,10 +10,14 @@ export type ViewConfig = Readonly<{
 
 /** A ruled box for the thing a reader must not miss, its first word "Note." (or "Warning.")
     in bold; at most one per screen. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { isWarn = false, body } = config;
+
   return h.aside(
     [h.Class(isWarn ? "note warn" : "note")],
-    [h.p([], [h.strong([], [isWarn ? "Warning." : "Note."]), " ", ...body])],
+    [h.p([], [h.strong([], [isWarn ? "Warning." : "Note."]), " ", ...body])]
   );
 };

package/src/pager/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./pager.ts";
+
 export type { Link, ViewConfig } from "./pager.ts";

package/src/pager/pager.ts

@@ -13,8 +13,12 @@ export type ViewConfig = Readonly<{
 
 /** Older and newer links at the end of a post, then the way back to all posts. A missing
     neighbour becomes a muted line saying so. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { newer, older, all } = config;
+
   return h.nav(
     [h.Class("pager"), h.AriaLabel("Older and newer posts")],
     [
@@ -25,6 +29,6 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
         ? h.p([h.Class("muted")], ["This is the oldest post."])
         : h.p([], ["Older: ", h.a([h.Href(older.href)], [older.label])]),
       h.p([], [h.a([h.Href(all.href)], [all.label])]),
-    ],
+    ]
   );
 };

package/src/post-list/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./post-list.ts";
+
+export type { Entry, ViewConfig } from "./post-list.ts";

package/src/post-list/post-list.ts

@@ -0,0 +1,30 @@
+import type { Html, HtmlBuilder } from "foldkit/html";
+
+export type Entry = Readonly<{
+  /** ISO date. */
+  date: string;
+  title: string;
+  href: string;
+}>;
+
+/** Configuration for rendering a post list with `view`. */
+export type ViewConfig = Readonly<{ posts: readonly Entry[] }>;
+
+/** A list of posts: date, then title, in two columns. */
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
+  h.ul(
+    [h.Class("posts")],
+    config.posts.map((post) =>
+      h.keyed("li")(
+        post.href,
+        [],
+        [
+          h.time([h.Datetime(post.date)], [post.date]),
+          h.a([h.Href(post.href)], [post.title]),
+        ]
+      )
+    )
+  );

package/src/post-meta/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./post-meta.ts";
+
+export type { ViewConfig } from "./post-meta.ts";

package/src/{postMeta/postMeta.ts → post-meta/post-meta.ts}

@@ -10,7 +10,10 @@ export type ViewConfig = Readonly<{
 }>;
 
 /** Everything about a post, on one muted line under its title: the date, then the rest. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.p(
     [h.Class("meta")],
     [
@@ -19,5 +22,5 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
         onEmpty: () => [],
         onNonEmpty: (body) => [" · ", ...body],
       }),
-    ],
+    ]
   );

package/src/scheme/index.ts

@@ -1,3 +1,5 @@
 export { Scheme } from "./scheme.ts";
+
 export { schemeScript } from "./script.ts";
-export * as SchemeSwitch from "./schemeSwitch.ts";
+
+export * as SchemeSwitch from "./scheme-switch.ts";

package/src/scheme/{schemeSwitch.ts → scheme-switch.ts}

@@ -3,11 +3,20 @@ import type { Html } from "foldkit/html";
 import { defineView } from "foldkit/submodel";
 
 import type { Scheme } from "./scheme.ts";
-import { Message, type Model } from "./switch.ts";
+import { Message } from "./switch.ts";
+import type { Model } from "./switch.ts";
 
-export * from "./switch.ts";
+export {
+  Message,
+  Model,
+  PinScheme,
+  ReadScheme,
+  id,
+  init,
+  update,
+} from "./switch.ts";
 
-// VIEW
+export type { InitConfig } from "./switch.ts";
 
 const CHOICES: ReadonlyArray<Readonly<{ scheme: Scheme; label: string }>> = [
   { scheme: "System", label: "system" },
@@ -31,13 +40,16 @@ export const view = defineView<Model, Message>((model, h): Html =>
             onClick: Message.SelectedScheme({ scheme: choice }),
             toView: ({ button }) =>
               h.button(
-                [...button, h.AriaPressed(choice === model.scheme ? "true" : "false")],
-                [label],
+                [
+                  ...button,
+                  h.AriaPressed(choice === model.scheme ? "true" : "false"),
+                ],
+                [label]
               ),
           },
-          h,
+          h
         ),
       ]),
-    ],
-  ),
+    ]
+  )
 );

package/src/scheme/scheme.ts

@@ -3,23 +3,22 @@ import { Match, Option, Schema } from "effect";
 /** The colour scheme: `Light` or `Dark` pinned on `<html data-scheme>`, or `System`, which
     follows the reader's system in CSS alone. */
 export const Scheme = Schema.Literals(["System", "Light", "Dark"]);
+
 export type Scheme = typeof Scheme.Type;
 
-/** The `data-scheme` value a scheme pins, or none for `System`. */
 export const toPinnedValue = (scheme: Scheme): Option.Option<string> =>
   Match.value(scheme).pipe(
     Match.withReturnType<Option.Option<string>>(),
     Match.when("System", () => Option.none()),
     Match.when("Light", () => Option.some("light")),
     Match.when("Dark", () => Option.some("dark")),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
-/** The scheme a `data-scheme` value pins. Anything else, or nothing, is `System`. */
 export const fromPinnedValue = (value: string | null | undefined): Scheme =>
   Match.value(value).pipe(
     Match.withReturnType<Scheme>(),
     Match.when("light", () => "Light"),
     Match.when("dark", () => "Dark"),
-    Match.orElse(() => "System"),
+    Match.orElse(() => "System")
   );

package/src/scheme/switch.ts

@@ -7,20 +7,14 @@ import type * as Update from "foldkit/update";
 import { Scheme, fromPinnedValue, toPinnedValue } from "./scheme.ts";
 import { SCHEME_ATTRIBUTE, SCHEME_STORAGE_KEY } from "./script.ts";
 
-// The scheme switch without its view, the same file in every system that has it; the view
-// is the system's own, in schemeSwitch.ts, which also passes all of this on.
-
-// MODEL
-
 /** Schema for the scheme switch: its id, and the scheme in force as far as the page has
     seen. */
 export const Model = Schema.Struct({
   id: Schema.String,
   scheme: Scheme,
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages the scheme switch can produce. */
 export const Message = defineMessageUnion({
@@ -28,9 +22,8 @@ export const Message = defineMessageUnion({
   CompletedPinScheme: {},
   CompletedReadScheme: { scheme: Scheme },
 });
-export type Message = typeof Message.Type;
 
-// COMMAND
+export type Message = typeof Message.Type;
 
 /** Pins a scheme on `<html data-scheme>` and remembers it on this device in `localStorage`
     under the key `schemeScript` reads; `System` removes both. The attribute is written first,
@@ -40,7 +33,7 @@ export const PinScheme = Command.define("PinScheme", {
   args: { scheme: Scheme },
   messages: [Message.CompletedPinScheme],
   execute: ({ scheme }) =>
-    Effect.try(() =>
+    Effect.try(() => {
       Option.match(toPinnedValue(scheme), {
         onNone: () => {
           document.documentElement.removeAttribute(SCHEME_ATTRIBUTE);
@@ -50,8 +43,8 @@ export const PinScheme = Command.define("PinScheme", {
           document.documentElement.setAttribute(SCHEME_ATTRIBUTE, value);
           localStorage.setItem(SCHEME_STORAGE_KEY, value);
         },
-      }),
-    ).pipe(Effect.ignore, Effect.as(Message.CompletedPinScheme())),
+      });
+    }).pipe(Effect.ignore, Effect.as(Message.CompletedPinScheme())),
 });
 
 /** Reads the scheme in force from `<html data-scheme>`: what `schemeScript` pinned before
@@ -60,13 +53,13 @@ export const ReadScheme = Command.define("ReadScheme", {
   messages: [Message.CompletedReadScheme],
   execute: Effect.sync(() =>
     Message.CompletedReadScheme({
-      scheme: fromPinnedValue(document.documentElement.getAttribute(SCHEME_ATTRIBUTE)),
-    }),
+      scheme: fromPinnedValue(
+        document.documentElement.getAttribute(SCHEME_ATTRIBUTE)
+      ),
+    })
   ),
 });
 
-// INIT
-
 /** Configuration for creating a switch with `init`: its id, unique in the document. */
 export type InitConfig = Readonly<{ id: string }>;
 
@@ -78,13 +71,9 @@ export const init = (config: InitConfig): Update.Return<Model, Message> => ({
   commands: [ReadScheme()],
 });
 
-// ACCESSORS
-
 /** The switch's id. */
 export const id = (model: Model): string => model.id;
 
-// UPDATE
-
 /** Processes a scheme switch Message and returns the next Model and Commands. */
 export const update = (model: Model, message: Message) =>
   Message.match<Update.Return<Model, Message>>(message, {

package/src/scrolls/scrolls.ts

@@ -2,13 +2,10 @@ import { Effect, Option, Schema } from "effect";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
 
-// MESSAGE
-
 /** What the Mount reports: it is watching. Nothing in a Model follows it. */
 export const Message = defineMessageUnion({ CompletedWatchOverflow: {} });
-export type Message = typeof Message.Type;
 
-// MOUNT
+export type Message = typeof Message.Type;
 
 /** Whether a block is wider than its box and scrolls sideways, checked when it mounts and
     whenever its own box changes size, as when the window resizes. A font arriving that
@@ -23,34 +20,43 @@ export const WatchOverflow = Mount.define("WatchOverflow", {
     Effect.gen(function* () {
       yield* Effect.acquireRelease(
         Effect.sync(() => {
+          const clear = () => {
+            element.removeAttribute("tabindex");
+
+            if (Option.isSome(maybeName)) {
+              element.removeAttribute("role");
+              element.removeAttribute("aria-label");
+            }
+          };
+
           const check = () => {
             if (element.scrollWidth > element.clientWidth) {
               element.setAttribute("tabindex", "0");
+
               if (Option.isSome(maybeName)) {
                 element.setAttribute("role", "region");
-                element.setAttribute("aria-label", `Code: ${maybeName.value}, scrolls sideways`);
+                element.setAttribute(
+                  "aria-label",
+                  `Code: ${maybeName.value}, scrolls sideways`
+                );
               }
             } else {
               clear();
             }
           };
-          const clear = () => {
-            element.removeAttribute("tabindex");
-            if (Option.isSome(maybeName)) {
-              element.removeAttribute("role");
-              element.removeAttribute("aria-label");
-            }
-          };
+
           const resized = new ResizeObserver(check);
           resized.observe(element);
           check();
+
           return () => {
             resized.disconnect();
             clear();
           };
         }),
-        (stop) => Effect.sync(stop),
+        (stop) => Effect.sync(stop)
       );
+
       return Message.CompletedWatchOverflow();
     }),
 });