Hugo kan data uit de data folder gebruiken in shortcodes en partials. Dit is makkelijk om data die je op meerdere plekken laat terugkomen centraal te beheren. In ons geval wordt dit bijvoorbeeld gebruikt voor de openingstijden, vakanties en alert meldingen.

.
└── data/
    ├── alerts.toml
    ├── open_inloop.yaml
    ├── gesloten.yaml
    ├── opening_hours.yaml
    └── register_modal.yaml

Alerts #

# alert text on top of the website
[setting]
  show = true
  dismissible = false # Can you close the alert or not. Implemented this for stupid people during the summer periods. 
  animate = true # add small animation for visibility during the summer periods

[dutch]
  alert = "**We hebben zomerstop tot 26 augustus!** 🏄🏝️ Bekijk <a href='https://www.fablabarnhem.nl/workshops/'>hier</a> de workshops."

Dit data template past de alert bovenaan de website aan. De alert wordt uigeschakeld als je ‘show = true’ verandert naar ‘show = false’. Dismissable zorgt ervoor dat je de alert niet weg kan klikken en animate voegt een ‘pop’ effect toe. Update: Vanaf nu kun je markdown en html gebruiken in de alert tekst.

Openingstijden #

De ‘.yaml’ templates kunnen gebruikt worden om de openingstijden en vakantie periodes aan te passen. Dit komt bijvoorbeeld terug op de homepage, contact page en faq pagina. Het voordeel van deze templates is dat je niet alle pagina’s individueel hoeft aan te passen.

- name: "Zomervakantie"
  dates: "6 juli t/m 25 augustus 2024"

- name: "Herfstvakantie"
  dates: "19 oktober t/m 27 oktober 2024"

- name: "Kerstvakantie"
  dates: "21 december t/m 5 januari 2025"

Je kan zoveel data invoeren als je wilt, maar kijk wel even of het er goed uit ziet op de website. Ik heb bijvoorbeeld expres nog niet alle vakanties / vrije dagen doorgevoerd om geen onnodig lange lijst te krijgen op de homepage.

Register Modal #

Op de homepage is in de header een shortcut toegevoegd om snel afspraken te kunnen maken voor de workshops en de lasersnijder. Het venster dat opent heet een ‘modal’. Dit is schaalbaar gemaakt en kan ook gemakkelijk van een data template worden aangepast. Nu staan er bijvoorbeeld 2 knoppen, maar dit kunnen gerust meer of minder knoppen zijn. Deze ‘modal’ gaat weg als je het template leeg laat.

- name: "Lasersnijder"
  link: "https://outlook.office365.com/owa/calendar/fablabarnhem1@hannl.onmicrosoft.com/bookings/s/Ya96KyNxHk6lDd4VaVopEw2"
  infoLink: "/wiki/documentatie/machines/lasersnijder/lasercutting101/"

- name: "Workshops"
  link: "https://outlook.office365.com/owa/calendar/FablabArnhemWorkshops@hannl.onmicrosoft.com/bookings/"
  infoLink: "/workshops"

Overige instellingen voor deze modal vind je in de ‘_default’ map bij de algemene ‘params.toml’ settings.

 # Navbar modal voor direct registreren
  registerModal = true 
  registerModalTitle = "Reserveren"
  registerModalText = "Via de onderstaande knoppen ga je direct naar de inschrijvingspagina voor machines en workshops."

Laser Calculator #

De laser calculator is een simpel javascript tooltje om snel uit te rekenen wat diverse materialen bij elkaar opgeteld kosten. Echter zou het vervelend zijn om de prijzen te moeten aanpassen in de code en daarom is vanwege beheer overwegingen ook voor deze tool een data template gebruikt, zodat de materialen en kosten makkelijk aangepast kunnen worden. Open hiervoor de ‘materials.yaml’ file en pas de waardes naar wens aan.