Skip to content

Commit 8234a15

Browse files
jekuerjekuer
committed
astro update
1 parent 954a44f commit 8234a15

File tree

2 files changed

+87
-62
lines changed

2 files changed

+87
-62
lines changed

‎src/de/integration/astro.md‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,63 @@
11

22
# Wie man die Buttons und RSVP-Formulare mit Astro nutzt
33

4-
## Schritt 0: Wähle ein Vorgehen
4+
## Schritt 0: Wähle das beste Vorgehen
55

6-
Für Static Site Generators (SSG) empfehlen wir generell die Nutzung des Add to Calendar Buttons via CDN.
6+
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.
7+
Hierbei muss du darauf achten, dass das Ganze nur client-seitig geschieht. Zudem ist dieser Weg nicht ganz ideal.
78

8-
Alternativ kannst du aber auch das npm Package installieren und das Modul über eine Observer-Funktion implementieren.
9+
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"`.
910

10-
Wir beschreiben nachfolgend alle Optionen.
11+
## Schritt 1: Setup
1112

12-
## Schritt 1: Einrichtung
13+
### Erstelle eine neue Komponente
1314

14-
### Option A: Integration via CDN
15+
Erstelle eine neue Komponente im components-Verzeichnis deines Astro-Projekts.
16+
Nenne diese "AddtoCalendarButton.tsx".
17+
Falls du mehrere Buttons nutzen möchtest, kannst du entweder mehrere Komponenten erstellen oder das Ganze über entsprechende Props dynamisch gestalten.
1518

16-
Lade das Skript, indem du den nachfolgenden "Script Tag" im head-Bereich deiner Webseite einfügst.
19+
### Installiere das React-Wrapper npm-Package
1720

18-
Das Skript lädt automatisch auf nicht-blockierende Art und Weise. Daher ist es im Zweifel nicht entscheidend, wo genau es platziert wird.
21+
Installiere das Package über die npm Registry.
1922

20-
```html
21-
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
23+
```bash
24+
npm install add-to-calendar-button-react
2225
```
2326

24-
### Option B: npm Installation
25-
26-
Alternativ kannst du das Package auch aus der npm Registry installieren.
27+
...und importiere es in deine Komponente.
2728

28-
```bash
29-
npm install add-to-calendar-button
29+
```tsx
30+
import { AddToCalendarButton } from 'add-to-calendar-button-react';
3031
```
3132

32-
...und einen Observer aufsetzen, der das Skript entsprechend lädt:
33-
34-
```html
35-
<script type="module" hoist>
36-
const observer = new IntersectionObserver((entries) => {
37-
for (const entry of entries) {
38-
if (!entry.isIntersecting) continue;
39-
observer.disconnect();
40-
import('../../node_modules/add-to-calendar-button/dist/module/index.js');
41-
}
42-
});
43-
const instances = document.querySelectorAll('add-to-calendar-button');
44-
for (const instance of instances) observer.observe(instance);
45-
</script>
33+
## Schritt 2: Definiere den Button
34+
35+
Definiere den Button in deiner Komponente.
36+
In unserem Beispiel haben wir den ProKey als Prop definiert, um ihn dynamisch zu halten.
37+
38+
```tsx
39+
import { AddToCalendarButton } from 'add-to-calendar-button-react';
40+
import type { AddToCalendarButtonType } from 'add-to-calendar-button-react';
41+
42+
export default function atcb(props: AddToCalendarButtonType) {
43+
return (
44+
<AddToCalendarButton proKey={props.prokey} ></AddToCalendarButton>
45+
);
46+
}
4647
```
4748

48-
## Schritt 2: Loslegen
49+
## Schritt 3: Loslegen
50+
51+
Du kannst die Komponente nun überall importieren, wo sie benötigt wird und sie wie jede andere benutzten.
4952

50-
Beginne mit der Nutzung, indem du einen `<add-to-calendar-button proKey="prokey-deines-events" />` Tag in deinen Quellcode einfügst.
53+
Dein Code kann hierbei bspw. wie folgt aussehen.
54+
55+
```astro
56+
---
57+
import AddToCalendarButton from '../components/AddToCalendarButton.tsx';
58+
import Layout from '../layouts/Layout.astro';
59+
---
60+
<Layout>
61+
<AddToCalendarButton client:only="react" prokey="prokey-deines-events" />
62+
</Layout>
63+
```

‎src/integration/astro.md‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,62 @@
11

22
# How to integrate Buttons and RSVP Forms with Astro
33

4-
## Step 0: Pick a solution
4+
## Step 0: Pick the right solution
55

6-
For static site generators (SSG), we generally recommend to load the Add to Calendar Button script via CDN.
6+
You can simply load the Add to Calendar Button script via CDN and integrate as described at the default [HTML guide](/integration/html.html).
7+
However, this some at some cost and you would need to take precaution to only load and render it on the client.
78

8-
Alternatively, you can still use the npm package and include the module via an observer function.
9-
10-
We will highlight all options below.
9+
We recommend to use the React wrapper npm package, create a custom JSX component, and then integrate this component with `client:only="react"` attribute.
1110

1211
## Step 1: Setup
1312

14-
### Option A: Integrate via CDN
13+
### Create a new component
1514

16-
Load the respective script by adding the following script tag to the head section of your website.
15+
Create a new component in the components folder and name it "AddtoCalendarButton.tsx".
16+
If you have multiple buttons, you can either create multiple components or make it accept the props you need to customize it.
1717

18-
The script will be loaded in a non-blocking way. So you don't need to worry about where to include it exactly.
18+
### Add the React wrapper package
1919

20-
```html
21-
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
22-
```
20+
Install the package from the npm registry.
2321

24-
### Option B: npm installation
22+
```bash
23+
npm install add-to-calendar-button-react
24+
```
2525

26-
Alternatively, install the package from the npm registry.
26+
...and import it into your new component:
2727

28-
```bash
29-
npm install add-to-calendar-button
28+
```tsx
29+
import { AddToCalendarButton } from 'add-to-calendar-button-react';
3030
```
3131

32-
...and setup an Observer to load the script properly:
33-
34-
```html
35-
<script type="module" hoist>
36-
const observer = new IntersectionObserver((entries) => {
37-
for (const entry of entries) {
38-
if (!entry.isIntersecting) continue;
39-
observer.disconnect();
40-
import('../../node_modules/add-to-calendar-button/dist/module/index.js');
41-
}
42-
});
43-
const instances = document.querySelectorAll('add-to-calendar-button');
44-
for (const instance of instances) observer.observe(instance);
45-
</script>
32+
## Step 2: Define the button
33+
34+
Define the button in your new component.
35+
In our example, we also added a ProKey prop to illustrate how you can make it more dynamic.
36+
37+
```tsx
38+
import { AddToCalendarButton } from 'add-to-calendar-button-react';
39+
import type { AddToCalendarButtonType } from 'add-to-calendar-button-react';
40+
41+
export default function atcb(props: AddToCalendarButtonType) {
42+
return (
43+
<AddToCalendarButton proKey={props.prokey} ></AddToCalendarButton>
44+
);
45+
}
4646
```
4747

48-
## Step 2: Use it
48+
## Step 3: Use it
49+
50+
You can now import this component wherever you need it and use it like any other Astro component.
4951

50-
Start using it by adding a `<add-to-calendar-button proKey="prokey-of-your-event" />` tag to your source code.
52+
Your code block could look like the following.
53+
54+
```astro
55+
---
56+
import AddToCalendarButton from '../components/AddToCalendarButton.tsx';
57+
import Layout from '../layouts/Layout.astro';
58+
---
59+
<Layout>
60+
<AddToCalendarButton client:only="react" prokey="prokey-of-your-event" />
61+
</Layout>
62+
```

0 commit comments

Comments
 (0)