chore: setup like button

db/config.ts

@@ -1,6 +1,14 @@
-import { defineDb } from 'astro:db';
+import { defineDb, defineTable, column } from "astro:db";
+
+const Like = defineTable({
+  columns: {
+    date: column.date(),
+    fingerprint: column.text(),
+    page: column.text(),
+  },
+});
 
 // https://astro.build/db/config
 export default defineDb({
-  tables: {}
+  tables: { Like },
 });

package.json

@@ -16,6 +16,7 @@
     "@astrojs/react": "^3.1.0",
     "@astrojs/sitemap": "^3.1.1",
     "@astrojs/tailwind": "^5.1.0",
+    "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",

src/components/like-button.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import FingerprintJS from "@fingerprintjs/fingerprintjs";
+
+type Props = {
+  page: string;
+};
+
+const LikeButton = ({ page }: Props) => {
+  const [fpHash, setFpHash] = useState("");
+
+  // create and set the fingerprint as soon as
+  // the component mounts
+  useEffect(() => {
+    const setFp = async () => {
+      const fp = await FingerprintJS.load();
+
+      const { visitorId } = await fp.get();
+
+      setFpHash(visitorId);
+    };
+
+    setFp();
+  }, []);
+
+  return <div>LikeButton</div>;
+};
+
+export default LikeButton;