init

src/components/FrameworkLink.vue

@@ -1,6 +0,0 @@
-<template>
-  <a target="_blank" href="https://v3.vuejs.org/">
-    Vue 3
-    <slot />
-  </a>
-</template>

src/components/HelloWorld.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: String
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://iles-docs.netlify.app/">îles</a> +
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> + <FrameworkLink client:none />. What's
-      next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    display: block;
-    text-align: left;
-  }
-}
-</style>

src/components/Welcome.vue

@@ -1 +1,23 @@
-<template>Home</template>
+<script setup lang="ts">
+import { usePosts } from "@/hooks/usePosts.hook";
+
+const posts = usePosts();
+</script>
+
+<template>
+  <h1>Hi! I'm Julien. A mobile & web developer.</h1>
+  <p>
+    I am into building things with code. I love creating offline first
+    Progressive Web Apps. I've been doing programmation for 5 years and lead
+    dev/technical architecture for 1 year now.
+  </p>
+
+  <section>
+    <h2>My blog posts</h2>
+    <ul>
+      <li v-for="post in posts" :key="post.href">
+        <a :href="post.href">{{ post.title }}</a>
+      </li>
+    </ul>
+  </section>
+</template>

src/components/flow/ProductionFlow.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useProductionFlow } from "@/modules/flow/store/useProductionFlow.store";
+import AddFlow from "@/modules/flow/components/AddFlow.vue";
+
+const store = useProductionFlow();
+</script>
+
+<template>
+  <section class="production-flow">
+    <add-flow />
+    <ul>
+      <li :key="step.name" v-for="step in store.$state.steps">
+        {{ step.name }}
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.production-flow {
+  ul {
+    display: flex;
+    justify-content: space-around;
+  }
+}
+</style>