Template

Files

T

apairon 958b45272d ✨ feat: enhance admin UI configuration and SSR handling

- Add support for number chip arrays and JSON editor in admin UI config.
- Introduce pagebuilder block registry for Svelte components in admin previews.
- Implement custom role names and a 3-layer cascade model for field-level permissions.
- Add CORS configuration hierarchy for better API security.
- Update project setup instructions for admin token and config management.
- Improve SSR 404 signaling with proper context handling in NotFound component.
- Refactor routing structure to separate NotFound page into its own route.

2026-05-12 23:20:31 +00:00

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

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.5 KiB Raw Blame History