prg-wiki

Voor deze website heb ik het volgende gebruikt:

• GraphCMS
• GraphQL
• Sveltekit
• Markdown
• Marked
• Static Site generation
• Git
• Github
• Javascript

De site werkt als volgt:

Alle data word opgeslagen in GraphCMS in het markdown format, dit is een manier om content te schrijven die omgezet kan worden naar html.

De data die hierin staat word beschikbaar gemaakt door een GraphQL API. Dit houd in dat je vanuit je applicatie queries kan maken vanuit je applicatie, hieonden een query

import { gql } from 'graphql-request';
import client from '$lib/gqlClient';

export const get = async () => {
    const query = gql`
        {
            posts {
                slug
                title
                description
                coverImage {
                    url
                }
                tags
            }
        }
    `;

    const data = await client.request(query);

    return {
        body: {
            data
        }
    };
};

Deze data word opgehaald door SvelteKit, dit is een framework wat de mogeijkheid bied om web-paginas op de server te renderen in plaats van in de browser.

Sveltekit zet de markdown data uit GraphCMS om naar HTML via Marked en hilight.js.

vervolgens worden deze HTML paginas opgeslagen en op het netwerk van Vercel gezet