Added article views to homepage

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>
     )

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>
+            <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>