analytics: use FaunaDB to track posts visitors (#6)

Author: arturocr

components/blog-post.js

@@ -8,7 +8,6 @@ import PublishedDate from '@/components/published-date';
 import ReadMore from '@/components/read-more';
 import ViewsCounter from '@/components/views-counter';
 import fetcher from '@/lib/fetcher';
-import { getViewsEndpoint } from '@/lib/goat-counter';
 import { getLocalizedPath } from '@/lib/util';
 
 const BlogPost = ({ post }) => {
@@ -20,15 +19,18 @@ const BlogPost = ({ post }) => {
     locale,
     asPath: blogPostPath,
   });
-  const { data } = useSWR(getViewsEndpoint(localizedPath), fetcher);
-  const views = data?.count_unique || 0;
+  const { data } = useSWR(
+    `/api/visitors?slug=${encodeURIComponent(localizedPath)}&justRead=true`,
+    fetcher
+  );
+  const views = data?.visitors || 0;
 
   return (
     <article className='mb-4 border-b last:border-b-0'>
       <Heading linkTo={blogPostPath}>{post.frontMatter?.title}</Heading>
       <div className='flex justify-between my-2 text-sm text-gray-600'>
         <PublishedDate date={post.frontMatter?.date} locale={locale} />
-        <ViewsCounter views={views} />
+        <ViewsCounter loading={!data} views={views} />
       </div>
       {post?.frontMatter?.image ? (
         <Link href={blogPostPath}>

components/nav-links.js

@@ -54,12 +54,12 @@ const NavLinks = () => {
         </ActiveLink>
         <ActiveLink activeClassName='border-middle text-middle' href='/uses'>
           <a
-            aria-label={t('uses')}
+            aria-label={`/${t('uses')}`}
             className='px-1 font-semibold tracking-tighter text-current uppercase transition-colors border-l-4 border-transparent lg:border-l-0 lg:border-b-4 lg:pt-1 hover:border-secondary'
             onClick={onTap}
-            title={t('uses')}
+            title={`/${t('uses')}`}
           >
-            {t('uses')}
+            {`/${t('uses')}`}
           </a>
         </ActiveLink>
         <a

components/views-counter.js

@@ -1,10 +1,11 @@
+import clsx from 'clsx';
 import useTranslation from '@/i18n/useTranslation';
 
-const ViewsCounter = ({ views }) => {
+const ViewsCounter = ({ loading = false, views }) => {
   const { t } = useTranslation();
 
   return (
-    <span>
+    <span className={clsx('transition-opacity', loading && 'opacity-0')}>
       {views} {views !== 1 ? t('views') : t('view')}
     </span>
   );

content/en/uses.mdx

@@ -1,5 +1,5 @@
 ---
-title: My Setup
+title: /uses
 description: A list of the software and hardware that I use as an engineer
 ---
 

content/es/uses.mdx

@@ -1,5 +1,5 @@
 ---
-title: Mi Configuración
+title: /uses
 description: Una lista del software y hardware que utilizo como ingeniero de front-end
 ---
 

i18n/strings.js

@@ -49,7 +49,7 @@ const LangStrings = {
     resume: 'Currículo',
     slogan: 'Arturo Campos - Blog de Desarrollo Web y Tecnología',
     sorry: 'Lo siento',
-    uses: 'Uso',
+    uses: 'Uses',
     view: 'vista',
     views: 'vistas',
   },

lib/goat-counter.js

@@ -8,9 +8,4 @@ const pageView = url => {
   }
 };
 
-const getViewsEndpoint = path =>
-  `https://arturocampos.goatcounter.com/counter/${encodeURIComponent(
-    path
-  )}.json`;
-
-export { pageView, getViewsEndpoint };
+export { pageView };