Fix fragment navigation for gistpreview.github.io URLs (#13)

simonw · web-flow · commit 68f739501c20 · 2025-12-26T16:54:18.000-08:00
> The gistpreview mechanis has a bug: fragment links like https://gistpreview.github.io/?edbd5ddcb39d1edc9e175f1bf7b9ef9a/page-001.html#msg-2025-12-26T15-30-45-910Z do not naught the user to the right point, presumably because the content has not loaded in time > > Fix that with more JavaScript in the existing gistpreview JavaScript When accessing a gistpreview URL with a fragment (e.g. #msg-2025-12-26T15-30-45-910Z), the browser's native fragment navigation fails because gistpreview loads content dynamically. By the time the browser tries to scroll to the element, it doesn't exist yet. Added JavaScript that: - Checks for fragment in window.location.hash - Uses scrollIntoView to navigate to the target element - Retries with increasing delays (100ms, 300ms, 500ms, 1s) to handle dynamic content loading https://gistpreview.github.io/?883ee001b0d63a2045f1e2c7c2598a9f/index.html
diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
@@ -747,6 +747,30 @@ def render_message(log_type, message_json, timestamp):
         var anchor = parts.length > 1 ? '#' + parts[1] : '';
         link.setAttribute('href', '?' + gistId + '/' + filename + anchor);
     });
+
+    // Handle fragment navigation after dynamic content loads
+    // gistpreview.github.io loads content dynamically, so the browser's
+    // native fragment navigation fails because the element doesn't exist yet
+    function scrollToFragment() {
+        var hash = window.location.hash;
+        if (!hash) return false;
+        var targetId = hash.substring(1);
+        var target = document.getElementById(targetId);
+        if (target) {
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            return true;
+        }
+        return false;
+    }
+
+    // Try immediately in case content is already loaded
+    if (!scrollToFragment()) {
+        // Retry with increasing delays to handle dynamic content loading
+        var delays = [100, 300, 500, 1000];
+        delays.forEach(function(delay) {
+            setTimeout(scrollToFragment, delay);
+        });
+    }
 })();
 """
 
diff --git a/tests/test_generate_html.py b/tests/test_generate_html.py
@@ -365,6 +365,24 @@ def test_injects_js_into_html_files(self, output_dir):
         assert index_content.endswith("</body></html>")
         assert "<script>" in index_content
 
+    def test_gist_preview_js_handles_fragment_navigation(self):
+        """Test that GIST_PREVIEW_JS includes fragment navigation handling.
+
+        When accessing a gistpreview URL with a fragment like:
+        https://gistpreview.github.io/?GIST_ID/page-001.html#msg-2025-12-26T15-30-45-910Z
+
+        The content loads dynamically, so the browser's native fragment
+        navigation fails because the element doesn't exist yet. The JS
+        should scroll to the fragment element after content loads.
+        """
+        # The JS should check for fragment in URL
+        assert (
+            "location.hash" in GIST_PREVIEW_JS
+            or "window.location.hash" in GIST_PREVIEW_JS
+        )
+        # The JS should scroll to the element
+        assert "scrollIntoView" in GIST_PREVIEW_JS
+
     def test_skips_files_without_body(self, output_dir):
         """Test that files without </body> are not modified."""
         original_content = "<html><head><title>Test</title></head></html>"
