From 463428f14ce5f18bb1c0f5860e91e8ba6902e704 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 17 Sep 2024 18:11:42 +0200
Subject: [PATCH 1/2] document new route

---
 README.md             | 45 +++++++++++++++++++++++++++----------------
 src/router/router.js  | 29 +---------------------------
 src/router/routes.js  | 30 +++++++++++++++++++++++++++++
 src/views/Example.vue | 16 ++++++---------
 4 files changed, 65 insertions(+), 55 deletions(-)
 create mode 100644 src/router/routes.js

diff --git a/README.md b/README.md
index fcd3ebe..ab10d5d 100644
--- a/README.md
+++ b/README.md
@@ -42,11 +42,12 @@ VITE_PASSWORD=your-private-password
 
 ### Creating a page
 
-Templates are managed through Vue (`/src/views`). Thus, the process for creating new pages differs from the Kirby usual one. In addition to the **blueprint** (`/public/site/blueprints/pages/example.yml`) and **template** (`/public/site/templates/example.php`) files, it needs at least a **content representation** (`/public/site/templates/example.json.php`) and a **view component** (`/src/views/Example.vue`) ones.
+Templates are managed through Vue (`/src/views`). Thus, the process for creating new pages differs from the Kirby usual one. In addition to the **blueprint** (`/public/site/blueprints/pages/example.yml`) and **template** (`/public/site/templates/example.php`) files and the corresponding content directory (`/public/content/<page-uri>/<template>.txt`), it needs at least a **content representation** (`/public/site/templates/example.json.php`) and a **view component** (`/src/views/Example.vue`) ones.
 
 1. **Create the blueprint** as usual.
 2. **Create the corresponding template**. Distincts templates are needed, but all of them should contain this same single line of code (that you can also find in `/public/site/templates/example.php`) : `<?php snippet('generic-template') ?>`.
-3. **Create the corresponding [content representation](https://getkirby.com/docs/guide/templates/content-representations)** following this code (also in `/public/site/templates/example.json.php`) :
+3. **Create the corresponding content directory**. Put the `<template-name>.txt` within.
+4. **Create the corresponding [content representation](https://getkirby.com/docs/guide/templates/content-representations)** following this code (also in `/public/site/templates/example.json.php`) :
 
 ```php
 <?php
@@ -63,34 +64,44 @@ echo json_encode($data);
 
 `$genericData` are defined in the `/public/site/controllers/site.php` controllers. By default, it contains a simple representation of the page object.
 
-4. **Create the corresponding views** in `/src/views/`. It's just a simple vue component that heritates data through the props (also in `/src/views/Example.vue`) :
+4. **Create the corresponding views** in `/src/views/`. It's just a simple vue component that heritates the page data through the page object (also in `/src/views/Example.vue`) :
 
 ```vue
 <template>
-  <h1>{{ data.content.title }}</h1>
-  <!-- ... -->
+  <h1>{{ page.content.title }}</h1>
 </template>
-<script setup>
-const { data } = defineProps({
-  data: Object,
-});
 
-// ....
+<script setup>
+import { usePageStore } from "../stores/page";
+import { storeToRefs } from "pinia";
+
+const { page } = storeToRefs(usePageStore());
 </script>
 ```
 
-5. **Import the view** in the `/src/App.vue` root component :
+5. **Create the route** in the `/src/router/routes.js`. A route is a combination of a path and a corresponding component. The path can include variable parameters, which can be captured and passed to the component. To create a route, you need to import the component and add an object to the routes array. See the [Vue Router documentation](https://router.vuejs.org/guide/) for more information.
 
 ```vue
 <script setup>
-...
-import example from "./views/Example.vue";
+import ExampleView from "../views/ExampleView.vue";
 
-const components = {
-  example
-};
+const routes = [
+  // Existing routes go here...
+  {
+    // This is a static route without any variable parameters
+    path: "/page-uri",
+    component: ExampleView,
+  },
+  {
+    // This is a dynamic route with a variable parameter :title
+    path: "/page-uri/:title",
+    component: ExampleView,
+    // OPTIONAL. The props: true option allows the route parameters to be passed as props to the component.
+    props: true,
+  },
+];
 
-...
+export default routes;
 </script>
 ```
 
diff --git a/src/router/router.js b/src/router/router.js
index c6b2f03..79fb91f 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,36 +1,9 @@
 import { createWebHistory, createRouter } from "vue-router";
-import Home from "../views/Home.vue";
-import Notifications from "../views/Notifications.vue";
-import Reunions from "../views/Reunions.vue";
-import Inspirations from "../views/Inspirations.vue";
-import Project from "../views/Project.vue";
+import routes from "./routes";
 import { useApiStore } from "../stores/api";
 import { usePageStore } from "../stores/page";
 import { getActivePinia } from "pinia";
 
-const routes = [
-  {
-    path: "/",
-    component: Home,
-  },
-  {
-    path: "/notifications",
-    component: Notifications,
-  },
-  {
-    path: "/reunions",
-    component: Reunions,
-  },
-  {
-    path: "/inspirations",
-    component: Inspirations,
-  },
-  {
-    path: "/projects/:id",
-    component: Project,
-  },
-];
-
 const router = createRouter({
   history: createWebHistory(),
   routes,
diff --git a/src/router/routes.js b/src/router/routes.js
new file mode 100644
index 0000000..e2cee27
--- /dev/null
+++ b/src/router/routes.js
@@ -0,0 +1,30 @@
+import Home from "../views/Home.vue";
+import Notifications from "../views/Notifications.vue";
+import Reunions from "../views/Reunions.vue";
+import Inspirations from "../views/Inspirations.vue";
+import Project from "../views/Project.vue";
+
+const routes = [
+  {
+    path: "/",
+    component: Home,
+  },
+  {
+    path: "/notifications",
+    component: Notifications,
+  },
+  {
+    path: "/reunions",
+    component: Reunions,
+  },
+  {
+    path: "/inspirations",
+    component: Inspirations,
+  },
+  {
+    path: "/projects/:id",
+    component: Project,
+  },
+];
+
+export default routes;
diff --git a/src/views/Example.vue b/src/views/Example.vue
index 06edc1d..58d7bd2 100644
--- a/src/views/Example.vue
+++ b/src/views/Example.vue
@@ -1,16 +1,12 @@
 <template>
-  <h1>{{ data.content.title }}</h1>
-  <!-- ... -->
+  <h1>{{ page.content.title }}</h1>
 </template>
 
-<style scoped>
-  
-</style>
-
 <script setup>
-const { data } = defineProps({
-  data: Object,
-});
+import { usePageStore } from "../stores/page";
+import { storeToRefs } from "pinia";
 
-// ....
+const { page } = storeToRefs(usePageStore());
 </script>
+
+<style scoped></style>

From 742b02cf931f761b38478ef5787a4502c7ca1236 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 17 Sep 2024 18:21:37 +0200
Subject: [PATCH 2/2] add dependencies to documentation

---
 README.md | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ab10d5d..e70ca0c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,26 @@
-The project is based on [Kirby CMS](https://getkirby.com), [Vite](https://vitejs.dev/) + [Vue](https://fr.vuejs.org/) and [Pinia](https://pinia.vuejs.org/) as a state manager.
-Vue is used following the composition API approach.
+The project is based on
+
+- [Kirby CMS](https://getkirby.com) as the content management system
+- [Vite](https://vitejs.dev/) as the build tool
+- [Vue](https://fr.vuejs.org/) as the JavaScript framework
+- [Vue Router](https://router.vuejs.org) for handling routing
+  [Pinia](https://pinia.vuejs.org/) as a state management library.
+
+Vue is used with the composition API approach.
+
+The project also includes some helper libraries that are available throughout the /src directory. These libraries include:
+
+- [dayjs](https://day.js.org/): a lightweight JavaScript date library for parsing, manipulating, and formatting dates. To use dayjs in your code, you can import it like this:
+
+```javascript
+import dayjs from "dayjs";
+```
+
+- [slugify](https://www.npmjs.com/package/slugify): a library for converting strings into URL-friendly slugs. To use slugify in your code, you can import it like this:
+
+```javascript
+import slugify from "slugify";
+```
 
 # Development