Template

Files

T

apairon 4020ad62c5 ✨ feat: enhance medialib image handling and add asset URL resolution

- 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.

2026-05-17 00:52:41 +00:00

3.2 KiB

Raw Blame History

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.

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.

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.

3.2 KiB Raw Blame History