From bf8c522ef00b4e4556973575cd1750abc384b6de Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Thu, 26 Jan 2023 23:29:39 +0000
Subject: [PATCH] Added article views to homepage

---
 components/Views.tsx                              | 15 ++++++++++++---
 pages/index.tsx                                   | 10 +++++++---
 ...typescript-to-an-existing-next-js-project.mdx} |  0
 3 files changed, 19 insertions(+), 6 deletions(-)
 rename pages/writing/{how-to-add-typescript-to-an-existing-nextjs-project.mdx => how-to-add-typescript-to-an-existing-next-js-project.mdx} (100%)

diff --git a/components/Views.tsx b/components/Views.tsx
index 62872cd..0f6a6ca 100644
--- a/components/Views.tsx
+++ b/components/Views.tsx
@@ -7,9 +7,16 @@ type ViewsType = {
     views: string
 }
 
+type ViewsProps = {
+    as?: ElementType
+    slug: string
+    className?: string
+    shouldUpdateViews?: boolean
+}
+
 const updateViews = (slug: string) => fetcher(`/api/views/${slug}`, {method: 'POST'})
 
-export function Views({as: Component = 'span', slug}: { as?: ElementType, slug: string }) {
+export function Views({as: Component = 'span', slug, className, shouldUpdateViews = true}: ViewsProps) {
     const {data} = useSWR<ViewsType>(`/api/views/${slug}`, fetcher, {
         revalidateOnFocus: false,
         revalidateOnMount: true
@@ -17,11 +24,13 @@ export function Views({as: Component = 'span', slug}: { as?: ElementType, slug:
     const views = Number(data?.views)
 
     useEffect(() => {
-        updateViews(slug).then(r => r)
+        if (shouldUpdateViews) {
+            updateViews(slug).then(r => r);
+        }
     }, [slug])
 
     return (
-        <Component>
+        <Component className={className}>
             {` · ${views > 0 ? numberFormat(views) : '—'} views`}
         </Component>
     )
diff --git a/pages/index.tsx b/pages/index.tsx
index c762077..f72af2c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,7 @@ import {
     TwitterIcon
 } from '@/components/SocialIcons'
 import {SocialLink} from '@/components/SocialLink'
+import {Views} from '@/components/Views'
 import {formatDate} from '@/lib/formatDate'
 import {generateRssFeed} from '@/lib/generateRssFeed'
 import {generateSitemap} from '@/lib/generateSitemap'
@@ -71,9 +72,12 @@ function Article(article: Article) {
             <Card.Title href={`/writing/${article.slug}`}>
                 {article.title}
             </Card.Title>
-            <Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
-                {formatDate(article.date)}
-            </Card.Eyebrow>
+            <p className="flex order-first space-x-1 z-10">
+                <Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
+                    {formatDate(article.date)}
+                </Card.Eyebrow>
+                <Views slug={article.slug} shouldUpdateViews={false} className="text-sm text-zinc-500 dark:text-zinc-400"/>
+            </p>
             <Card.Description>{article.description}</Card.Description>
             <Card.Cta>Read more</Card.Cta>
         </Card>
diff --git a/pages/writing/how-to-add-typescript-to-an-existing-nextjs-project.mdx b/pages/writing/how-to-add-typescript-to-an-existing-next-js-project.mdx
similarity index 100%
rename from pages/writing/how-to-add-typescript-to-an-existing-nextjs-project.mdx
rename to pages/writing/how-to-add-typescript-to-an-existing-next-js-project.mdx