refactor: restructure site theme styles and components - #241
refactor: restructure site theme styles and components#241david-on-github wants to merge 27 commits into
Conversation
…sh UI Migrates ejected theme components from .js to .tsx and reorganizes src/css into per-concern partials (navbar, sidebar, breadcrumbs, pagination, footer, markdown, toc-mobile, etc.) under custom.scss. UI changes: single-icon color mode toggle, TOC "on this page" title replaced with an icon, animated left-aligned active indicator for the desktop TOC, flush/truncating mobile TOC and breadcrumbs, updated GitHub icon, and the navbar version dropdown restyled to match the "Open Markdown" dropdown.
Admonitions: - Lay the icon out in its own column with the body indented beside it, dropping the default "NOTE"/"TIP" labels. Author-written titles are kept via a wrapper around @theme-original/Admonition that tags them with .admonition--titled; it calls processAdmonitionProps itself because the legacy `:::tip Foo` syntax arrives as an mdxAdmonitionTitle child rather than a prop. - Replace all five icons with stroke-based Lucide equivalents. These need the fill from Admonition's module CSS undone, hence .admonition-icon--stroke. - Full 1px rounded border matching the code block radius, toned halfway to the background with color-mix; icons keep the accent at full strength. - Drop the dead `.admonition .admonition-icon` rule, which targeted Docusaurus v2 class names that no longer exist. Details: gray border and divider instead of the inherited green info accent, and a masked chevron in place of the CSS-only border triangle. The asset points right so theme-common's own rotate(90deg) on open still applies. Tables: full-width and flat/borderless, with a `table` entry in MDXComponents wrapping them for horizontal scroll, since Infima's display:block is what the full-width switch gives up. Also: hide single-item breadcrumbs that only repeat the h1, raise the link underline offset, rename _feedback-widget.scss to _feedback.scss and move the pushfeedback ::part() rules into it, and drop a duplicate --ifm-toc-padding-horizontal declaration. The styleguide lives at /styleguide as its own docs instance, unlinked from the navbar and excluded from the sitemap, llms.txt, and robots.txt, with a noindex meta on each page.
Built for EditThisPage, which no longer renders an icon. Nothing references it; the navbar draws its GitHub mark as a CSS background on .header-github-link instead.
Colour tokens: - Add the brand neutral ramp as --src-* and point Infima's --ifm-color-gray-* at it. That one mapping covers both themes, since Infima's --ifm-color-emphasis-* are aliases onto the ramp, declared in :root and again under [data-theme='dark'] with the order inverted. - Add --src-black, --src-ink and --src-amber, and link twelve declarations that were hand-tuned near-misses of a brand value (--card-border-color #e8e8e8 vs #e5e5e5, --code-background #f3f3f3 vs #f5f5f5, and so on). - --ifm-color-secondary-* styles :::note admonitions and was the one family the ramp swap missed; its values are literals in Infima rather than aliases onto the greys. Admonitions: tint body copy and title with the variant accent, blended toward --ifm-alert-foreground-color. The accent alone fails WCAG AA badly in light mode, where the fills are near-white — `note` managed 1.17:1. The blend ratios (75% dark, 10% light) are the most accent each theme can carry with every variant at 4.5:1. `danger` and `note` take brand/emphasis accents of their own, which were holding their themes' ratios down; everything now clears AAA in both. Sidebar and tabs share --src-hover-overlay / --src-active-overlay, kept separate from Infima's --ifm-hover-overlay so breadcrumbs, dropdowns, pagination and pills stay at 5%. Also: hide the scrollbar until hover, drop the mobile "On this page" collapsible, underline details summaries on hover, stop the last code block in a container double-spacing against its padding, and delete the unused --doc-sidebar-hidden-width.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds an internal ChangesDocumentation styleguide and site configuration
Site theme foundation and CSS architecture
Docusaurus theme component overrides
Homepage and presentation
Estimated code review effort: 4 (Complex) | ~75 minutes Possibly related PRs
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. Comment |
Deploying docs-source-network with
|
| Latest commit: |
135bf69
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0e5ebcbc.docs-source-network.pages.dev |
| Branch Preview URL: | https://david-css-refactor.docs-source-network.pages.dev |
…n dropdown Info admonitions now reference --ifm-color-success-contrast-background rather than sitting on the page background, so the two stay in step. <details> opts back out with a transparent background — Docusaurus renders those with `alert alert--info` hardcoded, so they would otherwise have turned green. That surfaced an icon contrast problem on the light fill: info manages 1.90:1 and tip 2.49:1, both under the 3:1 WCAG minimum for non-text. Earlier passes only measured text. Both use --ifm-color-info-darkest in light now (3.61:1); dark keeps the brighter greens, which read correctly against the deep fill. Code blocks inside admonitions no longer inherit the reduced body font size. Infima sizes pre and code as a percentage of their container, so the 14px prose was pulling them to 11.2px instead of the usual 12.8px. Inline code is left alone, since it should track the text around it. The version dropdown's disclosure marker is a masked chevron instead of Infima's CSS-only border triangle, matching the markdown actions dropdown, and now flips while the menu is open.
--ifm-color-primary-dark through -lightest were a leftover blue palette from a previous brand. Infima reaches for -dark and -darker on .button--primary hover and active, so the first primary button anyone added would have rendered green and hovered blue. Replaced with shades of --src-primary at the same +/-10/15/30% lightness steps Docusaurus' own generator uses. Nothing renders differently today — .button--primary appears nowhere but the styleguide's button row. --color-text-muted is an exact match for the brand system's "muted/tertiary text on dark", but sat under the syntax highlighting group where no one would look for a text token. Renamed to --src-text-muted and moved in with the neutrals, alongside --src-text-subtitle for the one other named role we didn't have. Also the four px cases that were simply wrong: two `0px` that should be unitless, and two hand-computed rems whose real value lived in a trailing comment. _code-blocks.scss now imports utils so it can use the helper.
_markdown, _search, _tables and the Footer module never imported utils, so the helper simply wasn't available in them — that's why the convention was patchy rather than anyone deciding px was right there. Converts the eleven text-scaled values that were left in px; borders, media queries, box-shadow offsets and the like stay as they are. --ifm-navbar-height is deliberately not converted: it shifts layout math and belongs in its own change.
They had grown into narration. Kept the ones recording something the CSS can't show — specificity fights with Infima and theme-common, contrast ratios behind a chosen value, upstream behaviour being worked around — and dropped the rest. Also removes the commented-out .alert--info block, now obsolete: info takes tip's fill through --ifm-color-info-contrast-background instead.
Comments cut to the ones recording something the CSS can't show — specificity, upstream behaviour, the contrast ratio behind a value. 223 comment lines down to 167 across the partials. The code block collapse control sticks to the bottom while an expanded block scrolls past; no ancestor sets overflow, so it engages against the page. The note admonition's dark fill moves to --src-obsidian. --src-gray-900 was the obvious next step down but is exactly --code-background, which would have made a nested code block vanish into it. Obsidian also puts the nesting in ascending order: page < admonition < code block.
utils.scss (Sass helpers) sat next to _utilities.scss (CSS utility classes), near-identical names for unrelated things. Renamed to _functions.scss and the 18 imports updated. _utilities.scss keeps the layout wrappers and .thin-scrollbar; the back-to-top button and edit-this-page link move to partials of their own, as does the tab styling that had accreted inside _admonitions.scss. Also sorts the --ifm-* overrides within their groups to follow Infima's own declaration order — 14 inverted adjacent pairs down to 7 — and files --ifm-container-width-xl under layout rather than colours.
The swatches resolve live so their colours were never wrong, but the prose and the alias annotations had drifted: - primary variants were still described as a leftover blue palette - --ifm-color-info-contrast-background was annotated --src-white / --src-black, but now aliases --ifm-color-success-contrast-background - the secondary and warning families weren't shown at all, despite being what :::note and :::warning resolve through - --doc-sidebar-width and --ifm-alert-border-left-width were stale in the table Also narrows the page's opening claim, which promised every custom property while the spacing and type tokens only appear selectively in the table.
Docusaurus drops the ToC at 996px, which leaves sidebar + content + ToC sharing ~1000px. Raising the threshold to 1200px gives the content the whole right column back in that band, rather than recovering the same space by shaving gutters and sidebar width. Reverts those: the doc gutters and --doc-sidebar-width go back to single desktop values, since the squeeze they addressed no longer happens. There is no fallback below 1200px — DocItem/TOC/Mobile renders null — so nothing navigates within a page under that width. Extends an existing gap rather than creating one; it already applied below 996px. Also drops a dead .docItemContainer rule from the ToC module. That class is hashed per module and the ToC component never applies it; the real one lives in DocItem/Layout. --doc-sidebar-width moves from :root to body. Docusaurus declares it in :root too and its module CSS lands later in the bundle, so the override was losing the tie and doing nothing — the values happened to match. On body it wins by inheritance, and both consumers (the sidebar container's width and Main's max-width calc) still read it from a shared ancestor.
Hiding .tableOfContents left the column itself in place — .sidebar is a col--4, so it held a third of the row regardless, along with the ToC icon and the edit link. Hides .sidebar instead, and drops the now-redundant rule from the ToC module. That took the only "Edit this page" link with it below 1200px, since _edit-this-page.scss suppresses the footer row on the grounds that it duplicates the copy under the ToC. True only where that column exists, so the suppression is now scoped to 1200px and up. --root-wrapper-width becomes calc(--ifm-container-width-xl + --doc-sidebar-width), 1700px rather than a flat 110rem. The doc content is capped by Infima's .container, so anything wider than cap + sidebar only left it centred in slack it couldn't use — about 60px above ~1700px viewport. It sits on body next to --doc-sidebar-width because a var() inside a custom property resolves on its own element, and in :root it would have read Docusaurus' sidebar width instead of ours. Also reduces the navbar logo margin.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🤖 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 `@src/css/_details.scss`:
- Line 8: Insert a blank line before the nested comments in
src/css/_details.scss:8-8, src/css/_edit-this-page.scss:4-4, and
src/css/_footer.scss:23-23, preserving the existing comment text and surrounding
SCSS.
In `@src/css/_functions.scss`:
- Around line 4-8: Rename the SCSS function stripUnit to a kebab-case name such
as strip-unit to satisfy the configured naming pattern, and update its
invocation within rem accordingly. Preserve the existing function behavior and
rem calculation.
In `@src/css/_markdown.scss`:
- Line 16: Update the currentColor values to the required lowercase currentcolor
keyword in src/css/_markdown.scss at lines 16-16 and 113-113, and
src/css/_navbar.scss at line 47-47; no other changes are needed.
In `@src/css/_search.scss`:
- Around line 45-49: Update the &-source rule within &-Hit to replace the
hardcoded white color with the existing theme-aware foreground token, preserving
the current font-family and other styling.
In `@src/css/_sidebar.scss`:
- Around line 110-114: Update the .menu__caret rule so Docusaurus’s category
expand/collapse button remains visible and interactive, removing the
display:none hiding behavior. Restyle the caret to visually match the custom
chevron indicator while preserving independent expand/collapse interaction for
linked categories.
In `@src/css/_tables.scss`:
- Line 4: Remove the standalone empty `//` comment at the top of the stylesheet
so it no longer triggers the `scss/comment-no-empty` lint rule.
In `@src/css/custom.scss`:
- Around line 4-26: Move the Google Fonts loading out of custom.scss so it is
available before emitted CSS rules, preferably by configuring the stylesheet in
the Docusaurus theme/head; alternatively self-host the fonts with `@font-face`.
Remove the trailing Google Fonts `@import` while preserving the existing SCSS
module imports.
In `@src/css/variables.scss`:
- Line 46: Update the new token stylesheet to satisfy Stylelint: remove the
empty comment at line 86, add the required blank lines around the affected
comment sections, and quote the capitalized fallback font-family identifiers
near lines 259-261 (or intentionally configure the lint rule). Preserve the
token values and existing stylesheet structure.
In `@src/pages/index.module.scss`:
- Line 68: Update the border-radius declaration in the relevant stylesheet rule
to use the valid 5px value instead of rem(5x), preserving the existing styling
while satisfying Stylelint.
In `@src/theme/DocItem/Layout/styles.module.scss`:
- Around line 54-57: Remove the invalid background-color declaration from the
stylesheet rule, leaving the existing background: none declaration to provide
the intended styling.
In `@src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx`:
- Around line 9-44: Update the PLUGIN_IDS list used by
DocsVersionDropdownNavbarItemWrapper to include the registered styleguide plugin
ID, ensuring /styleguide/** renders its version dropdown through the existing
active-plugin grid logic.
🪄 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 Plus
Run ID: 3383f49b-845e-4941-84e8-d0866f48dc42
⛔ Files ignored due to path filters (5)
static/img/icon-chevron-down.svgis excluded by!**/*.svgstatic/img/icon-chevron-right.svgis excluded by!**/*.svgstatic/img/icon-external-link.svgis excluded by!**/*.svgstatic/img/icon-github-dark.svgis excluded by!**/*.svgstatic/img/icon-github.svgis excluded by!**/*.svg
📒 Files selected for processing (83)
docs/sidebars/styleguide.jsdocs/styleguide/colors.mdxdocs/styleguide/components.mdxdocs/styleguide/index.mdxdocusaurus.config.jssrc/css/_admonitions.scsssrc/css/_back-to-top.scsssrc/css/_breadcrumbs.scsssrc/css/_code-blocks.scsssrc/css/_details.scsssrc/css/_edit-this-page.scsssrc/css/_feedback.scsssrc/css/_footer.scsssrc/css/_functions.scsssrc/css/_markdown.scsssrc/css/_navbar.scsssrc/css/_pagination.scsssrc/css/_search.scsssrc/css/_sidebar.scsssrc/css/_tables.scsssrc/css/_tabs.scsssrc/css/_utilities.scsssrc/css/custom.scsssrc/css/default-infima-variables.scsssrc/css/fonts.scsssrc/css/infima-variables.scsssrc/css/typography.scsssrc/css/variables.scsssrc/pages/index.module.scsssrc/theme/Admonition/Icon/Danger.tsxsrc/theme/Admonition/Icon/Info.tsxsrc/theme/Admonition/Icon/Note.tsxsrc/theme/Admonition/Icon/Tip.tsxsrc/theme/Admonition/Icon/Warning.tsxsrc/theme/Admonition/index.tsxsrc/theme/CodeBlock/Content/styles.module.csssrc/theme/ColorModeToggle/MoonIcon.tsxsrc/theme/ColorModeToggle/SunIcon.tsxsrc/theme/ColorModeToggle/index.tsxsrc/theme/ColorModeToggle/styles.module.scsssrc/theme/DocItem/Content/index.jssrc/theme/DocItem/Footer/index.tsxsrc/theme/DocItem/Layout/ListTreeIcon.tsxsrc/theme/DocItem/Layout/index.tsxsrc/theme/DocItem/Layout/styles.module.scsssrc/theme/DocItem/Metadata/index.jssrc/theme/DocItem/Paginator/index.jssrc/theme/DocItem/TOC/Desktop/index.jssrc/theme/DocItem/TOC/Mobile/index.jssrc/theme/DocItem/TOC/Mobile/index.tsxsrc/theme/DocItem/TOC/Mobile/styles.module.csssrc/theme/DocItem/index.jssrc/theme/DocPage/Layout/Main/index.tsxsrc/theme/DocPage/Layout/Main/styles.module.scsssrc/theme/DocPage/Layout/Sidebar/ExpandButton/index.jssrc/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.csssrc/theme/DocPage/Layout/Sidebar/index.jssrc/theme/DocPage/Layout/Sidebar/styles.module.csssrc/theme/DocPage/Layout/index.tsxsrc/theme/DocPage/Layout/styles.module.scsssrc/theme/DocPage/index.tsxsrc/theme/EditThisPage/index.tsxsrc/theme/Footer/Copyright/index.jssrc/theme/Footer/Layout/index.tsxsrc/theme/Footer/LinkItem/index.jssrc/theme/Footer/Links/MultiColumn/index.jssrc/theme/Footer/Links/Simple/index.jssrc/theme/Footer/Links/index.jssrc/theme/Footer/Logo/index.jssrc/theme/Footer/Logo/styles.module.csssrc/theme/Footer/index.tsxsrc/theme/Footer/styles.module.scsssrc/theme/Icon/ExternalLink/index.tsxsrc/theme/MDXComponents.jssrc/theme/MDXComponents.tsxsrc/theme/NavbarItem/DocsVersionDropdownNavbarItem.jssrc/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsxsrc/theme/PaginatorNavLink/index.tsxsrc/theme/TOC/index.jssrc/theme/TOC/index.tsxsrc/theme/TOC/styles.module.cssstatic/robots.txttsconfig.json
💤 Files with no reviewable changes (31)
- src/css/default-infima-variables.scss
- src/theme/DocItem/TOC/Mobile/index.js
- src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js
- src/theme/DocItem/index.js
- src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css
- src/theme/Footer/LinkItem/index.js
- src/theme/Footer/Logo/styles.module.css
- src/theme/Footer/index.tsx
- src/theme/DocPage/Layout/Main/styles.module.scss
- src/theme/MDXComponents.js
- src/css/typography.scss
- src/theme/TOC/index.js
- src/css/infima-variables.scss
- src/theme/DocItem/Metadata/index.js
- src/theme/Footer/Copyright/index.js
- src/theme/DocPage/Layout/index.tsx
- src/theme/DocItem/Content/index.js
- src/theme/DocPage/Layout/Main/index.tsx
- src/theme/Footer/Links/MultiColumn/index.js
- src/theme/DocPage/index.tsx
- src/theme/Footer/Links/index.js
- src/theme/Footer/Logo/index.js
- src/theme/DocPage/Layout/styles.module.scss
- src/theme/DocItem/Paginator/index.js
- src/theme/DocItem/TOC/Mobile/styles.module.css
- src/theme/DocItem/TOC/Desktop/index.js
- src/theme/DocPage/Layout/Sidebar/styles.module.css
- src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js
- src/theme/DocPage/Layout/Sidebar/index.js
- src/theme/Footer/Links/Simple/index.js
- src/css/fonts.scss
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: Cloudflare Pages
🧰 Additional context used
📓 Path-based instructions (3)
src/{theme,css,code-theme}/**/*.{js,jsx,ts,tsx,scss,css}
📄 CodeRabbit inference engine (CLAUDE.md)
Custom theme components use Docusaurus swizzling with custom footer components, color mode toggle, SCSS styling in
/src/css/custom.scss, and custom code theme in/src/code-theme/code-theme.js
Files:
src/css/_feedback.scsssrc/theme/Admonition/Icon/Tip.tsxsrc/theme/Admonition/Icon/Note.tsxsrc/theme/Admonition/Icon/Warning.tsxsrc/theme/PaginatorNavLink/index.tsxsrc/theme/DocItem/Layout/ListTreeIcon.tsxsrc/theme/Admonition/Icon/Danger.tsxsrc/css/_back-to-top.scsssrc/css/_utilities.scsssrc/theme/Admonition/index.tsxsrc/css/_breadcrumbs.scsssrc/css/_navbar.scsssrc/theme/MDXComponents.tsxsrc/css/_tables.scsssrc/theme/DocItem/TOC/Mobile/index.tsxsrc/theme/Footer/styles.module.scsssrc/css/_edit-this-page.scsssrc/theme/ColorModeToggle/index.tsxsrc/css/_functions.scsssrc/theme/TOC/index.tsxsrc/css/_sidebar.scsssrc/theme/ColorModeToggle/MoonIcon.tsxsrc/css/_details.scsssrc/theme/CodeBlock/Content/styles.module.csssrc/theme/Admonition/Icon/Info.tsxsrc/css/_tabs.scsssrc/css/_footer.scsssrc/css/_pagination.scsssrc/css/_search.scsssrc/css/_code-blocks.scsssrc/css/_admonitions.scsssrc/theme/DocItem/Footer/index.tsxsrc/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsxsrc/theme/Icon/ExternalLink/index.tsxsrc/css/_markdown.scsssrc/theme/DocItem/Layout/index.tsxsrc/theme/EditThisPage/index.tsxsrc/theme/TOC/styles.module.csssrc/theme/ColorModeToggle/styles.module.scsssrc/css/variables.scsssrc/css/custom.scsssrc/theme/ColorModeToggle/SunIcon.tsxsrc/theme/DocItem/Layout/styles.module.scsssrc/theme/Footer/Layout/index.tsx
**/*.{md,mdx}
📄 CodeRabbit inference engine (CLAUDE.md)
Documentation files support both
.md(CommonMark) and.mdx(MDX) formats
Files:
docs/styleguide/components.mdxdocs/styleguide/index.mdxdocs/styleguide/colors.mdx
docusaurus.config.js
📄 CodeRabbit inference engine (CLAUDE.md)
docusaurus.config.js: Changelog and release notes sidebar items should be automatically reversed (newest first) via thereverseSidebarChangelog()function indocusaurus.config.js
The site uses dark mode by default withrespectPrefersColorScheme: false
GitHub edit links should be configured to point to the master branch
Algolia search is configured with app IDN3M9YBYYQY
Files:
docusaurus.config.js
🪛 Stylelint (17.14.1)
src/css/_navbar.scss
[error] 47-47: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
src/css/_tables.scss
[error] 4-4: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
src/css/_edit-this-page.scss
[error] 4-4: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
src/css/_functions.scss
[error] 4-4: Expected function name "stripUnit" to be kebab-case (scss/at-function-pattern)
(scss/at-function-pattern)
src/css/_details.scss
[error] 8-8: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
src/css/_footer.scss
[error] 23-23: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
src/pages/index.module.scss
[error] 68-68: Unknown unit "x" (unit-no-unknown)
(unit-no-unknown)
src/css/_markdown.scss
[error] 16-16: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 113-113: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
src/theme/ColorModeToggle/styles.module.scss
[error] 24-24: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
src/css/variables.scss
[error] 46-46: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 166-166: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 168-168: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 171-171: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 176-176: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 189-189: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 192-192: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 213-213: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 220-220: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 229-229: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 285-285: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 296-296: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 338-338: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 348-348: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 86-86: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
[error] 259-259: Expected "Segoe" to be "segoe" (value-keyword-case)
(value-keyword-case)
[error] 259-259: Expected "UI" to be "ui" (value-keyword-case)
(value-keyword-case)
[error] 259-259: Expected "Roboto" to be "roboto" (value-keyword-case)
(value-keyword-case)
[error] 259-259: Expected "Ubuntu" to be "ubuntu" (value-keyword-case)
(value-keyword-case)
[error] 259-259: Expected "Cantarell" to be "cantarell" (value-keyword-case)
(value-keyword-case)
[error] 260-260: Expected "Noto" to be "noto" (value-keyword-case)
(value-keyword-case)
[error] 260-260: Expected "Sans" to be "sans" (value-keyword-case)
(value-keyword-case)
[error] 260-260: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 260-260: Expected "Helvetica" to be "helvetica" (value-keyword-case)
(value-keyword-case)
[error] 260-260: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
src/css/custom.scss
[error] 26-26: Expected "url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap")" to be ""https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"" (import-notation)
(import-notation)
src/theme/DocItem/Layout/styles.module.scss
[error] 57-57: Overridden property "background-color" by shorthand "background" (declaration-block-no-shorthand-property-overrides)
(declaration-block-no-shorthand-property-overrides)
🔇 Additional comments (42)
docs/sidebars/styleguide.js (1)
1-11: LGTM!docusaurus.config.js (1)
41-41: LGTM!Also applies to: 60-60, 235-237, 282-405, 415-425
static/robots.txt (1)
6-8: 🔒 Security & PrivacyDo not rely on
Disallowto enforce no-indexing.Blocking
/styleguide/prevents compliant crawlers from reading the HTMLnoindextag, so discovered URLs can still appear in search results. ServeX-Robots-Tag: noindexfor this route, or avoid deploying it publicly if it must remain internal.tsconfig.json (1)
5-6: LGTM!docs/styleguide/index.mdx (1)
1-151: LGTM!docs/styleguide/components.mdx (1)
1-285: LGTM!docs/styleguide/colors.mdx (1)
1-282: LGTM!src/css/_admonitions.scss (1)
1-140: LGTM!src/css/_back-to-top.scss (1)
1-5: LGTM!src/css/_breadcrumbs.scss (1)
1-58: LGTM!src/css/_code-blocks.scss (1)
1-44: LGTM!src/theme/PaginatorNavLink/index.tsx (1)
3-7: LGTM!src/theme/TOC/index.tsx (1)
1-81: LGTM!src/theme/TOC/styles.module.css (1)
1-38: LGTM!src/css/_feedback.scss (1)
1-80: LGTM!src/theme/DocItem/Footer/index.tsx (1)
76-142: LGTM!src/theme/DocItem/Layout/ListTreeIcon.tsx (1)
1-24: LGTM!src/theme/DocItem/Layout/index.tsx (1)
2-85: LGTM!src/theme/DocItem/TOC/Mobile/index.tsx (1)
1-10: LGTM!src/css/_pagination.scss (1)
1-47: LGTM!src/css/_search.scss (1)
1-43: LGTM!Also applies to: 55-99
src/css/_sidebar.scss (1)
1-108: LGTM!src/css/_tables.scss (1)
1-3: LGTM!Also applies to: 5-71
src/css/_tabs.scss (1)
1-22: LGTM!src/css/_utilities.scss (1)
1-46: LGTM!src/theme/EditThisPage/index.tsx (1)
3-18: LGTM!src/theme/Footer/Layout/index.tsx (1)
1-30: LGTM!src/theme/Footer/styles.module.scss (1)
1-9: LGTM!src/theme/Icon/ExternalLink/index.tsx (1)
3-10: LGTM!src/theme/MDXComponents.tsx (1)
1-29: LGTM!src/pages/index.module.scss (1)
1-1: LGTM!Also applies to: 83-83, 110-110
src/theme/Admonition/Icon/Danger.tsx (1)
1-22: LGTM!src/theme/Admonition/Icon/Info.tsx (1)
1-22: LGTM!src/theme/Admonition/Icon/Note.tsx (1)
1-23: LGTM!src/theme/Admonition/Icon/Tip.tsx (1)
1-24: LGTM!src/theme/Admonition/Icon/Warning.tsx (1)
1-22: LGTM!src/theme/Admonition/index.tsx (1)
1-25: LGTM!src/theme/CodeBlock/Content/styles.module.css (1)
17-19: LGTM!Also applies to: 40-50
src/theme/ColorModeToggle/MoonIcon.tsx (1)
6-17: LGTM!src/theme/ColorModeToggle/SunIcon.tsx (1)
6-25: LGTM!src/theme/ColorModeToggle/index.tsx (1)
1-47: LGTM!src/theme/ColorModeToggle/styles.module.scss (1)
1-41: LGTM!
| details.alert { | ||
| --details-caret-size: #{rem(16px)}; | ||
| --details-border-color: var(--ifm-color-emphasis-300); | ||
| // Inverts per theme. Caret only; the divider follows the border. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required blank line before nested comments. Stylelint rejects these comments under the repository’s scss/double-slash-comment-empty-line-before rule.
src/css/_details.scss#L8-L8: insert an empty line before the caret-color comment.src/css/_edit-this-page.scss#L4-L4: insert an empty line before the Infima-sizing comment.src/css/_footer.scss#L23-L23: insert an empty line before the heading-size comment.
🧰 Tools
🪛 Stylelint (17.14.1)
[error] 8-8: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
📍 Affects 3 files
src/css/_details.scss#L8-L8(this comment)src/css/_edit-this-page.scss#L4-L4src/css/_footer.scss#L23-L23
🤖 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 `@src/css/_details.scss` at line 8, Insert a blank line before the nested
comments in src/css/_details.scss:8-8, src/css/_edit-this-page.scss:4-4, and
src/css/_footer.scss:23-23, preserving the existing comment text and surrounding
SCSS.
Source: Linters/SAST tools
| margin-left: 0.2em; | ||
| vertical-align: baseline; | ||
| transform: rotate(-45deg); | ||
| background-color: currentColor; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use Stylelint’s required currentcolor keyword casing. CSS treats the values equivalently, but the configured value-keyword-case rule rejects currentColor.
src/css/_markdown.scss#L16-L16: changecurrentColortocurrentcolor.src/css/_markdown.scss#L113-L113: changecurrentColortocurrentcolor.src/css/_navbar.scss#L47-L47: changecurrentColortocurrentcolor.
🧰 Tools
🪛 Stylelint (17.14.1)
[error] 16-16: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
📍 Affects 2 files
src/css/_markdown.scss#L16-L16(this comment)src/css/_markdown.scss#L113-L113src/css/_navbar.scss#L47-L47
🤖 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 `@src/css/_markdown.scss` at line 16, Update the currentColor values to the
required lowercase currentcolor keyword in src/css/_markdown.scss at lines 16-16
and 113-113, and src/css/_navbar.scss at line 47-47; no other changes are
needed.
Source: Linters/SAST tools
| @use "./functions" as *; | ||
|
|
||
| // Flat, borderless, full-width tables. | ||
| // |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Remove the empty comment.
The standalone // triggers Stylelint’s scss/comment-no-empty error.
🧰 Tools
🪛 Stylelint (17.14.1)
[error] 4-4: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
🤖 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 `@src/css/_tables.scss` at line 4, Remove the standalone empty `//` comment at
the top of the stylesheet so it no longer triggers the `scss/comment-no-empty`
lint rule.
Source: Linters/SAST tools
| @use "./variables"; | ||
| @use "./utilities"; | ||
|
|
||
| // Components, roughly outermost-in. | ||
| @use "./navbar"; | ||
| @use "./sidebar"; | ||
| @use "./footer"; | ||
| @use "./breadcrumbs"; | ||
| @use "./pagination"; | ||
| @use "./search"; | ||
| @use "./markdown"; | ||
| @use "./admonitions"; | ||
| @use "./details"; | ||
| @use "./tabs"; | ||
| @use "./code-blocks"; | ||
| @use "./tables"; | ||
| @use "./feedback"; | ||
| @use "./back-to-top"; | ||
| @use "./edit-this-page"; | ||
|
|
||
| // Fonts | ||
|
|
||
| @import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C2 '`@use` "./variables"|`@import`' src/css/custom.scss
rg -n -C1 '^(:root|body)[[:space:]]*\{' src/css/variables.scssRepository: sourcenetwork/docs.source.network
Length of output: 673
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- custom.scss relevant lines ---'
sed -n '1,45p' src/css/custom.scss | nl -ba
echo '--- variables.scss rule blocks ---'
python3 - <<'PY'
from pathlib import Path
text = Path('src/css/variables.scss').read_text()
for i, line in enumerate(text.splitlines(), 1):
if line.startswith((':root {', 'body {', '`@import`', '`@use`', '`@forward`')):
print(f'{i}: {line}')
PY
echo '--- CSS imports in tracked css files ---'
rg -n '^`@import`\b|`@use`\b' src/css -g '*.scss' || true
echo '--- package scripts mentioning CSS/custom.scss ---'
if [ -f package.json ]; then
node -e 'const p=require("./package.json"); console.log(Object.entries(p.scripts||{}).map(([k,v])=>k+":"+v).join("\\n"))'
fiRepository: sourcenetwork/docs.source.network
Length of output: 246
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- custom.scss relevant lines ---'
sed -n '1,45p' src/css/custom.scss | awk '{printf "%4d %s\n", NR, $0}'
echo '--- variables.scss rule blocks ---'
python3 - <<'PY'
from pathlib import Path
text = Path('src/css/variables.scss').read_text()
for i, line in enumerate(text.splitlines(), 1):
if line.startswith((':root {', 'body {', '`@import`', '`@use`', '`@forward`', '`@mixin`')) or '`@media`' in line or '`@charset`' in line:
print(f'{i}: {line}')
PY
echo '--- CSS imports in tracked css files ---'
rg -n '^`@import`\b|`@use`\b' src/css -g '*.scss' || true
echo '--- package scripts mentioning CSS/custom.scss/docusaurus ---'
if [ -f package.json ]; then
node -e 'const p=require("./package.json"); console.log(JSON.stringify(p.scripts||{}, null, 2))'
fiRepository: sourcenetwork/docs.source.network
Length of output: 3992
Load Google Fonts before emitted CSS rules.
custom.scss includes imported SCSS modules that emit :root and body rules before the Google Fonts @import, so the stylesheet is a later stylesheet import and is ignored by browsers. Add the Google Fonts stylesheet in Docusaurus theme config/head, or self-host the fonts with @font-face.
🧰 Tools
🪛 Stylelint (17.14.1)
[error] 26-26: Expected "url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap")" to be ""https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"" (import-notation)
(import-notation)
🤖 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 `@src/css/custom.scss` around lines 4 - 26, Move the Google Fonts loading out
of custom.scss so it is available before emitted CSS rules, preferably by
configuring the stylesheet in the Docusaurus theme/head; alternatively self-host
the fonts with `@font-face`. Remove the trailing Google Fonts `@import` while
preserving the existing SCSS module imports.
| const PLUGIN_IDS = ['defradb', 'sourcehub', 'orbis', 'lensvm']; | ||
|
|
||
| // Every product's dropdown is rendered stacked in one grid cell, with only the | ||
| // active one visible. Hidden items still take part in layout, so the cell is | ||
| // sized to the longest version label of the four — the navbar doesn't shift | ||
| // when moving between products. | ||
| // | ||
| // justify-items: end keeps the trigger against the right edge of that reserved | ||
| // width, so it stays put relative to the items after it rather than leaving a | ||
| // gap that changes size per product. | ||
| export default function DocsVersionDropdownNavbarItemWrapper( | ||
| props: Props, | ||
| ): ReactNode { | ||
| const activePlugin = useActivePlugin({ failfast: false }); | ||
|
|
||
| return ( | ||
| <div | ||
| style={{ | ||
| position: 'relative', | ||
| display: 'grid', | ||
| gridTemplateColumns: '1fr', | ||
| gridTemplateRows: '1fr', | ||
| justifyItems: 'end', | ||
| }}> | ||
| {PLUGIN_IDS.map((pluginId) => { | ||
| const isActive = activePlugin?.pluginId === pluginId; | ||
| return ( | ||
| <div | ||
| key={pluginId} | ||
| style={{ | ||
| gridColumn: 1, | ||
| gridRow: 1, | ||
| visibility: isActive ? 'visible' : 'hidden', | ||
| pointerEvents: isActive ? 'auto' : 'none', | ||
| }}> | ||
| <DocsVersionDropdownNavbarItem {...props} docsPluginId={pluginId} /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C3 'docsVersionDropdown|DocsVersionDropdownNavbarItem|styleguide|PLUGIN_IDS' \
docusaurus.config.js srcRepository: sourcenetwork/docs.source.network
Length of output: 6257
Render the styleguide dropdown on its own route.
styleguide is a registered docs instance, but this wrapper filters active plugins to ['defradb', 'sourcehub', 'orbis', 'lensvm'], so /styleguide/** leaves the grid cell hidden while still reserving its width and rendering no version dropdown. Include styleguide in PLUGIN_IDS, or render a fallback/null before the grid.
🤖 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 `@src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx` around lines 9 - 44,
Update the PLUGIN_IDS list used by DocsVersionDropdownNavbarItemWrapper to
include the registered styleguide plugin ID, ensuring /styleguide/** renders its
version dropdown through the existing active-plugin grid logic.
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 11
🤖 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 `@src/css/_details.scss`:
- Line 8: Insert a blank line before the nested comments in
src/css/_details.scss:8-8, src/css/_edit-this-page.scss:4-4, and
src/css/_footer.scss:23-23, preserving the existing comment text and surrounding
SCSS.
In `@src/css/_functions.scss`:
- Around line 4-8: Rename the SCSS function stripUnit to a kebab-case name such
as strip-unit to satisfy the configured naming pattern, and update its
invocation within rem accordingly. Preserve the existing function behavior and
rem calculation.
In `@src/css/_markdown.scss`:
- Line 16: Update the currentColor values to the required lowercase currentcolor
keyword in src/css/_markdown.scss at lines 16-16 and 113-113, and
src/css/_navbar.scss at line 47-47; no other changes are needed.
In `@src/css/_search.scss`:
- Around line 45-49: Update the &-source rule within &-Hit to replace the
hardcoded white color with the existing theme-aware foreground token, preserving
the current font-family and other styling.
In `@src/css/_sidebar.scss`:
- Around line 110-114: Update the .menu__caret rule so Docusaurus’s category
expand/collapse button remains visible and interactive, removing the
display:none hiding behavior. Restyle the caret to visually match the custom
chevron indicator while preserving independent expand/collapse interaction for
linked categories.
In `@src/css/_tables.scss`:
- Line 4: Remove the standalone empty `//` comment at the top of the stylesheet
so it no longer triggers the `scss/comment-no-empty` lint rule.
In `@src/css/custom.scss`:
- Around line 4-26: Move the Google Fonts loading out of custom.scss so it is
available before emitted CSS rules, preferably by configuring the stylesheet in
the Docusaurus theme/head; alternatively self-host the fonts with `@font-face`.
Remove the trailing Google Fonts `@import` while preserving the existing SCSS
module imports.
In `@src/css/variables.scss`:
- Line 46: Update the new token stylesheet to satisfy Stylelint: remove the
empty comment at line 86, add the required blank lines around the affected
comment sections, and quote the capitalized fallback font-family identifiers
near lines 259-261 (or intentionally configure the lint rule). Preserve the
token values and existing stylesheet structure.
In `@src/pages/index.module.scss`:
- Line 68: Update the border-radius declaration in the relevant stylesheet rule
to use the valid 5px value instead of rem(5x), preserving the existing styling
while satisfying Stylelint.
In `@src/theme/DocItem/Layout/styles.module.scss`:
- Around line 54-57: Remove the invalid background-color declaration from the
stylesheet rule, leaving the existing background: none declaration to provide
the intended styling.
In `@src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx`:
- Around line 9-44: Update the PLUGIN_IDS list used by
DocsVersionDropdownNavbarItemWrapper to include the registered styleguide plugin
ID, ensuring /styleguide/** renders its version dropdown through the existing
active-plugin grid logic.
🪄 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 Plus
Run ID: 3383f49b-845e-4941-84e8-d0866f48dc42
⛔ Files ignored due to path filters (5)
static/img/icon-chevron-down.svgis excluded by!**/*.svgstatic/img/icon-chevron-right.svgis excluded by!**/*.svgstatic/img/icon-external-link.svgis excluded by!**/*.svgstatic/img/icon-github-dark.svgis excluded by!**/*.svgstatic/img/icon-github.svgis excluded by!**/*.svg
📒 Files selected for processing (83)
docs/sidebars/styleguide.jsdocs/styleguide/colors.mdxdocs/styleguide/components.mdxdocs/styleguide/index.mdxdocusaurus.config.jssrc/css/_admonitions.scsssrc/css/_back-to-top.scsssrc/css/_breadcrumbs.scsssrc/css/_code-blocks.scsssrc/css/_details.scsssrc/css/_edit-this-page.scsssrc/css/_feedback.scsssrc/css/_footer.scsssrc/css/_functions.scsssrc/css/_markdown.scsssrc/css/_navbar.scsssrc/css/_pagination.scsssrc/css/_search.scsssrc/css/_sidebar.scsssrc/css/_tables.scsssrc/css/_tabs.scsssrc/css/_utilities.scsssrc/css/custom.scsssrc/css/default-infima-variables.scsssrc/css/fonts.scsssrc/css/infima-variables.scsssrc/css/typography.scsssrc/css/variables.scsssrc/pages/index.module.scsssrc/theme/Admonition/Icon/Danger.tsxsrc/theme/Admonition/Icon/Info.tsxsrc/theme/Admonition/Icon/Note.tsxsrc/theme/Admonition/Icon/Tip.tsxsrc/theme/Admonition/Icon/Warning.tsxsrc/theme/Admonition/index.tsxsrc/theme/CodeBlock/Content/styles.module.csssrc/theme/ColorModeToggle/MoonIcon.tsxsrc/theme/ColorModeToggle/SunIcon.tsxsrc/theme/ColorModeToggle/index.tsxsrc/theme/ColorModeToggle/styles.module.scsssrc/theme/DocItem/Content/index.jssrc/theme/DocItem/Footer/index.tsxsrc/theme/DocItem/Layout/ListTreeIcon.tsxsrc/theme/DocItem/Layout/index.tsxsrc/theme/DocItem/Layout/styles.module.scsssrc/theme/DocItem/Metadata/index.jssrc/theme/DocItem/Paginator/index.jssrc/theme/DocItem/TOC/Desktop/index.jssrc/theme/DocItem/TOC/Mobile/index.jssrc/theme/DocItem/TOC/Mobile/index.tsxsrc/theme/DocItem/TOC/Mobile/styles.module.csssrc/theme/DocItem/index.jssrc/theme/DocPage/Layout/Main/index.tsxsrc/theme/DocPage/Layout/Main/styles.module.scsssrc/theme/DocPage/Layout/Sidebar/ExpandButton/index.jssrc/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.csssrc/theme/DocPage/Layout/Sidebar/index.jssrc/theme/DocPage/Layout/Sidebar/styles.module.csssrc/theme/DocPage/Layout/index.tsxsrc/theme/DocPage/Layout/styles.module.scsssrc/theme/DocPage/index.tsxsrc/theme/EditThisPage/index.tsxsrc/theme/Footer/Copyright/index.jssrc/theme/Footer/Layout/index.tsxsrc/theme/Footer/LinkItem/index.jssrc/theme/Footer/Links/MultiColumn/index.jssrc/theme/Footer/Links/Simple/index.jssrc/theme/Footer/Links/index.jssrc/theme/Footer/Logo/index.jssrc/theme/Footer/Logo/styles.module.csssrc/theme/Footer/index.tsxsrc/theme/Footer/styles.module.scsssrc/theme/Icon/ExternalLink/index.tsxsrc/theme/MDXComponents.jssrc/theme/MDXComponents.tsxsrc/theme/NavbarItem/DocsVersionDropdownNavbarItem.jssrc/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsxsrc/theme/PaginatorNavLink/index.tsxsrc/theme/TOC/index.jssrc/theme/TOC/index.tsxsrc/theme/TOC/styles.module.cssstatic/robots.txttsconfig.json
💤 Files with no reviewable changes (31)
- src/css/default-infima-variables.scss
- src/theme/DocItem/TOC/Mobile/index.js
- src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js
- src/theme/DocItem/index.js
- src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css
- src/theme/Footer/LinkItem/index.js
- src/theme/Footer/Logo/styles.module.css
- src/theme/Footer/index.tsx
- src/theme/DocPage/Layout/Main/styles.module.scss
- src/theme/MDXComponents.js
- src/css/typography.scss
- src/theme/TOC/index.js
- src/css/infima-variables.scss
- src/theme/DocItem/Metadata/index.js
- src/theme/Footer/Copyright/index.js
- src/theme/DocPage/Layout/index.tsx
- src/theme/DocItem/Content/index.js
- src/theme/DocPage/Layout/Main/index.tsx
- src/theme/Footer/Links/MultiColumn/index.js
- src/theme/DocPage/index.tsx
- src/theme/Footer/Links/index.js
- src/theme/Footer/Logo/index.js
- src/theme/DocPage/Layout/styles.module.scss
- src/theme/DocItem/Paginator/index.js
- src/theme/DocItem/TOC/Mobile/styles.module.css
- src/theme/DocItem/TOC/Desktop/index.js
- src/theme/DocPage/Layout/Sidebar/styles.module.css
- src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js
- src/theme/DocPage/Layout/Sidebar/index.js
- src/theme/Footer/Links/Simple/index.js
- src/css/fonts.scss
📜 Review details
🔇 Additional comments (42)
docs/sidebars/styleguide.js (1)
1-11: LGTM!docusaurus.config.js (1)
41-41: LGTM!Also applies to: 60-60, 235-237, 282-405, 415-425
static/robots.txt (1)
6-8: 🔒 Security & PrivacyDo not rely on
Disallowto enforce no-indexing.Blocking
/styleguide/prevents compliant crawlers from reading the HTMLnoindextag, so discovered URLs can still appear in search results. ServeX-Robots-Tag: noindexfor this route, or avoid deploying it publicly if it must remain internal.tsconfig.json (1)
5-6: LGTM!docs/styleguide/index.mdx (1)
1-151: LGTM!docs/styleguide/components.mdx (1)
1-285: LGTM!docs/styleguide/colors.mdx (1)
1-282: LGTM!src/css/_admonitions.scss (1)
1-140: LGTM!src/css/_back-to-top.scss (1)
1-5: LGTM!src/css/_breadcrumbs.scss (1)
1-58: LGTM!src/css/_code-blocks.scss (1)
1-44: LGTM!src/theme/PaginatorNavLink/index.tsx (1)
3-7: LGTM!src/theme/TOC/index.tsx (1)
1-81: LGTM!src/theme/TOC/styles.module.css (1)
1-38: LGTM!src/css/_feedback.scss (1)
1-80: LGTM!src/theme/DocItem/Footer/index.tsx (1)
76-142: LGTM!src/theme/DocItem/Layout/ListTreeIcon.tsx (1)
1-24: LGTM!src/theme/DocItem/Layout/index.tsx (1)
2-85: LGTM!src/theme/DocItem/TOC/Mobile/index.tsx (1)
1-10: LGTM!src/css/_pagination.scss (1)
1-47: LGTM!src/css/_search.scss (1)
1-43: LGTM!Also applies to: 55-99
src/css/_sidebar.scss (1)
1-108: LGTM!src/css/_tables.scss (1)
1-3: LGTM!Also applies to: 5-71
src/css/_tabs.scss (1)
1-22: LGTM!src/css/_utilities.scss (1)
1-46: LGTM!src/theme/EditThisPage/index.tsx (1)
3-18: LGTM!src/theme/Footer/Layout/index.tsx (1)
1-30: LGTM!src/theme/Footer/styles.module.scss (1)
1-9: LGTM!src/theme/Icon/ExternalLink/index.tsx (1)
3-10: LGTM!src/theme/MDXComponents.tsx (1)
1-29: LGTM!src/pages/index.module.scss (1)
1-1: LGTM!Also applies to: 83-83, 110-110
src/theme/Admonition/Icon/Danger.tsx (1)
1-22: LGTM!src/theme/Admonition/Icon/Info.tsx (1)
1-22: LGTM!src/theme/Admonition/Icon/Note.tsx (1)
1-23: LGTM!src/theme/Admonition/Icon/Tip.tsx (1)
1-24: LGTM!src/theme/Admonition/Icon/Warning.tsx (1)
1-22: LGTM!src/theme/Admonition/index.tsx (1)
1-25: LGTM!src/theme/CodeBlock/Content/styles.module.css (1)
17-19: LGTM!Also applies to: 40-50
src/theme/ColorModeToggle/MoonIcon.tsx (1)
6-17: LGTM!src/theme/ColorModeToggle/SunIcon.tsx (1)
6-25: LGTM!src/theme/ColorModeToggle/index.tsx (1)
1-47: LGTM!src/theme/ColorModeToggle/styles.module.scss (1)
1-41: LGTM!
🛑 Comments failed to post (1)
src/css/_functions.scss (1)
4-8: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Rename
stripUnitto satisfy the configured SCSS function pattern.Stylelint rejects the camelCase function name; rename it (for example,
strip-unit) and update the call at Line 8.🧰 Tools
🪛 Stylelint (17.14.1)
[error] 4-4: Expected function name "stripUnit" to be kebab-case (scss/at-function-pattern)
(scss/at-function-pattern)
🤖 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 `@src/css/_functions.scss` around lines 4 - 8, Rename the SCSS function stripUnit to a kebab-case name such as strip-unit to satisfy the configured naming pattern, and update its invocation within rem accordingly. Preserve the existing function behavior and rem calculation.Source: Linters/SAST tools
--ifm-color-primary and its shades now resolve through the brand's actual green color scale (--src-green-*) instead of --src-primary, which only hit 2.8:1 on white. Also fixes the version-banner warning fill/text (previously Infima's stock yellow) and --src-text-muted (previously a dark-mode-tuned gray reused on white). Styleguide updated to match and to fill in missing brand-var annotations.
- Introduce --site-gutter-horizontal as the single source for navbar, footer, homepage and doc-sidebar horizontal padding, applied inside each element's max-width/centered box instead of outside it, so they stay flush at every viewport width including past --root-wrapper-width. - Rework HomepageFeatures into a real CSS grid (4/2/1 columns) with gap-based spacing instead of Infima's row/col flex hack. - Fix DocSearch's light-mode search-source text (white-on-white) and stock blue accent/highlight colors to use theme tokens. - Fix sidebar category caret losing its click target, and speed up the category expand/collapse transition to match --ifm-transition-fast. - Load Google Fonts via docusaurus.config.js stylesheets instead of a render-blocking CSS @import. - Sentence-case a few admonition titles in the DefraDB docs.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
docusaurus.config.js (1)
443-447: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAvoid mutating the source sidebar array.
(item.items ?? []).reverse()mutatesitem.itemswhen it exists. Copy before reversing so repeated configuration evaluation cannot toggle Release Notes ordering.Proposed fix
- return { ...item, items: (item.items ?? []).reverse() }; + return { ...item, items: [...(item.items ?? [])].reverse() };🤖 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 `@docusaurus.config.js` around lines 443 - 447, Update reverseSidebarChangelog so the Release Notes category reverses a copied items array rather than mutating item.items; preserve the existing fallback for missing items and the current ordering behavior without altering the source sidebar data.
🤖 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 `@docs/defradb/install/deploy-config.md`:
- Line 63: Update the callout title `Disable p2p` to capitalize the protocol
acronym as `Disable P2P`, matching the surrounding documentation terminology.
In `@src/pages/index.tsx`:
- Line 63: Add an appropriate alt attribute to the img element rendering feature
images, using an empty value when decorative or feature.title when the image
conveys information not present in the card text.
- Around line 13-18: Restore the max-width constraint for the homepage by adding
the existing container class to the hero and feature-grid content wrappers in
the homepage component, ensuring they remain descendants of homeWrapper
.container and respect --root-wrapper-width. Apply the same adjustment to the
additional affected section without changing the surrounding markup behavior.
---
Nitpick comments:
In `@docusaurus.config.js`:
- Around line 443-447: Update reverseSidebarChangelog so the Release Notes
category reverses a copied items array rather than mutating item.items; preserve
the existing fallback for missing items and the current ordering behavior
without altering the source sidebar data.
🪄 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 Plus
Run ID: 157114c3-08c0-448a-8c36-43935926d0ba
📒 Files selected for processing (13)
docs/defradb/install/deploy-config.mddocs/defradb/p2p/pub-sub.mddocusaurus.config.jssrc/css/_footer.scsssrc/css/_navbar.scsssrc/css/_search.scsssrc/css/_sidebar.scsssrc/css/_utilities.scsssrc/css/custom.scsssrc/css/variables.scsssrc/pages/index.module.scsssrc/pages/index.tsxsrc/theme/DocItem/Layout/styles.module.scss
💤 Files with no reviewable changes (3)
- src/css/_utilities.scss
- src/theme/DocItem/Layout/styles.module.scss
- src/css/custom.scss
🚧 Files skipped from review as they are similar to previous changes (4)
- src/css/_navbar.scss
- src/css/_sidebar.scss
- src/css/_search.scss
- src/css/_footer.scss
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: Cloudflare Pages
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{md,mdx}
📄 CodeRabbit inference engine (CLAUDE.md)
Documentation files support both
.md(CommonMark) and.mdx(MDX) formats
Files:
docs/defradb/install/deploy-config.mddocs/defradb/p2p/pub-sub.md
docusaurus.config.js
📄 CodeRabbit inference engine (CLAUDE.md)
docusaurus.config.js: Changelog and release notes sidebar items should be automatically reversed (newest first) via thereverseSidebarChangelog()function indocusaurus.config.js
The site uses dark mode by default withrespectPrefersColorScheme: false
GitHub edit links should be configured to point to the master branch
Algolia search is configured with app IDN3M9YBYYQY
Files:
docusaurus.config.js
src/{theme,css,code-theme}/**/*.{js,jsx,ts,tsx,scss,css}
📄 CodeRabbit inference engine (CLAUDE.md)
Custom theme components use Docusaurus swizzling with custom footer components, color mode toggle, SCSS styling in
/src/css/custom.scss, and custom code theme in/src/code-theme/code-theme.js
Files:
src/css/variables.scss
🪛 Stylelint (17.14.1)
src/css/variables.scss
[error] 277-277: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
🔇 Additional comments (18)
src/css/variables.scss (8)
277-277: Duplicate: add the required blank line before this comment.Stylelint still reports
scss/double-slash-comment-empty-line-beforeat Line 277. Insert an empty line before the// Shared gutter...comment. This repeats the existingvariables.scsslint finding from the previous review.Source: Linters/SAST tools
1-104: LGTM!
106-167: LGTM!
168-224: LGTM!
230-276: LGTM!
278-356: LGTM!
358-362: LGTM!
364-393: LGTM!docusaurus.config.js (7)
23-44: 🔒 Security & PrivacyConfirm that Google-hosted fonts are permitted.
These eager requests send client metadata to
fonts.googleapis.comandfonts.gstatic.com; verify this complies with the site’s privacy policy and CSP. If third-party font requests are not allowed, self-host the fonts.
59-63: LGTM!
82-82: LGTM!
259-259: LGTM!
304-409: LGTM!
410-427: LGTM!
448-452: LGTM!src/pages/index.module.scss (1)
5-5: LGTM!Also applies to: 60-74, 81-91, 101-101, 122-129
docs/defradb/install/deploy-config.md (1)
47-47: LGTM!docs/defradb/p2p/pub-sub.md (1)
114-114: LGTM!
| <div className={styles.heroContent}> | ||
| <div className={styles.heroText}> | ||
| <h1 className={styles.heroTitle}>Source Network Developer Hub</h1> | ||
| <p className={styles.heroSubTitle}>Your guide to building with the Source Network stack. <br />Get started, explore the docs, and discover the power of distributed data management.</p> | ||
| </div> | ||
| <div className={styles.heroImageContainer}> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Restore the homepage max-width container.
The new hero and feature-grid markup no longer contains a .container descendant, while src/pages/index.module.scss applies the configured max-width only through .homeWrapper .container (Lines 7-9). These sections therefore expand to the viewport instead of respecting --root-wrapper-width. Add the container class to the new content wrappers or move the max-width rule to .homeWrapper.
Also applies to: 60-60
🤖 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 `@src/pages/index.tsx` around lines 13 - 18, Restore the max-width constraint
for the homepage by adding the existing container class to the hero and
feature-grid content wrappers in the homepage component, ensuring they remain
descendants of homeWrapper .container and respect --root-wrapper-width. Apply
the same adjustment to the additional affected section without changing the
surrounding markup behavior.
david-on-github
changed the title
ribiza
left a comment
ribiza
left a comment
There was a problem hiding this comment.
This styleguide is a fantastic reference to have. Two broader points:
- it would be even more useful if the raw md was provided before/after the rendered result, because otherwise one has to browse through the source md file to see how something is done, after assessing that yes, what I'm seeing in this page is the output I'd like.
- please don't break text at 80char as we do with code. Rather, let lines be long and use soft-wrap in editor :)
| : The definition of that term. | ||
|
|
||
| Another term | ||
| : Its definition. |
There was a problem hiding this comment.
These don't seem to get parsed into anything special.
|
|
||
| <head> | ||
| <meta name="robots" content="noindex, nofollow" /> | ||
| </head> |
There was a problem hiding this comment.
As there already is a catch-all rule for /styleguide/* in static/_robots.txt, what extra purpose do these play?
There was a problem hiding this comment.
It's for defense, to ensure it doesn't get picked up.
Fallback in case any crawler or bots ignore a rule or get through.
|
|
||
| ```` | ||
| ```go {2-3} | ||
| ```` |
There was a problem hiding this comment.
While this is supported syntax, it's my least favorite, as it quickly gets impractical for examples that are longer than a handful of lines. Other options:
//highlight-next-linefor single lines//highlight-(start|end)for chunks
The comment syntax should match the block language (//, or #, etc)
| </div> | ||
| ); | ||
|
|
||
| export const Swatches = ({ names }) => ( |
There was a problem hiding this comment.
praise: a neat way of exposing them! 🤸
| </div> | ||
| ); | ||
|
|
||
| Every colour-valued custom property from `src/css/variables.scss`, resolved |
There was a problem hiding this comment.
It took me a while to understand this sentence.
| Every colour-valued custom property from `src/css/variables.scss`, resolved | |
| Every colour-valued custom property from `src/css/variables.scss`. Properties are resolved _live_, so toggling the theme ... |
There was a problem hiding this comment.
Yeah, that is weird language. Updated the whole page to be more clear.
|
|
||
| Where a token is an alias onto a brand variable, the target is noted beneath | ||
| it with a `↳`. Some resolve differently per theme, written as `light / dark`; | ||
| a side written `—` isn't aliased there — it's either an Infima default we |
There was a problem hiding this comment.
I can infer what this means from later content, but I don't understand this sentence
|
|
||
| Infima maps `.alert--secondary` to `:::note`, `--success` to `:::tip` and | ||
| `--warning` to `:::warning`, so the families below are what the admonition | ||
| variants actually resolve through. Info shares tip's fill. |
| /* An expanded block can run well past the viewport, leaving the control | ||
| somewhere off-screen. Sticky keeps it at the bottom edge until the end of | ||
| the block scrolls into view, then it settles into place. Needs an opaque | ||
| background, since it now sits over the code rather than below it. */ |
| custom element fetches project data as soon as it connects, | ||
| regardless of whether `project` is set, so mounting it with an | ||
| empty ID always 404s. */} | ||
| {process.env.PUSHFEEDBACK_PROJECT_ID && <FeedbackWidget />} |
There was a problem hiding this comment.
I'm not sure about this. It will 404 only on localhost, as the env var is set on staging deployments, and we lose the preview on localhost.
There was a problem hiding this comment.
I see both ways, I don't see harm in letting it show, and it also feels odd to let it pass through intentionally being able to fail if not set. I agree, we can let it through, and can always change it if it becomes bothersome.
|
|
||
| // The "On this page" collapsible shown above the title on narrow viewports is | ||
| // deliberately not rendered. Returning null rather than hiding it with CSS | ||
| // keeps TOCCollapsible and its collapse machinery out of the tree entirely. |
There was a problem hiding this comment.
What's the reasoning for this? As I understand ToCs will be entirely unavailable on mobile, but there's value for people to be able to get a glimpse of what a page contains just by looking at section titles.
There was a problem hiding this comment.
Correct, I noticed that quite a lot of docs don't actually include the page contents sidebar for mobile.
And I wasn't overly fond of the default docusaurus select dropdown on every page being so prominent above the title.
I think a nice alternative option could be to add a minimal dropdown like this. wdyt?
There was a problem hiding this comment.
I'm happy with a dropdown like that :)
| // only starts fetching once the bundle that contains it has downloaded). | ||
| stylesheets: [ | ||
| { | ||
| href: "https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap", |
There was a problem hiding this comment.
A question for us is whether we can avoid relying on google fonts at all, and thus avoid their tracking.
| [ | ||
| "@docusaurus/plugin-content-docs", | ||
| { | ||
| /** @type {Partial<import('@docusaurus/plugin-content-docs').PluginOptions>} */ |
There was a problem hiding this comment.
This was added to satisfy the type check error on the sidebarItemsGenerator function. There is a // @ts-check at the top of this file, from when it was generated I suppose. My preference would be to convert the config to TS entirely.
> docs.source.network@0.0.0 typecheck
> tsc
docusaurus.config.js:318:39 - error TS7031: Binding element 'defaultSidebarItemsGenerator' implicitly has an 'any' type.
318 async sidebarItemsGenerator({ defaultSidebarItemsGenerator, ...args }) {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 1 error in docusaurus.config.js:318
There was a problem hiding this comment.
I think we could also drop the function entirely. It was there for old release notes, but those are not there anymore and I don't expect us to make them available there again in the future. We can revise that conversation as our release strategy consolidates in a month or two.
|
Clicking on the version picker in the header when no dropdown is available results in the page being scrolled to the top, whereas nothing should happen. |
Co-authored-by: Stefano <stefano@source.network>
Mobile lost its table of contents when the ToC column was hidden below 1200px. Bring it back as a button on the breadcrumbs row that opens a dropdown, rather than the theme's accordion, which pushes the article down when opened. The button is fixed rather than sticky: a sticky element can't leave its parent's box, and the breadcrumbs row is one line tall. Out of flow, it reserves neither width nor height, so the row now holds both explicitly — otherwise a long trail runs underneath it, and on pages where the one-crumb trail is hidden the title rises into its corner. Other fixes in the same area, all variations on the theme putting navbar elements out of flow so nothing pushes the brand around: - Mobile search sat flush against the edge: the theme pins it with --ifm-navbar-padding-horizontal, which is 0 here since the gutter lives on .navbar__inner. - The logo ran under the search icon, and in the sidebar panel it pushed the theme toggle and close button off the right edge. - The floating feedback button painted over the open sidebar: its z-index defaults to 300 against the navbar's 200. Restyle the mobile sidebar menu to match the desktop one, which was scoped to .main-wrapper and so never applied there: text-only hover and active states, roomier rows, quieter carets, and the same caret sizing for both the doc categories and the version picker, which draw theirs on different elements. The back button loses its full-bleed grey band, and its "←" moves out of the translated string into a caret matching the rows below. Also: - Feedback widget reads its project ID from customFields; process.env is Node-only, so the reference in browser code was always undefined and disagreed with the server render. - Version picker no longer scrolls to the top when clicked with a single version available, and drops its hover affordances there. - Colour toggle no longer renders both icons with JS disabled. - Danger admonitions alias onto --src-red like the other variants. - Menu and close icons swapped for their Lucide equivalents. - Styleguide: prose unwrapped to one line per paragraph, highlighting demonstrated with magic comments, :::danger documented, and the definition list dropped since MDX doesn't render one.
reverseSidebarChangelog only reorders a category labelled "Release Notes", and no sidebar contains one: the sole candidate directory, docs/defradb/release notes/, holds a _category_.json and no docs, so Docusaurus never renders it. DefraDB's sidebar is hand-written anyway, and its one autogenerated block is scoped to references/ — the generator that called this could not have reached the category even if it had docs in it. The built output contains no match for the label at all. With the generator gone the option objects hold no callbacks, so the @type casts that were there to type its destructured parameter are removed too, along with the parentheses they required. Correct the CLAUDE.md sidebar section while here: it described the reordering as active, and listed defraSidebar as autogenerated from sidebars.js when it is written by hand in docs/sidebars/defra.js.
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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 `@CLAUDE.md`:
- Around line 60-62: Update the sidebar documentation in CLAUDE.md to include
docs/sidebars/styleguide.js and describe its styleguide sidebar, replacing the
inaccurate “two files” statement while preserving the existing descriptions of
the other sidebar sources.
In `@src/css/_sidebar.scss`:
- Line 157: Remove the empty `//` comment at line 157 in the sidebar stylesheet,
and update the color keyword at line 197 to lowercase `currentcolor` to satisfy
Stylelint’s configured keyword-case rule.
In `@src/theme/DocItem/TOC/Mobile/index.tsx`:
- Around line 35-38: Update handleKeyDown so pressing Escape closes the panel
and restores focus to the TOC toggle button. Add and attach a ref to the toggle,
then focus that element after setOpen(false), preserving existing behavior for
other keys.
In `@src/theme/DocItem/TOC/Mobile/styles.module.scss`:
- Around line 3-7: Fix comment-spacing violations in the stylesheet by adding
the required blank lines before the comments at the referenced locations and
ensuring the empty comment on line 4 follows the project’s spacing rules.
Preserve all existing styles and comment content.
🪄 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 Plus
Run ID: dedc191e-f73a-4208-9682-bba2da143142
📒 Files selected for processing (25)
CLAUDE.mddocs/defradb/install/deploy-config.mddocs/styleguide/colors.mdxdocs/styleguide/components.mdxdocs/styleguide/index.mdxdocusaurus.config.jsi18n/en/code.jsonsrc/css/_admonitions.scsssrc/css/_breadcrumbs.scsssrc/css/_markdown.scsssrc/css/_navbar.scsssrc/css/_search.scsssrc/css/_sidebar.scsssrc/css/_tabs.scsssrc/css/variables.scsssrc/theme/ColorModeToggle/index.tsxsrc/theme/ColorModeToggle/styles.module.scsssrc/theme/DocItem/Footer/index.tsxsrc/theme/DocItem/Layout/index.tsxsrc/theme/DocItem/Layout/styles.module.scsssrc/theme/DocItem/TOC/Mobile/index.tsxsrc/theme/DocItem/TOC/Mobile/styles.module.scsssrc/theme/Icon/Close/index.tsxsrc/theme/Icon/Menu/index.tsxsrc/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx
💤 Files with no reviewable changes (1)
- src/css/_admonitions.scss
🚧 Files skipped from review as they are similar to previous changes (2)
- src/theme/ColorModeToggle/index.tsx
- docs/defradb/install/deploy-config.md
📜 Review details
🧰 Additional context used
📓 Path-based instructions (3)
src/theme/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Implement customized Docusaurus theme components, such as the footer and color-mode toggle, under
src/theme/using Docusaurus swizzling.
Files:
src/theme/Icon/Close/index.tsxsrc/theme/Icon/Menu/index.tsxsrc/theme/DocItem/Layout/index.tsxsrc/theme/DocItem/TOC/Mobile/index.tsxsrc/theme/DocItem/Footer/index.tsxsrc/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (CLAUDE.md)
docs/**/*.{md,mdx}: Store product documentation under the corresponding/docs/{defradb,sourcehub,orbis,lensvm}/directory, organized into onboarding, concepts, guides, references, and release-note sections as applicable.
Documentation files may use either CommonMark Markdown (.md) or MDX (.mdx).
Files:
docs/styleguide/index.mdxdocs/styleguide/components.mdxdocs/styleguide/colors.mdx
docusaurus.config.{js,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Configure Docusaurus dark mode by default with
respectPrefersColorScheme: false.
Files:
docusaurus.config.js
🪛 Stylelint (17.14.1)
src/theme/DocItem/TOC/Mobile/styles.module.scss
[error] 28-28: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 68-68: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 73-73: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
[error] 4-4: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
src/css/_sidebar.scss
[error] 157-157: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
[error] 197-197: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
src/css/variables.scss
[error] 144-144: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
🔇 Additional comments (15)
src/theme/DocItem/Footer/index.tsx (1)
90-94: Retain the local feedback-widget preview.Returning
nullwhen the project ID is absent removes the localhost preview discussed previously; the wrapper comment at Lines 162-164 also no longer matches this behavior.src/theme/ColorModeToggle/styles.module.scss (1)
44-49: LGTM!src/theme/Icon/Close/index.tsx (1)
1-31: LGTM!src/theme/Icon/Menu/index.tsx (1)
1-32: LGTM!src/theme/DocItem/Layout/index.tsx (1)
59-87: LGTM!src/theme/DocItem/Layout/styles.module.scss (1)
3-85: LGTM!src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx (1)
13-13: Includestyleguidein the desktop plugin list.The desktop map still excludes the registered
styleguideplugin, so its version picker remains absent on/styleguide/**. This duplicates the prior unresolved finding.docusaurus.config.js (1)
257-259: LGTM!Also applies to: 304-318, 319-341, 342-364, 365-386, 393-409
i18n/en/code.json (1)
1-6: LGTM!docs/styleguide/colors.mdx (1)
44-50: LGTM!Also applies to: 61-61, 95-101, 134-134, 152-152, 170-176, 192-195, 230-230
docs/styleguide/components.mdx (1)
13-16: LGTM!Also applies to: 24-24, 41-46, 56-56, 70-70, 102-102, 119-145, 179-179, 238-238, 273-273
docs/styleguide/index.mdx (1)
12-16: LGTM!Also applies to: 30-38, 42-45, 64-76, 112-112
src/css/_markdown.scss (1)
61-65: LGTM!src/css/variables.scss (1)
144-144: Stylelint spacing issue is already tracked.The comment-spacing violation at Line 144 is covered by the existing stylesheet Stylelint finding.
src/css/_breadcrumbs.scss (1)
49-51: 🎯 Functional CorrectnessCheck the responsive breadcrumb layout.
Inspect whether
flex-shrink: 0on.breadcrumbs__item--activeprevents a long current-page link/truncate item from fitting below 1200px and interfering with the mobile TOC/control area.
|
|
||
| // Infima draws these at 2rem, which reads heavy against 15px labels. Kept at | ||
| // full strength — at this size it's faint rather than loud. | ||
| // |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the remaining Stylelint errors.
Line 157 is an empty // comment, and Line 197 must use currentcolor to satisfy the configured keyword-case rule.
Proposed fix
- //
// Two selectors because the two kinds of expandable row draw their caret
@@
- background-color: currentColor;
+ background-color: currentcolor;Also applies to: 197-197
🧰 Tools
🪛 Stylelint (17.14.1)
[error] 157-157: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
🤖 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 `@src/css/_sidebar.scss` at line 157, Remove the empty `//` comment at line 157
in the sidebar stylesheet, and update the color keyword at line 197 to lowercase
`currentcolor` to satisfy Stylelint’s configured keyword-case rule.
Source: Linters/SAST tools
| // Paired with the .sidebar column in DocItem/Layout, which takes over at 1200px. | ||
| // | ||
| // Fixed, not sticky: a sticky element is confined to its parent's box, and the | ||
| // parent here is a one-line breadcrumbs row, so it would scroll away with it. | ||
| // Fixed positions against the viewport, which is what keeps it in reach. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the reported Stylelint comment-spacing violations.
Line 4 is an empty comment; Lines 28, 68, and 73 need the required preceding blank line.
Also applies to: 28-30, 68-70, 73-75
🧰 Tools
🪛 Stylelint (17.14.1)
[error] 4-4: Unexpected empty comment (scss/comment-no-empty)
(scss/comment-no-empty)
🤖 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 `@src/theme/DocItem/TOC/Mobile/styles.module.scss` around lines 3 - 7, Fix
comment-spacing violations in the stylesheet by adding the required blank lines
before the comments at the referenced locations and ensuring the empty comment
on line 4 follows the project’s spacing rules. Preserve all existing styles and
comment content.
Source: Linters/SAST tools
The mobile search was position: absolute, reserving no width, which is what every workaround around it was compensating for — the flush gutter, the logo running underneath, the padding on .navbar__inner. Eject Navbar/Search without that rule and it becomes an ordinary flex child; the workarounds go with it. Eject Navbar/Content too, since it hardcodes the sidebar toggle as the first item on the left. The three controls now sit together: search, theme, menu on mobile, with flex order putting the search last on desktop, so one DOM order serves both. Both ejects carry their upstream stylesheets verbatim minus the one rule each that was in the way — Content's still hides the colour toggle at desktop widths and keeps the cascade-layers fix. The three read as one set: same size, same muted token, no boxes, and a gap on the container rather than per-item margins. Their glyphs are all Lucide now, the search one masked over DocSearch's own so the whole button collapses to an icon at 996px, where the theme swaps to the mobile navbar — it was collapsing at 996 but only dropping its placeholder and keys at 768, which left the field's contents crushed into an icon in between. Green was doing two jobs: Infima paints a dropdown's current item exactly like a hovered one, so "this is your version" and "your cursor is here" were the same fill and colour. The current version is now marked by weight and a check, and the accent belongs to hover alone — on the version dropdown, the markdown button and its menu, and the feedback button, whose icon is stroked from a custom property rather than currentColor and so needs the variable overridden to follow. Contrast, all measured against the surface each sits on: the search placeholder came in brighter than body text at 12.6:1 and the ⌘K keys were a border tone at 1.6:1 dark and 1.3:1 light. Both now use the shared muted token. The Open Markdown button faded its label and border together through one opacity, so raising the border did nothing until the two were split onto their own tokens. Also: the mobile sidebar spans the full width rather than 83vw, and the inline feedback thumbs opt out of the floating button's border, which reached them by way of the shared custom element.
The mobile panel has two menus: the primary one lists navbar items, the secondary one is the current product's doc sidebar. The version picker is a navbar item, so it sat among the four products despite only ever applying to the one whose docs you're already reading. Filter it out of the primary menu and render it at the top of the secondary, under the back button, with a rule dividing it from the doc list. Marking the current version there needed the same change made for the desktop dropdown: Infima styles a dropdown's active item exactly like a hovered one, so state and affordance were the same green. Weight and a check mark instead, keyed on the picker's own class so the doc tree keeps its own treatment. Two behaviours the theme gets wrong for this particular dropdown: - It labels the mobile trigger "Versions" once a product has more than one, discarding the only detail worth reading. That's a single line in DocsVersionDropdownNavbarItem, so the wrapper becomes an eject and the label is the displayed version at every width. Passing the label in from outside doesn't work — three approaches compiled cleanly and came back empty at runtime. - It expands any dropdown containing an active item. Every version item points at this same page in its own version, so the current one always matches and the picker was pinned open. It opts out in the ejected mobile dropdown; every other dropdown keeps upstream behaviour. The eject also has to destructure its own options rather than spreading them onward, or React puts dropdownItemsBefore and friends on the DOM node as attributes and warns about it. Also: a bigger caret on the Open Markdown button.
Search, theme and menu were 28px boxes — past the 24px minimum but small for a thumb at the top of a phone. They're 34px now, the same box as the mobile ToC button minus its border, with a small gap between them since 34px leaves less clear space than the larger sizes did. The glyphs stay 18px throughout: the box is invisible on these, so its size and their appearance are independent. The toggle's margins go with it, Infima's included — it's the last item in the row, and the half-rem it carries on the right held it off the navbar's gutter edge. Also lift the logo's cap into --site-logo-max-width. The class is shared by the navbar and the mobile sidebar header, which are different widths, so the value wants to be settable per context rather than hardcoded.
Padding and size already agreed; line-height and weight didn't. The row is a <button> sitting outside the .menu container, so it inherits neither the 1.25 Infima puts on .menu__link nor the 400 the menu block sets — falling back to the body's 1.65 and, since Infima styles it as a button, --ifm-button-font-weight. That made it six pixels taller and visibly heavier than every row under it. Anything else added to that header will need the same treatment: being outside .menu, it inherits none of the menu's type.
Reading the page told you what a thing looks like but not how to write it, so every example needed a trip to the source file. A `:::demo` container now renders its contents and then, in a collapsed toggle beneath, the markdown that produced them. The source is sliced out of the original file by the children's position offsets rather than re-serialised from the AST, so it's character for character what the author wrote: nested directives, JSX and code blocks included. That last one retires the hand-written duplication in components.mdx, where every code block variant was preceded by a literal ```` block spelling out its fence — and it does what that couldn't, since magic comments are stripped from a rendered block but survive in the sliced source. Grouped where several examples share a heading: one toggle for all six admonitions, one for both details blocks, one for the five language samples. Headings stay outside demos — Docusaurus extracts the table of contents before user remark plugins run, so anything wrapped disappears from it. Scoped to the styleguide docs instance; product docs never see the directive. Cost is ~90KB of HTML across two internal noindex pages, with the JS and CSS bundles byte-identical. While the code block section was open: document the metastring properly. The collapse rules were only in the source (`collapse`, `noCollapse`, `result` collapsing itself past 12 lines, `expanded` needing a block that collapses), and three of them had no example. Now a table of every option and demos for the ones that were missing. Also in the styleguide copy: plainer language in the colors intro, which a reviewer couldn't parse; the emphasis ramp shows its per-theme targets instead of nothing, since the `light / dark` notation handles the inversion fine; "code block" rather than "fence"; and no em dashes.
Every page opened connections to fonts.googleapis.com and fonts.gstatic.com, handing Google the reader's IP, user agent and referring page. Fontsource ships both families as variable packages, so they come from our own origin now: the stylesheet link and both preconnects are gone from the config, and the font CSS arrives through clientModules, which was an empty array. The imports are the opsz axis rather than the barrel file, matching what the old Google URL asked for (ital,opsz,wght). Each face declares all seven subsets with unicode-range, so a browser fetches only what the page needs: 166 KB of latin against 545 KB sitting unrequested in the deploy. Family names become "Inter Variable" and "Funnel Display Variable" — what the packages declare. The plain names fall through to system-ui with no error anywhere, which is the failure mode to remember here. Cloudflare serves these from the edge like anything else in the build, with a matching immutable rule in _headers since Fontsource emits content-hashed filenames. Separately, in the same area: every DocSearch colour variable now resolves to one of ours. It defaulted to its own palette for the ones we never set — a lavender-grey on labels, icons and keycaps — and kept blue tints inside three shadows and the light-mode keycap gradient, which is why they read as off-theme. The no-results illustration is hidden; it's a stock graphic in that same palette.
Escape closed the mobile ToC but left focus on a panel that no longer existed, dropping the reader to the top of the document; it goes back to the toggle now. The four product marks on the homepage rendered as bare <img>, so a screen reader read out the filename — they're decorative, since each card's heading names the product, so alt="". Dropped a dead rule while checking a third finding: the homepage capped its width through `.homeWrapper .container`, but the page renders no such element. The cap it was supposed to provide already comes from .main-wrapper in _utilities.scss, one level up, so the rule was doing nothing and needed removing rather than replacing. Deduped the base font stack while the file was open: Segoe UI appeared twice and sans-serif twice, with BlinkMacSystemFont stranded after the first generic, where nothing could reach it. The rest of the findings were about Stylelint rules, and there's no Stylelint in this project — no config, no dependency, no script. The underlying claims don't hold either: the "empty comments" are paragraph breaks inside comment blocks, and currentColor is the spelling the CSS spec uses and this codebase uses throughout.
It was ignored, so every deploy resolved dependencies afresh from the ranges in package.json rather than from what was tested locally. A patch release anywhere in the tree could change a build with no commit behind it, and `npm ci` wasn't available to CI at all, since it needs a lockfile to run. Committing it also carries the integrity hashes, which is what makes a dependency swap visible in review.
| <img src={colorMode === 'light' ? feature.imageLight : feature.image} /> | ||
| <img | ||
| src={colorMode === 'light' ? feature.imageLight : feature.image} | ||
| alt="" |
There was a problem hiding this comment.
How better is it to have an empty alt than no alt at all?
There was a problem hiding this comment.
An empty alt tag is a11y compliant. It marks it as a decorative and skips over it for screen readers.
2 participants
Restructures the site's CSS into partials with a token system (theme components converted to TS along the way), and uses that pass to fix a batch of visual/contrast/layout bugs. Adds mobile navigation that the layout had been missing, self-hosts the fonts, and adds an internal
/styleguidepage for reviewing tokens and components. See hereStructure
variables.scss: brand color scales (--src-green-*,--src-gray-*) sourced from the brand_navbar,_sidebar,_footer,_admonitions,_tables,_details,_code-blocks,_search,_tabs,_feedback, etc.), each@used fromcustom.scss.remusage across partials.docs/styleguide(noindex, not linked in nav) — every color/spacing token rendered as a live swatch, for checking contrast.Mobile navigation
The ToC column is hidden below 1200px, which left mobile with no way to see a page's headings.
order, so one DOM order serves both.position: absolute, so it reserved no width — the cause of the flush-to-edge gutter, the logo running underneath it, and several padding workarounds. EjectedNavbar/Searchwithout that rule and the workarounds went with it..main-wrapperand so never applied there: text-only hover/active states, roomier rows, quieter carets.Styleguide
:::democontainer (src/remark/demo.ts, scoped to the styleguide docs instance) renders an example and then, in a collapsed toggle beneath, the markdown that produced it — sliced out of the source file by position offsets, so it's character-for-character what was written. Retires the hand-written duplication incomponents.mdx, and shows magic comments, which are stripped from rendered blocks and can't be demonstrated any other way.title,{2-3},showLineNumbers,valid,invalid,result,collapse,noCollapse,expanded, and the 12-line auto-collapse threshold. Three of those had no example on the page.Fixes
--ifm-color-primary(light mode) was 2.8:1 on white; now resolves through the brand's actual green scale at 5:1+. Same for the version-banner warning fill/text (was Infima's stock yellow) and--src-text-muted(was a dark-mode-tuned gray reused on white).--root-wrapper-width, butdrifted apart on wide screens. Unified under one
--site-gutter-horizontaltoken applied consirow/col--3flex hack (mobile stacking was an accidental side effect of min-content overflow, gaps were justmargin-bottom) with a real CSS grid — 4/2/1 columns withgap, card heights now stay aligned regardless of description length.color: white(invisible on white); primary/highlight colors were falling back to DocSearch's stock blue instead of the site's brand green. Every DocSearch color variable now resolves to one of ours — the unset ones fell back to its own palette (a lavender-grey on labels, icons and keycaps), and blue tints survived inside three shadows and the light-mode keycap gradient.@fontsource-variable/inter,@fontsource-variable/funnel-display) instead of loaded from Google, removing the third-party requests that handed every reader's IP, user agent and referring page tofonts.googleapis.com/fonts.gstatic.com. This also fixes the ordering bug that prompted it: CSS requires@importbefore all other rules, and the partials above it emitted:rootrules first, so browsers were dropping the stylesheet. 166 KB of latin subsets served from our own edge, with an immutable cache rule in_headers.process.env.PUSHFEEDBACK_PROJECT_IDin browser code, which is Node-only — alwaysundefinedon the client, and disagreeing with the server render. Now passed throughcustomFields.data-themeis set by an inline script, so an[data-theme="light"]rule matched nothing.:::dangerwas the only admonition family not brand-aliased; now on--src-redlike the rest.alton the homepage product marks, Escape returns focus to the ToC toggle, mobile header controls sized as touch targets, and the ⌘K hint raised from 1.6:1 to 9.5:1.it.
background-color: none, arem(5x)typo, sentence-casing on a couple of DefraDB admonition titles.Notes for reviewers
package-lock.jsonis gitignored but tracked (.gitignore:3). This branch adds two dependencies, so if the Pages build runsnpm ciit will fail on a lockfile that doesn't list them. Worth confirming the build command before merge.Navbar/Content,Navbar/Search,Navbar/MobileSidebar/{PrimaryMenu,SecondaryMenu},NavbarItem/DocsVersionDropdownNavbarItem,NavbarItem/DropdownNavbarItem/Mobile, plusIcon/MenuandIcon/Close. Each carries a comment naming the upstream line it changes and why; they won't pick up upstream navbar changes automatically.src/remark/demo.tsneedsnpm run clearbefore a rebuild — the MDX cache key covers the markdown and loader options, not a plugin's own source, so pages otherwise recompile from cache.:::demo: Docusaurus extracts the table of contents before user remark plugins run, so anything wrapped disappears from it.