astro update

src/de/integration/astro.md

@@ -1,50 +1,63 @@
 
 # Wie man die Buttons und RSVP-Formulare mit Astro nutzt
 
-## Schritt 0: Wähle ein Vorgehen
+## Schritt 0: Wähle das beste Vorgehen
 
-Für Static Site Generators (SSG) empfehlen wir generell die Nutzung des Add to Calendar Buttons via CDN.
+Du kannst einfach das Add to Calendar Button Skript via CDN laden und so wie in der [allgemeinen HTML-Anleitung](/de/integration/html.html) beschrieben integrieren.  
+Hierbei muss du darauf achten, dass das Ganze nur client-seitig geschieht. Zudem ist dieser Weg nicht ganz ideal.
 
-Alternativ kannst du aber auch das npm Package installieren und das Modul über eine Observer-Funktion implementieren.
+Wir empfehlen die Nutzung des React-Wrapper npm-Packages, die Erstellung einer benutzerdefinierten JSX-Komponente und die Integration dieser Komponente mit dem Attribut `client:only="react"`.
 
-Wir beschreiben nachfolgend alle Optionen.
+## Schritt 1: Setup
 
-## Schritt 1: Einrichtung
+### Erstelle eine neue Komponente
 
-### Option A: Integration via CDN
+Erstelle eine neue Komponente im components-Verzeichnis deines Astro-Projekts.  
+Nenne diese "AddtoCalendarButton.tsx".   
+Falls du mehrere Buttons nutzen möchtest, kannst du entweder mehrere Komponenten erstellen oder das Ganze über entsprechende Props dynamisch gestalten.
 
-Lade das Skript, indem du den nachfolgenden "Script Tag" im head-Bereich deiner Webseite einfügst.
+### Installiere das React-Wrapper npm-Package
 
-Das Skript lädt automatisch auf nicht-blockierende Art und Weise. Daher ist es im Zweifel nicht entscheidend, wo genau es platziert wird.
+Installiere das Package über die npm Registry.
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
+```bash
+npm install add-to-calendar-button-react
 ```
 
-### Option B: npm Installation
-
-Alternativ kannst du das Package auch aus der npm Registry installieren.
+...und importiere es in deine Komponente.
 
-```bash
-npm install add-to-calendar-button
+```tsx
+import { AddToCalendarButton } from 'add-to-calendar-button-react';
 ```
 
-...und einen Observer aufsetzen, der das Skript entsprechend lädt:
-
-```html
-<script type="module" hoist>
-  const observer = new IntersectionObserver((entries) => {
-    for (const entry of entries) {
-      if (!entry.isIntersecting) continue;
-      observer.disconnect();
-      import('../../node_modules/add-to-calendar-button/dist/module/index.js');
-    }
-  });
-  const instances = document.querySelectorAll('add-to-calendar-button');
-  for (const instance of instances) observer.observe(instance);
-</script>
+## Schritt 2: Definiere den Button
+
+Definiere den Button in deiner Komponente.  
+In unserem Beispiel haben wir den ProKey als Prop definiert, um ihn dynamisch zu halten.
+
+```tsx
+import { AddToCalendarButton } from 'add-to-calendar-button-react';
+import type { AddToCalendarButtonType } from 'add-to-calendar-button-react';
+
+export default function atcb(props: AddToCalendarButtonType) {
+  return (
+    <AddToCalendarButton proKey={props.prokey} ></AddToCalendarButton>
+  );
+}
 ```
 
-## Schritt 2: Loslegen
+## Schritt 3: Loslegen
+
+Du kannst die Komponente nun überall importieren, wo sie benötigt wird und sie wie jede andere benutzten.
 
-Beginne mit der Nutzung, indem du einen `<add-to-calendar-button proKey="prokey-deines-events" />` Tag in deinen Quellcode einfügst.
+Dein Code kann hierbei bspw. wie folgt aussehen.
+
+```astro
+---
+import AddToCalendarButton from '../components/AddToCalendarButton.tsx';
+import Layout from '../layouts/Layout.astro';
+---
+<Layout>
+<AddToCalendarButton client:only="react" prokey="prokey-deines-events" />
+</Layout>
+```

src/integration/astro.md

@@ -1,50 +1,62 @@
 
 # How to integrate Buttons and RSVP Forms with Astro
 
-## Step 0: Pick a solution
+## Step 0: Pick the right solution
 
-For static site generators (SSG), we generally recommend to load the Add to Calendar Button script via CDN.
+You can simply load the Add to Calendar Button script via CDN and integrate as described at the default [HTML guide](/integration/html.html).  
+However, this some at some cost and you would need to take precaution to only load and render it on the client.
 
-Alternatively, you can still use the npm package and include the module via an observer function.
-
-We will highlight all options below.
+We recommend to use the React wrapper npm package, create a custom JSX component, and then integrate this component with `client:only="react"` attribute.
 
 ## Step 1: Setup
 
-### Option A: Integrate via CDN
+### Create a new component
 
-Load the respective script by adding the following script tag to the head section of your website.
+Create a new component in the components folder and name it "AddtoCalendarButton.tsx".  
+If you have multiple buttons, you can either create multiple components or make it accept the props you need to customize it.
 
-The script will be loaded in a non-blocking way. So you don't need to worry about where to include it exactly.
+### Add the React wrapper package
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
-```
+Install the package from the npm registry.
 
-### Option B: npm installation
+```bash
+npm install add-to-calendar-button-react
+```
 
-Alternatively, install the package from the npm registry.
+...and import it into your new component:
 
-```bash
-npm install add-to-calendar-button
+```tsx
+import { AddToCalendarButton } from 'add-to-calendar-button-react';
 ```
 
-...and setup an Observer to load the script properly:
-
-```html
-<script type="module" hoist>
-  const observer = new IntersectionObserver((entries) => {
-    for (const entry of entries) {
-      if (!entry.isIntersecting) continue;
-      observer.disconnect();
-      import('../../node_modules/add-to-calendar-button/dist/module/index.js');
-    }
-  });
-  const instances = document.querySelectorAll('add-to-calendar-button');
-  for (const instance of instances) observer.observe(instance);
-</script>
+## Step 2: Define the button
+
+Define the button in your new component.  
+In our example, we also added a ProKey prop to illustrate how you can make it more dynamic.
+
+```tsx
+import { AddToCalendarButton } from 'add-to-calendar-button-react';
+import type { AddToCalendarButtonType } from 'add-to-calendar-button-react';
+
+export default function atcb(props: AddToCalendarButtonType) {
+  return (
+    <AddToCalendarButton proKey={props.prokey} ></AddToCalendarButton>
+  );
+}
 ```
 
-## Step 2: Use it
+## Step 3: Use it
+
+You can now import this component wherever you need it and use it like any other Astro component.
 
-Start using it by adding a `<add-to-calendar-button proKey="prokey-of-your-event" />` tag to your source code.
+Your code block could look like the following.
+
+```astro
+---
+import AddToCalendarButton from '../components/AddToCalendarButton.tsx';
+import Layout from '../layouts/Layout.astro';
+---
+<Layout>
+  <AddToCalendarButton client:only="react" prokey="prokey-of-your-event" />
+</Layout>
+```