@amulet-laboratories/rig-nuxt 0.3.0 → 0.4.0

package/src/runtime/components/content/ContentBestForPersonaPage.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  useRoute,
+  useAsyncData,
+  createError,
+  useSchemaOrg,
+  defineWebPage,
+  defineBreadcrumb,
+} from '#imports'
+import { useProducts } from '../../composables/useProducts'
+import { useArticleSeo } from '../../composables/useArticleSeo'
+
+interface PersonaConfig {
+  name: string
+  quiz: string
+  description: string
+  productSlugs: string[]
+}
+
+const props = defineProps<{
+  personas: Record<string, PersonaConfig>
+  retakeDescription?: string
+}>()
+
+const route = useRoute()
+const personaSlug = route.params.persona as string
+
+const { getAllProducts } = useProducts()
+const { data: allProducts } = await useAsyncData('persona-products', () => getAllProducts())
+
+const persona = props.personas[personaSlug]
+if (!persona) {
+  throw createError({ statusCode: 404, statusMessage: 'Persona not found' })
+}
+
+const products = computed(() => {
+  if (!allProducts.value) return []
+  return persona.productSlugs
+    .map((slug) => allProducts.value!.find((product: { slug: string }) => product.slug === slug))
+    .filter((product): product is NonNullable<typeof product> => !!product)
+})
+
+const title = `Best for ${persona.name}`
+const description = persona.description
+
+useArticleSeo({ title, description })
+
+const breadcrumbs = [
+  { label: 'Home', path: '/' },
+  { label: 'Best For', path: '/best-for' },
+  { label: persona.name, path: route.path },
+]
+
+useSchemaOrg([
+  defineWebPage({ name: title }),
+  defineBreadcrumb({
+    itemListElement: breadcrumbs.map((item, i) => ({
+      name: item.label,
+      item: item.path,
+      position: i + 1,
+    })),
+  }),
+])
+</script>
+
+<template>
+  <div>
+    <ContentBreadcrumbs :items="breadcrumbs" />
+    <div data-rig-persona-header>
+      <span data-rig-persona-badge>Your Result</span>
+      <h1 data-rig-persona-title>Best for {{ persona.name }}</h1>
+      <p data-rig-persona-description>{{ persona.description }}</p>
+    </div>
+
+    <Section title="Our Picks for You" subtitle="Products matched to your style">
+      <div data-rig-article-grid>
+        <Card v-for="product in products" :key="product.slug" data-rig-product-card>
+          <template #header>
+            <div data-rig-product-card-header>
+              <div data-rig-product-card-info>
+                <span data-rig-product-card-name>{{ product.name }}</span>
+                <span data-rig-product-card-brand
+                  >{{ product.brand }} &middot; {{ product.price_range }}</span
+                >
+              </div>
+              <span data-rig-product-card-rating>{{ product.rating }}/5</span>
+            </div>
+          </template>
+          <p data-rig-product-card-oneliner>{{ product.one_liner }}</p>
+          <template v-if="product.amazon?.url" #footer>
+            <div data-rig-product-card-footer>
+              <a
+                :href="product.amazon.url"
+                target="_blank"
+                rel="nofollow noopener sponsored"
+                data-rig-product-card-link
+                :aria-label="`Check price on Amazon for ${product.name}`"
+              >
+                Check price on Amazon
+              </a>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </Section>
+
+    <Section variant="alternate">
+      <QuizPromo
+        :quiz-slug="persona.quiz"
+        quiz-title="Not your result?"
+        :description="props.retakeDescription || 'Retake the quiz to find your personalized picks.'"
+      />
+    </Section>
+
+    <CTABanner layout="centered" variant="card">
+      <ContentNewsletterSignup />
+    </CTABanner>
+  </div>
+</template>

package/src/runtime/components/content/ContentCompareIndexPage.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  useAsyncData,
+  useSeoMeta,
+  useSchemaOrg,
+  defineWebPage,
+  defineBreadcrumb,
+  navigateTo,
+} from '#imports'
+import { useProducts } from '../../composables/useProducts'
+
+const { getAllProducts } = useProducts()
+const { data: products } = await useAsyncData('all-products', () => getAllProducts())
+
+const comparisons = computed(() => {
+  if (!products.value?.length) return []
+  const byCategory = new Map<string, typeof products.value>()
+  for (const product of products.value) {
+    const items = byCategory.get(product.category) ?? []
+    items.push(product)
+    byCategory.set(product.category, items)
+  }
+  const pairs: Array<{
+    slugA: string
+    slugB: string
+    nameA: string
+    nameB: string
+    category: string
+  }> = []
+  for (const [category, items] of byCategory) {
+    for (let first = 0; first < items.length; first++) {
+      for (let second = first + 1; second < items.length; second++) {
+        pairs.push({
+          slugA: items[first].slug,
+          slugB: items[second].slug,
+          nameA: items[first].name,
+          nameB: items[second].name,
+          category,
+        })
+      }
+    }
+  }
+  return pairs.slice(0, 30)
+})
+
+useSeoMeta({
+  title: 'Product Comparisons',
+  description: 'Side-by-side product comparisons with specs, pros, cons, and our recommendations.',
+})
+
+useSchemaOrg([
+  defineWebPage({ name: 'Product Comparisons' }),
+  defineBreadcrumb({
+    itemListElement: [
+      { name: 'Home', item: '/', position: 1 },
+      { name: 'Compare', item: '/compare', position: 2 },
+    ],
+  }),
+])
+</script>
+
+<template>
+  <div>
+    <ContentBreadcrumbs
+      :items="[
+        { label: 'Home', path: '/' },
+        { label: 'Compare', path: '/compare' },
+      ]"
+    />
+    <Section title="Product Comparisons" subtitle="Side-by-side buying decisions">
+      <div v-if="comparisons.length" data-rig-article-grid>
+        <Card
+          v-for="comparison in comparisons"
+          :key="`${comparison.slugA}-${comparison.slugB}`"
+          interactive
+          role="link"
+          :tabindex="0"
+          @click="navigateTo(`/compare/${comparison.slugA}-vs-${comparison.slugB}`)"
+          @keydown.enter="navigateTo(`/compare/${comparison.slugA}-vs-${comparison.slugB}`)"
+        >
+          <NuxtLink
+            :to="`/compare/${comparison.slugA}-vs-${comparison.slugB}`"
+            data-rig-article-card-link
+          >
+            <span data-rig-article-card-category>{{ comparison.category }}</span>
+            <span data-rig-article-card-title
+              >{{ comparison.nameA }} vs {{ comparison.nameB }}</span
+            >
+          </NuxtLink>
+        </Card>
+      </div>
+      <p v-else data-rig-empty-state>No comparisons available yet.</p>
+    </Section>
+  </div>
+</template>

package/src/runtime/components/content/ContentComparePage.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  useRoute,
+  createError,
+  useAppConfig,
+  useAsyncData,
+  onMounted,
+  useSchemaOrg,
+  defineWebPage,
+  defineBreadcrumb,
+} from '#imports'
+import { useFathom } from '@amulet-laboratories/rig'
+import { useProducts } from '../../composables/useProducts'
+import { useArticleSeo } from '../../composables/useArticleSeo'
+import { useStructuredData } from '../../composables/useStructuredData'
+
+const props = defineProps<{
+  quizSlug: string
+  quizDescription: string
+}>()
+
+const route = useRoute()
+const slugParam = Array.isArray(route.params.slugs)
+  ? route.params.slugs.join('/')
+  : String(route.params.slugs || '')
+const [slugA, slugB] = slugParam.split('-vs-')
+
+if (!slugA || !slugB) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Comparison requires two products: /compare/product-a-vs-product-b',
+  })
+}
+
+const appConfig = useAppConfig()
+const networkArticles = appConfig.networkArticles as {
+  site: string
+  url: string
+  title: string
+  path: string
+  tag: string
+}[]
+
+const { getProduct } = useProducts()
+const { data: productA } = await useAsyncData(`compare-a-${slugA}`, () => getProduct(slugA))
+const { data: productB } = await useAsyncData(`compare-b-${slugB}`, () => getProduct(slugB))
+
+if (!productA.value || !productB.value) {
+  throw createError({ statusCode: 404, statusMessage: 'One or both products not found' })
+}
+
+const title = `${productA.value.name} vs ${productB.value.name}`
+const description = `Side-by-side comparison of ${productA.value.name} and ${productB.value.name}. Specs, pros, cons, and our recommendation.`
+
+useArticleSeo({ title, description })
+useStructuredData({ title, description, schema: 'Article' })
+
+const { trackAffiliateClick, trackComparisonView } = useFathom()
+onMounted(() => trackComparisonView(slugA, slugB))
+
+const winner = computed(() => {
+  if (!productA.value || !productB.value) return null
+  return productA.value.rating >= productB.value.rating ? productA.value : productB.value
+})
+
+const editorial = computed(() => {
+  if (!productA.value || !productB.value) return null
+  const a = productA.value
+  const b = productB.value
+
+  const extractPrice = (range: string): number => {
+    const match = range?.match(/\d+/)
+    return match ? parseInt(match[0], 10) : 0
+  }
+
+  const priceA = extractPrice(a.price_range)
+  const priceB = extractPrice(b.price_range)
+
+  let priceNote = ''
+  if (Math.abs(priceA - priceB) < 10) {
+    priceNote = `Both are competitively priced (${a.price_range} vs ${b.price_range})`
+  } else {
+    const cheaper = priceA < priceB ? a : b
+    priceNote = `The ${cheaper.name} is the more budget-friendly option at ${cheaper.price_range}`
+  }
+
+  const commonality =
+    a.category === b.category
+      ? `The ${a.name} and ${b.name} are both ${a.category} products from ${a.brand} and ${b.brand} respectively. ${priceNote}, making this a straightforward decision based on your priorities.`
+      : `The ${a.name} (${a.category}) and ${b.name} (${b.category}) take different approaches. ${priceNote}.`
+
+  const strengthA = a.pros?.[0]?.toLowerCase() || 'solid performance'
+  const strengthB = b.pros?.[0]?.toLowerCase() || 'solid performance'
+  const weaknessA = a.cons?.[0]?.toLowerCase() || 'minor limitations'
+  const weaknessB = b.cons?.[0]?.toLowerCase() || 'minor limitations'
+  const ratingDiff = Math.abs(a.rating - b.rating)
+  const ratingNote =
+    ratingDiff < 0.3
+      ? `Both are well-regarded with ratings of ${a.rating}/5 and ${b.rating}/5.`
+      : `The ${a.rating > b.rating ? a.name : b.name} has a higher overall rating (${Math.max(a.rating, b.rating)}/5 vs ${Math.min(a.rating, b.rating)}/5).`
+
+  const differentiators = `Where they differ: the ${a.name} stands out for ${strengthA}, while the ${b.name} excels at ${strengthB}. On the downside, the ${a.name}'s main concern is ${weaknessA}, and the ${b.name}'s is ${weaknessB}. ${ratingNote}`
+
+  const pickA = `Choose the ${a.name} if you prioritize ${strengthA}.`
+  const pickB = `Go with the ${b.name} if ${strengthB} matters most.`
+  const recommendation = `${pickA} ${pickB}`
+
+  return { commonality, differentiators, recommendation }
+})
+
+const breadcrumbs = [
+  { label: 'Home', path: '/' },
+  { label: 'Compare', path: '/compare' },
+  { label: title, path: route.path },
+]
+
+useSchemaOrg([
+  defineWebPage({ name: title }),
+  defineBreadcrumb({
+    itemListElement: breadcrumbs.map((item, i) => ({
+      name: item.label,
+      item: item.path,
+      position: i + 1,
+    })),
+  }),
+])
+</script>
+
+<template>
+  <div v-if="productA && productB">
+    <ContentBreadcrumbs :items="breadcrumbs" />
+    <div data-rig-article-layout>
+      <article data-rig-article-layout-content>
+        <header data-rig-article-header>
+          <h1 data-rig-article-header-title>{{ title }}</h1>
+          <p data-rig-article-header-description>{{ description }}</p>
+        </header>
+
+        <section v-if="editorial" data-rig-prose>
+          <h2>What's the Difference?</h2>
+          <p>{{ editorial.commonality }}</p>
+          <p>{{ editorial.differentiators }}</p>
+          <p>{{ editorial.recommendation }}</p>
+        </section>
+
+        <div data-rig-compare-grid>
+          <div v-for="product in [productA, productB]" :key="product.slug" data-rig-compare-card>
+            <div data-rig-compare-card-header>
+              <h2 data-rig-compare-card-name>{{ product.name }}</h2>
+              <span data-rig-compare-card-brand>{{ product.brand }}</span>
+              <span data-rig-compare-card-price>{{ product.price_range }}</span>
+              <span data-rig-product-card-rating>{{ product.rating }}/5</span>
+            </div>
+            <p data-rig-compare-card-oneliner>{{ product.one_liner }}</p>
+            <div data-rig-product-card-details>
+              <div data-rig-product-card-pros>
+                <strong>Pros</strong>
+                <ul>
+                  <li v-for="pro in product.pros" :key="pro">{{ pro }}</li>
+                </ul>
+              </div>
+              <div data-rig-product-card-cons>
+                <strong>Cons</strong>
+                <ul>
+                  <li v-for="con in product.cons" :key="con">{{ con }}</li>
+                </ul>
+              </div>
+            </div>
+            <div v-if="product.amazon?.url" data-rig-compare-card-cta>
+              <a
+                :href="product.amazon.url"
+                target="_blank"
+                rel="nofollow noopener sponsored"
+                data-rig-product-card-link
+                :aria-label="`Check price on Amazon for ${product.name}`"
+                @click="trackAffiliateClick(product.slug)"
+              >
+                Check price on Amazon
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="winner" data-rig-compare-verdict>
+          <h2>Our Pick: {{ winner.name }}</h2>
+          <p>
+            With a {{ winner.rating }}/5 rating, the {{ winner.name }} edges ahead.
+            {{ winner.one_liner }}
+          </p>
+        </div>
+
+        <AffiliateDisclosure />
+        <NetworkArticles :articles="networkArticles" />
+      </article>
+      <aside data-rig-article-layout-sidebar>
+        <div data-rig-article-layout-sidebar-sticky>
+          <QuizPromo
+            :quiz-slug="props.quizSlug"
+            quiz-title="Not sure which to pick?"
+            :description="props.quizDescription"
+          />
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>

package/src/runtime/components/content/ContentHomePage.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  defineWebPage,
+  defineWebSite,
+  navigateTo,
+  queryCollection,
+  useAppConfig,
+  useAsyncData,
+  useFormatDate,
+  useSchemaOrg,
+  useSeoMeta,
+  useSiteConfig,
+} from '#imports'
+
+const { data: featuredArticles } = await useAsyncData('featured', () =>
+  queryCollection('articles')
+    .where('pillar', '=', true)
+    .order('publishedAt', 'DESC')
+    .limit(3)
+    .all(),
+)
+
+const { data: latestArticles } = await useAsyncData('latest', () =>
+  queryCollection('articles').order('publishedAt', 'DESC').limit(6).all(),
+)
+
+const { data: moreArticles } = await useAsyncData('more', () =>
+  queryCollection('articles').order('publishedAt', 'DESC').limit(9).all(),
+)
+
+const appConfig = useAppConfig()
+const categories = appConfig.categories as Record<string, { label: string; description: string }>
+const homepage = appConfig.homepage as {
+  eyebrow: string
+  headline: string
+  description: string
+  cta: string
+  seo: { title: string; description: string }
+  quiz: { slug: string; title: string; description: string }
+}
+
+const categoryImages = computed(() => {
+  const images: Record<string, string> = {}
+  for (const slug of Object.keys(categories)) {
+    images[slug] = `/images/categories/${slug}.svg`
+  }
+  return images
+})
+
+const { formatDate } = useFormatDate()
+const siteConfig = useSiteConfig()
+
+useSeoMeta({
+  title: homepage.seo.title,
+  ogTitle: homepage.seo.title,
+  description: homepage.seo.description,
+  ogDescription: homepage.seo.description,
+})
+
+useSchemaOrg([
+  defineWebSite({ name: siteConfig.name }),
+  defineWebPage({ name: homepage.seo.title }),
+])
+</script>
+
+<template>
+  <div>
+    <Hero layout="centered">
+      <template #eyebrow>{{ homepage.eyebrow }}</template>
+      <template #title>
+        <h1>{{ homepage.headline }}</h1>
+      </template>
+      <template #description>
+        <p>{{ homepage.description }}</p>
+      </template>
+      <template #actions>
+        <Button variant="primary" @click="navigateTo('/category/' + Object.keys(categories)[0])">
+          {{ homepage.cta }}
+        </Button>
+      </template>
+    </Hero>
+
+    <Section v-if="featuredArticles?.length" title="Featured" subtitle="Editor's picks">
+      <div data-rig-magazine-grid>
+        <Card
+          v-for="article in featuredArticles"
+          :key="article.path"
+          interactive
+          role="link"
+          :tabindex="0"
+          :data-category="article.category"
+          @click="navigateTo(article.path)"
+          @keydown.enter="navigateTo(article.path)"
+        >
+          <div data-rig-card-visual>
+            <CategoryIcon :category="article.category ?? ''" :size="40" />
+          </div>
+          <NuxtLink :to="article.path" data-rig-featured-card-link>
+            <span data-rig-featured-card-category>
+              <CategoryIcon :category="article.category ?? ''" :size="14" />
+              {{ article.category }}
+            </span>
+            <span data-rig-featured-card-title>{{ article.title }}</span>
+            <span data-rig-featured-card-description>{{ article.description }}</span>
+            <span v-if="article.publishedAt || article.timeToRead" data-rig-featured-card-meta>
+              <time v-if="article.publishedAt" :datetime="article.publishedAt">
+                {{ formatDate(article.publishedAt) }}
+              </time>
+              <span v-if="article.timeToRead">&middot; {{ article.timeToRead }} min read</span>
+            </span>
+          </NuxtLink>
+        </Card>
+      </div>
+    </Section>
+
+    <Section title="Explore by Category" subtitle="Find what you need" variant="alternate">
+      <div data-rig-category-grid>
+        <Card
+          v-for="(category, slug) in categories"
+          :key="slug"
+          interactive
+          role="link"
+          :tabindex="0"
+          :data-category="slug"
+          @click="navigateTo(`/category/${slug}`)"
+          @keydown.enter="navigateTo(`/category/${slug}`)"
+        >
+          <div
+            data-rig-card-photo
+            :style="{ backgroundImage: `url(${categoryImages[String(slug)]})` }"
+          >
+            <span data-rig-card-photo-overlay>
+              <CategoryIcon :category="String(slug)" :size="28" />
+            </span>
+          </div>
+          <NuxtLink :to="`/category/${slug}`" data-rig-category-card-link>
+            <span data-rig-category-card-title>{{ category.label }}</span>
+            <span data-rig-category-card-description>{{ category.description }}</span>
+          </NuxtLink>
+        </Card>
+      </div>
+    </Section>
+
+    <Section variant="alternate">
+      <QuizPromo
+        :quiz-slug="homepage.quiz.slug"
+        :quiz-title="homepage.quiz.title"
+        :description="homepage.quiz.description"
+      />
+    </Section>
+
+    <CTABanner layout="centered" variant="card">
+      <ContentNewsletterSignup />
+    </CTABanner>
+
+    <Section v-if="latestArticles?.length" title="Latest Articles" subtitle="Recently published">
+      <div data-rig-article-grid>
+        <Card
+          v-for="article in latestArticles"
+          :key="article.path"
+          interactive
+          role="link"
+          :tabindex="0"
+          :data-category="article.category"
+          @click="navigateTo(article.path)"
+          @keydown.enter="navigateTo(article.path)"
+        >
+          <div data-rig-card-visual>
+            <CategoryIcon :category="article.category ?? ''" :size="32" />
+          </div>
+          <NuxtLink :to="article.path" data-rig-article-card-link>
+            <span data-rig-article-card-category>{{ article.category }}</span>
+            <span data-rig-article-card-title>{{ article.title }}</span>
+            <span data-rig-article-card-description>{{ article.description }}</span>
+            <span data-rig-article-card-meta>
+              <time v-if="article.publishedAt" :datetime="article.publishedAt">{{
+                formatDate(article.publishedAt)
+              }}</time>
+              <span v-if="article.timeToRead">&middot; {{ article.timeToRead }} min</span>
+            </span>
+          </NuxtLink>
+        </Card>
+      </div>
+    </Section>
+
+    <Section
+      v-if="moreArticles?.length && moreArticles.length > 6"
+      title="More to Read"
+      variant="alternate"
+    >
+      <div data-rig-article-grid>
+        <Card
+          v-for="article in moreArticles.slice(6)"
+          :key="article.path"
+          interactive
+          role="link"
+          :tabindex="0"
+          :data-category="article.category"
+          @click="navigateTo(article.path)"
+          @keydown.enter="navigateTo(article.path)"
+        >
+          <div data-rig-card-visual>
+            <CategoryIcon :category="article.category ?? ''" :size="32" />
+          </div>
+          <NuxtLink :to="article.path" data-rig-article-card-link>
+            <span data-rig-article-card-category>{{ article.category }}</span>
+            <span data-rig-article-card-title>{{ article.title }}</span>
+            <span data-rig-article-card-description>{{ article.description }}</span>
+            <span data-rig-article-card-meta>
+              <time v-if="article.publishedAt" :datetime="article.publishedAt">{{
+                formatDate(article.publishedAt)
+              }}</time>
+              <span v-if="article.timeToRead">&middot; {{ article.timeToRead }} min</span>
+            </span>
+          </NuxtLink>
+        </Card>
+      </div>
+    </Section>
+  </div>
+</template>

package/src/runtime/components/content/EditorialSidebar.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  author: string
+  role?: string
+  blurb?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div data-rig-editorial-sidebar>
+    <div data-rig-editorial-sidebar-header>
+      <slot name="avatar">
+        <div data-rig-editorial-sidebar-avatar aria-hidden="true">
+          {{ author.charAt(0) }}
+        </div>
+      </slot>
+      <div data-rig-editorial-sidebar-identity>
+        <span data-rig-editorial-sidebar-name>{{ author }}</span>
+        <span v-if="role" data-rig-editorial-sidebar-role>{{ role }}</span>
+      </div>
+    </div>
+    <p v-if="blurb" data-rig-editorial-sidebar-blurb>{{ blurb }}</p>
+    <slot />
+  </div>
+</template>

package/src/runtime/components/content/NetworkArticles.vue

@@ -32,7 +32,7 @@ const recommendations = computed(() =>
         :key="article.path"
         :href="`${article.url}${article.path}`"
         target="_blank"
-        rel="noopener"
+        rel="noopener noreferrer"
         data-rig-network-articles-link
         @click="trackCrossSiteNav(article.site)"
       >

package/src/runtime/components/content/NetworkLinks.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useSiteConfig } from '#imports'
+import { useRuntimeConfig, useSiteConfig } from '#imports'
 import { useFathom } from '@amulet-laboratories/rig'
 
 interface CrossSiteLink {