add goatcounter, update head meta

deno.json

···
   "imports": {
     "$lexicon/": "./__generated__/",
     "@atproto/syntax": "npm:@atproto/syntax@^0.4.0",
-    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.8",
+    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.9",
     "@gfx/canvas": "jsr:@gfx/canvas@^0.5.8",
     "@std/path": "jsr:@std/path@^1.0.9",
     "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.4",

deno.lock

···
   "version": "4",
   "specifiers": {
     "jsr:@bigmoves/atproto-oauth-client@0.1": "0.1.0",
-    "jsr:@bigmoves/bff@0.3.0-beta.8": "0.3.0-beta.8",
+    "jsr:@bigmoves/bff@0.3.0-beta.9": "0.3.0-beta.9",
     "jsr:@denosaurs/plug@1": "1.0.5",
     "jsr:@denosaurs/plug@1.0.5": "1.0.5",
     "jsr:@gfx/canvas@~0.5.8": "0.5.8",
     "jsr:@std/assert@0.214": "0.214.0",
     "jsr:@std/assert@0.217": "0.217.0",
-    "jsr:@std/assert@^1.0.12": "1.0.13",
+    "jsr:@std/assert@^1.0.13": "1.0.13",
     "jsr:@std/cache@0.2": "0.2.0",
     "jsr:@std/cli@^1.0.17": "1.0.17",
     "jsr:@std/encoding@0.214": "0.214.0",
···
         "npm:jose"
       ]
     },
-    "@bigmoves/bff@0.3.0-beta.8": {
-      "integrity": "9f4193d02b9ff1a16f600fbb1ad5323c75285848457429172914a2b797787055",
+    "@bigmoves/bff@0.3.0-beta.9": {
+      "integrity": "8d2f37eeb3f006670255e2c4e99e4556f686bc8c2ea009287835666cc9c0452b",
       "dependencies": [
         "jsr:@bigmoves/atproto-oauth-client",
-        "jsr:@std/assert@^1.0.12",
+        "jsr:@std/assert@^1.0.13",
         "jsr:@std/cache",
         "jsr:@std/http",
         "jsr:@std/path@^1.0.8",
···
         "npm:multiformats@^13.3.2",
         "npm:preact",
         "npm:preact-render-to-string",
-        "npm:sharp",
         "npm:tailwind-merge"
       ]
     },
···
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bigmoves/bff@0.3.0-beta.8",
+      "jsr:@bigmoves/bff@0.3.0-beta.9",
       "jsr:@gfx/canvas@~0.5.8",
       "jsr:@std/path@^1.0.9",
       "npm:@atproto/syntax@0.4",

fly.toml

···
   BFF_LEXICON_DIR = './__generated__'
   BFF_PORT = '8081'
   BFF_PUBLIC_URL = 'https://grain.social'
+  GOATCOUNTER_URL = 'https://grain.goatcounter.com/count'
 
 [[mounts]]
   source = "litefs"

main.tsx

···
   Layout,
   Login,
   Meta,
-  type MetaProps,
+  type MetaDescriptor,
   Textarea,
 } from "@bigmoves/bff/components";
 import { createCanvas, Image } from "@gfx/canvas";
···
 import { formatDistanceStrict } from "date-fns";
 import { wrap } from "popmotion";
 import { ComponentChildren, JSX, VNode } from "preact";
+
+const PUBLIC_URL = Deno.env.get("BFF_PUBLIC_URL") ?? "http://localhost:8080";
+const GOATCOUNTER_URL = Deno.env.get("GOATCOUNTER_URL");
 
 let cssContentHash: string = "";
 
···
     const cssFileContent = await Deno.readFile(
       join(Deno.cwd(), "static", "styles.css"),
     );
-    const hashBuffer = await crypto.subtle.digest(
-      "SHA-256",
-      cssFileContent,
-    );
+    const hashBuffer = await crypto.subtle.digest("SHA-256", cssFileContent);
     cssContentHash = Array.from(new Uint8Array(hashBuffer))
       .map((b) => b.toString(16).padStart(2, "0"))
       .join("");
···
     }),
     route("/", (_req, _params, ctx) => {
       const items = getTimeline(ctx);
+      ctx.state.meta = getPageMeta("");
       return ctx.render(<Timeline items={items} />);
     }),
     route("/profile/:handle", (req, params, ctx) => {
···
       if (!actor) return ctx.next();
       const profile = getActorProfile(actor.did, ctx);
       if (!profile) return ctx.next();
+      ctx.state.meta = getPageMeta(profileLink(handle));
       if (tab) {
         return ctx.html(
           <ProfilePage
···
         favs = getGalleryFavs(gallery.uri, ctx);
       }
       if (!gallery) return ctx.next();
-      ctx.state.meta = getGalleryMeta(gallery);
+      ctx.state.meta = [
+        ...getPageMeta(galleryLink(handle, rkey)),
+        ...getGalleryMeta(gallery),
+      ];
       ctx.state.scripts = ["photo_dialog.js", "masonry.js"];
       return ctx.render(
         <GalleryPage favs={favs} gallery={gallery} currentUserDid={did} />,
···
     route("/upload", (_req, _params, ctx) => {
       requireAuth(ctx);
       const photos = getActorPhotos(ctx.currentUser.did, ctx);
-      return ctx.render(
-        <UploadPage photos={photos} />,
-      );
+      ctx.state.meta = getPageMeta("/upload");
+      return ctx.render(<UploadPage photos={photos} />);
     }),
     route("/dialogs/gallery/new", (_req, _params, ctx) => {
       requireAuth(ctx);
-      return ctx.html(
-        <GalleryCreateEditDialog />,
-      );
+      return ctx.html(<GalleryCreateEditDialog />);
     }),
     route("/dialogs/gallery/:rkey", (_req, params, ctx) => {
       requireAuth(ctx);
       const handle = ctx.currentUser.handle;
       const rkey = params.rkey;
       const gallery = getGallery(handle, rkey, ctx);
-      return ctx.html(
-        <GalleryCreateEditDialog gallery={gallery} />,
-      );
+      return ctx.html(<GalleryCreateEditDialog gallery={gallery} />);
     }),
     route("/onboard", (_req, _params, ctx) => {
       requireAuth(ctx);
···
       const image = gallery.items.filter(isPhotoView).find((item) => {
         return item.cid === imageCid;
       });
-      const imageAtIndex = gallery.items.filter(isPhotoView).findIndex(
-        (image) => {
+      const imageAtIndex = gallery.items
+        .filter(isPhotoView)
+        .findIndex((image) => {
           return image.cid === imageCid;
-        },
-      );
+        });
       const next = wrap(0, gallery.items.length, imageAtIndex + 1);
       const prev = wrap(0, gallery.items.length, imageAtIndex - 1);
       if (!image) return ctx.next();
···
         const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
         if (!gallery || !photo) return ctx.next();
         if (
-          gallery.items?.filter(isPhotoView).some((item) =>
-            item.uri === photoUri
-          )
+          gallery.items
+            ?.filter(isPhotoView)
+            .some((item) => item.uri === photoUri)
         ) {
           return new Response(null, { status: 500 });
         }
-        await ctx.createRecord<Gallery>(
-          "social.grain.gallery.item",
-          {
-            gallery: galleryUri,
-            item: photoUri,
-            createdAt: new Date().toISOString(),
-          },
-        );
+        await ctx.createRecord<Gallery>("social.grain.gallery.item", {
+          gallery: galleryUri,
+          item: photoUri,
+          createdAt: new Date().toISOString(),
+        });
         gallery.items = [
           ...(gallery.items ?? []),
           photoToView(photo.did, photo),
···
         if (!galleryRkey || !photoRkey) return ctx.next();
         const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
         if (!photo) return ctx.next();
-        const { items: [item] } = ctx.indexService.getRecords<
-          WithBffMeta<GalleryItem>
-        >(
+        const {
+          items: [item],
+        } = ctx.indexService.getRecords<WithBffMeta<GalleryItem>>(
           "social.grain.gallery.item",
           {
             where: [
···
           },
         );
         if (!item) return ctx.next();
-        await ctx.deleteRecord(
-          item.uri,
-        );
+        await ctx.deleteRecord(item.uri);
         const gallery = getGallery(ctx.currentUser.did, galleryRkey, ctx);
         if (!gallery) return ctx.next();
         return ctx.html(
···
         );
       }
 
-      await ctx.createRecord<WithBffMeta<Favorite>>(
-        "social.grain.favorite",
-        {
-          subject: galleryUri,
-          createdAt: new Date().toISOString(),
-        },
-      );
+      await ctx.createRecord<WithBffMeta<Favorite>>("social.grain.favorite", {
+        subject: galleryUri,
+        createdAt: new Date().toISOString(),
+      });
 
       const favs = getGalleryFavs(galleryUri, ctx);
 
···
 type State = {
   profile?: ProfileView;
   scripts?: string[];
-  meta?: MetaProps[];
+  meta?: MetaDescriptor[];
 };
 
 function readFileAsDataURL(file: File): Promise<string> {
···
   ctx: BffContext,
   galleries: WithBffMeta<Gallery>[],
 ): Map<string, WithBffMeta<Photo>[]> {
-  const galleryUris = galleries.map((gallery) =>
-    `at://${gallery.did}/social.grain.gallery/${new AtUri(gallery.uri).rkey}`
+  const galleryUris = galleries.map(
+    (gallery) =>
+      `at://${gallery.did}/social.grain.gallery/${new AtUri(gallery.uri).rkey}`,
   );
 
   if (galleryUris.length === 0) return new Map();
···
   }
   const { items: galleries } = ctx.indexService.getRecords<
     WithBffMeta<Gallery>
-  >(
-    "social.grain.gallery",
-    {
-      where: [{ field: "did", equals: did }],
-      orderBy: { field: "createdAt", direction: "desc" },
-    },
-  );
+  >("social.grain.gallery", {
+    where: [{ field: "did", equals: did }],
+    orderBy: { field: "createdAt", direction: "desc" },
+  });
   const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
   const creator = getActorProfile(did, ctx);
   if (!creator) return [];
···
   return results.items;
 }
 
-function getGalleryMeta(gallery: GalleryView): MetaProps[] {
+function getPageMeta(pageUrl: string): MetaDescriptor[] {
   return [
-    { property: "og:type", content: "website" },
-    { property: "og:site_name", content: "Atproto Image Gallery" },
+    {
+      tagName: "link",
+      property: "canonical",
+      href: `${PUBLIC_URL}${pageUrl}`,
+    },
+    { property: "og:site_name", content: "Grain Social" },
+  ];
+}
+
+function getGalleryMeta(gallery: GalleryView): MetaDescriptor[] {
+  return [
+    // { property: "og:type", content: "website" },
     {
       property: "og:url",
-      content: `${
-        Deno.env.get("BFF_PUBLIC_URL") ?? "http://localhost:8080"
-      }/profile/${gallery.creator.handle}/${new AtUri(gallery.uri).rkey}`,
+      content: `${PUBLIC_URL}/profile/${gallery.creator.handle}/${
+        new AtUri(gallery.uri).rkey
+      }`,
     },
     { property: "og:title", content: (gallery.record as Gallery).title },
     {
···
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <Meta meta={props.ctx.state.meta} />
+        {GOATCOUNTER_URL
+          ? (
+            <script
+              data-goatcounter={GOATCOUNTER_URL}
+              async
+              src="//gc.zgo.at/count.js"
+            />
+          )
+          : null}
         <script src="https://unpkg.com/htmx.org@1.9.10" />
         <script src="https://unpkg.com/hyperscript.org@0.9.14" />
         <style dangerouslySetInnerHTML={{ __html: CSS }} />
···
       <body class="h-full w-full dark:bg-zinc-950 dark:text-white">
         <Layout id="layout" class="dark:border-zinc-800">
           <Layout.Nav
-            title={
+            heading={
               <h1 class="font-['Jersey_20'] text-4xl text-zinc-900 dark:text-white">
                 grain
                 <sub class="bottom-[0.75rem] text-[1rem]">beta</sub>
···
           ? (
             <ul class="space-y-4 relative">
               {timelineItems.length
-                ? timelineItems.map((item) => (
-                  <TimelineItem item={item} key={item.itemUri} />
-                ))
+                ? (
+                  timelineItems.map((item) => (
+                    <TimelineItem item={item} key={item.itemUri} />
+                  ))
+                )
                 : <li>No activity yet.</li>}
             </ul>
           )
···
         _="on load or htmx:afterSettle call computeMasonry()"
       >
         {gallery.items?.filter(isPhotoView)?.length
-          ? gallery?.items?.filter(isPhotoView)?.map((photo) => (
-            <PhotoButton
-              key={photo.cid}
-              photo={photo}
-              gallery={gallery}
-              isCreator={isCreator}
-              isLoggedIn={isLoggedIn}
-            />
-          ))
+          ? gallery?.items
+            ?.filter(isPhotoView)
+            ?.map((photo) => (
+              <PhotoButton
+                key={photo.cid}
+                photo={photo}
+                gallery={gallery}
+                isCreator={isCreator}
+                isLoggedIn={isLoggedIn}
+              />
+            ))
           : null}
       </div>
     </div>
   );
 }
 
-function PhotoButton({ photo, gallery, isCreator, isLoggedIn }: Readonly<{
+function PhotoButton({
+  photo,
+  gallery,
+  isCreator,
+  isLoggedIn,
+}: Readonly<{
   photo: PhotoView;
   gallery: GalleryView;
   isCreator: boolean;
···
             <Button type="submit" variant="primary" class="w-full">
               Save
             </Button>
-            <Dialog.Close class="w-full">
-              Cancel
-            </Dialog.Close>
+            <Dialog.Close class="w-full">Cancel</Dialog.Close>
           </div>
         </form>
       </Dialog.Content>
···
           ))}
         </div>
         <div class="w-full flex flex-col gap-2 mt-2">
-          <Dialog.Close class="w-full">
-            Close
-          </Dialog.Close>
+          <Dialog.Close class="w-full">Close</Dialog.Close>
         </div>
       </Dialog.Content>
     </Dialog>
···
     cid: record.cid,
     creator,
     record,
-    items: items?.map((item) => itemToView(record.did, item)).filter(
-      isPhotoView,
-    ),
+    items: items
+      ?.map((item) => itemToView(record.did, item))
+      .filter(isPhotoView),
     indexedAt: record.indexedAt,
   };
 }
 
 function itemToView(
   did: string,
-  item: WithBffMeta<Photo> | {
-    $type: string;
-  },
+  item:
+    | WithBffMeta<Photo>
+    | {
+      $type: string;
+    },
 ): Un$Typed<PhotoView> | undefined {
   if (isPhoto(item)) {
     return photoToView(did, item);
···
     if (!uploadId) return ctx.next();
     const meta = ctx.blobMetaCache.get(uploadId);
     if (!meta?.dataUrl || !meta?.blobRef) return ctx.next();
-    const photoUri = await ctx.createRecord<Photo>(
-      "social.grain.photo",
-      {
-        photo: meta.blobRef,
-        aspectRatio: meta.dimensions?.width && meta.dimensions?.height
-          ? {
-            width: meta.dimensions.width,
-            height: meta.dimensions.height,
-          }
-          : undefined,
-        alt: "",
-        createdAt: new Date().toISOString(),
-      },
-    );
-    return ctx.html(
-      cb({ dataUrl: meta.dataUrl, uri: photoUri }),
-    );
+    const photoUri = await ctx.createRecord<Photo>("social.grain.photo", {
+      photo: meta.blobRef,
+      aspectRatio: meta.dimensions?.width && meta.dimensions?.height
+        ? {
+          width: meta.dimensions.width,
+          height: meta.dimensions.height,
+        }
+        : undefined,
+      alt: "",
+      createdAt: new Date().toISOString(),
+    });
+    return ctx.html(cb({ dataUrl: meta.dataUrl, uri: photoUri }));
   };
 }
 
···
       `/actions/photo/upload-done`,
       ["GET"],
       photoUploadDone(({ dataUrl, uri }) => (
-        <PhotoPreview
-          src={dataUrl}
-          uri={uri}
-        />
+        <PhotoPreview src={dataUrl} uri={uri} />
       )),
     ),
   ];

static/styles.css

···
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-sky-500: oklch(68.5% 0.169 237.323);
-    --color-slate-800: oklch(27.9% 0.041 260.031);
-    --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
     --color-zinc-500: oklch(55.2% 0.016 285.938);