Add PostHog analytics, comprehensive SEO, and amber favicon#5
Merged
Conversation
Part 1: PostHog Analytics Integration - Install posthog-js package for event tracking - Create PostHog plugin with manual pageview tracking for SPA - Add click tracking for outbound links and code copy events - Implement search query tracking with debouncing - Track events: $pageview, docs_search, outbound_link_click, code_copied - Privacy-focused config: identified_only profiles, no autocapture Part 2: SEO Enhancements - Add Open Graph meta tags (og:image, og:site_name, og:locale) - Add Twitter Card meta tags for rich social sharing - Implement structured data (JSON-LD) with TechArticle schema - Auto-generate meta descriptions from first paragraph - Add per-page canonical URLs via transformPageData - Generate sitemap.xml with priorities and change frequencies - Add theme-color meta tag with brand amber (#D4974A) Part 3: Favicon Updates - Update favicon.svg background from dark (#141414) to amber (#D4974A) - Generate PNG favicons: 32x32, 16x16, 180x180 (apple-touch-icon) - Add favicon generation script using sharp package - Update head config with complete favicon fallback chain Benefits: - Full visibility into docs usage patterns and search behavior - Improved search engine discoverability and rich snippets - Better social sharing preview experience - Brand-aligned favicon across all platforms - Privacy-respecting analytics (no PII, anonymous tracking) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Change router.onAfterRouteChanged from property assignment to method call - Remove router.isReady() which doesn't exist in VitePress router - Use setTimeout instead for DOM-ready timing - Add defensive check for router methods before calling This fixes the console errors: - "router.afterEach is not a function" - "router.isReady is not a function" VitePress uses a custom router implementation, not standard Vue Router. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
✅ Deploy Preview for kona-theme ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Preview theme deployedTheme: PR #5 - docs-analytics-seo-favicon
|
- Remove unused 'to' parameter in PostHog route change callback - Delete one-time generate-favicons.js script (PNGs already generated) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds comprehensive analytics tracking, SEO optimization, and brand-aligned favicon to the VitePress documentation site.
Part 1: PostHog Analytics Integration ✅
identified_onlyprofiles, no autocapture, no PII$pageview- Every route change in SPAdocs_search- Search queries with result countoutbound_link_click- External links with contextcode_copied- Code block copies with languagePart 2: SEO Enhancements ✅
transformPageDatahookPart 3: Favicon Updates ✅
favicon.svgbackground: dark (#141414) → amber (#D4974A)Testing Checklist
In the Netlify preview:
PostHog Analytics
docs_searchevents in PostHogoutbound_link_clickeventcode_copiedeventSEO Meta Tags
<meta property="og:*">tags<link rel="canonical">on multiple pages/sitemap.xml→ verify all pages listedFavicon
Benefits
Analytics: Full visibility into docs usage patterns, popular pages, search behavior, and user engagement
SEO: Improved search engine discoverability, rich snippets in Google, better social sharing
Brand: Consistent amber (#D4974A) branding across all platforms
Privacy: Anonymous analytics, no PII tracking, GDPR-friendly
Files Changed
docs/.vitepress/config.js- SEO meta, sitemap, transformPageDatadocs/.vitepress/theme/index.js- PostHog integrationdocs/.vitepress/theme/posthog.js- PostHog setup with VitePress routerdocs/.vitepress/theme/track-clicks.js- Click event trackingdocs/public/favicon.svg- Amber backgrounddocs/public/*.png- Generated PNG faviconspackage.json- Added posthog-js, sharpscripts/generate-favicons.js- Favicon generation utility🤖 Generated with Claude Code