create-next-mdx-blog-app 2.1.2 → 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.2`
+- **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/)
 
@@ -164,6 +164,15 @@ Images are displayed inside a styled container with a **green glow border** and
 ### Article Header Actions
 A **Copy Link** button (`src/components/CopyLinkButton.tsx`) is rendered in the article header, writing the current page URL to the clipboard on click and displaying a brief "Copied!" confirmation via icon swap. **Social Share** buttons (`src/components/SocialShareButtons.tsx`) sit alongside it, opening pre-filled share dialogs for X (Twitter), LinkedIn, and Reddit in a new tab using the article title and URL.
 
+### Reading Progress Bar
+A thin green bar (`src/components/ReadingProgressBar.tsx`) is fixed to the top of the viewport on all article pages, growing from left to right as the reader scrolls through the article. It uses a passive scroll listener for zero performance impact and includes `role="progressbar"` ARIA attributes for accessibility.
+
+### 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`).
 
@@ -260,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.2",
+  "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

@@ -3,6 +3,9 @@ import ArticleAuthorBio from "@/components/ArticleAuthorBio";
 import ArticleHeader from "@/components/ArticleHeader";
 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
@@ -21,10 +24,15 @@ export const metadata: Metadata = {
 // Utilizes the Static Article custom component
 const SampleBlogPostPage = () => {  
   return (
-    <div className="min-h-screen flex flex-col bg-black"> 
+    <div className="min-h-screen flex flex-col bg-black">
+      <ReadingProgressBar />
+      <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/ArticleAuthorBio.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import type { ArticleAuthorInfoType } from "@/utils/types";
 
 // Article Author Bio Section component
-export default function ArticleAuthorBio({ authorInformation }: { authorInformation: ArticleAuthorInfoType }) {
+export default function ArticleAuthorBio({ authorInformation }: { authorInformation: ArticleAuthorInfoType }): React.JSX.Element {
     return (
         <div className="glass-card p-4 sm:p-6 mb-8 sm:mb-12">
             <div className="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0">

package/src/components/ArticleCoverImage.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import type { ArticleCoverImageInfoType } from "@/utils/types";
 
 // Article Cover Image Section component
-export default function ArticleCoverImage(coverImageInformation: ArticleCoverImageInfoType) {
+export default function ArticleCoverImage(coverImageInformation: ArticleCoverImageInfoType): React.JSX.Element {
     return (
         <div className="rounded-lg overflow-hidden mb-4">
             <Image

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 }) {
+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/BackToTopButton.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ArrowUp } from 'lucide-react';
+
+// Floating button that appears after scrolling down and returns the user to the top of the page
+export default function BackToTopButton(): React.JSX.Element | null {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    const onScroll = (): void => {
+      setVisible(window.scrollY > 400);
+    };
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  const scrollToTop = (): void => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  if (!visible) return null;
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-green-500 text-black shadow-lg hover:bg-green-400 transition-colors duration-200"
+      aria-label="Back to top"
+    >
+      <ArrowUp size={20} strokeWidth={2.5} />
+    </button>
+  );
+}

package/src/components/CodeSandboxClient.tsx

@@ -11,7 +11,7 @@ import { JS_DEFAULT, TS_DEFAULT, JS_EXAMPLES, TS_EXAMPLES } from '@/utils/consta
 type Runtime = 'javascript' | 'typescript';
 
 // Client boundary for the Code Sandbox page — owns all interactive state
-export default function CodeSandboxClient() {
+export default function CodeSandboxClient(): React.JSX.Element {
     const [runtime, setRuntime] = useState<Runtime>('javascript');
     const [sandpackKey, setSandpackKey] = useState<number>(0);
     const [sandpackCode, setSandpackCode] = useState<string>(JS_DEFAULT);

package/src/components/CodeSandboxFeaturesSection.tsx

@@ -1,6 +1,6 @@
 import { Copy, Play, Download, Shield } from "lucide-react";
 
-export default function CodeSandboxFeaturesSection() {
+export default function CodeSandboxFeaturesSection(): React.JSX.Element {
     return (
         <section className="pb-8 sm:pb-12">
             <h3 className="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 matrix-glow text-center text-green-300">Sandbox Features</h3>

package/src/components/DynamicArticle.tsx

@@ -3,22 +3,29 @@ import ArticleAuthorBio from "@/components/ArticleAuthorBio";
 import ArticleHeader from "@/components/ArticleHeader";
 import { ArticleAuthorInfoList, ArticleHeaderInfoList } from "@/utils/constants";
 import MDXRemoteArticle from "./MDXRemoteArticle";
-import { fetchArticle } from "@/utils/functions";
+import ReadingProgressBar from "@/components/ReadingProgressBar";
+import BackToTopButton from "@/components/BackToTopButton";
+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 }) {
+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");
   }
   else {
     return (
-      <div className="min-h-screen flex flex-col bg-black"> 
+      <div className="min-h-screen flex flex-col bg-black">
+        <ReadingProgressBar />
+        <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/MDXRemoteArticle.tsx

@@ -4,7 +4,7 @@ import matter from 'gray-matter';
 
 // Pass in the MDX remote article content as a string
 // Utilize the gray matter library to separate article content from article metadata (front-matter)
-export default function MDXRemoteArticle({ content }: { content: string }) {
+export default function MDXRemoteArticle({ content }: { content: string }): React.JSX.Element {
     const { content: mdxContent } = matter(content);
 
     // MDX Remote used to capture article data from database

package/src/components/ReadingProgressBar.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+// Thin fixed progress bar at the top of the page indicating scroll depth through the article
+export default function ReadingProgressBar(): React.JSX.Element {
+  const [progress, setProgress] = useState<number>(0);
+
+  useEffect(() => {
+    const updateProgress = (): void => {
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+      setProgress(pct);
+    };
+
+    window.addEventListener('scroll', updateProgress, { passive: true });
+    updateProgress();
+
+    return () => window.removeEventListener('scroll', updateProgress);
+  }, []);
+
+  return (
+    <div
+      className="fixed top-0 left-0 z-50 h-1 bg-green-500 transition-all duration-75 ease-out"
+      style={{ width: `${progress}%` }}
+      role="progressbar"
+      aria-valuenow={Math.round(progress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Reading progress"
+    />
+  );
+}

package/src/components/SandpackEditor.tsx

@@ -43,7 +43,7 @@ const matrixTheme: SandpackTheme = {
   },
 };
 
-function EditorToolbar({ mainFile, template }: { mainFile: string; template: 'vanilla' | 'vanilla-ts' }) {
+function EditorToolbar({ mainFile, template }: { mainFile: string; template: 'vanilla' | 'vanilla-ts' }): React.JSX.Element {
   const { sandpack, dispatch } = useSandpack();
   const isTS = template === 'vanilla-ts';
 
@@ -113,7 +113,7 @@ export interface SandpackEditorProps {
   template: 'vanilla' | 'vanilla-ts';
 }
 
-export default function SandpackEditor({ initialCode, template }: SandpackEditorProps) {
+export default function SandpackEditor({ initialCode, template }: SandpackEditorProps): React.JSX.Element {
   const mainFile = template === 'vanilla-ts' ? '/index.ts' : '/index.js';
 
   return (

package/src/components/StaticArticle.tsx

@@ -3,7 +3,7 @@ import ArticleContent from "@/markdown/ArticleContent.mdx";
 
 // Custom Static Article component to be used for loading article content stored locally
 // Article Header information will be hardcoded and stored locally, the following is simply an example
-const StaticArticle = () => {  
+const StaticArticle = (): React.JSX.Element => {
   return (
     <div className="glass-card p-8 mb-8">
       <ArticleContent />

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/components/chat/chat-input.tsx

@@ -7,11 +7,11 @@ import { Send } from "lucide-react";
 import type { ChatInputType } from "@/utils/types";
 
 // Chat Input — matrix themed
-export function ChatInput({ isLoading, onSendMessage }: ChatInputType) {
+export function ChatInput({ isLoading, onSendMessage }: ChatInputType): React.JSX.Element {
     const [input, setInput] = useState("");
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-    function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>): void {
         if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
             if (input.trim() && !isLoading) {
@@ -21,7 +21,7 @@ export function ChatInput({ isLoading, onSendMessage }: ChatInputType) {
         }
     }
 
-    function handleSubmit(e: React.FormEvent) {
+    function handleSubmit(e: React.FormEvent): void {
         e.preventDefault();
         if (input.trim() && !isLoading) {
             onSendMessage(input);

package/src/components/chat/chat-interface.tsx

@@ -11,7 +11,7 @@ import { Bot, RotateCcw } from "lucide-react";
 const transport = new TextStreamChatTransport({ api: "/api/chat" });
 
 // Chat Interface — no sidebar, no persistence, matrix themed
-export function ChatInterface() {
+export function ChatInterface(): React.JSX.Element {
     const { messages, sendMessage, status, error, setMessages } = useChat({ transport });
 
     const isLoading = status === "submitted" || status === "streaming";

package/src/components/chat/chat-messages.tsx

@@ -14,7 +14,7 @@ const SUGGESTIONS = [
 ];
 
 // Chat Messages — matrix themed, auto-scrolling
-export function ChatMessages({ messages, isLoading, error }: ChatMessagesType) {
+export function ChatMessages({ messages, isLoading, error }: ChatMessagesType): React.JSX.Element {
     const bottomRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {

package/src/components/chat/chat-tool-result.tsx

@@ -9,7 +9,7 @@ export function ChatToolResult({
     toolInvocation,
 }: {
     toolInvocation: ToolInvocationPartType;
-}) {
+}): React.JSX.Element {
     const config = TOOL_CONFIG[toolInvocation.toolName] ?? {
         icon: Search,
         label: toolInvocation.toolName,

package/src/components/customMDXComponents/CodeBlock.tsx

@@ -5,13 +5,13 @@ import { toast } from 'sonner';
 
 // Custom code block component for handling code in MDX files
 // Visual Studio Code Dark Plus theme with copy functionality
-const CodeBlock = ({ className = '', children }: { className?: string; children: string }) => {
+const CodeBlock = ({ className = '', children }: { className?: string; children: string }): React.JSX.Element => {
   const match = /language-(\w+)/.exec(className || '');
   const language = match?.[1] || 'text';
   const code = String(children).trim();
 
   // Copy content and receive a toast message based on action
-  const copyToClipboard = async () => {
+  const copyToClipboard = async (): Promise<void> => {
     try {
       await navigator.clipboard.writeText(code);
       toast.success('Code copied!', {

package/src/components/customMDXComponents/GistCodeBlock.tsx

@@ -6,7 +6,7 @@ interface GistCodeBlockProps {
   language: string;
 }
 
-export default function GistCodeBlock({ content, language }: GistCodeBlockProps) {
+export default function GistCodeBlock({ content, language }: GistCodeBlockProps): React.JSX.Element {
   return (
     <SyntaxHighlighter
       language={language}

package/src/components/customMDXComponents/GistCopyButton.tsx

@@ -6,8 +6,8 @@ interface GistCopyButtonProps {
   mdxGHGistURL: string;
 }
 
-export default function GistCopyButton({ content, mdxGHGistURL }: GistCopyButtonProps) {
-  const copyToClipboard = async () => {
+export default function GistCopyButton({ content, mdxGHGistURL }: GistCopyButtonProps): React.JSX.Element {
+  const copyToClipboard = async (): Promise<void> => {
     try {
       await navigator.clipboard.writeText(content);
       toast.success('GitHub Gist copied!', {

package/src/components/customMDXComponents/GitHubGist.tsx

@@ -3,7 +3,7 @@ import GistCopyButton from './GistCopyButton';
 import GistCodeBlock from './GistCodeBlock';
 import { GITHUB_USERNAME, GITHUB_GIST_LANGUAGE_MAP, GIST_BASE_URL } from '@/utils/constants';
 
-export default async function GitHubGist({ id, figCaptionText }: GitHubGistType) {
+export default async function GitHubGist({ id, figCaptionText }: GitHubGistType): Promise<React.JSX.Element> {
   try {
     const headers: HeadersInit = {
       'Accept': 'application/vnd.github.v3+json',

package/src/components/customMDXComponents/MDXImage.tsx

@@ -3,7 +3,7 @@ import type { MDXImageType } from "@/utils/types";
 
 // MDXImage custom component
 // Utilizes the built-in Next.js Image component as well as the figcaption element
-export default function MDXImage(imageProperties: MDXImageType) {
+export default function MDXImage(imageProperties: MDXImageType): React.JSX.Element {
     return (
         <figure className='text-center my-6'>
             <div className="relative inline-block p-4 bg-gray-900/30 rounded-lg border-2 border-green-500 shadow-[0_0_15px_rgba(34,197,94,0.3)] transition-all duration-300 hover:shadow-[0_0_25px_rgba(34,197,94,0.5)] hover:scale-[1.02]">

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";