Components

<script setup>
import Hero from "~/components/blocks/Hero.vue"
import Grid from "~/components/blocks/Grid.vue"
import TextBlock from "~/components/blocks/TextBlock.vue"

// Map Contentstack block types to Vue components
const componentMapping = {
  hero: Hero,
  grid: Grid,
  text_block: TextBlock,
}
</script>

<template>
  <!-- Component fetches entry and renders blocks automatically -->
  <ContentstackModularBlocks
    content-type-uid="page"
    :url="$route.path"
    blocks-field-path="components"
    :reference-field-path="['blocks.block.image']"
    :json-rte-path="['rich_text', 'blocks.block.copy']"
    locale="en-us"
    :component-map="componentMapping"
  >
    <!-- Custom loading state -->
    <template #loading>
      <div class="loading-spinner">Loading page content...</div>
    </template>

    <!-- Custom error state -->
    <template #error>
      <div class="error-message">Failed to load content</div>
    </template>
  </ContentstackModularBlocks>
</template>

<script setup>
import Hero from "~/components/blocks/Hero.vue"
import Grid from "~/components/blocks/Grid.vue"
import TextBlock from "~/components/blocks/TextBlock.vue"

// Map Contentstack block types to Vue components
const componentMapping = {
  hero: Hero,
  grid: Grid,
  text_block: TextBlock,
}

// Fetch your page data manually
const { data: page } = await useGetEntryByUrl({
  contentTypeUid: "page",
  url: useRoute().path,
})
</script>

<template>
  <!-- Pass pre-fetched blocks -->
  <ContentstackModularBlocks
    :blocks="page.components"
    :component-map="componentMapping"
  />
</template>

<script setup>
import Hero from "~/components/blocks/Hero.vue"
import Grid from "~/components/blocks/Grid.vue"
import DefaultBlock from "~/components/blocks/DefaultBlock.vue"

const componentMapping = {
  hero: Hero,
  grid: Grid,
  text_section: TextSection,
  image_gallery: ImageGallery,
}
</script>

<template>
  <ContentstackModularBlocks
    :blocks="page.modular_blocks"
    :component-map="componentMapping"
    :fallback-component="DefaultBlock"
    :auto-extract-block-name="true"
    :show-empty-state="true"
    container-class="page-blocks"
    empty-block-class="visual-builder__empty-block-parent"
    empty-state-message="No content blocks available"
    key-field="_metadata.uid"
    block-name-prefix="block_"
    :container-props="{ 'data-page-id': page.uid }"
  >
    <!-- Custom empty state -->
    <template #empty>
      <div class="custom-empty-state">
        <h3>No content blocks found</h3>
        <p>Please add some content in Contentstack</p>
      </div>
    </template>
  </ContentstackModularBlocks>
</template>

<template>
  <ContentstackModularBlocks
    content-type-uid="page"
    :url="$route.path"
    :seo-meta="{
      title: 'My Page Title',
      description: 'My page description',
      ogImage: 'https://example.com/image.jpg',
    }"
    :component-map="componentMapping"
  />
</template>

<template>
  <!-- Auto-generate SEO using default field mapping -->
  <ContentstackModularBlocks
    content-type-uid="page"
    :url="$route.path"
    :auto-seo-meta="true"
    :component-map="componentMapping"
  />
</template>

<template>
  <ContentstackModularBlocks
    content-type-uid="page"
    :url="$route.path"
    :auto-seo-meta="{
      title: 'page_title|title',
      description: 'meta_description|description',
      ogImage: 'featured_image.url',
    }"
    :component-map="componentMapping"
  />
</template>

<script setup>
const blocksRef = ref()

// Programmatically refresh the entry data
const handleRefresh = () => {
  blocksRef.value?.refreshEntry()
}
</script>

<template>
  <ContentstackModularBlocks
    ref="blocksRef"
    content-type-uid="page"
    :url="$route.path"
    :component-map="componentMapping"
  />
  <button @click="handleRefresh">Refresh Content</button>
</template>

<script setup lang="ts">
interface Props {
  title: string
  subtitle?: string
  cta_text?: string
  cta_link?: string
  background_image?: {
    url: string
    title: string
  }
  // Meta props automatically added by ContentstackModularBlocks
  blockType?: string
  blockMetadata?: any
}

const props = defineProps<Props>()
</script>

<template>
  <section class="hero" :style="{ backgroundImage: `url(${background_image?.url})` }">
    <div class="hero-content">
      <h1>{{ title }}</h1>
      <p v-if="subtitle">{{ subtitle }}</p>
      <NuxtLink v-if="cta_link" :to="cta_link" class="cta-button">
        {{ cta_text || 'Learn More' }}
      </NuxtLink>
    </div>
  </section>
</template>

<style scoped>
.hero {
  @apply min-h-screen flex items-center justify-center bg-cover bg-center;
}

.hero-content {
  @apply text-center text-white max-w-4xl mx-auto px-6;
}

.hero h1 {
  @apply text-5xl font-bold mb-4;
}

.hero p {
  @apply text-xl mb-8;
}

.cta-button {
  @apply inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors;
}
</style>

<script setup lang="ts">
interface Article {
  uid: string
  title: string
  url: string
  excerpt: string
  featured_image?: {
    url: string
    title: string
  }
  author?: {
    name: string
    avatar?: {
      url: string
    }
  }
}

interface Props {
  title: string
  articles: Article[]
  show_author?: boolean
  blockType?: string
  blockMetadata?: any
}

const props = defineProps<Props>()
</script>

<template>
  <section class="article-list">
    <div class="container mx-auto px-6 py-12">
      <h2 class="text-3xl font-bold mb-8">{{ title }}</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <article 
          v-for="article in articles" 
          :key="article.uid"
          class="article-card"
        >
          <NuxtImg
            v-if="article.featured_image"
            :src="article.featured_image.url"
            :alt="article.featured_image.title"
            class="article-image"
            width="400"
            height="250"
            provider="contentstack"
          />
          
          <div class="article-content">
            <h3 class="article-title">
              <NuxtLink :to="`/blog/${article.url}`">
                {{ article.title }}
              </NuxtLink>
            </h3>
            
            <p class="article-excerpt">{{ article.excerpt }}</p>
            
            <div v-if="show_author && article.author" class="article-author">
              <img 
                v-if="article.author.avatar"
                :src="article.author.avatar.url" 
                :alt="article.author.name"
                class="author-avatar"
              >
              <span>{{ article.author.name }}</span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>
</template>

<style scoped>
.article-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow;
}

.article-image {
  @apply w-full h-48 object-cover;
}

.article-content {
  @apply p-6;
}

.article-title a {
  @apply text-xl font-semibold text-gray-900 hover:text-blue-600 transition-colors;
}

.article-excerpt {
  @apply text-gray-600 mt-2 mb-4;
}

.article-author {
  @apply flex items-center space-x-2 text-sm text-gray-500;
}

.author-avatar {
  @apply w-6 h-6 rounded-full;
}
</style>

import Hero from '~/components/blocks/Hero.vue'
import Grid from '~/components/blocks/Grid.vue'
import TextBlock from '~/components/blocks/TextBlock.vue'
import ImageGallery from '~/components/blocks/ImageGallery.vue'
import ArticleList from '~/components/blocks/ArticleList.vue'

export const componentMap = {
  hero: Hero,
  grid: Grid,
  text_block: TextBlock,
  image_gallery: ImageGallery,
  article_list: ArticleList,
}

<script setup>
// componentMap is auto-imported from utils/index.ts
</script>

<template>
  <ContentstackModularBlocks
    content-type-uid="page"
    :url="$route.path"
    :component-map="componentMap"
  />
</template>

import Hero from '~/components/blocks/Hero.vue'
import Grid from '~/components/blocks/Grid.vue'
import TextBlock from '~/components/blocks/TextBlock.vue'
import ImageGallery from '~/components/blocks/ImageGallery.vue'
import ArticleList from '~/components/blocks/ArticleList.vue'

export const useComponentMapping = () => {
  return {
    hero: Hero,
    grid: Grid,
    text_block: TextBlock,
    image_gallery: ImageGallery,
    article_list: ArticleList,
  }
}

<script setup>
const componentMapping = useComponentMapping()
</script>

<template>
  <ContentstackModularBlocks
    content-type-uid="page"
    :url="$route.path"
    :component-map="componentMapping"
  />
</template>

// Define interfaces for your block types
export interface HeroBlock {
  title: string
  subtitle?: string
  cta_text?: string
  cta_link?: string
  background_image?: ContentstackAsset
}

export interface GridBlock {
  columns: number
  items: GridItem[]
}

export interface GridItem {
  title: string
  description: string
  image?: ContentstackAsset
}

// Union type for all blocks
export type ContentBlock = HeroBlock | GridBlock | TextBlock