geoproject-app/src/components/PagedJsWrapper.vue

<template>
  <!-- Fallback static content when no recit data -->
  <template v-if="!hasRecitData">
    <section class="chapter">
      <p>
        Accumsan arcu tristique purus eros pellentesque rutrum hendrerit
        phasellus euismod maximus rutrum vivamus dolor erat sollicitudin ut quam
        metus gravida proin nisl lacus sed lacus.
      </p>
    </section>
  </template>

  <!-- Dynamic content from recit -->
  <template v-else>
    <template v-for="item in flattenedContent" :key="item.id">
      <!-- Récit (cover page) -->
      <section
        v-if="item.template === 'recit'"
        class="recit-cover"
        :data-page-type="item.template"
      >
        <img v-if="item.cover" :src="item.cover" class="cover-image" alt="" />
        <h1>{{ item.title }}</h1>
        <p v-if="item.author" class="author">{{ item.author }}</p>
        <div v-if="item.introduction" class="introduction" v-html="item.introduction"></div>
      </section>

      <!-- Geoformat -->
      <section
        v-else-if="item.template === 'geoformat'"
        class="geoformat"
        :data-page-type="item.template"
      >
        <img v-if="item.cover" :src="item.cover" class="cover-image" alt="" />
        <h2>{{ item.title }}</h2>
        <p v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</p>
        <div v-if="item.tags && item.tags.length" class="tags">
          <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>
        <div v-if="item.text" class="chapeau" v-html="item.text"></div>
      </section>

      <!-- Chapitre -->
      <section
        v-else-if="item.template === 'chapitre'"
        class="chapitre"
        :data-page-type="item.template"
      >
        <h3>{{ item.title }}</h3>
        <template v-if="item.blocks">
          <component
            v-for="block in visibleBlocks(item.blocks)"
            :key="block.id"
            :is="getBlockComponent(block.type)"
            :content="block.content"
          />
        </template>
      </section>

      <!-- Carte -->
      <section
        v-else-if="item.template === 'carte'"
        class="carte"
        :data-page-type="item.template"
      >
        <h2>{{ item.title }}</h2>
        <div v-if="item.tags && item.tags.length" class="tags">
          <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>
        <div v-if="item.text" class="carte-content" v-html="item.text"></div>
      </section>
    </template>
  </template>
</template>

<script setup>
import { computed } from 'vue';
import { useRecitStore } from '../stores/recit';
import {
  TextBlock,
  HeadingBlock,
  ImageBlock,
  ListBlock,
  QuoteBlock,
  VideoBlock,
  MapBlock,
  blockComponents
} from './blocks';

const recitStore = useRecitStore();

const hasRecitData = computed(() => recitStore.data !== null);
const flattenedContent = computed(() => recitStore.flattenedContent);

// Filter out hidden blocks
const visibleBlocks = (blocks) => {
  return blocks.filter((block) => !block.isHidden);
};

// Get the component for a block type
const getBlockComponent = (type) => {
  const components = {
    text: TextBlock,
    heading: HeadingBlock,
    image: ImageBlock,
    list: ListBlock,
    quote: QuoteBlock,
    video: VideoBlock,
    map: MapBlock
  };
  return components[type] || TextBlock;
};
</script>

<style>
/* Base print styles for content sections */
.recit-cover,
.geoformat,
.chapitre,
.carte {
  break-before: page;
}

.recit-cover .cover-image,
.geoformat .cover-image {
  max-width: 100%;
  height: auto;
}

.recit-cover h1 {
  margin-top: 1rem;
}

.recit-cover .author {
  font-style: italic;
  color: #666;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.tag {
  background: #f0f0f0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Block styles */
.block-image img {
  max-width: 100%;
  height: auto;
}

.block-quote {
  border-left: 3px solid #ccc;
  padding-left: 1rem;
  margin-left: 0;
  font-style: italic;
}

.block-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #666;
}

.block-video .video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.block-video .video-embed iframe,
.block-video .video-embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.block-map {
  background: #f5f5f5;
  padding: 2rem;
  text-align: center;
  border: 1px dashed #ccc;
}
</style>