Refactor docs navigation and clean up legacy views

Co-authored-by: PR0M3TH3AN <[email protected]>

components/sidebar.html

@@ -159,41 +159,6 @@
           data-state="collapsed"
         >
           <nav class="sidebar-dropup-panel__inner" aria-label="Secondary">
-            <a href="#view=about" class="sidebar-nav-link sidebar-nav-link--sub" title="About">
-              <img
-                src="assets/svg/about-icon.svg"
-                alt=""
-                aria-hidden="true"
-                class="sidebar-icon"
-              />
-              <span class="sidebar-text">About</span>
-            </a>
-            <a
-              href="#view=community-guidelines"
-              class="sidebar-nav-link sidebar-nav-link--sub"
-              title="Community Guidelines"
-            >
-              <img
-                src="assets/svg/guidelines-icon.svg"
-                alt=""
-                aria-hidden="true"
-                class="sidebar-icon"
-              />
-              <span class="sidebar-text">Guidelines</span>
-            </a>
-            <a
-              href="#view=getting-started"
-              class="sidebar-nav-link sidebar-nav-link--sub"
-              title="Getting Started"
-            >
-              <img
-                src="assets/svg/getting-started-icon.svg"
-                alt=""
-                aria-hidden="true"
-                class="sidebar-icon"
-              />
-              <span class="sidebar-text">Getting Started</span>
-            </a>
             <a href="#view=docs" class="sidebar-nav-link sidebar-nav-link--sub" title="Docs">
               <img
                 src="assets/svg/getting-started-icon.svg"
@@ -203,28 +168,6 @@
               />
               <span class="sidebar-text">Docs</span>
             </a>
-            <a
-              href="#view=upload-content"
-              class="sidebar-nav-link sidebar-nav-link--sub"
-              title="Upload Content"
-            >
-              <img
-                src="assets/svg/upload-content-icon.svg"
-                alt=""
-                aria-hidden="true"
-                class="sidebar-icon"
-              />
-              <span class="sidebar-text">Upload Content</span>
-            </a>
-            <a href="#view=roadmap" class="sidebar-nav-link sidebar-nav-link--sub" title="Roadmap">
-              <img
-                src="assets/svg/roadmap-icon.svg"
-                alt=""
-                aria-hidden="true"
-                class="sidebar-icon"
-              />
-              <span class="sidebar-text">Roadmap</span>
-            </a>
             <a
               href="#"
               data-blog-link
@@ -323,15 +266,6 @@
               />
               <span class="sidebar-text">Beta</span>
             </a>
-            <a href="#view=links" class="sidebar-nav-link sidebar-nav-link--sub" title="Links">
-              <img
-                src="assets/svg/links-icon.svg"
-                alt=""
-                aria-hidden="true"
-                class="sidebar-icon"
-              />
-              <span class="sidebar-text">Links</span>
-            </a>
             <a
               href="#"
               data-dns-link

js/hashChangeHandler.js

@@ -1,5 +1,14 @@
 import { devLogger as defaultDevLogger, userLogger as defaultUserLogger } from "./utils/logger.js";
 
+const LEGACY_DOCS_VIEWS = {
+  about: "about",
+  "community-guidelines": "community-guidelines",
+  "getting-started": "getting-started",
+  "upload-content": "upload-content",
+  roadmap: "roadmap",
+  links: "links"
+};
+
 const createLoggerFacade = (logger, fallback) => {
   if (logger && typeof logger === "object") {
     return {
@@ -32,6 +41,7 @@ export function createHashChangeHandler({
 } = {}) {
   const devLog = createLoggerFacade(devLogger, noopLogger);
   const userLog = createLoggerFacade(userLogger, noopLogger);
+  let currentViewName = null;
 
   const getReadyPromise = () => {
     if (typeof getApplicationReady === "function") {
@@ -82,7 +92,14 @@ export function createHashChangeHandler({
         const defaultViewName = resolveIsLoggedIn()
           ? "for-you"
           : "most-recent-videos";
+
+        if (defaultViewName === currentViewName) {
+          return;
+        }
+
         await loadView(`views/${defaultViewName}.html`);
+        currentViewName = defaultViewName;
+
         const initFn = viewInitRegistry?.[defaultViewName];
         if (typeof initFn === "function") {
           await initFn();
@@ -91,11 +108,24 @@ export function createHashChangeHandler({
       }
 
       const viewName = match[1];
+
+      if (Object.prototype.hasOwnProperty.call(LEGACY_DOCS_VIEWS, viewName)) {
+        const docSlug = LEGACY_DOCS_VIEWS[viewName];
+        window.location.hash = `#view=docs&doc=${docSlug}`;
+        return;
+      }
+
+      if (viewName === currentViewName) {
+        return;
+      }
+
       if (typeof viewName === "string" && viewName.toLowerCase() === "history") {
       }
       const viewUrl = `views/${viewName}.html`;
 
       await loadView(viewUrl);
+      currentViewName = viewName;
+
       const initFn = viewInitRegistry?.[viewName];
       if (typeof initFn === "function") {
         await initFn();

tests/unit/hashChangeHandler.test.mjs

@@ -0,0 +1,64 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { createHashChangeHandler } from '../../js/hashChangeHandler.js';
+
+test('createHashChangeHandler', async (t) => {
+  // Mock window
+  const mockLocation = { hash: '' };
+  global.window = {
+    location: mockLocation,
+    history: {
+        replaceState: () => {}
+    }
+  };
+
+  // Mock dependencies
+  let loadedView = null;
+  const mockLoadView = async (url) => {
+    loadedView = url;
+  };
+
+  const mockViewInitRegistry = {
+      docs: async () => {},
+      "for-you": async () => {}
+  };
+
+  const handler = createHashChangeHandler({
+    getApplication: () => ({ isUserLoggedIn: () => false }),
+    getApplicationReady: () => Promise.resolve(),
+    loadView: mockLoadView,
+    viewInitRegistry: mockViewInitRegistry,
+    userLogger: { error: () => {}, warn: () => {} },
+    devLogger: { log: () => {} }
+  });
+
+  await t.test('loads default view if hash is empty', async () => {
+    loadedView = null;
+    mockLocation.hash = '';
+    await handler();
+    // Default is most-recent-videos if not logged in
+    assert.equal(loadedView, 'views/most-recent-videos.html');
+  });
+
+  await t.test('redirects legacy view', async () => {
+    loadedView = null;
+    mockLocation.hash = '#view=about';
+    await handler();
+    // It should update hash and return
+    assert.equal(mockLocation.hash, '#view=docs&doc=about');
+    assert.equal(loadedView, null);
+  });
+
+  await t.test('skips redundant reload', async () => {
+    // First load docs
+    loadedView = null;
+    mockLocation.hash = '#view=docs';
+    await handler();
+    assert.equal(loadedView, 'views/docs.html');
+
+    // Call again with same hash
+    loadedView = null;
+    await handler();
+    assert.equal(loadedView, null, 'Should not reload view if same');
+  });
+});

views/about.html

@@ -1,74 +0,0 @@
-<!-- views/about.html -->
-<section class="bv-stack" data-ds="new" aria-labelledby="aboutHeading">
-  <article class="card p-lg">
-    <div class="bv-stack bv-stack--tight">
-      <h2 id="aboutHeading" class="text-2xl font-semibold text-text-strong">
-        About bitvid
-      </h2>
-      <div id="markdown-container" class="markdown-prose">
-        <p class="text-muted-strong">Loading content...</p>
-      </div>
-    </div>
-  </article>
-</section>
-
-<script>
-  (() => {
-    // Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
-    const noopLogger = {
-      log: () => {},
-      info: () => {},
-      warn: () => {},
-      error: () => {},
-    };
-    const dev = window.bitvidLogger?.dev || noopLogger;
-    const user = window.bitvidLogger?.user || noopLogger;
-
-    const loadMarkdown = async () => {
-      try {
-        const response = await fetch("content/docs/about.md");
-        if (!response.ok) {
-          throw new Error("Failed to load about.md");
-        }
-        const markdownText = await response.text();
-
-        // Convert the markdown to HTML (requires "marked" loaded globally)
-        const html = marked.parse(markdownText);
-
-        // Insert the HTML into the container
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = html;
-
-          const highlighter = window.hljs;
-          const highlight =
-            highlighter && typeof highlighter.highlightElement === "function"
-              ? (block) => highlighter.highlightElement(block)
-              : highlighter && typeof highlighter.highlightBlock === "function"
-                ? (block) => highlighter.highlightBlock(block)
-                : null;
-
-          if (highlight) {
-            container.querySelectorAll("pre code").forEach((block) => {
-              try {
-                highlight(block);
-              } catch (highlightError) {
-                dev.warn("Failed to highlight code block.", highlightError);
-              }
-            });
-          }
-        }
-      } catch (err) {
-        user.error("Error loading About content:", err);
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = `
-            <p class="text-critical-strong">Error loading content. Please try again later.</p>
-          `;
-        }
-      }
-    };
-
-    loadMarkdown();
-  })();
-</script>

views/community-guidelines.html

@@ -1,78 +0,0 @@
-<!-- views/community-guidelines.html -->
-<section class="bv-stack" data-ds="new" aria-labelledby="communityGuidelinesHeading">
-  <article class="card p-lg">
-    <div class="bv-stack bv-stack--tight">
-      <h2
-        id="communityGuidelinesHeading"
-        class="text-2xl font-semibold text-text-strong"
-      >
-        Community Guidelines
-      </h2>
-      <div id="markdown-container" class="markdown-prose">
-        <p class="text-muted-strong">Loading content...</p>
-      </div>
-    </div>
-  </article>
-</section>
-
-<script>
-  (() => {
-    // Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
-    const noopLogger = {
-      log: () => {},
-      info: () => {},
-      warn: () => {},
-      error: () => {},
-    };
-    const dev = window.bitvidLogger?.dev || noopLogger;
-    const user = window.bitvidLogger?.user || noopLogger;
-
-    const loadMarkdown = async () => {
-      try {
-        // Fetch the markdown file (change path if needed)
-        const response = await fetch("content/docs/community/community-guidelines.md");
-        if (!response.ok) {
-          throw new Error("Failed to load community-guidelines.md");
-        }
-        const markdownText = await response.text();
-
-        // Convert to HTML with Marked (make sure Marked is loaded globally in index.html)
-        const html = marked.parse(markdownText);
-
-        // Insert into the container
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = html;
-
-          const highlighter = window.hljs;
-          const highlight =
-            highlighter && typeof highlighter.highlightElement === "function"
-              ? (block) => highlighter.highlightElement(block)
-              : highlighter && typeof highlighter.highlightBlock === "function"
-                ? (block) => highlighter.highlightBlock(block)
-                : null;
-
-          if (highlight) {
-            container.querySelectorAll("pre code").forEach((block) => {
-              try {
-                highlight(block);
-              } catch (highlightError) {
-                dev.warn("Failed to highlight code block.", highlightError);
-              }
-            });
-          }
-        }
-      } catch (err) {
-        user.error("Error loading community guidelines:", err);
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = `
-            <p class="text-critical-strong">Error loading content. Please try again later.</p>
-          `;
-        }
-      }
-    };
-
-    loadMarkdown();
-  })();
-</script>

views/getting-started.html

@@ -1,79 +0,0 @@
-<!-- views/getting-started.html -->
-<section class="bv-stack" data-ds="new" aria-labelledby="gettingStartedHeading">
-  <article class="card p-lg">
-    <div class="bv-stack bv-stack--tight">
-      <h2
-        id="gettingStartedHeading"
-        class="text-2xl font-semibold text-text-strong"
-      >
-        Getting Started
-      </h2>
-      <div id="markdown-container" class="markdown-prose">
-        <p class="text-muted-strong">Loading content...</p>
-      </div>
-    </div>
-  </article>
-</section>
-
-<script>
-  (() => {
-    // Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
-    const noopLogger = {
-      log: () => {},
-      info: () => {},
-      warn: () => {},
-      error: () => {},
-    };
-    const dev = window.bitvidLogger?.dev || noopLogger;
-    const user = window.bitvidLogger?.user || noopLogger;
-
-    const loadMarkdown = async () => {
-      try {
-        // Fetch the Markdown file
-        const response = await fetch("content/docs/getting-started.md");
-        if (!response.ok) {
-          throw new Error("Failed to load getting-started.md");
-        }
-
-        const markdownText = await response.text();
-
-        // Convert to HTML with Marked (assuming marked is globally available)
-        const html = marked.parse(markdownText);
-
-        // Insert into #markdown-container
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = html;
-
-          const highlighter = window.hljs;
-          const highlight =
-            highlighter && typeof highlighter.highlightElement === "function"
-              ? (block) => highlighter.highlightElement(block)
-              : highlighter && typeof highlighter.highlightBlock === "function"
-                ? (block) => highlighter.highlightBlock(block)
-                : null;
-
-          if (highlight) {
-            container.querySelectorAll("pre code").forEach((block) => {
-              try {
-                highlight(block);
-              } catch (highlightError) {
-                dev.warn("Failed to highlight code block.", highlightError);
-              }
-            });
-          }
-        }
-      } catch (err) {
-        user.error("Error loading 'Getting Started' content:", err);
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = `
-            <p class="text-critical-strong">Error loading content. Please try again later.</p>
-          `;
-        }
-      }
-    };
-
-    loadMarkdown();
-  })();
-</script>

views/links.html

@@ -1,74 +0,0 @@
-<!-- views/links.html -->
-<section class="bv-stack" data-ds="new" aria-labelledby="linksHeading">
-  <article class="card p-lg">
-    <div class="bv-stack bv-stack--tight">
-      <h2 id="linksHeading" class="text-2xl font-semibold text-text-strong">
-        bitvid Links
-      </h2>
-      <div id="markdown-container" class="markdown-prose">
-        <p class="text-muted-strong">Loading content...</p>
-      </div>
-    </div>
-  </article>
-</section>
-
-<script>
-  (() => {
-    // Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
-    const noopLogger = {
-      log: () => {},
-      info: () => {},
-      warn: () => {},
-      error: () => {},
-    };
-    const dev = window.bitvidLogger?.dev || noopLogger;
-    const user = window.bitvidLogger?.user || noopLogger;
-
-    const loadMarkdown = async () => {
-      try {
-        const response = await fetch("content/docs/community/links.md");
-        if (!response.ok) {
-          throw new Error("Failed to load links.md");
-        }
-        const markdownText = await response.text();
-
-        // Convert the markdown to HTML (requires "marked" loaded globally)
-        const html = marked.parse(markdownText);
-
-        // Insert the HTML into the container
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = html;
-
-          const highlighter = window.hljs;
-          const highlight =
-            highlighter && typeof highlighter.highlightElement === "function"
-              ? (block) => highlighter.highlightElement(block)
-              : highlighter && typeof highlighter.highlightBlock === "function"
-                ? (block) => highlighter.highlightBlock(block)
-                : null;
-
-          if (highlight) {
-            container.querySelectorAll("pre code").forEach((block) => {
-              try {
-                highlight(block);
-              } catch (highlightError) {
-                dev.warn("Failed to highlight code block.", highlightError);
-              }
-            });
-          }
-        }
-      } catch (err) {
-        user.error("Error loading Links content:", err);
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = `
-            <p class="text-critical-strong">Error loading content. Please try again later.</p>
-          `;
-        }
-      }
-    };
-
-    loadMarkdown();
-  })();
-</script>

views/roadmap.html

@@ -1,75 +0,0 @@
-<!-- views/roadmap.html -->
-<section class="bv-stack" data-ds="new" aria-labelledby="roadmapHeading">
-  <article class="card p-lg">
-    <div class="bv-stack bv-stack--tight">
-      <h2 id="roadmapHeading" class="text-2xl font-semibold text-text-strong">
-        Roadmap
-      </h2>
-      <div id="markdown-container" class="markdown-prose">
-        <p class="text-muted-strong">Loading content...</p>
-      </div>
-    </div>
-  </article>
-</section>
-
-<script>
-  (() => {
-    // Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
-    const noopLogger = {
-      log: () => {},
-      info: () => {},
-      warn: () => {},
-      error: () => {},
-    };
-    const dev = window.bitvidLogger?.dev || noopLogger;
-    const user = window.bitvidLogger?.user || noopLogger;
-
-    const loadMarkdown = async () => {
-      try {
-        // Fetch your roadmap markdown
-        const response = await fetch("content/docs/roadmap.md");
-        if (!response.ok) {
-          throw new Error("Failed to load roadmap.md");
-        }
-        const markdownText = await response.text();
-
-        // Convert markdown to HTML (marked must be globally available)
-        const html = marked.parse(markdownText);
-
-        // Insert into the container
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = html;
-
-          const highlighter = window.hljs;
-          const highlight =
-            highlighter && typeof highlighter.highlightElement === "function"
-              ? (block) => highlighter.highlightElement(block)
-              : highlighter && typeof highlighter.highlightBlock === "function"
-                ? (block) => highlighter.highlightBlock(block)
-                : null;
-
-          if (highlight) {
-            container.querySelectorAll("pre code").forEach((block) => {
-              try {
-                highlight(block);
-              } catch (highlightError) {
-                dev.warn("Failed to highlight code block.", highlightError);
-              }
-            });
-          }
-        }
-      } catch (err) {
-        user.error("Error loading roadmap:", err);
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = `
-            <p class="text-critical-strong">Error loading content. Please try again later.</p>
-          `;
-        }
-      }
-    };
-
-    loadMarkdown();
-  })();
-</script>

views/upload-content.html

@@ -1,77 +0,0 @@
-<!-- views/upload-content.html -->
-<section class="bv-stack" data-ds="new" aria-labelledby="uploadContentHeading">
-  <article class="card p-lg">
-    <div class="bv-stack bv-stack--tight">
-      <div class="flex items-center gap-3">
-        <img src="assets/svg/upload-content-icon.svg" alt="" class="h-8 w-8 text-accent" aria-hidden="true" />
-        <h2 id="uploadContentHeading" class="text-2xl font-semibold text-text-strong">
-          Upload Content
-        </h2>
-      </div>
-      <div id="markdown-container" class="markdown-prose">
-        <p class="text-muted-strong">Loading content...</p>
-      </div>
-    </div>
-  </article>
-</section>
-
-<script>
-  (() => {
-    // Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
-    const noopLogger = {
-      log: () => {},
-      info: () => {},
-      warn: () => {},
-      error: () => {},
-    };
-    const dev = window.bitvidLogger?.dev || noopLogger;
-    const user = window.bitvidLogger?.user || noopLogger;
-
-    const loadMarkdown = async () => {
-      try {
-        const response = await fetch("content/docs/guides/upload-content.md");
-        if (!response.ok) {
-          throw new Error("Failed to load upload-content.md");
-        }
-        const markdownText = await response.text();
-
-        // Convert the markdown to HTML (requires "marked" loaded globally)
-        const html = marked.parse(markdownText);
-
-        // Insert the HTML into the container
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = html;
-
-          const highlighter = window.hljs;
-          const highlight =
-            highlighter && typeof highlighter.highlightElement === "function"
-              ? (block) => highlighter.highlightElement(block)
-              : highlighter && typeof highlighter.highlightBlock === "function"
-                ? (block) => highlighter.highlightBlock(block)
-                : null;
-
-          if (highlight) {
-            container.querySelectorAll("pre code").forEach((block) => {
-              try {
-                highlight(block);
-              } catch (highlightError) {
-                dev.warn("Failed to highlight code block.", highlightError);
-              }
-            });
-          }
-        }
-      } catch (err) {
-        user.error("Error loading Upload Content guide:", err);
-        const container = document.getElementById("markdown-container");
-        if (container) {
-          container.innerHTML = `
-            <p class="text-critical-strong">Error loading content. Please try again later.</p>
-          `;
-        }
-      }
-    };
-
-    loadMarkdown();
-  })();
-</script>