starmark 1.0.0

package/public/frontmatter.js

@@ -0,0 +1,554 @@
+function stripQuotes(value) {
+  const trimmed = value.trim();
+  if (
+    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+    (trimmed.startsWith("'") && trimmed.endsWith("'"))
+  ) {
+    return trimmed.slice(1, -1).replace(/\\(['"])/g, "$1");
+  }
+
+  return trimmed;
+}
+
+function parseScalar(raw) {
+  const value = raw.trim();
+  if (value === "") {
+    return "";
+  }
+
+  if (value === "null" || value === "~") {
+    return null;
+  }
+
+  if (value === "true") {
+    return true;
+  }
+
+  if (value === "false") {
+    return false;
+  }
+
+  if (
+    (value.startsWith('"') && value.endsWith('"')) ||
+    (value.startsWith("'") && value.endsWith("'"))
+  ) {
+    return stripQuotes(value);
+  }
+
+  if (/^-?\d+(?:\.\d+)?$/.test(value)) {
+    return Number(value);
+  }
+
+  if (/^\d{4}-\d{2}-\d{2}(?:[T ]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?)?$/.test(value)) {
+    return value;
+  }
+
+  return value;
+}
+
+function countIndent(line) {
+  const match = line.match(/^ */);
+  return match ? match[0].length : 0;
+}
+
+function isBlank(line) {
+  return line.trim() === "";
+}
+
+function parseInlineArray(value) {
+  const inner = value.slice(1, -1).trim();
+  if (inner === "") {
+    return [];
+  }
+
+  const items = [];
+  let current = "";
+  let quote = null;
+
+  for (let index = 0; index < inner.length; index += 1) {
+    const char = inner[index];
+
+    if (quote) {
+      current += char;
+      if (char === quote && inner[index - 1] !== "\\") {
+        quote = null;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      current += char;
+      continue;
+    }
+
+    if (char === ",") {
+      items.push(parseScalar(current));
+      current = "";
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current.trim() !== "") {
+    items.push(parseScalar(current));
+  }
+
+  return items;
+}
+
+function parseInlineObject(value) {
+  const inner = value.slice(1, -1).trim();
+  if (inner === "") {
+    return {};
+  }
+
+  const result = {};
+  let currentKey = "";
+  let currentValue = "";
+  let quote = null;
+  let readingKey = true;
+
+  for (let index = 0; index < inner.length; index += 1) {
+    const char = inner[index];
+
+    if (quote) {
+      if (readingKey) {
+        currentKey += char;
+      } else {
+        currentValue += char;
+      }
+      if (char === quote && inner[index - 1] !== "\\") {
+        quote = null;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      if (readingKey) {
+        currentKey += char;
+      } else {
+        currentValue += char;
+      }
+      continue;
+    }
+
+    if (readingKey) {
+      if (char === ":") {
+        readingKey = false;
+        continue;
+      }
+      currentKey += char;
+      continue;
+    }
+
+    if (char === ",") {
+      result[currentKey.trim()] = parseScalar(currentValue);
+      currentKey = "";
+      currentValue = "";
+      readingKey = true;
+      continue;
+    }
+
+    currentValue += char;
+  }
+
+  if (currentKey.trim() !== "") {
+    result[currentKey.trim()] = parseScalar(currentValue);
+  }
+
+  return result;
+}
+
+function parseBlock(lines, startIndex, baseIndent) {
+  const firstLine = lines[startIndex];
+  const trimmed = firstLine.trim();
+
+  if (trimmed.startsWith("- ")) {
+    return parseArrayBlock(lines, startIndex, baseIndent);
+  }
+
+  return parseObjectBlock(lines, startIndex, baseIndent);
+}
+
+function parseObjectBlock(lines, startIndex, baseIndent) {
+  const result = {};
+  let index = startIndex;
+
+  while (index < lines.length) {
+    const line = lines[index];
+    if (isBlank(line)) {
+      index += 1;
+      continue;
+    }
+
+    const indent = countIndent(line);
+    if (indent < baseIndent) {
+      break;
+    }
+
+    if (indent > baseIndent) {
+      throw new Error(`Unexpected indentation at line ${index + 1}`);
+    }
+
+    const trimmed = line.trim();
+    const colonIndex = trimmed.indexOf(":");
+    if (colonIndex === -1) {
+      throw new Error(`Expected key at line ${index + 1}`);
+    }
+
+    const key = trimmed.slice(0, colonIndex).trim();
+    const remainder = trimmed.slice(colonIndex + 1).trim();
+    index += 1;
+
+    if (remainder === "") {
+      while (index < lines.length && isBlank(lines[index])) {
+        index += 1;
+      }
+
+      if (index >= lines.length) {
+        result[key] = null;
+        continue;
+      }
+
+      const childIndent = countIndent(lines[index]);
+      if (childIndent <= baseIndent) {
+        result[key] = null;
+        continue;
+      }
+
+      const [value, nextIndex] = parseBlock(lines, index, childIndent);
+      result[key] = value;
+      index = nextIndex;
+      continue;
+    }
+
+    if (remainder.startsWith("[") && remainder.endsWith("]")) {
+      result[key] = parseInlineArray(remainder);
+      continue;
+    }
+
+    if (remainder.startsWith("{") && remainder.endsWith("}")) {
+      result[key] = parseInlineObject(remainder);
+      continue;
+    }
+
+    result[key] = parseScalar(remainder);
+  }
+
+  return [result, index];
+}
+
+function parseArrayBlock(lines, startIndex, baseIndent) {
+  const result = [];
+  let index = startIndex;
+
+  while (index < lines.length) {
+    const line = lines[index];
+    if (isBlank(line)) {
+      index += 1;
+      continue;
+    }
+
+    const indent = countIndent(line);
+    if (indent < baseIndent) {
+      break;
+    }
+
+    if (indent > baseIndent) {
+      throw new Error(`Unexpected indentation at line ${index + 1}`);
+    }
+
+    const trimmed = line.trim();
+    if (!trimmed.startsWith("- ")) {
+      break;
+    }
+
+    const itemText = trimmed.slice(2).trim();
+    index += 1;
+
+    if (itemText === "") {
+      while (index < lines.length && isBlank(lines[index])) {
+        index += 1;
+      }
+
+      if (index >= lines.length) {
+        result.push(null);
+        continue;
+      }
+
+      const childIndent = countIndent(lines[index]);
+      if (childIndent <= baseIndent) {
+        result.push(null);
+        continue;
+      }
+
+      const [value, nextIndex] = parseBlock(lines, index, childIndent);
+      result.push(value);
+      index = nextIndex;
+      continue;
+    }
+
+    const colonIndex = itemText.indexOf(": ");
+    if (colonIndex !== -1) {
+      const itemKey = itemText.slice(0, colonIndex).trim();
+      const remainder = itemText.slice(colonIndex + 2).trim();
+      const itemObject = { [itemKey]: parseScalar(remainder) };
+
+      while (index < lines.length && !isBlank(lines[index])) {
+        const nextLine = lines[index];
+        const nextIndent = countIndent(nextLine);
+        if (nextIndent <= baseIndent) {
+          break;
+        }
+
+        const nextTrimmed = nextLine.trim();
+        const nextColonIndex = nextTrimmed.indexOf(":");
+        if (nextColonIndex === -1) {
+          break;
+        }
+
+        const nextKey = nextTrimmed.slice(0, nextColonIndex).trim();
+        const nextRemainder = nextTrimmed.slice(nextColonIndex + 1).trim();
+        index += 1;
+
+        if (nextRemainder === "") {
+          while (index < lines.length && isBlank(lines[index])) {
+            index += 1;
+          }
+
+          if (index >= lines.length || countIndent(lines[index]) <= nextIndent) {
+            itemObject[nextKey] = null;
+            continue;
+          }
+
+          const [value, nextIndex] = parseBlock(lines, index, countIndent(lines[index]));
+          itemObject[nextKey] = value;
+          index = nextIndex;
+          continue;
+        }
+
+        if (nextRemainder.startsWith("[") && nextRemainder.endsWith("]")) {
+          itemObject[nextKey] = parseInlineArray(nextRemainder);
+          continue;
+        }
+
+        itemObject[nextKey] = parseScalar(nextRemainder);
+      }
+
+      result.push(itemObject);
+      continue;
+    }
+
+    if (itemText.startsWith("[") && itemText.endsWith("]")) {
+      result.push(parseInlineArray(itemText));
+      continue;
+    }
+
+    if (itemText.startsWith("{") && itemText.endsWith("}")) {
+      result.push(parseInlineObject(itemText));
+      continue;
+    }
+
+    result.push(parseScalar(itemText));
+  }
+
+  return [result, index];
+}
+
+export function parseFrontmatter(text) {
+  const trimmed = text.trim();
+  if (trimmed === "") {
+    return {};
+  }
+
+  const lines = trimmed.split(/\r?\n/);
+  const [value] = parseBlock(lines, 0, 0);
+  return value ?? {};
+}
+
+function needsQuotes(value) {
+  if (value === "") {
+    return true;
+  }
+
+  if (/^\d/.test(value) && /^-?\d+(?:\.\d+)?$/.test(value)) {
+    return true;
+  }
+
+  if (value === "true" || value === "false" || value === "null" || value === "~") {
+    return true;
+  }
+
+  if (/[:[\]{},#&*!|>'"%@`]/.test(value)) {
+    return true;
+  }
+
+  if (/^\s|\s$/.test(value)) {
+    return true;
+  }
+
+  return false;
+}
+
+function quoteString(value) {
+  const escaped = value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  return `"${escaped}"`;
+}
+
+function stringifyScalar(value) {
+  if (value === null) {
+    return "null";
+  }
+
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+
+  if (typeof value === "number") {
+    return String(value);
+  }
+
+  const stringValue = String(value);
+  return needsQuotes(stringValue) ? quoteString(stringValue) : stringValue;
+}
+
+function isPlainObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function stringifyObjectEntry(key, value, indent) {
+  const pad = "  ".repeat(indent);
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return `${pad}${key}: []`;
+    }
+
+    const rendered = stringifyArray(value, indent + 1);
+    return `${pad}${key}:\n${rendered}`;
+  }
+
+  if (isPlainObject(value)) {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return `${pad}${key}: {}`;
+    }
+
+    const rendered = stringifyObject(value, indent + 1);
+    return `${pad}${key}:\n${rendered}`;
+  }
+
+  return `${pad}${key}: ${stringifyScalar(value)}`;
+}
+
+function stringifyArrayItem(value, indent) {
+  const pad = "  ".repeat(indent);
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return `${pad}- []`;
+    }
+
+    const rendered = stringifyArray(value, indent + 1);
+    return `${pad}-\n${rendered}`;
+  }
+
+  if (isPlainObject(value)) {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return `${pad}- {}`;
+    }
+
+    const [firstKey, firstValue] = entries[0];
+    const rest = entries.slice(1);
+    let lines = [`${pad}- ${firstKey}: ${stringifyScalar(firstValue)}`];
+
+    for (const [key, entryValue] of rest) {
+      lines.push(stringifyObjectEntry(key, entryValue, indent + 1));
+    }
+
+    return lines.join("\n");
+  }
+
+  return `${pad}- ${stringifyScalar(value)}`;
+}
+
+function stringifyArray(value, indent) {
+  return value.map((item) => stringifyArrayItem(item, indent)).join("\n");
+}
+
+function stringifyObject(value, indent) {
+  return Object.entries(value)
+    .map(([key, entryValue]) => stringifyObjectEntry(key, entryValue, indent))
+    .join("\n");
+}
+
+export function stringifyFrontmatter(value) {
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  if (Array.isArray(value)) {
+    return stringifyArray(value, 0);
+  }
+
+  if (isPlainObject(value)) {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return "";
+    }
+
+    return stringifyObject(value, 0);
+  }
+
+  return stringifyScalar(value);
+}
+
+export function normalizeFrontmatter(value) {
+  const trimmed = (value ?? "").trim();
+  return trimmed === "" ? null : trimmed;
+}
+
+export function inferValueType(value) {
+  if (value === null) {
+    return "null";
+  }
+
+  if (typeof value === "boolean") {
+    return "boolean";
+  }
+
+  if (typeof value === "number") {
+    return "number";
+  }
+
+  if (Array.isArray(value)) {
+    return "array";
+  }
+
+  if (isPlainObject(value)) {
+    return "object";
+  }
+
+  return "string";
+}
+
+export function defaultValueForType(type) {
+  switch (type) {
+    case "boolean":
+      return false;
+    case "number":
+      return 0;
+    case "null":
+      return null;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    default:
+      return "";
+  }
+}

package/public/icons.js

@@ -0,0 +1,52 @@
+const SVG_ATTRS =
+  'width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"';
+
+function icon(content) {
+  return `<svg ${SVG_ATTRS}>${content}</svg>`;
+}
+
+export const icons = {
+  undo: icon(
+    '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11"/>',
+  ),
+  redo: icon(
+    '<path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5 5.5 5.5 0 0 0 9.5 20H13"/>',
+  ),
+  bold: icon(
+    '<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/>',
+  ),
+  italic: icon(
+    '<line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>',
+  ),
+  strikethrough: icon(
+    '<path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><path d="M4 12h16"/>',
+  ),
+  link: icon(
+    '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+  ),
+  image: icon(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
+  ),
+  arrowUp: icon('<path d="m18 15-6-6-6 6"/>'),
+  arrowDown: icon('<path d="m6 9 6 6 6-6"/>'),
+  chevronLeft: icon('<path d="m15 18-6-6 6-6"/>'),
+  edit: icon(
+    '<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>',
+  ),
+  plus: icon('<path d="M5 12h14"/><path d="M12 5v14"/>'),
+  trash: icon(
+    '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>',
+  ),
+  folder: icon(
+    '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+  ),
+  fileText: icon(
+    '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
+  ),
+  layout: icon(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/>',
+  ),
+  collapseAll: icon(
+    '<path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>',
+  ),
+};

package/public/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>starmark</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <header class="top-bar">
+      <div class="top-bar-inner">
+        <h1 class="top-bar-title">starmark</h1>
+        <button id="projects-menu-btn" type="button" class="top-bar-btn">
+          Projects
+        </button>
+      </div>
+    </header>
+
+    <dialog id="projects-dialog" class="projects-dialog">
+      <div class="dialog-header">
+        <h2>Projects</h2>
+        <button id="projects-dialog-close" type="button" class="dialog-close" aria-label="Close">
+          &times;
+        </button>
+      </div>
+
+      <section class="picker">
+        <label for="folder-path">Astro project folder</label>
+        <div class="picker-row">
+          <input
+            id="folder-path"
+            type="text"
+            placeholder="/path/to/your/astro-site"
+            spellcheck="false"
+          />
+          <button id="browse-btn" type="button">Browse…</button>
+          <button id="scan-btn" type="button" class="primary">Scan</button>
+        </div>
+        <p id="scan-info" class="scan-info" hidden></p>
+      </section>
+
+      <section id="projects-section" class="projects" hidden>
+        <h3 class="projects-heading">Remembered</h3>
+        <ul id="project-list" class="project-list"></ul>
+      </section>
+    </dialog>
+
+    <main class="container">
+      <section id="list-view" class="results">
+        <div class="results-header">
+          <h2>Content &amp; pages</h2>
+          <div class="results-header-actions">
+            <button
+              id="collapse-all-btn"
+              type="button"
+              class="results-icon-btn"
+              hidden
+              aria-label="Collapse all folders"
+              title="Collapse all folders"
+            ></button>
+            <span id="file-count" class="file-count"></span>
+          </div>
+        </div>
+        <div id="search-box" class="search-box" hidden>
+          <input
+            id="file-search"
+            type="search"
+            placeholder="Filter files…"
+            spellcheck="false"
+            aria-label="Filter files"
+          />
+        </div>
+        <p id="empty-state" class="empty-state">
+          Scanning for <code>.md</code> and <code>.mdx</code> files…
+        </p>
+        <ul id="file-list" class="file-tree" hidden></ul>
+      </section>
+
+      <section id="edit-view" class="edit-view" hidden>
+        <div class="edit-sticky-bar">
+          <div class="edit-header">
+            <button id="edit-back-btn" type="button" class="edit-back-btn" aria-label="Back to file list">
+              Back
+            </button>
+            <div class="edit-file-info">
+              <h2 id="edit-file-name" class="edit-file-name"></h2>
+              <p id="edit-file-path" class="edit-file-path"></p>
+            </div>
+            <button id="edit-save-btn" type="button" class="edit-save-btn primary" disabled>
+              Save
+            </button>
+          </div>
+          <div id="edit-toolbar" class="edit-toolbar" role="toolbar" aria-label="Editor toolbar"></div>
+        </div>
+        <details id="frontmatter-panel" class="frontmatter-panel" hidden>
+          <summary class="frontmatter-panel-header">Frontmatter</summary>
+          <div id="frontmatter-editor" class="frontmatter-editor"></div>
+        </details>
+        <div
+          id="markdown-editor"
+          class="markdown-editor"
+          contenteditable="true"
+          spellcheck="false"
+          role="textbox"
+          aria-multiline="true"
+          aria-labelledby="edit-file-name"
+        ></div>
+      </section>
+    </main>
+
+    <script src="/app.js" type="module"></script>
+  </body>
+</html>