wip: documentation

src/components/ButtonWrapper.tsx

@@ -48,7 +48,7 @@ type Props = BaseProps & IconOrWithoutIcon & CircularOrRounded;
 const ButtonWrapper: React.FC<Props> = ({
   iconPackage = "Carbon",
   icon,
-  iconSize,
+  iconSize = "24",
   ...restProps
 }) => {
   return icon ? (

src/pages/de/dokumentation/beispiele.mdx

@@ -16,7 +16,7 @@ Bilder können in Markdown fie folgt verwendet werden: `![](images/slider/hambur
 ## Bilder mit Beschriftung
 
 Da die Markdown-Syntax keine Möglichkeit bietet, Beschriftungen einzufügen, gibt es dafür eine eigene `<Image>`-Komponente, die zum Beispiel so verwendet werden kann:
-```
+```jsx
 <Image img="images/slider/hamburg_unsplash.jpg" caption="This is a Caption. Write something here" subCaption="And this is a subcaption for the Author/Rights information" />
 ```
 
@@ -26,7 +26,7 @@ Da die Markdown-Syntax keine Möglichkeit bietet, Beschriftungen einzufügen, gi
 
 Die Bildergalerie erstreckt sich optional über die gesamte Breite des Viewports (sog. `full bleed layout`) und ermöglicht "endloses" Scrolling und braucht deswegen eine gewisse Anzahl an Bildern um richtig zu funktionieren. Bilder können wahlweise mit einer URL von externen Quellen eingebettet werden, oder direkt in das Bilderverzeichnis hochgeladen werden. Die Galerie basiert auf der freien [Keen-Slider-Bibliothek](https://keen-slider.io/). Bilder können einen Untertitel enthalten, sowie einen zweiten Sub-Untertitel (zum Beispiel für Urheberhinweise). Außerdem können die Bilder mit einem `tag` versehen werden (zum Beispiel für eine Datumsangabe).
 
-```
+```jsx
 <ImageGallery
   fullBleed
   files={[
@@ -86,17 +86,17 @@ Die Bildergalerie erstreckt sich optional über die gesamte Breite des Viewports
   ]}
 />
 
-## Menschen
+## Menschen (wiederholte Verwendung)
 
 Um Menschen, Teammitglieder und Kontaktpersonen darzustellen, die häufiger auf der Webseite erwähnt werden gibt es die `<People>`-Komponente. Über das `names`-Attribut können eine oder mehrere Personen über ihren Vornamen referenziert werden, z.B, `<People names={["Leia", "Luke"]} />`. Die hinterlegten Informationen zu einer Person stammen aus dem `content/people`-Ordner und sie sind dort ebenfalls als Markdown/MDX-Datei hinterlegt.
 
 <People names={["Leia", "Luke"]} />
 
-## Member (single Use)
+## Menschen (einmalige Verwendung)
 
-Für den einmaligen Gebrauch lässt sich auch die `<Member>`-Komponente nutzen, die alle Informationen direkt als Parameter aufnehmen kann, zum Beispiel:
+Für den einmaligen Gebrauch lässt sich auch die `<Member>`-Komponente nutzen, die alle Informationen direkt als Parameter übergeben bekommt, zum Beispiel:
 
-```
+```jsx
 <Member
   image="https://picsum.photos/id/1005/500/500"
   name="Max Mustermann"
@@ -132,9 +132,13 @@ Für den einmaligen Gebrauch lässt sich auch die `<Member>`-Komponente nutzen,
 
 ## Button
 
-Die `<Button>`-Komponente kann dazu verwendet werden, auf interne oder externe Seiten zu verlinken: `<Button text="Click me!" href="http://www.google.de" type="primary" />`
+Die `<Button>`-Komponente kann dazu verwendet werden, auf interne oder externe Seiten zu verlinken: `<Button text="Click me!" href="http://www.google.de" type="primary" />`. Sie verfügt über drei visuelle Varianten: `primary`, `secondary` und `tertiary`.
 
-<Button text="Click me!" href="http://www.google.de" type="primary" />
+<div className="fc-flex fc-gap-2">
+<Button text="Primary Button" href="http://www.google.de" type="primary" />
+<Button text="Secondary Button" href="http://www.google.de" type="secondary" />
+<Button text="Tertiary Button" href="http://www.google.de" type="tertiary" />
+</div>
 
 ## Button (Link öffnet in neuem Tab)
 
@@ -151,14 +155,13 @@ Mit dem `newTab`-Attribut wird der hinterlegte Link in einem neuen Tab oder Fens
 
 Mit dem `icon`-Attribut kann der Button mit beliebigen Icons aus dem [IBM Carbon Iconset](https://carbondesignsystem.com/guidelines/icons/library/) verziert werden.
 
-```
+```jsx
 <Button
   text="Click me! I have an icon"
   newTab
   href="http://www.google.de"
   type="primary"
   icon="Email"
-  iconSize="24"
 />
 ```
 
@@ -168,14 +171,26 @@ Mit dem `icon`-Attribut kann der Button mit beliebigen Icons aus dem [IBM Carbon
   href="http://www.google.de"
   type="primary"
   icon="Email"
-  iconSize="24"
 />
 
 ## Icon
+Die `<Icon>`-Komponente kann auch alleine außerhalb eines Buttons verwendet werden: `<Icon name="Email" size="24" />`
 
 <Icon name="Email" size="24" />
 
 ## Pill
+Die `<Pill>`-Komponente wird üblicherweise für Tagging-Zwecke verwendet:
+```jsx
+<Pill
+  title="Click me"
+  href="http://www.google.de"
+  newTab
+  type="default"
+  rounded
+  size="lg"
+  icon="DotMark"
+/>
+```
 
 <Pill
   title="Click me"
@@ -188,6 +203,29 @@ Mit dem `icon`-Attribut kann der Button mit beliebigen Icons aus dem [IBM Carbon
 />
 
 ## ActionBox
+Die `<ActionBox>` beinhaltet üblicherweise einen sogenannten "Call to Action", zum Beispiel die Anmeldung zu einem Newsletter, den Kauf eines Produkts oder einer Eintrittskarte.
+```jsx
+<ActionBox
+  title="Action Box Title"
+  description="Action Box Subtitle"
+>
+  <Button
+    text="Primary Button"
+    icon="Launch"
+    newTab
+    type="primary"
+    href="https://www.google.de"
+  />
+  <Button
+    text="Tertiary Button"
+    icon="Launch"
+    newTab
+    type="tertiary"
+    href="https://www.google.de"
+  />
+</ActionBox>
+```
+
 <ActionBox
   title="Action Box Title"
   description="Action Box Subtitle"
@@ -206,11 +244,10 @@ Mit dem `icon`-Attribut kann der Button mit beliebigen Icons aus dem [IBM Carbon
     type="tertiary"
     href="https://www.google.de"
   />
-  
 </ActionBox>
 
 
-## Accordion
+## Accordionpublic
 
 <Accordion title="Enabling a data-based circular economy">
   The Fab City concept provides a promising pathway towards a more resilient and

src/pages/de/dokumentation/konfiguration.mdx

@@ -14,30 +14,8 @@ Die Fab City OS Suite ist ein Template für eine Webseite auf Basis des [Static
 - Die interaktive React-Komponent [FCOS Suite Map](https://gitlab.fabcity.hamburg/fcos-suite/fcos-suite-map)
 - Features für Mehrsprachigkeit
 
-## Lokale Installation
+## .env Variablen
 
-Um die Webseite auf dem eigenen, lokalen Rechner zum Laufen zu bekommen genügen ein paar wenige Schritte:
+## Toolbar
 
-**Voraussetzung für die Nutzung ist, dass Git und Node.js auf dem lokalen Rechner installiert sind.**
-
-1. Klone das Projekt mit dem Befehl `git clone https://gitlab.fabcity.hamburg/fcos-suite/fcos-suite-astro.git`
-2. Wechsle in den Ordner `fcos-suite-astro`, der im vorherigen Schritt erstellt wurde
-3. Installiere alle notwendigen Bibliotheken mit `npm install`
-4. Führe `npm run dev` aus, um den lokalen Entwicklungsserver zu starten
-4. Öffne einen Browser mit der Location `http://localhost:3000/`
-
-## Deployment auf einem Webserver/Webspace
-
-Mit dem Befehl `npm run build` baut Astro eine statische Version der Webseite. Der Output dieses Schritts landet im Ordner `dist`. Dieser Ordner kann nun manuell auf einem beliebigen Webspace oder Webserver deployed werden (zum Beispiel via FTP(S) oder SSH/SFTP). Der Server muss dabei keine besonderen Voraussetzungen erfüllen. Jedes günstige Webhosting-Produkt sollte ausreichen um diese Seite auszuliefern.
-
-## Versionierung des eigenen Contents in einem Git Repository
-
-Wenn ihr euren eigenen Content in die Seite eingepflegt habt, und diesen Content auch auf Git versionieren wollt, dann müsst ihr dazu nur das hinterlegte git remote anpassen:
-
-1. Erstellt ein neues, leeres Repository auf eurer präferierten Code-Hosting-Plattform (z.B. GitHub, GitLab, BitBucket oder Gitea)
-2. Via `git remote set-url origin https://github.com/OWNER/REPOSITORY.git` ändert ihr das remote Ziel (der Link muss dabei mit eurem neuen Repository ersetzt werden)
-3. Mit einem normalen `git add`, `git commit` und einem anschließenden `git push` wird dann euer lokaler Stand in euer neues Repository gepusht
-
-## Automatisches Deployment (CI/CD)
-
-Um automatisch eine neue Version der Seite zu deployen, immer wenn sich der Content in eurem Git repository ändert, braucht es eine sogenannte `Pipeline` (jede Code-Hosting-Platform verwendet ein etwas anderes Vokabular für diese Funktion). Die Syntax dieser Pipelines hängt von der jeweiligen Code-Hosting-Platform ab. Außerdem variiert diese Definition je nachdem, wie ihr die statische Seite auf euren Server/Webspace deployen wollt. Ein Beispiel für die Kombination aus GitLab und SFTP findet ihr in diesem `fchh-suite-astro` Repository in Form [der Datei `.gitlab-ci.yml`](https://gitlab.fabcity.hamburg/fcos-suite/fcos-suite-astro/-/blob/main/.gitlab-ci.yml).
\ No newline at end of file
+## Social Media Links