@@ -8,18 +8,44 @@ headerImageAlt: Blick auf die Hamburger Innenstadt am Rathausmarkt bei Sonnenunt
headerImageTag: Moritz Kindler (Unsplash)
---
## RepoCard
## Markdown Bilder
Dieses Kartenelement soll Informationen zu Repositories auf GitHub oder GitLab übersichtlich darstellen. Die Informationen werden über die APIs der jeweiligen Anbieter dynamisch abgerufen – immer dann, wenn die Seite neu gebaut wird.
Bilder können in Markdown fie folgt verwendet werden: ``
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:
```
<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" />
```
<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" />
## Bildergalerie
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).
@@ -62,31 +88,57 @@ Die Bildergalerie erstreckt sich optional über die gesamte Breite des Viewports
## Menschen
Um Menschen, Teammitglieder und Kontaktpersonen darzustellen gibt es die `<People>`-Komponente. Über das `names`-Attribut können eine oder mehrere Personen referenziert werden. Die hinterlegten Informationen zu einer Person stammen aus dem `content/people`-Ordner und sie sind dort ebenfalls als Markdown/MDX-Datei hinterlegt.
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.
Für den einmaligen Gebrauch lässt sich auch die `<Member>`-Komponente nutzen, die alle Informationen direkt als Parameter aufnehmen kann, zum Beispiel:
You can use default markdown images like this: ``
<Image img="images/home/nasa-Q1p7bh3SHj8-unsplash_fchh.jpg" caption="This is a Caption. Write something here" subCaption="And this is a subcaption for the Author/Rights information" />
## Button
Technically it's a link, but it looks like a 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" />`
Mit dem `newTab`-Attribut wird der hinterlegte Link in einem neuen Tab oder Fenster geöffnet: `<Button text="Click me!" newTab href="http://www.google.de" type="primary"/>`
<Button
text="Click me! But in new tab"
...
...
@@ -95,10 +147,23 @@ Technically it's a link, but it looks like a button:
type="primary"
/>
## Button Link in new tab with icon
## Button mit Icon (Link öffnet in neuem Tab)
Mit dem `icon`-Attribut kann der Button mit beliebigen Icons aus dem [IBM Carbon Iconset](https://carbondesignsystem.com/guidelines/icons/library/) verziert werden.
```
<Button
text="Click me! I have an icon"
newTab
href="http://www.google.de"
type="primary"
icon="Email"
iconSize="24"
/>
```
<Button
text="Click me! I have icon"
text="Click me! I have an icon"
newTab
href="http://www.google.de"
type="primary"
...
...
@@ -120,8 +185,6 @@ Technically it's a link, but it looks like a button:
rounded
size="lg"
icon="DotMark"
iconPackage="Carbon"
iconSize="sm"
/>
## ActionBox
...
...
@@ -133,7 +196,6 @@ Technically it's a link, but it looks like a button:
text="Primary Button"
icon="Launch"
newTab
iconSize={24}
type="primary"
href="https://www.google.de"
/>
...
...
@@ -141,7 +203,6 @@ Technically it's a link, but it looks like a button:
text="Tertiary Button"
icon="Launch"
newTab
iconSize={24}
type="tertiary"
href="https://www.google.de"
/>
...
...
@@ -173,51 +234,21 @@ Technically it's a link, but it looks like a button:
]}
/>
## Member (single Use)
## RepoCard
<Member
image="https://picsum.photos/id/1005/500/500"
name="Max Mustermann"
position="CEO"
email="max@musterfirma.de"
linkedin="https://www.google.de"
twitter="https://www.google.de"
className="not-prose"
/>
Dieses Kartenelement soll Informationen zu Repositories auf GitHub oder GitLab übersichtlich darstellen. Die Informationen werden über die APIs der jeweiligen Anbieter dynamisch abgerufen – immer dann, wenn die Seite neu gebaut wird.
