extract Post to module post

src/hooks/usePosts.hook.ts

@@ -1,23 +1,6 @@
+import { Post } from "@/modules/post/entities/Post"
 import { computed } from "vue"
 
-interface Post {
-  filename: string
-  lastUpdated: Date
-  href: string
-  title: string
-  date: Date
-  meta: {
-    filename: string
-    lastUpdated: Date
-    href: string
-  }
-  frontmatter: {
-    title: string
-    publishedAt?: Date
-  }
-  draft?: boolean
-}
-
 const byMostRecentFirst = (a: Post, b: Post) => {
   if (!b.date) {
     return 1
@@ -33,9 +16,5 @@ const byMostRecentFirst = (a: Post, b: Post) => {
 export const usePosts = () => {
   const posts = $(useDocuments<Post>("@/pages/posts"))
 
-  return computed(() =>
+  return computed(() => posts.sort(byMostRecentFirst))
-    posts
-      .filter((post) => import.meta.env.DEV || post.draft !== true)
-      .sort(byMostRecentFirst)
-  )
 }

src/layouts/post.vue

@@ -1,7 +1,13 @@
+<script setup lang="ts">
+const { frontmatter } = usePage()
+</script>
+
 <template>
   <div class="post">
     <app-header />
 
+    <img id="main-illustration" v-if="frontmatter.illustration" :src="frontmatter.illustration" alt="Main illustration">
+
     <article id="main-article">
       <slot />
     </article>
@@ -9,6 +15,11 @@
 </template>
 
 <style lang="scss">
+#main-illustration {
+  max-width: 100%;
+  object-fit: contain;
+}
+
 article#main-article {
   max-width: 680px;
   margin: auto;

src/modules/post/entities/Post.ts

@@ -0,0 +1,18 @@
+export interface Post {
+  filename: string
+  lastUpdated: Date
+  href: string
+  title: string
+  date: Date
+  illustration: string
+  meta: {
+    filename: string
+    lastUpdated: Date
+    href: string
+  }
+  frontmatter: {
+    title: string
+    publishedAt?: Date
+  }
+  draft?: boolean
+}

src/pages/posts/feature-factory.mdx

@@ -5,7 +5,7 @@ date: 2022-11-19
 draft: true
 ---
 
-# {title}
+# An introduction to the feature factory
 
 From my experience, project failures mainly come from having mistrust between teams. Therefor lead time due to team availability to solve dependencies increases.
 

src/pages/posts/introduction-to-smart-notes.md

@@ -1,5 +1,6 @@
 ---
 title: Introduction to smart notes, how to take notes efficiently
+illustration: https://res.cloudinary.com/practicaldev/image/fetch/s--F-oPy0uT--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8t5g0o0h4x1ss6anr02.png
 layout: post
 date: 2021-12-16
 ---
@@ -29,7 +30,7 @@ In a nutshell, our brain is limited and quickly forgets the information it's bee
 
 #### Our cognitive biases
 
-Besides memory, brains aren't reliable because of many cognitive biases: confirmation bias, attentional bias, mere-exposure effect, normalcy bias, you name it. Even if it's the most complex system in our body, our brain must face many obstacles in order to not fool itself. For instance, more often than necessary, we look for arguments that unconsciously reinforce our original thoughts, we tend to argue with a pre-existing belief. This is what Julia Galef calls the “soldier mindset” in “[The Scout Mindset](https://juliagalef.com)”. She opposes it to the scout mindset: a mindset in which the search for the truth is what primarily guides its reasoning.
+Besides memory, brains aren't reliable because of many cognitive biases: confirmation bias, attentional bias, mere-exposure effect, normalcy bias, you name it. Even if it's the most complex system in our body, our brain must face many obstacles in order to not fool itself. For instance, more often than necessary, we look for arguments that unconsciously reinforce our original thoughts, we tend to argue with a pre-existing belief. This is what Julia Galef calls the "soldier mindset" in "[The Scout Mindset](https://juliagalef.com)". She opposes it to the scout mindset: a mindset in which the search for the truth is what primarily guides its reasoning.
 
 As the scout's goal is to draw the most accurate map in the battlefield, taking notes becomes the map for your thoughts: they tell you what you know, what you don't know and guide you through your reflection.
 
@@ -37,11 +38,11 @@ As the scout's goal is to draw the most accurate map in the battlefield, taking
 
 ### Where do smart notes come from?
 
-Smart notes is a term used in the book “[How To Take Smart Notes](https://takesmartnotes.com)” written by Sönke Ahrens that tells the story of Niklas Luhmann, a sociologist who has published hundreds of articles thanks to his note-taking system: [the Zettelkasten method](https://zettelkasten.de/posts/overview).
+Smart notes is a term used in the book "[How To Take Smart Notes](https://takesmartnotes.com)" written by Sönke Ahrens that tells the story of Niklas Luhmann, a sociologist who has published hundreds of articles thanks to his note-taking system: [the Zettelkasten method](https://zettelkasten.de/posts/overview).
 
 ### Creating the system
 
-Taking notes tends to mean “jotting down ideas on paper during meetings”. But we rarely use them afterwards. Notes used once or twice are no good, we can’t take advantage of them. Note-taking without structure is pointless. That’s why we have to create a system where each note helps the system snowball effect.
+Taking notes tends to mean "jotting down ideas on paper during meetings". But we rarely use them afterwards. Notes used once or twice are no good, we can’t take advantage of them. Note-taking without structure is pointless. That’s why we have to create a system where each note helps the system snowball effect.
 
 We want a network of permanent notes. The goal is to write permanent notes and to densely connect them together. But to create notes you're proud of, you must iterate a few times with other kinds of notes. Overall, we can look at 3 kinds of notes:
 
@@ -87,7 +88,7 @@ It might feel uncomfortable.
 
 ![Is it me or is a 10 year old child writing this?](https://lh3.googleusercontent.com/T3W3kwKhU1lHsTouBixHVWog1DPju6HMaPp_UrSvA6jgWh_Cuii1I-cYbajvYu_DNf4ZLOH0ZRygyhd1x87u8blVhFD9JtSa3IcF3_7zUAcbrjBHElEnPzSQG5XBqH1KcJdfFAMS)
 
-“Is it me or is a 10 year old child writing this?”. Still the more you iterate, the better your notes become, I promise. 😊
+"Is it me or is a 10 year old child writing this?". Still the more you iterate, the better your notes become, I promise. 😊
 
 ### Smart notes are your first feedback loop
 

src/pages/posts/make-your-environment-loopy.md

@@ -0,0 +1,77 @@
+---
+title: Developers, make your environment loopy 🔁
+illustration: https://res.cloudinary.com/practicaldev/image/fetch/s--ydCtwTyU--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ui6knf741v61hk66r9p.png
+layout: post
+date: 2022-03-13
+---
+
+# Developers, make your environment loopy 🔁
+
+When we work, we want feedback: do we do the expected job? Does it fail? Where does it fail? Therefore, we want to receive feedback loops from our environment that gives us useful information about how well we're doing. This is what *loopy* means.
+
+Hi! My name is Julien and I'm a tech leader at [BAM](https://www.bam.tech/bam-agence-experte-design-et-d%C3%A9veloppement-mobile) where we design and develop mobile apps. A part of my job is to provide a healthy environment for my fellow developers to work at their best, improve quicker and then become tech leaders themselves.
+
+In a dynamic system we want to adapt from visible inputs to concrete actions. And to do that, we need standards.
+
+## It starts with standards
+
+Standards are established rules in the team. They are our best guess about what a good job is. Writing and comparing with real life allow us to distinguish what is normal from what is not.
+
+Some tips when writing down a standard, make sure you have:
+
+1. why it's important to write it down,
+2. what are its key points,
+3. what are the common mistakes we can avoid in the first place,
+4. and what are the concrete examples to better understand it.
+
+With these key points in place, we'll be able to compare with the real world and adapt. In a nutshell, to be loopy.
+
+## Loopy code
+
+Once we agree as a team to use a set of standards, we want our tools to know them. Take linters in your code for instance. Linters are scripts that find and sometimes can even fix problems automatically. They are great to provide warnings when a developer diverges from the expected code. It saves time on training, on reviewing and on debugging.
+
+![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssfn63tamuaxusylg5rc.png)
+
+The more we use a tool, the more reliant we want it to be. If in the previous paragraph you thought “Well, in my project linters are a pain in the butt, I hate how they force me to do additional work!”; this is a clear hint you are working for your tools and not the other way around. We don't want this. We want computers to execute repetitive tasks and humans to solve problems. So gather your team and update your linter rules so nobody complains. 🤔
+
+## Loopy tests
+
+Talking about tests. If you want to rush, don't write tests. If you want to go fast and go far, write tests.
+
+![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijjbysabl79j3y1hu5aq.png)
+
+Mental loads are real and a heavy burden. When we start automating tests of some of our code, we can discharge that cognitive load. This will lead to a freer mind and easier and more effective days.
+
+## Loopy production flow
+
+I wrote [an article](https://dev.to/jcalixte/how-does-visual-management-improve-team-efficiency-4kgd) about how useful it is to see the steps in the production flow. By showing the production flow, we know where we are and how good we are. We can then adapt our work/prioritization.
+
+![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywgpssrfv7oxeqa0s7fz.png)
+
+We then can spot and identify problems and solve them - they are called “red bins” in lean production. Displaying the problems in front of the whole team helps to highlight how they are slowing the whole process down. That way they can't be ignored and actions must be taken.
+
+![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6w9oj12cxsr3n19z08r.png)
+
+![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82ao3k9i4zhq5py6vufq.png)
+
+## Loopy user satisfaction
+
+The better we understand user needs, the clever we can work. There is no shame about being wrong in the first place. The most important thing is to acknowledge and adapt.
+
+![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30uudql0ytaocdm5g8hc.png)
+
+## Make your tools work for you not against you
+
+We tend to believe that a part of our job is to use specific tools and deal with its disadvantages because "we're used to it and it's always been that way". We tell ourselves: this is my job and if I fail, it'll be on me. Of course it's a bit more complex than that. In our day to day work, we all make mistakes: these ‘human errors’ are not a cause but a symptom of a deeper problem in your system. Understanding how and what causes a ‘human error’ to arise is the beginning of understanding a little bit about a complex system. And in an overly complex system, being able to adapt with feedback loops is better than being able to predict.
+
+## Shorten the loops
+
+Your time is valuable, your focus is valuable, this is all about you and enhancing your work. The quicker you get feedback, the faster you can adapt. And the more feedback you get the more you work smarter.
+
+<center>
+*We shape our tools then the tools shape us.*
+</center>
+
+___
+
+This post was inspired by the [Loopy tool](https://ncase.me/loopy) from [Nicky Case](https://ncase.me), I can only suggest you take a look!