Add view counter

apps/timsexperiments/.env.local

@@ -1 +1,2 @@
-PUBLIC_VIEW_COUNTER_API=http://localhost:8787/views
+# PUBLIC_VIEW_COUNTER_API=http://localhost:8787/views
+PUBLIC_VIEW_COUNTER_API=https://dev.views.timsexperiments.foo/

apps/timsexperiments/package.json

@@ -27,7 +27,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@timsexperiments/theme": "^0.0.0",
-    "@timsexperiments/three-rubiks-cube": "^0.0.3",
+    "@timsexperiments/three-rubiks-cube": "^0.0.5",
     "@timsexperiments/views-client": "workspace:*",
     "@types/hast": "^3.0.4",
     "@types/react": "^18.2.47",

apps/timsexperiments/src/components/nav/Nav.astro

@@ -51,4 +51,4 @@ import { Home, Compass, FlaskConical, Mail, UserRoundPlus } from 'lucide-react';
   }
 </style>
 
-<script src="./nav.ts"></script>
+<script src="@/scripts/nav.ts"></script>

apps/timsexperiments/src/env.d.ts

@@ -1,3 +1,11 @@
 /// <reference path="../.astro/db-types.d.ts" />
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly PUBLIC_VIEW_COUNTER_API: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

apps/timsexperiments/src/layouts/BaseLayout.astro

@@ -39,5 +39,6 @@ const { title, description } = Astro?.props ?? {};
     <Toaster client:load />
     <ScrollTracker />
     <script src="@/scripts/animate.ts"></script>
+    <script src="@/scripts/count_view.ts"></script>
   </body>
 </html>

apps/timsexperiments/src/components/nav/nav.ts → apps/timsexperiments/src/scripts/nav.ts

@@ -36,11 +36,6 @@ const observer = new IntersectionObserver(
       if (entry.isIntersecting && !anyIntersecting) {
         anyIntersecting = true;
         navigator.classList.add('active');
-        console.log(
-          'scrolling the navigator for',
-          entry.target.id,
-          'into view'
-        );
         navigator.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       } else {
         navigator.classList.remove('active');

apps/view-counter/src/index.ts

@@ -4,9 +4,9 @@ import { ViewsHandler } from './views';
 /**
  * Welcome to Cloudflare Workers! This is your first worker.
  *
- * - Run `bun run dev` in your terminal to start a development server
+ * - Run `pnpm run dev` in your terminal to start a development server
  * - Open a browser tab at http://localhost:8787/ to see your worker in action
- * - Run `bun run deploy` to publish your worker
+ * - Run `pnpm run deploy` to publish your worker
  *
  * Learn more at https://developers.cloudflare.com/workers/
  */

apps/view-counter/src/views/index.ts

@@ -12,7 +12,6 @@ export class ViewsHandler implements RouteHandler {
 		env: Env,
 		baseHeaders: Record<string, string>,
 	) {
-		console.log(env.TURSO_AUTH_TOKEN);
 		const db = createDb({
 			url: env.TURSO_URL,
 			authToken: env.TURSO_AUTH_TOKEN,

packages/view-storage/package.json

@@ -3,16 +3,16 @@
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",
+  "dependencies": {
+    "@libsql/client": "^0.6.0",
+    "drizzle-orm": "^0.30.8"
+  },
   "devDependencies": {
     "@types/bun": "latest",
     "dotenv": "^16.4.5",
     "drizzle-kit": "^0.20.17"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
-  },
-  "dependencies": {
-    "@libsql/client": "^0.6.0",
-    "drizzle-orm": "^0.30.8"
   }
 }

packages/view-storage/src/client.ts

@@ -2,14 +2,14 @@ import { createClient } from "@libsql/client";
 import { drizzle } from "drizzle-orm/libsql";
 
 export type CreateDbOptions = {
+  authToken: string;
   url: string;
-  authToken?: string;
 };
 
-export function createDb({ url, authToken }: CreateDbOptions) {
+export function createDb({ authToken, url }: CreateDbOptions) {
   const client = createClient({
-    url,
     authToken,
+    url,
   });
   return drizzle(client);
 }