@amulet-laboratories/rig-nuxt 0.2.0 → 0.3.0

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useAsyncData } from '#imports'
+import { useFathom } from '@amulet-laboratories/rig'
+import { useProducts } from '../../composables/useProducts'
+
+const props = defineProps<{
+  slug: string
+}>()
+
+const { getProduct } = useProducts()
+const { data: product, status } = await useAsyncData(`product-${props.slug}`, () =>
+  getProduct(props.slug),
+)
+
+const { trackAffiliateClick } = useFathom()
+
+function onAffiliateClick() {
+  trackAffiliateClick(props.slug)
+}
+</script>
+
+<template>
+  <div v-if="status === 'pending'" data-rig-product-card>
+    <div data-rig-product-card-header>
+      <div data-rig-product-card-info>
+        <span data-rig-product-card-name data-rig-skeleton>&nbsp;</span>
+        <span data-rig-product-card-brand data-rig-skeleton>&nbsp;</span>
+      </div>
+    </div>
+    <p data-rig-product-card-oneliner data-rig-skeleton>&nbsp;</p>
+  </div>
+
+  <div v-else-if="product" data-rig-product-card>
+    <div v-if="product.image_url" data-rig-product-card-image>
+      <NuxtImg
+        :src="product.image_url"
+        :alt="product.image_alt || product.name"
+        width="280"
+        height="280"
+        loading="lazy"
+      />
+    </div>
+    <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>
+    <p data-rig-product-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 data-rig-product-card-footer>
+      <a
+        :href="product.amazon?.url"
+        target="_blank"
+        rel="nofollow noopener sponsored"
+        data-rig-product-card-link
+        @click="onAffiliateClick"
+      >
+        Check price on Amazon
+      </a>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRuntimeConfig } from '#imports'
+
+const props = defineProps<{
+  quizSlug: string
+  heading?: string
+  cta?: string
+}>()
+
+const config = useRuntimeConfig()
+const quizOrigin = (config.public.quizEmbedOrigin as string) || 'https://quizsort.com'
+
+const containerRef = ref<HTMLElement>()
+const iframeHeight = ref(400)
+const isVisible = ref(false)
+
+const embedUrl = `${quizOrigin}/embed/${props.quizSlug}`
+
+const handleMessage = (event: MessageEvent) => {
+  if (event.origin !== quizOrigin) return
+  if (event.data?.type === 'quizsort:resize' && event.data?.slug === props.quizSlug) {
+    iframeHeight.value = event.data.height
+  }
+}
+
+let observer: IntersectionObserver | null = null
+
+onMounted(() => {
+  window.addEventListener('message', handleMessage)
+
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting) {
+        isVisible.value = true
+        observer?.disconnect()
+      }
+    },
+    { rootMargin: '200px' },
+  )
+
+  if (containerRef.value) {
+    observer.observe(containerRef.value)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('message', handleMessage)
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <section ref="containerRef" data-rig-quiz-embed>
+    <h3 v-if="heading" data-rig-quiz-embed-heading>{{ heading }}</h3>
+    <p v-if="cta" data-rig-quiz-embed-cta>{{ cta }}</p>
+    <iframe
+      v-if="isVisible"
+      :src="embedUrl"
+      :title="`Quiz: ${heading || quizSlug}`"
+      :style="{ height: `${iframeHeight}px` }"
+      width="100%"
+      frameborder="0"
+      loading="lazy"
+      allow="clipboard-write"
+      data-rig-quiz-embed-frame
+    />
+  </section>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRuntimeConfig } from '#imports'
+import { Button } from '@amulet-laboratories/rig'
+
+const props = defineProps<{
+  quizSlug: string
+  heading?: string
+}>()
+
+const config = useRuntimeConfig()
+const quizOrigin = (config.public.quizEmbedOrigin as string) || 'https://quizsort.com'
+
+const resultKey = `quizsort-result-${props.quizSlug}`
+const result = ref<string | null>(null)
+const showQuiz = ref(false)
+
+onMounted(() => {
+  result.value = localStorage.getItem(resultKey)
+
+  window.addEventListener('message', (event) => {
+    if (event.origin !== quizOrigin) return
+    if (event.data?.type === 'quizsort:result' && event.data?.slug === props.quizSlug) {
+      result.value = event.data.character
+      localStorage.setItem(resultKey, event.data.character)
+      showQuiz.value = false
+    }
+  })
+})
+
+const resultLabel = computed(
+  () =>
+    result.value
+      ?.replace(/-/g, ' ')
+      .replace(/\bthe\b/gi, '')
+      .trim()
+      .replace(/\b\w/g, (c) => c.toUpperCase()) ?? '',
+)
+</script>
+
+<template>
+  <section data-rig-quiz-gated>
+    <template v-if="result">
+      <div data-rig-quiz-gated-result>
+        <span data-rig-quiz-gated-badge>Your result: {{ resultLabel }}</span>
+        <slot :result="result" />
+      </div>
+    </template>
+    <template v-else-if="showQuiz">
+      <iframe
+        :src="`${quizOrigin}/embed/${quizSlug}`"
+        width="100%"
+        height="600"
+        frameborder="0"
+        loading="lazy"
+        allow="clipboard-write"
+        data-rig-quiz-embed-frame
+      />
+    </template>
+    <template v-else>
+      <div data-rig-quiz-gated-prompt>
+        <h3 v-if="heading">{{ heading }}</h3>
+        <p>Take a quick quiz to get recommendations tailored to your style.</p>
+        <Button variant="primary" @click="showQuiz = true"> Take the Quiz </Button>
+      </div>
+    </template>
+  </section>
+</template>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+
+const props = defineProps<{
+  quizSlug: string
+  quizTitle: string
+  description: string
+  resultCount?: number
+}>()
+
+const config = useRuntimeConfig()
+const quizOrigin = (config.public.quizEmbedOrigin as string) || 'https://quizsort.com'
+const quizUrl = `${quizOrigin}/quiz/${props.quizSlug}`
+</script>
+
+<template>
+  <a :href="quizUrl" target="_blank" rel="noopener" data-rig-quiz-promo>
+    <div data-rig-quiz-promo-icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>
+    </div>
+    <div data-rig-quiz-promo-content>
+      <span data-rig-quiz-promo-badge>Quiz</span>
+      <span data-rig-quiz-promo-title>{{ quizTitle }}</span>
+      <span data-rig-quiz-promo-description>{{ description }}</span>
+    </div>
+    <div data-rig-quiz-promo-arrow>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="5" y1="12" x2="19" y2="12" />
+        <polyline points="12 5 19 12 12 19" />
+      </svg>
+    </div>
+  </a>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useAsyncData, queryCollection } from '#imports'
+
+const props = defineProps<{
+  slugs: string[]
+}>()
+
+const { data: articles } = await useAsyncData(`related-${props.slugs.join('-')}`, () =>
+  queryCollection('articles').where('slug', 'in', props.slugs).all(),
+)
+</script>
+
+<template>
+  <section v-if="articles?.length" data-rig-related-articles>
+    <h2 data-rig-related-articles-heading>Related Articles</h2>
+    <div data-rig-related-grid>
+      <div v-for="article in articles" :key="article.path" data-rig-related-card>
+        <NuxtLink :to="article.path" data-rig-related-link>
+          <span data-rig-related-category>{{ article.category }}</span>
+          <span data-rig-related-title>{{ article.title }}</span>
+          <span data-rig-related-description>{{ article.description }}</span>
+        </NuxtLink>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useAsyncData, queryCollection } from '#imports'
+
+const props = defineProps<{
+  currentPath: string
+  category?: string
+}>()
+
+const { data: related } = await useAsyncData(
+  `related-onsite-${props.currentPath}`,
+  async () => {
+    if (!props.category) return []
+    const articles = await queryCollection('articles')
+      .where('category', '=', props.category)
+      .order('publishedAt', 'DESC')
+      .limit(4)
+      .all()
+    return articles.filter((a) => a.path !== props.currentPath).slice(0, 3)
+  },
+  { default: () => [] },
+)
+</script>
+
+<template>
+  <section v-if="related.length" data-rig-related-onsite>
+    <h2 data-rig-related-onsite-heading>More in this category</h2>
+    <div data-rig-related-grid>
+      <div v-for="article in related" :key="article.path" data-rig-related-card>
+        <NuxtLink :to="article.path" data-rig-related-link>
+          <span data-rig-related-category>{{ article.category }}</span>
+          <span data-rig-related-title>{{ article.title }}</span>
+          <span data-rig-related-description>{{ article.description }}</span>
+        </NuxtLink>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useRoute, useAsyncData, queryCollection } from '#imports'
+
+interface TocLink {
+  id: string
+  text: string
+  depth: number
+  children?: TocLink[]
+}
+
+const route = useRoute()
+const { data: page } = await useAsyncData(`toc-${route.path}`, () =>
+  queryCollection('articles').path(route.path).first(),
+)
+
+const toc = computed<TocLink[]>(() => {
+  const body = page.value?.body as Record<string, unknown> | undefined
+  const tocData = body?.toc as { links?: TocLink[] } | undefined
+  return tocData?.links ?? []
+})
+
+const activeId = ref('')
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          activeId.value = entry.target.id
+        }
+      }
+    },
+    { rootMargin: '-80px 0px -80% 0px' },
+  )
+
+  const headings = document.querySelectorAll('h2[id], h3[id]')
+  headings.forEach((heading) => observer.observe(heading))
+
+  onUnmounted(() => observer.disconnect())
+})
+</script>
+
+<template>
+  <nav v-if="toc.length" aria-label="Table of contents" data-rig-toc>
+    <h2 data-rig-toc-heading>On this page</h2>
+    <ul data-rig-toc-list>
+      <li v-for="link in toc" :key="link.id" data-rig-toc-item>
+        <a :href="`#${link.id}`" data-rig-toc-link :data-active="activeId === link.id || undefined">
+          {{ link.text }}
+        </a>
+        <ul v-if="link.children?.length" data-rig-toc-children>
+          <li v-for="child in link.children" :key="child.id" data-rig-toc-item>
+            <a
+              :href="`#${child.id}`"
+              data-rig-toc-link
+              :data-active="activeId === child.id || undefined"
+            >
+              {{ child.text }}
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</template>

package/src/runtime/components/layout/AdSlot.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRuntimeConfig, useHead } from '#imports'
+
+interface Props {
+  /** Ad unit slot ID from AdSense */
+  slot: string
+  /** Ad format — 'auto' adapts to container, 'horizontal' and 'vertical' are fixed axis */
+  format?: 'auto' | 'horizontal' | 'vertical'
+  /** Enable responsive sizing (default: true) */
+  responsive?: boolean
+  /** Layout hint for native ads */
+  layout?: string
+  /** Location label for analytics/debugging */
+  location?: 'sidebar-top' | 'sidebar-bottom' | 'in-content' | 'header' | 'footer'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  format: 'auto',
+  responsive: true,
+  location: 'in-content',
+})
+
+const config = useRuntimeConfig()
+const adClientId = computed(() => config.public.adsenseClientId as string | undefined)
+const adReady = ref(false)
+
+// Conditionally add the AdSense script to <head> when a client ID is configured
+if (adClientId.value) {
+  useHead({
+    script: [
+      {
+        src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${adClientId.value}`,
+        async: true,
+        crossorigin: 'anonymous',
+        key: 'adsense',
+      },
+    ],
+  })
+}
+
+declare global {
+  interface Window {
+    adsbygoogle: unknown[]
+  }
+}
+
+onMounted(() => {
+  if (!adClientId.value) return
+  try {
+    ;(window.adsbygoogle = window.adsbygoogle || []).push({})
+    adReady.value = true
+  } catch {
+    // AdSense blocked by ad blocker or not loaded — fail silently
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="adClientId"
+    data-rig-ad-slot
+    :data-ad-location="location"
+    :style="{
+      minHeight: format === 'horizontal' ? '90px' : format === 'vertical' ? '250px' : '100px',
+    }"
+  >
+    <ins
+      class="adsbygoogle"
+      :style="{ display: 'block', minHeight: 'inherit' }"
+      :data-ad-client="adClientId"
+      :data-ad-slot="slot"
+      :data-ad-format="format"
+      :data-ad-layout="layout || undefined"
+      :data-full-width-responsive="responsive ? 'true' : undefined"
+    />
+  </div>
+</template>

package/src/runtime/components/layout/ContentAppFooter.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useSiteConfig, useAppConfig } from '#imports'
+
+defineProps<{
+  tagline?: string
+}>()
+
+const { name: siteName } = useSiteConfig()
+const appConfig = useAppConfig()
+const categories = appConfig.categories as Record<string, { label: string }>
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <SiteFooter :columns="3">
+    <div data-rig-site-footer-column>
+      <NuxtLink to="/" data-rig-site-footer-brand>
+        {{ siteName }}
+      </NuxtLink>
+      <p v-if="tagline" data-rig-site-footer-tagline>
+        {{ tagline }}
+      </p>
+    </div>
+
+    <div data-rig-site-footer-column>
+      <h3 data-rig-site-footer-heading>Categories</h3>
+      <ul data-rig-site-footer-links>
+        <li v-for="(category, slug) in categories" :key="slug">
+          <NuxtLink :to="`/category/${slug}`">
+            {{ category.label }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+
+    <div data-rig-site-footer-column>
+      <h3 data-rig-site-footer-heading>Site</h3>
+      <ul data-rig-site-footer-links>
+        <li>
+          <NuxtLink to="/about">About</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/privacy">Privacy Policy</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/terms-of-service">Terms of Service</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/affiliate-disclosure">Affiliate Disclosure</NuxtLink>
+        </li>
+        <li>
+          <a href="/feed.xml" target="_blank" rel="noopener">RSS Feed</a>
+        </li>
+      </ul>
+    </div>
+
+    <template #post-footer>
+      <p data-rig-site-footer-copyright>
+        &copy; {{ currentYear }} {{ siteName }}. All rights reserved.
+      </p>
+    </template>
+  </SiteFooter>
+</template>

package/src/runtime/components/layout/CookieConsent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Button } from '@amulet-laboratories/rig'
+
+const accepted = ref(true)
+
+onMounted(() => {
+  accepted.value = localStorage.getItem('cookie-consent') === 'accepted'
+})
+
+function accept() {
+  localStorage.setItem('cookie-consent', 'accepted')
+  accepted.value = true
+}
+</script>
+
+<template>
+  <div v-if="!accepted" data-rig-cookie-consent role="alert">
+    <p data-rig-cookie-consent-text>
+      We use cookies for analytics and to improve your experience.
+      <NuxtLink to="/privacy">Privacy Policy</NuxtLink>
+    </p>
+    <Button variant="primary" @click="accept"> Accept </Button>
+  </div>
+</template>

package/src/runtime/components/layout/NetworkFooter.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSiteConfig } from '#imports'
+
+interface NetworkSite {
+  name: string
+  url: string
+  tagline: string
+}
+
+const props = defineProps<{
+  sites: NetworkSite[]
+}>()
+
+const { name: currentSite } = useSiteConfig()
+
+const otherSites = computed(() => props.sites.filter((s) => s.name !== currentSite))
+</script>
+
+<template>
+  <nav data-rig-network-footer aria-label="Partner sites">
+    <div data-rig-network-footer-inner>
+      <p data-rig-network-footer-label>From our network</p>
+      <ul data-rig-network-footer-list>
+        <li v-for="site in otherSites" :key="site.name">
+          <a :href="site.url" target="_blank" rel="noopener" data-rig-network-footer-link>
+            <span data-rig-network-footer-name>{{ site.name }}</span>
+            <span data-rig-network-footer-tagline>{{ site.tagline }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>

package/src/runtime/composables/useArticleSeo.ts

@@ -0,0 +1,33 @@
+export interface SeoMetaOptions {
+  title: string
+  description?: string
+  ogImage?: string
+  ogType?: string
+  twitterCard?: string
+}
+
+export const useArticleSeo = (options: SeoMetaOptions) => {
+  const { name: siteName, url: siteUrl } = useSiteConfig()
+  const route = useRoute()
+  const canonicalUrl = `${siteUrl}${route.path}`
+  const ogImage = options.ogImage || `${siteUrl}/og-default.svg`
+
+  useSeoMeta({
+    title: options.title,
+    description: options.description,
+    ogTitle: options.title,
+    ogDescription: options.description,
+    ogType: (options.ogType || 'article') as 'article',
+    ogSiteName: siteName,
+    ogUrl: canonicalUrl,
+    ogImage,
+    twitterCard: (options.twitterCard || 'summary_large_image') as 'summary_large_image',
+    twitterTitle: options.title,
+    twitterDescription: options.description,
+    twitterImage: options.ogImage,
+  })
+
+  useHead({
+    link: [{ rel: 'canonical', href: canonicalUrl }],
+  })
+}