apairon
4020ad62c5
- Implemented `resolveApiAssetUrl` function to normalize asset URLs based on API base. - Updated `MedialibImage` component to utilize new asset URL resolution and added support for alt text and class properties. - Enhanced image loading behavior with improved width measurement and focal point handling. - Added placeholder image handling and improved accessibility with alt text. - Introduced new test script for auditing broken links in skill documentation. - Expanded seeded test content to include medialib entries and updated related tests for pagebuilder previews. - Improved global setup and teardown logging for clarity on seeded content management.
58 lines
3.2 KiB
Markdown
58 lines
3.2 KiB
Markdown
# Frontend
|
|
|
|
Svelte 5 SPA bundled with esbuild and styled with Tailwind CSS 4.
|
|
|
|
## Structure
|
|
|
|
- Entry point: `src/index.ts`, main component: `src/App.svelte`.
|
|
- `src/lib/` — utilities, stores, actions, API layer.
|
|
- `src/widgets/` — reusable UI components (Button, Input, Form, etc.).
|
|
- `src/css/` — global styles and Tailwind imports.
|
|
- `src/routes/` — page-level components (e.g. `NotFound.svelte` for the 404 page). Not file-based routing — these are manually imported by `App.svelte`.
|
|
|
|
## Related skills
|
|
|
|
- `frontend-architecture` for routing, stores, API behavior, and i18n flow.
|
|
- `content-authoring` when frontend changes are driven by new collections, blocks, lookup paths, or `types/global.d.ts` changes.
|
|
- `nova-pagebuilder-modeling` when block components, `BlockRenderer.svelte`, and admin preview contracts must stay aligned.
|
|
- `media-seo-publishing` when rendering medialib or file fields; prefer `src/widgets/MedialibImage.svelte` as the shared image boundary.
|
|
|
|
## Routing
|
|
|
|
This project uses a **custom SPA router** (NOT SvelteKit, NOT file-based routing). Pages are CMS content entries loaded dynamically by URL path.
|
|
|
|
- `lib/store.ts` proxies `history.pushState`/`replaceState` → updates `$location` store.
|
|
- `App.svelte` reacts to `$location.path` → calls `getCachedEntries("content", { lang, path })` → renders blocks.
|
|
- `lib/navigation.ts` provides `spaNavigate(url)` for programmatic navigation and `use:spaLink` action for `<a>` elements.
|
|
- URL structure: `/{lang}/{path}` (e.g. `/de/ueber-uns`, `/en/about`).
|
|
- Root `/` auto-redirects to `/{browserLanguage}/`.
|
|
- **For full details see the `frontend-architecture` skill.**
|
|
|
|
## Conventions
|
|
|
|
- PascalCase component names; export props at the top of `<script>` tag.
|
|
- Keep code and comments in English.
|
|
- SSR safety: guard browser-only code with `typeof window !== "undefined"`.
|
|
- API behavior: PUT responses return only changed fields; filter by id uses `_id`; API requests reject non-2xx with `{ response, data }` and error payload in `error.data.error`.
|
|
- Treat public rendering and admin-preview rendering as the same block contract whenever possible.
|
|
- If blocks or widgets render foreign media or entities, make the required `lookup` paths explicit instead of assuming `_lookup` data is always present.
|
|
|
|
## Tailwind CSS
|
|
|
|
- Always use canonical Tailwind utility classes instead of arbitrary values when a standard equivalent exists.
|
|
- Only use arbitrary values (`[...]`) when no standard utility covers the needed value.
|
|
|
|
## i18n
|
|
|
|
- `svelte-i18n` is configured in `src/lib/i18n/index.ts` with lazy loading for locale files.
|
|
- Locale files live in `src/lib/i18n/locales/{lang}.json`.
|
|
- URL-based language routing: `/{lang}/...` (e.g. `/de/`, `/en/about`).
|
|
- Language utilities in `src/lib/i18n.ts`: `extractLanguageFromPath()`, `localizedPath()`, `getLanguageSwitchUrl()`.
|
|
- Use `$_("key")` from `svelte-i18n` for translations in components.
|
|
|
|
## Related tests
|
|
|
|
- When developing frontend features: extend or create corresponding E2E tests in `tests/e2e/`.
|
|
- After frontend changes, run only the affected E2E tests: `npx playwright test tests/e2e/filename.spec.ts` or `-g "test name"`.
|
|
- When tests fail, clarify whether the frontend or the test needs adjustment — coordinate with the user.
|