Add anchor links and hash navigation to plugin gallery

[pirate]

Summary

This PR adds anchor link support to the plugin gallery, allowing users to link directly to specific plugins and navigate to them via URL hash fragments.

Key Changes

• Anchor styling: Added .plugin-anchor CSS class with hover underline effect for plugin title links
• Plugin IDs: Added id attribute to each plugin card using the plugin's slug name (e.g., id="ytdlp")
• Clickable titles: Wrapped plugin display titles in anchor tags that link to their respective plugin IDs
• Hash navigation: Implemented JavaScript functions to:
  • Update URL hash when searching or opening plugin cards
  • Navigate to plugins when hash changes (via direct links or browser back/forward)
  • Auto-open plugin cards when accessed via hash
  • Scroll smoothly to the target plugin
• Search integration: Search input now updates the URL hash, allowing users to share search queries

Implementation Details

• The setHash() function manages URL history updates without full page reloads
• The navigateToHash() function handles both direct plugin navigation (opens the card) and search-based navigation (filters gallery)
• Hash changes are handled via the hashchange event listener for browser navigation support
• Plugin cards emit toggle events to update the hash when manually opened/closed
• The implementation preserves existing search functionality while adding hash-based navigation

https://claude.ai/code/session_013iGTroMjCqyeRLMAkwXJ1z

---

---

Summary by cubic

Add deep links and hash navigation to the plugin gallery. You can link to a specific plugin or share a search, with smooth scroll and back/forward support.

• New Features
  • Each plugin card has an id matching its name (e.g., ytdlp).
  • The card’s id is the anchor target; no visible title links.
  • On load or hash change, #<name> opens and scrolls to the card; otherwise the hash becomes the search query.
  • Typing in search updates the URL hash; expanding a card updates the hash to its id.
  • Uses history.replaceState and hashchange for smooth navigation without reloads.

^{Written for commit 4fcecf7. Summary will update on new commits.}

[cubic-dev-ai]

2 issues found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="docs/index.html.j2">

<violation number="1" location="docs/index.html.j2:1315">
P2: Encode the hash value before calling replaceState; otherwise a search query with `%` (or other reserved characters) produces an invalid fragment and `decodeURIComponent` throws, stopping hash navigation.</violation>
</file>

<file name="docs/index.html">

<violation number="1" location="docs/index.html:9692">
P2: Guard decodeURIComponent against malformed hash values; an invalid percent-encoded fragment will throw and break hash navigation.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Encode the hash value before calling replaceState; otherwise a search query with % (or other reserved characters) produces an invalid fragment and decodeURIComponent throws, stopping hash navigation.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At docs/index.html.j2, line 1315:

<comment>Encode the hash value before calling replaceState; otherwise a search query with `%` (or other reserved characters) produces an invalid fragment and `decodeURIComponent` throws, stopping hash navigation.</comment>

<file context>
@@ -1299,17 +1311,54 @@
 
-      searchInput.addEventListener("input", applyFilter);
+      const setHash = (value) => {
+        const clean = value.replace(/^#/, "").trim();
+        if (clean) {
+          history.replaceState(null, "", "#" + clean);
</file context>

Suggested change

	const clean = value.replace(/^#/, "").trim();
	if (clean) {
	history.replaceState(null, "", "#" + clean);
	const clean = value.replace(/^#/, "").trim();
	const encoded = encodeURIComponent(clean);
	if (encoded) {
	history.replaceState(null, "", "#" + encoded);

[cubic-dev-ai]

P2: Guard decodeURIComponent against malformed hash values; an invalid percent-encoded fragment will throw and break hash navigation.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At docs/index.html, line 9692:

<comment>Guard decodeURIComponent against malformed hash values; an invalid percent-encoded fragment will throw and break hash navigation.</comment>

<file context>
@@ -9610,17 +9679,54 @@ <h3>Community and social</h3>
+      };
+
+      const navigateToHash = () => {
+        const hash = decodeURIComponent(location.hash.replace(/^#/, "")).trim();
+        if (!hash) return;
+
</file context>