starmark 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,30 @@
+# starmark
+
+*starmark* is a local web-based CMS for your [Astro](https://astro.build) site. It has been designed to work with [Asto Accelerator](https://astro.stevefenton.co.uk).
+
+With *starmark* you get:
+
+- File browser
+- Markdown editing
+- Frontmatter editing
+- Media library and image insertion
+
+Browse and edit markdown content in local Astro sites.
+
+Starmark runs a small local web app that scans an Astro project for `.md` and `.mdx` files, lets you browse them in a file tree, and edit content in the browser.
+
+## Running starmark
+
+With a terminal open in your Astro site, simply run:
+
+```bash
+npx starmark
+```
+
+You'll be given a local address for *starmark*, usually: [http://localhost:5748](http://localhost:5748).
+
+Visit the URL and go edit. All the changes will be in your changes tab ready for review and commit.
+
+## License
+
+[CC-BY-NC-ND-4.0](https://creativecommons.org/licenses/by-nc-nd/4.0/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starmark",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Browse and edit markdown content in local Astro sites",
   "keywords": [
     "cms",
@@ -32,11 +32,16 @@
   ],
   "scripts": {
     "start": "node bin/starmark.js",
-    "dev": "node --watch bin/starmark.js"
+    "dev": "node --watch bin/starmark.js",
+    "test": "cucumber-js"
   },
   "dependencies": {
     "express": "^4.21.2"
   },
+  "devDependencies": {
+    "@cucumber/cucumber": "^11.3.0",
+    "supertest": "^7.1.0"
+  },
   "engines": {
     "node": ">=18"
   }

package/public/app.js

@@ -1,6 +1,6 @@
 import { icons } from "./icons.js";
 import { createFrontmatterEditor } from "./frontmatter-editor.js";
-import { normalizeFrontmatter } from "./frontmatter.js";
+import { normalizeFrontmatter, prepareImportedFrontmatter } from "./frontmatter.js";
 
 const folderInput = document.getElementById("folder-path");
 const browseBtn = document.getElementById("browse-btn");
@@ -366,6 +366,46 @@ function saveEditorCaret() {
   return { lineIndex: lineElements.length, offset: 0 };
 }
 
+function normalizeEditorDom() {
+  for (const child of [...markdownEditor.childNodes]) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      if (!child.textContent?.trim()) {
+        child.remove();
+        continue;
+      }
+
+      const paragraph = document.createElement("p");
+      paragraph.textContent = child.textContent;
+      child.replaceWith(paragraph);
+      continue;
+    }
+
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      child.remove();
+      continue;
+    }
+
+    const tagName = child.tagName.toLowerCase();
+    if (tagName === "br") {
+      child.remove();
+      continue;
+    }
+
+    if (tagName === "div" && !child.matches(EDITOR_LINE_SELECTOR)) {
+      const paragraph = document.createElement("p");
+      while (child.firstChild) {
+        paragraph.appendChild(child.firstChild);
+      }
+
+      if (paragraph.childNodes.length === 0) {
+        paragraph.append(document.createElement("br"));
+      }
+
+      child.replaceWith(paragraph);
+    }
+  }
+}
+
 function getEditorLineElements() {
   return [...markdownEditor.children].filter((child) => child.matches(EDITOR_LINE_SELECTOR));
 }
@@ -375,6 +415,7 @@ function getEditorLines() {
 }
 
 function getEditorContent() {
+  normalizeEditorDom();
   return getEditorLines().join("\n");
 }
 
@@ -533,6 +574,40 @@ function runEditorHistoryAction(action) {
   flushEditorHistory();
 }
 
+function insertParagraphAtEditorCaret() {
+  if (markdownEditor.dataset.loading || !currentEditFile) {
+    return;
+  }
+
+  normalizeEditorDom();
+  const caret = getEditorCaretSnapshot();
+  if (!caret) {
+    return;
+  }
+
+  const lines = getEditorLines();
+  const { lineIndex, offset } = caret;
+  const currentLine = lines[lineIndex] ?? "";
+  const before = currentLine.slice(0, offset);
+  const after = currentLine.slice(offset);
+  const nextLines = [
+    ...lines.slice(0, lineIndex),
+    before,
+    after,
+    ...lines.slice(lineIndex + 1),
+  ];
+
+  renderMarkdownEditor(nextLines.join("\n"));
+
+  const lineElements = getEditorLineElements();
+  const nextLineElement = lineElements[lineIndex + 1];
+  if (nextLineElement) {
+    setCaretOffsetInElement(nextLineElement, 0);
+  }
+
+  scheduleEditorHistoryCommit();
+}
+
 function insertMarkdownAtCaret(markdown, caret = pendingEditorCaret) {
   if (!caret) {
     return false;
@@ -810,9 +885,8 @@ function reevaluateMarkdownEditorLines() {
     return;
   }
 
-  const lineElements = [...markdownEditor.children].filter((child) =>
-    child.matches(EDITOR_LINE_SELECTOR),
-  );
+  normalizeEditorDom();
+  const lineElements = getEditorLineElements();
   const lineStates = getEditorLineStates(lineElements.map(getEditorLineText));
 
   lineElements.forEach((child, index) => {
@@ -1558,9 +1632,14 @@ function setFileInUrl(filePath) {
   window.history.replaceState({}, "", url);
 }
 
+function scrollMainToTop() {
+  window.scrollTo(0, 0);
+}
+
 function showListView() {
   listView.hidden = false;
   editView.hidden = true;
+  scrollMainToTop();
   currentEditFile = null;
   currentEditFrontmatter = null;
   frontmatterPanel.hidden = true;
@@ -1667,12 +1746,13 @@ async function saveCurrentFile() {
 
   flushEditorHistory();
   currentEditFrontmatter = normalizeFrontmatter(frontmatterEditor.getValue());
-  const content = buildFileContent(currentEditFrontmatter, getEditorContent());
 
   isSavingFile = true;
   setSaveButtonState({ label: "Saving…", disabled: true });
 
-  try {
+  const writeEditorContent = async () => {
+    const body = getEditorContent();
+    const content = buildFileContent(currentEditFrontmatter, body);
     const response = await fetch("/api/file", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -1682,6 +1762,11 @@ async function saveCurrentFile() {
       }),
     });
     const data = await response.json();
+    return { body, content, response, data };
+  };
+
+  try {
+    let { body, content, response, data } = await writeEditorContent();
 
     if (!response.ok) {
       setSaveButtonState({
@@ -1693,7 +1778,21 @@ async function saveCurrentFile() {
       return;
     }
 
-    const { frontmatter, body } = splitFrontmatter(content);
+    const latestBody = getEditorContent();
+    if (latestBody !== body) {
+      ({ body, content, response, data } = await writeEditorContent());
+      if (!response.ok) {
+        setSaveButtonState({
+          label: data.error ?? "Save failed",
+          disabled: false,
+          error: true,
+        });
+        resetSaveButtonSoon(2500);
+        return;
+      }
+    }
+
+    const { frontmatter, body: savedBody } = splitFrontmatter(content);
     currentEditFrontmatter = normalizeFrontmatter(frontmatter ?? "");
     frontmatterEditor.setValue(currentEditFrontmatter ?? "");
     updateEditHeader(currentEditFile, currentEditFrontmatter);
@@ -1707,8 +1806,8 @@ async function saveCurrentFile() {
       updateFileResults();
     }
 
-    renderMarkdownEditor(body);
-    resetEditorHistory(body);
+    renderMarkdownEditor(savedBody);
+    resetEditorHistory(savedBody);
     setSaveButtonState({ label: "Saved", disabled: false });
     resetSaveButtonSoon();
   } catch {
@@ -1737,6 +1836,7 @@ function handleFrontmatterInput() {
 function showEditView() {
   listView.hidden = true;
   editView.hidden = false;
+  scrollMainToTop();
 }
 
 async function openEditView(file) {
@@ -2332,7 +2432,40 @@ async function scanFolder(pathValue = folderInput.value.trim()) {
   }
 }
 
-async function createEntry(parentPath, name) {
+function isMarkdownEntryName(name) {
+  const lower = name.trim().toLowerCase();
+  return lower.endsWith(".md") || lower.endsWith(".mdx");
+}
+
+function getPathsToExpand(relativePath) {
+  const normalized = normalizeRelativePath(relativePath);
+  const paths = new Set();
+
+  if (!normalized) {
+    return paths;
+  }
+
+  let current = "";
+  for (const segment of normalized.split("/")) {
+    current = current ? `${current}/${segment}` : segment;
+    paths.add(current);
+  }
+
+  return paths;
+}
+
+async function fetchFileFrontmatter(absolutePath) {
+  const response = await fetch(`/api/file?path=${encodeURIComponent(absolutePath)}`);
+  const data = await response.json();
+
+  if (!response.ok) {
+    throw new Error(data.error ?? "Could not read file");
+  }
+
+  return data.frontmatter ?? "";
+}
+
+async function createEntry(parentPath, name, { frontmatter = null } = {}) {
   if (!currentProjectPath) {
     return { ok: false, error: "Choose a project folder first" };
   }
@@ -2360,6 +2493,7 @@ async function createEntry(parentPath, name) {
         projectPath: currentProjectPath,
         parentPath,
         name: trimmedName,
+        ...(frontmatter ? { frontmatter } : {}),
       }),
     });
     const data = await response.json();
@@ -2634,7 +2768,298 @@ function createConfirmDeleteDialog() {
 
 const { openConfirmDeleteDialog } = createConfirmDeleteDialog();
 
-function createNewItemDialog() {
+function createFrontmatterSourceDialog() {
+  const dialog = document.createElement("dialog");
+  dialog.id = "frontmatter-source-dialog";
+  dialog.className = "frontmatter-source-dialog";
+  dialog.innerHTML = `
+    <div class="dialog-header">
+      <h2>Import frontmatter from</h2>
+      <button type="button" class="dialog-close frontmatter-source-dialog-close" aria-label="Close">&times;</button>
+    </div>
+    <div class="frontmatter-source-body">
+      <p class="frontmatter-source-hint">Choose a markdown file to copy its frontmatter.</p>
+      <p class="frontmatter-source-error" hidden></p>
+      <ul class="frontmatter-source-tree file-tree"></ul>
+    </div>
+  `;
+
+  const closeBtn = dialog.querySelector(".frontmatter-source-dialog-close");
+  const treeRoot = dialog.querySelector(".frontmatter-source-tree");
+  const errorEl = dialog.querySelector(".frontmatter-source-error");
+  let onSelect = null;
+
+  function clearDialogError() {
+    errorEl.hidden = true;
+    errorEl.textContent = "";
+  }
+
+  function showDialogError(message) {
+    errorEl.textContent = message;
+    errorEl.hidden = false;
+  }
+
+  function createPickerNewPageRow(name, depth) {
+    const item = document.createElement("li");
+    item.className = "tree-file frontmatter-source-file frontmatter-source-new-page";
+    item.style.setProperty("--depth", depth);
+    item.dataset.newPageTarget = "true";
+
+    const badge = document.createElement("span");
+    badge.className = "badge new-page";
+    badge.innerHTML = `${icons.fileText}<span>new</span>`;
+
+    const label = document.createElement("span");
+    label.className = "file-name";
+    label.textContent = name;
+
+    const main = document.createElement("div");
+    main.className = "tree-file-main";
+    main.append(badge, label);
+    item.append(main);
+
+    return item;
+  }
+
+  function appendPickerChildren(container, node, depth, expandPaths, pickerContext) {
+    for (const child of node.children) {
+      container.append(createPickerRow(child, depth, expandPaths, pickerContext));
+    }
+
+    if (pickerContext.newPageName && node.path === pickerContext.parentPath) {
+      container.append(createPickerNewPageRow(pickerContext.newPageName, depth));
+    }
+  }
+
+  function createPickerFolderRow(node, depth, expandPaths, pickerContext) {
+    const item = document.createElement("li");
+    item.className = "tree-folder frontmatter-source-folder";
+    item.style.setProperty("--depth", depth);
+
+    const details = document.createElement("details");
+    details.open = expandPaths.has(node.path);
+
+    if (node.path === pickerContext.parentPath && !pickerContext.newPageName) {
+      item.dataset.parentTarget = "true";
+    }
+
+    const summary = document.createElement("summary");
+    summary.className = "tree-folder-header frontmatter-source-folder-header";
+
+    const label = document.createElement("span");
+    label.className = "tree-folder-name";
+    label.textContent = depth === 0 ? (node.path || node.name) : node.name;
+
+    if (depth > 0) {
+      summary.append(
+        createFolderMain(createFolderPrefix(createFolderBadge(), createFolderChevron()), label),
+      );
+    } else if (depth === 0 && node.source) {
+      summary.append(
+        createFolderMain(
+          createFolderPrefix(createSourceBadge(node.source), createFolderChevron()),
+          label,
+        ),
+      );
+    } else {
+      summary.append(createFolderMain(createFolderPrefix(createFolderChevron()), label));
+    }
+
+    details.append(summary);
+
+    if (node.children.length > 0 || (pickerContext.newPageName && node.path === pickerContext.parentPath)) {
+      const children = document.createElement("ul");
+      children.className = "tree-children";
+      appendPickerChildren(children, node, depth + 1, expandPaths, pickerContext);
+      details.append(children);
+    }
+
+    item.append(details);
+    return item;
+  }
+
+  function createPickerPageFolderRow(node, depth, expandPaths, pickerContext) {
+    const { pageFile } = node;
+    const item = document.createElement("li");
+    item.className = "tree-folder tree-page-folder frontmatter-source-folder";
+    item.style.setProperty("--depth", depth);
+
+    const details = document.createElement("details");
+    details.open = expandPaths.has(node.path);
+
+    if (node.path === pickerContext.parentPath && !pickerContext.newPageName) {
+      item.dataset.parentTarget = "true";
+    }
+
+    const summary = document.createElement("summary");
+    summary.className = "tree-folder-header frontmatter-source-folder-header";
+
+    const pageBadge = document.createElement("span");
+    pageBadge.className = "badge page";
+    pageBadge.innerHTML = `${icons.folder}<span>page folder</span>`;
+
+    const label = document.createElement("span");
+    label.className = "tree-folder-name";
+    label.textContent = node.name;
+
+    summary.append(
+      createFolderMain(createFolderPrefix(pageBadge, createFolderChevron()), label),
+    );
+
+    details.append(summary);
+
+    const children = document.createElement("ul");
+    children.className = "tree-children";
+    children.append(createPickerFileRow(
+      {
+        type: "file",
+        name: pageFile.name,
+        path: pageFile.relativePath,
+        file: pageFile,
+      },
+      depth + 1,
+    ));
+    appendPickerChildren(children, node, depth + 1, expandPaths, pickerContext);
+    details.append(children);
+
+    item.append(details);
+    return item;
+  }
+
+  function createPickerFileRow(node, depth) {
+    const file = node.file;
+    const item = document.createElement("li");
+    item.className = "tree-file frontmatter-source-file";
+    item.style.setProperty("--depth", depth);
+
+    const extBadge = document.createElement("span");
+    extBadge.className = `badge ${file.extension}`;
+    extBadge.innerHTML = `${icons.fileText}<span>${file.extension}</span>`;
+
+    const name = document.createElement("span");
+    name.className = "file-name";
+    name.textContent = file.name;
+    name.title = file.relativePath;
+
+    const main = document.createElement("div");
+    main.className = "tree-file-main";
+    main.append(extBadge, name);
+    item.append(main);
+
+    item.addEventListener("click", async () => {
+      if (!onSelect) {
+        return;
+      }
+
+      clearDialogError();
+
+      try {
+        const sourceFrontmatter = await fetchFileFrontmatter(file.absolutePath);
+        const importedFrontmatter = prepareImportedFrontmatter(sourceFrontmatter);
+
+        if (!importedFrontmatter) {
+          showDialogError(`"${file.name}" has no frontmatter to import.`);
+          return;
+        }
+
+        onSelect({
+          file,
+          frontmatter: importedFrontmatter,
+        });
+        dialog.close();
+      } catch (error) {
+        showDialogError(error.message ?? "Could not import frontmatter");
+      }
+    });
+
+    return item;
+  }
+
+  function createPickerRow(node, depth, expandPaths, pickerContext) {
+    if (node.type === "folder") {
+      return createPickerFolderRow(node, depth, expandPaths, pickerContext);
+    }
+
+    if (node.type === "page-folder") {
+      return createPickerPageFolderRow(node, depth, expandPaths, pickerContext);
+    }
+
+    return createPickerFileRow(node, depth);
+  }
+
+  function scrollPickerToTarget() {
+    const target =
+      treeRoot.querySelector("[data-new-page-target='true']") ??
+      treeRoot.querySelector("[data-parent-target='true']");
+
+    if (!target) {
+      return;
+    }
+
+    target.scrollIntoView({ block: "center" });
+  }
+
+  function renderPickerTree(parentPath, newPageName = "") {
+    treeRoot.replaceChildren();
+
+    const expandPaths = getPathsToExpand(parentPath);
+    const pickerContext = {
+      parentPath: normalizeRelativePath(parentPath),
+      newPageName: newPageName.trim(),
+    };
+    const markdownFiles = scannedFiles.filter((file) =>
+      ["md", "mdx"].includes(file.extension),
+    );
+    const tree = buildFileTree(markdownFiles, {
+      directories: scannedDirectories,
+      scanTargets: lastScanTargets,
+    });
+
+    if (tree.length === 0) {
+      const empty = document.createElement("li");
+      empty.className = "frontmatter-source-empty";
+      empty.textContent = "No markdown files found in this project.";
+      treeRoot.append(empty);
+      return;
+    }
+
+    for (const node of tree) {
+      treeRoot.append(createPickerRow(node, 0, expandPaths, pickerContext));
+    }
+  }
+
+  closeBtn.addEventListener("click", () => {
+    dialog.close();
+  });
+
+  dialog.addEventListener("click", (event) => {
+    if (event.target === dialog) {
+      dialog.close();
+    }
+  });
+
+  dialog.addEventListener("close", () => {
+    onSelect = null;
+    clearDialogError();
+    treeRoot.replaceChildren();
+  });
+
+  function openFrontmatterSourceDialog({ parentPath, newPageName = "" }, selectHandler) {
+    onSelect = selectHandler;
+    clearDialogError();
+    renderPickerTree(parentPath, newPageName);
+    dialog.showModal();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(scrollPickerToTarget);
+    });
+  }
+
+  document.body.append(dialog);
+
+  return { openFrontmatterSourceDialog };
+}
+
+function createNewItemDialog({ openFrontmatterSourceDialog }) {
   const dialog = document.createElement("dialog");
   dialog.id = "new-item-dialog";
   dialog.className = "new-item-dialog";
@@ -2654,6 +3079,10 @@ function createNewItemDialog() {
           placeholder="post.md or my-folder"
         />
         <p class="new-item-hint">.md / .mdx creates a file; anything else creates a folder.</p>
+        <div class="new-item-frontmatter" hidden>
+          <button type="button" class="new-item-import-frontmatter">Import frontmatter from file…</button>
+          <p class="new-item-frontmatter-source" hidden></p>
+        </div>
         <p class="new-item-error" hidden></p>
       </div>
       <div class="new-item-form-actions">
@@ -2665,8 +3094,12 @@ function createNewItemDialog() {
   const closeBtn = dialog.querySelector(".new-item-dialog-close");
   const form = dialog.querySelector(".new-item-form");
   const nameInput = dialog.querySelector("#new-item-name");
+  const frontmatterSection = dialog.querySelector(".new-item-frontmatter");
+  const importFrontmatterBtn = dialog.querySelector(".new-item-import-frontmatter");
+  const frontmatterSourceEl = dialog.querySelector(".new-item-frontmatter-source");
   const errorEl = dialog.querySelector(".new-item-error");
   let pendingParentPath = "";
+  let pendingImportedFrontmatter = null;
 
   function clearDialogError() {
     errorEl.hidden = true;
@@ -2678,6 +3111,28 @@ function createNewItemDialog() {
     errorEl.hidden = false;
   }
 
+  function clearImportedFrontmatter() {
+    pendingImportedFrontmatter = null;
+    frontmatterSourceEl.hidden = true;
+    frontmatterSourceEl.textContent = "";
+  }
+
+  function updateFrontmatterImportVisibility() {
+    const showImport = isMarkdownEntryName(nameInput.value);
+    frontmatterSection.hidden = !showImport;
+
+    if (!showImport) {
+      clearImportedFrontmatter();
+    }
+  }
+
+  function setImportedFrontmatter(sourceName, frontmatter) {
+    pendingImportedFrontmatter = frontmatter;
+    frontmatterSourceEl.textContent = `Using frontmatter from ${sourceName}`;
+    frontmatterSourceEl.hidden = false;
+    clearDialogError();
+  }
+
   closeBtn.addEventListener("click", () => {
     dialog.close();
   });
@@ -2690,11 +3145,29 @@ function createNewItemDialog() {
 
   dialog.addEventListener("close", () => {
     pendingParentPath = "";
+    pendingImportedFrontmatter = null;
     form.reset();
     clearDialogError();
+    clearImportedFrontmatter();
+    frontmatterSection.hidden = true;
   });
 
-  nameInput.addEventListener("input", clearDialogError);
+  nameInput.addEventListener("input", () => {
+    clearDialogError();
+    updateFrontmatterImportVisibility();
+  });
+
+  importFrontmatterBtn.addEventListener("click", () => {
+    openFrontmatterSourceDialog(
+      {
+        parentPath: pendingParentPath,
+        newPageName: nameInput.value.trim(),
+      },
+      ({ file, frontmatter }) => {
+        setImportedFrontmatter(file.name, frontmatter);
+      },
+    );
+  });
 
   form.addEventListener("submit", async (event) => {
     event.preventDefault();
@@ -2705,7 +3178,9 @@ function createNewItemDialog() {
 
     clearDialogError();
 
-    const result = await createEntry(pendingParentPath, name);
+    const result = await createEntry(pendingParentPath, name, {
+      frontmatter: pendingImportedFrontmatter,
+    });
     if (!result.ok) {
       showDialogError(result.error);
       nameInput.focus();
@@ -2718,7 +3193,9 @@ function createNewItemDialog() {
 
   function openNewItemDialog(parentPath) {
     pendingParentPath = parentPath;
+    clearImportedFrontmatter();
     clearDialogError();
+    updateFrontmatterImportVisibility();
     dialog.showModal();
     nameInput.focus();
   }
@@ -2728,7 +3205,8 @@ function createNewItemDialog() {
   return { openNewItemDialog };
 }
 
-const { openNewItemDialog } = createNewItemDialog();
+const { openFrontmatterSourceDialog } = createFrontmatterSourceDialog();
+const { openNewItemDialog } = createNewItemDialog({ openFrontmatterSourceDialog });
 
 browseBtn.addEventListener("click", browseFolder);
 scanBtn.addEventListener("click", () => scanFolder());
@@ -2798,6 +3276,14 @@ function createImageLightbox() {
 
 editBackBtn.insertAdjacentHTML("afterbegin", icons.chevronLeft);
 
+try {
+  markdownEditor.focus({ preventScroll: true });
+  document.execCommand("defaultParagraphSeparator", false, "p");
+  markdownEditor.blur();
+} catch {
+  // Browser may not support defaultParagraphSeparator.
+}
+
 editBackBtn.addEventListener("click", showListView);
 editSaveBtn.addEventListener("click", saveCurrentFile);
 markdownEditor.addEventListener("click", (event) => {
@@ -2829,7 +3315,21 @@ markdownEditor.addEventListener("beforeinput", (event) => {
   }
 });
 
+markdownEditor.addEventListener("focus", () => {
+  try {
+    document.execCommand("defaultParagraphSeparator", false, "p");
+  } catch {
+    // Browser may not support defaultParagraphSeparator.
+  }
+});
+
 markdownEditor.addEventListener("keydown", (event) => {
+  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+    event.preventDefault();
+    insertParagraphAtEditorCaret();
+    return;
+  }
+
   const isMod = event.metaKey || event.ctrlKey;
   if (!isMod) {
     return;

package/public/frontmatter.js

@@ -552,3 +552,38 @@ export function defaultValueForType(type) {
       return "";
   }
 }
+
+export function getTodayDateString() {
+  const now = new Date();
+  return [
+    now.getFullYear(),
+    String(now.getMonth() + 1).padStart(2, "0"),
+    String(now.getDate()).padStart(2, "0"),
+  ].join("-");
+}
+
+export function prepareImportedFrontmatter(frontmatterText) {
+  const trimmed = (frontmatterText ?? "").trim();
+  if (trimmed === "") {
+    return null;
+  }
+
+  let data;
+  try {
+    data = parseFrontmatter(trimmed);
+  } catch {
+    return null;
+  }
+
+  if (!isPlainObject(data)) {
+    return null;
+  }
+
+  delete data.modDate;
+
+  if (Object.prototype.hasOwnProperty.call(data, "pubDate")) {
+    data.pubDate = getTodayDateString();
+  }
+
+  return normalizeFrontmatter(stringifyFrontmatter(data));
+}

package/public/styles.css

@@ -1283,6 +1283,94 @@ details[open] > .tree-folder-header .tree-folder-chevron {
   margin-top: 0.15rem;
 }
 
+.new-item-frontmatter {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.new-item-import-frontmatter {
+  justify-self: start;
+}
+
+.new-item-frontmatter-source {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.new-item-frontmatter-source[hidden] {
+  display: none;
+}
+
+.frontmatter-source-dialog {
+  width: min(560px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--text);
+  overflow: auto;
+}
+
+.frontmatter-source-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+.frontmatter-source-body {
+  margin: 0.75rem 1.25rem 1.25rem;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.frontmatter-source-hint {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.frontmatter-source-error {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #ff8b8b;
+}
+
+.frontmatter-source-error[hidden] {
+  display: none;
+}
+
+.frontmatter-source-tree {
+  max-height: min(420px, calc(100vh - 12rem));
+  overflow: auto;
+}
+
+.frontmatter-source-tree .frontmatter-source-folder-header {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.frontmatter-source-tree .frontmatter-source-file {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.frontmatter-source-new-page {
+  cursor: default;
+  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+}
+
+.frontmatter-source-new-page:hover {
+  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+}
+
+.badge.new-page {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
+}
+
+.frontmatter-source-empty {
+  padding: 1rem;
+  color: var(--muted);
+}
+
 .confirm-dialog {
   width: min(420px, calc(100vw - 2rem));
   padding: 0;

package/src/server.js

@@ -467,7 +467,7 @@ app.post("/api/scan", async (req, res) => {
 });
 
 app.post("/api/entry", async (req, res) => {
-  const { projectPath, parentPath = "", name } = req.body ?? {};
+  const { projectPath, parentPath = "", name, frontmatter } = req.body ?? {};
 
   if (!projectPath || typeof projectPath !== "string") {
     return res.status(400).json({ error: "A project path is required" });
@@ -531,11 +531,20 @@ app.post("/api/entry", async (req, res) => {
 
   try {
     if (isMarkdownFileName(nameResult.name)) {
-      const initialContent = await buildInitialFileContent(
-        resolvedProject,
-        targetRelativePath.replace(/\\/g, "/"),
-        source,
-      );
+      let initialContent;
+      const trimmedFrontmatter =
+        typeof frontmatter === "string" ? frontmatter.trim() : "";
+
+      if (trimmedFrontmatter) {
+        initialContent = `---\n${trimmedFrontmatter}\n---\n`;
+      } else {
+        initialContent = await buildInitialFileContent(
+          resolvedProject,
+          targetRelativePath.replace(/\\/g, "/"),
+          source,
+        );
+      }
+
       await fs.writeFile(targetResolved.target, initialContent, "utf8");
       const ext = path.extname(nameResult.name).toLowerCase().slice(1);
 
@@ -1033,6 +1042,8 @@ app.get("/api/media/file", async (req, res) => {
   res.sendFile(resolved.target);
 });
 
+export { app };
+
 export function startServer(options = {}) {
   const port = options.port ?? PORT;