update readme's

genox · genox · commit 0db20a9a7e80 · 2025-04-04T01:59:28.000+02:00
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ All starters are designed to be easily extensible and customizable, allowing dev
 
 ## Available Starters
 - **ssr-daisyui**: A starter template for server-side rendering (SSR) with DaisyUI components.
+- **csr-daisyui**: A starter template for client-side rendering (CSR) with DaisyUI components.
 
 ## Getting Started
 
@@ -14,6 +15,9 @@ To get started with any of the starters, use `create-react-router` and reference
 ```bash
 # ssr-daisyui
 npx create-react-router@latest --template https://github.com/tegonal/react-router-templates/tree/main/packages/ssr-daisyui
+
+# csr-daisyui
+npx create-react-router@latest --template https://github.com/tegonal/react-router-templates/tree/main/packages/csr-daisyui
 ```
 
 Then, follow the instructions of `create-react-router` to set up your project.
@@ -49,4 +53,23 @@ Arguments that can help you decide between SSR and CSR:
 - **Development Experience**: If you are more comfortable with client-side rendering and have experience with it, CSR may be a better choice.
 - **Ecosystem**: If you are already using a lot of client-side libraries and frameworks, switching to SSR might require a bit of mental gymnastics.
 
-In the end, both SSR and CSR have their pros and cons and both approaches can be used to create the same application and features. If you feel more comfortable with one approach over the other, this could be an additional argument to base a decision on. As always, it depends.
+In the end, both SSR and CSR have their pros and cons and both approaches can be used to create the same application and features. If you feel more comfortable with one approach over the other, this could be an additional argument to base a decision on. As always, it depends.
+
+## But I want Shadcn UI because DaisyUI is not my jam! :`(
+
+If you need more complex components, have a look at any headless UI library that provides good accessibility and style the components using daisyUI theme definitions and classes.
+
+For example:
+
+- **[Radix UI](https://www.radix-ui.com/)** - you can easily modify most Shadcn UI components because they heavily rely on Radix UI components. Copy them over, install the radix components they require and style them using daisyUI classes.
+- **[Headless UI](https://headlessui.dev/)** - Another great library that provides unstyled, fully accessible UI components designed to integrate beautifully with Tailwind CSS.
+- **[React Aria](https://react-spectrum.adobe.com/react-aria/)** - React components that provide accessible UI primitives for your design system.
+
+For more specific and advanced components like date pickers, sliders, you can refer to the ones utilised by ShadCN UI and style them easily to fit your needs.
+
+Or you rip out the DaisyUI theme and replace it with Shadcn UI theming and components. This is a bit more work but still possible. We suggest starting with DaisyUI and implementing headless components gradually, as needed, styling them on the go.
+
+Another great option depending on your use case is [PrimeReact](https://primereact.org), which also comes with its own theme.
+
+## Contributing
+We welcome contributions to this project! If you have suggestions, improvements, or bug fixes, please feel free to open an issue or submit a pull request.
diff --git a/packages/csr-daisyui/.github/workflows/build.yml b/packages/csr-daisyui/.github/workflows/build.yml
@@ -0,0 +1,47 @@
+name: Build application on commit
+on:
+  workflow_call:
+  pull_request:
+  push:
+    paths:
+      - '**'
+    branches:
+      - '**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22
+      - name: Trying to install dependencies and build the application
+        run: |
+          yarn --version
+          yarn install
+          yarn run build
+
+#  notify:
+#    needs: build
+#    if: always()
+#    runs-on: ubuntu-latest
+#    steps:
+#      - name: Set Status Message
+#        id: set_status
+#        shell: bash
+#        run: |
+#          if [ "${{ needs.build.result }}" == "success" ]; then
+#            echo "STATUS_MESSAGE=Successfully built the app for the latest commit on main :white_check_mark:" >> $GITHUB_ENV
+#          else
+#            echo "STATUS_MESSAGE=:boom: :boom: :boom: Building the app based on the latest commit on main failed, more information is available in the GitHub action logs." >> $GITHUB_ENV
+#          fi
+#
+#      - name: Mattermost Notification
+#        uses: mattermost/action-mattermost-notify@master
+#        with:
+#          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK_URL }}
+#          TEXT: |
+#            This is a message from ${{ github.repository }}.
+#            [Pipeline](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}): ${{ env.STATUS_MESSAGE }}
+#          MATTERMOST_USERNAME: ${{ github.triggering_actor }}
diff --git a/packages/csr-daisyui/.github/workflows/publish.yml b/packages/csr-daisyui/.github/workflows/publish.yml
@@ -0,0 +1,68 @@
+name: Build and publish docker images
+
+on:
+  push:
+    tags:
+      - '**'
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+#  notify:
+#    needs: build-and-push
+#    if: always()
+#    runs-on: ubuntu-latest
+#    steps:
+#      - name: Set Status Message
+#        id: set_status
+#        shell: bash
+#        run: |
+#          if [ "${{ needs.build-and-push.result }}" == "success" ]; then
+#            echo "STATUS_MESSAGE=Successfully built and pushed the docker image ${{ steps.meta.outputs.tags }} ${{ steps.meta.outputs.labels }} :white_check_mark:" >> $GITHUB_ENV
+#          else
+#            echo "STATUS_MESSAGE=:boom: :boom: :boom: Building the docker image failed, more information is available in the GitHub action logs." >> $GITHUB_ENV
+#          fi
+#
+#      - name: Mattermost Notification
+#        uses: mattermost/action-mattermost-notify@master
+#        with:
+#          MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK_URL }}
+#          TEXT: |
+#            This is a message from ${{ github.repository }}.
+#            [Pipeline](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}): ${{ env.STATUS_MESSAGE }}
+#          MATTERMOST_USERNAME: ${{ github.triggering_actor }}
diff --git a/packages/csr-daisyui/public/md-content/home.de.md b/packages/csr-daisyui/public/md-content/home.de.md
@@ -5,49 +5,46 @@
 Diese Starter-Vorlage wurde mit folgenden Technologien erstellt:
 
 - **TypeScript**: Für typsichere JavaScript-Entwicklung
-- **[React Router 7](https://reactrouter.com)**: Framework-Modus, konfiguriert für serverseitiges Rendering (SSR)
+- **[React Router 7](https://reactrouter.com)**: Im Library-Modus, konfiguriert für Client-Side Rendering (CSR)
 - **[React 19](https://react.dev/reference/react)**: Die neueste Version von React
 - **[Tailwind 4](https://tailwindcss.com/docs/installation/using-vite)**: Für Utility-First CSS-Styling
-- **[Vite](https://vite.dev/guide/)**: Für schnelle Entwicklung und Bauzeiten
+- **[Vite](https://vite.dev/guide/)**: Für schnelle Entwicklung und Build-Zeiten
 
-Bemerkenswerte Bibliotheken und Tools in diesem Projekt:
+Bibliotheken und Tools in diesem Projekt:
 
-- **[remix-i18next](https://sergiodxa.github.io/remix-i18next/)**: Internationalisierungs-Framework für mehrsprachige Unterstützung
-- **[daisyui](https://daisyui.com/)**: Tailwind CSS-Komponentenbibliothek für minimalistische UI-Komponenten, die so nah wie möglich am Standard-HTML sind, und ausgearbeitetes Theming (siehe `/app/styles/tailwind.css`)
+- **[react-i18next](https://react.i18next.com)**: Internationalisierungs-Framework für mehrsprachige Unterstützung
+- **[daisyui](https://daisyui.com/)**: Tailwind CSS-Komponentenbibliothek für minimalistische UI-Komponenten, die so nah wie möglich an Vanilla-HTML sind, mit umfangreichen Theming-Möglichkeiten (siehe `/app/styles/tailwind.css`)
 - **[class-variance-authority](https://cva.style)**: Für die Erstellung flexibler Komponentenvarianten
-- **[remix-hook-form](https://github.com/forge-42/remix-hook-form)**: Zur Formularverarbeitung, mit `zod` für die Validierung
-- **react-markdown**: Zum Rendern von Markdown-Inhalten in React
+- **[react-hook-form](https://www.react-hook-form.com)**: Für Formularverarbeitung mit `zod` für die Validierung
+- **react-markdown**: Für das Rendern von Markdown-Inhalten in React
 - **lucide-react**: Alle Icons, die Sie wahrscheinlich jemals benötigen werden
 - **@uidotdev/usehooks**: Eine Sammlung nützlicher React-Hooks
 - **lodash-es**: Für Hilfsfunktionen
 
-Weitere erwähnenswerte Aspekte:
+Weitere erwähnenswerte Funktionen:
 
-- **Selbst gehostete Schriftarten**: Open Sans vorinstalliert und einsatzbereit als Beispiel für
-  selbst gehostete Schriftarten. Die Schriftartendateien befinden sich in `/public/assets/open-sans/` und die CSS-
-  Datei befindet sich in `/app/styles/fonts.css`. Sie können Ihre eigenen Schriftarten hinzufügen, indem Sie
-  dieselbe Struktur befolgen.
-- **[Plausible.io](https://plausible.io/) Integration**: Einsatzbereit mit
-  [Plausible](https://plausible.io/) für Analysen, Seitenaufrufe und Ereignisse; sowohl auf Server- als auch auf Client-Seite. Die Integration befindet sich in `/app/lib/plausible/`. Sie können Ihre eigene Plausible-Domain hinzufügen, indem Sie
-  die .env-Datei bearbeiten, wenn Sie selbst hosten. Ereignisse werden immer nur an eine enthaltene API-Route gesendet, damit Sie die Ereigniserfassung auf derselben Domain wie Ihre App ausführen können.
+- **Selbstgehostete Schriften**: Open Sans vorinstalliert und einsatzbereit als Beispiel für
+  selbstgehostete Schriften. Die Schriftdateien befinden sich in `/public/assets/open-sans/` und die CSS-Datei
+  in `/app/styles/fonts.css`. Sie können Ihre eigenen Schriften hinzufügen, indem Sie
+  die gleiche Struktur befolgen.
+- **[Plausible.io](https://plausible.io/) Integration**: Bereit zur Nutzung mit
+  [Plausible](https://plausible.io/) für Analytics, Seitenaufrufe und Events auf der Clientseite. Die Integration befindet sich in `/app/lib/plausible/`. Sie können Ihre eigene Plausible-Domain durch
+  Bearbeitung der .env-Datei festlegen, wenn Sie selbst hosten.
 - **Eslint, Prettier**: Vorkonfiguriert mit sinnvollen Standardeinstellungen für TypeScript und React. Sie können
-  die Konfigurationsdateien nach Belieben anpassen. Das Projekt verwendet die von `@epic-web/config` bereitgestellten Voreinstellungen.
+  die Konfigurationsdateien nach Ihren Vorlieben anpassen. Das Projekt verwendet die von `@epic-web/config` bereitgestellten Voreinstellungen.
 
 ## Projektstruktur
 
-- `/app/`: Hauptanwendungsverzeichnis
+- `/app/`: Hauptverzeichnis der Anwendung
   - `/components/`: Wiederverwendbare UI-Komponenten
     - `/typography/`: Allgemeine Typografie-Komponenten wie Überschriften, Absätze usw.
-    - `/theme/`: Layout- und Theming-Komponenten, Kopfzeile, Fußzeile usw.
-    - `/ui/`: UI-Komponenten wie Schaltflächen, Eingabefelder usw.
-  - `/routes/`: Routenkomponenten und Seitendefinitionen
-    - `/files/`: Allgemeine dateibasierte Routen
-    - `/api/`: Routen, die nur API-Anfragen verarbeiten
+    - `/theme/`: Layout- und Theming-Komponenten, Header, Footer usw.
+    - `/ui/`: UI-Komponenten wie Buttons, Eingabefelder usw.
+  - `/routes/`: Routen-Komponenten und Seitendefinitionen
   - `/lib/`: Hilfsfunktionen, API-Clients, Helfer, ...
   - `/hooks/`: Benutzerdefinierte React-Hooks
   - `/config/`: Verschiedene Konfigurationsdateien
   - `/styles/`: Globale Stile und CSS-Dateien für Tailwind
-  - `/middleware/`: React Router Middleware
 - `/public/`: Statische Assets
 
 ## Entwicklung
@@ -58,6 +55,7 @@ yarn run build # Projekt bauen
 yarn run up # Abhängigkeiten aktualisieren
 yarn run i18n:extract # i18n-Schlüssel und Standardwerte extrahieren
 ```
+
 ## Bereitstellung
 
-Sie können das enthaltene Dockerfile verwenden, um das Projekt zu bauen und bereitzustellen. Das Dockerfile befindet sich im Stammverzeichnis des Projekts. Das Projekt enthält auch eine Build-Pipeline für GitHub, um ein Image auf ghcr.io zu speichern.
+Sie können das enthaltene Dockerfile verwenden, um das Projekt zu erstellen und bereitzustellen. Es startet einen Caddy-Webserver beim Start und stellt die App auf einer Domain bereit, die in der Caddyfile definiert ist. Das Dockerfile und die Caddyfile befinden sich im Wurzelverzeichnis des Projekts. Das Projekt enthält auch eine Build-Pipeline für GitHub, um ein Image auf ghcr.io zu speichern.
diff --git a/packages/csr-daisyui/public/md-content/home.en.md b/packages/csr-daisyui/public/md-content/home.en.md
@@ -5,17 +5,17 @@
 This starter template is built using the following technologies:
 
 - **TypeScript**: For type-safe JavaScript development
-- **[React Router 7](https://reactrouter.com)**: Framework mode, configured for server-side rendering (SSR)
+- **[React Router 7](https://reactrouter.com)**: Library mode, configured for client-side rendering (CSR)
 - **[React 19](https://react.dev/reference/react)**: The latest version of React
 - **[Tailwind 4](https://tailwindcss.com/docs/installation/using-vite)**: For utility-first CSS styling
 - **[Vite](https://vite.dev/guide/)**: For fast development and build times
 
 Notable libraries and tools used in this project include:
 
-- **[remix-i18next](https://sergiodxa.github.io/remix-i18next/)**: Internationalization framework for multi-language support
+- **[react-i18next](https://react.i18next.com)**: Internationalization framework for multi-language support
 - **[daisyui](https://daisyui.com/)**: Tailwind CSS component library for minimalistic UI components as close as possible to vanilla HTML and elaborate theming (see `/app/styles/tailwind.css`)
 - **[class-variance-authority](https://cva.style)**: For creating flexible component variants
-- **[remix-hook-form](https://github.com/forge-42/remix-hook-form)**: For form handling, using `zod` for validation
+- **[react-hook-form](https://www.react-hook-form.com)**: For form handling, using `zod` for validation
 - **react-markdown**: For rendering Markdown content in React
 - **lucide-react**: All the icons you will probably ever need
 - **@uidotdev/usehooks**: A collection of useful React hooks
@@ -28,8 +28,8 @@ Other notable mentions:
   file is located in `/app/styles/fonts.css`. You can add your own fonts by
   following the same structure.
 - **[Plausible.io](https://plausible.io/) Integration**: Ready to use with
-  [Plausible](https://plausible.io/) for analytics, page views and events; on the server and client side. The integration is located in `/app/lib/plausible/`. You can add your own Plausible domain by
-  editing the .env file if you're self-hosting. Events are only ever sent to an included api route so you can run event collection on the same domain as your app.
+  [Plausible](https://plausible.io/) for analytics, page views and events; on the client side. The integration is located in `/app/lib/plausible/`. You can add your own Plausible domain by
+  editing the .env file if you're self-hosting. 
 - **Eslint, Prettier**: Preconfigured with sensible defaults for TypeScript and React. You can
   customize the configuration files to your liking. The project uses the presets provided by `@epic-web/config`.
 
@@ -41,13 +41,10 @@ Other notable mentions:
     - `/theme/`: Layout and theming components, header, footer, etc.
     - `/ui/`: UI components like buttons, inputs, etc.
   - `/routes/`: Route components and page definitions
-    - `/files/`: Common file based routes
-    - `/api/`: Routes that are only handling API requests
   - `/lib/`: Utility functions, API clients, helpers, ...
   - `/hooks/`: Custom React hooks
   - `/config/`: Various configuration files
   - `/styles/`: Global styles and CSS files for tailwind
-  - `/middleware/`: React Router middleware
 - `/public/`: Static assets
 
 ## Development
@@ -61,4 +58,4 @@ yarn run i18n:extract # extract i18n keys and default values
 
 ## Deployment
 
-You can use the included Dockerfile to build and deploy the project. The Dockerfile is located in the root of the project. The project also includes a build pipeline for GitHub to store an image on ghcr.io.
+You can use the included Dockerfile to build and deploy the project. It will start a caddy webserver when launched and serve the app on a domain that is defined in the `Caddyfile`. The `Dockerfile` and `Caddyfile` are located in the root of the project. The project also includes a build pipeline for GitHub to store an image on ghcr.io.
diff --git a/packages/ssr-daisyui/app/md-content/home.de.md b/packages/ssr-daisyui/app/md-content/home.de.md
@@ -10,7 +10,7 @@ Diese Starter-Vorlage wurde mit folgenden Technologien erstellt:
 - **[Tailwind 4](https://tailwindcss.com/docs/installation/using-vite)**: Für Utility-First CSS-Styling
 - **[Vite](https://vite.dev/guide/)**: Für schnelle Entwicklung und Bauzeiten
 
-Bemerkenswerte Bibliotheken und Tools in diesem Projekt:
+Bibliotheken und Tools in diesem Projekt:
 
 - **[remix-i18next](https://sergiodxa.github.io/remix-i18next/)**: Internationalisierungs-Framework für mehrsprachige Unterstützung
 - **[daisyui](https://daisyui.com/)**: Tailwind CSS-Komponentenbibliothek für minimalistische UI-Komponenten, die so nah wie möglich am Standard-HTML sind, und ausgearbeitetes Theming (siehe `/app/styles/tailwind.css`)
