Cleanup assets
This commit is contained in:
@@ -14,6 +14,8 @@ User-facing docs. Implementation conventions live in `.cursor/rules/`.
|
||||
|
||||
## Author guides (`guides/`)
|
||||
|
||||
- [static-assets.md](./guides/static-assets.md) — `public/assets/` folder
|
||||
map, naming rules, PNG audit.
|
||||
- [content-creation.md](./guides/content-creation.md) — Writing and
|
||||
publishing blog posts.
|
||||
- [i18n-translation-workflow.md](./guides/i18n-translation-workflow.md) —
|
||||
|
||||
@@ -194,11 +194,14 @@ Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-10
|
||||
|
||||
## Asset conventions (Figma “Asset” canvas)
|
||||
|
||||
Full folder map and PNG audit: **[guides/static-assets.md](./guides/static-assets.md)**.
|
||||
|
||||
- **Imports:** use **`asset/icon`** (named **`Icon`** component), **`asset/Logo`**, **`asset/Avatar`**, etc.—same rule as **`buttons/Button`**, no top-level **`asset/index.tsx`** barrel.
|
||||
- **`asset/icon/`** — **`Icon.tsx`** maps icon names to SVG modules beside it (`arrow_back.svg`, …); **`index.tsx`** re-exports **`Icon`** and **`ICON_NAME_OPTIONS`** / types.
|
||||
- **`public/assets/vector/<slug>.svg`** — Figma Asset / Vector marks (same kebab **`slug`** convention as **`public/assets/template-mark/`**). Use **`vectorMarkPath(slug)`** in **`lib/assetUtils.ts`**.
|
||||
- **`asset/Logo`** — Community Rule **`Logo`** component (folder PascalCase, like **`Avatar/`**).
|
||||
- **`public/assets/`** — lowercase kebab-case folders: **`icons/`**, **`logos/`** (incl. **`logos/partners/`**), **`marketing/`**, **`case-study/`**, **`shapes/`**, **`vector/`**, **`template-mark/`**, **`share/`**. Use helpers in **`lib/assetUtils.ts`** (`ASSETS`, `partnerLogoPath`, `vectorMarkPath`, …).
|
||||
- **`public/assets/vector/<slug>.svg`** — Figma Asset / Vector marks (same kebab **`slug`** convention as **`public/assets/template-mark/`**). Use **`vectorMarkPath(slug)`**.
|
||||
- **`asset/Logo`** — Community Rule **`Logo`** component (folder PascalCase, like **`Avatar/`**); brand SVG at **`public/assets/logos/community-rule.svg`**.
|
||||
- **`asset/Avatar`** + **`asset/AvatarContainer`** — paired circular image stacks (e.g. top nav). Fuller DS Avatar behavior (**initials**, upload routing, …) tracked as **[CR-58](https://linear.app/community-rule/issue/CR-58)**.
|
||||
- **`asset/Shapes/`** — decorative blobs for **`cards/Stat`** and About header inline art (Figma **Shapes**).
|
||||
- **`asset/Shapes/`** — decorative blobs for **`cards/Stat`** and About header inline art (Figma **Shapes**); static files under **`public/assets/shapes/`**.
|
||||
|
||||
*Update this when you add a new top-level `app/components/*` package or a new Figma canvas.*
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
# 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 (alert, close, help, pointer)
|
||||
logos/ # Brand + social lockups
|
||||
partners/ # Logo wall partner PNGs
|
||||
marketing/ # Hero, 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)
|
||||
```
|
||||
|
||||
## 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`.
|
||||
|
||||
## 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-*.png` (×4) | FeatureGrid | **Design review** — convert if vector in Figma, else keep raster |
|
||||
| `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 |
|
||||
| `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/`.
|
||||
Reference in New Issue
Block a user