Add cookie notice

grammyjs · Mar 26, 2024 · 3d6081d · 3d6081d
1 parent 03db8da
commit 3d6081d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 4 deletions.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -20,6 +20,7 @@ import * as $webhook_manager from "./routes/webhook-manager.tsx";
 import * as $Alert from "./islands/Alert.tsx";
 import * as $Confirmation from "./islands/Confirmation.tsx";
 import * as $ConnectivityTest from "./islands/ConnectivityTest.tsx";
+import * as $CookieNotice from "./islands/CookieNotice.tsx";
 import * as $Dots from "./islands/Dots.tsx";
 import * as $FileIdAnalyzer from "./islands/FileIdAnalyzer.tsx";
 import * as $FilterQueryBrowser from "./islands/FilterQueryBrowser.tsx";
@@ -55,6 +56,7 @@ const manifest = {
     "./islands/Alert.tsx": $Alert,
     "./islands/Confirmation.tsx": $Confirmation,
     "./islands/ConnectivityTest.tsx": $ConnectivityTest,
+    "./islands/CookieNotice.tsx": $CookieNotice,
     "./islands/Dots.tsx": $Dots,
     "./islands/FileIdAnalyzer.tsx": $FileIdAnalyzer,
     "./islands/FilterQueryBrowser.tsx": $FilterQueryBrowser,

diff --git a/islands/CookieNotice.tsx b/islands/CookieNotice.tsx
@@ -0,0 +1,30 @@
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+import { storedBoolean } from "../lib/stored_signals.tsx";
+
+const hide = storedBoolean(false, "hide-cookie-notice");
+
+export function CookieNotice() {
+  if (!IS_BROWSER) {
+    return null;
+  }
+  if (hide.value) {
+    return null;
+  }
+  return (
+    <div class="bg-foreground-transparent fixed bottom-0 left-0 backdrop-blur-2xl w-full p-5">
+      <div class="max-w-[900px] w-full mx-auto gap-5 text-sm flex flex-col justify-center sm:(flex-row items-center justify-between)">
+        <div>
+          We make use of cookies to collect anonymous usage statistics that help
+          us improve the project.
+        </div>
+        <button
+          onClick={() => hide.value = true}
+          class="text-grammy self-end xl:self-auto"
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -1,4 +1,5 @@
 import { type PageProps } from "$fresh/server.ts";
+import { CookieNotice } from "../islands/CookieNotice.tsx";
 import { cn } from "../lib/cn.ts";
 
 const metricsSnippet = Deno.env.get("METRICS_SNIPPET");
@@ -26,18 +27,17 @@ export default function App({ Component, url }: PageProps) {
       <body
         class={cn(
           "font-inter bg-background text-foreground select-none",
-          layout && "p-5 xl:p-10",
-        )} // f-client-nav
+          layout && "p-5",
+        )}
       >
-        {/* <Partial name="body"> */}
         {layout
           ? (
             <main class="mx-auto w-full max-w-[900px] flex flex-col">
               <Component />
             </main>
           )
           : <Component />}
-        {/* </Partial> */}
+        {metricsSnippet && <CookieNotice />}
       </body>
     </html>
   );

diff --git a/static/main.css b/static/main.css
@@ -1,5 +1,6 @@
 :root {
   --background: #fff;
+  --background-transparent: #fff1;
   --foreground: #000;
   --foreground-transparent: #0001;
   --grammy: #009dca;
@@ -12,6 +13,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #090909;
+    --background-transparent: #09090911;
     --foreground: #fff;
     --foreground-transparent: #fff1;
     --grammy: #009dca;

diff --git a/twind.config.ts b/twind.config.ts
@@ -13,6 +13,7 @@ export default {
         },
         colors: {
           background: "var(--background)",
+          "background-transparent": "var(--background-transparent)",
           foreground: "var(--foreground)",
           "foreground-transparent": "var(--foreground-transparent)",
           grammy: "var(--grammy)",