add template for components

Author: kynrai

README.md

@@ -2,24 +2,24 @@
 
 This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
 
-### Installation
+## Installation
 
-```
-$ npm install
+```sh
+npm install
 ```
 
-### Local Development
+## Local Development
 
-```
-$ npm run serve
+```sh
+npm run serve
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
-### Build
+## Build
 
-```
-$ npm run build
+```sh
+npm run build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.

docs/06-frontend/01-components/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Components",
+  "position": 6
+}

docs/06-frontend/01-components/best-practice.md

@@ -0,0 +1,21 @@
+---
+sidebar_position: 1
+---
+
+# Best Practice
+
+## HTML/CSS First
+
+It is always better to start with HTML/CSS where possible. For example instead of using javascript to control modals, we can use `dialog` which is built into the browser.
+
+We can use CSS to control a lot of client side visiblity and state. For example, we can use CSS to control the visibility of form elements based on the state of a checkbox. This is much easier to read and maintain than using javascript for simple cases.
+
+This will also encourage simple web design that are easy to maintain and scale.
+
+```html
+
+```
+
+## Web Components
+
+When we need to use more complex complents and third party libraries such as maps, we can use web components. Web components are a set of standards that allow us to create reusable components that can be used in any web application. They are built into the browser and do not require any third party libraries.

docs/06-frontend/01-components/modal.md

@@ -0,0 +1,19 @@
+---
+sidebar_position: 2
+---
+
+# Modal
+
+Example of a reusable modal component. This is a simple modal that can be used to display information or ask for confirmation.
+
+Typically this would be placed in the `/internal/ui/components` folder. A file called `modal.templ` would be created.
+
+## Example
+
+```templ
+package modal
+
+
+```
+
+## Usage

docs/06-frontend/01-components/toast.md

@@ -0,0 +1,19 @@
+---
+sidebar_position: 3
+---
+
+# Toast
+
+Example of a reusable toast component. This is a simple toast that can be used to display temporary information such as confirmations.
+
+Typically this would be placed in the `/internal/ui/components` folder. A file called `toast.templ` would be created.
+
+## Example
+
+```templ
+package toast
+
+
+```
+
+## Usage