@dontfeedmachines/fieldkit 0.0.0-stage → 0.4.2

package/pouches/sutures/astro/Section.astro

@@ -0,0 +1,14 @@
+---
+const { title, description } = Astro.props;
+---
+
+<section class="section">
+  <div class="text-center mb-16">
+    {title && <h2 class="section-title mb-4" set:html={(title)} />}
+    {description && <p class="section-description" set:html={description} />}
+  </div>
+
+  <div>
+    <slot />
+  </div>
+</section>

package/pouches/sutures/astro/SidebarNav.astro

@@ -0,0 +1,106 @@
+---
+import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
+import { plainLabel } from "../../../src/wiki/textConverter.ts";
+
+const { sidebar } = Astro.locals.starlightRoute;
+
+// url path
+const currentPath = Astro.url.pathname;
+
+function getFirstHref(item: any): string | null {
+  if (typeof item?.href === "string" && item.href) {
+    return item.href;
+  }
+  if (item?.entries && Array.isArray(item.entries) && item.entries.length > 0) {
+    return getFirstHref(item.entries[0]);
+  }
+  return null;
+}
+
+function hasActiveEntry(item: any, currentPath: string): boolean {
+  if (typeof item?.href === "string" && item.href === currentPath) {
+    return true;
+  }
+  if (item?.entries && Array.isArray(item.entries)) {
+    return item.entries.some((entry: any) =>
+      hasActiveEntry(entry, currentPath)
+    );
+  }
+  return false;
+}
+---
+
+<div class="sidebar-nav">
+  <div class="container h-full">
+    <div class="sidebar-content-top">
+      <ul>
+        {
+          sidebar.map((item: any) => {
+            const href = getFirstHref(item);
+            const isActive = hasActiveEntry(item, currentPath);
+
+            return (
+              <li>
+                <a
+                  aria-label={plainLabel(item.label)}
+                  href={href}
+                  class={isActive ? "active" : ""}
+                >
+                  {plainLabel(item.label)} 
+                </a>
+              </li>
+            );
+          })
+        }
+      </ul>
+      <div>
+        <LanguageSelect />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  @layer starlight.core {
+    .sidebar-nav {
+      z-index: var(--sl-z-index-navbar);
+      position: sticky;
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      width: 100%;
+      top: 75px;
+      border-bottom: 1px solid
+        color-mix(in srgb, var(--sl-color-white) 10%, transparent);
+      padding-top: 20px;
+      padding-bottom: 0px;
+    }
+    @media (max-width: 1151px) {
+      .sidebar-nav {
+        display: none;
+      }
+    }
+    .sidebar-content-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .sidebar-content-top ul {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+      list-style: none;
+      padding-left: 0px !important;
+    }
+    .sidebar-content-top ul li a {
+      padding: 10px 0px;
+      text-decoration: none;
+      color: color-mix(in srgb, var(--sl-color-white) 80%, transparent);
+      display: inline-block;
+    }
+    .sidebar-content-top ul li a.active {
+      border-bottom: 1px solid var(--sl-color-white);
+      color: var(--sl-color-white);
+      font-weight: 600;
+    }
+  }
+</style>

package/pouches/sutures/astro/SidebarRestorePoint.astro

@@ -0,0 +1,10 @@
+---
+// unique symbol for running index in locals
+const currentGroupIndexSymbol = Symbol.for('starlight-sidebar-group-index');
+const locals = Astro.locals as App.Locals & { [currentGroupIndexSymbol]: number };
+
+const index = locals[currentGroupIndexSymbol] || 0;
+locals[currentGroupIndexSymbol] = index + 1;
+---
+
+<sl-sidebar-restore data-index={index}></sl-sidebar-restore>

package/pouches/sutures/astro/SidebarSublist.astro

@@ -0,0 +1,257 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+import { Badge } from "@astrojs/starlight/components";
+import SidebarRestorePoint from "./SidebarRestorePoint.astro";
+import { plainLabel, getIconFromLabel } from "../../../src/wiki/textConverter.ts";
+
+function flattenSidebar(sidebar: any[]): any[] {
+  return sidebar.flatMap((entry) => entry.type === "group" ? flattenSidebar(entry.entries) : entry);
+}
+
+const { sublist, nested } = Astro.props;
+---
+
+<ul class:list={{ "top-level": !nested }}>
+  {
+    sublist.map((entry: any) => (
+      <li>
+        {entry.type === "link" ? (
+          <a
+            href={entry.href}
+            aria-current={entry.isCurrent && "page"}
+            class:list={[{ large: !nested }, entry.attrs.class]}
+            {...entry.attrs}
+          >
+            {getIconFromLabel(entry.label) && (
+              <Icon
+                name={getIconFromLabel(entry.label) as any}
+                size="1.3rem"
+                class="mr-2.5"
+              />
+            )}
+            <span>{plainLabel(entry.label)}</span>
+            {entry.badge && (
+              <Badge
+                variant={entry.badge.variant}
+                class={entry.badge.class}
+                text={entry.badge.text}
+              />
+            )}
+          </a>
+        ) : (
+          <details
+            open={
+              flattenSidebar(entry.entries).some((i) => i.isCurrent) ||
+              !entry.collapsed
+            }
+          >
+            <SidebarRestorePoint />
+            <summary>
+              <span class="group-label">
+                {getIconFromLabel(entry.label) && (
+                  <Icon
+                    name={getIconFromLabel(entry.label) as any}
+                    size="1.3rem"
+                    class="mr-2.5"
+                    color={
+                      flattenSidebar(entry.entries).some((i) => i.isCurrent)
+                        ? "var(--color-primary)"
+                        : ""
+                    }
+                  />
+                )}
+
+                <span class="large">{plainLabel(entry.label)}</span>
+                {entry.badge && (
+                  <Badge
+                    variant={entry.badge.variant}
+                    class={entry.badge.class}
+                    text={entry.badge.text}
+                  />
+                )}
+              </span>
+              <Icon name="right-caret" class="caret" size="1.25rem" />
+            </summary>
+            <Astro.self sublist={entry.entries} nested />
+          </details>
+        )}
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  @layer starlight.core {
+    ul {
+      --sl-sidebar-item-padding-inline: 0.5rem;
+      list-style: none;
+      padding: 0;
+    }
+
+    li {
+      overflow-wrap: anywhere;
+    }
+
+    ul ul li {
+      margin-inline-start: calc(var(--sl-sidebar-item-padding-inline) + 8px);
+      border-inline-start: 1px solid var(--sl-color-hairline-light);
+      padding-inline-start: var(--sl-sidebar-item-padding-inline);
+    }
+
+    .large {
+      font-weight: 500;
+      color: var(--sl-color-white);
+    }
+
+    .top-level > li + li {
+      margin-top: 0.75rem;
+    }
+    .top-level > li > details > ul > li {
+      margin-inline-start: 0px;
+      border-inline-start: 0px;
+      padding-inline-start: 0px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
+    .group-label {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.2em var(--sl-sidebar-item-padding-inline);
+      line-height: 1.4;
+      cursor: pointer;
+      user-select: none;
+    }
+    .top-level > li > details > summary {
+      padding-left: 0px !important;
+    }
+    .top-level > li {
+      border-bottom: 1px solid var(--sl-color-hairline);
+      padding-bottom: 1.6rem;
+      padding-top: 1rem;
+    }
+    .top-level > li:last-child {
+      border-bottom: none;
+      padding-bottom: 0px;
+    }
+    .top-level > li:first-child {
+      padding-top: 0px;
+    }
+    .top-level > li {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    summary::marker,
+    summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .caret {
+      transition: transform 0.2s ease-in-out;
+      flex-shrink: 0;
+    }
+    .top-level > li > details > summary .caret {
+      display: none;
+    }
+    :global([dir="rtl"]) .caret {
+      transform: rotateZ(180deg);
+    }
+    [open] > summary .caret {
+      transform: rotateZ(90deg);
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      border-radius: 8px;
+      text-decoration: none;
+      color: var(--sl-color-gray-2);
+      padding: 8px 10px;
+      line-height: 1.4;
+    }
+
+    a:hover,
+    a:focus {
+      color: var(--sl-color-white);
+    }
+
+    [aria-current="page"],
+    [aria-current="page"]:hover,
+    [aria-current="page"]:focus {
+      color: var(--color-primary) !important;
+      background-color: color-mix(
+        in srgb,
+        var(--sl-color-white) 6%,
+        transparent
+      );
+    }
+    [aria-current="page"] span {
+      color: var(--sl-color-white);
+    }
+
+    li:has([aria-current="page"]) {
+      padding-top: 4px;
+      margin-top: 0px !important;
+      margin-bottom: 8px !important;
+    }
+    a > *:not(:last-child),
+    .group-label > *:not(:last-child) {
+      margin-inline-end: 0.25em;
+    }
+
+    @media (min-width: 50rem) {
+      .top-level > li + li {
+        margin-top: 0.5rem;
+      }
+      .large {
+        font-size: var(--sl-text-base);
+      }
+    }
+  }
+</style>
+
+<script>
+  function initializeSidebar(): void {
+    const topLevelItems = document.querySelectorAll(
+      ".sidebar-content .top-level > li"
+    ) as NodeListOf<HTMLLIElement>;
+
+    topLevelItems.forEach((item: HTMLLIElement) => {
+      const detailsElement = item.querySelector(
+        "details"
+      ) as HTMLDetailsElement;
+
+      if (detailsElement) {
+        // top-level groups remain permanently expanded to keep teletext navigation index visible
+        detailsElement.open = true;
+
+        const summaryElement = detailsElement.querySelector("summary");
+        if (summaryElement) {
+          summaryElement.addEventListener("click", (e: Event) => {
+            e.preventDefault();
+          });
+        }
+
+        detailsElement.addEventListener("toggle", () => {
+          if (!detailsElement.open) {
+            detailsElement.open = true;
+          }
+        });
+      }
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeSidebar);
+  } else {
+    initializeSidebar();
+  }
+</script>

package/pouches/sutures/astro/SiteTitle.astro

@@ -0,0 +1,65 @@
+---
+import { config } from "../../../src/wiki/config.ts";
+import ImageMod from "./ImageMod.astro";
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
+
+const { src, srcDarkmode }: { src?: string; srcDarkmode?: string } =
+  Astro.props;
+
+const theme_switcher = config.settings.theme_switcher;
+const {
+  logo,
+  logo_darkmode,
+  logo_width,
+  logo_height,
+  logo_text,
+  title,
+}: {
+  logo: string;
+  logo_darkmode: string;
+  logo_width: any;
+  logo_height: any;
+  logo_text: string;
+  title: string;
+} = config.site;
+---
+
+<a href={siteTitleHref} class="navbar-brand inline-block">
+  {
+    src || srcDarkmode || logo || logo_darkmode ? (
+      <>
+        <ImageMod
+          src={src ? src : logo}
+          class={`inline-block  ${theme_switcher && "dark:hidden"}`}
+          width={logo_width.replace("px", "") * 2}
+          height={logo_height.replace("px", "") * 2}
+          alt={title}
+          style={{
+            height: logo_height.replace("px", "") + "px",
+            width: logo_width.replace("px", "") + "px",
+          }}
+          format="webp"
+        />
+
+        {theme_switcher && (
+          <ImageMod
+            src={srcDarkmode ? srcDarkmode : logo_darkmode}
+            class={`hidden dark:inline-block`}
+            width={logo_width.replace("px", "") * 2}
+            height={logo_height.replace("px", "") * 2}
+            alt={title}
+            style={{
+              height: logo_height.replace("px", "") + "px",
+              width: logo_width.replace("px", "") + "px",
+            }}
+            format="webp"
+          />
+        )}
+      </>
+    ) : logo_text ? (
+      logo_text
+    ) : (
+      siteTitle || title
+    )
+  }</a
+>

package/pouches/sutures/astro/SpecTable.astro

@@ -0,0 +1,64 @@
+---
+// DFM custom components
+export interface Props {
+  title?: string;
+  specs: Record<string, string>;
+}
+
+const { title = "Hardware Specifications", specs } = Astro.props;
+---
+<div class="spec-table-container">
+  <h3>{title}</h3>
+  <table class="spec-table">
+    <tbody>
+      {Object.entries(specs).map(([key, value]) => (
+        <tr>
+          <td class="spec-key">{key}</td>
+          <td class="spec-value">{value}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .spec-table-container {
+    margin: 2rem 0;
+    border: 1px solid var(--sl-color-gray-5, #444);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: var(--sl-color-black, #111);
+  }
+  
+  .spec-table-container h3 {
+    margin: 0;
+    padding: 1rem;
+    background: var(--sl-color-gray-6, #222);
+    border-bottom: 1px solid var(--sl-color-gray-5, #444);
+    font-size: 1.1rem;
+    color: var(--sl-color-white, #fff);
+  }
+
+  .spec-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .spec-table tr:not(:last-child) {
+    border-bottom: 1px solid var(--sl-color-gray-5, #444);
+  }
+
+  .spec-key {
+    padding: 1rem;
+    font-weight: 600;
+    color: var(--sl-color-gray-2, #ccc);
+    width: 35%;
+    background: var(--sl-color-gray-6, #1a1a1a);
+  }
+
+  .spec-value {
+    padding: 1rem;
+    color: var(--sl-color-white, #fff);
+    font-family: monospace;
+  }
+</style>

package/pouches/sutures/astro/TeletextChar.astro

@@ -0,0 +1,51 @@
+---
+import { ttCharSpec, ttMosaicSpec } from "../../../src/lib/teletext-chars";
+
+interface Props {
+  name?: string;
+  char?: string;
+  mosaic?: number | string;
+  separated?: boolean;
+  size?: string;
+  label?: string;
+  title?: string;
+  class?: string;
+}
+
+const { name, char, mosaic, separated = false, size, label, title, class: cls } = Astro.props;
+const isMosaic = mosaic !== undefined;
+const spec = isMosaic
+  ? ttMosaicSpec(mosaic, separated)
+  : ttCharSpec(name ?? char ?? "");
+const fallback = !spec ? (char ?? name ?? "") : "";
+const h = size ?? (isMosaic ? "var(--tt-mosaic-height, 1em)" : "var(--tt-char-size, 0.85em)");
+const w = isMosaic ? `calc((${h}) * 2 / 3)` : h;
+---
+{spec ? (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class:list={["tt-char", isMosaic && "tt-mosaic", cls]}
+    viewBox={`0 0 ${spec.w} ${spec.h}`}
+    fill="currentColor"
+    shape-rendering="crispEdges"
+    style={`--_tt-w:${w};--_tt-h:${h}`}
+    role={label ? "img" : undefined}
+    aria-label={label || undefined}
+    aria-hidden={label ? undefined : "true"}
+  >
+    {title && <title>{title}</title>}
+    <path d={spec.d} />
+  </svg>
+) : (
+  <span class={cls} aria-label={label || undefined}>{fallback}</span>
+)}
+
+<style>
+  .tt-char {
+    display: inline-block;
+    width: var(--_tt-w, 0.85em);
+    height: var(--_tt-h, 0.85em);
+    vertical-align: calc(0.5cap - var(--_tt-h, 0.85em) / 2 + var(--tt-char-voffset, -0.02em));
+    flex: none;
+  }
+</style>

package/pouches/sutures/astro/ThemeSwitch.astro

@@ -0,0 +1,93 @@
+---
+import { config } from "../../../src/wiki/config.ts";
+
+const { theme_switcher }: { theme_switcher: boolean } = config.settings;
+const { className }: { className?: string } = Astro.props;
+---
+
+{
+  theme_switcher && (
+    <div class={`theme-switcher ${className}`}>
+      <input id="theme-switcher" data-theme-switcher type="checkbox" />
+      <label for="theme-switcher">
+        <span class="sr-only">theme switcher</span>
+        <svg
+          class="dark:opacity-40 opacity-0 size-4 ml-1"
+          viewBox="0 0 56 56"
+          fill="#fff"
+          height="16"
+          width="16"
+        >
+          <path d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z" />
+        </svg>
+        <span>
+          <svg
+            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 opacity-100 dark:opacity-0"
+            viewBox="0 0 56 56"
+            fill="#fff"
+            height="16"
+            width="16"
+          >
+            <path d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z" />
+          </svg>
+          <svg
+            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 opacity-0 dark:opacity-100"
+            viewBox="0 0 24 24"
+            fill="none"
+            height="16"
+            width="16"
+          >
+            <path
+              fill="#000"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8.2 2.2c1-.4 2 .6 1.6 1.5-1 3-.4 6.4 1.8 8.7a8.4 8.4 0 0 0 8.7 1.8c1-.3 2 .5 1.5 1.5v.1a10.3 10.3 0 0 1-9.4 6.2A10.3 10.3 0 0 1 3.2 6.7c1-2 2.9-3.5 4.9-4.4Z"
+            />
+          </svg>
+        </span>
+        <svg
+          class="opacity-40 size-4 dark:opacity-0 mr-1"
+          viewBox="0 0 24 24"
+          fill="none"
+          height="16"
+          width="16"
+        >
+          <path
+            fill="#000"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.2 2.2c1-.4 2 .6 1.6 1.5-1 3-.4 6.4 1.8 8.7a8.4 8.4 0 0 0 8.7 1.8c1-.3 2 .5 1.5 1.5v.1a10.3 10.3 0 0 1-9.4 6.2A10.3 10.3 0 0 1 3.2 6.7c1-2 2.9-3.5 4.9-4.4Z"
+          />
+        </svg>
+      </label>
+    </div>
+  )
+}
+
+
+
+<script>
+  const themeSwitcher = document.querySelector(
+    "input[data-theme-switcher]"
+  ) as HTMLInputElement;
+  themeSwitcher?.addEventListener("change", (e) => {
+    if ((e.currentTarget as HTMLInputElement).checked) {
+      document.documentElement.dataset.theme = "dark";
+      localStorage.setItem("starlight-theme", "dark");
+    } else {
+      document.documentElement.dataset.theme = "light";
+      localStorage.setItem("starlight-theme", "light");
+    }
+  });
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const savedTheme = localStorage.getItem("starlight-theme");
+    if (savedTheme === "light") {
+      themeSwitcher.checked = false;
+      document.documentElement.dataset.theme = "light";
+    } else {
+      themeSwitcher.checked = true;
+      document.documentElement.dataset.theme = "dark";
+    }
+  });
+</script>