feat: adding view counter (#47)

* update og route to decrease size

* adding view count

* update pnpm lockfile

* update package.json for reach and react-dom

* update Typescript

* remove unused comments

* Update environment variables in turbo.json

Reference: https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables

.gitignore

@@ -45,4 +45,5 @@ apps/**/dist
 .dccache
 
 # ENV
-.env
+.env
+.vercel

apps/somai.me/app/essay/[slug]/counter.tsx

@@ -0,0 +1,25 @@
+import { kv } from "@vercel/kv";
+import React from "react";
+
+import { Text } from "@thugga/ui";
+
+async function recordView(slug: string) {
+  // Get the formatter
+  const formatter = Intl.NumberFormat("en", { notation: "compact" });
+
+  // Create keys
+  const viewKey = ["pageviews", "essays", slug].join(":");
+
+  await kv.incr(viewKey);
+  const viewCount = (await kv.get<number>(viewKey)) ?? 0;
+  return {
+    message: "View Added",
+    status: 202,
+    views: formatter.format(viewCount),
+  };
+}
+
+export default async function ViewsCounter({ essay }: { essay: string }) {
+  const views = await recordView(essay);
+  return <Text variant="small">{views?.views || 0} views</Text>;
+}

apps/somai.me/app/essay/[slug]/section.details.tsx

@@ -2,6 +2,8 @@ import { PropsWithChildren } from "react";
 
 import { Stack, Text } from "@thugga/ui";
 
+import ViewsCounter from "./counter";
+
 import { Post } from "../../../lib/essays";
 
 export interface DetailsSectionProps {
@@ -13,20 +15,35 @@ export default function DetailsSection(
 ) {
   const { post } = props;
   return (
-    <Stack
-      align="flex-start"
-      direction={{
-        desktop: "row",
-        tablet: "row",
-        mobile: "column",
-      }}
-      justify="space-between"
-      space="200"
-    >
-      <Text variant="small">Melek Somai / {post.meta.publishedAt.text}</Text>
-      <Text variant="small">
-        {post.meta.readingTime.words} words / {post.meta.readingTime.text}
-      </Text>
+    <Stack space="100">
+      <Stack
+        align="flex-start"
+        direction={{
+          desktop: "row",
+          tablet: "row",
+          mobile: "column",
+        }}
+        justify="space-between"
+        space="200"
+      >
+        <Text variant="small">{post.meta.publishedAt.text}</Text>
+        <Text variant="small">
+          {post.meta.readingTime.words} words / {post.meta.readingTime.text}
+        </Text>
+      </Stack>
+      <Stack
+        align="flex-start"
+        direction={{
+          desktop: "row",
+          tablet: "row",
+          mobile: "column",
+        }}
+        justify="space-between"
+        space="200"
+      >
+        <Text variant="small">By Melek Somai</Text>
+        <ViewsCounter essay={post.meta.slug} />
+      </Stack>
     </Stack>
   );
 }

apps/somai.me/app/essays/page.tsx

@@ -23,7 +23,6 @@ export default async function EssayPage() {
         A space to share thoughts and ideas that are often reflections on my
         current research.
       </HeroSection>
-      {/* @ts-expect-error Server Component */}
       <EssaysSection />
     </>
   );

apps/somai.me/app/og/route.tsx

@@ -10,10 +10,6 @@ const size = {
 };
 
 // Font
-const interBold = fetch(
-  new URL("../../public/fonts/Inter-Bold.ttf", import.meta.url),
-).then((res) => res.arrayBuffer());
-
 const interRegular = fetch(
   new URL("../../public/fonts/Inter-Regular.ttf", import.meta.url),
 ).then((res) => res.arrayBuffer());
@@ -68,12 +64,6 @@ export async function GET(request: Request) {
         // size config to also set the ImageResponse's width and height.
         ...size,
         fonts: [
-          {
-            name: "Inter",
-            data: await interBold,
-            style: "normal",
-            weight: 700,
-          },
           {
             name: "Inter",
             data: await interRegular,

apps/somai.me/app/page.tsx

@@ -13,9 +13,7 @@ export default function MainPage() {
         intersection of Healthcare Informatics, Data Science, and Product
         Engineering.
       </HeroSection>
-      {/* @ts-expect-error Server Component */}
       <EssaysSection />
-      {/* @ts-expect-error Server Component */}
       <PapersSection />
     </Stack>
   );

apps/somai.me/app/paper/[slug]/page.tsx

@@ -23,7 +23,6 @@ export default function PaperPage({ params }: Props) {
 
   return (
     <Stack align="flex-start" space="800">
-      {/* @ts-expect-error Server Component */}
       <Title paper={publication} />
       <Text variant="small">
         {publication.publisher} / {publication.publishedAt.text}

apps/somai.me/app/papers/page.tsx

@@ -24,9 +24,7 @@ export default async function PapersPage() {
         Research in areas ranging from Clinical Computing, Patient Remote
         Monitoring, Neuro-Epidemiology, to AI and Machine Learning.
       </HeroSection>
-      {/* @ts-expect-error Server Component */}
       <MostPopularSection />
-      {/* @ts-expect-error Server Component */}
       <PublicationsSection />
     </>
   );

apps/somai.me/package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "@markdoc/markdoc": "0.4.0",
+    "@phosphor-icons/react": "2.1.7",
     "@radix-ui/react-icons": "1.1.1",
     "@thugga/markdoc": "workspace:*",
     "@thugga/ui": "workspace:*",
     "@vanilla-extract/css": "1.15.3",
     "@vanilla-extract/next-plugin": "2.4.3",
     "@vercel/analytics": "1.3.1",
+    "@vercel/kv": "2.0.0",
     "@vercel/og": "0.6.2",
     "dayjs": "1.11.12",
     "globby": "14.0.2",
@@ -24,20 +26,20 @@
     "next": "14.2.5",
     "next-seo": "6.5.0",
     "next-themes": "0.2.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "react-icons": "5.3.0",
     "reading-time": "1.5.0",
     "swr": "2.2.5"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
     "@types/node": "22.2.0",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.0",
     "eslint": "8.57.0",
     "eslint-config-thugga": "workspace:*",
     "tsconfig": "workspace:*",
-    "typescript": "4.9.5",
+    "typescript": "5.1.3",
     "webpack": "5.93.0"
   },
   "private": true

package.json

@@ -22,10 +22,10 @@
     "npm": ">=7.0.0",
     "node": ">=20.0.0"
   },
+  "packageManager": "[email protected]",
   "private": true,
   "workspaces": [
     "apps/*",
     "packages/*"
-  ],
-  "packageManager": "[email protected]"
+  ]
 }

packages/academic/package.json

@@ -24,6 +24,6 @@
     "eslint-config-thugga": "workspace:*",
     "tsconfig": "workspace:*",
     "tsx": "3.12.1",
-    "typescript": "4.9.5"
+    "typescript": "5.1.3"
   }
 }

packages/eslint-config/package.json

@@ -23,7 +23,7 @@
     "@types/node": "22.2.0",
     "eslint": "8.57.0",
     "prettier": "3.3.3",
-    "typescript": "4.9.5"
+    "typescript": "5.1.3"
   },
   "publishConfig": {
     "access": "public"

packages/markdoc/package.json

@@ -10,23 +10,23 @@
   "peerDependencies": {
     "@markdoc/markdoc": "0.4.0",
     "@thugga/ui": "workspace:*",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.0"
   },
   "dependencies": {
     "prism-react-renderer": "1.3.3"
   },
   "devDependencies": {
     "@markdoc/markdoc": "0.4.0",
     "@thugga/ui": "workspace:*",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.0",
     "eslint": "8.57.0",
     "eslint-config-thugga": "workspace:*",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "tsconfig": "workspace:*",
     "tsup": "5.10.1",
-    "typescript": "4.9.5"
+    "typescript": "5.1.3"
   },
   "types": "./src/index.tsx"
 }

packages/ui/package.json

@@ -10,11 +10,11 @@
   "peerDependencies": {
     "@stitches/react": "1.2.8",
     "next": "14.2.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "dependencies": {
-    "@phosphor-icons/react": "2.0.9",
+    "@phosphor-icons/react": "2.1.7",
     "@radix-ui/colors": "0.1.8",
     "@radix-ui/react-avatar": "1.0.2",
     "@radix-ui/react-dialog": "1.0.4",
@@ -45,15 +45,15 @@
   },
   "devDependencies": {
     "@types/lodash": "4.14.191",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.0",
     "eslint": "8.57.0",
     "eslint-config-thugga": "workspace:*",
     "next": "14.2.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "tsconfig": "workspace:*",
-    "typescript": "4.9.5",
+    "typescript": "5.1.3",
     "webpack": "5.93.0"
   },
   "types": "./src/index.ts"