Skip to content

Title: Local graph broken for non-ASCII URLs — getFullSlugFromUrl in @quartz-community/utils needs decodeURIComponent #10

Description

@Carnia

Description

The local graph view shows only a single node for pages with non-ASCII slugs (e.g., Chinese characters), even when the page has valid links. The global graph works correctly.

Root Cause

In graph.inline.ts, the function getSlugFromUrl() calls getFullSlugFromUrl() (imported from @quartz-community/utils), which internally uses window.location.pathname without decoding:

// @quartz-community/utils
export function getFullSlugFromUrl() {
  // uses window.location.pathname directly — no decodeURIComponent
}
// src/components/scripts/graph.inline.ts
function getSlugFromUrl() {
  var slug = getFullSlugFromUrl(); // returns percent-encoded path for non-ASCII
  var base = getBasePath();
  if (base && slug.startsWith(base.replace(/^\//, ""))) {
    slug = slug.slice(base.replace(/^\//, "").length);
    if (slug.startsWith("/")) slug = slug.slice(1);
  }
  return slug; // e.g. "%E5%85%B6%E4%BB%96/all-in-one/..." instead of "其他/all-in-one/..."
}

The browser percent-encodes non-ASCII characters in pathname, but the keys in contentIndex.json are decoded. The BFS traversal in the local graph renderer then fails to match the current page slug against the link data.

The fix should be applied in @quartz-community/utils's getFullSlugFromUrl(), not in the graph plugin itself.

Steps to Reproduce

  1. Create two Markdown files with Chinese filenames that link to each other:
    • content/其他/1.md containing [[2]]
    • content/其他/2.md containing [[1]]
  2. Build and serve the site
  3. Navigate to either page — local graph shows only a single node
  4. Click the global graph icon — global graph correctly shows both nodes and the edge

Expected Behavior

The local graph should show the current page and its directly linked neighbors.

Suggested Fix

Add decodeURIComponent() in getFullSlugFromUrl() within @quartz-community/utils:

export function getFullSlugFromUrl() {
  let slug = decodeURIComponent(window.location.pathname)
  // ... rest of the logic
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions