Repo: https://github.com/Hadil66/your-tribe-for-life-squad-page

Projectboard: https://github.com/Hadil66/your-tribe-for-life-squad-page/projects?query=is%3Aopen

02.09

Start van project squad page!

Leervragen

1. Hoe kan ik data uit een cms combineren met een framework?
2. Hoe zet je een project met een framework op?
3. Hoe kies je de juiste frameworks en tools voor elk project?
4. Iets met samenwerken in github met grotere groep ? conventies, afspraken, etc etc
5. Hoe kan ik mijn learning journal het best bijhouden/inrichten? Wat werkt voor mij het best?
6. Hoe kan ik het mentoring van jaar 1 gebruiken om mij zelf verder te ontwikkelen?

Squad page

Doel:

• Je leert effectiever samenwerken met het projectboard in GitHub
• Je leert hoe je routing met een framework implementeert
• Je leert hoe je data uit een Headless CMS door middel van framework rendert in een website

DLC

1. Analyseren - bijvoorbeeld: grip krijgen op een taak door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een todo lijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done etc.
2. Ontwerpen - bijvoorbeeld: het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
3. Bouwen - bijvoorbeeld: toepassen van webtechnologie (HTML, CSS, JS), gebruik van tooling, werken volgens conventies en wetgeving, documenteren en bijhouden van een changelog.
4. Integreren - bijvoorbeeld: publiceren, live zetten, uploaden naar de server, toevoegen in een bestaand systeem, ftp-en.
5. Testen - bijvoorbeeld: Unit testing (TDD), System test, User test, device lab test, A\B testing.

Directus en Sveltekit

huiswerk: Directus.docs

proberen aan te passen

1. terminal

om geen nieuwe map te maken doe je ” ./ ” of leeg ipv ” my-app ”

npm create svelte@latest my-app # Choose Skeleton project
cd frontend
npm install
npm install @directus/sdk

![[Screenshot 2024-09-03 at 13.23.33.png]]

2. Create a wrapper for the SDK

SDK = software development kit

src/libs directus.js

import { createDirectus, rest } from "@directus/sdk";
import {
  readItems,
  readItem,
  updateItem,
  updateUser,
  createItem,
  deleteItem,
} from "@directus/sdk";
import { PUBLIC_APIURL } from "$env/static/public";

function getDirectusInstance(fetch) {
  const options = fetch ? { globals: { fetch } } : {};
  const directus = createDirectus(PUBLIC_APIURL, options).with(rest());
  return directus;
}

export default getDirectusInstance;

src/ hooks.server.js

export async function handle({ event, resolve }) {
  return await resolve(event, {
    filterSerializedResponseHeaders: (key, value) => {
      return key.toLowerCase() === "content-type";
    },
  });
}

.env

PUBLIC_APIURL = "https://directus.example.com";

3. Prepare Sveltekit to use Directus

Create a new file called +page.js in the root directory next to the .page.svelte file. This file’s load function will be responsible to fetch the data on the client and on the server during Server Side Rendering.

+page.js

/** @type {import('./$types').PageLoad} */
import getDirectusInstance from "$lib/directus";
import { readItems } from "@directus/sdk";
export async function load({ fetch }) {
  const directus = getDirectusInstance(fetch);
  return {
    global: await directus.request(readItems("global")),
  };
}

+page.svelte

<script>
	/** @type {import('./$types').PageData} */
	export let data;
</script>

<h1>{data.global.title}</h1>
<p>{data.global.description}</p>

04.09

Demo

vite = package manager

svelte.config.js - vercel gegevens om te hosten toevoegen

npm run build genereert jouw website compiled in een build mapje (zoiets)

static = map met statische dingen, is net zoals de node/ejs public map. dingen als favicon, en global.css

src = hier word alles wat svelte doet gerenderd

src/app.html = schil van de applicatie, hier link je de global stylesheet en andere dingen uit de static map.

src/routes = de pagina’s/routes

src/lib = componenten, herbruikbare delen

+page.svelte = component waar alles samen komt, js, html, en css.

+page.server.js = hier word data gefetcht

export let data = haalt informatie op

nieuwe route: maak mapje met naam van route (contact, about, etc), voeg hier +page.svelte aan toe. klaar.

dynamische route: naam route tussen [ blokhaken ]

zie demo

from scratch

whois: https://fdnd.directus.app/items/person/

demo: https://github.com/joostf/squadpage-sveltekit/tree/main

06.09

lighthouse test

? directus nextgen image formats webp and avif ??

<picture class="cover-image">
  <source
    srcset="https://fdnd-agency.directus.app/assets/<%= playlist.image %>?width=200&height=200&format=avif"
    type="image/avif"
    alt="cover image"
  />
  <source
    srcset="https://fdnd-agency.directus.app/assets/<%= playlist.image %>?width=200&height=200&format=webp"
    type="image/webp"
    alt="cover image"
  />
  <img
    src="https://fdnd-agency.directus.app/assets/<%= playlist.image %>?width=200&height=200"
    alt="playlist cover image"
  />
</picture>