Files
community-rule/docs/guides/static-assets.md
T
adilalloandCursor 751f2e9343 Resolve share URLs from the instance host and ship 1200×630 Open Graph images.
Staging no longer advertises production canonicals, and Slack/social previews get a default hero card with template and article overrides.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-29 15:41:27 -06:00

87 lines
4.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Static assets (`public/`)
Convention for files served from `public/`. Path helpers live in
[`lib/assetUtils.ts`](../../lib/assetUtils.ts).
## Folder map
```
public/
assets/
icons/ # UI chrome (close, help) + FeatureGrid card glyphs
logos/ # Brand + social lockups
partners/ # Logo wall partner SVGs (kebab org slug)
marketing/ # Hero, OG share images, feature panels, section numbers, avatars, banners, book cover
case-study/ # CaseStudy card SVG artwork (canonical)
shapes/ # Decorative ornaments (stats, quotes, unions, content shapes)
vector/ # Use-case group marks
template-mark/ # Governance template SVG marks
share/ # Share modal channel glyphs
content/
blog/ # Per-article SVG thumbnails (see content-creation.md)
```
## Icon sources (two systems)
| Location | Used for | Resolution |
| --- | --- | --- |
| `public/assets/icons/` | Static chrome served by URL (`icon-close.svg`, `icon-help.svg`) and FeatureGrid card glyphs (`icon-git-branch.svg`, …) | `ASSETS.ICON_*`, `featureIconPath()` |
| `app/components/asset/icon/` | Bundled create-flow / nav SVGs imported by `Icon.tsx` | Webpack import, not `public/` |
Do not duplicate the same glyph in both places unless migrating between systems.
## Naming rules
- **Directories and filenames:** lowercase kebab-case only.
- **No** PascalCase folders (`Section/`, `Share/`) or Figma-export names
at the assets root (`Feature_Support.png`, `Icon_Alert.svg`).
- **Prefer** `lib/assetUtils.ts` helpers (`partnerLogoPath`,
`shareIconPath`, `featurePanelPath`, `ASSETS`, …) over hardcoded
`/assets/...` strings in components.
- **Blog art** stays under `public/content/blog/` with
`{slug}-vertical.svg`, `-horizontal.svg`, `-section.svg`, `-tag.svg`,
`-og.png` (1200×630 share image), and `-ornament-right.png` /
`-ornament-left.png` (body gutter shapes).
- **Favicon** reuses `assets/logos/community-rule.svg` (`ASSETS.LOGO` in
`app/layout.tsx` metadata) plus generated root binaries for Safari/iOS:
`public/favicon.ico`, `favicon-16x16.png`, `favicon-32x32.png`, and
`apple-touch-icon.png`. Regenerate after logo changes with
`npm run generate:favicons`. Do not place other static binaries under
`app/` — keep `app/` for routes, layouts, and styles only
(`globals.css`, `tailwind.css`).
## PNG files and `.gitignore`
`*.png` is listed in `.gitignore`, but marketing and partner PNGs remain
**git-tracked** from before that rule. New PNGs may need `git add -f` to
stage. Raster → SVG conversion is tracked in
[CR-25](https://linear.app/community-rule/issue/CR-25).
## PNG audit (handoff to CR-25)
| Path | Used by | Disposition |
| --- | --- | --- |
| `logos/partners/*.svg` (×6) | LogoWall | **Done** — SVG (kebab org slug, no `logo-` prefix) |
| `marketing/feature-*.svg` (×4) | Mini cards | Panel art (`support`, `exercises`, `guidance`, `tools`) |
| `icons/icon-{git-branch,arrow-left-right,door-open,message-square-share}.svg` | FeatureGrid | Card glyphs from Figma Section/Feature-Grid (18632:10668) |
| `marketing/section-number-*.svg` (×3) | SectionNumber | **Done** — SVG |
| `marketing/avatar-*.svg` (×3) | Avatar / ASSETS | **Done** — SVG |
| `marketing/hero-image.png` | HeroBanner | **Design review** — likely keep raster |
| `marketing/og-image.png` | Default `og:image` / `twitter:image` | **Done** — 1200×630 hero crop (`ASSETS.OG_IMAGE`; `npm run generate:og-images`) |
| `marketing/og-image-templates.png` | Templates `og:image` | **Done** — 1200×630 (`ASSETS.OG_IMAGE_TEMPLATES`) |
| `content/blog/*-og.png` | Article `og:image` | **Done** — 1200×630 from `{slug}-section.svg` (`contentBlogOgPath`) |
| `marketing/communityrules-cover.svg` | About / Book | **Done** — Structure Before Crisis cover (`ASSETS.STRUCTURE_BEFORE_CRISIS_COVER`; Figma **22137:891197**) |
| `marketing/community-rules-cover.png` | About / Book | **Done** — Community Rules (2021) cover (`ASSETS.COMMUNITY_RULES_COVER`; gitignore exception) |
| `marketing/governance-booklet.pdf` | About / Book | **Done** — Community Rules (2021) PDF (`governanceBookletPath()`) |
| `marketing/structure-before-crisis.pdf` | About / Book | **Done** — Structure Before Crisis (2025) PDF (`structureBeforeCrisisPath()`) |
| `logos/community-rule.svg` | Logo + favicon (`ASSETS.LOGO`) | **Done** — SVG |
| `share/*.svg` (×5) | Share modal | **Done** — SVG (`shareIconPath()`) |
| `logos/gitlab.svg` | Footer / social | **Done** — SVG |
## Related docs
- [figma-component-registry.md](../figma-component-registry.md) — Figma Asset
canvas ↔ `app/components/asset/` and `template-mark/` / `vector/`.
- [content-creation.md](./content-creation.md) — Blog SVG naming under
`public/content/blog/`.