@amulet-laboratories/rig-nuxt 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amulet-laboratories/rig-nuxt",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Nuxt module for @amulet-laboratories/rig — auto-imports, tree-shaking, SSR-safe",
   "license": "MIT",
@@ -15,12 +15,20 @@
     "src"
   ],
   "peerDependencies": {
-    "@amulet-laboratories/rig": ">=0.2.0",
-    "nuxt": "^3.0.0"
+    "@amulet-laboratories/rig": ">=0.4.0",
+    "nuxt": "^3.0.0",
+    "@nuxt/content": "^3.0.0",
+    "@sentry/vue": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@amulet-laboratories/hex": {
       "optional": true
+    },
+    "@nuxt/content": {
+      "optional": true
+    },
+    "@sentry/vue": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/module.ts

@@ -1,4 +1,11 @@
-import { defineNuxtModule, addImports, addComponent } from '@nuxt/kit'
+import {
+  defineNuxtModule,
+  addImports,
+  addComponent,
+  addPlugin,
+  addServerScanDir,
+  createResolver,
+} from '@nuxt/kit'
 
 /**
  * @amulet-laboratories/rig-nuxt
@@ -12,13 +19,31 @@ import { defineNuxtModule, addImports, addComponent } from '@nuxt/kit'
  * Options:
  *   prefix: string — component prefix (default: '' — no prefix)
  *   composables: boolean — auto-import composables (default: true)
+ *   content: boolean | ContentOptions — enable authority-site content features
  */
 
+export interface ContentOptions {
+  /** Enable Fathom analytics plugin (default: true) */
+  fathom?: boolean
+  /** Enable Sentry error tracking plugin (default: true) */
+  sentry?: boolean
+  /** Enable product API routes (default: true) */
+  products?: boolean
+  /** Enable newsletter API route (default: true) */
+  newsletter?: boolean
+  /** Enable RSS feed route (default: true) */
+  feed?: boolean
+  /** Enable sitemap route (default: true) */
+  sitemap?: boolean
+}
+
 export interface NuxtRigOptions {
   /** Prefix for component names (e.g. 'Rig' → RigButton, RigModal) */
   prefix?: string
   /** Whether to auto-import composables (default: true) */
   composables?: boolean
+  /** Enable authority-site content features (components, composables, plugins, server routes) */
+  content?: boolean | ContentOptions
 }
 
 const COMPONENTS = [
@@ -145,6 +170,7 @@ const COMPONENTS = [
   'TemporalHeatmap',
   'ParticleField',
   // Web
+  'ReadingProgress',
   'SiteShell',
   'SiteNav',
   'Hero',
@@ -154,6 +180,17 @@ const COMPONENTS = [
   'Testimonial',
   'SiteFooter',
   'PricingCard',
+  'SectionDivider',
+  'FlankedHeading',
+  'Ornament',
+  'ContactForm',
+  'NewsletterForm',
+  'ServiceGrid',
+  'TeamGrid',
+  'MenuList',
+  'FeatureList',
+  'Gallery',
+  'MapPlaceholder',
 ] as const
 
 const COMPOSABLES = [
@@ -188,11 +225,13 @@ export default defineNuxtModule<NuxtRigOptions>({
   defaults: {
     prefix: '',
     composables: true,
+    content: false,
   },
   setup(options) {
     const prefix = options.prefix ?? ''
+    const { resolve } = createResolver(import.meta.url)
 
-    // Auto-import all components
+    // Auto-import all Rig components
     for (const name of COMPONENTS) {
       addComponent({
         name: `${prefix}${name}`,
@@ -217,7 +256,110 @@ export default defineNuxtModule<NuxtRigOptions>({
       // Web composables
       addImports({ name: 'useHashRouter', from: '@amulet-laboratories/rig' })
       addImports({ name: 'useScrollNav', from: '@amulet-laboratories/rig' })
+      addImports({ name: 'useDetailView', from: '@amulet-laboratories/rig' })
+      addImports({ name: 'useFormatDate', from: '@amulet-laboratories/rig' })
+      addImports({ name: 'useBreadcrumbs', from: '@amulet-laboratories/rig' })
+      addImports({ name: 'useFathom', from: '@amulet-laboratories/rig' })
+    }
+
+    // ── Content features (authority-site runtime) ──
+    if (!options.content) return
+
+    const contentOpts: ContentOptions = options.content === true ? {} : options.content
+
+    // Content components
+    const contentComponents: Array<{ name: string; filePath: string }> = [
+      {
+        name: 'ArticleHeader',
+        filePath: resolve('./runtime/components/content/ArticleHeader.vue'),
+      },
+      {
+        name: 'ContentBreadcrumbs',
+        filePath: resolve('./runtime/components/content/ContentBreadcrumbs.vue'),
+      },
+      {
+        name: 'TableOfContents',
+        filePath: resolve('./runtime/components/content/TableOfContents.vue'),
+      },
+      {
+        name: 'RelatedArticles',
+        filePath: resolve('./runtime/components/content/RelatedArticles.vue'),
+      },
+      {
+        name: 'RelatedOnSite',
+        filePath: resolve('./runtime/components/content/RelatedOnSite.vue'),
+      },
+      {
+        name: 'NetworkArticles',
+        filePath: resolve('./runtime/components/content/NetworkArticles.vue'),
+      },
+      {
+        name: 'NetworkLinks',
+        filePath: resolve('./runtime/components/content/NetworkLinks.vue'),
+      },
+      {
+        name: 'ProductCardWrapper',
+        filePath: resolve('./runtime/components/content/ProductCardWrapper.vue'),
+      },
+      {
+        name: 'AffiliateDisclosure',
+        filePath: resolve('./runtime/components/content/AffiliateDisclosure.vue'),
+      },
+      {
+        name: 'ContentNewsletterSignup',
+        filePath: resolve('./runtime/components/content/NewsletterSignup.vue'),
+      },
+      { name: 'QuizPromo', filePath: resolve('./runtime/components/content/QuizPromo.vue') },
+      {
+        name: 'QuizEmbedWrapper',
+        filePath: resolve('./runtime/components/content/QuizEmbedWrapper.vue'),
+      },
+      {
+        name: 'QuizGatedGuide',
+        filePath: resolve('./runtime/components/content/QuizGatedGuide.vue'),
+      },
+      {
+        name: 'PersonalizedHero',
+        filePath: resolve('./runtime/components/content/PersonalizedHero.vue'),
+      },
+      {
+        name: 'AdUnit',
+        filePath: resolve('./runtime/components/content/AdUnit.vue'),
+      },
+      {
+        name: 'ContentAppFooter',
+        filePath: resolve('./runtime/components/layout/ContentAppFooter.vue'),
+      },
+      { name: 'NetworkFooter', filePath: resolve('./runtime/components/layout/NetworkFooter.vue') },
+      { name: 'CookieConsent', filePath: resolve('./runtime/components/layout/CookieConsent.vue') },
+      { name: 'AdSlot', filePath: resolve('./runtime/components/layout/AdSlot.vue') },
+    ]
+
+    for (const comp of contentComponents) {
+      addComponent({
+        name: `${prefix}${comp.name}`,
+        filePath: comp.filePath,
+      })
     }
+
+    // Content composables
+    addImports({ name: 'useArticleSeo', from: resolve('./runtime/composables/useArticleSeo') })
+    addImports({
+      name: 'useStructuredData',
+      from: resolve('./runtime/composables/useStructuredData'),
+    })
+    addImports({ name: 'useProducts', from: resolve('./runtime/composables/useProducts') })
+
+    // Plugins
+    if (contentOpts.fathom !== false) {
+      addPlugin(resolve('./runtime/plugins/fathom.client'))
+    }
+    if (contentOpts.sentry !== false) {
+      addPlugin(resolve('./runtime/plugins/sentry.client'))
+    }
+
+    // Server routes — use addServerScanDir so Nitro transpiles TypeScript
+    addServerScanDir(resolve('./runtime/server'))
   },
 })
 

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

@@ -0,0 +1,73 @@
+<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 (default) */
+  format?: 'auto' | 'horizontal' | 'vertical'
+  /** Enable responsive sizing (default: true) */
+  responsive?: boolean
+  /** Layout hint for native ads */
+  layout?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  format: 'auto',
+  responsive: true,
+})
+
+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>
+  <aside
+    v-if="adClientId"
+    data-rig-ad-unit
+    aria-label="Advertisement"
+    :style="{ minHeight: '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"
+    />
+  </aside>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div data-rig-affiliate-disclosure>
+    <p>
+      This article may contain affiliate links. If you purchase through these links, we may earn a
+      small commission at no extra cost to you.
+      <NuxtLink to="/affiliate-disclosure">Learn more</NuxtLink>.
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAppConfig } from '#imports'
+import { useFormatDate } from '@amulet-laboratories/rig'
+
+interface Props {
+  title: string
+  description?: string
+  publishedAt?: string
+  updatedAt?: string
+  category?: string
+  timeToRead?: number
+}
+
+const props = defineProps<Props>()
+
+const appConfig = useAppConfig()
+const categories = appConfig.categories as Record<string, { label: string }> | undefined
+
+const categoryLabel = computed(() => {
+  if (!props.category || !categories) return props.category
+  return categories[props.category]?.label ?? props.category
+})
+
+const { formatDate } = useFormatDate()
+
+const formattedDate = computed(() => {
+  if (!props.publishedAt) return ''
+  return formatDate(props.publishedAt, 'long')
+})
+
+const formattedUpdatedDate = computed(() => {
+  if (!props.updatedAt) return ''
+  return formatDate(props.updatedAt, 'long')
+})
+</script>
+
+<template>
+  <header data-rig-article-header>
+    <div data-rig-article-header-meta>
+      <NuxtLink v-if="category" :to="`/category/${category}`" data-rig-article-header-category>
+        <slot name="category-icon" :category="category" />
+        {{ categoryLabel }}
+      </NuxtLink>
+      <span v-if="timeToRead" data-rig-article-header-reading-time>{{ timeToRead }} min read</span>
+    </div>
+    <h1 data-rig-article-header-title>{{ title }}</h1>
+    <p v-if="description" data-rig-article-header-description>{{ description }}</p>
+    <div v-if="publishedAt || updatedAt" data-rig-article-header-byline>
+      <time v-if="publishedAt" :datetime="publishedAt">
+        {{ formattedDate }}
+      </time>
+      <span v-if="updatedAt" data-rig-article-header-updated>
+        Updated {{ formattedUpdatedDate }}
+      </span>
+    </div>
+    <div data-rig-affiliate-notice>
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" y1="16" x2="12" y2="12" />
+        <line x1="12" y1="8" x2="12.01" y2="8" />
+      </svg>
+      <span
+        >This article may contain affiliate links. If you purchase through these links, we may earn
+        a small commission at no extra cost to you.
+        <NuxtLink to="/affiliate-disclosure">Learn more</NuxtLink>.</span
+      >
+    </div>
+  </header>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContentBreadcrumbItem } from '@amulet-laboratories/rig'
+
+defineProps<{
+  items: ContentBreadcrumbItem[]
+}>()
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb" data-rig-breadcrumbs>
+    <ol data-rig-breadcrumbs-list>
+      <li v-for="(item, index) in items" :key="item.path" data-rig-breadcrumbs-item>
+        <NuxtLink v-if="index < items.length - 1" :to="item.path" data-rig-breadcrumbs-link>
+          {{ item.label }}
+        </NuxtLink>
+        <span v-else data-rig-breadcrumbs-current aria-current="page">
+          {{ item.label }}
+        </span>
+        <svg
+          v-if="index < items.length - 1"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          data-rig-breadcrumbs-separator
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </li>
+    </ol>
+  </nav>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSiteConfig } from '#imports'
+import { useFathom } from '@amulet-laboratories/rig'
+
+interface NetworkArticle {
+  site: string
+  url: string
+  title: string
+  path: string
+  tag: string
+}
+
+const props = defineProps<{
+  articles: NetworkArticle[]
+}>()
+
+const { name: currentSite } = useSiteConfig()
+const { trackCrossSiteNav } = useFathom()
+
+const recommendations = computed(() =>
+  props.articles.filter((a) => a.site !== currentSite).slice(0, 3),
+)
+</script>
+
+<template>
+  <section v-if="recommendations.length" data-rig-network-articles>
+    <h2 data-rig-network-articles-heading>More from our network</h2>
+    <div data-rig-network-articles-grid>
+      <a
+        v-for="article in recommendations"
+        :key="article.path"
+        :href="`${article.url}${article.path}`"
+        target="_blank"
+        rel="noopener"
+        data-rig-network-articles-link
+        @click="trackCrossSiteNav(article.site)"
+      >
+        <span data-rig-network-articles-site>{{ article.site }}</span>
+        <span data-rig-network-articles-title>{{ article.title }}</span>
+      </a>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSiteConfig } from '#imports'
+import { useFathom } from '@amulet-laboratories/rig'
+
+interface CrossSiteLink {
+  site: string
+  slug: string
+  title: string
+}
+
+const runtimeConfig = useRuntimeConfig()
+const SITE_URLS: Record<string, string> = ((runtimeConfig.public as Record<string, unknown>)
+  .networkSiteUrls as Record<string, string>) ?? {
+  'beanwoven.com': 'https://beanwoven.com',
+  'burrowtail.com': 'https://burrowtail.com',
+  'dewthread.com': 'https://dewthread.com',
+  'meeplehaus.com': 'https://meeplehaus.com',
+  'shelfglow.com': 'https://shelfglow.com',
+  'wainloft.com': 'https://wainloft.com',
+}
+
+const SITE_LABELS: Record<string, string> = {
+  'beanwoven.com': 'Beanwoven',
+  'burrowtail.com': 'Burrowtail',
+  'dewthread.com': 'Dewthread',
+  'meeplehaus.com': 'Meeplehaus',
+  'shelfglow.com': 'Shelfglow',
+  'wainloft.com': 'Wainloft',
+}
+
+const props = defineProps<{
+  links?: CrossSiteLink[]
+}>()
+
+const { trackCrossSiteNav } = useFathom()
+const { name: currentSite } = useSiteConfig()
+
+const resolvedLinks = computed(() => {
+  if (!props.links?.length) return []
+  return props.links
+    .filter((link) => link.site !== currentSite)
+    .slice(0, 3)
+    .map((link) => ({
+      site: link.site,
+      label: SITE_LABELS[link.site] ?? link.site.replace('.com', ''),
+      url: `${SITE_URLS[link.site] ?? `https://${link.site}`}/articles/${link.slug}`,
+      title: link.title,
+    }))
+})
+</script>
+
+<template>
+  <section v-if="resolvedLinks.length" data-rig-network-links>
+    <h2 data-rig-network-links-heading>From across the network</h2>
+    <div data-rig-network-links-grid>
+      <a
+        v-for="link in resolvedLinks"
+        :key="link.url"
+        :href="link.url"
+        target="_blank"
+        rel="noopener"
+        data-rig-network-links-card
+        @click="trackCrossSiteNav(link.site)"
+      >
+        <span data-rig-network-links-site>{{ link.label }}</span>
+        <span data-rig-network-links-title>{{ link.title }}</span>
+      </a>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useSiteConfig } from '#imports'
+import { useFathom } from '@amulet-laboratories/rig'
+
+const props = defineProps<{
+  heading?: string
+  description?: string
+}>()
+
+const { name: siteName } = useSiteConfig()
+
+const formRef = ref<{ onSuccess: () => void; onError: () => void } | null>(null)
+const { trackNewsletterSignup } = useFathom()
+
+async function handleSubscribe(email: string) {
+  try {
+    await $fetch('/api/newsletter/subscribe', {
+      method: 'POST',
+      body: { email },
+    })
+    trackNewsletterSignup('article')
+    formRef.value?.onSuccess()
+  } catch {
+    formRef.value?.onError()
+  }
+}
+</script>
+
+<template>
+  <NewsletterForm
+    ref="formRef"
+    placeholder="you@example.com"
+    button-text="Subscribe"
+    success-message="Thanks for subscribing. Check your inbox to confirm."
+    @subscribe="handleSubscribe"
+  >
+    <h2 data-rig-newsletter-heading>{{ heading || 'Never miss a great read' }}</h2>
+    <p data-rig-newsletter-description>
+      {{
+        description ||
+        `Curated picks, honest reviews, and expert tips delivered weekly. Join readers who trust ${siteName}.`
+      }}
+    </p>
+  </NewsletterForm>
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps<{
+  quizSlug: string
+  siteSlug: string
+}>()
+
+const result = ref<string | null>(null)
+const resultLabel = computed(
+  () =>
+    result.value
+      ?.replace(/^the-/, '')
+      .replace(/-/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase()) ?? '',
+)
+
+onMounted(() => {
+  result.value = localStorage.getItem(`quizsort-result-${props.quizSlug}`)
+})
+</script>
+
+<template>
+  <div v-if="result" data-rig-personalized-hero>
+    <span data-rig-persona-badge>Welcome back</span>
+    <p data-rig-personalized-hero-text>
+      Picks for <strong>{{ resultLabel }}</strong> readers
+    </p>
+    <NuxtLink :to="`/best-for/${result}`" data-rig-personalized-hero-link>
+      See your personalized picks &rarr;
+    </NuxtLink>
+  </div>
+</template>