Repository navigation
Web App Rendering
The web app does not render Livingdocs JSON. nswow delivers the already rendered article HTML, and the app compiles it at runtime as a Vue template.
| Folder | Content |
|---|---|
public/html/<locale>/<article name>.html |
Rendered article HTML |
public/json/*.json |
Settings, routing, menus and translations |
public/images/, public/downloads/
|
Media of the export |
These folders are gitignored. Without them the dev app has no articles.
The app fetches the article HTML and compiles it with vue3-runtime-template (preparation in .srl/utils/html.ts). Consequences for component templates:
-
Custom elements become Vue components:
<srl-ld-…>resolves to the Vue file of the component (see Components#vue-components), SRL elements like<srl-category-accordion>to the SRL runtime components. -
Simple Vue syntax works in the exported HTML:
v-slot="{ accordion }",:prop="value". An element<template-<name>>becomes a named slot<template #<name>>. - Vue's whitespace handling applies: whitespace-only text between tags that contains a line break is dropped, other whitespace runs become one space. (The Livingdocs design build already removes whitespace between tags; see Components#templates.)
- Inline
<style>blocks in the HTML are moved into one global style element. - In table cells, line breaks inside
<span>become<br />.
- Internal links become router links.
./<locale>/homemaps to the start page. - Links with
data-note-target="popup"anddata-article-name="<uuid>"open the target article in a dialog instead of navigating.
Put a Vue component with the same generated name into src/components/ to replace an SRL runtime component, e.g. src/components/Srl/Page/Dialog.vue replaces SrlPageDialog. See Components#overriding-srl-runtime-components.
The same HTML export is the input for PDF, Word and XBRL. Use the data-remove-from-<target> attributes to filter elements per output, and data-replace-tag on every <srl-ld-…> element that stays in the XHTML (see Component Library#output-specific-markup).