init

2022-02-27 17:01:45 +01:00
parent d469314fc0
commit 632409b71a
23 changed files with 328 additions and 101 deletions
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -0,0 +1,5 @@
+{
+  "MD013": false,
+  "MD025": false,
+  "MD033": false
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -4,16 +4,9 @@

 declare module 'vue' {
  export interface GlobalComponents {
-    CommunityIcon: typeof import('./src/components/icons/CommunityIcon.vue')['default']
-    DocumentationIcon: typeof import('./src/components/icons/DocumentationIcon.vue')['default']
-    EcosystemIcon: typeof import('./src/components/icons/EcosystemIcon.vue')['default']
-    FrameworkLink: typeof import('./src/components/FrameworkLink.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    Island: typeof import('./node_modules/.pnpm/iles@0.7.32/node_modules/iles/dist/client/app/components/Island.vue')['default']
-    SupportIcon: typeof import('./src/components/icons/SupportIcon.vue')['default']
-    ToolingIcon: typeof import('./src/components/icons/ToolingIcon.vue')['default']
+    Island: typeof import("./node_modules/.pnpm/iles@0.7.32/node_modules/iles/dist/client/app/components/Island.vue")["default"];
+    ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
    Welcome: typeof import('./src/components/Welcome.vue')['default']
-    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
  }
 }

--- a/iles.config.ts
+++ b/iles.config.ts
@@ -1,3 +1,5 @@
-import { defineConfig } from 'iles'
+import { defineConfig } from "iles";

-export default defineConfig({})
+export default defineConfig({
+  modules: ["@islands/headings"],
+});
--- a/netlify.toml
+++ b/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+  publish = "dist"
+  command = "npm run build"
+
+[build.environment]
+  NODE_VERSION = "16"
--- a/package.json
+++ b/package.json
@@ -12,9 +12,15 @@
    "node": "^14.18 || >= 16.0.0"
  },
  "devDependencies": {
+    "@islands/headings": "^0.1.1",
+    "@islands/prism": "^0.1.1",
    "iles": "^0.7.19",
+    "sass": "^1.49.9",
    "typescript": "^4.5",
    "vitest": "*",
    "vue-tsc": "^0.29"
+  },
+  "dependencies": {
+    "pinia": "^2.0.11"
  }
-}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,15 +1,25 @@
 lockfileVersion: 5.3

 specifiers:
+  '@islands/headings': ^0.1.1
+  '@islands/prism': ^0.1.1
  iles: ^0.7.19
+  pinia: ^2.0.11
+  sass: ^1.49.9
  typescript: ^4.5
  vitest: '*'
  vue-tsc: ^0.29

+dependencies:
+  pinia: 2.0.11_typescript@4.5.5
+
 devDependencies:
-  iles: 0.7.32
+  '@islands/headings': 0.1.1
+  '@islands/prism': 0.1.1
+  iles: 0.7.32_sass@1.49.9
+  sass: 1.49.9
  typescript: 4.5.5
-  vitest: 0.5.5
+  vitest: 0.5.5_sass@1.49.9
  vue-tsc: 0.29.8_typescript@4.5.5

 packages:
@@ -86,6 +96,14 @@ packages:
      - webpack
    dev: true

+  /@islands/headings/0.1.1:
+    resolution: {integrity: sha512-sDMDQD6b9d48psagYBt5MbWm0wonJ4t7BJV/hzln45Xg+h4RxBUT9d/R66UaAmHiPx5b/Q+4c3VvXq9HYciMvg==}
+    dependencies:
+      estree-util-value-to-estree: 1.3.0
+      hast-util-heading-rank: 2.1.0
+      hast-util-to-string: 2.0.0
+    dev: true
+
  /@islands/hydration/0.3.8:
    resolution: {integrity: sha512-3cjMM0Zk/AiBq0uPc2rjUsT2qNrsAvdS8MJvLHqNAnKf0BdWrqesdOJLCUHmqFqR1GmIElzUN+MoS7+9VPTr8A==}
    dev: true
@@ -125,6 +143,13 @@ packages:
      '@islands/hydration': 0.3.8
    dev: true

+  /@islands/prism/0.1.1:
+    resolution: {integrity: sha512-kTkQo/qBfgIXeb0unuEazCZEVyWnuIJX81j/QSqjQliX5MAlg/f6THJUJVyQvgKcXipR/TkQutiBXoGXRz208w==}
+    dependencies:
+      prismjs: 1.27.0
+      unist-util-visit: 4.1.0
+    dev: true
+
  /@nodelib/fs.scandir/2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@@ -278,7 +303,7 @@ packages:
      vite: ^2.5.10
      vue: ^3.2.25
    dependencies:
-      vite: 2.8.4
+      vite: 2.8.4_sass@1.49.9
      vue: 3.2.31
    dev: true

@@ -382,7 +407,6 @@ packages:

  /@vue/devtools-api/6.0.12:
    resolution: {integrity: sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==}
-    dev: true

  /@vue/reactivity-transform/3.2.31:
    resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
@@ -1059,6 +1083,13 @@ packages:
    resolution: {integrity: sha512-aXXZFVMnBBDRP81vS4YtAYJ0hUkgEsXea7lNKWCOeaAquGb1Jm2rcONPB5fpzwgbNxulTvrWuKnp9UElUGAKeQ==}
    dev: true

+  /estree-util-value-to-estree/1.3.0:
+    resolution: {integrity: sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      is-plain-obj: 3.0.0
+    dev: true
+
  /estree-util-visit/1.1.0:
    resolution: {integrity: sha512-3lXJ4Us9j8TUif9cWcQy81t9p5OLasnDuuhrFiqb+XstmKC1d1LmrQWYsY49/9URcfHE64mPypDBaNK9NwWDPQ==}
    dependencies:
@@ -1229,6 +1260,12 @@ packages:
    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
    dev: true

+  /hast-util-heading-rank/2.1.0:
+    resolution: {integrity: sha512-w+Rw20Q/iWp2Bcnr6uTrYU6/ftZLbHKhvc8nM26VIWpDqDMlku2iXUVTeOlsdoih/UKQhY7PHQ+vZ0Aqq8bxtQ==}
+    dependencies:
+      '@types/hast': 2.3.4
+    dev: true
+
  /hast-util-is-element/2.1.2:
    resolution: {integrity: sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==}
    dependencies:
@@ -1272,6 +1309,12 @@ packages:
      unist-util-is: 5.1.1
    dev: true

+  /hast-util-to-string/2.0.0:
+    resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
+    dependencies:
+      '@types/hast': 2.3.4
+    dev: true
+
  /hast-util-whitespace/2.0.0:
    resolution: {integrity: sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==}
    dev: true
@@ -1301,7 +1344,7 @@ packages:
      resolve-alpn: 1.2.1
    dev: true

-  /iles/0.7.32:
+  /iles/0.7.32_sass@1.49.9:
    resolution: {integrity: sha512-mXN+Phm2krOBk1jvSxFfRdL3lIVelcoBXuRm7z5W0GLr/0oyzBAtZAfnD/DPY1UnLDcJPCXBH5dDEP/lrzjVpA==}
    engines: {node: ^14.18 || >= 16.0.0}
    hasBin: true
@@ -1325,7 +1368,7 @@ packages:
      picocolors: 1.0.0
      unist-util-visit: 4.1.0
      unplugin-vue-components: /@islands/components/0.17.0_vite@2.8.4+vue@3.2.31
-      vite: 2.8.4
+      vite: 2.8.4_sass@1.49.9
      vue: 3.2.31
      vue-router: 4.0.12_vue@3.2.31
      xdm: 3.3.1
@@ -1340,6 +1383,10 @@ packages:
      - webpack
    dev: true

+  /immutable/4.0.0:
+    resolution: {integrity: sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==}
+    dev: true
+
  /import-meta-resolve/1.1.1:
    resolution: {integrity: sha512-JiTuIvVyPaUg11eTrNDx5bgQ/yMKMZffc7YSjvQeSMXy58DO2SQ8BtAf3xteZvmzvjYh14wnqNjL8XVeDy2o9A==}
    dependencies:
@@ -1475,6 +1522,11 @@ packages:
    engines: {node: '>=0.12.0'}
    dev: true

+  /is-plain-obj/3.0.0:
+    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
+    engines: {node: '>=10'}
+    dev: true
+
  /is-plain-obj/4.0.0:
    resolution: {integrity: sha512-NXRbBtUdBioI73y/HmOhogw/U5msYPC9DAtGkJXeFcFWSFZw0mCUsPxk/snTuJHzNKA8kLBK4rH97RMB1BfCXw==}
    engines: {node: '>=12'}
@@ -2187,6 +2239,23 @@ packages:
    engines: {node: '>=8.6'}
    dev: true

+  /pinia/2.0.11_typescript@4.5.5:
+    resolution: {integrity: sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.0.12
+      typescript: 4.5.5
+      vue-demi: 0.12.1
+    dev: false
+
  /postcss/8.4.7:
    resolution: {integrity: sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==}
    engines: {node: ^10 || ^12 || >=14}
@@ -2196,6 +2265,11 @@ packages:
      source-map-js: 1.0.2
    dev: true

+  /prismjs/1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+    dev: true
+
  /promise/7.3.1:
    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
    dependencies:
@@ -2405,6 +2479,16 @@ packages:
      mri: 1.2.0
    dev: true

+  /sass/1.49.9:
+    resolution: {integrity: sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.0.0
+      source-map-js: 1.0.2
+    dev: true
+
  /section-matter/1.0.0:
    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
    engines: {node: '>=4'}
@@ -2636,7 +2720,7 @@ packages:
      webpack:
        optional: true
    dependencies:
-      vite: 2.8.4
+      vite: 2.8.4_sass@1.49.9
      webpack-virtual-modules: 0.4.3
    dev: true

@@ -2672,7 +2756,7 @@ packages:
      vfile-message: 3.1.0
    dev: true

-  /vite/2.8.4:
+  /vite/2.8.4_sass@1.49.9:
    resolution: {integrity: sha512-GwtOkkaT2LDI82uWZKcrpRQxP5tymLnC7hVHHqNkhFNknYr0hJUlDLfhVRgngJvAy3RwypkDCWtTKn1BjO96Dw==}
    engines: {node: '>=12.2.0'}
    hasBin: true
@@ -2692,11 +2776,12 @@ packages:
      postcss: 8.4.7
      resolve: 1.22.0
      rollup: 2.68.0
+      sass: 1.49.9
    optionalDependencies:
      fsevents: 2.3.2
    dev: true

-  /vitest/0.5.5:
+  /vitest/0.5.5_sass@1.49.9:
    resolution: {integrity: sha512-oBKIXpFOGN7jDdK0MO4uWcB+UOPRyEJveB8XDx74XsFNbjGF7vHmHqwAomNE8MGtDW8hBKvSSbr58hibFiQc5Q==}
    engines: {node: '>=14.14.0'}
    hasBin: true
@@ -2721,7 +2806,7 @@ packages:
      local-pkg: 0.4.1
      tinypool: 0.1.2
      tinyspy: 0.3.0
-      vite: 2.8.4
+      vite: 2.8.4_sass@1.49.9
    transitivePeerDependencies:
      - less
      - sass
@@ -2849,6 +2934,19 @@ packages:
      vscode-typescript-languageservice: 0.29.8
    dev: true

+  /vue-demi/0.12.1:
+    resolution: {integrity: sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dev: false
+
  /vue-router/4.0.12_vue@3.2.31:
    resolution: {integrity: sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==}
    peerDependencies:
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/app.ts
+++ b/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());
+  },
+});
--- a/src/assets/base.css
+++ b/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;
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
--- a/src/components/FrameworkLink.vue
+++ b/src/components/FrameworkLink.vue
@@ -1,6 +0,0 @@
-<template>
-  <a target="_blank" href="https://v3.vuejs.org/">
-    Vue 3
-    <slot />
-  </a>
-</template>
--- a/src/components/HelloWorld.vue
+++ b/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>
--- a/src/components/Welcome.vue
+++ b/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>
--- a/src/components/flow/ProductionFlow.vue
+++ b/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>
--- a/src/hooks/usePosts.hook.ts
+++ b/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));
+};
--- a/src/layouts/default.vue
+++ b/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>
--- a/src/modules/flow/components/AddFlow.vue
+++ b/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>
--- a/src/modules/flow/components/FlowStep.vue
+++ b/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>
--- a/src/modules/flow/store/useProductionFlow.store.ts
+++ b/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];
+    },
+  },
+});
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Julien Calixte
+title: Hi!
 ---

 <main>
--- a/src/pages/posts/production-flow.mdx
+++ b/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 />
--- a/src/site.ts
+++ b/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`,
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,8 +12,7 @@
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "paths": {
-      "@/*": ["src/*"],
-      "~/*": ["src/*"]
+      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "skipLibCheck": true