Add Plausible analytics + a 'Something's missing' doc feedback button (#62)

* feat: add Plausible analytics (privacy-friendly, cookieless)

Single shared property with the main site; distinguish docs traffic via the
Hostname filter. The script ID is a public client-side identifier, not a secret,
so it lives inline in the VitePress head config.

* feat: add 'Something's missing' doc feedback button

Renders in the right aside (after the page outline) on content pages, not the
LandingLayout homepage. The click fires a Plausible 'Doc Incomplete' event with
the page path as the metric; an optional 'Add details' step opens a prefilled
GitHub issue for context, so no free text (and no PII) is ever sent to Plausible.

Author: irinanazarova

docs/.vitepress/config.mts

@@ -38,6 +38,10 @@ export default withMermaid(defineConfig({
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { name: 'twitter:site', content: '@any_cable' }],
     ['meta', { name: 'keywords', content: 'anycable, websockets, real-time, realtime server, delivery guarantees, reliable streams, presence, action-cable, ruby, rails, hotwire, laravel, nodejs, python, go' }],
+    // Privacy-friendly analytics by Plausible (cookieless, no PII). The script ID is a
+    // public client-side identifier, not a secret; spoofing is blocked via hostname Shields.
+    ['script', { async: '', src: 'https://plausible.io/js/pa-sk7JDKlDe3CHAdBbykSWN.js' }],
+    ['script', {}, 'window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};\n  plausible.init()'],
   ],
 
   themeConfig: {

docs/.vitepress/theme/components/DocFeedback.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useData, useRoute } from 'vitepress'
+
+const route = useRoute()
+const { page } = useData()
+
+const sent = ref(false)
+
+// Built once per page, SSR-safe (no `window`/`location` at render time).
+const issueUrl = computed(() => {
+  const path = route.path
+  const source = page.value.relativePath // e.g. "quickstart.md"
+  const body = [
+    "What's missing, unclear, or wrong on this page?",
+    '',
+    '',
+    '---',
+    `Page: https://docs.anycable.io${path}`,
+    `Source: docs/${source}`,
+  ].join('\n')
+  const params = new URLSearchParams({
+    title: `Docs feedback: ${path}`,
+    body,
+  })
+  return `https://github.com/anycable/docs.anycable.io/issues/new?${params.toString()}`
+})
+
+// Fire the lightweight signal. Free text never goes to Plausible (PII/terms).
+function track(event: string) {
+  const plausible = (globalThis as any).plausible
+  if (typeof plausible === 'function') {
+    plausible(event, { props: { path: route.path } })
+  }
+}
+
+function report() {
+  track('Doc Incomplete')
+  sent.value = true
+}
+</script>
+
+<template>
+  <div class="doc-feedback">
+    <template v-if="!sent">
+      <span class="doc-feedback-q">Something missing or unclear on this page?</span>
+      <button class="doc-feedback-btn" type="button" @click="report">
+        Something's missing
+      </button>
+    </template>
+    <template v-else>
+      <span class="doc-feedback-q">Thanks, noted. Want to add specifics?</span>
+      <a
+        class="doc-feedback-btn"
+        :href="issueUrl"
+        target="_blank"
+        rel="noopener"
+        @click="track('Doc Feedback Detail')"
+      >
+        Add details on GitHub →
+      </a>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.doc-feedback {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--vp-c-divider);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.doc-feedback-q {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-2);
+}
+
+.doc-feedback-btn {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-soft);
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.doc-feedback-btn:hover {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import AvailableSince from './components/AvailableSince.vue'
+import DocFeedback from './components/DocFeedback.vue'
 import LandingLayout from './layouts/LandingLayout.vue'
 import './style.css'
 
@@ -11,6 +12,9 @@ export default {
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      // Right aside (toolbar), under the page outline. Doc pages only, not the
+      // LandingLayout homepage.
+      'aside-outline-after': () => h(DocFeedback),
     })
   },
   enhanceApp({ app, router, siteData }) {