perf(website): optimize font loading and asset organization

[yorukot]

• Replace font blocking load with preload strategy for better performance
• Add noscript fallback for Google Fonts
• Create symlink to centralize asset management (git-assets -> ../../../asset)
• Update documentation image paths to use local assets
• Remove unused logo-titled.svg and contributors.svg files
• Add font fallback stack for better compatibility

Summary by CodeRabbit

• Performance
  • Preload IBM Plex Mono stylesheet for faster rendering, with a noscript fallback for non-JS environments.
• Documentation
  • Replaced external GitHub image links with local asset paths across Overview, Getting Started tutorial, and Theme List pages.
  • Clarified SPF Shell‑Mode note to emphasize use for more complex file manipulations.
• Style
  • Expanded monospace font stack to include common fallbacks for improved consistency.
• Chores
  • Added local asset references to support updated image paths.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
superfile	Ready	Preview	Comment	Sep 22, 2025 3:19am

[coderabbitai]

Walkthrough

Updates website asset references from external URLs to local paths across docs, adds a git-assets mapping, adjusts CSS font stack, and changes Astro head config to preload IBM Plex Mono with a noscript fallback. No public API changes.

Changes

Cohort / File(s)	Summary
Head preload for font stylesheet website/astro.config.mjs	Switches IBM Plex Mono link to rel="preload" with as="style" and onload to apply stylesheet; adds noscript fallback link.
Font stack update website/src/styles/custom.css	Expands --sl-font stack to multiple monospaced fallbacks while keeping IBM Plex Mono primary.
Docs: image URLs → local assets website/src/content/docs/overview.md, website/src/content/docs/getting-started/tutorial.md, website/src/content/docs/list/theme-list.md	Replaces GitHub raw image URLs with relative ../../../assets/git-assets/... paths; minor note expansion in tutorial about SPF Shell-Mode usage.
Assets mapping file website/src/assets/git-assets	Adds a single line: ../../../asset.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor Browser as Browser
  participant Head as Document Head
  participant Preload as Preload Link
  participant Stylesheet as Stylesheet Resource

  Note over Head,Preload: Insert preload for IBM Plex Mono (as="style")
  Browser->>Head: Request page
  Head->>Preload: Add <link rel="preload" as="style" onload="this.rel='stylesheet'">
  Preload-->>Head: onload
  Head->>Preload: rel -> "stylesheet"
  Preload->>Stylesheet: Apply styles

  alt JS disabled (noscript)
    Note over Head,Stylesheet: noscript fallback loads stylesheet directly
    Browser->>Stylesheet: Load via <noscript><link rel="stylesheet"></noscript>
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• SPF Prompt tutorial and fixes #814 — Also edits SPF prompt documentation, overlapping the tutorial updates.
• Write prompt tutorial, rename prompt mode to spf mode , add develop branch in github workflow, show_panel_footer_info flag #815 — Related edits to tutorial and prompt/image updates that align with this PR.

Suggested labels

documentation

Poem

Thump goes my paw on the build so bright,
Preload the fonts, let pages take flight.
Images hop home from remote to near,
A cozy warren of assets appears.
With mono stacks neat and snug in a row,
This bunny approves—now watch it go! 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "perf(website): optimize font loading and asset organization" is concise and accurately captures the PR's main changes—switching to a preload + noscript font strategy and reorganizing assets/paths—so it clearly reflects the changeset's focus.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch website/performance

---

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

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

website/src/content/docs/overview.md (1)

9-9: Add descriptive alt text for accessibility (MD045).

Current image lacks alt text. Use a concise description.

Apply this diff:

-![](../../assets/git-assets/demo.png)
+![Superfile demo UI](../../assets/git-assets/demo.png)

website/src/assets/git-assets (1)

1-1: Double-check naming consistency: asset vs assets.

This symlink points to ../../../asset (singular), while many projects (and your docs paths) use assets. If the canonical directory is actually assets/, update the target; otherwise ensure doc references and tooling consistently expect asset/.

website/astro.config.mjs (1)

72-81: Excellent font loading optimization strategy!

The preload strategy with JavaScript-based rel switching and noscript fallback is a modern best practice for Google Fonts. This approach eliminates Flash of Invisible Text (FOIT) while maintaining optimal loading performance.

Minor enhancement suggestion: Consider adding &display=swap to the Google Fonts URL for additional browser compatibility, as this provides native font-display support:

 {
   tag: 'link',
   attrs: {
     rel: 'preload',
-    href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap',
+    href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap',
     as: 'style',
     onload: "this.onload=null;this.rel='stylesheet'",
   },
 },
 {
   tag: 'noscript',
-  content: '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap">',
+  content: '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap">',
 },

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 89911f6 and ffd2b0b.

⛔ Files ignored due to path filters (2)

• asset/contributors.svg is excluded by !**/*.svg
• website/src/assets/logo-titled.svg is excluded by !**/*.svg

📒 Files selected for processing (6)

• website/astro.config.mjs (1 hunks)
• website/src/assets/git-assets (1 hunks)
• website/src/content/docs/getting-started/tutorial.md (2 hunks)
• website/src/content/docs/list/theme-list.md (1 hunks)
• website/src/content/docs/overview.md (1 hunks)
• website/src/styles/custom.css (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: lazysegtree
PR: yorukot/superfile#0
File: :0-0
Timestamp: 2025-04-12T12:00:32.688Z
Learning: In PR #767 for yorukot/superfile, the focus is on moving code (especially sidebar-related functionality) to a more organized structure without changing functionality. Pre-existing issues should be ignored since the purpose is code reorganization, not fixing existing problems.

🪛 markdownlint-cli2 (0.18.1)

website/src/content/docs/overview.md

9-9: Images should have alternate text (alt text)

(MD045, no-alt-text)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Build and Test (ubuntu-latest)
• GitHub Check: Build and Test (windows-latest)
• GitHub Check: Analyze (go)

🔇 Additional comments (4)

website/src/assets/git-assets (1)

1-1: Ensure git symlink and referenced assets exist

• website/src/assets/git-assets is committed as a Git symlink (mode=120000).
• Symlink target in git: '../../../asset' → resolves to /home/jailuser/git/asset.
• Markdown references found under website/src/content to assets/git-assets/* (unique):
  • assets/git-assets/demo.png
  • assets/git-assets/prompt_shell_mode.png
  • assets/git-assets/prompt_spf_mode.png
  • assets/git-assets/theme/0x96f.png
  • assets/git-assets/theme/ayu-dark.png
  • assets/git-assets/theme/blood.png
  • assets/git-assets/theme/catppuccin-frappe.png
  • assets/git-assets/theme/catppuccin-latte.png
  • assets/git-assets/theme/catppuccin-macchiato.png
  • assets/git-assets/theme/catppuccin.png
  • assets/git-assets/theme/dracula.png
  • assets/git-assets/theme/everforest-dark-medium.png
  • assets/git-assets/theme/gruvbox-dark-hard.png
  • assets/git-assets/theme/gruvbox.png
  • assets/git-assets/theme/hacks.png
  • assets/git-assets/theme/kaolin.png
  • assets/git-assets/theme/monokai.png
  • assets/git-assets/theme/nord.png
  • assets/git-assets/theme/onedark.png
  • assets/git-assets/theme/poimandres.png
  • assets/git-assets/theme/rose-pine.png
  • assets/git-assets/theme/sugarplum.png
  • assets/git-assets/theme/tokyonight.png
• Automated validation aborted due to a script error before confirming each referenced file exists under the target. Confirm that each listed file is present under /home/jailuser/git/asset (repo_root/asset) or run a corrected verification script to validate them.

website/src/content/docs/list/theme-list.md (1)

17-169: Asset localization looks good!

The migration from external GitHub raw URLs to local asset paths (../../../assets/git-assets/theme/*.png) is a solid improvement for performance and reliability. This eliminates external dependencies and potential broken links.

website/src/styles/custom.css (1)

2-2: Robust font fallback stack implementation!

The extended font-family stack provides excellent cross-platform compatibility and aligns perfectly with the preload strategy in the Astro config. The fallback fonts are well-chosen system fonts that closely match IBM Plex Mono's characteristics, minimizing layout shift during font swapping.

website/src/content/docs/getting-started/tutorial.md (1)

184-195: Consistent asset localization applied correctly.

The image path changes from external GitHub URLs to local assets (../../../assets/git-assets/*.png) maintain consistency with the broader asset migration strategy across the documentation.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (4)

website/src/content/docs/list/theme-list.md (4)

17-17: Alt text added—nice. Consider trimming repetition.

Each alt starts with “ theme preview showing…”. For brevity and screen reader UX, consider concise descriptions (e.g., “ — dark palette with blue accents”). Optional.

Also applies to: 25-25, 33-33, 41-41, 49-49, 57-57, 65-65, 73-73, 81-81, 89-89, 97-97, 105-105, 113-113, 121-121, 129-129, 137-137, 145-145, 153-153, 161-161, 169-169

---

14-15: Fix markdownlint MD034 (bare URLs).

Wrap bare URLs in angle brackets or convert to markdown links. Minimal change uses angle brackets:

Apply pattern to all instances (example shown for Lines 14–15):

- - Ported by: https://github.com/filipjanevski
- - Original Author: https://github.com/filipjanevski/
+ - Ported by: <https://github.com/filipjanevski>
+ - Original Author: <https://github.com/filipjanevski/>

Or use links with labels:

- - Ported by: https://github.com/filipjanevski
+ - Ported by: [@filipjanevski](https://github.com/filipjanevski)

Also applies to: 22-23, 30-31, 38-39, 46-47, 54-55, 62-63, 70-71, 78-79, 86-87, 94-95, 102-103, 110-111, 118-119, 126-127, 134-135, 142-143, 150-151, 158-159, 166-167

---

110-110: Likely username typo in Kaolin “Ported by”.

“AnshumqanNeon” looks like a misspelling of “AnshumanNeon”.

- - Ported by: https://github.com/AnshumqanNeon
+ - Ported by: <https://github.com/AnshumanNeon>

---

17-17: Optional perf: ship lighter previews (WebP/AVIF) with PNG fallback.

If these are large PNGs, consider converting to WebP/AVIF and linking the smaller asset to cut docs payload size. Keep PNGs as fallback if needed. Out of scope OK.

Also applies to: 25-25, 33-33, 41-41, 49-49, 57-57, 65-65, 73-73, 81-81, 89-89, 97-97, 105-105, 113-113, 121-121, 129-129, 137-137, 145-145, 153-153, 161-161, 169-169

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ffd2b0b and d839da6.

📒 Files selected for processing (2)

• website/src/content/docs/list/theme-list.md (1 hunks)
• website/src/content/docs/overview.md (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• website/src/content/docs/overview.md

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: lazysegtree
PR: yorukot/superfile#0
File: :0-0
Timestamp: 2025-04-12T12:00:32.688Z
Learning: In PR #767 for yorukot/superfile, the focus is on moving code (especially sidebar-related functionality) to a more organized structure without changing functionality. Pre-existing issues should be ignored since the purpose is code reorganization, not fixing existing problems.

🪛 markdownlint-cli2 (0.18.1)

website/src/content/docs/list/theme-list.md

22-22: Bare URL used

(MD034, no-bare-urls)

---

23-23: Bare URL used

(MD034, no-bare-urls)

---

30-30: Bare URL used

(MD034, no-bare-urls)

---

31-31: Bare URL used

(MD034, no-bare-urls)

---

38-38: Bare URL used

(MD034, no-bare-urls)

---

39-39: Bare URL used

(MD034, no-bare-urls)

---

46-46: Bare URL used

(MD034, no-bare-urls)

---

47-47: Bare URL used

(MD034, no-bare-urls)

---

54-54: Bare URL used

(MD034, no-bare-urls)

---

55-55: Bare URL used

(MD034, no-bare-urls)

---

62-62: Bare URL used

(MD034, no-bare-urls)

---

63-63: Bare URL used

(MD034, no-bare-urls)

---

70-70: Bare URL used

(MD034, no-bare-urls)

---

71-71: Bare URL used

(MD034, no-bare-urls)

---

78-78: Bare URL used

(MD034, no-bare-urls)

---

79-79: Bare URL used

(MD034, no-bare-urls)

---

86-86: Bare URL used

(MD034, no-bare-urls)

---

87-87: Bare URL used

(MD034, no-bare-urls)

---

94-94: Bare URL used

(MD034, no-bare-urls)

---

95-95: Bare URL used

(MD034, no-bare-urls)

---

102-102: Bare URL used

(MD034, no-bare-urls)

---

103-103: Bare URL used

(MD034, no-bare-urls)

---

110-110: Bare URL used

(MD034, no-bare-urls)

---

111-111: Bare URL used

(MD034, no-bare-urls)

---

118-118: Bare URL used

(MD034, no-bare-urls)

---

119-119: Bare URL used

(MD034, no-bare-urls)

---

126-126: Bare URL used

(MD034, no-bare-urls)

---

127-127: Bare URL used

(MD034, no-bare-urls)

---

134-134: Bare URL used

(MD034, no-bare-urls)

---

135-135: Bare URL used

(MD034, no-bare-urls)

---

142-142: Bare URL used

(MD034, no-bare-urls)

---

143-143: Bare URL used

(MD034, no-bare-urls)

---

150-150: Bare URL used

(MD034, no-bare-urls)

---

151-151: Bare URL used

(MD034, no-bare-urls)

---

158-158: Bare URL used

(MD034, no-bare-urls)

---

159-159: Bare URL used

(MD034, no-bare-urls)

---

166-166: Bare URL used

(MD034, no-bare-urls)

---

167-167: Bare URL used

(MD034, no-bare-urls)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and Test (ubuntu-latest)
• GitHub Check: Analyze (go)

🔇 Additional comments (1)

website/src/content/docs/list/theme-list.md (1)

17-17: Verify image paths & assets symlink

Confirm website/src/assets/git-assets exists (symlink preserved by CI) and that every ../../../assets/git-assets/... image referenced from website/src/content/docs/list/theme-list.md resolves (no missing files or broken previews). This also applies to the other image lines in the file.

[lazysegtree]

Nice