Skip to content

feat: add documentation tab#11

Open
Uri-Tauber wants to merge 2 commits into
crosspoint-reader:masterfrom
Uri-Tauber:feat/docs
Open

feat: add documentation tab#11
Uri-Tauber wants to merge 2 commits into
crosspoint-reader:masterfrom
Uri-Tauber:feat/docs

Conversation

@Uri-Tauber

@Uri-Tauber Uri-Tauber commented Jun 21, 2026

Copy link
Copy Markdown
Member

Summary

Automatically fetches and displays documentation from the Crosspoint repository, making it easily accessible within the website. This allows users to find and browse relevant documentation without needing technical knowledge or having to search GitHub manually.

Screenshot

image

Disclaimer

Unlike C/C++, my JS knowledge is near zero, so this PR is "vibe-coded".

@coderabbitai

coderabbitai Bot commented Jun 21, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@Uri-Tauber, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 42 minutes and 46 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d31b2d6d-a433-48d5-a871-40b7dbf5ad79

📥 Commits

Reviewing files that changed from the base of the PR and between bd9b609 and f95fe2d.

📒 Files selected for processing (2)
  • public/docs.html
  • public/index.html
📝 Walkthrough

Walkthrough

A new public/docs.html page is added that renders GitHub-hosted markdown documentation files in a sidebar/content layout. It uses the marked library for markdown-to-HTML conversion, supports hash-based deep-linking, and shows an error fallback on fetch failure. public/index.html gains a Docs nav link and the marked script dependency.

Changes

Documentation page with markdown rendering

Layer / File(s) Summary
Page layout, styles, and nav wiring
public/docs.html, public/index.html
Full HTML skeleton for docs.html with Tailwind setup, custom CSS for sidebar/markdown typography/spinner, nav bar, docs section layout, and footer. index.html gains the marked library <script> tag, a Docs nav link, and trailing whitespace additions.
marked initialization and image URL rewriting
public/docs.html
Configures marked with a walkTokens hook that rewrites markdown image URLs to the GitHub raw content host for both absolute-path and non-HTTP relative URLs.
Deep-link resolution and document fetch/render
public/docs.html
DOM wiring, getDeepLinkDoc (resolves #docName or ?doc= query forms), setDeepLink, and loadDoc which fetches a markdown file from its download_url, rewrites any img src attributes that marked misses, renders HTML into docs-content, updates the URL hash, and shows an error block with a GitHub fallback link on failure.
Sidebar build, initial doc selection, and hashchange handling
public/docs.html
init rebuilds the sidebar from a fixed file list, selects the initial document via deep-link hash or defaults to the first entry, wires click handlers to loadDoc, calls init on page load, and adds a hashchange listener that skips redundant reloads when the same doc is already active.

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant docs.html as docs.html (browser)
  participant GitHub Raw as GitHub Raw Content

  User->>docs.html: navigates to /docs.html#docName
  docs.html->>docs.html: init() builds sidebar, resolves deep-link
  docs.html->>docs.html: loadDoc(selectedFile) — show spinner
  docs.html->>GitHub Raw: GET download_url (markdown file)
  GitHub Raw-->>docs.html: markdown text response
  docs.html->>docs.html: marked.parse() + img src rewrite
  docs.html->>docs.html: inject HTML, update URL hash, mark sidebar active
  User->>docs.html: clicks different sidebar entry
  docs.html->>docs.html: loadDoc(newFile)
  docs.html->>GitHub Raw: GET new download_url
  GitHub Raw-->>docs.html: markdown text
  docs.html->>docs.html: render + update hash
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: add documentation tab' accurately summarizes the main change—adding a documentation tab feature that fetches and displays documentation on the website.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed The pull request description accurately describes the changeset: adding a documentation feature that fetches and displays documentation from the repository. It matches the implemented changes in docs.html and index.html.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
public/index.html (1)

22-23: 🧹 Nitpick | 🔵 Trivial

Remove the marked script from index.html (line 23) since it's not used there.

The library is loaded on every homepage visit but only used in docs.html. Move the script tag to docs.html to eliminate the unnecessary third-party request on the index page.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@public/index.html` around lines 22 - 23, Remove the marked library script tag
(the one with the comment "Markdown renderer for Docs tab") from index.html
since it is not being used on that page. Then add that same script tag to
docs.html where the marked library is actually required for rendering markdown
content. This will reduce unnecessary third-party requests on the homepage while
ensuring the library is still available where needed.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@public/docs.html`:
- Around line 120-123: The Download Firmware link in public/docs.html uses
href="#" with a data-open-download-modal attribute, but the page lacks the
JavaScript event handler to implement this modal functionality. Either add the
missing JavaScript that listens for clicks on elements with
data-open-download-modal and opens the download modal instead of navigating, or
replace the href="#" with a proper destination URL and remove the
data-open-download-modal attribute if the modal functionality is not intended to
be implemented on this page.
- Around line 197-206: The decodeURIComponent calls in the getDeepLinkDoc
function can throw a URIError when encountering malformed percent-encoded
sequences, which breaks hash navigation. Wrap both decodeURIComponent calls (one
in the regex match handler and one in the direct hash handler) in try-catch
blocks, and return the original unencoded value as a fallback when decoding
fails.
- Line 247: The code at line 247 assigns the output of marked.parse(md) directly
to content.innerHTML without sanitization, creating an XSS vulnerability since
marked.js does not sanitize HTML by default and the markdown source from remote
GitHub URLs could contain malicious script tags. Use a sanitization library such
as DOMPurify to sanitize the parsed markdown output before assigning it to
innerHTML, ensuring that dangerous HTML and script tags are removed while
preserving safe formatting.

---

Nitpick comments:
In `@public/index.html`:
- Around line 22-23: Remove the marked library script tag (the one with the
comment "Markdown renderer for Docs tab") from index.html since it is not being
used on that page. Then add that same script tag to docs.html where the marked
library is actually required for rendering markdown content. This will reduce
unnecessary third-party requests on the homepage while ensuring the library is
still available where needed.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3632f061-ce13-4d54-841c-755cad6d9909

📥 Commits

Reviewing files that changed from the base of the PR and between 6541fb4 and bd9b609.

📒 Files selected for processing (2)
  • public/docs.html
  • public/index.html
📜 Review details
🧰 Additional context used
🪛 ast-grep (0.43.0)
public/docs.html

[warning] 246-246: Avoid assigning untrusted data to innerHTML/outerHTML or document.write
Context: content.innerHTML = marked.parse(md)
Note: [CWE-79].

(inner-outer-html)


[warning] 254-258: Avoid assigning untrusted data to innerHTML/outerHTML or document.write
Context: content.innerHTML =
'

' +
'

Failed to load document

' +
'

There was an error fetching the content. ' +
'View it directly on GitHub.

'
Note: [CWE-79].

(inner-outer-html)


[error] 228-228: React's useState should not be directly called
Context: setDeepLink(file.name.replace(/.md$/, ''))
Note: [CWE-710] Improper Adherence to Coding Standards. Security best practice.

(usestate-direct-usage)

🔇 Additional comments (1)
public/index.html (1)

559-559: LGTM!

Also applies to: 1315-1315, 1808-1810

Comment thread public/docs.html Outdated
Comment thread public/docs.html
Comment thread public/docs.html Outdated
@Uri-Tauber

Copy link
Copy Markdown
Member Author

@itsthisjustin Want to take a look?

Seems I don't have write permission here...

@itsthisjustin

Copy link
Copy Markdown
Contributor

@itsthisjustin Want to take a look?

Seems I don't have write permission here...

Yeah all the new repos need proper teams set up for them still

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants