@vojtaholik/create-static-kit 1.0.8 → 2.1.0

package/template/public/js/dev-overlay.js

@@ -0,0 +1,366 @@
+/**
+ * Static Kit - Dev Overlay
+ *
+ * - Alt+click on any block to inspect its schema address
+ * - Hot reload via SSE connection
+ */
+
+(function () {
+  "use strict";
+
+  // ==========================================================================
+  // Hot Reload Client
+  // ==========================================================================
+
+  var reconnectAttempts = 0;
+  var maxReconnectAttempts = 20;
+  var wasConnected = false;
+  var lastServerTime = null;
+
+  function connectHMR() {
+    var source = new EventSource("/__hmr");
+
+    source.onopen = function () {
+      console.log("[HMR] Connected");
+
+      // If we were previously connected and reconnected, reload
+      // This handles the case where the server restarted (--watch)
+      if (wasConnected) {
+        console.log("[HMR] Server restarted, reloading...");
+        window.location.reload();
+        return;
+      }
+
+      wasConnected = true;
+      reconnectAttempts = 0;
+    };
+
+    source.onmessage = function (event) {
+      try {
+        var data = JSON.parse(event.data);
+
+        if (data.type === "connected") {
+          // Store server start time to detect restarts
+          if (lastServerTime && data.time && lastServerTime !== data.time) {
+            console.log("[HMR] Server restarted, reloading...");
+            window.location.reload();
+          }
+          lastServerTime = data.time;
+          return;
+        }
+
+        if (data.type === "css") {
+          // Hot reload CSS and SVG sprites without full page refresh
+          reloadCSS();
+          reloadSVGSprites();
+        } else if (data.type === "full") {
+          // Full page reload
+          console.log("[HMR] Reloading...");
+          window.location.reload();
+        }
+      } catch (e) {
+        console.error("[HMR] Failed to parse message:", e);
+      }
+    };
+
+    source.onerror = function () {
+      source.close();
+      reconnectAttempts++;
+
+      if (reconnectAttempts <= maxReconnectAttempts) {
+        // Quick reconnects at first, then slower
+        var delay =
+          reconnectAttempts < 3 ? 100 : Math.min(500 * reconnectAttempts, 3000);
+        console.log("[HMR] Disconnected, reconnecting in " + delay + "ms...");
+        setTimeout(connectHMR, delay);
+      } else {
+        console.log(
+          "[HMR] Max reconnection attempts reached. Refresh manually."
+        );
+      }
+    };
+  }
+
+  function reloadCSS() {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+    var reloaded = 0;
+
+    links.forEach(function (link) {
+      var href = link.href;
+      if (!href) return;
+
+      // Add cache-busting query param
+      var url = new URL(href);
+      url.searchParams.set("_hmr", Date.now());
+
+      // Create new link element
+      var newLink = document.createElement("link");
+      newLink.rel = "stylesheet";
+      newLink.href = url.toString();
+
+      newLink.onload = function () {
+        link.remove();
+        reloaded++;
+        if (reloaded === links.length) {
+          console.log("[HMR] CSS reloaded");
+        }
+      };
+
+      newLink.onerror = function () {
+        console.error("[HMR] Failed to reload CSS:", href);
+      };
+
+      link.parentNode.insertBefore(newLink, link.nextSibling);
+    });
+  }
+
+  function reloadSVGSprites() {
+    // Find all <use> elements referencing sprite files
+    var uses = document.querySelectorAll("use[href*='sprite']");
+    if (uses.length === 0) return;
+
+    var timestamp = Date.now();
+    uses.forEach(function (use) {
+      var href = use.getAttribute("href");
+      if (!href) return;
+
+      // Parse href and add cache-busting param
+      var hashIndex = href.indexOf("#");
+      var path = hashIndex > -1 ? href.slice(0, hashIndex) : href;
+      var fragment = hashIndex > -1 ? href.slice(hashIndex) : "";
+
+      // Strip existing _hmr param if present
+      var cleanPath = path.replace(/[?&]_hmr=\d+/, "");
+      var separator = cleanPath.indexOf("?") > -1 ? "&" : "?";
+      var newHref = cleanPath + separator + "_hmr=" + timestamp + fragment;
+
+      use.setAttribute("href", newHref);
+    });
+
+    console.log("[HMR] SVG sprites reloaded (" + uses.length + " refs)");
+  }
+
+  // Start HMR connection
+  connectHMR();
+
+  // ==========================================================================
+  // Block Inspector
+  // ==========================================================================
+
+  var overlay = null;
+
+  function createOverlay() {
+    var el = document.createElement("div");
+    el.id = "static-kit-dev-overlay";
+    el.innerHTML = [
+      "<style>",
+      "#static-kit-dev-overlay {",
+      "  position: fixed;",
+      "  z-index: 99999;",
+      "  background: #1a1a2e;",
+      "  color: #fff;",
+      "  padding: 16px;",
+      "  border-radius: 8px;",
+      "  font-family: ui-monospace, monospace;",
+      "  font-size: 13px;",
+      "  line-height: 1.5;",
+      "  max-width: 480px;",
+      "  box-shadow: 0 10px 40px rgba(0,0,0,0.3);",
+      "  display: none;",
+      "}",
+      "#static-kit-dev-overlay.visible { display: block; }",
+      "#static-kit-dev-overlay h4 {",
+      "  margin: 0 0 12px;",
+      "  font-size: 14px;",
+      "  font-weight: 600;",
+      "  color: #6366f1;",
+      "}",
+      "#static-kit-dev-overlay dl {",
+      "  margin: 0;",
+      "  display: grid;",
+      "  grid-template-columns: auto 1fr;",
+      "  gap: 4px 12px;",
+      "}",
+      "#static-kit-dev-overlay dt {",
+      "  color: #9ca3af;",
+      "}",
+      "#static-kit-dev-overlay dd {",
+      "  margin: 0;",
+      "  word-break: break-all;",
+      "}",
+      "#static-kit-dev-overlay a {",
+      "  color: #818cf8;",
+      "  text-decoration: none;",
+      "  display: inline-flex;",
+      "  align-items: center;",
+      "  gap: 4px;",
+      "}",
+      "#static-kit-dev-overlay a:hover {",
+      "  color: #a5b4fc;",
+      "  text-decoration: underline;",
+      "}",
+      "#static-kit-dev-overlay .file-links {",
+      "  margin-top: 12px;",
+      "  padding-top: 12px;",
+      "  border-top: 1px solid #374151;",
+      "  display: flex;",
+      "  flex-direction: column;",
+      "  gap: 6px;",
+      "}",
+      "#static-kit-dev-overlay .close-btn {",
+      "  position: absolute;",
+      "  top: 8px;",
+      "  right: 8px;",
+      "  background: none;",
+      "  border: none;",
+      "  color: #9ca3af;",
+      "  cursor: pointer;",
+      "  padding: 4px;",
+      "  font-size: 16px;",
+      "}",
+      "#static-kit-dev-overlay .close-btn:hover { color: #fff; }",
+      "#static-kit-dev-overlay .loading {",
+      "  color: #9ca3af;",
+      "  font-style: italic;",
+      "}",
+      "[data-schema-address] { position: relative; }",
+      "[data-schema-address].inspecting {",
+      "  outline: 2px dashed #6366f1;",
+      "  outline-offset: 2px;",
+      "}",
+      "</style>",
+      '<button class="close-btn" aria-label="Close">&times;</button>',
+      "<h4>Block Inspector</h4>",
+      "<dl></dl>",
+      '<div class="file-links"></div>',
+    ].join("\n");
+    document.body.appendChild(el);
+
+    el.querySelector(".close-btn").addEventListener("click", hideOverlay);
+
+    return el;
+  }
+
+  function makeCursorLink(filePath, label) {
+    if (!filePath) return '<span style="color:#6b7280">-</span>';
+    // cursor://file/absolute/path
+    var href = "cursor://file" + filePath;
+    var shortPath = filePath.split("/").slice(-2).join("/");
+    return (
+      '<a href="' +
+      href +
+      '" title="' +
+      filePath +
+      '">' +
+      (label || shortPath) +
+      " ↗</a>"
+    );
+  }
+
+  async function showOverlay(blockEl, x, y) {
+    if (!overlay) {
+      overlay = createOverlay();
+    }
+
+    var address = blockEl.getAttribute("data-schema-address");
+    var blockId = blockEl.getAttribute("data-block-id");
+    var parts = address ? address.split("::") : [];
+
+    // Remove previous inspecting class
+    var prev = document.querySelector(".inspecting");
+    if (prev) prev.classList.remove("inspecting");
+    blockEl.classList.add("inspecting");
+
+    // Position overlay
+    overlay.style.top = Math.min(y + 10, window.innerHeight - 200) + "px";
+    overlay.style.left = Math.min(x + 10, window.innerWidth - 500) + "px";
+    overlay.classList.add("visible");
+
+    var dl = overlay.querySelector("dl");
+    var fileLinks = overlay.querySelector(".file-links");
+
+    // Show loading state
+    dl.innerHTML = [
+      "<dt>Page</dt><dd>" + (parts[0] || "-") + "</dd>",
+      "<dt>Region</dt><dd>" + (parts[1] || "-") + "</dd>",
+      "<dt>Block ID</dt><dd>" + (blockId || "-") + "</dd>",
+    ].join("");
+    fileLinks.innerHTML = '<span class="loading">Loading...</span>';
+
+    // Fetch full info from server
+    try {
+      var res = await fetch(
+        "/__inspect?address=" + encodeURIComponent(address)
+      );
+      var data = await res.json();
+
+      if (data.error) {
+        fileLinks.innerHTML =
+          '<span style="color:#ef4444">' + data.error + "</span>";
+        return;
+      }
+
+      dl.innerHTML = [
+        "<dt>Block Type</dt><dd><strong>" +
+          (data.block?.type || "-") +
+          "</strong></dd>",
+        "<dt>Page</dt><dd>" + (data.page?.id || "-") + "</dd>",
+        "<dt>Region</dt><dd>" + (data.address?.region || "-") + "</dd>",
+        "<dt>Block ID</dt><dd>" + (data.block?.id || "-") + "</dd>",
+      ].join("");
+
+      fileLinks.innerHTML =
+        [
+          data.block?.sourceFile
+            ? makeCursorLink(data.block.sourceFile, "📦 Block Source")
+            : "",
+          data.block?.templateFile
+            ? makeCursorLink(data.block.templateFile, "📄 Template")
+            : "",
+          data.page?.sourceFile
+            ? makeCursorLink(data.page.sourceFile, "📄 Page Config")
+            : "",
+        ]
+          .filter(Boolean)
+          .join("") ||
+        '<span style="color:#6b7280">No source files found</span>';
+    } catch (err) {
+      fileLinks.innerHTML = '<span style="color:#ef4444">Failed to load</span>';
+      console.error("[Inspector] Failed to fetch:", err);
+    }
+  }
+
+  function hideOverlay() {
+    if (overlay) {
+      overlay.classList.remove("visible");
+    }
+    var prev = document.querySelector(".inspecting");
+    if (prev) prev.classList.remove("inspecting");
+  }
+
+  // Alt+click handler
+  document.addEventListener("click", function (e) {
+    if (!e.altKey) {
+      hideOverlay();
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Find closest block element
+    var blockEl = e.target.closest("[data-schema-address]");
+    if (blockEl) {
+      showOverlay(blockEl, e.clientX, e.clientY);
+    }
+  });
+
+  // ESC to close
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") {
+      hideOverlay();
+    }
+  });
+
+  console.log("Static Kit Dev Overlay loaded. Alt+click on blocks to inspect.");
+})();

package/template/public/js/index.js

@@ -0,0 +1,35 @@
+/**
+ * Static Kit - Client Runtime
+ *
+ * Minimal ES5-compatible enhancement script.
+ * Add interactive behaviors here as needed.
+ */
+
+(function () {
+  "use strict";
+
+  // Smooth scroll for anchor links
+  document.addEventListener("click", function (e) {
+    var target = e.target;
+    if (target.tagName === "A" && target.hash) {
+      var element = document.querySelector(target.hash);
+      if (element) {
+        e.preventDefault();
+        element.scrollIntoView({ behavior: "smooth" });
+        history.pushState(null, null, target.hash);
+      }
+    }
+  });
+
+  // Mark external links
+  var links = document.querySelectorAll('a[href^="http"]');
+  for (var i = 0; i < links.length; i++) {
+    var link = links[i];
+    if (link.hostname !== window.location.hostname) {
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+
+  console.log("Static Kit initialized");
+})();

package/template/public/sprite.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
+  <symbol id="magic-wand" viewBox="0 0 24 24">
+    <path stroke="#141B34" stroke-linejoin="round" stroke-width="1.5" d="m10.938 11.077-7.527 7.528a1.403 1.403 0 1 0 1.985 1.984l7.527-7.527m-1.985-1.985 1.985 1.985m-1.985-1.985.744-.744m1.24 2.729.745-.744m-1.985-1.985.043-.042a.992.992 0 0 1 1.403 0l.581.58a.992.992 0 0 1 0 1.404l-.042.043m-1.985-1.985 1.985 1.985m4.571-9.151a.29.29 0 0 1 .524 0l.392.84c.173.37.47.666.84.839l.839.392a.29.29 0 0 1 0 .524l-.84.392c-.37.173-.666.47-.839.84l-.392.839a.29.29 0 0 1-.524 0l-.392-.84a1.737 1.737 0 0 0-.84-.839l-.839-.392a.29.29 0 0 1 0-.524l.84-.392c.37-.173.666-.47.839-.84l.392-.839Z"/>
+  <path stroke="#141B34" stroke-linejoin="round" stroke-width="1.5" d="M18.238 14.167a.29.29 0 0 1 .524 0l.392.84c.173.37.47.666.84.839l.839.392a.29.29 0 0 1 0 .524l-.84.392c-.37.173-.666.47-.839.84l-.392.839a.29.29 0 0 1-.524 0l-.392-.84a1.737 1.737 0 0 0-.84-.839l-.839-.392a.29.29 0 0 1 0-.524l.84-.392c.37-.173.666-.47.839-.84l.392-.839Zm-11-11a.29.29 0 0 1 .524 0l.392.84c.173.37.47.666.84.839l.839.392a.29.29 0 0 1 0 .524l-.84.392c-.37.173-.666.47-.839.84l-.392.839a.29.29 0 0 1-.524 0l-.392-.84a1.737 1.737 0 0 0-.84-.839l-.839-.392a.29.29 0 0 1 0-.524l.84-.392c.37-.173.666-.47.839-.84l.392-.839Z" opacity=".4"/>
+  </symbol>
+</svg>

package/template/public/svg/magic-wand.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#141B34" stroke-linejoin="round" stroke-width="1.5" d="m10.938 11.077-7.527 7.528a1.403 1.403 0 1 0 1.985 1.984l7.527-7.527m-1.985-1.985 1.985 1.985m-1.985-1.985.744-.744m1.24 2.729.745-.744m-1.985-1.985.043-.042a.992.992 0 0 1 1.403 0l.581.58a.992.992 0 0 1 0 1.404l-.042.043m-1.985-1.985 1.985 1.985m4.571-9.151a.29.29 0 0 1 .524 0l.392.84c.173.37.47.666.84.839l.839.392a.29.29 0 0 1 0 .524l-.84.392c-.37.173-.666.47-.839.84l-.392.839a.29.29 0 0 1-.524 0l-.392-.84a1.737 1.737 0 0 0-.84-.839l-.839-.392a.29.29 0 0 1 0-.524l.84-.392c.37-.173.666-.47.839-.84l.392-.839Z"/>
+  <path stroke="#141B34" stroke-linejoin="round" stroke-width="1.5" d="M18.238 14.167a.29.29 0 0 1 .524 0l.392.84c.173.37.47.666.84.839l.839.392a.29.29 0 0 1 0 .524l-.84.392c-.37.173-.666.47-.839.84l-.392.839a.29.29 0 0 1-.524 0l-.392-.84a1.737 1.737 0 0 0-.84-.839l-.839-.392a.29.29 0 0 1 0-.524l.84-.392c.37-.173.666-.47.839-.84l.392-.839Zm-11-11a.29.29 0 0 1 .524 0l.392.84c.173.37.47.666.84.839l.839.392a.29.29 0 0 1 0 .524l-.84.392c-.37.173-.666.47-.839.84l-.392.839a.29.29 0 0 1-.524 0l-.392-.84a1.737 1.737 0 0 0-.84-.839l-.839-.392a.29.29 0 0 1 0-.524l.84-.392c.37-.173.666-.47.839-.84l.392-.839Z" opacity=".4"/>
+</svg>

package/template/site/pages/about.page.ts

@@ -0,0 +1,91 @@
+import type { PageConfig } from "@vojtaholik/static-kit-core";
+
+export const aboutPage: PageConfig = {
+  id: "about",
+  path: "/about",
+  title: "About Static Kit",
+  template: "base.html",
+  density: "comfortable",
+  regions: {
+    main: {
+      blocks: [
+        {
+          id: "hero-about",
+          type: "hero",
+          props: {
+            eyebrow: "About",
+            headline: "The Philosophy Behind Static Kit",
+            subheadline:
+              "We believe static sites should be fast, maintainable, and a joy to build.",
+          },
+          layout: {
+            tone: "surface",
+            contentAlign: "center",
+            contentWidth: "narrow",
+          },
+        },
+        {
+          id: "text-mission",
+          type: "textSection",
+          props: {
+            eyebrow: "Our Mission",
+            headline: "Simplicity Without Sacrifice",
+            body: `
+              <p>Static Kit was born from frustration with modern web development complexity. We wanted a tool that:</p>
+              <ul>
+                <li>Produces fast, accessible websites by default</li>
+                <li>Doesn't require a JavaScript framework for content sites</li>
+                <li>Makes content management intuitive for developers and content editors</li>
+                <li>Stays out of your way while providing powerful abstractions</li>
+              </ul>
+              <p>The result is a static site generator that embraces HTML as the output format, TypeScript for type safety, and a simple block-based architecture that scales from landing pages to large marketing sites.</p>
+            `,
+          },
+          layout: {
+            tone: "surface",
+            contentAlign: "left",
+            contentWidth: "narrow",
+          },
+        },
+        {
+          id: "features-principles",
+          type: "featureGrid",
+          props: {
+            headline: "Core Principles",
+            columns: "2",
+            features: [
+              {
+                icon: "📄",
+                title: "HTML First",
+                description:
+                  "The web is built on HTML. We generate semantic, accessible markup that works everywhere.",
+              },
+              {
+                icon: "🔒",
+                title: "Type Safety",
+                description:
+                  "Every block prop, every page config, every template expression is type-checked.",
+              },
+              {
+                icon: "🎯",
+                title: "Zero Runtime",
+                description:
+                  "No framework JavaScript shipped to users. Add interactivity only where you need it.",
+              },
+              {
+                icon: "🔌",
+                title: "CMS Agnostic",
+                description:
+                  "Your content schemas work with any headless CMS. We don't lock you in.",
+              },
+            ],
+          },
+          layout: {
+            tone: "raised",
+            contentAlign: "center",
+          },
+        },
+      ],
+    },
+  },
+};

package/template/site/pages/base.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JAP</title>
+    <link rel="stylesheet" href="public/css/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <nav class="container">
+        <a href="/" class="site-header__logo">
+          <svg width="24" height="24">
+            <use href="public/sprite.svg#magic-wand"></use>
+          </svg>
+          Static Kit
+        </a>
+        <div class="site-header__nav">
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+          <a href="/blog">Blog</a>
+        </div>
+      </nav>
+    </header>
+
+    <main data-region="main">
+      <!-- Blocks render here -->
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; 2024 Static Kit. Built with static-block-kit.</p>
+      </div>
+    </footer>
+
+    <script src="public/js/index.js"></script>
+  </body>
+</html>

package/template/site/pages/index.page.ts

@@ -0,0 +1,107 @@
+import type { PageConfig } from "@vojtaholik/static-kit-core";
+
+export const indexPage: PageConfig = {
+  id: "home",
+  path: "/",
+  title: "JAP",
+  template: "base.html",
+  density: "comfortable",
+  regions: {
+    main: {
+      blocks: [
+        {
+          id: "hero-1",
+          type: "hero",
+          props: {
+            eyebrow: "Introducing Static Kit",
+            headline: "Build Beautiful Static Sites",
+            subheadline:
+              "A modern static site generator with block-based content management and a Vue-like template DSL.",
+            primaryCta: {
+              href: "/docs/getting-started",
+              label: "Get Started",
+            },
+            secondaryCta: {
+              href: "/about",
+              label: "Learn More",
+            },
+          },
+          layout: {
+            tone: "accent",
+            contentAlign: "center",
+            contentWidth: "narrow",
+          },
+        },
+        {
+          id: "features-1",
+          type: "featureGrid",
+          props: {
+            headline: "Why Static Kit?",
+            subheadline:
+              "Everything you need to build fast, maintainable static sites.",
+            columns: "3",
+            features: [
+              {
+                icon: "⚡",
+                title: "Lightning Fast",
+                description:
+                  "Pre-rendered HTML with zero JavaScript by default. Your pages load instantly.",
+              },
+              {
+                icon: "🧱",
+                title: "Block-Based",
+                description:
+                  "Compose pages from reusable blocks with type-safe props and CMS-ready schemas.",
+              },
+              {
+                icon: "🎨",
+                title: "Design System Ready",
+                description:
+                  "Built-in layout primitives and design tokens. Customize everything with CSS.",
+              },
+              {
+                icon: "📝",
+                title: "CMS Compatible",
+                description:
+                  "Export your content schemas for use with any headless CMS.",
+              },
+              {
+                icon: "🔧",
+                title: "Developer Experience",
+                description:
+                  "Hot reload, TypeScript everywhere, and a simple mental model.",
+              },
+              {
+                icon: "🚀",
+                title: "Deploy Anywhere",
+                description:
+                  "Output is plain HTML/CSS/JS. Deploy to any static host.",
+              },
+            ],
+          },
+          layout: {
+            tone: "surface",
+            contentAlign: "center",
+          },
+        },
+        {
+          id: "cta-1",
+          type: "textSection",
+          props: {
+            headline: "Ready to build?",
+            body: "<p>Get started with Static Kit in minutes. Install the CLI, create a new project, and start building beautiful static sites.</p>",
+            cta: {
+              href: "/docs/getting-started",
+              label: "Read the Docs",
+            },
+          },
+          layout: {
+            tone: "raised",
+            contentAlign: "center",
+            contentWidth: "narrow",
+          },
+        },
+      ],
+    },
+  },
+};

package/template/site/pages/index.ts

@@ -0,0 +1,16 @@
+import type { PageConfig } from "@vojtaholik/static-kit-core";
+import { indexPage } from "./index.page.ts";
+import { aboutPage } from "./about.page.ts";
+
+// All pages in the site
+export const pages: PageConfig[] = [indexPage, aboutPage];
+
+// Get page by path
+export function getPageByPath(path: string): PageConfig | undefined {
+  return pages.find((p) => p.path === path);
+}
+
+// Get page by id
+export function getPageById(id: string): PageConfig | undefined {
+  return pages.find((p) => p.id === id);
+}

package/template/static-kit.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "@vojtaholik/static-kit-core";
+
+export default defineConfig({
+  blocksDir: "blocks",
+  pagesDir: "site/pages",
+  publicDir: "public",
+  outDir: "dist",
+  publicPath: "/public",
+  devPort: 3000,
+});