add analytics

.github/workflows/deploy-github-pages.yml

@@ -29,6 +29,8 @@ jobs:
 
       - name: Build statics
         run: npm run build
+        env:
+          VITE_ANALYTICS_WEBSITE_ID: ${{ vars.ANALYTICS_WEBSITE_ID }}
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

index.html

@@ -133,5 +133,10 @@
       </section>
     </main>
     <script type="module" src="/src/main.ts"></script>
+    <div x-data="analytics">
+      <template x-if="scriptUrl && websiteId">
+        <script defer x-bind:src="scriptUrl" x-bind:data-website-id="websiteId"></script>
+      </template>
+    </div>
   </body>
 </html>

src/components/Analytics.ts

@@ -0,0 +1,15 @@
+export interface AnalyticsState {
+  scriptUrl: string
+  websiteId: string
+}
+
+export default function Analytics(websiteId: string) {
+  const scriptUrl = 'https://analytics.cloud.aneur.in/script.js'
+
+  return function(): AnalyticsState {
+    return {
+      scriptUrl,
+      websiteId,
+    }
+  }
+}

src/main.ts

@@ -1,10 +1,12 @@
 import './style.scss'
 import Alpine from 'alpinejs'
+import Analytics from './components/Analytics'
 import Contact from './components/Contact'
 import Skills from './components/Skills'
 
 function main() {
   (window as unknown as { Alpine: typeof Alpine }).Alpine = Alpine
+  Alpine.data('analytics', Analytics(import.meta.env.VITE_ANALYTICS_WEBSITE_ID || ''))
   Alpine.data('contact', Contact)
   Alpine.data('skills', Skills)
   Alpine.start()