Astro 2 - Créer un site statique via Content Collections

npm create astro@latest

 astro   v2.10.9 Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro-recipes

  tmpl   How would you like to start your new project?
         Include sample files
      ✔  Template copied

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./astro-recipes
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

---
import 'bulma/css/bulma.min.css';
---

import { z, defineCollection } from 'astro:content';

const recipesCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    type: z.string(),
    ingredients: z.array(
      z.object({
        step: z.string().optional(),
        list: z.string().array(),
      })
    ),
    instructions: z.array(
      z.object({
        step: z.string().optional(),
        list: z.string().array(),
      })
    ),
  }),
});

export const collections = { recipesCollection };

---
import Layout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";
const recipes = await getCollection("recipes");
---

<Layout title="Bienvenue sur le site des recettes">
  <section class="hero is-dark">
    <div class="hero-body has-text-centered">
      <h1 class="title">Recettes</h1>
      <p class="subtitle">Des bonnes recettes au format Markdown</p>
    </div>
  </section>

  <section class="container mt-3">
    <div
      class="columns is-multiline is-variable is-0-mobile is-0-tablet is-3-desktop"
    >
      {
        recipes.map((recipe) => (
          <>
            <div class="column is-3">
              <div class="box">
                <article class="media">
                  <div class="media-content">
                    <div class="content">
                      <p>
                        <a href={recipe.slug}>{recipe.data.title}</a>
                      </p>
                    </div>
                  </div>
                  <div>
                    <span class="tag">{recipe.data.type}</span>
                  </div>
                </article>
              </div>
            </div>
          </>
        ))
      }
    </div>
  </section>
</Layout>

---
import Layout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const recipes = await getCollection("recipes");
  return recipes.map((recipe) => ({
    params: { slug: recipe.slug },
    props: { recipe },
  }));
}

// Futur contenu
---

const { recipe } = Astro.props;
const { title, type, ingredients, instructions } = recipe.data;

<Layout title={title}>
  <article>
    <!-- Futur contenu -->
  </article>
</Layout>

<section class="hero mb-2">
  <div class="hero-body has-text-centered has-background-light">
    <h1 class="title">
      {title}
    </h1>
    <p class="subtitle">
      <span class="tag">{type}</span>
    </p>
  </div>
</section>

<div class="container mt-3 content">
  <div class="columns is-multiline is-variable is-0-mobile is-0-tablet">
    <section class="column is-one-third">
      <!-- Liste des ingrédients -->
    </section>
    <section class="column is-two-third">
      <!-- Liste des instructions -->
    </section>
  </div>
</div>

<h2 class="title">Ingrédients</h2>
{
  ingredients.map((ingredient: any) => (
    <div>
      {ingredient.step && (
        <h3 class="mt-3 title is-5 has-text-weight-normal has-text-grey-dark">{ingredient.step}</h3>
      )}
      <ul>
        {ingredient.list.map((list: any) => (
          <li>{list}</li>
        ))}
      </ul>
    </div>
  ))
}

<h2 class="title">Instructions</h2>
{
  instructions.map((instruction: any) => (
    <div>
      {instruction.step && (
        <h3 class="mt-3 title is-5 has-text-weight-normal has-text-grey-dark">{instruction.step}</h3>
      )}
      <ol>
        {instruction.list.map((list: any) => (
          <li>{list}</li>
        ))}
      </ol>
    </div>
  ))
}

npx astro add vue
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭───────────────────────────────────────╮
 │ npm install @astrojs/vue vue@^3.2.30  │
 ╰───────────────────────────────────────╯

√ Continue? ... yes
✔ Installing dependencies...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import vue from "@astrojs/vue";               │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [vue()]                       │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

√ Continue? ... yes
  
   success  Added the following integration to your project:
  - @astrojs/vue

  Astro will make the following changes to your C:\Users\EtienneROUZEAUD\Documents\astro-recipes\tsconfig.json:

 ╭ C:\Users\EtienneROUZEAUD\Documents\astro-recipes\tsconfig.json ╮
 │ {                                                              │
 │   "extends": "astro/tsconfigs/strict",                         │
 │   "compilerOptions": {                                         │
 │     "jsx": "preserve"                                          │
 │   }                                                            │
 │ }                                                              │
 ╰────────────────────────────────────────────────────────────────╯

√ Continue? ... yes

   success  Successfully updated TypeScript settings

<script setup>
import { ref, toRef, watch } from 'vue';
// Suite du code
</script>

const props = defineProps({
  recipes: Array,
})

let recipes = toRef(props, 'recipes');
const query = ref('');
const recipes_origins = props.recipes;

<template>
  <div>
    <section class="hero is-dark">
      <div class="hero-body has-text-centered">
        <h1 class="title">Recettes ({{ recipes.length }})</h1>
        <p class="subtitle">Orientées débutant(e)s</p>
      </div>
    </section>

    <section
      class="columns is-centered my-3 is-variable is-0-mobile is-0-tablet"
    >
      <div class="column is-2">
        <input
          v-model="query"
          class="input"
          type="search"
          placeholder="Rechercher une recette"
        />
      </div>
    </section>

    <!-- Pour afficher le résultat -->
    <pre>{{ recipes }}</pre>
  </div>
</template>

---
import Recipes from "../components/Recipes.vue";
// Code inchangé
----

<Layout title="Bienvenue sur le site des recettes">
  <Recipes recipes={recipes} client:load />
</Layout>

watch(query, async () => {
  if (query.value) {
    recipes = recipes_origins.filter((recipe) =>
      recipe.data.title.toLowerCase().includes(query.value.toLowerCase())
    );
  } else {
    recipes = recipes_origins;
  }
})

<div class="columns is-multiline is-variable is-0-mobile is-0-tablet is-3-desktop">
  <div
    v-for="recipe in recipes"
    :key="recipe.data.title"
    class="column is-3"
  >
    <div class="box">
      <article class="media">
        <div class="media-content">
          <div class="content">
            <p>
              <a :href="recipe.slug">{{ recipe.data.title }}</a>
            </p>
          </div>
        </div>
        <div>
          <span class="tag">
            {{ recipe.data.type }}
          </span>
        </div>
      </article>
    </div>
  </div>
</div>