From ec4088bfa214168c75527f7d84bb4ecec8729a94 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Sun, 31 May 2026 07:33:40 +0200 Subject: [PATCH] feat(website): site-wide Google Analytics and sharper /wordart SEO --- website/astro.config.mjs | 4 ++++ website/src/components/Analytics.astro | 13 +++++++++++++ website/src/pages/404.astro | 2 ++ website/src/pages/builder.astro | 2 ++ website/src/pages/gallery.astro | 2 ++ website/src/pages/index.astro | 2 ++ website/src/pages/wordart.astro | 8 +++++--- 7 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 website/src/components/Analytics.astro diff --git a/website/astro.config.mjs b/website/astro.config.mjs index 7d9ab2d8..bc22b0ad 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -50,6 +50,10 @@ export default defineConfig({ description: 'A CSS polygon mesh engine. DOM-native 3D rendering.', favicon: '/favicon.ico', head: [ + // Google Analytics (gtag.js) — covers all Starlight docs pages; custom + // pages render the same tag via src/components/Analytics.astro. + { tag: 'script', attrs: { async: true, src: 'https://www.googletagmanager.com/gtag/js?id=G-XV72TXWTM5' } }, + { tag: 'script', content: "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-XV72TXWTM5');" }, { tag: 'meta', attrs: { property: 'og:image', content: 'https://polycss.com/polycss-github.png' } }, { tag: 'meta', attrs: { property: 'og:image:width', content: '1280' } }, { tag: 'meta', attrs: { property: 'og:image:height', content: '640' } }, diff --git a/website/src/components/Analytics.astro b/website/src/components/Analytics.astro new file mode 100644 index 00000000..a9eee5aa --- /dev/null +++ b/website/src/components/Analytics.astro @@ -0,0 +1,13 @@ +--- +// Google Analytics (gtag.js). Rendered in the of the custom Astro pages +// (index / wordart / gallery / builder / 404). Starlight docs pages get the +// same tag via the `head` config in astro.config.mjs, so every page is covered. +const GA_ID = 'G-XV72TXWTM5'; +--- + + diff --git a/website/src/pages/404.astro b/website/src/pages/404.astro index 8f520b04..7a2be66c 100644 --- a/website/src/pages/404.astro +++ b/website/src/pages/404.astro @@ -1,5 +1,6 @@ --- import DocsHeader from "../components/DocsHeader.astro"; +import Analytics from "../components/Analytics.astro"; import "../styles/custom.css"; const title = "Page not found | PolyCSS"; @@ -11,6 +12,7 @@ const description = "The requested page could not be found."; + {title} diff --git a/website/src/pages/builder.astro b/website/src/pages/builder.astro index d4153911..59aec674 100644 --- a/website/src/pages/builder.astro +++ b/website/src/pages/builder.astro @@ -1,6 +1,7 @@ --- import { BuilderWorkbench } from '../components/BuilderWorkbench'; import DocsHeader from '../components/DocsHeader.astro'; +import Analytics from '../components/Analytics.astro'; import '../styles/custom.css'; const title = 'Builder | PolyCSS'; @@ -13,6 +14,7 @@ const socialImageAlt = 'PolyCSS logo, a rendered polygon duck, and DOM markup.'; + {title} diff --git a/website/src/pages/gallery.astro b/website/src/pages/gallery.astro index 1395f18f..bfa4fda5 100644 --- a/website/src/pages/gallery.astro +++ b/website/src/pages/gallery.astro @@ -1,6 +1,7 @@ --- import { GalleryWorkbench } from '../components/GalleryWorkbench'; import DocsHeader from '../components/DocsHeader.astro'; +import Analytics from '../components/Analytics.astro'; import '../styles/custom.css'; const title = 'Gallery | PolyCSS'; @@ -13,6 +14,7 @@ const socialImageAlt = 'PolyCSS logo, a rendered polygon duck, and DOM markup.'; + {title} diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index ddaea880..5c3ef661 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -11,6 +11,7 @@ hljs.registerLanguage("tsx", typescript); hljs.registerLanguage("vue", xml); import DocsHeader from "../components/DocsHeader.astro"; +import Analytics from "../components/Analytics.astro"; function highlight(code: string, lang: string): string { return hljs.highlight(code, { language: lang }).value; @@ -103,6 +104,7 @@ const ldJson = { + {title} diff --git a/website/src/pages/wordart.astro b/website/src/pages/wordart.astro index cdb56ac0..03523d6b 100644 --- a/website/src/pages/wordart.astro +++ b/website/src/pages/wordart.astro @@ -1,18 +1,20 @@ --- import { WordArtWorkbench } from '../components/WordArtWorkbench'; import DocsHeader from '../components/DocsHeader.astro'; +import Analytics from '../components/Analytics.astro'; import '../styles/custom.css'; -const title = 'WordArt | PolyCSS'; -const description = 'Compose 3D text from any Google font and render it with pure CSS — multiline, styled, extruded, WordArt-style.'; +const title = 'WordArt — 3D text in pure CSS, no canvas | PolyCSS'; +const description = 'Make retro WordArt-style 3D text from any Google font — gradients, block textures, bevels, custom edge curves and warps — rendered with pure CSS and DOM. No canvas, no WebGL. Powered by PolyCSS, the CSS polygon-mesh engine.'; const canonical = 'https://polycss.com/wordart/'; const socialImage = 'https://polycss.com/polycss-github.png'; -const socialImageAlt = 'PolyCSS logo, a rendered polygon duck, and DOM markup.'; +const socialImageAlt = 'WordArt-style extruded 3D text rendered in pure CSS with PolyCSS.'; --- + {title}