Add unread notification widget (#60)

hackclub · Jan 30, 2025 · 065534e · 065534e
1 parent bfc6908
commit 065534e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 4 deletions.
diff --git a/components/Post.js b/components/Post.js
@@ -61,8 +61,6 @@ const PostContext = createContext()
 export function Author({ id, overrideText, sx, small }) {
   const author = authors[id]
 
-  console.log({ author })
-
   const width = small ? '24px' : '32px';
   const height = width;
 

diff --git a/pages/_app.js b/pages/_app.js
@@ -6,7 +6,7 @@ import theme from '@hackclub/theme'
 import { ThemeProvider } from 'theme-ui'
 import '../styles/global.css'
 import Head from 'next/head'
-import { QueryParamProvider } from 'use-query-params'
+import { QueryParamProvider } from 'use-query-params';
 import NextAdapterApp from 'next-query-params/app';
 
 export default class App extends NextApp {
@@ -20,7 +20,7 @@ export default class App extends NextApp {
             <link rel="shortcut icon" href="/favicon.png" />
             <link rel="favicon" href="/favicon.png" />
             <script defer data-domain="bank.engineering" src="https://plausible.io/js/script.js"></script>
-            <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
           </Head>
           <Component {...pageProps} />
         </ThemeProvider>

diff --git a/pages/index.js b/pages/index.js
@@ -32,6 +32,14 @@ function PostPreview({ post }) {
 export default function Home() {
   const [tag, setTag] = useQueryParam('tag', StringParam);
 
+  useEffect(() => {
+    if (!localStorage.getItem("initialVisit")) {
+      localStorage.setItem("initialVisit", Date.now());
+    }
+
+    localStorage.setItem("lastPostVisit", posts.toReversed()[0].meta.slug);
+  }, []);
+
   return (
     <>
       <Header />

diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
@@ -4,6 +4,7 @@ import { Author, PostTags } from '@/components/Post'
 import { posts } from '@/content/index'
 import { DisplayProvider } from '@/lib/display'
 import Head from 'next/head'
+import { useEffect } from 'react'
 import { Box, Card, Container, Flex, Grid, Heading, Link, Text } from 'theme-ui'
 
 const relatedPosts = post => {
@@ -41,6 +42,12 @@ export default function Post({ slug }) {
     timeZone: "Etc/UTC"
   });
 
+  useEffect(() => {
+    if (!localStorage.getItem("initialVisit")) {
+      localStorage.setItem("initialVisit", Date.now());
+    }
+  }, []);
+
   return (
     <DisplayProvider display="detail">
       <Head>

diff --git a/pages/widget.js b/pages/widget.js
@@ -0,0 +1,27 @@
+import { Badge } from 'theme-ui';
+import { posts } from '../content'
+import { useEffect, useState } from "react";
+
+export default function Widget() {
+    const [number, setNumber] = useState(0);
+
+    useEffect(() => {
+        if (!localStorage.getItem("initialVisit")) {
+            localStorage.setItem("initialVisit", Date.now());
+        }
+
+        const index = posts.map(post => post.meta.slug).toReversed().indexOf(localStorage.getItem("lastPostVisit"));
+        setNumber(index);
+    }, []);
+
+    return (
+        <a href="https://bank.engineering" target="_blank">
+            {number >= 1 ? (
+                <Badge variant="pill">{number}</Badge>
+            ) : (
+                <Badge variant="pill" bg="muted"></Badge>
+                // zero width space             ^
+            )}
+        </a>
+    )
+}