Contact formulier

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit 
+/package
+.env
+.env.*
+!.env.example

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}

LICENSE 2

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 AD Frontend Design & Development (FDND)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README 2.md

@@ -0,0 +1,33 @@
+> _Fork_ deze leertaak en ga aan de slag. 
+Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. 
+De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
+
+# Titel
+<!-- Geef je project een titel en schrijf in één zin wat het is -->
+
+## Inhoudsopgave
+
+  * [Beschrijving](#beschrijving)
+  * [Kenmerken](#kenmerken)
+  * [Installatie](#installatie)
+  * [Gebruik](#gebruik)
+  * [Bronnen](#bronnen)
+  * [Licentie](#licentie)
+
+## Beschrijving
+<!-- In de Beschrijving staat hoe je project er uit ziet, hoe het werkt en wat je er mee kan. -->
+<!-- Voeg een mooie poster visual toe 📸 -->
+<!-- Voeg een link toe naar Github Pages 🌐-->
+
+## Kenmerken
+<!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met Javascript gedaan en hoe? Misschien heb je een framwork of library gebruikt? -->
+
+## Installatie
+
+## Gebruik
+
+## Bronnen
+
+## Licentie
+
+This project is licensed under the terms of the [MIT license](./LICENSE).

README.md

@@ -1,33 +1,36 @@
-> _Fork_ deze leertaak en ga aan de slag. 
-Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. 
-De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
+# Plantswap
+![image](https://github.com/TimOosterveer/buurtcampus_oost_components/assets/112857270/63507a17-2858-4b15-a209-06753fa6b40d)
 
-# Titel
-<!-- Geef je project een titel en schrijf in één zin wat het is -->
 
-## Inhoudsopgave
+<h2 align="center">✨ About ✨ </h2>
+We've cultivated an amazing plant swap website for Stekjesbieb! 🌿 Visitors can explore various plants here and dive deeper into the plantswap initiative. We've added a touch of charm to make the experience even more delightful! ✨🌱
 
-  * [Beschrijving](#beschrijving)
-  * [Kenmerken](#kenmerken)
-  * [Installatie](#installatie)
-  * [Gebruik](#gebruik)
-  * [Bronnen](#bronnen)
-  * [Licentie](#licentie)
+<h2 align="center"> 🍀The Website🍀</h2>
+<br>
+For the Stekjesbieb, we have developed an amazing plant swap website. 🌿
+Visitors can explore plants and learn more about the plant swap initiative. Upon visiting our website, you'll be greeted with an informative homepage. Here, we explain what plant swapping is and how you can participate in this initiative yourself. Furthermore, you can view all available cuttings on the website and find detailed information about each cutting on the individual detail page. 🌱
 
-## Beschrijving
-<!-- In de Beschrijving staat hoe je project er uit ziet, hoe het werkt en wat je er mee kan. -->
-<!-- Voeg een mooie poster visual toe 📸 -->
-<!-- Voeg een link toe naar Github Pages 🌐-->
+Additionally, Stekjesbieb offers workshops where you can learn the best practices for caring for your cuttings. 🌸 These workshops can also be found on our website. Finally, on our contact page, you can find all the information about our location and the possibility to get in touch with us. 📌
+<h2 align="center"> 🪚Languages-Frameworks-Tools🪚</h2>
+<br>
+These are the tools, frameworks, and languages that were used to create this project💡
+<div>
+ <br>
+    <img src="https://skillicons.dev/icons?i=html,css,javascript,github"><br>
+    <img src="https://skillicons.dev/icons?i=vscode,svelte,figma">
+</div>
 
-## Kenmerken
-<!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met Javascript gedaan en hoe? Misschien heb je een framwork of library gebruikt? -->
+<h2 align="center"> 🔨Instalation guide🔨</h2>
+<br>
 
-## Installatie
+1. **Fork this repository.**
+
+2. **Clone it using GitHub Desktop and open it in your preferred code editor.**
+
+3. **This project utilizes a `.env` file for retrieving the API token.**
+
+4. **Finally, install the dependencies by using `npm install` in your command line.**
 
-## Gebruik
 
-## Bronnen
 
-## Licentie
 
-This project is licensed under the terms of the [MIT license](./LICENSE).

docs/INSTRUCTIONS 2.md

@@ -0,0 +1,61 @@
+
+# Back to Static - Static Site Generation
+
+Ontwikkel een statisch gegenereerde website voor een opdrachtgever.
+
+## Context
+
+Deze leertaak hoort bij sprint 17 Back to Static. Dit is een leertaak die je in een team uitvoert.
+
+Bij de sprintplanning krijg je uitleg over hoe je statische web pagina's kan genereren met SvelteKit en wordt de opdracht uitgelegd.
+
+Bij deze leertaak hoort voor elk teamlid 3x de deeltaak:
+- [Creative coding](https://github.com/fdnd-task/back-to-static-creative-coding)
+
+## Doel van deze opdracht
+
+Je leert wat Static Site generation is, wat de voor- en nadelen zijn en hoe je dit kunt toepassen.
+
+## Werkwijze
+
+Deze opdracht gaat over de DLC fases **Analyseren**, **Bouwen** en **Integreren** 
+
+### Analyseren
+
+Onderzoek en bespreek binnen jouw team welke wijze van deployment voor jullie opdracht het beste past. Is dat client-side, server-side, static-site rendering of een combinatie daarvan. Noteer je overweging in de wiki.
+
+We onderzoeken in de volgende stappen in ieder geval het voordeel van SSG ten opzichte van SSR, ongeacht of je dit later daadwerkelijk gaat gebruiken.
+
+### Bouwen
+
+De website die je gebouwd heb maakt tot nu toe gebruik van *server side rendering*. Elke keer dat een bezoeker van de website een pagina bezoekt wordt een request naar de server gedaan en rendered de server de betreffende pagina alvorens een response naar de browser van de eindgebruiker te sturen. Aangezien de server de data uit een API moet ophalen (via bijv. een headless cms), kan het even duren voordat de pagina gerendered is. 
+
+Om te onderzoeken of dit efficiënter kan gaan we de website van te voren renderen zodat er na een request van een bezoeker alleen maar statische HTML, CSS en JavaScript hoeft worden teruggestuurd en we dus de *build* fase overslaan.
+
+#### Aanpak
+
+1. Meet van de homepage van de huidige server side gerenderde webiste de _response tijd_ en het aantal _kilobytes_ dat in de response wordt meegestuurd. Doe deze test op jouw localhost en kijk hiervoor in de _Dev Tools > Network Tab_ met een _Throttle_ van bijvoorbeeld _Slow 3G_.
+2. Maak een branch aan, bijvoorbeeld _static-site_.
+3. Zoek uit hoe je in het door jou gebruikte framework de website statisch gegenereerd kan worden. En pas je code aan volgens de instructies.
+4. Maak op jouw localhost een *build* van de website en documenteer in je wiki de *response tijd* en het aantal *kilobytes* dat in nu de response wordt meegestuurd voor de homepage.
+
+### Integreren
+
+Nu de website statisch gegeneerd wordt, publiceer je de website en zorg je er voor dat bij een verandering van de content of de code de website opnieuw gebuild wordt (continuous deployment). Hiervoor maak je gebruik van GitHub Actions of zet je bijvoorbeeld Netlify in.
+
+#### Aanpak
+1. Publiceer je website met bijvoorbeeld Netlify. Nu je statische pagina's publiceert kan je ook met een GitHub action automatisch de site laten builden bij een update van de code.
+2. Zoek uit hoe je na een aanpassing van de content in het headless cms, automatisch een nieuwe build kunt laten maken.
+
+## Criteria
+
+Focus sprint # - De focus van deze sprint ligt op het statisch genereren van een website.
+
+Deze opdracht is done als:
+- [ ] jouw code een statische website *‌build*;
+- [ ] de statische website online te bekijken is;
+- [ ] je het verschil in respons tijd en het het verschil in kilobytes gedocumenteerd hebt in je wiki.
+- [ ] (optioneel) jouw code automatisch opnieuw *gebuild* wordt en gepubliceerd wordt naar de live site bij een push naar GitHub of na een update van de content(continuous deployment);
+- [ ] maak een keuze voor de deployment van jouw site en onderbouw in je wiki waarom dit de beste optie is
+
+