init

src/app.ts

@@ -1,3 +1,8 @@
-import { defineApp } from 'iles'
+import { defineApp } from "iles";
+import { createPinia } from "pinia";
 
-export default defineApp({})
+export default defineApp({
+  enhanceApp({ app }) {
+    app.use(createPinia());
+  },
+});

src/assets/base.css

@@ -1,4 +1,6 @@
 /* color palette from <https://github.com/vuejs/theme> */
+@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&family=Fenix&display=swap");
+
 :root {
   --vt-c-white: #ffffff;
   --vt-c-white-soft: #f8f8f8;
@@ -36,7 +38,7 @@
   --section-gap: 160px;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
@@ -48,7 +50,7 @@
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
   }
-}
+} */
 
 *,
 *::before,
@@ -65,8 +67,8 @@ body {
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: "Fenix", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

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>

src/hooks/usePosts.hook.ts

@@ -0,0 +1,35 @@
+import { computed } from "vue";
+
+interface Post {
+  filename: string;
+  lastUpdated: Date;
+  href: string;
+  title: string;
+  meta: {
+    filename: string;
+    lastUpdated: Date;
+    href: string;
+  };
+  frontmatter: {
+    title: string;
+    publishedAt?: Date;
+  };
+}
+
+const byDate = (a: Post, b: Post) => {
+  if (!b.frontmatter.publishedAt) {
+    return -1;
+  }
+
+  if (!a.frontmatter.publishedAt) {
+    return 1;
+  }
+
+  return a.frontmatter.publishedAt <= b.frontmatter.publishedAt ? -1 : 1;
+};
+
+export const usePosts = () => {
+  const posts = $(useDocuments<Post>("@/pages/posts"));
+
+  return computed(() => posts.sort(byDate));
+};

src/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="default">
     <header>
       <div class="wrapper">
         <div id="nav">
@@ -14,28 +14,18 @@
 </template>
 
 <style>
-@import "~/assets/base.css";
+@import "@/assets/base.css";
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-#nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-#nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
+/* #nav a.router-link-exact-active {
+  background-color: var(--color-text);
+} */
 
 #nav a {
   display: inline-block;
   padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
 }
 
-#nav a:first-of-type {
-  border: 0;
+.default {
+  padding: 0 1rem;
 }
 </style>

src/modules/flow/components/AddFlow.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useProductionFlow } from "@/modules/flow/store/useProductionFlow.store";
+
+const store = useProductionFlow();
+const addStep = () => {
+  store.addStep({
+    name: "Recette",
+    outputs: ["Go production"],
+    prerequisites: ["app in staging"],
+  });
+};
+</script>
+
+<template>
+  <form class="add-flow" @submit.prevent>
+    <button @click="addStep">Add a step</button>
+  </form>
+</template>
+
+<style scoped>
+.add-flow {
+}
+</style>

src/modules/flow/components/FlowStep.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flow-step"></div>
+</template>
+
+<style scoped>
+.flow-step {
+}
+</style>

src/modules/flow/store/useProductionFlow.store.ts

@@ -0,0 +1,30 @@
+import { defineStore } from "pinia";
+
+interface Step {
+  name: string;
+  prerequisites: string[];
+  outputs: string[];
+}
+
+interface State {
+  steps: Step[];
+}
+
+const initialState: State = {
+  steps: [
+    {
+      name: "In production",
+      prerequisites: [],
+      outputs: ["Users can use the app"],
+    },
+  ],
+};
+
+export const useProductionFlow = defineStore("production-flow", {
+  state: () => ({ ...initialState }),
+  actions: {
+    addStep(step: Step) {
+      this.$state.steps = [step, ...this.$state.steps];
+    },
+  },
+});

src/pages/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: Julien Calixte
+title: Hi!
 ---
 
 <main>

src/pages/posts/production-flow.mdx

@@ -0,0 +1,24 @@
+---
+title: An introduction to production flow
+---
+
+# {title}
+
+Dear developers, how clear is it for you the way you build an app?
+
+You may answer "Easy! There are few steps:"
+
+1. Talking to the client
+2. Getting the design
+3. Coding
+4. deploying to users
+
+But how exactly? What does "talking to the client" really mean? And "coding" ?
+
+In lean, one particular important concept is **Visual Management**: *doing by seeing*. For that, we want to be clear on how we work.
+
+May I ask you some questions?
+
+First, can you name your different step before having your app in production?
+
+<ProductionFlow />

src/site.ts

@@ -1,4 +1,4 @@
 export default {
-  title: 'îles',
-  description: 'Islands of interactivity with Vue in Vite.js'
-}
+  title: "Julien Calixte",
+  description: `Julien Calixte's blog`,
+};