Amplify deployment

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18 && node --version
        - npm install -g pnpm
        - pnpm install
    build:
      commands:
        - pnpm run build
  artifacts:
    baseDirectory: .output
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18 && node --version
        - npm install -g pnpm
        - pnpm install
    build:
      commands:
        - pnpm run build
  artifacts:
    baseDirectory: .output
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

export default defineNuxtConfig({
  routeRules: {
    '/old-page': { redirect: '/new-page' },
    '/old-page/**': { redirect: '/new-page/**' },
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/old-page': { redirect: '/new-page' },
    '/old-page/**': { redirect: '/new-page/**' },
  }
})

aws amplify update-app --app-id <app-id> --platform WEB_COMPUTE --region <region>

aws amplify update-app --app-id <app-id> --platform WEB_COMPUTE --region <region>

<div>
  <UInput 
    :ui="{ 
      placeholder: 'placeholder-gray-500', 
      icon: { base: 'text-mgp-deep-slate' }
    }"
    variant="none" 
    size="sm" 
    color="white" 
    :trailing="false" 
    :padded="false"
    placeholder="D'ou part le colis" 
  />
</div>

<div>
  <UInput 
    :ui="{ 
      placeholder: 'placeholder-gray-500', 
      icon: { base: 'text-mgp-deep-slate' }
    }"
    variant="none" 
    size="sm" 
    color="white" 
    :trailing="false" 
    :padded="false"
    placeholder="D'ou part le colis" 
  />
</div>

<template>
    <section class="relative bg-mgp-cyan-500/30">
        <!-- ... autres éléments ... -->
        <div class="title-heading text-center my-auto">
            <NuxtImg src="/maintenance.svg" class="mx-auto w-72" alt="maintenance" />

            <h1 class="my-6 md:text-4xl text-3xl font-bold">
                {{ getErrorMessage(error.statusCode) }}
            </h1>

            <p class="text-slate-400">Une erreur est survenue lors de votre navigation sur le site.</p>

            <!-- ... reste du template ... -->
        </div>
    </section>
</template>

<script setup>
defineProps({
    error: Object,
})

const handleError = () => clearError({ redirect: '/' })

const getErrorMessage = (statusCode) => {
    switch (statusCode) {
        case 404:
            return "Désolé, la page que vous recherchez n'existe pas."
        case 500:
            return "Erreur interne du serveur. Veuillez réessayer plus tard."
        default:
            return "Une erreur inattendue s'est produite."
    }
}
</script>

<template>
    <section class="relative bg-mgp-cyan-500/30">
        <!-- ... autres éléments ... -->
        <div class="title-heading text-center my-auto">
            <NuxtImg src="/maintenance.svg" class="mx-auto w-72" alt="maintenance" />

            <h1 class="my-6 md:text-4xl text-3xl font-bold">
                {{ getErrorMessage(error.statusCode) }}
            </h1>

            <p class="text-slate-400">Une erreur est survenue lors de votre navigation sur le site.</p>

            <!-- ... reste du template ... -->
        </div>
    </section>
</template>

<script setup>
defineProps({
    error: Object,
})

const handleError = () => clearError({ redirect: '/' })

const getErrorMessage = (statusCode) => {
    switch (statusCode) {
        case 404:
            return "Désolé, la page que vous recherchez n'existe pas."
        case 500:
            return "Erreur interne du serveur. Veuillez réessayer plus tard."
        default:
            return "Une erreur inattendue s'est produite."
    }
}
</script>

<USelectMenu 
  v-model="selected" 
  size="xl" 
  :ui="{ rounded: 'rounded-full' }" 
  multiple 
  :options="destinations"
  searchable-placeholder="Recherchez une destination..." 
  searchable
  placeholder="Sélectionner une ou plusieurs destinations"
  :max="3"
>
  <!-- Le reste de votre template reste inchangé -->
</USelectMenu>

<USelectMenu 
  v-model="selected" 
  size="xl" 
  :ui="{ rounded: 'rounded-full' }" 
  multiple 
  :options="destinations"
  searchable-placeholder="Recherchez une destination..." 
  searchable
  placeholder="Sélectionner une ou plusieurs destinations"
  :max="3"
>
  <!-- Le reste de votre template reste inchangé -->
</USelectMenu>

<template #max>
  Vous ne pouvez sélectionner que 3 destinations maximum.
</template>

<template #max>
  Vous ne pouvez sélectionner que 3 destinations maximum.
</template>

<USelectMenu 
  v-model="selected" 
  :max="3"
  :show-max-options-alert="false"
  @max-options-selected="handleMaxOptionsSelected"
  <!-- autres props -->
>
  <!-- contenu du template -->
</USelectMenu>

<USelectMenu 
  v-model="selected" 
  :max="3"
  :show-max-options-alert="false"
  @max-options-selected="handleMaxOptionsSelected"
  <!-- autres props -->
>
  <!-- contenu du template -->
</USelectMenu>

const handleMaxOptionsSelected = () => {
  // Votre logique personnalisée ici
  alert('Vous ne pouvez sélectionner que 3 destinations maximum.')
}

const handleMaxOptionsSelected = () => {
  // Votre logique personnalisée ici
  alert('Vous ne pouvez sélectionner que 3 destinations maximum.')
}

<template>
  <USelectMenu 
    v-model="limitedSelected" 
    size="xl" 
    :ui="{ rounded: 'rounded-full' }" 
    multiple 
    :options="destinations"
    searchable-placeholder="Recherchez une destination..." 
    searchable
    placeholder="Sélectionner une ou plusieurs destinations"
  >
    <template #label>
      <div v-if="limitedSelected && limitedSelected.length > 0" class="flex flex-wrap gap-2">
        <UBadge 
          :ui="{ rounded: 'rounded-full' }"
          class="mr-2 border-mgp-deep-blue border text-[#2D62FF] bg-mgp-deep-blue/10"
          v-for="destination in limitedSelected" 
          :label="destination" 
        />
      </div>
      <span v-else>Sélectionner une destination</span>
    </template>

    <template #option-empty="{ query }">
      <q>{{ query }}</q> Aucun element trouvé
    </template>

    <template #empty>
      Pas d'elements
    </template>
  </USelectMenu>
</template>

<script setup>
import { ref, watch } from 'vue'

const destinations = ref(/* votre liste de destinations */)
const limitedSelected = ref([])
watch(limitedSelected, (newValue) => {
  if (newValue.length > 3) {
    limitedSelected.value = newValue.slice(0, 3)
    // Optionnel : Afficher un message à l'utilisateur
    alert('Vous ne pouvez sélectionner que 3 destinations maximum.')
  }
})
</script>

<template>
  <USelectMenu 
    v-model="limitedSelected" 
    size="xl" 
    :ui="{ rounded: 'rounded-full' }" 
    multiple 
    :options="destinations"
    searchable-placeholder="Recherchez une destination..." 
    searchable
    placeholder="Sélectionner une ou plusieurs destinations"
  >
    <template #label>
      <div v-if="limitedSelected && limitedSelected.length > 0" class="flex flex-wrap gap-2">
        <UBadge 
          :ui="{ rounded: 'rounded-full' }"
          class="mr-2 border-mgp-deep-blue border text-[#2D62FF] bg-mgp-deep-blue/10"
          v-for="destination in limitedSelected" 
          :label="destination" 
        />
      </div>
      <span v-else>Sélectionner une destination</span>
    </template>

    <template #option-empty="{ query }">
      <q>{{ query }}</q> Aucun element trouvé
    </template>

    <template #empty>
      Pas d'elements
    </template>
  </USelectMenu>
</template>

<script setup>
import { ref, watch } from 'vue'

const destinations = ref(/* votre liste de destinations */)
const limitedSelected = ref([])
watch(limitedSelected, (newValue) => {
  if (newValue.length > 3) {
    limitedSelected.value = newValue.slice(0, 3)
    // Optionnel : Afficher un message à l'utilisateur
    alert('Vous ne pouvez sélectionner que 3 destinations maximum.')
  }
})
</script>

   ---
   title: Mon premier article de blog
   date: 2023-06-15
   description: Ceci est mon premier article avec Nuxt Content
   ---

   # Mon premier article

   Voici le contenu de mon article...
   

   ---
   title: Mon premier article de blog
   date: 2023-06-15
   description: Ceci est mon premier article avec Nuxt Content
   ---

   # Mon premier article

   Voici le contenu de mon article...
   

   <template>
     <main>
       <ContentDoc />
     </main>
   </template>
   

   <template>
     <main>
       <ContentDoc />
     </main>
   </template>
   

   <template>
     <ContentList path="/blog" v-slot="{ list }">
       <div v-for="article in list" :key="article._path">
         <h2>{{ article.title }}</h2>
         <p>{{ article.description }}</p>
       </div>
     </ContentList>
   </template>
   

   <template>
     <ContentList path="/blog" v-slot="{ list }">
       <div v-for="article in list" :key="article._path">
         <h2>{{ article.title }}</h2>
         <p>{{ article.description }}</p>
       </div>
     </ContentList>
   </template>
   

   <template>
     <ContentEditor v-model="document" />
   </template>
   

   <template>
     <ContentEditor v-model="document" />
   </template>
   

   <template>
     <form @submit.prevent="saveArticle">
       <UInput v-model="article.title" label="Titre" />
       <UTextarea v-model="article.content" label="Contenu" />
       <UButton type="submit">Enregistrer</UButton>
     </form>
   </template>

   <script setup>
   const article = ref({ title: '', content: '' })

   const saveArticle = async () => {
     // Logique pour sauvegarder l'article
   }
   </script>
   

   <template>
     <form @submit.prevent="saveArticle">
       <UInput v-model="article.title" label="Titre" />
       <UTextarea v-model="article.content" label="Contenu" />
       <UButton type="submit">Enregistrer</UButton>
     </form>
   </template>

   <script setup>
   const article = ref({ title: '', content: '' })

   const saveArticle = async () => {
     // Logique pour sauvegarder l'article
   }
   </script>