Eerste installatie van het thema

1. Installeer om te beginnen eerst alle benodigde packages met npm install of pnpm install, en voer daarna een eerste build uit met npm run build of pnpm build om te controleren of de installatie werkt.
2. Kopieer de Pagefind-build (voor de zoekfunctie op de site) zodat die beschikbaar is in de dev-omgeving. Dit verschilt per besturingssysteem. Ik heb een paar commando’s gemaakt die daarbij helpen.
   • Voer op Windows npm run winsearch uit
   • Voer op OSX of Linux npm run osxsearch uit
3. Vervolgens configureer je de i18n-instelling van je site (één taal of meerdere). Voer gewoon het commando npm run docs:config-i18n uit en volg de instructies van het script om alles in te stellen!
4. Nu kun je de site helemaal naar eigen wens inrichten!

Kennismaking met de code

Ik heb een paar code tours gemaakt die je wegwijs maken in de codebase. Je hebt de extensie Code Tour nodig om ze in VSCode of een andere IDE te bekijken.

Structuur van de code

De code is zo opgebouwd dat de meeste onderdelen onder de map src/docs staan. Daardoor plaats je die hele map eenvoudig in een bestaand project en voeg je in een paar minuten documentatiefunctionaliteit toe.

Configuratieopties

De algemene configuratie van de site regel je in de map src/docs/config/. De meeste instellingen staan in afzonderlijke taalmappen, zodat je vertalingen makkelijker beheert.

Site-instellingen

Met het bestand src/docs/config/siteSettings.json.ts stel je de site-instellingen in. Denk aan het inschakelen van view transitions, het inschakelen van animaties en het tonen van knoppen om links naar koppen in de documentatie te kopiëren.

Sitegegevens

Met het bestand src/docs/config/[language]/siteData.json.ts stel je de sitegegevens in. Denk aan de titel van de site, de beschrijving, de links naar sociale media en de standaardafbeelding.

Navigatiegegevens

Configureer de navigatiegegevens voor de bovenste navigatiebalk in het bestand src/docs/config/[language]/navData.json.ts.

Indeling van de zijbalk

Bepaal de volgorde van je documentatiesecties in het bestand src/docs/config/[language]/sidebarNavData.json.ts.

Robots

Zodat robots zoals die van Google de juiste sitemap zien, pas je het bestand public/robots.txt aan met het domein van je website.

Meer bronnen

Algemene informatie over Astro

Astro zoekt naar .astro- of .md-bestanden in de map src/pages/. Elke pagina wordt op basis van de bestandsnaam als route beschikbaar gesteld.

Aan src/components/ is niets bijzonders, maar daar zetten we graag alle Astro-, React-, Vue-, Svelte- en Preact-componenten neer.

Statische assets, zoals afbeeldingen, zet je in de map public/. Zelf gebruik ik ook vaak src/assets voor afbeeldingen wanneer ik Astro assets inzet voor beeldoptimalisatie.

Commando’s

Je voert alle commando’s uit vanaf de root van het project, in een terminal:

Commando	Actie
npm install	Installeert de dependencies
npm run dev	Start de lokale dev-server op localhost:4321
npm run build	Bouwt je productiesite naar ./dist/
npm run preview	Bekijk je build lokaal, voordat je deployt
npm run astro ...	Voer CLI-commando’s uit zoals astro add, astro check
npm run astro -- --help	Vraag hulp op bij het gebruik van de Astro CLI

Meer weten?

Bekijk gerust de documentatie of spring in de Discord-server.