Nutzung mit TYPO3

[Epoche-Napoleon]

wie kann man denn KoliBri unter TY0O3 und Fluid nutzen?

[deleonio]

Hallo @Epoche-Napoleon,

Du kannst KoliBri client-seitig verwenden. Am besten Du generierst Dir ein static-Projekt mit der CLI und schaust die dort die Einbindung von KoliBri an.

Für die CMS Templates könnt Ihr dann einfach die KoliBri-HTML-Tags verwenden, die dann client-seitig gerendert werden.

Falls Ihr einen server-seitiges Rendering wünscht, dann können wir hierzu Synergie-Effekte nutzen - da das bei uns noch eine Challenge für 2023 ist: https://public-ui.github.io/docs/historie#challenge-1

VG Martin

[fgeierst]

In general, you could look at https://github.com/fgeierst/typo3-lit-demo how to work with web components in TYPO3 Fluid templates. This demo uses custom Lit components and existing Shoelace components (which is more similar to how you would use Kolibri components).
Note that if you use web components in custom TYPO3 content elements, these are disallowed by default by TYPO3 HTMLvalidate. See this commit how to configure a custom HTMLSanatizer to allow web components.

(I also started https://github.com/fgeierst/typo3-publicui-demo, but this still has some issues and lacks proper setup instructions).

[fgeierst]

Thanks to @deleonio , we got a basic TYPO3 + public-ui setup working, see:
https://github.com/fgeierst/typo3-publicui-demo

We use vite-asset-collector, but that's not a requirement. You need to copy kolibri's /node_modules/@public-ui/components/dist/kolibri folder to your site extension's public folder. And from there, import the loader 'kolibri.esm.js' . In the browser, this loader looks for any Kolibri components (like <kol-button _label="Button" data-theme="default"></kol-button>), dynamically loads the necessary JavaScript and mounts the web components.