feat: analytics and ads

2026-02-04 14:47:34 -08:00
parent cbd6499079
commit e5b15e02de
5 changed files with 204 additions and 4 deletions
@@ -2,3 +2,4 @@
 <main class="main-content">
  <router-outlet></router-outlet>
 </main>
+<app-footer></app-footer>
@@ -1,13 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { AnalyticsService } from './services/analytics.service';

@Component({
-  imports: [RouterModule, HeaderComponent],
+  imports: [RouterModule, HeaderComponent, FooterComponent],
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.scss',
 })
-export class App {
+export class App implements OnInit {
  protected title = 'Naomi\'s Library';
+  private analytics = inject(AnalyticsService);
+
+  ngOnInit(): void {
+    this.analytics.initialise();
+  }
 }
@@ -0,0 +1,138 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <footer class="footer">
+      <div class="footer-content">
+        <div class="cta-section">
+          <div class="cta-card discord">
+            <h3>Join the Community</h3>
+            <p>Want to chat about what we're reading, playing, or listening to? Got recommendations? Come hang out!</p>
+            <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer" class="btn btn-discord">
+              Join our Discord
+            </a>
+          </div>
+
+          <div class="cta-card donate">
+            <h3>Support Naomi</h3>
+            <p>Enjoying the vibes? Your support helps keep the servers running and the coffee flowing!</p>
+            <a href="https://donate.nhcarrigan.com" target="_blank" rel="noopener noreferrer" class="btn btn-donate">
+              Buy us a coffee
+            </a>
+          </div>
+        </div>
+
+        <div class="footer-bottom">
+          <p>&copy; {{ currentYear }} NHCarrigan. Made with love.</p>
+        </div>
+      </div>
+    </footer>
+  `,
+  styles: [`
+    .footer {
+      background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%);
+      color: var(--witch-moon);
+      padding: 3rem 2rem 1.5rem;
+      margin-top: 4rem;
+    }
+
+    .footer-content {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .cta-section {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .cta-card {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      border-radius: 12px;
+      padding: 1.5rem;
+      text-align: center;
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+
+    .cta-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    }
+
+    .cta-card h3 {
+      margin: 0 0 0.75rem 0;
+      font-size: 1.25rem;
+      color: var(--witch-moon);
+    }
+
+    .cta-card p {
+      margin: 0 0 1.25rem 0;
+      font-size: 0.95rem;
+      line-height: 1.5;
+      color: var(--witch-lavender);
+    }
+
+    .btn {
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      font-size: 1rem;
+      transition: all 0.3s;
+    }
+
+    .btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    .btn-discord {
+      background: #5865F2;
+      color: white;
+    }
+
+    .btn-discord:hover {
+      background: #4752C4;
+    }
+
+    .btn-donate {
+      background: var(--witch-rose);
+      color: var(--witch-moon);
+    }
+
+    .btn-donate:hover {
+      background: var(--witch-mauve);
+      color: var(--witch-purple);
+    }
+
+    .footer-bottom {
+      text-align: center;
+      padding-top: 1.5rem;
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .footer-bottom p {
+      margin: 0;
+      font-size: 0.9rem;
+      color: var(--witch-lavender);
+    }
+  `]
+})
+export class FooterComponent {
+  currentYear = new Date().getFullYear();
+}
@@ -0,0 +1,42 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+
+declare global {
+  interface Window {
+    plausible?: (event: string, options?: { props?: Record<string, string> }) => void;
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnalyticsService {
+  private router = inject(Router);
+
+  initialise(): void {
+    this.router.events.pipe(
+      filter((event): event is NavigationEnd => event instanceof NavigationEnd)
+    ).subscribe((event) => {
+      this.trackPageView(event.urlAfterRedirects);
+    });
+  }
+
+  private trackPageView(path: string): void {
+    if (window.plausible) {
+      window.plausible('pageview', {
+        props: {
+          domain: 'library.nhcarrigan.com',
+          page: 'Naomi\'s Library',
+          path: path || '/'
+        }
+      });
+    }
+  }
+}
@@ -2,10 +2,22 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>frontend</title>
+    <title>Naomi's Library</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <script defer src="https://analytics.nhcarrigan.com/js/pa-YUXAn1vhhRttySUAw_LMN.js"></script>
+    <script>
+      window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
+      plausible.init({
+        customProperties: {
+          domain: "library.nhcarrigan.com",
+          page: "Naomi's Library",
+          path: "/",
+        },
+      });
+    </script>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3569924701890974" crossorigin="anonymous"></script>
  </head>
  <body>
    <app-root></app-root>