diff --git a/content/installatie.md b/content/installatie.md new file mode 100644 index 0000000..cb7f45f --- /dev/null +++ b/content/installatie.md @@ -0,0 +1,236 @@ +--- +title: Installatie-instructies +subtitle: Bereid je voor op de workshop door Claude Code alvast te installeren. Volg onderstaande stappen en je bent binnen 10 minuten klaar. +--- + +## Wat je nodig hebt + +:::checklist +- **Een Claude abonnement** -- Claude Code werkt alleen met een [betaald Claude account](https://claude.ai/pricing). Claude Pro kost €18/maand, Claude Max €90/maand. Start voor de workshop met Pro. +- **Een Mac of Windows laptop** -- De desktop app werkt op beide platforms. Neem deze laptop mee naar de workshop. **Let op:** Claude Code werkt *niet* op een Chromebook of Chrome OS! +- **Een idee wat je wilt maken** -- Denk al na over een klein, uitvoerbaar idee wat je in een paar uur kunt realiseren. Een complete site nabouwen zal niet lukken, een klein deel maken wel. +::: + +## Desktop of terminal? + +Claude Code kun je op twee manieren gebruiken: via de desktop app of via de terminal (command line). Beide zijn volwaardig. Voor deze workshop starten we met de desktop app - die is het makkelijkst om mee te beginnen. + +Het is wel handig om te weten wat de terminal is. Als je daar al bekend mee bent, sla dit dan over. + +:::accordion[Wat is de terminal?] +Een terminal is een venster waar je tekstcommando's typt in plaats van te klikken. Je hoeft dit niet te beheersen voor de workshop, maar het helpt om te weten dat het bestaat. + +**Terminal openen:** +- **Mac:** Druk `Cmd + Spatie`, typ "Terminal", druk Enter +- **Windows:** Druk de Windows-toets, typ "PowerShell", klik erop + +**4 basiscommando's:** + +:::command[pwd] +Waar ben ik? Toont het pad naar je huidige map. +::: + +:::command[ls] +Wat staat hier? Toont bestanden en mappen. Op Windows: `dir` +::: + +:::command[cd mapnaam] +Ga naar een map. `cd ..` gaat een map terug. +::: + +:::command[mkdir mapnaam] +Maak een nieuwe map aan. +::: +::: + +## Claude Code desktop app installeren + +Ga naar [claude.com/download](https://claude.com/download) en download de app voor jouw besturingssysteem. + +![Claude Code download pagina](images/installatie/desktop-installatie.png) + +:::tabs{os} +::tab[Mac] +### Installatie op Mac + +:::steps +1. Download het .dmg bestand van claude.com/download +2. Open het bestand en sleep het Claude icoon naar je Applications map +3. Klaar! Open de app vanuit je Applications map of via Spotlight (Cmd + Spatie, typ "Claude") +::: + + +::tab[Windows] +### Installatie op Windows + +:::steps +1. Download het .exe bestand van claude.com/download +2. Dubbelklik op het bestand om de installer te starten +3. Volg de installatiestappen +4. Claude Code wordt automatisch toegevoegd aan je Start menu +::: +::: + +:::if{os=mac} +### Installatie hulpprogramma +We installeren nu extra software voor je Mac waarmee je straks versiebeheer kunt doen. Dit zijn de Apple Xcode Command Line Tools. Hiervoor gaan we kort naar Terminal. + +:::steps +1. Open Terminal (druk Cmd + Spatie, typ "Terminal", druk Enter) +2. Kopieer dit commando en plak het in de terminal: `xcode-select --install` +3. Je ziet nu een pop-up verschijnen met de mededeling om Git te installeren. Klik op Install en heb geduld. Dit kan 15 - 20 minuten duren. Doe dit dus ruim vantevoren. +![git-install.png](images/installatie/git-install.png) + +![git-time.png](images/installatie/git-time.png) +4. Je krijgt automatisch een melding als de installatie is geslaagd + +::: + +### Installatie NodeJS +NodeJS is een programmeer-omgeving die Claude Code veel gebruikt. Hiermee kan Claude Code zelfstandig websites en apps ontwikkelen. Je installeert dit eenmalig op je computer. +:::steps +1. Ga naar [de website van NodeJS](https://nodejs.org) en klik op *Get NodeJS* +2. Kies onder het zwarte scherm voor MacOS Installer (.pkg) en download het programma +3. Dubbelklik op het bestand en installeer Node.js +::: + +### Installatie Python +Met Python is veel mogelijk. Van losse applicaties tot scripts, tot uitgebreide berekeningen en analyses. Claude Code wil dit vaak gebruiken in de ontwikkeling, daarom installeren we het nu. +:::steps +1. Ga naar [de website van Python](https://python.org) en klik op *Download Python* +2. De site biedt direct de macOS Installer aan en je download het programma +3. Dubbelklik op het bestand en installeer Python +4. Voor Python is nog één extra stap nodig. Je krijgt aan het einde een melding om certificaten te installeren. + +![python-install-warning.png](images/installatie/python-install-warning.png) + +5. Tegelijk opent je Finder en zie je het bestand *Install Certificates.command*. Dubbelklik hier op. + +![python-install-certificates.png](images/installatie/python-install-certificates.png) +::: + +De installatie voor Mac is hiermee voltooid. +::: + +:::if{os=windows} +## Git installeren (Windows) + +Op Windows heb je Git nodig om foutmeldingen in de Claude Code desktop app te voorkomen. Git is een programma dat Claude Code gebruikt om je bestanden bij te houden. + +![Foutmelding in Claude Code wanneer Git niet geinstalleerd is](images/installatie/windows-git-installatie-melding.png) + +:::steps +1. Ga naar [git-scm.com/download/win](https://git-scm.com/download/win) +2. Download de "Standalone Installer" (64-bit) +3. Voer de installer uit en klik steeds op "Next" (de standaardinstellingen zijn prima) +4. Klik op "Install" en wacht tot het klaar is +::: + +:::warning +**Start je computer opnieuw op na de installatie van Git.** Door te herstarten worden alle instellingen automatisch goed gezet. Je hoeft niets handmatig aan te passen. +::: + +## NodeJS installeren +NodeJS is een programmeer-omgeving die Claude Code veel gebruikt. Hiermee kan Claude Code zelfstandig websites en apps ontwikkelen. Je installeert dit eenmalig op je computer. +:::steps +1. Ga naar [de website van NodeJS](https://nodejs.org) en klik op *Get NodeJS* +2. Kies onder het zwarte scherm voor Windows Installer (.msi) en download het programma +3. Dubbelklik op het bestand en installeer Node.js +::: + +## Installatie Python +Met Python is veel mogelijk. Van losse applicaties tot scripts, tot uitgebreide berekeningen en analyses. Claude Code wil dit vaak gebruiken in de ontwikkeling, daarom installeren we het nu. +:::steps +1. Ga naar [de website van Python](https://python.org) +2. In de navigatie zie je Downloads. Ga er overheen en je ziet direct staan "Download stand-alone installer". Klik er op en download naar je computer +3. Dubbelklik op het bestand en installeer Python met de optie "*Install now*" + +![python-self-installer.png](images/installatie/python-self-installer.png) + +Hiermee heb je alle hulpprogramma's geinstalleerd. +::: +::: + +## Eerste keer opstarten + +:::steps +1. **Open de Claude app** -- Je ziet een welkomstscherm met de mogelijkheid om in te loggen. + +:::image{os=mac} +![Claude for Mac welkomstscherm](images/installatie/mac-installatie-inloggen.png) +::: +:::image{os=windows} +![Claude Code welkomstscherm met Sign in knop](images/installatie/windows-installatie-inloggen.png) +::: + +2. **Log in met je Claude account** -- Kies om in te loggen via email of Google. Je browser opent automatisch. Geef toestemming voor de desktop app. + +3. **Schakel over naar Claude Code** -- Na het inloggen land je in Claude Chat. Bovenin het scherm zie je een schakelaar. Zet die om naar **Claude Code**. Dit hoef je maar een keer te doen. + +![Schakelaar bovenin de app om te wisselen tussen Claude Chat en Claude Code](images/installatie/desktop-installatie-schuif-claude-boven.png) + +4. **Je ziet het Claude Code scherm** -- Een chat interface in het midden en een overzicht van gesprekken links. Je bent klaar! +::: + +## Projectmap aanmaken + +Claude Code werkt altijd binnen een projectmap. Maak vooraf een map aan waar je tijdens de workshop in gaat werken. + +:::if{os=mac} +:::steps +1. Maak een map aan met de naam `Projecten` in je thuisfolder. Installeer het *niet* in je Documenten-map omdat hiermee extra lees- en schrijfrechten worden gevraagd door Mac. +2. Op de Mac open je Finder en ga je via het menu naar Ga > Thuismap (Sneltoets Shift-CMD-H) en maak hier de submap `Projecten` aan (Archief > Nieuwe map of Shift-CMD-N) +3. Open deze map in Claude Code via het mapicoon linksonder. +::: +::: + +:::if{os=windows} +:::steps +1. Maak een map aan met de naam `Projecten` in je thuisfolder. Installeer het *niet* in je Documenten-map omdat hiermee extra lees- en schrijfrechten worden gevraagd door Windows. +2. Op Windows open je Verkenner en ga je naar de gebruikersmap (`C:/Users/[username]`) en maak hier de submap `Projecten` aan. +3. Open deze map in Claude Code via het mapicoon linksonder. +::: +::: + +:::info +**Let op: werk altijd in een aparte projectmap.** Geef Claude Code niet zomaar toegang tot je hele computer. Claude kan bestanden maken, aanpassen en verwijderen. Door in een aparte map te werken, beperk je wat Claude kan doen. Je computer vraagt mogelijk of Claude toegang mag tot "Documenten" - daarmee geef je alleen toegang tot de gekozen map, niet tot alles in Documenten. +::: + +## Controleer of alles werkt + +Typ in Claude Code: `Hallo Claude, vertel me in welke map je nu bent.` + +Claude antwoordt met informatie over je huidige werkmap. Dit bevestigt dat alles werkt. + +:::checklist-verify +- Claude abonnement actief +- Desktop app geinstalleerd en geopend +- Ingelogd en overgeschakeld naar Claude Code +- Projecten-map aangemaakt en geopend in Claude Code +::: + + +## Problemen oplossen + +:::troubleshoot[App start niet na installatie] +- **Mac:** Check of je de app naar Applications hebt gesleept +- **Windows:** Probeer de installer opnieuw als administrator uit te voeren +::: + +:::troubleshoot[Kan niet inloggen] +- Check of je een Claude Pro of Max account hebt (gratis werkt niet) +- Probeer uit te loggen en opnieuw in te loggen in je browser +::: + +:::if{os=windows} +:::troubleshoot[Foutmelding over Git in de desktop app] +- Installeer Git via de stappen hierboven +- Start je computer opnieuw op na de Git-installatie +- Open daarna pas de Claude Code app weer +::: +::: + +:::troubleshoot[Geen project directory kunnen kiezen] +- Zorg dat de Projecten-map bestaat en dat je leesrechten hebt +- Maak een nieuwe lege map in je thuisfolder als het niet lukt +::: diff --git a/package-lock.json b/package-lock.json index 4d1640b..0c217ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "cc-course", "version": "0.0.0", "dependencies": { + "marked": "^17.0.5", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.13.0" @@ -2748,6 +2749,18 @@ "yallist": "^3.0.2" } }, + "node_modules/marked": { + "version": "17.0.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.5.tgz", + "integrity": "sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==", + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 20" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", diff --git a/package.json b/package.json index 90b8990..c5eb57a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "marked": "^17.0.5", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.13.0" diff --git a/public/images/installatie/git-install.png b/public/images/installatie/git-install.png new file mode 100644 index 0000000..dbe2f90 Binary files /dev/null and b/public/images/installatie/git-install.png differ diff --git a/public/images/installatie/git-time.png b/public/images/installatie/git-time.png new file mode 100644 index 0000000..b24d5b9 Binary files /dev/null and b/public/images/installatie/git-time.png differ diff --git a/public/images/installatie/python-install-certificates.png b/public/images/installatie/python-install-certificates.png new file mode 100644 index 0000000..ddce6cc Binary files /dev/null and b/public/images/installatie/python-install-certificates.png differ diff --git a/public/images/installatie/python-install-warning.png b/public/images/installatie/python-install-warning.png new file mode 100644 index 0000000..e7961a1 Binary files /dev/null and b/public/images/installatie/python-install-warning.png differ diff --git a/public/images/installatie/python-self-installer.png b/public/images/installatie/python-self-installer.png new file mode 100644 index 0000000..3ff8f7a Binary files /dev/null and b/public/images/installatie/python-self-installer.png differ diff --git a/src/components/editor/EditorToolbar.jsx b/src/components/editor/EditorToolbar.jsx new file mode 100644 index 0000000..3c60edd --- /dev/null +++ b/src/components/editor/EditorToolbar.jsx @@ -0,0 +1,107 @@ +/** + * EditorToolbar.jsx - Toolbar met opmaakknoppen voor de Markdown editor + * + * Biedt knoppen voor veelgebruikte Markdown opmaak en custom directives. + * Elke knop voegt de juiste syntax in rond de huidige selectie in de textarea. + */ + +import { useCallback } from 'react'; + +/** + * @param {object} props + * @param {React.RefObject} props.textareaRef - Ref naar de textarea + * @param {function} props.onChange - Callback wanneer content wijzigt + * @param {function} props.onSave - Callback voor opslaan + * @param {boolean} props.isDirty - Of er onopgeslagen wijzigingen zijn + * @param {boolean} props.isSaving - Of er momenteel opgeslagen wordt + */ +export default function EditorToolbar({ textareaRef, onChange, onSave, isDirty, isSaving }) { + const applyFormat = useCallback((prefix, suffix = '') => { + const textarea = textareaRef.current; + if (!textarea) return; + + const start = textarea.selectionStart; + const end = textarea.selectionEnd; + const value = textarea.value; + const selected = value.substring(start, end); + + const replacement = selected + ? `${prefix}${selected}${suffix}` + : `${prefix}tekst${suffix}`; + + const newValue = value.substring(0, start) + replacement + value.substring(end); + textarea.value = newValue; + + if (selected) { + textarea.selectionStart = start + prefix.length; + textarea.selectionEnd = start + prefix.length + selected.length; + } else { + textarea.selectionStart = start + prefix.length; + textarea.selectionEnd = start + prefix.length + 'tekst'.length; + } + + textarea.focus(); + onChange(newValue); + }, [textareaRef, onChange]); + + const insertSnippet = useCallback((snippet) => { + const textarea = textareaRef.current; + if (!textarea) return; + + const start = textarea.selectionStart; + const value = textarea.value; + + const before = start > 0 && value[start - 1] !== '\n' ? '\n\n' : '\n'; + const text = before + snippet + '\n'; + + const newValue = value.substring(0, start) + text + value.substring(start); + textarea.value = newValue; + textarea.selectionStart = start + text.length; + textarea.selectionEnd = start + text.length; + textarea.focus(); + onChange(newValue); + }, [textareaRef, onChange]); + + return ( +
+ {/* Opmaak knoppen */} + + + + + + + + + +
+ + {/* Directive knoppen */} + + + + + + + + {/* Spacer */} +
+ + {/* Status en opslaan */} + + {isSaving ? 'Opslaan...' : isDirty ? 'Niet opgeslagen' : 'Opgeslagen'} + + +
+ ); +} diff --git a/src/components/editor/ImageDropZone.jsx b/src/components/editor/ImageDropZone.jsx new file mode 100644 index 0000000..e02beeb --- /dev/null +++ b/src/components/editor/ImageDropZone.jsx @@ -0,0 +1,142 @@ +/** + * ImageDropZone.jsx - Drag & drop overlay voor afbeeldingen + * + * Toont een overlay wanneer bestanden over de editor gesleept worden. + * Bij drop: valideert het bestandstype, upload naar de server, + * en voegt de Markdown afbeelding-syntax in op de cursorpositie. + */ + +import { useState, useCallback } from 'react'; + +/** + * @param {object} props + * @param {React.ReactNode} props.children - De editor content + * @param {React.RefObject} props.textareaRef - Ref naar de textarea + * @param {function} props.onChange - Callback wanneer content wijzigt (na afbeelding invoegen) + */ +export default function ImageDropZone({ children, textareaRef, onChange, className = '' }) { + const [isDragging, setIsDragging] = useState(false); + const [uploadStatus, setUploadStatus] = useState(null); + + const handleDragEnter = useCallback((e) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(true); + }, []); + + const handleDragLeave = useCallback((e) => { + e.preventDefault(); + e.stopPropagation(); + // Alleen sluiten als we het drop zone element echt verlaten + if (e.currentTarget.contains(e.relatedTarget)) return; + setIsDragging(false); + }, []); + + const handleDragOver = useCallback((e) => { + e.preventDefault(); + e.stopPropagation(); + }, []); + + const handleDrop = useCallback(async (e) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragging(false); + + const files = Array.from(e.dataTransfer.files); + const imageFile = files.find(f => f.type.startsWith('image/')); + + if (!imageFile) { + setUploadStatus({ type: 'error', message: 'Alleen afbeeldingen worden geaccepteerd' }); + setTimeout(() => setUploadStatus(null), 3000); + return; + } + + // Valideer bestandstype + const allowed = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']; + if (!allowed.includes(imageFile.type)) { + setUploadStatus({ type: 'error', message: `Type ${imageFile.type} niet ondersteund` }); + setTimeout(() => setUploadStatus(null), 3000); + return; + } + + setUploadStatus({ type: 'uploading', message: 'Uploaden...' }); + + try { + const formData = new FormData(); + formData.append('file', imageFile); + + const response = await fetch('/__editor/upload', { + method: 'POST', + body: formData, + }); + + const result = await response.json(); + + if (!response.ok) { + throw new Error(result.error || 'Upload mislukt'); + } + + // Voeg Markdown afbeelding in op de cursorpositie + const textarea = textareaRef.current; + if (textarea) { + const start = textarea.selectionStart; + const value = textarea.value; + const imgMarkdown = `![${result.filename}](${result.path})`; + + // Voeg lege regels toe als de cursor midden in tekst staat + const before = start > 0 && value[start - 1] !== '\n' ? '\n\n' : ''; + const after = start < value.length && value[start] !== '\n' ? '\n\n' : ''; + const insertion = `${before}${imgMarkdown}${after}`; + + const newValue = value.substring(0, start) + insertion + value.substring(start); + textarea.value = newValue; + textarea.selectionStart = start + insertion.length; + textarea.selectionEnd = start + insertion.length; + textarea.focus(); + onChange(newValue); + } + + setUploadStatus({ type: 'success', message: `${result.filename} toegevoegd` }); + setTimeout(() => setUploadStatus(null), 3000); + } catch (err) { + setUploadStatus({ type: 'error', message: err.message }); + setTimeout(() => setUploadStatus(null), 5000); + } + }, [textareaRef, onChange]); + + return ( +
+ {children} + + {/* Drag overlay */} + {isDragging && ( +
+
+ + + +

Afbeelding hier loslaten

+

PNG, JPG, GIF of WebP

+
+
+ )} + + {/* Upload status melding */} + {uploadStatus && ( +
+ {uploadStatus.message} +
+ )} +
+ ); +} diff --git a/src/components/editor/MarkdownEditor.jsx b/src/components/editor/MarkdownEditor.jsx new file mode 100644 index 0000000..72b3ef4 --- /dev/null +++ b/src/components/editor/MarkdownEditor.jsx @@ -0,0 +1,199 @@ +/** + * MarkdownEditor.jsx - Hoofd editor component + * + * Split-pane layout met: + * - Links: Markdown textarea met toolbar en sneltoetsen + * - Rechts: Live preview via dezelfde renderer als de pagina + * + * Wordt lazy-loaded en is alleen beschikbaar in dev mode + * via /installatie?editor= + */ + +import { useState, useRef, useCallback } from 'react'; +import { parseDocument } from '../../lib/markdown/directives'; +import { renderBlocks } from '../../lib/markdown/render'; +import EditorToolbar from './EditorToolbar'; +import ImageDropZone from './ImageDropZone'; +import { useKeyboardShortcuts } from './useKeyboardShortcuts'; + +/** + * @param {object} props + * @param {string} props.content - Huidige Markdown content + * @param {function} props.onContentChange - Callback bij wijzigingen + */ +export default function MarkdownEditor({ content, onContentChange }) { + const [isOpen, setIsOpen] = useState(true); + const [isDirty, setIsDirty] = useState(false); + const [isSaving, setIsSaving] = useState(false); + const [activeOS, setActiveOS] = useState('mac'); + const textareaRef = useRef(null); + + const handleChange = useCallback((newValue) => { + onContentChange(newValue); + setIsDirty(true); + }, [onContentChange]); + + const handleSave = useCallback(async () => { + if (!isDirty || isSaving) return; + setIsSaving(true); + + try { + const response = await fetch('/__editor/save', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ content }), + }); + + const result = await response.json(); + if (!response.ok) throw new Error(result.error); + + setIsDirty(false); + } catch (err) { + alert(`Opslaan mislukt: ${err.message}`); + } finally { + setIsSaving(false); + } + }, [content, isDirty, isSaving]); + + // Keyboard shortcuts registreren + useKeyboardShortcuts(textareaRef, handleChange, handleSave); + + // Preview renderen - try-catch zodat typefouten de editor niet crashen + let frontmatter = {}; + let blocks = []; + let parseError = null; + try { + const parsed = parseDocument(content); + frontmatter = parsed.frontmatter; + blocks = parsed.blocks; + } catch (err) { + parseError = err.message; + } + const context = { activeOS, setActiveOS }; + + if (!isOpen) { + return ( + + ); + } + + return ( +
+ {/* Header bar */} +
+
+

Markdown Editor

+ installatie.md +
+
+ + Cmd+B vet | Cmd+I cursief | Cmd+K link | Cmd+S opslaan + + + +
+
+ + {/* Toolbar */} + + + {/* Split pane: editor links, preview rechts */} +
+ {/* Markdown editor (links) */} +
+ +