feat(client): add astro db token to Dockerfile, add db seed, remove s…

…velte ZoomImage reference

* migrates the old Svelte-based ZoomImage components to the new React-based one.
* Updates Dockerfile to support astro db token

Dockerfile

@@ -3,15 +3,13 @@
 FROM node:21.6.1-alpine AS runtime
 WORKDIR /app
 
-ARG TURSO_DB_URL
-ARG TURSO_DB_AUTH_TOKEN
-
 COPY . .
 
 SHELL ["/bin/ash", "-o", "pipefail", "-c"]
 RUN --mount=type=secret,id=env,dst=/etc/secrets/.env \
       RENDER_TOKEN=$(grep RENDER_TOKEN /etc/secrets/.env | cut -d '=' -f 2) \
-      export RENDER_TOKEN\
+      ASTRO_STUDIO_APP_TOKEN=$(grep ASTRO_STUDIO_APP_TOKEN /etc/secrets/.env | cut -d '=' -f 2) \
+      export RENDER_TOKEN && export ASTRO_STUDIO_APP_TOKEN \
       && cp /etc/secrets/.env .env \
       && npm install \
       && npm run build

db/seed.ts

@@ -1,6 +1,17 @@
-import { db } from 'astro:db';
+import { db, Metric } from "astro:db";
 
 // https://astro.build/db/seed
 export default async function seed() {
-	// TODO
+  await db.insert(Metric).values([
+    {
+      metricType: "pageview",
+      value: 3,
+      postSlug: "neovim-git-commit-review-gemini-gpt4o",
+    },
+    {
+      metricType: "pageview",
+      value: 1,
+      postSlug: "neovim-git-commit-review-gemini-gpt4o",
+    },
+  ]);
 }

src/content/blog/eslint-allow-underscore-prefix.mdx

@@ -13,7 +13,6 @@ tags: ["eslint", "react", "typescript", "javascript"]
 
 import { Code } from "astro:components";
 import { Image } from "astro:assets";
-import ZoomImage from "~components/ZoomImage.svelte";
 import image1 from "./assets/screenshots/nvim-no-unused-vars2.png";
 
 Ever encounter this error?

src/content/blog/neovim-spellcheck.mdx

@@ -13,14 +13,14 @@ tags: ["neovim", "quick tips"]
 ---
 
 import { Image } from "astro:assets";
-import ZoomImage from "~components/ZoomImage.svelte";
+import ZoomImage from "~components/react/ZoomImage";
 import image1 from "./assets/screenshots/neovim-spellfile.png";
 import valeDiagnosticsImg from "./assets/vale-diagnostics-sample_qgdcfz_c_pad,h_300,e_sharpen.png";
 import Admonition from "~components/Admonition.astro";
 
 <Admonition type="tip" isQuote={false} title="Note" date={"Apr 11, 2024"}>
   After using the built-in spellchecker for a while, I decided to try one that
-  would throw less false positives and also help improve grammar and writing
+  would throw fewer false positives and also help improve grammar and writing
   style. I've added a new section at the bottom to set up Vale, which checks my
   writing for style and grammar. When I write these articles now, a combination
   of WriteGood and Vale rules help me create better content!
@@ -63,9 +63,9 @@ Here's how you do it:
    The file should now look like this:
 
    <ZoomImage
-     link={image1.src}
-     alt={"Full-size neovim screenshot"}
-     caption="Neovim screenshot showing a custom spelling suggestion file"
+     dialogId="screenshot1"
+     src={image1.src}
+     alt="Neovim screenshot showing a custom spelling suggestion file"
      client:load
    >
      <Image

src/pages/api/blog/views/[slug].json.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { and, count, db, eq, isDbError, Metric } from "astro:db";
+import { and, db, eq, isDbError, Metric, sum } from "astro:db";
 
 export const prerender = false;
 
@@ -13,13 +13,13 @@ export const GET: APIRoute = async ({ params, request }) => {
       postSlug: params.slug,
       value: 1,
     }).returning();
-    const metrics = await db.select({ count: count() }).from(Metric).where(
+    const metrics = await db.select({ value: sum(Metric.value) }).from(Metric).where(
       and(
         eq(Metric.postSlug, params.slug),
         eq(Metric.metricType, "pageview"),
       ),
     );
-    const numViews = metrics[0]?.count || 0;
+    const numViews = metrics[0]?.value || 0;
 
     return new Response(JSON.stringify({ numViews }), { status: 200 });
   } catch (e) {