Technischer Durchstich - KoliBri CMS SSR mit z.B. Typo3

[deleonio]

Die im Projekt KoliBri erarbeiteten Web Components und deren semantische Struktur und Verhalten sollen bestmöglich auch in Content-Management-Systemen und anderen SSR-Szenarien wiederverwendet werden können.

Hier zugibt es aktuell folgende Vorarbeiten:

• https://github.com/public-ui/kolibri/discussions/3019
• https://github.com/fgeierst/typo3-publicui-demo
• https://github.com/public-ui/kolibri/tree/develop/packages/adapters/hydrate
• https://www.npmjs.com/package/@public-ui/hydrate
• https://github.com/public-ui/kolibri/tree/develop/packages/samples/ssr
• Twig, Mustache etc.

Knowledgement:

• https://developer.chrome.com/articles/declarative-shadow-dom/

Ziel

Wir wollen optimalerweise dieselben Komponenten auch im CMS wiederverwenden und vorgerendert zum Client senden. Auf diese Weise erhält der Nutzende und die Suchmaschinen direkt das korrekte Markup. Auch das Styling soll nach Möglichkeit direkt mitkommen.

Vite + Typo3

Es sollte mittels der hydrated KoliBri-Komponenten möglich sein, SSR mittels Typo3 und dem Vite-Plugin umzusetzen. Die render-Methode muss ggf. weiter optimiert werden.

Todo

• [ ] Typo3 Repo auschecken und zum Laufen bekommen
• [ ] Hydrated-Komponenten statt der CSR-Komponenten verwenden
• [ ] ggf. notwendige Optimierungen an der Implementierung vornehmen, damit die relevanten Komponenten SSR-fähig sind

[fgeierst]

See also https://github.com/fgeierst/typo3-lit-demo.

In order to use web components in TYPO3 content elements, you need a custom HTML Sanatizer.

[github-actions[bot]]

This issue has been automatically marked as stale and will be closed in 10 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, please post a comment or remove the Stale label.

[github-actions[bot]]

This issue was closed because it has been stale for 10 days with no activity. If the issue is still relevant to you, feel free to re-open with a comment.

[doemedia]

Hallo, ich arbeite derzeit auch an einer Verschmelzung von TYPO3 v12.4 und Kolibri 2.1. Mit viel Krampf und Hürden, aber die meisten Kolibri-Komponenten funktionieren in den Fluid-Templates von TYPO3.

Allerdings bekomme ich folgendes Formular nicht versendet und benötige Feedback. Ob überhaupt Formulare mit Kolibri umsetzbar sind. Was muss ggf. im JavaScript für ein Event ergänzt werden, damit die Daten an die Suchseite gepostet werden?

<kol-form _required-text="" id="searchform" class="quicksearchform" method="post" action="/suche.html"> <kol-input-text _label="" _type="search" _hide-label="true" _placeholder="Suchbegriff" _name="tx_kesearch_pi1[sword]" _id="searchword" ></kol-input-text> <kol-button class="kol-button search-submit" _variant="primary" _icons="customiconfont icon-search" _hide-label="true" _icon-only="true" _type="submit" ></kol-button> </kol-form>

[github-actions[bot]]

This issue has been automatically marked as stale and will be closed in 10 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, please post a comment or remove the Stale label.

[github-actions[bot]]

This issue was closed because it has been stale for 10 days with no activity. If the issue is still relevant to you, feel free to re-open with a comment.