@jant/core 0.6.10 → 0.6.12

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

@@ -33,6 +33,7 @@ import type {
   NavManagerLabels,
   NavManagerUpdateDetail,
   NavManagerDeleteDetail,
+  NavManagerSuggestedLink,
   SystemNavConfig,
 } from "./nav-manager-types.js";
 
@@ -42,6 +43,7 @@ export class JantNavManager extends LitElement {
     labels: { type: Object },
     systemNavItems: { type: Array, attribute: "system-nav-items" },
     collections: { type: Array },
+    suggestedLinks: { type: Array, attribute: "suggested-links" },
     siteName: { type: String, attribute: "site-name" },
 
     _items: { state: true },
@@ -56,12 +58,14 @@ export class JantNavManager extends LitElement {
     _showPreviewMore: { state: true },
     _addingCollectionId: { state: true },
     _showCollectionPicker: { state: true },
+    _addingSuggestedKey: { state: true },
   };
 
   declare items: NavManagerItem[];
   declare labels: NavManagerLabels;
   declare systemNavItems: SystemNavConfig[];
   declare collections: NavManagerCollection[];
+  declare suggestedLinks: NavManagerSuggestedLink[];
   declare siteName: string;
 
   declare _items: NavManagerItem[];
@@ -78,6 +82,8 @@ export class JantNavManager extends LitElement {
   /** ID of the collection currently being added (for loading state) */
   declare _addingCollectionId: string | null;
   declare _showCollectionPicker: boolean;
+  /** Key of the suggested link currently being added */
+  declare _addingSuggestedKey: string | null;
 
   #sortableHeader: { destroy(): void } | null = null;
   #sortableMore: { destroy(): void } | null = null;
@@ -124,6 +130,7 @@ export class JantNavManager extends LitElement {
     this.labels = {} as NavManagerLabels;
     this.systemNavItems = [];
     this.collections = [];
+    this.suggestedLinks = [];
     this.siteName = "";
 
     this._items = [];
@@ -138,6 +145,7 @@ export class JantNavManager extends LitElement {
     this._showPreviewMore = false;
     this._addingCollectionId = null;
     this._showCollectionPicker = false;
+    this._addingSuggestedKey = null;
   }
 
   protected update(changedProperties: PropertyValueMap<JantNavManager>): void {
@@ -448,6 +456,99 @@ export class JantNavManager extends LitElement {
     }
   }
 
+  // ===========================================================================
+  // Suggested link handlers
+  // ===========================================================================
+
+  #getComparableInternalPath(url: string): string | null {
+    if (
+      url.startsWith("http://") ||
+      url.startsWith("https://") ||
+      url.startsWith("//") ||
+      url.startsWith("mailto:") ||
+      url.startsWith("tel:") ||
+      url.startsWith("#")
+    ) {
+      return null;
+    }
+
+    try {
+      const pathname = new URL(url, "https://jant.invalid").pathname;
+      const normalized = pathname
+        .trim()
+        .toLowerCase()
+        .replace(/^\/+|\/+$/g, "")
+        .replace(/\/+/g, "/");
+      return normalized ? `/${normalized}` : "/";
+    } catch {
+      return null;
+    }
+  }
+
+  #isSuggestedLinkAdded(link: NavManagerSuggestedLink): boolean {
+    const path = this.#getComparableInternalPath(link.url);
+    const hasMatchingPath =
+      path !== null &&
+      this._items.some(
+        (item) => this.#getComparableInternalPath(item.url) === path,
+      );
+    if (hasMatchingPath) return true;
+
+    return Boolean(
+      link.collectionId &&
+      this._items.some(
+        (item) =>
+          item.type === "collection" && item.collectionId === link.collectionId,
+      ),
+    );
+  }
+
+  get #availableSuggestedLinks(): NavManagerSuggestedLink[] {
+    return (this.suggestedLinks ?? []).filter(
+      (link) => !this.#isSuggestedLinkAdded(link),
+    );
+  }
+
+  async #handleAddSuggestedLink(link: NavManagerSuggestedLink) {
+    if (this._addingSuggestedKey) return;
+
+    this._addingSuggestedKey = link.key;
+    try {
+      const body =
+        link.navItemType === "collection" && link.collectionId
+          ? {
+              type: "collection",
+              collectionId: link.collectionId,
+              placement: "header",
+            }
+          : {
+              type: "link",
+              label: link.label,
+              url: link.url,
+              placement: "header",
+            };
+
+      const res = await fetch("/api/nav-items", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+      const created: NavManagerItem = await res.json();
+      this.#destroySortables();
+      this._items = [...this._items, created];
+      showToast(this.labels.suggestedLinkAdded);
+    } catch {
+      showToast(this.labels.saveFailed, "error");
+    } finally {
+      this._addingSuggestedKey = null;
+    }
+  }
+
   // ===========================================================================
   // System toggle handlers
   // ===========================================================================
@@ -834,6 +935,45 @@ export class JantNavManager extends LitElement {
     `;
   }
 
+  #renderSuggestedLinksSection() {
+    const available = this.#availableSuggestedLinks;
+    if (available.length === 0) return nothing;
+
+    return html`
+      <section class="mt-8">
+        <h2 class="text-lg font-semibold mb-1">
+          ${this.labels.suggestedLinks}
+        </h2>
+        <p class="text-sm text-muted-foreground mb-3">
+          ${this.labels.suggestedLinksDescription}
+        </p>
+        <div class="nav-suggestions-list">
+          ${available.map((link) => {
+            const adding = this._addingSuggestedKey === link.key;
+            return html`
+              <div class="nav-suggestion-item">
+                <div class="nav-suggestion-info">
+                  <span class="nav-suggestion-title">${link.label}</span>
+                  <span class="nav-suggestion-meta">
+                    ${link.url} · ${link.targetLabel}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  class="btn-sm"
+                  ?disabled=${adding || this._addingSuggestedKey !== null}
+                  @click=${() => this.#handleAddSuggestedLink(link)}
+                >
+                  ${this.labels.addSuggestedLink}
+                </button>
+              </div>
+            `;
+          })}
+        </div>
+      </section>
+    `;
+  }
+
   #renderAddLinkSection() {
     return html`
       <section class="mt-8">
@@ -1175,8 +1315,8 @@ export class JantNavManager extends LitElement {
         </div>
       </section>
 
-      ${this.#renderAddLinkSection()} ${this.#renderAddCollectionSection()}
-      ${this.#renderSystemToggles()}
+      ${this.#renderSuggestedLinksSection()} ${this.#renderAddLinkSection()}
+      ${this.#renderAddCollectionSection()} ${this.#renderSystemToggles()}
     `;
   }
 }

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;

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-bridge.ts

@@ -32,7 +32,23 @@ import { uploadViaSession } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
 import { tiptapJsonToMarkdown } from "../lib/tiptap-to-markdown.js";
 import { getMediaCategory } from "../lib/upload.js";
-import { resolveInlineImageUrls } from "./tiptap/inline-image-upload.js";
+import {
+  resolveInlineImageUrls,
+  hasPendingInlineImagePlaceholders,
+} from "./tiptap/inline-image-upload.js";
+
+/**
+ * Whether a serialized post body still references inline image placeholders
+ * pending upload or paste-rehost. Drives the "uploading" toast and whether to
+ * resolve placeholders before submit.
+ */
+function bodyHasPendingInline(body: string): boolean {
+  try {
+    return hasPendingInlineImagePlaceholders(JSON.parse(body));
+  } catch {
+    return false;
+  }
+}
 
 function getComposeEditorFromEventTarget(
   target: globalThis.EventTarget | null,
@@ -679,10 +695,10 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
   // Get labels for toast messages
   const labels = composeEl?.labels;
   const uploadingMsg = labels?.uploading ?? "Uploading...";
-  const hasInlineBlobs = detail.threadPosts
-    ? detail.threadPosts.some((p) => p.body.includes('"blob:'))
-    : detail.body.includes('"blob:');
-  const hasPending = detail.pendingAttachments.length > 0 || hasInlineBlobs;
+  const hasInlinePending = detail.threadPosts
+    ? detail.threadPosts.some((p) => bodyHasPendingInline(p.body))
+    : bodyHasPendingInline(detail.body);
+  const hasPending = detail.pendingAttachments.length > 0 || hasInlinePending;
   const publishedMsg = labels?.published ?? "Published!";
   const viewLabel = labels?.view ?? "View";
 
@@ -831,7 +847,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       const resolvedPosts = await Promise.all(
         threadPosts.map(async (post) => {
           let body = post.body;
-          if (body.includes('"blob:')) {
+          if (bodyHasPendingInline(body)) {
             try {
               const bodyJson = JSON.parse(body);
               const resolved = await resolveInlineImageUrls(bodyJson);
@@ -940,8 +956,9 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       mediaClientIdMap,
     );
 
-    // Resolve any blob: inline image URLs to real URLs before submitting
-    if (hasInlineBlobs) {
+    // Resolve any pending inline image placeholders (blob upload + paste rehost)
+    // to their stored URLs before submitting.
+    if (hasInlinePending) {
       try {
         const bodyJson = JSON.parse(detail.body);
         const resolved = await resolveInlineImageUrls(bodyJson);

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/tiptap/__tests__/inline-image-upload.test.ts

@@ -0,0 +1,143 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor, type JSONContent } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { ImageNode } from "../image-node.js";
+import {
+  rehostInlineImage,
+  resolveInlineImageUrls,
+  hasPendingInlineImagePlaceholders,
+} from "../inline-image-upload.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 },
+      }),
+      ImageNode,
+    ],
+    content: "<p></p>",
+  });
+  editors.push(editor);
+  return editor;
+}
+
+function imageSrcs(editor: Editor): string[] {
+  const out: string[] = [];
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "image") out.push(node.attrs.src as string);
+  });
+  return out;
+}
+
+function jsonImageSrcs(node: JSONContent | null): string[] {
+  if (!node) return [];
+  const out: string[] = [];
+  const walk = (n: JSONContent) => {
+    if (n.type === "image" && typeof n.attrs?.src === "string") {
+      out.push(n.attrs.src);
+    }
+    for (const child of n.content ?? []) walk(child);
+  };
+  walk(node);
+  return out;
+}
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("rehostInlineImage", () => {
+  it("swaps the node src on a successful rehost", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/keep1.png";
+    editor.commands.setImage({ src });
+
+    await rehostInlineImage(
+      editor,
+      src,
+      async () => "https://cdn.local/keep1.webp",
+    );
+
+    expect(imageSrcs(editor)).toEqual(["https://cdn.local/keep1.webp"]);
+  });
+
+  it("keeps a remote node's original src when the rehost fails", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/fail1.png";
+    editor.commands.setImage({ src });
+
+    await rehostInlineImage(editor, src, async () => {
+      throw new Error("boom");
+    });
+
+    expect(imageSrcs(editor)).toEqual([src]);
+  });
+
+  it("replaces every node sharing a deduped remote src", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/dupe.png";
+    editor.commands.setImage({ src });
+    editor.commands.setImage({ src });
+
+    await rehostInlineImage(
+      editor,
+      src,
+      async () => "https://cdn.local/dupe.webp",
+    );
+
+    expect(imageSrcs(editor)).toEqual([
+      "https://cdn.local/dupe.webp",
+      "https://cdn.local/dupe.webp",
+    ]);
+  });
+});
+
+describe("resolveInlineImageUrls + hasPendingInlineImagePlaceholders", () => {
+  it("tracks an in-flight rehost and resolves its placeholder to the stored URL", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/pending.png";
+    editor.commands.setImage({ src });
+
+    let release!: (url: string) => void;
+    const deferred = new Promise<string>((resolve) => {
+      release = resolve;
+    });
+    const rehostDone = rehostInlineImage(editor, src, () => deferred);
+
+    const json = editor.getJSON();
+    expect(hasPendingInlineImagePlaceholders(json)).toBe(true);
+
+    const resolvePromise = resolveInlineImageUrls(json);
+    release("https://cdn.local/pending.webp");
+    const resolved = await resolvePromise;
+    await rehostDone;
+
+    expect(jsonImageSrcs(resolved)).toEqual(["https://cdn.local/pending.webp"]);
+  });
+
+  it("is a no-op for content with no pending placeholders", async () => {
+    const json: JSONContent = {
+      type: "doc",
+      content: [
+        {
+          type: "image",
+          attrs: { src: "https://cdn.local/already-stored.webp" },
+        },
+      ],
+    };
+
+    expect(hasPendingInlineImagePlaceholders(json)).toBe(false);
+    const resolved = await resolveInlineImageUrls(json);
+    expect(resolved).toBe(json);
+  });
+});