wondif_vue/app/components/strapiconvert/StrapiBlocksConvert.vue

<template>
  <div class="strapi-blocks">
    <template v-for="(block, i) in blocks" :key="i">

      <!-- Paragraph -->
      <p v-if="block.type === 'paragraph'" class="strapi-blocks--p">
        <template v-for="(child, j) in (block.children)" :key="j">
          <StrapiBlockChildsConvert :node="child" />
        </template>
      </p>

      <!-- Heading -->
      <component
        v-else-if="block.type === 'heading'"
        :is="`h${block.level}`"
        class="strapi-blocks__h"
      >
        <template v-for="(child, j) in (block.children)" :key="j">
          <StrapiBlockChildsConvert :node="child" />
        </template>
      </component>

      <!-- Quote -->
      <blockquote
        v-else-if="block.type === 'quote'"
      >
        <template v-for="(child, j) in (block.children)" :key="j">
          <StrapiBlockChildsConvert :node="child" />
        </template>
      </blockquote>

      <!-- Lists -->
      <ul
        v-else-if="block.type === 'list' && block.format === 'unordered'"
      >
        <li
          v-for="(item, j) in normalizeListItems(block.children)"
          :key="j"
        >
          <template v-for="(child, k) in (item.children)" :key="k">
            <StrapiBlockChildsConvert :node="child" />
          </template>
        </li>
      </ul>

      <ol
        v-else-if="block.type === 'list' && block.format === 'ordered'"
      >
        <li
          v-for="(item, j) in normalizeListItems(block.children)"
          :key="j"
        >
          <template v-for="(child, k) in (item.children)" :key="k">
            <StrapiBlockChildsConvert :node="child" />
          </template>
        </li>
      </ol>

      <!-- Fallback -->
      <div v-else class="strapi-blocks--unknown">
        <!-- debug éventuel -->
      </div>

    </template>
  </div>
</template>

<script setup>
  import StrapiBlockChildsConvert from './StrapiBlockChildsConvert.vue'

  const props = defineProps({
    blocks: { type: Array, default: () => [] },
  })

  const normalizeListItems = (children = []) => {
    const normalized = []

    for (const child of children) {
      if (!child || typeof child !== 'object') continue

      if (child.type === 'list-item') {
        normalized.push({
          ...child,
          children: Array.isArray(child.children) ? [...child.children] : [],
        })
        continue
      }

      // Certains contenus Strapi placent une sous-liste comme sibling d'un list-item.
      // On la rattache au dernier list-item pour produire un HTML imbriqué valide.
      if (child.type === 'list' && normalized.length > 0) {
        normalized[normalized.length - 1].children.push(child)
      }
    }

    return normalized
  }
</script>

<style lang="scss">
  .strapi-blocks {
    font-family: var(--font-roboto);

    &--p {
      font-weight: var(--fw-light);
      font-size: 17px;
      line-height: 22px;
      margin-bottom: 5px;
      text-align: justify;
    }
    h1 {
      padding-bottom: 10px;
      font-weight: var(--fw-bold);
      font-size: 30px;
      text-transform: uppercase;
    }
    h2 {
      padding-bottom: 7px;
      font-weight: var(--fw-bold);
      font-size: 27px;
      color: var(--c-brand_rouge);
    }
    h3 {
      padding-bottom: 5px;
      font-weight: var(--fw-semibold);
      font-size: 26px;
    }
    h4 {
      padding-bottom: 3px;
      font-weight: var(--fw-medium);
      font-size: 22px;
    }
    h4 {
      padding-bottom: 3px;
      font-weight: var(--fw-medium);
      font-size: 22px;
    }
    h4 {
      padding-bottom: 3px;
      font-weight: var(--fw-medium);
      font-size: 22px;
    }

    a {
      text-decoration: underline;
      color: var(--c-brand_rouge-weak);
      text-decoration-thickness: from-font;
    }

    ul,
    ol {
      list-style: none;
      margin: 0 0 5px;
      padding-left: 0;
    }

    li {
      position: relative;
      margin: 0;
      padding-left: 23px;
      margin-bottom: 5px;

    }

    ul > li::before {
      content: "•";
      position: absolute;
      left: 0;
      top: -7px;
      width: 0.5rem;
      height: 0.5rem;
      /*background-image: var(--strapi-li-icon);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;*/
      font-size: 39px;
      line-height: 1;
      /* color: var(--c-brand_rouge); /* couleur */
    }

    ol {
      counter-reset: item;
    }

    ol > li {
      counter-increment: item;
    }

    ol > li::before {
      content: counter(item) ". ";
    }

    li > ul,
    li > ol {
      margin-top: 4px;
      padding-left: 1rem;
    }

    li > ul > li::before {
      /* background-image: var(--strapi-li-icon-nested); */
      content: "◦";
      top: -6px;
      font-size: 30px;
      line-height: 1;
      color: var(--c-text); /* couleur */
    }
    blockquote {
        border-left: 11px var(--c-text-muted) solid;
        padding-left: 20px;
        margin-left: 2%;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    // Espace uniquement avant un titre s'il suit un bloc de contenu
    &--p + &__h,
    &--ul + &__h,
    &--ol + &__h,
    &--quote + &__h {
      margin-top: 13px;
    }
  }
</style>