feat: Add view counts to UI

kiosion · Nov 6, 2023 · fd1fc4e · fd1fc4e
1 parent 02fc862
commit fd1fc4e
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/svelte-app/src/components/document/content/common/header.svelte b/svelte-app/src/components/document/content/common/header.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { derived } from 'svelte/store';
+
   import { formatDate, getReadingTime } from '$helpers/date';
   import { getTotalWords } from '$helpers/pt';
   import { currentLang, linkTo, t } from '$i18n';
@@ -19,7 +21,23 @@
     images: ProjectImage[] | undefined,
     model = data._type;
 
-  const readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[]));
+  const readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[])),
+    parsedViews = derived(currentLang, (currentLang) => {
+      if (!data.views || data.views < 1) {
+        return 0;
+      }
+
+      try {
+        const parser = new Intl.NumberFormat(currentLang, {
+          notation: 'compact',
+          compactDisplay: 'short'
+        });
+
+        return parser.format(data.views);
+      } catch {
+        return data.views;
+      }
+    });
 
   $: date = formatDate(data.date, 'full', $currentLang);
 </script>
@@ -43,6 +61,12 @@
               <p class="cursor-default font-mono text-base">
                 {$t('{length} min read', { length: Math.floor(readingTime / 60) })}
               </p>
+              {#if data.views}
+                <BulletPoint />
+                <p class="cursor-default font-mono text-base">
+                  {$t('{views} views', { views: $parsedViews })}
+                </p>
+              {/if}
             {:else if data.github}
               <BulletPoint />
               <span class="font-mono text-base">
@@ -53,7 +77,7 @@
             {/if}
           </div>
           <ArrowButton
-            class="focusOutline-sm -mb-1 flex-1 whitespace-nowrap rounded-sm text-right"
+            class="focusOutline-sm -mb-1 hidden flex-1 whitespace-nowrap rounded-sm text-right sm:block"
             href={model === 'post' ? $linkTo('/blog') : $linkTo('/work')}
             preload
           >

diff --git a/svelte-app/src/languages/en.json b/svelte-app/src/languages/en.json
@@ -117,5 +117,6 @@
   "to": "to",
   "what I'm up to right now": "what I'm up to right now",
   "{duration} ago": "{duration} ago",
-  "{length} min read": "{length} min read"
+  "{length} min read": "{length} min read",
+  "{views} views": "{views} views"
 }
diff --git a/svelte-app/src/languages/fr.json b/svelte-app/src/languages/fr.json
@@ -117,5 +117,6 @@
   "to": "à",
   "what I'm up to right now": "ce que je fais a présent",
   "{duration} ago": "il y a {duration}",
-  "{length} min read": "{length} minute de lecture"
+  "{length} min read": "{length} minute de lecture",
+  "{views} views": "{views} vues"
 }
diff --git a/svelte-app/src/lib/store.ts b/svelte-app/src/lib/store.ts
@@ -37,7 +37,7 @@ type QueryResponse<T> =
     }
   | undefined;
 
-const EXP_TIME = 1000 * 60 * 30; // 30 minutes
+const EXP_TIME = 1000 * 60 * 15; // 15 minutes
 
 const documentCache: Record<
   string,

diff --git a/svelte-app/types/app/documents/index.d.ts b/svelte-app/types/app/documents/index.d.ts
@@ -6,6 +6,7 @@ export interface Document extends SanityAsset {
   };
   body: PTBlock[];
   date: string;
+  views?: number;
 }
 
 export interface DocumentTags extends SanityAsset {