Markdown is de programmeertaal voor posts op deze website. Hier vind je een korte beschrijving over het gebruik van markdown specifiek voor deze website. De markdown guide biedt meer geavanceerde informatie over do’s en don’ts. Als je zelf een handleiding wil maken voor de Fablab website kun je dus de volgende codes gebruiken om volledig opgemaakte tekst aan te leveren. Je kunt ook online markdown schrijven in 1 van de vele editors zoals stackedit. Let wel op dat speciale opties, zoals shortcodes enkel op onze website werken en niet in andere online editors.
Headings #
Headings zoals hierboven genereer je op de onderstaande manier. Start bij voorkeur altijd met H2 aangezien H1 automatisch wordt gebruikt voor de ’title’ parameter in je frontmatter. Dit zorgt ervoor dat onze zoekmachine en externe zoekmachines de content beter kunnen indexeren.
```markdown
# H1 (grootste)
## H2 (sub heading)
### H3 (sub-sub heading etc)
```Typography #
Je kunt ook gemakkelijk de tekstopmaak veranderen.
Bold #
**bold text**Dit is dikgedrukte tekst
Italic #
_Italic text_En dit is schuingedrukte tekst
Strikethrough #
~~Doorgestreept~~Doorgestreept
Highlight #
Dit is zeer <mark>belangrijke</mark> tekst.Dit is zeer belangrijke tekst.
Links #
Hyperlinks voeg je zo toe:
In deze tekst zit een hyperlink naar [google](https://google.nl).In deze tekst zit een hyperlink naar google.
Je kunt ook linken naar andere secties van deze pagina. Bijvoorbeeld: lijstjes.
[lijstjes](#lists)let op: gebruik geen hoofdletters bij de verwijzijng. Bij dit soort anchor links vervang je spaties door een ‘-’.
Wil je naar een andere pagina op de website verwijzen? Gebruik dan ‘ref’. Op deze manier weten we altijd zeker dat onze links werken. ‘prijslijst’ is hier de naam van het mapje. De tekst achter ‘ref’ wordt dus bepaalt door je map structuur. ‘hier’ is de tekst met de hyperlink en “prijslijst” is de titel als je hoverd. (Links naar andere pagina’s zijn handig voor gebruikers en goed voor SEO)
klik [hier]({{< ref "wiki/introductie/prijslijst" >}} "prijslijst") om naar de prijslijst te gaan.
of
klik [hier]({{< ref "wiki/introductie/prijslijst#lasersnijden" >}} "prijslijst") om naar lasersnijden op de prijslijst te gaan.klik hier om naar de prijslijst te gaan.
of
klik hier om naar de prijslijst te gaan.
Lists #
Zogenaamde ‘ordered lists’
1. First item
2. Second item
3. Third item- First item
- Second item
- Third item
‘unordered lists’
- First item
- Second item
- Third item- First item
- Second item
- Third item
Blockquotes #
Om een blockquote te maken voeg je een “>” toe aan het begin van een paragraaf
> Dorothy followed her through many of the beautiful rooms in her castle.
>
> from a famous book ;)Dit ziet er als volgt uit:
Dorothy followed her through many of the beautiful rooms in her castle.
from a famous book ;)
Callout #
Je kunt een stuk tekst ook benadrukken met ‘callouts’. Dit doe je door middel van een ‘short-code’.
{{< callout >}} Dit is opvallende tekst {{< /callout >}}
{{< callout "tip" >}} Dit is opvallende hulp tekst {{< /callout >}}
{{< callout "caution" >}} Dit is opvallende waarschuwings tekst {{< /callout >}}
{{< callout "danger" >}} Dit is opvallende 'gevaarlijke' tekst {{< /callout >}}Voorbeeld:
Dit is opvallende tekst
Dit is opvallende hulp tekst
Dit is opvallende waarschuwings tekst
Dit is opvallende ‘gevaarlijke’ tekst
De overige markdown op deze pagina kun je ook gebruiken binnenin een callout. Een geavanceerde versie van de callout ziet er als volgt uit (de icons zijn open-source en afkomstig van tabler):
{{< callout context="tip" title="Did you know?" icon="outline/rocket" >}}
De icons van [tabler](https://tabler-icons.io) zijn geintegreerd in deze website.
{{< /callout >}}Did you know?
De icons van tabler zijn geintegreerd in deze website.
Voetnoot #
Dit is een regel met voetnoot. Klik om te bekijken [^1]
[^1]: Dit is voetnoot nummer 1Dit is een regel met voetnoot. Klik om te bekijken 1
Horizontal rule #
Scheidt elementen van elkaar met een horizontale balk
---Definitie #
De definitie van insanity is:
- Insanity
- doing the same thing over and over and expecting different results
Term
: doing the same thing over and over and expecting different resultsAbbreviation #
Een abbreviation is een standaard html element. Het heeft een browser specifieke opmaak en helpt om duidelijk te maken dat het om een acroniem of initialisme gaat. Bijvoorbeeld ADD zonder context kan gelezen worden als het Engelse woord ‘add’ of het initialisme ‘attention deficit disorder’. Het helpt ook om acroniemen zoals ‘NAVO’ te duiden. Er zijn daarom shortcodes toegevoegd om dit html element makkelijk te implementen (al is dit natuurlijk geen noodzakelijkheid). Veel gebruikte afkortingen kun je toevoegen in de TOML onder ‘data/abbreviations/nl.toml’. Hierna kun je ze als volgt gebruiken:
{{< abbr "Hugo" >}} is a {{< abbr "SSG" >}}.Hugo is a SSG.
Afkortingen die je niet vaak gaat gebruiken kun je ook direct uitspellen zonder dit toe te voegen in het data bestand:
_{{< abbr "Enigma" "European numbers information gathering and monitoring association">}}_.Enigma.
Het is grammaticaal gezien trouwens nog steeds goed om de eerste keer dat je een afkorting die niet voor iedereen bekend is toelicht als volgt:
BRB (Be Right Back).
E-Mail #
Je kunt een ‘obfuscated’ e-mail adres invoegen met de volgende shortcode (Via generated CSS):
{{< email >}}Dit gebruikt het standaard Fablab e-mail adres uit de Hugo Config. Vul een e-mail in om dit te overschrijven:
{{< email "email@example.com" >}}< kbd > #
<kbd> is een standaard html element dat gebruikt wordt om op een visuele manier een toetsenbord input weer te geven. Deze website heeft css opmaak waardoor je handige toetsenbord combinaties duidelijk kan weergeven. Gebruikers kunnen bijvoorbeeld met ⌘ Command + K (Mac OS) of ⌃ Control + K (Windows) de zoekfunctie op deze website openen. Met behulp van een kbd geneator kun je de html code voor dit soort sneltoetsen automatisch genereren.
<kbd>⌘ Command</kbd> + <kbd>K</kbd> (Mac OS)
of <kbd>⌃ Control</kbd> + <kbd>K</kbd> (Windows) Media #
Er kunnen verschillende type media gebruikt worden, waaronder afbeeldingen en video’s. Afbeeldingen en video’s moeten idealiter geplaatst worden in dezelfde folder als waar het markdown bestand staat. De voorkeur gaat uit naar webp, png of jpg bestanden. Heic wordt niet ondersteund.
i.e. /content/mijnpost/mijnpost.md & /content/mijnpost/mijnafbeelding.jpg of /content/mijnpost/images/mijnafbeelding.jpg.
Afbeelding #
Deze website zet plaatjes automatisch om naar een efficient webp formaat voor verschillende devices. Je hoeft daar zelf niks aan te doen. De tekst tussen de brackets [ ] is de ‘alt-text’ die gebruikt wordt voor screen-readers. De standaard verhouding voor horizontale (landscape) afbeeldingen is 16x9. Het grootste formaat waar we naar schalen is 1600x900px. Voor de lightbox implementatie geldt hetzelfde, maar deze support verticale (portrait) afbeeldingen van 9x16 en 900x1600px. Verder is 4x3 (Iphone) standaard 1600x1200px en voor vierkante 1:1 afbeeldingen 1600x1600px (De afbeelding mag dus veel groter zijn, maar dit is waar naar geschaald wordt).
Let op: in versie 3.2 van Thulite Images (de image processor voorheen Hyas) is support voor portrait afbeeldingen weggevallen met de standaard ‘figure’ shortcode. Hier wil ik in de toekomst nog naar kijken, maar de lightbox code heeft nog wel support voor portrait afbeeldingen mocht dat nodig zijn.
let op: de standaard processing lijkt witwaardes grijs te maken wanneer je een webp bestand als source gebruikt (dubbele compressie). Gebruik dus liever jpg of png bestanden aangezien Hugo deze toch al omzet naar webp
Voor een afbeelding met betere conversie, subtekst en eigen parameters gebruiken we een custom shortcode. Een minimale versie ziet er als volgt uit:
{{< figure
src="fablab_ai.png"
alt="dit is ons logo"
>}}
Een uitgebreidere versie ziet er als volgt uit (klik hier voor alle parameters: ):
{{< figure
src="fablab_stock.png"
alt="Dall-E 3 custom"
title="A beautiful picture made with Dall-e"
caption="Dit is een beschrijving onder de afbeelding"
>}}
Gallery #
Er kan een responsive gallery gemaakt worden doormiddel van de afbeelding shortcodes en het gebruik van het html voorbeeld hieronder. Standaard bestaat de gallery uit 2 kolommen. Door de waarde ‘size=“medium”’ toe te voegen achter gallery verander je de layout naar 3 kolommen (werkt goed voor portrait afbeeldingen). De ‘class’ maakt in dit geval de hoeken rond.
{{< gallery >}}
{{< figure src="fablab_ai.png" class="rounded-3" >}}
{{< figure src="fablab_ai.png" class="rounded-3" >}}
{{< figure src="fablab_ai.png" >}}
{{< figure src="fablab_ai.png" >}}
{{< /gallery >}}Standaard
Medium
Lightbox #
Soms wil je dat gebruikers kunnen klikken op een afbeelding om een grotere afbeelding te laden. Hiervoor is de ‘photoswipe’ package geimplementeerd. De alt is beter voor SEO en accessibility doeleinden. De caption is optioneel en voegt tekst toe aan een afbeelding wanneer je erop klikt. Meestal gebruik je een lightbox in combinatie met een gallery (om resources te besparen. Iedere keer dat je een gallery op een pagina zet moet er javascript verwerkt worden) (let op de lightbox is nu enkel te gebruiken met een gallery) Caption is optioneel. Binnen de caption kun je ook html gebruiken om bijvoorbeeld tekst dik te drukken.
(Je kunt de aspect ratio van de gallery ook veranderen naar 4:3 voor Iphone afbeeldingen indien je een lightbox gebruikt. Dit doe je door ‘aspectRatio=“4:3” toe te voegen aan de gallery shortcode.)
Update 19/10/24: De lightbox is aangepast zodat deze nu nieuwe parameters accepteert (eigenlijk bedacht voor een specifieke blog post, maar wel breder inzetbaar)
{{< gallery size="medium" >}}
{{< lightbox src="fablab_ai.png" alt="stock image" caption="<b>titel</b><br>dit is een beschrijving" >}}
{{< lightbox src="fablab_ai.png" alt="stock image" caption="dit is een beschrijving" >}}
{{< lightbox src="fablab_ai.png" alt="stock image" caption="dit is een beschrijving" >}}
{{< /gallery >}}
{{< gallery aspectRatio="4:3" size="small" >}}
{{< lightbox src="fablab_43.png" alt="stock image" caption="<b>titel</b><br>dit is een beschrijving" >}}
{{< lightbox src="fablab_43.png" alt="stock image" >}}
{{< lightbox src="fablab_43.png" alt="stock image" >}}
{{< lightbox src="fablab_43.png" alt="stock image" >}}
{{< lightbox src="fablab_43.png" alt="stock image" caption="<b>titel</b><br>dit is een beschrijving" >}}
{{< lightbox src="fablab_43.png" alt="stock image" >}}
{{< lightbox src="fablab_43.png" alt="stock image" >}}
{{< lightbox src="fablab_43.png" alt="stock image" >}}
{{< /gallery >}}
Update 19/10/24: De lightbox is vrij rigoreus aangepast zodat deze nu nieuwe parameters accepteert (eigenlijk bedacht voor een specifieke blog post, maar wel breder inzetbaar). Deze aanvullende parameters zijn ’transparentBackground’ voor een transparante achtergrond in plaats van de hoofdkleur bij png’s. En het aanpassen van de gridgap / toevoegen van optionele extra css classes. In het onderstaande voorbeeld is dit gebruikt om de afbeeldingen van een 4:3 gallery kleiner weer te geven. Ook kun je nu basis markdown gebruiken in de captions, zoals dikgedrukte tekst (links werken niet in de lightbox).
{{< gallery aspectRatio="4:3" caption="[Achtergrond informatie](https://google.com/)" class="w-75" gap="50px" >}}
{{< lightbox src="fablab_ai.png" caption="**test 1**" transparentBackground="true" >}}
{{< lightbox src="fablab_ai.png" caption="**test 2**" transparentBackground="true" >}}
{{< /gallery >}}GIF! #
Zomervakantie 2024 update: eindelijk GIF support! Onderstaande voorbeeld is met een directe link. Dit werkt makkelijk, maar levert helaas wel kapotte afbeeldingen op als de afbeelding van de externe server verdwijnt.
Je kan GIF’s dus ook downloaden en toevoegen net als afbeeldingen:
Maak trouwens geen gigantische ‘gifs’. Er vindt geen conversie plaats op deze afbeeldingen waardoor dit de site en ook onze SEO zou verslechteren. Dus geen lange instructie GIF’s (doe dat als video) of super hoge resolutie GIF’s van meerdere mb’s. Technisch gezien werken html embeds van websites als GIPHY trouwens ook op deze website, maar de huidige CSP zorgt ervoor dat dit niet werkt en we willen niet dat externe partijen zomaar cookies plaatsen.
Video #
De shortcode is als volgt:
{{< video src="videonaam" autoplay="true" muted="true" loop="true" thumbnail="fablab_ai.png" >}}Youtube #
Hugo ondersteunt standaard Youtube video embedding. Hoewel dit mooi klinkt, is het niet iets dat ik aanraad. Youtube (Google) schendt namelijk de privacy van de gebruiker op een website door onder andere cookies te plaatsen. Het is dus beter om de video lokaal te hosten of door te linken via een thumbnail image. Als je toch per se een direct youtube embed wil, doe dit dan in ieder geval in privacy enhanced mode door het gebruik van de onderstaande shortcode (Title en Autoplay zijn enkele opties):
Youtube embed
{{< youtube-privacy dQw4w9WgXcQ >}}Werkt tijdelijk niet met onze huidige CSP
Youtube button
(fablab_ai.png is de thumbnail in dit geval)
{{< youtube-button dQw4w9WgXcQ "fablab_ai.png" >}}
SVG #
SVG’s kun je als asset en inline gebruiken. Inline betekent dat je de gehele svg code kopieert in je ‘svg’ statement:
<svg class="coffee svg-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 14c.83.642 2.077 1.017 3.5 1 1.423.017 2.67-.358 3.5-1s2.077-1.017 3.5-1c1.423-.017 2.67.358 3.5 1"></path><path d="M8 3A2.4 2.4.0 007 5a2.4 2.4.0 001 2"></path><path d="M12 3a2.4 2.4.0 00-1 2 2.4 2.4.0 001 2"></path><path d="M3 10h14v5a6 6 0 01-6 6H9a6 6 0 01-6-6v-5z"></path><path d="M16.746 16.726a3 3 0 10.252-5.555"></path></svg>Je kunt echter ook SVG’s opslaan als page resource of global resource en ernaar verwijzen via de inline-svg shortcode. In deze shortcode kun je extra variabelen meenemen en svg’s zelfs monochrome maken om zo light/dark mode te respecteren.
{{< inline-svg src="fablab-logo.svg" width="64px" height="57px" class="svg-inline-custom svg-monochrome" >}}Klik hier voor meer informatie over svg icons.
3D Modellen #
Na wat ergernis met de Fusion 360 3D viewer heb ik de standaard HTML model-viewer (van Google) geïmplementeerd. Dit is een snelle en krachtige 3D viewer. Op dit moment is er helaas geen ondersteuning voor “.STL” bestanden om het aantal scripts te beperken. De model-viewer werkt standaard namelijk met “.GLB” files. Dit is een 3D formaat dat veel wordt gebruikt voor AR, maar gelukkig kun je online via diverse websites of met Blender gemakkelijk “.GLB” bestanden converteren naar “.STL”.
Naast een 3D bestand heb je ook een “poster.webp” bestand nodig. Dit is een kleine afbeelding van je model dat zichtbaar is wanneer het model nog aan het laden is. Een poster die identiek is aan je 3D model kun je genereren via de model-viewer editor.
Enkele opties zijn:
- auto-rotate -> Draait het model automatisch wanneer er geen interactie is
- disable-zoom -> (kan handig zijn bij snel scrollen op desktops)
- alt -> Beschrijving
- poster -> Pad van je poster
- src -> 3D Model pad
- Height -> Hoogte in pixels (standaard 325px)
- field-of-view
- camera-orbit -> Samen met FOV te gebruiken voor startpositie
Gebruik de editor ook om te spelen met de instellingen in een preview mode. Hier kun je ook makkelijk de field-of-view en camera-orbit waardes vinden voor een bepaalde view.
Belangrijk: zet “modelviewer: true” in de frontmatter om het script te laden. Doe dit enkel op pagina’s waar je 3D modellen gebruikt! (zie frontmatter van dit bestand bovenaan de pagina). De reden hiervoor is dat we niet onnodig scripts willen laden wanneer deze niet gebruikt worden op een specifieke pagina.
Klik en sleep het model hieronder om het in 3D te oriënteren.
Klik en sleep het model hieronder om het in 3D te oriënteren.
{{< card title="Astronaut 3D Model" icon="outline/cube" color="orange" >}}
Klik en sleep het model hieronder om het in 3D te oriënteren.
{{< model-viewer
alt="Neil Armstrong's Spacesuit"
src="Astronaut.glb"
poster="poster.webp"
auto-rotate="true"
disable-zoom="true"
>}}
{{< /card >}}{{< card title="Animated Horse Model" icon="outline/cube" color="orange" >}}
Klik en sleep het model hieronder om het in 3D te oriënteren.
{{< model-viewer
alt="Running horse"
src="horse.glb"
poster="poster2.webp"
height="400px"
autoplay="true"
field-of-view="30deg"
camera-orbit="35.37deg 92.29deg 702.7m"
>}}
{{< /card >}}Overige #
Tabel #
Tabellen kunnen heel handig zijn om gestructureerde data weer te geven.
| Fruit | Kleur | Icon |
|---|---|---|
| Banaan | Geel | 🍌 |
| Appel | Rood | 🍎 |
| Peer | Groen | 🍐 |
| Fruit | Kleur | Icon |
| ------ | ----- | -------- |
| Banaan | Geel | :banana: |
| Appel | Rood | :apple: |
| Peer | Groen | :pear: |Naast de bovenstaande standaard markdown kunnen we ook een custom shortcode gebruiken die gebaseerd is op Bootstrap. Het voordeel hiervan is dat je meer controle hebt over het uiterlijk en dat de tabel responsive is (dus scrollable bij veel kolommen). Meer info
{{< bootstrap-table "table table-striped table-bordered" >}}
| Animal | Sounds | Icon |
| ------- | ------ | ---- |
| Cat | Meow | 🙀 |
| Dog | Woof | 🌭 |
| Cricket | Chirp | 🦗 |
{{< /bootstrap-table >}}| Animal | Sounds | Icon |
|---|---|---|
| Cat | Meow | 🙀 |
| Dog | Woof | 🌭 |
| Cricket | Chirp | 🦗 |
Button #
Voor knoppen is er de volgende shortcode:
{{< button class="btn-outline-primary" href="../bestand.pdf" >}}Download{{< /button >}}De opmaak kan gemakkelijk worden aangepast aan de hand van bootstrap v5 classess.
ButtonDetail dropdown #
Je kunt een detail HTML element toevoegen met de {{< details >}} shortcode. Dit kan handig zijn om grote hoeveelheden informatie (zoals code blocks) te verbergen.
{{< details "Details" >}}
Something small enough to escape casual notice.
{{< /details >}}Details
Sub informatie kan hier worden geplaatst. Markdown werkt gewoon in een detail tab.Start in open state
De dropdown kan ook standaard open staan door simpelweg een “open” attribute toe te passen. < details “Details” open>Tabs #
Tabs kunnen nuttig zijn om data weer te geven voor verschillende doeleinden. Bijvoorbeeld laser informatie voor Coreldraw, Inkscape of Illustrator. Deze website onthoudt de selectie op andere pagina’s.
{{< tabs "vector-guide" >}}
{{% tab "Illustrator" %}}
Installeer plugin Illustrator lorem ipsum
```bash
npm create thulite@latest
```
{{% /tab %}}
{{% tab "Coreldraw" %}}
Installeer plugin Coreldraw lorem ipsum
```bash
pnpm create thulite@latest
```
{{% /tab %}}
{{% tab "Inkscape" %}}
Installeer plugin Inkscape lorem ipsum
```bash
yarn create thulite
```
{{% /tab %}}
{{< /tabs >}}Task list #
- [x] Update deze pagina
- [ ] Plaats nieuwe content
- [ ] Fix typo's
{.list-unstyled}- Update deze pagina
- Plaats nieuwe content
- Fix typo’s
Code blocks #
(Fenced) code blocks worden gebruikt om code toe te voegen die niet verwerkt hoeft te worden door Hugo. Dit is meestal nuttig op het moment dat je simpelweg code wilt delen, zoals in de overige voorbeelden. Uitgebreide informatie kun je hier vinden.
```markdown
## Dit is een voorbeeld markdown heading als code
```## Dit is een voorbeeld markdown heading als codeJavascript voorbeeld:
```js {title="count.js"}
if ([1,"one",2,"two"].includes(value)){
console.log("Number is either 1 or 2."); // comment
}
```if ([1,"one",2,"two"].includes(value)){
console.log("Number is either 1 or 2."); // comment
}Bash voorbeeld
```bash {title="Installing dependencies…"}
npm install
```npm installEr wordt gebruikt gemaakt van de standaard Chroma syntax highlighting module (link) dus je kunt in principe alle talen gebruiken die daar worden genoemd. Een leuk voorbeeld voor deze wiki is arduino:
32// the setup function runs once when you press reset or power the board
33void setup() {
34 // initialize digital pin LED_BUILTIN as an output.
35 pinMode(LED_BUILTIN, OUTPUT);
36}
37
38// the loop function runs over and over again forever
39void loop() {
40 digitalWrite(LED_BUILTIN, HIGH); // turn the LED on (HIGH is the voltage level)
41 delay(1000); // wait for a second
42 digitalWrite(LED_BUILTIN, LOW); // turn the LED off by making the voltage LOW
43 delay(1000); // wait for a second
44}```arduino {lineNos=true lineNoStart=32 hl_lines=[4,"9-10"] title="Blink"}
// the setup function runs once when you press reset or power the board
void setup() {
// initialize digital pin LED_BUILTIN as an output.
pinMode(LED_BUILTIN, OUTPUT);
}
// the loop function runs over and over again forever
void loop() {
digitalWrite(LED_BUILTIN, HIGH); // turn the LED on (HIGH is the voltage level)
delay(1000); // wait for a second
digitalWrite(LED_BUILTIN, LOW); // turn the LED off by making the voltage LOW
delay(1000); // wait for a second
}
```Escape code blocks (invisible characters):
~~~markdown
````markdown
```toml
<code block>
```
````
~~~Emoji #
In de emoji cheatsheet vind je alle beschikbare emoji afkortingen.
That is so funny! : joy : (verwijder spaties voor en na 'joy')That is so funny! 😂
Icons #
Je kunt op deze website standaard gebruik maken van tabler icons. Icons zijn svg’s die darkmode respsecteren. Kllik op de naam om deze te kopiëren en plak er “outline/” of “filled/” voor.
{{< inline-svg "outline/coffee" >}}{{< inline-svg "filled/flask" >}}Ook kun je attributen specificeren, zoals de kleur en afmetingen. Dit werkt net als bij een normale svg.
{{< inline-svg src="outline/peace" stroke-width="1" stroke="#ee52b7" height="3rem" width="3rem" class="svg-inline-custom" >}}Math #
Door middel van een fenced code block of shortcode is het mogelijk om LaTeX wiskundige vergelijkingen in te voegen op deze website. Dit wordt gedaan door middel van de Math API service die de vergelijking transformeert naar een SVG afbeelding. Dit is beter voor de prestaties dan javascript alternatieven zoals KateX.
Tijdelijk buiten gebruik
Grafieken / Diagrammen #
Sinds versie 1.2 is er support voor diagrammen via de kroki api. Dit is sneller dan de oude Mermaid implementatie aangezien we enkel een svg hoeven te laden. Meer informatie kun je hier vinden.
```kroki {type=plantuml}
@startmindmap
skinparam monochrome true
+ OS
++ Ubuntu
+++ Linux Mint
+++ Kubuntu
+++ Lubuntu
+++ KDE Neon
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
@endmindmap
```
Link Card #
Simple link cards voor bijvoorbeeld link tree’s naar andere pagina’s (target="_blank" is optioneel en zorgt ervoor dat de pagina in een nieuw tabblad opent).
Showcase
Explore the infinite possibilities of a Fablab
{{< link-card
title="Showcase"
description="Explore the infinite possibilities of a Fablab"
href="/blog"
target="_blank"
>}}Card Grid #
Als er genoeg plek is kun je link cards ook naast elkaar plaatsen in een grid:
{{< card-grid >}}
{{< link-card title="Blog" href="/blog" >}}
{{< link-card title="Workshops" href="/workshops" >}}
{{< /card-grid >}}Info Cards #
Naast link cards kun je nu ook info cards toevoegen (binnen een grid). Binnen deze card kun je in princpe alle markown gebruiken, maar hieronder zie je een voorbeeld van hoe het werkt met meerdere links. De card opties zijn titel, icon (zie icons) en kleur: orange, green, purple, blue en red.
{{< card-grid >}}
{{< card title="Wiki" icon="outline/puzzle" color="purple" >}}
- [Prijzen]({{< ref "wiki/introductie/prijslijst" >}} "Onze prijzen")
- [Machines]({{< ref "wiki/introductie/machine-overzicht" >}} "Machine overzicht")
- [Recyclepunt]({{< ref "wiki/recycle/inzamelpunt" >}} "Recyclepunt")
{{< /card >}}
{{< card title="Blog" icon="outline/article" color="blue" >}}
- [Artikel 1]({{< ref "wiki/introductie/prijslijst" >}} "Artikel 1")
- [Artikel 2]({{< ref "wiki/introductie/machine-overzicht" >}} "Artikel 2")
- [Artikel 3]({{< ref "wiki/recycle/inzamelpunt" >}} "Artikel 3")
{{< /card >}}
{{< /card-grid >}}
{{< card-grid >}}
{{< card title="Gallery" icon="outline/photo" color="green" >}}
- [Gallery 1]({{</* ref "wiki/introductie/prijslijst" >}} "Gallery 1")
- [Gallery 2]({{< ref "wiki/introductie/machine-overzicht" >}} "Gallery 2")
- [Gallery 3]({{< ref "wiki/recycle/inzamelpunt" >}} "Gallery 3")
{{< /card >}}
{{< card title="FAQ" icon="outline/question-mark" color="red" >}}
- [Vraag 1]({{< ref "wiki/introductie/prijslijst" >}} "Vraag 1")
- [Vraag 2]({{< ref "wiki/introductie/machine-overzicht" >}} "Vraag 2")
- [Vraag 3]({{< ref "wiki/recycle/inzamelpunt" >}} "Vraag 3")
{{< /card >}}
{{< /card-grid >}}Meta-Buttons #
Custom shortcode voor de Fablab website bedacht om meta informatie toe te voegen aan handleidingen (geïnspireerd door Ifixit handleidingen). Je kunt dit bijvoorbeeld aan de bovenkant van de pagina toevoegen om te laten zien hoe lang de handleiding duurt, welke moeilijkheidsgraad deze heeft en de gebruikte software veries. Echter is de shortcode ook zo gemaakt dat je in principe oneindig knoppen met elk icoon/tekst kan toevoegen (Tabler.io icons). Update 19/10/24: je kunt de meta-buttons nu ook laten doorlinken (eigenljk een mini-button)
{{< meta-buttons >}}
{{< meta-button icon="outline/alarm" text="30 min" >}}
{{< meta-button icon="outline/mood-smile-beam" text="Easy" >}}
{{< meta-button icon="outline/git-merge" text="Inkstitch V3.0" >}}
{{< meta-button icon="outline/clock-hour-4" text="20-6-24" >}}
{{< /meta-buttons >}}{{< meta-buttons >}}
{{< meta-button icon="outline/git-merge" text="Data Files V1.0" >}}
{{< meta-button icon="outline/clock-hour-4" text="19-8-24" >}}
{{< /meta-buttons >}}Wiki #
Meer informatie over het maken van wiki posts.
Featured Image #
Veel van onze wiki posts starten met een soort ‘header’ image. Dit is visueel aantrekkelijk en natuurlijk kun je gemakkelijk zo’n afbeelding plaatsen door middel van de standaard shortcodes die we altijd gebruiken. Echter is dit niet heel efficiënt doordat het grootste plaatje dat als eerste zichtbaar is met prioriteit geladen zou moeten worden voor een betere user experience. Daarom maken we bijvoorbeeld gebruik van een custom preload implementatie om alle blog covers meteen bij het opvragen van de pagina te laden waardoor er minimale vertraging in zit. Op de wiki pagina’s zouden we dat ook moeten doen, maar dat is natuurlijk wel afhankelijk van of je een header image gebruikt of niet. Daarom heb ik een shortcode gemaakt die dit voor ons regelt:
{{< featured-figure
src="header.png"
alt="Header HAN Building"
>}}De afbeelding moet altijd in de root van je wiki artikel staan (dus niet in /images bijvoorbeeld) en de naam mag alleen cover of header zijn.
Als je een wiki pagina niet start met een grote afbeelding moet je de onderstaande shortcode absoluut niet gebruiken! In dat geval gebruik je de normale figure/lightbox shortcodes. Deze optimalisatie is niet noodzakelijk (het was leuk voor de lighthouse score), maar in de praktijk merk je er weinig van. Gebruik bij een eerste afbeelding die meteen zichtbaar is dan wel ’eager’ als loading attribute om de browser te vertellen dat dit snel geladen moet worden.
{{< figure
src="header.png"
alt="feature image"
class="rounded-3"
loading="eager"
>}}Loading=“eager” gebruik je dus niet wanneer het een normaal plaatje verderop de pagina is.
Material Cards #
Deze custom material cards zijn voornamelijk gemaakt om makkelijk laser settings te kunnen delen. Ze zouden in de toekomst echter makkelijk aangepast kunnen worden voor andere doeleinden. Het gebruik ervan spreekt redelijk voor zich. Op de titel na is praktisch alles optioneel. Laat je bijvoorbeeld ‘alternateSource’ weg, dan zal deze kolom ook niet verschijnen. Hetzelfde geld voor de laser (waar je zegt of het Fiber/CO2 is) en images. Wanneer je de image regel weg laat zullen er dus geen images worden toegevoegd (vierkante plaatjes zijn het mooiste, maar alles kan/mag). Als je een laser rij weg laat wordt deze gevuld met placeholder content (infinite symbool), zodat duidelijk is dat daar geen waardes voor zijn. Je kunt zoveel rijen/kolommen toevoegen en verwijderen als je wilt. De opties in deze shortcode worden gerendered als markdown. Je kunt dus ook *dikgedrukte tekst links en andere markdown gebruiken in deze cards. Ook emoji’s zijn toegestaan. Kijk goed naar het voorbeeld en speel ermee.
Birch Plywood
| Recommended Source: | Fablab Arnhem (In Stock) | |
| Alternate Source: | Arnhemse Fijnhout handel | |
| Material information: | Good quality birch plywood cuts well on the laser cutter and is one of our most common materials. | |
| Dimensions: |
| |
| Datasheet: | Download | |
| Laser: | CO2 | |
| Images: | 
| |
{{< material-card
title="Birch Plywood"
recommendedSource="Fablab Arnhem (In Stock)"
alternateSource="[Arnhemse Fijnhout handel](https://www.af.nl)"
materialInfo="Good quality birch plywood cuts well on the laser cutter and is one of our most common materials."
dimensions=`
- 1200x600mm (3mm)
- 1200x600mm (6mm)
- 1200x600mm (9mm)`
datasheet="[Download]()"
laser="CO<sub>2</sub>"
brmvectorcut="3mm,20,50,6mm,14,70,9mm,6,80"
brmvectorengraving="Light,35,12,Medium,30,12,Dark,25,12"
brmrasterengraving="Light,350,15,Medium,350,20,N/A,,"
epilogvectorcut="12mm,50,60"
epilogvectorengraving=",,"
epilograsterengraving="🍔,❌,❌,🪵,✅,✅"
images="images/placeholder1.png, images/placeholder2.png, images/placeholder3.png"
>}}Dit is voetnoot nummer 1 ↩︎