Files
paseo/docs/file-icons.md
Mohamed Boudra dec47d72d9 docs: lowercase internal docs + migrate website docs to public-docs/ (#634)
* docs: rename to lowercase + drop leftover plans

Rename docs in docs/ to lowercase kebab-case for consistency and update
all references in CLAUDE.md, CONTRIBUTING.md, CHANGELOG.md,
packages/server/CLAUDE.md, and inter-doc links.

Drop two leftover design plan docs:
- docs/ATTACHMENT_BASED_REVIEW_CONTEXT_PLAN.md
- docs/plan-approval-normalization.md

* docs: drop stale uppercase entries from case-insensitive rename

* feat(website): power /docs from public-docs/ markdown tree

Move website docs out of TSX route components and into a root-level
public-docs/ directory of plain markdown files with frontmatter
(title, description, nav, order).

- Add packages/website/src/docs.ts loader using import.meta.glob with
  ?raw to compile the markdown into the bundle at build time.
- Replace the 9 hand-written docs/*.tsx routes with a single $.tsx
  catch-all that renders any slug via react-markdown.
- Drive the docs sidebar nav from frontmatter order/nav.
- Auto-discover docs routes in vite.config.ts so the sitemap stays in
  sync without manual edits.

* fix(website): bind dev server to 0.0.0.0 so port collisions trigger fallback

`host: "127.0.0.1"` (or unset) lets macOS coexist with another process
holding an IPv6 dual-stack `*:8082` socket, so Vite never sees
EADDRINUSE and silently binds alongside it. Forcing IPv4 wildcard
makes the conflict real, and Vite's default `strictPort: false`
falls through to the next free port.

* fix(website): restore docs page styling after markdown migration

Add a .docs-prose class that mirrors the styling the original
docs/*.tsx components hand-rolled (h1/h2/h3 sizes, paragraph/list
spacing, link colors, code blocks, callout-style blockquotes).

ReactMarkdown was emitting unstyled HTML because the previous
wrapper class only had inline-code rules — headings and code
blocks fell back to user-agent defaults.
2026-04-30 17:27:15 +08:00

4.6 KiB

File Icons

The file explorer uses colored SVG icons from material-icon-theme (installed as a dev dependency in packages/app).

Icons are inlined as SVG strings in:

packages/app/src/components/material-file-icons.ts

This file is auto-generated. Do not edit it by hand.

How it works

  • SVG_ICONS maps icon names (e.g. "typescript") to raw SVG strings
  • EXTENSION_TO_ICON maps file extensions (e.g. "ts") to icon names
  • getFileIconSvg(fileName) returns the SVG string for a given filename, falling back to a generic file icon

Adding a new icon

  1. Find the icon name in the material-icon-theme manifest:
node -e "
const m = require('./node_modules/material-icon-theme/dist/material-icons.json');
console.log('fileExtensions:', m.fileExtensions['YOUR_EXT']);
console.log('languageIds:', m.languageIds['YOUR_LANG']);
"
  1. Verify the SVG exists:
cat node_modules/material-icon-theme/icons/ICON_NAME.svg
  1. Add two things to material-file-icons.ts:

    • The SVG string in SVG_ICONS:

      "icon_name": `<svg ...>...</svg>`,
      
    • The extension mapping in EXTENSION_TO_ICON:

      "ext": "icon_name",
      
  2. Run npm run typecheck to verify.

Currently included icons

53 unique icons covering these extensions:

Extension(s) Icon
ts typescript
tsx react_ts
js javascript
jsx react
py python
go go
rs rust
rb ruby
java java
kt kotlin
c c
cpp cpp
h h
hpp hpp
cs csharp
swift swift
dart dart
ex, exs elixir
erl erlang
hs haskell
clj clojure
scala scala
ml ocaml
r r
lua lua
zig zig
nix nix
php php
html html
css css
scss sass
less less
json json
yml, yaml yaml
xml xml
toml toml
md, markdown markdown
sql database
graphql, gql graphql
sh, bash console
tf terraform
hcl hcl
vue vue
svelte svelte
astro astro
wasm webassembly
svg svg
png, jpg, jpeg, gif, webp, ico image
txt document
conf, cfg, ini settings
lock lock
groovy groovy
gradle gradle