@jant/core 0.6.11 → 0.6.13

package/src/client/components/jant-settings-general.ts

@@ -21,6 +21,7 @@ import type {
   SettingsTimezone,
   SettingsCjkFont,
   SettingsDashboardLanguage,
+  SettingsAboutPageStatus,
 } from "./settings-types.js";
 import { showToast } from "../toast.js";
 import {
@@ -44,6 +45,12 @@ export class JantSettingsGeneral extends LitElement {
     latestFeedUrl: { type: String, attribute: "latest-feed-url" },
     featuredFeedUrl: { type: String, attribute: "featured-feed-url" },
     archiveFeedUrl: { type: String, attribute: "archive-feed-url" },
+    aboutPage: { type: Object, attribute: "about-page" },
+    aboutEditUrl: { type: String, attribute: "about-edit-url" },
+    aboutCreateUrl: {
+      type: String,
+      attribute: "about-create-url",
+    },
 
     // Site group
     _siteName: { state: true },
@@ -92,6 +99,9 @@ export class JantSettingsGeneral extends LitElement {
   declare latestFeedUrl: string;
   declare featuredFeedUrl: string;
   declare archiveFeedUrl: string;
+  declare aboutPage: SettingsAboutPageStatus;
+  declare aboutEditUrl: string;
+  declare aboutCreateUrl: string;
 
   // Site
   declare _siteName: string;
@@ -162,6 +172,12 @@ export class JantSettingsGeneral extends LitElement {
     this.latestFeedUrl = "/latest/feed";
     this.featuredFeedUrl = "/featured/feed";
     this.archiveFeedUrl = "/archive/feed";
+    this.aboutPage = {
+      state: "missing",
+      path: "/about",
+    };
+    this.aboutEditUrl = "/about?edit=1";
+    this.aboutCreateUrl = "/settings/general/about-page";
 
     this._siteName = "";
     this._siteDescription = "";
@@ -757,6 +773,45 @@ export class JantSettingsGeneral extends LitElement {
     `;
   }
 
+  private _renderAboutPageRow() {
+    const status = this.aboutPage;
+
+    return html`
+      <div class="mt-2 text-sm text-muted-foreground" data-about-page-row>
+        ${this.labels.aboutPagePrompt}
+        ${status.state === "ready"
+          ? html`
+              <a
+                class="font-medium text-foreground underline-offset-4 hover:underline"
+                href=${this.aboutEditUrl}
+              >
+                ${this.labels.editAboutPage}
+              </a>
+            `
+          : status.state === "missing"
+            ? html`
+                <form
+                  class="inline"
+                  method="post"
+                  action=${this.aboutCreateUrl}
+                >
+                  <button
+                    type="submit"
+                    class="inline cursor-pointer border-0 bg-transparent p-0 font-medium text-foreground underline-offset-4 hover:underline"
+                  >
+                    ${this.labels.createAboutPage}
+                  </button>
+                </form>
+              `
+            : html`
+                <span class="text-destructive"
+                  >${this.labels.aboutPageConflict}</span
+                >
+              `}
+      </div>
+    `;
+  }
+
   private _renderGeneralForm() {
     return html`
       <div class="flex flex-col gap-8">
@@ -796,6 +851,7 @@ export class JantSettingsGeneral extends LitElement {
             <p class="text-sm text-muted-foreground mt-1">
               ${this.labels.aboutBlogHelp}
             </p>
+            ${this._renderAboutPageRow()}
           </div>
 
           <div class="field">

package/src/client/components/nav-manager-types.ts

@@ -30,6 +30,16 @@ export interface NavManagerCollection {
   group?: string | null;
 }
 
+export interface NavManagerSuggestedLink {
+  key: string;
+  label: string;
+  url: string;
+  targetType: "page" | "collection" | "archive";
+  targetLabel: string;
+  navItemType: "link" | "collection";
+  collectionId?: string;
+}
+
 export interface NavManagerLabels {
   preview: string;
   navigationItems: string;
@@ -54,6 +64,10 @@ export interface NavManagerLabels {
   addLinkDescription: string;
   urlPlaceholder: string;
   labelAndUrlRequired: string;
+  suggestedLinks: string;
+  suggestedLinksDescription: string;
+  addSuggestedLink: string;
+  suggestedLinkAdded: string;
   collection: string;
   addCollection: string;
   addCollectionToNavigation: string;
@@ -67,13 +81,3 @@ export interface NavManagerLabels {
   placementSaved: string;
   cancel: string;
 }
-
-export interface NavManagerUpdateDetail {
-  id: string;
-  label: string;
-  url?: string;
-}
-
-export interface NavManagerDeleteDetail {
-  id: string;
-}

package/src/client/components/settings-types.ts

@@ -18,6 +18,11 @@ export interface SettingsLabels {
   // General
   general: string;
   site: string;
+  aboutPage: string;
+  aboutPagePrompt: string;
+  aboutPageConflict: string;
+  createAboutPage: string;
+  editAboutPage: string;
   languageAndTime: string;
   home: string;
   search: string;
@@ -100,6 +105,31 @@ export interface SettingsInitialData {
   noindex: boolean;
 }
 
+export type SettingsAboutPageStatus =
+  | {
+      state: "missing";
+      path: "/about";
+    }
+  | {
+      state: "ready";
+      path: "/about";
+      post: {
+        id: string;
+        title: string | null;
+        status: "draft" | "published";
+        visibility: "public" | "latest_hidden" | "private";
+      };
+    }
+  | {
+      state: "conflict";
+      path: "/about";
+      conflict: {
+        targetType: "collection" | "redirect" | "archive" | "post";
+        id: string | null;
+        title: string | null;
+      };
+    };
+
 /** Event detail dispatched when a settings form is saved */
 export interface SettingsSaveDetail {
   endpoint: string;

package/src/client/compose-launch.ts

@@ -57,6 +57,36 @@ export function getCurrentDetailPostArticle(
   return null;
 }
 
+function getLastThreadDetailArticle(
+  root: globalThis.Document | globalThis.Element,
+): HTMLElement | null {
+  const threadGroup = root.querySelector<HTMLElement>(
+    ".thread-group-detail[data-page='post']",
+  );
+  if (!threadGroup) return null;
+
+  const articles = threadGroup.querySelectorAll<HTMLElement>(
+    ".thread-detail-item article[data-post]",
+  );
+  return articles.length > 0 ? articles.item(articles.length - 1) : null;
+}
+
+export function getReplyTargetArticle(
+  root: globalThis.Document | globalThis.Element = document,
+): HTMLElement | null {
+  const lastThreadPost = getLastThreadDetailArticle(root);
+  if (lastThreadPost) return lastThreadPost;
+
+  if (root === document) {
+    const hoveredPost = document.querySelector<HTMLElement>(
+      "[data-page='post'] article[data-post]:hover",
+    );
+    if (hoveredPost) return hoveredPost;
+  }
+
+  return getCurrentDetailPostArticle(root);
+}
+
 export function getReplyRefreshTarget(
   article: HTMLElement,
 ): ReplyRefreshTarget | null {

package/src/client/compose-shortcuts.ts

@@ -2,6 +2,7 @@ import {
   getActiveCollectionId,
   getComposeDialog,
   getCurrentDetailPostArticle,
+  getReplyTargetArticle,
   openNewCompose,
   openReplyForArticle,
 } from "./compose-launch.js";
@@ -42,6 +43,34 @@ function shouldIgnoreShortcut(event: globalThis.KeyboardEvent): boolean {
   );
 }
 
+function hasEditQueryParam(): boolean {
+  return new URL(window.location.href).searchParams.get("edit") === "1";
+}
+
+function consumeEditQueryParam() {
+  const url = new URL(window.location.href);
+  url.searchParams.delete("edit");
+  const nextSearch = url.searchParams.toString();
+  globalThis.history.replaceState(
+    globalThis.history.state,
+    "",
+    `${url.pathname}${nextSearch ? `?${nextSearch}` : ""}${url.hash}`,
+  );
+}
+
+function openEditFromQueryParam() {
+  if (!document.body?.hasAttribute("data-authenticated")) return;
+  if (!hasEditQueryParam()) return;
+
+  const article = getCurrentDetailPostArticle();
+  const postId = article?.dataset.postId;
+  const composeEl = getComposeDialog();
+  if (!postId || !composeEl) return;
+
+  consumeEditQueryParam();
+  void composeEl.openEdit(postId);
+}
+
 async function toggleFeatured(
   postId: string,
   featured: boolean,
@@ -93,15 +122,17 @@ document.addEventListener("keydown", (event: globalThis.KeyboardEvent) => {
     return;
   }
 
-  const article = getCurrentDetailPostArticle();
-  if (!article) return;
-
   if (key === "r") {
+    const article = getReplyTargetArticle();
+    if (!article) return;
     event.preventDefault();
     void openReplyForArticle(article);
     return;
   }
 
+  const article = getCurrentDetailPostArticle();
+  if (!article) return;
+
   if (key === "e") {
     const postId = article.dataset.postId;
     if (!postId) return;
@@ -131,3 +162,15 @@ document.addEventListener("keydown", (event: globalThis.KeyboardEvent) => {
     return;
   }
 });
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", openEditFromQueryParam, {
+    once: true,
+  });
+} else {
+  openEditFromQueryParam();
+}
+
+export const __testOnly = {
+  openEditFromQueryParam,
+};

package/src/client/site-header-nav.d.ts

@@ -1 +1,2 @@
 export function initSiteHeaderNav(root?: object): void;
+export function destroySiteHeaderNav(root?: object): void;

package/src/client/site-header-nav.js

@@ -5,6 +5,9 @@
  * Manages the "More" dropdown popover.
  */
 
+const moreControllers = new WeakMap();
+const drawerControllers = new WeakMap();
+
 function initMoreDropdown(root) {
   const trigger = root.querySelector(".site-header-more-btn");
   const popover = root.querySelector(".site-header-more-popover");
@@ -12,6 +15,9 @@ function initMoreDropdown(root) {
   if (!trigger || !popover) return;
   if (trigger.dataset.moreInitialized === "true") return;
   trigger.dataset.moreInitialized = "true";
+  const controller = new AbortController();
+  const signal = controller.signal;
+  moreControllers.set(trigger, controller);
 
   function open() {
     popover.setAttribute("aria-hidden", "false");
@@ -29,30 +35,49 @@ function initMoreDropdown(root) {
     if (focusTrigger) trigger.focus();
   }
 
-  trigger.addEventListener("click", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (trigger.getAttribute("aria-expanded") === "true") {
-      close();
-    } else {
-      open();
-    }
-  });
-
-  document.addEventListener("click", (e) => {
-    if (!(e.target instanceof Node)) return;
-    if (!trigger.parentElement?.contains(e.target)) close();
-  });
-
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && popover.getAttribute("aria-hidden") === "false") {
-      close(true);
-    }
-  });
-
-  document.addEventListener("basecoat:popover", (e) => {
-    if (e.detail?.source !== trigger.parentElement) close();
-  });
+  trigger.addEventListener(
+    "click",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (trigger.getAttribute("aria-expanded") === "true") {
+        close();
+      } else {
+        open();
+      }
+    },
+    { signal },
+  );
+
+  document.addEventListener(
+    "click",
+    (e) => {
+      if (!(e.target instanceof Node)) return;
+      if (!trigger.parentElement?.contains(e.target)) close();
+    },
+    { signal },
+  );
+
+  document.addEventListener(
+    "keydown",
+    (e) => {
+      if (
+        e.key === "Escape" &&
+        popover.getAttribute("aria-hidden") === "false"
+      ) {
+        close(true);
+      }
+    },
+    { signal },
+  );
+
+  document.addEventListener(
+    "basecoat:popover",
+    (e) => {
+      if (e.detail?.source !== trigger.parentElement) close();
+    },
+    { signal },
+  );
 }
 
 const FRESH_VISIT_KEY = "jant:nav-fresh-visits";
@@ -111,6 +136,9 @@ export function initSiteHeaderNav(root = document) {
   if (!hamburger || !drawer || !backdrop) return;
   if (hamburger.dataset.drawerInitialized === "true") return;
   hamburger.dataset.drawerInitialized = "true";
+  const controller = new AbortController();
+  const signal = controller.signal;
+  drawerControllers.set(hamburger, controller);
 
   function open() {
     drawer.setAttribute("aria-hidden", "false");
@@ -138,35 +166,65 @@ export function initSiteHeaderNav(root = document) {
           drawer.setAttribute("inert", "");
         }
       },
-      { once: true },
+      { once: true, signal },
     );
 
     if (returnFocus) hamburger.focus();
   }
 
-  hamburger.addEventListener("click", () => {
-    if (hamburger.getAttribute("aria-expanded") === "true") {
-      close();
-    } else {
-      open();
-    }
-  });
-
-  closeBtn?.addEventListener("click", () => close());
-  backdrop.addEventListener("click", () => close());
-  drawer.addEventListener("click", (event) => {
-    if (!(event.target instanceof Element)) return;
-    if (event.target.closest("a[href]")) {
-      close(false);
-    }
-  });
+  hamburger.addEventListener(
+    "click",
+    () => {
+      if (hamburger.getAttribute("aria-expanded") === "true") {
+        close();
+      } else {
+        open();
+      }
+    },
+    { signal },
+  );
+
+  closeBtn?.addEventListener("click", () => close(), { signal });
+  backdrop.addEventListener("click", () => close(), { signal });
+  drawer.addEventListener(
+    "click",
+    (event) => {
+      if (!(event.target instanceof Element)) return;
+      if (event.target.closest("a[href]")) {
+        close(false);
+      }
+    },
+    { signal },
+  );
+
+  drawer.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+      }
+    },
+    { signal },
+  );
+}
 
-  drawer.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      close();
-    }
-  });
+export function destroySiteHeaderNav(root = document) {
+  for (const trigger of root.querySelectorAll(".site-header-more-btn")) {
+    const controller = moreControllers.get(trigger);
+    controller?.abort();
+    moreControllers.delete(trigger);
+    delete trigger.dataset.moreInitialized;
+  }
+
+  for (const hamburger of root.querySelectorAll(".site-header-hamburger")) {
+    const controller = drawerControllers.get(hamburger);
+    controller?.abort();
+    drawerControllers.delete(hamburger);
+    delete hamburger.dataset.drawerInitialized;
+  }
+
+  document.documentElement.classList.remove("drawer-open");
 }
 
 initSiteHeaderNav();

package/src/client/tiptap/__tests__/block-insertion.test.ts

@@ -62,4 +62,39 @@ describe("Block insertion flow", () => {
     expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
     expect(editor.state.selection.$from.parentOffset).toBe(0);
   });
+
+  it("renders a removable placeholder when an image fails to load", () => {
+    const editor = createEditor();
+
+    editor.commands.focus("start");
+    expect(editor.commands.setImage({ src: "/uploads/missing.webp" })).toBe(
+      true,
+    );
+
+    const figure = document.querySelector<HTMLElement>(".tiptap-image-figure");
+    const img = figure?.querySelector<HTMLImageElement>("img");
+    if (!figure || !img) {
+      throw new Error("expected image node view");
+    }
+
+    img.dispatchEvent(new Event("error"));
+
+    expect(figure.dataset.loadState).toBe("missing");
+    expect(figure.textContent).toContain("Image unavailable");
+
+    const deleteButton = figure.querySelector<HTMLButtonElement>(
+      ".tiptap-image-missing-delete",
+    );
+    if (!deleteButton) {
+      throw new Error("expected broken image delete button");
+    }
+
+    deleteButton.dispatchEvent(
+      new MouseEvent("mousedown", { bubbles: true, cancelable: true }),
+    );
+
+    expect(
+      editor.getJSON().content?.some((node) => node.type === "image"),
+    ).toBe(false);
+  });
 });

package/src/client/tiptap/__tests__/image-input-rules.test.ts

@@ -0,0 +1,117 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { ImageInputRules } from "../image-input-rules.js";
+import { ImageNode } from "../image-node.js";
+import { LinkInputRules } from "../link-input-rules.js";
+
+const editors: Editor[] = [];
+
+function createEditor(): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        link: { openOnClick: false, autolink: false },
+      }),
+      LinkInputRules,
+      ImageNode,
+      ImageInputRules,
+    ],
+    content: "<p></p>",
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+function type(editor: Editor, text: string): void {
+  const view = editor.view;
+  for (const ch of text) {
+    const { from, to } = view.state.selection;
+    const handled = view.someProp("handleTextInput", (handler) =>
+      handler(view, from, to, ch, () => view.state.tr.insertText(ch, from, to)),
+    );
+    if (!handled) view.dispatch(view.state.tr.insertText(ch, from, to));
+  }
+}
+
+afterEach(() => {
+  while (editors.length > 0) {
+    editors.pop()?.destroy();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("ImageInputRules", () => {
+  it("converts typed empty-alt Markdown image syntax into an image node", () => {
+    const editor = createEditor();
+
+    type(editor, "![](https://example.com/image.png)");
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "image",
+        attrs: {
+          src: "https://example.com/image.png",
+          alt: "",
+          title: "",
+          caption: "",
+          href: "",
+          layout: "regular",
+        },
+      },
+      { type: "paragraph" },
+    ]);
+    expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
+  });
+
+  it("preserves alt text and optional quoted title", () => {
+    const editor = createEditor();
+
+    type(editor, '![A test image](https://example.com/image.png "Title")');
+
+    expect(editor.getJSON().content?.[0]).toMatchObject({
+      type: "image",
+      attrs: {
+        src: "https://example.com/image.png",
+        alt: "A test image",
+        title: "Title",
+      },
+    });
+  });
+
+  it("runs before Markdown link rules", () => {
+    const editor = createEditor();
+
+    type(editor, "![Alt](https://example.com/image.png)");
+
+    expect(editor.getJSON().content?.[0]).toMatchObject({
+      type: "image",
+      attrs: {
+        src: "https://example.com/image.png",
+        alt: "Alt",
+      },
+    });
+    expect(editor.state.doc.textContent).toBe("");
+  });
+
+  it("leaves unsafe image URLs as typed text", () => {
+    const editor = createEditor();
+
+    type(editor, "![](javascript:alert)");
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "paragraph",
+        content: [{ type: "text", text: "![](javascript:alert)" }],
+      },
+    ]);
+  });
+});