feat: add statistics

src/components/layout/Footer.tsx

@@ -120,6 +120,10 @@ const footerLinks = [
  },
  {
  href: 'https://clarence.link/um',
+ text: 'Analytics',
+ },
+ {
+ href: '/statistics',
  text: 'Statistics',
  },
  {

src/lib/contentMeta.ts

@@ -4,8 +4,10 @@ import { ContentType } from '@/types/frontmatters';
 export function pickContentMeta<T extends ContentType>(
  data: Array<ContentMeta> | undefined,
  type: T
-) {
- return data
- ?.filter((item) => item.slug.startsWith(type.slice(0, 1)))
- .map((item) => ({ ...item, slug: item.slug.slice(2) }));
+): Array<ContentMeta> {
+ return (
+ data
+ ?.filter((item) => item.slug.startsWith(type.slice(0, 1)))
+ .map((item) => ({ ...item, slug: item.slug.slice(2) })) ?? []
+ );
 }

src/pages/statistics.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { Column } from 'react-table';
+import useSWR from 'swr';
+
+import { pickContentMeta } from '@/lib/contentMeta';
+
+import Layout from '@/components/layout/Layout';
+import ReactTable from '@/components/ReactTable';
+import Seo from '@/components/Seo';
+
+import { contentMetaFlag } from '@/constants/env';
+
+import { ContentMeta } from '@/types/fauna';
+
+export default function StatisticsPage() {
+ const { data: contentMeta } = useSWR<Array<ContentMeta>>(
+ contentMetaFlag ? '/api/content' : null
+ );
+
+ const blogs = pickContentMeta(contentMeta, 'blog');
+ const libraries = pickContentMeta(contentMeta, 'library');
+ const projects = pickContentMeta(contentMeta, 'projects');
+
+ //#region //*=========== BlogColumns ===========
+ const blogColumns: readonly Column<ContentMeta>[] = React.useMemo(
+ () => [
+ {
+ Header: 'Blog Slug',
+ accessor: 'slug' as const,
+ sortDescFirst: true,
+ },
+ {
+ Header: 'Total Views',
+ accessor: (d) => d.views.toLocaleString(),
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ {
+ Header: 'Web Views',
+ accessor: (d) => (d.views - (d?.devtoViews || 0)).toLocaleString(),
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ {
+ Header: 'Dev.to',
+ accessor: (d) => d.devtoViews?.toLocaleString() || '-',
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ {
+ Header: 'Likes',
+ accessor: (d) => d.likes.toLocaleString(),
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ ],
+ []
+ );
+ //#endregion //*======== BlogColumns ===========
+
+ //#region //*=========== ProjectColumns ===========
+ const projectColumns: readonly Column<ContentMeta>[] = React.useMemo(
+ () => [
+ {
+ Header: 'Project Slug',
+ accessor: 'slug' as const,
+ sortDescFirst: true,
+ },
+ {
+ Header: 'Total Views',
+ accessor: (d) => d.views.toLocaleString(),
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ {
+ Header: 'Likes',
+ accessor: (d) => d.likes.toLocaleString(),
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ ],
+ []
+ );
+ //#endregion //*======== ProjectColumns ===========
+
+ //#region //*=========== LibraryColumns ===========
+ const libraryColumns: readonly Column<ContentMeta>[] = React.useMemo(
+ () => [
+ {
+ Header: 'Library Slug',
+ accessor: 'slug' as const,
+ sortDescFirst: true,
+ },
+ {
+ Header: 'Total Views',
+ accessor: (d) => d.views.toLocaleString(),
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ {
+ Header: 'Likes',
+ accessor: (d) => d.likes.toLocaleString(),
+ sortDescFirst: true,
+ sortType: 'number',
+ },
+ ],
+ []
+ );
+ //#endregion //*======== LibraryColumns ===========
+
+ return (
+ <Layout>
+ <Seo templateTitle='Statistics' />
+
+ <main>
+ <section className=''>
+ <div className='layout py-12'>
+ <h1>Statistics</h1>
+
+ <h2 className='h3 mt-8'>Blog</h2>
+ {blogs && (
+ <ReactTable className='mt-4' data={blogs} columns={blogColumns} />
+ )}
+
+ <h2 className='h3 mt-8'>Projects</h2>
+ {projects && (
+ <ReactTable
+ className='mt-4'
+ data={projects}
+ columns={projectColumns}
+ />
+ )}
+
+ <h2 className='h3 mt-8'>Libraries</h2>
+ {libraries && (
+ <ReactTable
+ className='mt-4'
+ data={libraries}
+ columns={libraryColumns}
+ />
+ )}
+ </div>
+ </section>
+ </main>
+ </Layout>
+ );
+}

src/styles/globals.css

@@ -43,23 +43,28 @@
  }
 
  /* #region /**=========== Default Typography =========== */
- h1 {
+ h1,
+ .h1 {
  @apply font-primary text-2xl font-bold md:text-4xl;
  }
 
- h2 {
+ h2,
+ .h2 {
  @apply font-primary text-xl font-bold md:text-3xl;
  }
 
- h3 {
+ h3,
+ .h3 {
  @apply font-primary text-lg font-bold md:text-2xl;
  }
 
- h4 {
+ h4,
+ .h4 {
  @apply font-primary text-base font-bold md:text-lg;
  }
 
- body {
+ body,
+ .body {
  @apply font-primary text-sm md:text-base;
  }
  /* #endregion /**======== Default Typography =========== */