@dontfeedmachines/fieldkit 0.0.0-stage → 0.4.1

package/pouches/sutures/astro/Breadcrumb.astro

@@ -0,0 +1,56 @@
+---
+const url = Astro.url;
+const pathSegments = url.pathname.split("/").filter((segment) => segment);
+const breadcrumbItems = pathSegments.map((segment, index) => {
+  const href = "/" + pathSegments.slice(0, index + 1).join("/");
+  const text = decodeURIComponent(segment.replace(/-/g, " "));
+  return { href, text };
+});
+---
+
+<div class="breadcrumb">
+  <ul>
+    {breadcrumbItems.map((item) => <li>{item.text}</li>)}
+  </ul>
+</div>
+
+<style>
+  @layer starlight.core {
+    .breadcrumb {
+      padding:0 2.4rem;
+      padding-top: 0px;
+    }
+    ul {
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 0.875rem;
+      color: var(--sl-color-text);
+      padding-left: 0px;
+    }
+    li {
+      position: relative;
+      text-transform: capitalize;
+    }
+    li::after {
+      content: '';
+      display: inline-block;
+      width: 8px;
+      height: 10px;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+      background-image: url('data:image/svg+xml;utf8,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.50004 1L6.5 6L1.5 11" stroke="%23999999" stroke-width="1.5" stroke-miterlimit="16" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+ 
+
+    li:last-child {
+      color: var(--sl-color-white);
+    }
+    li:last-child::after {
+      display: none;
+    }
+  }
+</style>

package/pouches/sutures/astro/BuildStep.astro

@@ -0,0 +1,42 @@
+---
+// DFM custom components
+export interface Props {
+  title: string;
+  stepNumber: number;
+}
+
+const { title, stepNumber } = Astro.props;
+---
+<div class="build-step" data-step="{stepNumber}">
+  <details open={stepNumber === 1}>
+    <summary>
+      <div class="step-header">
+        <div class="step-checkbox">
+          <input type="checkbox" id={`step-${stepNumber}`} />
+          <label for={`step-${stepNumber}`}></label>
+        </div>
+        <span class="step-number">{stepNumber}.</span>
+        <span class="step-title">{title}</span>
+        <span class="step-toggle">▼</span>
+      </div>
+    </summary>
+    <div class="step-content">
+      <slot />
+    </div>
+  </details>
+</div>
+
+<style>
+  .build-step { border: 1px solid var(--sl-color-gray-5, #444); border-radius: 0.5rem; background: var(--sl-color-gray-6, #1a1a1a); transition: all 0.2s ease; }
+  .build-step.completed { opacity: 0.7; border-color: var(--sl-color-green, #4ade80); }
+  .build-step details > summary { list-style: none; cursor: pointer; }
+  .build-step details > summary::-webkit-details-marker { display: none; }
+  .step-header { display: flex; align-items: center; gap: 1rem; padding: 1rem; user-select: none; }
+  .step-checkbox { display: flex; align-items: center; }
+  .step-checkbox input { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--sl-color-green, #4ade80); }
+  .step-number { font-weight: 700; color: var(--sl-color-gray-3, #999); }
+  .step-title { font-weight: 600; flex: 1; color: var(--sl-color-white, #fff); }
+  .step-toggle { color: var(--sl-color-gray-3, #999); transition: transform 0.2s ease; }
+  details[open] .step-toggle { transform: rotate(180deg); }
+  .step-content { padding: 0 1rem 1rem 3.5rem; color: var(--sl-color-gray-2, #ccc); }
+</style>

package/pouches/sutures/astro/BuildSteps.astro

@@ -0,0 +1,63 @@
+---
+// DFM custom components
+// expects <BuildStep> components as children
+---
+<div class="build-steps-container">
+  <div class="progress-bar">
+    <div class="progress-fill" id="build-progress"></div>
+  </div>
+  <div class="steps-list">
+    <slot />
+  </div>
+</div>
+
+<script>
+  class BuildSteps {
+    constructor() {
+      this.init();
+    }
+    
+    init() {
+      const steps = document.querySelectorAll('.build-step');
+      const progress = document.getElementById('build-progress');
+      
+      if (!steps.length || !progress) return;
+      
+      const updateProgress = () => {
+        const completed = document.querySelectorAll('.build-step input[type="checkbox"]:checked').length;
+        const percent = (completed / steps.length) * 100;
+        progress.style.width = `${percent}%`;
+      };
+      
+      steps.forEach((step, index) => {
+        const checkbox = step.querySelector('input[type="checkbox"]');
+        if (checkbox) {
+          checkbox.addEventListener('change', (e) => {
+            if (e.target.checked) {
+              step.classList.add('completed');
+              const nextStep = steps[index + 1];
+              if (nextStep) {
+                const details = nextStep.querySelector('details');
+                if (details) details.open = true;
+              }
+            } else {
+              step.classList.remove('completed');
+            }
+            updateProgress();
+          });
+        }
+      });
+      
+      updateProgress();
+    }
+  }
+  
+  document.addEventListener('DOMContentLoaded', () => new BuildSteps());
+</script>
+
+<style>
+  .build-steps-container { margin: 2rem 0; }
+  .progress-bar { height: 8px; background: var(--sl-color-gray-5, #333); border-radius: 4px; margin-bottom: 1.5rem; overflow: hidden; }
+  .progress-fill { height: 100%; width: 0%; background: var(--sl-color-accent, #3b82f6); transition: width 0.3s ease; }
+  .steps-list { display: flex; flex-direction: column; gap: 1rem; }
+</style>

package/pouches/sutures/astro/Button.astro

@@ -0,0 +1,5 @@
+---
+const { label, link, variant } = Astro.props;
+---
+
+<a href={link} class={`btn btn-${variant}`}>{label}</a>

package/pouches/sutures/astro/CTA.astro

@@ -0,0 +1,58 @@
+---
+import { config } from "../../../src/wiki/config.ts";
+import Button from "./Button.astro";
+import Section from "./Section.astro";
+
+const { title, description, enable, fill_button, outline_button, background } = config.cta ?? {};
+---
+
+{
+  enable && (
+    <div class="cta-container" style={background ? `--fk-cta-bg: url(${background})` : undefined}>
+      <Section title={title} description={description}>
+        {fill_button?.enable && (
+          <Button
+            label={fill_button.label || "Get Started"}
+            link={fill_button.link || "/getting-started/introduction/overview/"}
+            variant="primary"
+          />
+        )}
+        {outline_button?.enable && (
+          <Button
+            label={outline_button.label || "Get a live demo"}
+            link={
+              outline_button.link || "/getting-started/introduction/overview/"
+            }
+            variant="outline-primary"
+          />
+        )}
+      </Section>
+    </div>
+  )
+}
+
+<style>
+  :global([data-theme="light"]) .cta-container {
+    background-blend-mode: multiply;
+    background-color: #f9fafb;
+  }
+
+  :global([data-theme="dark"]) .cta-container {
+    background: var(--fk-cta-bg, none) no-repeat center;
+    background-size: cover;
+    padding: 1rem;
+    position: relative;
+  }
+</style>
+
+<script>
+  const ctaContainerButton = document.querySelector(".cta-container a");
+
+  const buttonParent = ctaContainerButton?.parentElement;
+
+  if (buttonParent) {
+    buttonParent.style.display = "flex";
+    buttonParent.style.justifyContent = "center";
+    buttonParent.style.gap = "1rem";
+  }
+</script>

package/pouches/sutures/astro/Difficulty.astro

@@ -0,0 +1,27 @@
+---
+// DFM custom components
+export interface Props {
+  level: 1 | 2 | 3 | 4 | 5;
+  label?: string;
+}
+const { level, label } = Astro.props;
+const max = 5;
+---
+<div class="not-content flex items-center gap-4 my-4 p-3 bg-zinc-800/50 rounded-lg border border-zinc-700">
+  <div class="text-sm font-semibold uppercase tracking-wider text-zinc-400">
+    {label || "Assembly Difficulty"}
+  </div>
+  <div class="flex gap-1">
+    {Array.from({ length: max }).map((_, i) => (
+      <svg 
+        class={`w-5 h-5 ${i < level ? 'text-amber-500' : 'text-zinc-600'}`} 
+        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+      >
+        <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clip-rule="evenodd" />
+      </svg>
+    ))}
+  </div>
+  <div class="text-xs text-zinc-500">
+    {level} / 5
+  </div>
+</div>

package/pouches/sutures/astro/Footer.astro

@@ -0,0 +1,80 @@
+---
+import { config, getTranslations } from "../../../src/wiki/config.ts";
+import { markdownify } from "../../../src/wiki/textConverter.ts";
+import { teletextPages } from "../../../src/wiki/teletext.ts";
+
+type Link = { name: string; url: string; page?: string };
+type Group = { title: string; links: Link[] };
+
+const menu = await getTranslations(Astro.currentLocale || "en");
+// numbered from the sidebar the same way the home index is, so the two never disagree
+const wiki: Group = {
+  title: "THIS WIKI",
+  links: teletextPages(Astro.locals.starlightRoute.sidebar).map((p) => ({ name: p.label, url: p.href, page: String(p.page) })),
+};
+const groups = [wiki, ...(Object.values(menu.footer ?? {}) as Group[])];
+const bands = ["red", "green", "yellow", "cyan"];
+const external = (url: string) => /^https?:\/\//.test(url);
+---
+
+<footer class="tt-footer">
+  <div class="container">
+    <div class="tt-footer-grid">
+      {
+        groups.map((g, i) => (
+          <nav aria-label={g.title}>
+            <h2 class={`tt-footer-band tt-fx-${bands[i % bands.length]}`}>{g.title}</h2>
+            <ul>
+              {g.links.map((l) => (
+                <li>
+                  <a href={l.url} rel={external(l.url) ? "noopener" : undefined}>
+                    {l.page && <span class="tt-footer-page">{l.page}</span>}
+                    {l.name}
+                    {external(l.url) && <span class="tt-footer-out" aria-hidden="true">&#8599;</span>}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ))
+      }
+    </div>
+    <div class="tt-footer-bottom">
+      <p set:html={markdownify(config?.params?.copyright)} />
+      <p class="tt-footer-sign">P100 {config.site.status_name} // END OF PAGE</p>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .tt-footer { border-top: 2px solid var(--tt-ink); margin-top: 48px; }
+  .tt-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 0 40px; }
+  .tt-footer nav { min-width: 0; }
+  .tt-footer-band {
+    display: block; margin: 0 0 14px !important; padding: 9px 12px; color: #000 !important;
+    font: 400 15px/1.1 var(--tt-font-tele) !important; letter-spacing: 0.02em; text-transform: uppercase;
+  }
+  .tt-footer ul { list-style: none; margin: 0; padding: 0 12px; }
+  .tt-footer li { margin: 0 !important; }
+  .tt-footer li a {
+    display: flex; align-items: baseline; gap: 10px; padding: 5px 0; color: var(--tt-ink); text-decoration: none; font-size: 1rem;
+  }
+  .tt-footer li a:hover, .tt-footer li a:focus-visible { color: var(--tt-link); text-decoration: underline; }
+  .tt-footer-page { font: 400 14px/1 var(--tt-font-tele); color: var(--tt-yellow); }
+  :global(:root[data-theme="light"]) .tt-footer-page { color: var(--tt-blue); }
+  .tt-footer-out { font-size: 0.8em; color: var(--tt-muted); }
+  .tt-footer-bottom {
+    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px;
+    border-top: 2px dashed var(--tt-rule); padding: 18px 0 32px; font: 400 14px/1.4 var(--tt-font-tele); color: var(--tt-muted);
+  }
+  .tt-footer-bottom p { margin: 0; }
+  .tt-footer-bottom :global(a) { color: var(--tt-link); }
+  .tt-footer-sign { color: var(--tt-yellow); }
+  :global(:root[data-theme="light"]) .tt-footer-sign { color: #000; }
+  @media (max-width: 800px) {
+    .tt-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
+  }
+  @media (max-width: 480px) {
+    .tt-footer-grid { grid-template-columns: 1fr; }
+  }
+</style>

package/pouches/sutures/astro/Glossary.astro

@@ -0,0 +1,64 @@
+---
+// DFM custom components
+export interface Props {
+  term: string;
+  definition: string;
+}
+
+const { term, definition } = Astro.props;
+---
+<span class="glossary-term" data-definition={definition}>
+  {term}
+  <span class="glossary-tooltip">{definition}</span>
+</span>
+
+<style>
+  .glossary-term {
+    position: relative;
+    border-bottom: 1px dotted var(--sl-color-text-accent, #60a5fa);
+    cursor: help;
+    color: var(--sl-color-text-accent, #60a5fa);
+    font-weight: 500;
+  }
+
+  .glossary-tooltip {
+    visibility: hidden;
+    opacity: 0;
+    width: max-content;
+    max-width: 250px;
+    background-color: var(--sl-color-black, #111);
+    color: var(--sl-color-white, #fff);
+    text-align: center;
+    border: 1px solid var(--sl-color-gray-5, #444);
+    border-radius: 6px;
+    padding: 0.75rem;
+    position: absolute;
+    z-index: 10;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%) translateY(10px);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+    font-size: 0.85rem;
+    font-weight: normal;
+    line-height: 1.4;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
+  }
+
+  .glossary-tooltip::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--sl-color-gray-5, #444) transparent transparent transparent;
+  }
+
+  .glossary-term:hover .glossary-tooltip,
+  .glossary-term:focus-within .glossary-tooltip {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+</style>

package/pouches/sutures/astro/Grid.astro

@@ -0,0 +1,54 @@
+---
+// DFM custom components
+interface Props {
+	columns?: number;
+}
+
+const { columns = 2 } = Astro.props;
+---
+
+<div class="card-grid" style={`--columns: ${columns}`}><slot /></div>
+
+<style>
+	@layer starlight.components {
+		.card-grid {
+			display: grid;
+			gap: 1rem;
+			grid-template-columns: 1fr;
+			margin-top: 1.4rem !important;
+		}
+
+		.card-grid > :global(*) {
+			margin-top: 0 !important;
+		}
+
+		@media (max-width: 767px) {
+			.card-grid {
+				grid-template-columns: 1fr !important;
+				gap: 1rem;
+			}
+		}
+
+		@media (min-width: 768px) and (max-width: 1023px) {
+			.card-grid {
+				grid-template-columns: repeat(min(var(--columns), 2), 1fr);
+				gap: 1.5rem;
+			}
+		}
+
+		@media (min-width: 1024px) {
+			.card-grid {
+				grid-template-columns: repeat(var(--columns), 1fr);
+				gap: 1.7rem;
+			}
+		}
+
+		@media (min-width: 1440px) {
+			.card-grid {
+				grid-template-columns: repeat(min(var(--columns), 4), 1fr);
+				gap: 1.8rem;
+				margin: 0 auto;
+			}
+		}
+	}
+</style>