@dontfeedmachines/fieldkit 0.0.0-stage → 0.4.1

package/pouches/sutures/astro/Header.astro

@@ -0,0 +1,270 @@
+---
+import SiteTitle from "./SiteTitle.astro";
+import { config, getTranslations } from "../../../src/wiki/config.ts";
+import ThemeSwitch from "./ThemeSwitch.astro";
+import Search from "./Search.astro";
+import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
+import { teletextPages, FASTEXT } from "../../../src/wiki/teletext.ts";
+
+// get current locale from URL
+const locale = Astro.currentLocale || "en";
+
+const menu = await getTranslations(locale || "en");
+
+const { settings, navigation_button } = config;
+const { main }: { main: any[] } = menu;
+const pathname = Astro.request.url;
+
+const hasSidebar = Astro.locals.starlightRoute.hasSidebar;
+
+const routeSidebar = Astro.locals.starlightRoute.sidebar;
+const pages = teletextPages(routeSidebar);
+const holdsCurrent = (item: any): boolean => item?.isCurrent || (Array.isArray(item?.entries) && item.entries.some(holdsCurrent));
+const groupIndex = routeSidebar.findIndex(holdsCurrent);
+const pageNo = !hasSidebar ? "P100" : groupIndex >= 0 ? `P${200 + groupIndex * 100}` : "P---";
+---
+
+<div class="tt-status container" aria-hidden="true">
+  <span class="tt-status-page" data-tt-page>{pageNo}</span>
+  <span class="tt-status-name">{config.site.status_name}</span>
+  <span class="tt-status-clock" data-tt-clock></span>
+</div>
+
+<nav class="navbar container">
+  <!-- logo -->
+  <div class="order-0">
+    <SiteTitle />
+  </div>
+  <!-- navbar toggler -->
+  <input id="nav-toggle" type="checkbox" class="hidden" />
+  <label
+    for="nav-toggle"
+    class="order-3 cursor-pointer flex items-center lg:hidden dark:text-white lg:order-1 hamburger-menu"
+  >
+    <svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
+      <title>Menu Open</title>
+      <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
+    </svg>
+    <svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
+      <title>Menu Close</title>
+      <polygon
+        points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
+        transform="rotate(45 10 10)"></polygon>
+    </svg>
+  </label>
+  <!-- /navbar toggler -->
+  <ul
+    id="nav-menu"
+    class="navbar-nav order-3 hidden w-full pb-6 lg:order-1 lg:flex lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8"
+  >
+    {
+      main.map((menu) => (
+        <>
+          {menu.hasChildren ? (
+            <li class="nav-item nav-dropdown group relative">
+              <span
+                class={`nav-link flex! gap-1! items-center justify-center ${
+                  menu.children
+                    ?.map(({ url }: { url: string }) => url)
+                    .includes(pathname) ||
+                  menu.children
+                    ?.map(({ url }: { url: string }) => `${url}/`)
+                    .includes(pathname)
+                    ? "active"
+                    : ""
+                }`}
+              >
+                {menu.name}
+                <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
+                  <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+                </svg>
+              </span>
+              <ul class="nav-dropdown-list hidden group-hover:block lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100">
+                {menu.children?.map((child: { url: string; name: string; hasChildren?: boolean; children?: { url: string; name: string }[] }) =>
+                  child.hasChildren && child.children?.length ? (
+                    <li class="nav-dropdown-item nav-subdropdown">
+                      <span class="nav-dropdown-link nav-subdropdown-toggle">
+                        {child.url ? <a href={child.url} class="nav-subdropdown-title">{child.name}</a> : child.name}
+                        <svg class="nav-subdropdown-arrow h-4 w-4 fill-current" viewBox="0 0 20 20">
+                          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+                        </svg>
+                      </span>
+                      <ul class="nav-dropdown-list nav-subdropdown-list">
+                        {child.children.map((sub) => (
+                          <li class="nav-dropdown-item">
+                            <a
+                              href={sub.url}
+                              aria-label={sub.name}
+                              class={`nav-dropdown-link block ${
+                                (pathname === `${sub.url}/` || pathname === sub.url) && "active"
+                              }`}
+                            >
+                              {sub.name}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </li>
+                  ) : (
+                    <li class="nav-dropdown-item">
+                      <a
+                        href={child.url}
+                        aria-label={child.name}
+                        class={`nav-dropdown-link block ${
+                          (pathname === `${child.url}/` ||
+                            pathname === child.url) &&
+                          "active"
+                        }`}
+                      >
+                        {child.name}
+                      </a>
+                    </li>
+                  )
+                )}
+              </ul>
+            </li>
+          ) : (
+            <li class="nav-item">
+              <a
+                href={menu.url}
+                class={`nav-link block ${
+                  (pathname === `${menu.url}/` || pathname === menu.url) &&
+                  "active"
+                }`}
+              >
+                {menu.name}
+              </a>
+            </li>
+          )}
+        </>
+      ))
+    }
+    {
+      navigation_button.enable && (
+        <li class="mt-4 inline-block lg:hidden">
+          <a
+            class="btn btn-outline-primary btn-sm"
+            href={navigation_button.link}
+          >
+            {navigation_button.label}
+          </a>
+        </li>
+      )
+    }
+  </ul>
+
+  <div
+    class="order-1 ml-auto flex items-center md:order-2 lg:ml-0 navbar-actions"
+  >
+    {
+      hasSidebar && settings.search && (
+        <div class="search-bar">
+          <Search />
+        </div>
+      )
+    }
+
+    {!hasSidebar && <div class="mr-4"><LanguageSelect /></div> }
+    {settings.theme_switcher && <ThemeSwitch className="lg:mx-6 mr-10" />}
+
+    {
+      navigation_button.enable && (
+        <a
+          class="btn btn-outline-primary hidden! lg:inline-block!"
+          href={navigation_button.link}
+        >
+          {navigation_button.translations
+            ? // @ts-ignore
+              navigation_button.translations[locale] || navigation_button.label
+            : navigation_button.label}
+        </a>
+      )
+    }
+  </div>
+</nav>
+
+<nav class="tt-fastext container" aria-label="sections">
+  {pages.slice(0, 4).map((p, i) => (
+    <a class={`tt-fx tt-fx-${FASTEXT[i]}`} href={p.href}>{p.label}<span class="tt-fx-page">{p.page}</span></a>
+  ))}
+</nav>
+
+<script type="application/json" id="tt-pages" set:html={JSON.stringify(pages.map((p) => [p.page, p.href]))}></script>
+
+<script>
+  const clock = document.querySelector<HTMLElement>("[data-tt-clock]");
+  const tick = () => {
+    if (!clock) return;
+    const d = new Date();
+    const day = d.toLocaleDateString("en-GB", { weekday: "short", day: "2-digit", month: "short" }).replace(/,/g, "");
+    clock.textContent = `${day} ${d.toTimeString().slice(0, 8)}`;
+  };
+  tick();
+  setInterval(tick, 1000);
+
+  const table = new Map<number, string>([[100, "/"], ...JSON.parse(document.getElementById("tt-pages")?.textContent || "[]")]);
+  const pageEl = document.querySelector<HTMLElement>("[data-tt-page]");
+  const resting = pageEl?.textContent ?? "";
+  let typed = "";
+  let reset: number | undefined;
+  window.addEventListener("keydown", (e) => {
+    const t = e.target as HTMLElement;
+    if (e.metaKey || e.ctrlKey || e.altKey || t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) return;
+    if (!/^[0-9]$/.test(e.key)) return;
+    typed += e.key;
+    clearTimeout(reset);
+    if (pageEl) pageEl.textContent = `P${typed.padEnd(3, "-")}`;
+    if (typed.length < 3) {
+      reset = window.setTimeout(() => { typed = ""; if (pageEl) pageEl.textContent = resting; }, 2500);
+      return;
+    }
+    const href = table.get(Number(typed));
+    typed = "";
+    if (href) location.href = href;
+    else if (pageEl) {
+      pageEl.textContent = "NO PAGE";
+      reset = window.setTimeout(() => { if (pageEl) pageEl.textContent = resting; }, 1500);
+    }
+  });
+</script>
+
+<script>
+  // add header bg after scroll
+  const nav = document.querySelector(".navbar");
+  const sidebar = document.querySelector(".sidebar-nav");
+
+  window.onscroll = function () {
+    if (
+      document.body.scrollTop > 10 ||
+      document.documentElement.scrollTop > 10
+    ) {
+      nav?.parentElement?.classList.add("navbar-scrolled");
+      sidebar?.classList.add("navbar-scrolled");
+    } else {
+      nav?.parentElement?.classList.remove("navbar-scrolled");
+      sidebar?.classList.remove("navbar-scrolled");
+    }
+  };
+
+  // mobile navigation dropdown toggle
+  const dropdownMenuToggler = document.querySelectorAll(
+    ".nav-dropdown > .nav-link"
+  ) as NodeListOf<HTMLElement>;
+
+  dropdownMenuToggler.forEach((toggler: HTMLElement) => {
+    toggler?.addEventListener("click", (e: MouseEvent) => {
+      (e?.target as HTMLElement)
+        ?.closest(".nav-item")
+        ?.classList.toggle("active");
+    });
+  });
+
+  // nested dropdowns fly out on hover at desktop widths, tap to expand on mobile
+  document.querySelectorAll<HTMLElement>(".nav-subdropdown-toggle").forEach((toggler) => {
+    toggler.addEventListener("click", (e: MouseEvent) => {
+      if ((e.target as HTMLElement).closest("a")) return;
+      e.stopPropagation();
+      toggler.closest(".nav-subdropdown")?.classList.toggle("active");
+    });
+  });
+</script>

package/pouches/sutures/astro/Hero.astro

@@ -0,0 +1,38 @@
+---
+import Search from "./Search.astro";
+import { teletextPages } from "../../../src/wiki/teletext.ts";
+
+const { data } = Astro.locals.starlightRoute.entry;
+const { title = data.title, tagline } = data.hero || {};
+const { sidebar } = Astro.locals.starlightRoute;
+const pages = teletextPages(sidebar);
+const is404 = Astro.locals.starlightRoute?.id === "404";
+---
+
+<section class="tt-hero">
+  <p class="tt-pagehead"><span class="tt-blue">P100</span> INDEX</p>
+  {title && <h1 class="tt-title" set:html={title} />}
+  {tagline && <p class="tt-tagline" set:html={tagline} />}
+
+  {
+    !is404 && (
+      <>
+        <div class="tt-search search-bar">
+          <Search />
+        </div>
+        <ol class="tt-index" aria-label="sections by page number">
+          {pages.map((p) => (
+            <li>
+              <a href={p.href}>
+                <span class="tt-index-name">{p.label}</span>
+                <span class="tt-leader" aria-hidden="true" />
+                <span class="tt-index-page">P{p.page}</span>
+              </a>
+            </li>
+          ))}
+        </ol>
+        <p class="tt-hint">type a page number anywhere to jump to it. / opens search.</p>
+      </>
+    )
+  }
+</section>

package/pouches/sutures/astro/ImageMod.astro

@@ -0,0 +1,66 @@
+---
+// DFM custom components
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+interface Props {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  loading?: "eager" | "lazy" | null | undefined;
+  decoding?: "async" | "auto" | "sync" | null | undefined;
+  fetchpriority?: "high" | "low" | "auto" | null | undefined;
+  format?: "auto" | "avif" | "jpeg" | "png" | "svg" | "webp";
+  class?: string;
+  style?: any;
+  fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+}
+
+let {
+  src,
+  alt,
+  width,
+  height,
+  loading,
+  decoding,
+  fetchpriority,
+  class: className,
+  format,
+  style,
+  fit,
+} = Astro.props;
+
+
+
+const images = import.meta.glob("/src/assets/**/*.{jpeg,jpg,png,gif,svg,webp}");
+const normalizedSrc = src.startsWith("/") ? src : `/${src.replace(/^\.\//, "")}`;
+
+const isValidPath = images[normalizedSrc] ? true : false;
+
+
+!isValidPath &&
+  console.error(
+    `\x1b[31mImage not found - ${src}.\x1b[0m Make sure the image is in the /src/assets folder.`,
+  );
+
+
+---
+
+{
+  isValidPath && (
+    <Image
+      src={images[normalizedSrc]() as Promise<{ default: ImageMetadata }>}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={loading}
+      decoding={decoding}
+      fetchpriority={fetchpriority}
+      class={className}
+      format={format}
+      style={style}
+      fit={fit ? fit : "contain"}
+    />
+  )
+}

package/pouches/sutures/astro/InteractiveCircuit.astro

@@ -0,0 +1,192 @@
+---
+// DFM custom components
+export interface Props {
+  title?: string;
+  svgPath: string; // path to raw SVG content or could be passed via slot
+}
+
+const { title = "Circuit Diagram" } = Astro.props;
+---
+<div class="interactive-circuit">
+  <div class="circuit-header">
+    <h3>{title}</h3>
+    <div class="circuit-controls">
+      <button class="circuit-btn" data-action="zoom-in">+</button>
+      <button class="circuit-btn" data-action="zoom-out">-</button>
+      <button class="circuit-btn" data-action="reset">Reset</button>
+    </div>
+  </div>
+  
+  <div class="circuit-viewport">
+    <div class="circuit-content" id="circuit-container">
+      <slot />
+    </div>
+    
+    <div class="circuit-info-panel" id="circuit-info">
+      <h4 id="info-title">Component Info</h4>
+      <p id="info-desc">Click any highlighted component on the diagram to see its details.</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  class InteractiveCircuit {
+    constructor() {
+      this.container = document.getElementById('circuit-container');
+      this.infoPanel = document.getElementById('circuit-info');
+      this.infoTitle = document.getElementById('info-title');
+      this.infoDesc = document.getElementById('info-desc');
+      this.scale = 1;
+      
+      this.init();
+    }
+    
+    init() {
+      if (!this.container) return;
+      
+      document.querySelectorAll('.circuit-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          const action = (e.target as HTMLButtonElement).dataset.action;
+          if (action === 'zoom-in') this.scale = Math.min(this.scale + 0.2, 3);
+          if (action === 'zoom-out') this.scale = Math.max(this.scale - 0.2, 0.5);
+          if (action === 'reset') this.scale = 1;
+          
+          this.container.style.transform = `scale(${this.scale})`;
+        });
+      });
+      
+      // interactive svg targets require class 'interactive-node' with data-title and data-desc
+      const nodes = this.container.querySelectorAll('.interactive-node');
+      nodes.forEach(node => {
+        node.addEventListener('click', (e) => {
+          nodes.forEach(n => n.classList.remove('active-node'));
+          
+          const target = e.currentTarget as SVGElement;
+          target.classList.add('active-node');
+          
+          if (this.infoTitle && this.infoDesc) {
+            this.infoTitle.textContent = target.dataset.title || 'Unknown Component';
+            this.infoDesc.textContent = target.dataset.desc || 'No description available.';
+            this.infoPanel.classList.add('visible');
+          }
+        });
+      });
+    }
+  }
+  
+  document.addEventListener('DOMContentLoaded', () => new InteractiveCircuit());
+</script>
+
+<style>
+  .interactive-circuit {
+    border: 1px solid var(--sl-color-gray-5, #444);
+    border-radius: 0.5rem;
+    background: var(--sl-color-black, #111);
+    margin: 2rem 0;
+    overflow: hidden;
+  }
+  
+  .circuit-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: var(--sl-color-gray-6, #1a1a1a);
+    border-bottom: 1px solid var(--sl-color-gray-5, #444);
+  }
+  
+  .circuit-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: var(--sl-color-white, #fff);
+  }
+  
+  .circuit-controls {
+    display: flex;
+    gap: 0.5rem;
+  }
+  
+  .circuit-btn {
+    background: var(--sl-color-gray-5, #333);
+    color: var(--sl-color-white, #fff);
+    border: none;
+    border-radius: 4px;
+    padding: 0.25rem 0.75rem;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.2s;
+  }
+  
+  .circuit-btn:hover {
+    background: var(--sl-color-gray-4, #555);
+  }
+  
+  .circuit-viewport {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    overflow: hidden;
+    background: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .circuit-content {
+    transition: transform 0.2s ease;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .circuit-content :global(svg) {
+    max-width: 100%;
+    max-height: 100%;
+  }
+  
+  .circuit-content :global(.interactive-node) {
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .circuit-content :global(.interactive-node:hover) {
+    filter: drop-shadow(0 0 5px var(--sl-color-accent, #3b82f6));
+  }
+  
+  .circuit-content :global(.interactive-node.active-node) {
+    filter: drop-shadow(0 0 8px var(--sl-color-green, #4ade80));
+  }
+  
+  .circuit-info-panel {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    width: 300px;
+    background: rgba(17, 17, 17, 0.95);
+    border: 1px solid var(--sl-color-gray-5, #444);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+    transform: translateY(120%);
+    transition: transform 0.3s ease;
+  }
+  
+  .circuit-info-panel.visible {
+    transform: translateY(0);
+  }
+  
+  .circuit-info-panel h4 {
+    margin: 0 0 0.5rem 0;
+    color: var(--sl-color-accent, #3b82f6);
+    font-size: 1rem;
+  }
+  
+  .circuit-info-panel p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--sl-color-gray-2, #ccc);
+    line-height: 1.4;
+  }
+</style>

package/pouches/sutures/astro/LegalWarning.astro

@@ -0,0 +1,18 @@
+---
+// DFM custom components
+export interface Props {
+  jurisdiction?: string;
+}
+const { jurisdiction = "your local jurisdiction" } = Astro.props;
+---
+<div class="not-content border-l-4 border-red-600 bg-red-900/20 p-4 my-6 rounded-r-md">
+  <div class="flex items-center gap-2 text-red-500 font-bold mb-2">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+    LEGAL DISCLAIMER
+  </div>
+  <p class="text-sm m-0 text-red-200">
+    The deployment of this hardware may violate laws in <strong>{jurisdiction}</strong>. 
+    This information is provided strictly for educational and defensive auditing purposes. 
+    You are solely responsible for compliance with local communications and privacy legislation.
+  </p>
+</div>

package/pouches/sutures/astro/MobileMenuToggle.astro

@@ -0,0 +1,105 @@
+---
+import {Icon} from '@astrojs/starlight/components';
+---
+
+<starlight-menu-button class="print:hidden">
+	<button
+		aria-expanded="false"
+		aria-label={Astro.locals.t('menuButton.accessibleLabel')}
+		aria-controls="starlight__sidebar"
+		class="sl-flex md:sl-hidden"
+	>
+		<Icon name="bars" class="open-menu" />
+		<Icon name="close" class="close-menu" />
+	</button>
+</starlight-menu-button>
+
+<script>
+	class StarlightMenuButton extends HTMLElement {
+		btn = this.querySelector('button')!;
+
+		constructor() {
+			super();
+			this.btn.addEventListener('click', () => this.toggleExpanded());
+
+			const parentNav = this.closest('nav');
+			if (parentNav) {
+				parentNav.addEventListener('keyup', (e) => this.closeOnEscape(e));
+			}
+		}
+
+		setExpanded(expanded: boolean) {
+			this.setAttribute('aria-expanded', String(expanded));
+			document.body.toggleAttribute('data-mobile-menu-expanded', expanded);
+		}
+
+		toggleExpanded() {
+			this.setExpanded(this.getAttribute('aria-expanded') !== 'true');
+		}
+
+		closeOnEscape(e: KeyboardEvent) {
+			if (e.code === 'Escape') {
+				this.setExpanded(false);
+				this.btn.focus();
+			}
+		}
+	}
+
+	customElements.define('starlight-menu-button', StarlightMenuButton);
+</script>
+
+<style>
+	@layer starlight.core {
+		button {
+			position: fixed;
+			top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
+			inset-inline-end: var(--sl-nav-pad-x);
+			z-index: var(--sl-z-index-navbar);
+			border: 0;
+			border-radius: 50%;
+			width: var(--sl-menu-button-size);
+			height: var(--sl-menu-button-size);
+			padding: 0.5rem;
+			background-color: var(--sl-color-white);
+			color: var(--sl-color-black);
+			box-shadow: var(--sl-shadow-md);
+			cursor: pointer;
+		}
+
+		[aria-expanded='true'] button {
+			background-color: var(--sl-color-gray-2);
+			box-shadow: none;
+		}
+
+		[aria-expanded='true'] button .open-menu {
+			display: none;
+		}
+
+		:not([aria-expanded='true']) button .close-menu {
+			display: none;
+		}
+
+		:global([data-theme='light']) button {
+			background-color: var(--sl-color-black);
+			color: var(--sl-color-white);
+		}
+
+		:global([data-theme='light']) [aria-expanded='true'] button {
+			background-color: var(--sl-color-gray-5);
+		}
+	}
+</style>
+
+<style is:global>
+	@layer starlight.core {
+		[data-mobile-menu-expanded] {
+			overflow: hidden;
+		}
+
+		@media (min-width: 50rem) {
+			[data-mobile-menu-expanded] {
+				overflow: auto;
+			}
+		}
+	}
+</style>