Live CockpitCMS+Svelte Projects:

  1. (Out of control) DOM loads, bundle.js/css downloads and Svelte initializes
  2. Svelte detects browser language (App->LangDetectModule)
  3. Svelte API call to CockpitCMS (axios)
    • /cockpit/api/collections/get/Page?lang=...
    • /cockpit/api/singletons/get/SiteSettings?lang=...
    • meantime Loading.svelte graphic
  4. According to server response, possible errors:
    1. Page not found (404) -> Relevant error is displayed + navigation (without footer)
    2. CockpitCMS unreachable (500) -> Relevant error is displayed without navigation and without logo (nowhere to get it from) (without footer)
    3. Page is empty (Layout.svelte) -> Simple message is displayed + footer Would be good to style it like the previous two
  5. If the page loads successfully:
    1. async assignContent() according to current slug value from Router extracts relevant page from API response - svelte bug in {#await} causes svelte transitions, scrollvideo and possibly other things to duplicate the block, the only possible fix is to move asynchronous logic into <script> and use {#if} github#1591 github#4064
    2. relevant page is passed to Layout.svelte, separately Header, Footer, title (Head), Theme properties are loaded
    3. Layout.svelte distributes information it received among relevant components (sections/*), which process them as needed and render relevant HTML.

Previous: 4. Svelte Files Explainer
Next: 6. Performance, Graphical and Compatibility Issues