Template

Files

✨ feat: add admin-ui-config, content-authoring, and frontend-architecture skills documentation

- Introduced `admin-ui-config` skill for configuring admin UI for collections.
- Added `content-authoring` skill detailing page and block creation in the CMS.
- Included `frontend-architecture` skill explaining custom SPA routing and state management.
- Updated `AGENTS.md` to reference new skills and provide infrastructure prerequisites.
- Enhanced `frontend/AGENTS.md` with routing details and SPA navigation information.

2026-03-07 16:16:19 +00:00

2.4 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.
Keep route components in a src/routes/ folder when needed.

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.

Tailwind CSS

Always use canonical Tailwind utility classes instead of arbitrary values when a standard equivalent exists (e.g. h-16.5 not h-[66px], min-h-3 not min-h-[12px]).
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.

2.4 KiB Raw Blame History