create-next-mdx-blog-app 2.1.3 → 2.1.4

package/README.md

@@ -59,7 +59,7 @@ npx create-next-mdx-blog-app .
 ### Package Information
 
 - **Package Name**: `create-next-mdx-blog-app`
-- **Version**: `2.1.3`
+- **Version**: `2.1.4`
 - **License**: MIT
 - **Homepage**: [https://www.npmjs.com/package/create-next-mdx-blog-app](https://www.npmjs.com/package/create-next-mdx-blog-app/)
 
@@ -170,6 +170,9 @@ A thin green bar (`src/components/ReadingProgressBar.tsx`) is fixed to the top o
 ### Back to Top Button
 A floating circular button (`src/components/BackToTopButton.tsx`) appears in the bottom-right corner of the screen once the reader has scrolled more than 400px down the page. Clicking it smoothly scrolls back to the top. The button is hidden when not needed and matches the green colour scheme of the rest of the UI.
 
+### View Counter
+Each article page displays a live view count stored in a dedicated `view_counts` Supabase table, incremented atomically via the `increment_view_count` RPC function. Dynamic pages increment server-side at render time; static pages use a `ViewCounter` client component that calls the `/api/views/[slug]` Route Handler after hydration.
+
 ## 🖥️ Code Sandbox
 The project includes an interactive in-browser code execution environment powered by **Sandpack** (<b>route</b>: `/code-sandbox`).
 
@@ -266,7 +269,7 @@ docker run -e SUPABASE_URL=your_supabase_url \ -e SUPABASE_ANON_KEY=your_supabas
 ``
 
 ## 🔄 CRUD Operations and Supabase Actions
-Implementation of the CRUD operation functions is stored in the `/src/utils/functions/crud` directory. This includes functions for creating, reading, updating, and deleting articles in the Supabase database.
+Implementation of the CRUD operation functions is stored in the `/src/utils/functions/crud` directory. This includes functions for creating, reading, updating, and deleting articles in the Supabase database. Supabase RPC functions (such as `incrementViewCount`) are kept separately in `/src/utils/functions/rpc`.
 
 The `article-manager.ts` file utilizes these CRUD functions to successfully perform the desired actions.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-mdx-blog-app",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "bin": {
     "create-next-mdx-blog-app": "./bin/create.js"
   },

package/scripts/sql/DDL/alterTable.sql

@@ -1,8 +1,6 @@
 -- Alter table properties such as enabling RLS (Row-Level Security)
 ALTER TABLE Article ENABLE ROW LEVEL SECURITY;
 
--- Add and use more here..
-
 -- Insert policy added to Article table
 CREATE POLICY "Allow insert on Article"
   ON "Article"

package/scripts/sql/DDL/createIncrementViewCountFunction.sql

@@ -0,0 +1,19 @@
+-- Creates the increment_view_count RPC function used to atomically upsert
+-- and increment the count for a given slug in the view_counts table.
+-- Works for both static and dynamic article pages.
+-- Run once in the Supabase SQL editor before using the view counter feature.
+CREATE OR REPLACE FUNCTION increment_view_count(article_slug TEXT)
+RETURNS INTEGER
+LANGUAGE plpgsql
+AS $$
+DECLARE
+  new_count INTEGER;
+BEGIN
+  INSERT INTO view_counts (slug, count)
+  VALUES (article_slug, 1)
+  ON CONFLICT (slug) DO UPDATE
+  SET count = view_counts.count + 1
+  RETURNING count INTO new_count;
+  RETURN new_count;
+END;
+$$;

package/scripts/sql/DDL/createViewCountsTable.sql

@@ -0,0 +1,26 @@
+-- Creates a dedicated view_counts table for tracking article view counts.
+-- Decoupled from the Article table so both static and dynamic articles
+-- can have their views tracked regardless of whether a full Article record exists.
+CREATE TABLE view_counts (
+  slug VARCHAR PRIMARY KEY,
+  count INTEGER DEFAULT 0
+);
+
+-- Enable Row-Level Security
+ALTER TABLE view_counts ENABLE ROW LEVEL SECURITY;
+
+-- Allow select, insert and update for view count tracking
+CREATE POLICY "Allow select on view_counts"
+  ON view_counts
+  FOR SELECT
+  USING (true);
+
+CREATE POLICY "Allow insert on view_counts"
+  ON view_counts
+  FOR INSERT
+  WITH CHECK (true);
+
+CREATE POLICY "Allow update on view_counts"
+  ON view_counts
+  FOR UPDATE
+  USING (true);

package/src/app/api/views/[slug]/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { incrementViewCount } from "@/utils/functions";
+
+// Route Handler — increments the view count for a given article slug and returns the new count.
+// Called client-side by the ViewCounter component on SSG pages.
+export async function POST(
+    _req: NextRequest,
+    { params }: { params: Promise<{ slug: string }> }
+): Promise<NextResponse> {
+    const { slug } = await params;
+
+    if (!slug || typeof slug !== "string" || slug.trim() === "") {
+        return NextResponse.json({ error: "Invalid slug" }, { status: 400 });
+    }
+
+    const count = await incrementViewCount(slug.trim());
+
+    return NextResponse.json({ count });
+}

package/src/app/sample-blog-post-page/page.tsx

@@ -5,6 +5,7 @@ import { ArticleAuthorInfoList, ArticleHeaderInfoList } from "@/utils/constants"
 import StaticArticle from "@/components/StaticArticle";
 import ReadingProgressBar from "@/components/ReadingProgressBar";
 import BackToTopButton from "@/components/BackToTopButton";
+import ViewCounter from "@/components/ViewCounter";
 import type { Metadata } from 'next';
 
 // Generate metadata for the Sample Blog Post page
@@ -28,7 +29,10 @@ const SampleBlogPostPage = () => {
       <BackToTopButton />
       <main className="flex-grow px-4 py-8">
         <div className="max-w-4xl mx-auto">
-          <ArticleHeader articleHeaderInformation={ArticleHeaderInfoList} />
+          <ArticleHeader
+              articleHeaderInformation={ArticleHeaderInfoList}
+              viewCounterSlot={<ViewCounter slug="sample-blog-post-page" />}
+            />
           <StaticArticle />
           <ArticleAuthorBio authorInformation={ArticleAuthorInfoList} />
         </div>

package/src/components/ArticleHeader.tsx

@@ -5,9 +5,10 @@ import CopyLinkButton from "./CopyLinkButton";
 import SocialShareButtons from "./SocialShareButtons";
 import type { ArticleHeaderInfoType } from "@/utils/types";
 import Image from "next/image";
+import { Eye } from "lucide-react";
 
 // Article Header custom component
-export default function ArticleHeader({ articleHeaderInformation } : { articleHeaderInformation: ArticleHeaderInfoType }): React.JSX.Element {
+export default function ArticleHeader({ articleHeaderInformation, viewCount, viewCounterSlot } : { articleHeaderInformation: ArticleHeaderInfoType; viewCount?: number; viewCounterSlot?: React.ReactNode }): React.JSX.Element {
     return (
         <div className="mb-8">
             <Badge className="mb-3 bg-green-900/60 text-green-100 border border-green-500/50">
@@ -33,6 +34,12 @@ export default function ArticleHeader({ articleHeaderInformation } : { articleHe
                             month: 'long',
                             day: 'numeric'
                         })} • { articleHeaderInformation.articleReadingTime }
+                        { viewCount !== undefined && (
+                            <span className="inline-flex items-center gap-1 ml-2">
+                                • <Eye className="inline h-3 w-3" /> { viewCount.toLocaleString() } views
+                            </span>
+                        )}
+                        { viewCounterSlot }
                         </p>
                     </div>
                 </div>

package/src/components/DynamicArticle.tsx

@@ -5,13 +5,16 @@ import { ArticleAuthorInfoList, ArticleHeaderInfoList } from "@/utils/constants"
 import MDXRemoteArticle from "./MDXRemoteArticle";
 import ReadingProgressBar from "@/components/ReadingProgressBar";
 import BackToTopButton from "@/components/BackToTopButton";
-import { fetchArticle } from "@/utils/functions";
+import { fetchArticle, incrementViewCount } from "@/utils/functions";
 
 // Custom Dynamic Article component encompasses loading article content stored in a Supabase database
 export default async function DynamicArticle({ slug } : { slug: string }): Promise<React.JSX.Element> {
   // Make a call to the back-end and fetch article information
-  const articleData = await fetchArticle(slug);
-  
+  const [articleData, viewCount] = await Promise.all([
+    fetchArticle(slug),
+    incrementViewCount(slug)
+  ]);
+
   if (!articleData || !articleData.content) {
     throw new Error("Invalid article");
   }
@@ -22,7 +25,7 @@ export default async function DynamicArticle({ slug } : { slug: string }): Promi
         <BackToTopButton />
         <main className="flex-grow px-4 py-8">
           <div className="max-w-4xl mx-auto">
-            <ArticleHeader articleHeaderInformation={ArticleHeaderInfoList} />
+            <ArticleHeader articleHeaderInformation={ArticleHeaderInfoList} viewCount={viewCount} />
             <div className="glass-card p-8 mb-8">
               <MDXRemoteArticle content={articleData.content} />
             </div>

package/src/components/ViewCounter.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Eye } from "lucide-react";
+
+// ViewCounter — Client Component for SSG pages.
+// Fires a POST to the /api/views/[slug] Route Handler on mount,
+// which increments the count in Supabase and returns the new value.
+export default function ViewCounter({ slug }: { slug: string }): React.JSX.Element | null {
+    const [count, setCount] = useState<number | null>(null);
+
+    useEffect(() => {
+        fetch(`/api/views/${encodeURIComponent(slug)}`, { method: "POST" })
+            .then((res) => res.json())
+            .then((data: { count?: number }) => {
+                if (typeof data.count === "number") {
+                    setCount(data.count);
+                }
+            })
+            .catch(() => {
+                // Silently fail — view count is non-critical
+            });
+    }, [slug]);
+
+    if (count === null) return null;
+
+    return (
+        <span className="inline-flex items-center gap-1 ml-2">
+            • <Eye className="inline h-3 w-3" /> {count.toLocaleString()} views
+        </span>
+    );
+}

package/src/utils/functions/index.ts

@@ -1,2 +1,3 @@
 export { deleteArticle, fetchAllArticles, fetchArticle, insertArticle, updateArticle } from "./crud";
+export { incrementViewCount } from "./rpc";
 export { getSupabaseClient } from "./supabase_client";

package/src/utils/functions/rpc/incrementViewCount.ts

@@ -0,0 +1,19 @@
+import getSupabaseClient from "../supabase_client/SupabaseClient";
+
+// Atomically increments the view count for a given article slug and returns the new count.
+// Targets the dedicated view_counts table via an upsert — works for both static and dynamic pages.
+//
+// Required Supabase migration — run scripts/sql/DDL/createViewCountsTable.sql and
+// scripts/sql/DDL/createIncrementViewCountFunction.sql once in the Supabase SQL editor.
+
+export default async function incrementViewCount(slug: string): Promise<number> {
+    const { data, error } = await getSupabaseClient()
+        .rpc('increment_view_count', { article_slug: slug.trim() });
+
+    if (error) {
+        console.error('Could not increment view count:', error.message);
+        return 0;
+    }
+
+    return (data as number) ?? 0;
+}

package/src/utils/functions/rpc/index.ts

@@ -0,0 +1 @@
+export { default as incrementViewCount } from "./incrementViewCount";