Inhouds Tafel

• Installatie - Stap 1 - Copy Repository - Stap 2 - Copy Repository - Stap 3 - Enable Actions & Pages - Stap 4 - Create base folder & clone repo - Stap 5 - Verander naam - Stap 6 - Upload de updates naar github - Stap 7 - Zet de github pages link in de about.
• Updates - Doelstellingen aanpassen - Doelstelling verifiëren (Coaches)

---

Installatie

Stap 1 - Copy Repository

• Copy de code url van de basis repository.
  • https://github.com/Thomas-More-Digital-Innovation/2324-DI-Doelstellingen.git
• Klik op de + rechts boven → Import Repository
  • Of klik hier om naar de link te gaan.
• `

Stap 2 - Copy Repository

• 1 - Vul de link die je net gekopieerd hebt in.
• 2 - Vul een repository naam in. (bv. Doelstellingen)
• 3 - Maak de repository Private. (Optional)
• 4 - Klik op Begin import.
• 

Stap 3 - Enable Actions & Pages

• Ga naar de Settings van je repository.
• Ga naar Actions → General in het linkse menu.
• Onder Actions Permissions kies voor Allow all actions and reusable workflows
• Klik op Save.
• Ga naar Pages in het linkse menu.
• Onder Build and Deployment verander de source van Deploy from a branch naar Github Actions.
• 

Stap 4 - Create base folder & clone repo

• Maak een folder op je computer met dezelfde naam als je GitHub repository
• Ga naar deze folder in je CMD en clone de repository die je net hebt gemaakt.

  git clone <REPO_LINK> .

Stap 5 - Verander naam

• In de index.html vervang je NAAM overal met je eigen naam.

Stap 6 - Upload de updates naar github

• Open de folder in CMD.
• Voer de updates door naar GitHub met deze commando's.

  git add .
  git commit -m "<MESSAGE>"
  git push

• De website komt automatisch online m.b.v GitHub Actions tussen de 1 en 5 minuten.
  • Deze zal op https://<GITHUB_USERNAME>.github.io/<REPO_NAME>/ online komen.

Stap 7 - Zet de github pages link in de about.

• Ga naar de home pagina van je repository.
• Klik op het tandwiel om de about aan te passen
• 1 - Duid aan: Use your GitHub Pages website.
• 2 - Klik op Save changes.

---

Updates

Doelstellingen aanpassen

1. Ga naar de doelstellingen.js en zoek de doelstelling die je wilt aanpassen.

2. Verander de volgende gegevens:

   "status": "", -- Zie verschillende statussen hieronder
   "verified": "", -- ALLEEN VOOR COACHES
   "project": "", -- Project of vak
   "bewijs": "" -- Tekst met bewijs van de behaalde doelstelling, meer info hieronder

   • status:

     • td → To Do
     • ip → In Progress
     • d → Done

   • bewijs:

     • Je kan ook links bijvoegen m.b.v een <a href='<BESTAND_OF_LINK>' target='_blank'><Tekst></a>
       • <Tekst> → De inhoud dat je wilt laten zien.
       • <BESTAND_OF_LINK> → Link of bestand dat er achter zit.
     • Als je een pdf of een ander bestand wilt toevoegen is het best om in de assets folder een extra folder te maken met als naam de doelstelling nummer. Zo houden we het overzichtelijk om alles bij te houden.
       • Als je een accordion wilt hebben voor meer overzicht in het bewijs kun je deze functie gebruiken: makeAccordion(). Meer info bij het voorbeeld.

   • Link voorbeeld: <a href='assets/1.4/bewijs.pdf' target='_blank'>1.4</a>

     • Dit is een link naar bewijs.pdf onder de assets.

   • Accordion voorbeeld:

     • Maak een nieuwe const variabel aan in de accordion.js file zoals hieronder.

       Open const

       const projectInfo = {
         title: "TITEL",
         text: `
           <div class='flex flex-col py-2'>
             <h2 class='text-lg font-bold'>Opdrachtgever</h2>
             <p>NAAM</p>
           </div>
           <div class='flex flex-col py-2'>
             <h2 class='text-lg font-bold'>Projectomschrijving</h2>
             <p>OMSCHRIJVING</p>
           </div>
           <div class='flex flex-col py-2'>
             <h2 class='text-lg font-bold'>Projectduur</h2>
             <p>September 2023 &rarr; Mei 2024</p>
           </div>
           <div class='flex flex-col py-2'>
             <h2 class='text-lg font-bold'>Links</h2>
             <p>Github Repository: REPO LINK</p>
           </div>
         `,
       };

     • Nu kun je dit gebruiken in een bewijs.

     • bv:

       bewijs: `${makeAccordion(projectInfo)} Andere tekst erna..`;

     • Hier kun je ook nog altijd links of fotos aan toevoegen via HTML code.

3. Voer de updates door naar GitHub.

   git add .
   git commit -m "<MESSAGE>"
   git push

4. Na 1 - 3 minuten wordt de pages automatisch aangepast.

Doelstelling verifiëren (Coaches)

• Open de doelstellingen file op GitHub.
• Klik op .
• Zoek de doelstelling (CTRL+F werkt ook).
• Voer je naam in bij "verified": "",.
• Klik op Commit Changes....
• 1 - Voer een commit message in.
• 2 - Voer een beschrijving in. (Optional)
• 3 - Klik op Commit changes.
• De GitHub pages wordt automatisch aangepast binnen de 1 - 5 minuten.