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

package/README.md

@@ -16,7 +16,7 @@ This starter kit is built with **Static Site Generation (SSG)** compliance at it
 ## ⚙️ Project Setup
 
 ### Prerequisites
-- **Node.js**: Ensure you have Node.js installed (version 15.x or later).
+- **Node.js**: Ensure you have Node.js installed (version 18.17.0 or later).
 - **NPM**: Node Package Manager comes with Node.js.
 
 ### Installation
@@ -31,7 +31,13 @@ This starter kit is built with **Static Site Generation (SSG)** compliance at it
    npm install
    ```
 
-3. Start the development server:
+3. Configure environment variables:
+   ```bash
+   cp .env.example .env.local
+   # Fill in SUPABASE_URL, SUPABASE_ANON_KEY, ANTHROPIC_API_KEY, and others in .env.local
+   ```
+
+4. Start the development server:
    ```bash
    npm run dev
    ```
@@ -40,17 +46,13 @@ If you want, you can also run this project using the following command:
    ```bash
    npx create-next-mdx-blog-app .
    ```
-This will instantly create and setup the starter kit project for you to work on.
+This will clone the repository, install dependencies, and guide you through environment setup automatically.
 
 ## ![NPM](https://img.shields.io/badge/NPM-CB3837?style=for-the-badge&logo=npm&logoColor=white) Package
 
-### Install via NPM
+### Quick Start
 
-```bash
-npm install create-next-mdx-blog-app
-```
-
-### Quick Start with NPX
+**`npx create-next-mdx-blog-app .`**
 
 ```bash
 npx create-next-mdx-blog-app .
@@ -59,7 +61,7 @@ npx create-next-mdx-blog-app .
 ### Package Information
 
 - **Package Name**: `create-next-mdx-blog-app`
-- **Version**: `2.1.3`
+- **Version**: `2.1.5`
 - **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 +172,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 +271,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/bin/create.js

@@ -38,21 +38,25 @@ async function setup() {
 
   try {
     // Use degit to clone the repository into the current directory
+    console.log('Cloning repository...');
     const emitter = degit(repoUrl, { cache: false, force: true });
     await emitter.clone(cwd);
 
-    // If there's no package.json, initialize it first
-    if (!hasPackageJson) {
-      console.log('Initializing npm project...');
-      await execa('npm', ['init', '-y'], { stdio: 'inherit' }); // Initialize package.json with default values
-    }
-
-    // Install dependencies
+    // Install dependencies inside the cloned app subdirectory
     console.log('Installing dependencies...');
-    await execa('npm', ['install'], { stdio: 'inherit' });
+    await execa('npm', ['install'], {
+      stdio: 'inherit',
+      cwd: path.join(cwd, 'mdx-medium-blog-post-provider')
+    });
 
     console.log('Next.js MDX Blog setup completed!');
-    console.log('To start the app, run:');
+    console.log('');
+    console.log('Before starting the app, configure your environment variables:');
+    console.log('  cd mdx-medium-blog-post-provider');
+    console.log('  cp .env.example .env.local');
+    console.log('  # Fill in SUPABASE_URL, SUPABASE_ANON_KEY, ANTHROPIC_API_KEY, and others in .env.local');
+    console.log('');
+    console.log('Then start the development server:');
     console.log('  npm run dev');
   } 
   catch (error) {

package/package.json

@@ -1,9 +1,20 @@
 {
   "name": "create-next-mdx-blog-app",
-  "version": "2.1.3",
+  "version": "2.1.5",
+  "description": "A production-ready technical blog starter kit built with Next.js, MDX, Supabase, and TypeScript.",
+  "author": {
+    "name": "Abdullah Muhammad",
+    "url": "https://github.com/CodingAbdullah"
+  },
+  "files": [
+    "bin/"
+  ],
   "bin": {
     "create-next-mdx-blog-app": "./bin/create.js"
   },
+  "engines": {
+    "node": ">=18.17.0"
+  },
   "homepage": "https://next-mdx-blog-starter-sigma.vercel.app/",
   "repository": {
     "type": "git",
@@ -21,7 +32,7 @@
     "supabase",
     "typescript"
   ],
-  "license": "MIT License",
+  "license": "MIT",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

package/.env.example

@@ -1,17 +0,0 @@
-# Supabase — required for dynamic blog post fetching
-SUPABASE_URL=
-SUPABASE_ANON_KEY=
-
-# Anthropic — required for the Blog Assistant chat feature
-ANTHROPIC_API_KEY=
-
-# GitHub — optional but recommended for the <GitHubGist> component
-# Without a token, the GitHub API allows 60 requests/hr per IP.
-# With a token (read-only gist scope), the limit rises to 5,000 requests/hr.
-GITHUB_TOKEN=
-
-# GitHub username used to construct mdxgists.net URLs (defaults to CodingAbdullah)
-GITHUB_USERNAME=
-
-# Base URL for mdxgists.net links (defaults to https://mdxgists.net)
-GIST_BASE_URL=

package/CLAUDE.md

@@ -1,401 +0,0 @@
-# CLAUDE.md
-Production Configuration File
-Project: Next-MDX-Blog-Starter
-
----
-
-# PROJECT PURPOSE
-
-This repository is a production-grade Next.js App Router blog starter kit built using MDX, Supabase, AWS S3, and TypeScript strict mode.
-
-This project follows a Static Site Generation (SSG-first) architecture and is optimized for performance, SEO, maintainability, and production deployment.
-
-Claude Sonnet 4 is the primary coding model used to develop and maintain this project.
-
-Claude acts as a senior production engineer responsible for generating safe, correct, production-ready code.
-
----
-
-# CORE STACK
-
-Framework
-• Next.js (App Router only)
-• React
-• TypeScript (strict mode mandatory)
-
-Content
-• MDX
-• gray-matter
-• next-mdx-remote
-
-Database
-• Supabase (direct integration via Server Components)
-
-Storage
-• AWS S3 (image storage)
-
-UI
-• shadcn/ui
-• lucide-react
-
-Other
-• Docker
-• Vercel Analytics
-
----
-
-# ARCHITECTURE RULES
-
-This project is SSG-first.
-
-Claude must always prefer Static Site Generation over dynamic rendering.
-
-Use dynamic rendering ONLY when explicitly required.
-
-All blog posts must be statically generated when possible.
-
-Use generateStaticParams when applicable.
-
-Avoid unnecessary client-side rendering.
-
-Prefer Server Components over Client Components.
-
-Never introduce performance regressions.
-
----
-
-# TYPESCRIPT REQUIREMENTS (MANDATORY)
-
-All generated code must:
-
-• use strict mode
-• never use any
-• include explicit types
-• include proper return types
-• include proper interfaces
-• include proper error handling
-• be production-ready
-• be compile-ready immediately
-
-Never generate placeholder code.
-Never generate incomplete code.
-Never generate mock implementations.
-
----
-
-# PROJECT STRUCTURE RULES
-
-Claude must respect existing project structure.
-
-Key directories:
-
-/app
-/src/markdown
-/src/utils
-/src/utils/functions
-/src/utils/functions/crud
-/src/utils/functions/supabase_client
-/components
-/components/customMDXComponents
-/scripts
-
-Never restructure folders unless explicitly instructed.
-
-Never break import paths.
-
----
-
-# MDX SYSTEM RULES
-
-Static MDX:
-
-• Must be statically generated at build time
-• Must use gray-matter for frontmatter parsing
-• Must support metadata generation
-
-Dynamic MDX:
-
-• Must use next-mdx-remote
-• Must render server-side only
-• Must never expose raw MDX to client
-
-Frontmatter must include:
-
----
-title: string
-description: string
-publishedAt: string
-author: string
-tags: string[]
-image: string
----
-
-Claude must validate frontmatter when generating MDX logic.
-
----
-
-# MDX COMPONENT RULES
-
-File: mdx-components.tsx
-
-Must override:
-
-• img → Next Image
-• a → Next Link
-
-Must maintain accessibility.
-
-Custom MDX components must live inside:
-
-/components/customMDXComponents
-
-Examples:
-
-• CodeBlock
-• MDXImage
-• GitHubGist
-
-All components must be fully typed.
-
----
-
-# SUPABASE RULES
-
-Supabase is integrated directly.
-
-Claude must NOT create custom backend APIs unless explicitly instructed.
-
-Supabase client location:
-
-/src/utils/functions/supabase_client
-
-CRUD functions location:
-
-/src/utils/functions/crud
-
-Rules:
-
-• Never expose secrets
-• Never expose service role key
-• Use environment variables
-• Use server-side access
-• Respect Row Level Security
-
-Environment variables allowed:
-
-SUPABASE_URL
-SUPABASE_ANON_KEY
-
-Never commit .env files.
-
----
-
-# AWS S3 RULES
-
-AWS S3 is used for image storage.
-
-Claude must:
-
-• Use public image URLs
-• Use Next Image component
-• Never expose credentials
-• Never embed secrets
-
-S3 domain configuration exists in next.config.ts
-
----
-
-# DOCKER RULES
-
-Docker must:
-
-• Use multi-stage builds
-• Use production Node runtime
-• Exclude dev dependencies
-• Inject environment variables at runtime
-• Expose port 3000
-
-Claude must generate production-ready Docker configurations only.
-
----
-
-# ANALYTICS RULES
-
-Vercel Analytics is used.
-
-Claude must:
-
-• Keep analytics lightweight
-• Avoid blocking rendering
-• Avoid performance regressions
-
----
-
-# ARTICLE MANAGER SCRIPT RULES
-
-File:
-
-/scripts/action-script/article-manager.ts
-
-Commands supported:
-
-insert
-delete
-update
-fetch
-fetchAll
-
-Claude must:
-
-• Maintain CLI interface
-• Validate arguments
-• Provide proper error handling
-• Provide proper exit codes
-• Maintain strict typing
-
-Never break script interface.
-
----
-
-# PERFORMANCE RULES
-
-Claude must:
-
-• Prefer Server Components
-• Avoid unnecessary Client Components
-• Avoid hydration mismatches
-• Avoid blocking rendering
-• Optimize images
-• Optimize imports
-• Avoid unnecessary JS
-
----
-
-# SECURITY RULES
-
-Claude must never:
-
-• expose secrets
-• expose environment variables
-• leak Supabase credentials
-• introduce unsafe eval
-• introduce vulnerabilities
-
-All input must be validated.
-
----
-
-# GIT WORKFLOW RULES (CRITICAL)
-
-Claude must NEVER commit automatically.
-
-Claude must NEVER commit after generating code.
-
-Claude must NEVER create commits unless explicitly instructed.
-
-Claude must ONLY commit when the user explicitly writes:
-
-commit changes
-create commit
-commit this feature
-
-Without explicit commit instruction, Claude must NOT commit.
-
-All commits must be batch commits.
-
----
-
-# BRANCH WORKFLOW RULES (CRITICAL)
-
-Claude must NEVER create branches automatically.
-
-Claude must NEVER invent branch names.
-
-Branches may ONLY be created when explicitly instructed.
-
-Allowed prefixes:
-
-dev/
-fix/
-
-Claude must NEVER commit directly to main or master.
-
-Claude must NEVER switch branches automatically.
-
----
-
-# COMMIT SAFETY RULES
-
-When committing, Claude must ensure:
-
-• only relevant files included
-• no unrelated files included
-• no secrets included
-• code compiles
-• strict TypeScript passes
-• commit is atomic
-
-Commit messages must be clear and professional.
-
----
-
-# CODE GENERATION REQUIREMENTS
-
-All generated code must:
-
-• be production-ready
-• be fully typed
-• include error handling
-• follow modern best practices
-• follow Next.js App Router patterns
-• be modular
-• be maintainable
-
-Claude must never generate placeholder implementations.
-
-Claude must never generate incomplete logic.
-
-Claude must never generate fake implementations.
-
----
-
-# DEPLOYMENT TARGETS
-
-Project must remain compatible with:
-
-• Vercel
-• Docker deployment
-• Static hosting (SSG mode)
-
-Claude must preserve deployment compatibility.
-
----
-
-# DEFAULT BEHAVIOR
-
-Unless explicitly instructed otherwise, Claude must assume:
-
-• production environment
-• strict TypeScript required
-• Supabase integration active
-• AWS S3 active
-• SSG preferred
-
-Claude must behave as a senior production engineer.
-
----
-
-# PRIORITY ORDER
-
-Claude must prioritize in this order:
-
-1 Security
-2 Type safety
-3 Performance
-4 Maintainability
-5 SEO
-6 Developer experience
-
----
-
-END OF FILE

package/Dockerfile

@@ -1,37 +0,0 @@
-# Dockerize the Next.js application and run a production version in a container using this Dockerfile
-# Build stage
-FROM node:20-alpine AS builder
-
-WORKDIR /app
-
-# Copy package files
-COPY package*.json ./
-
-# Install dependencies
-RUN npm ci
-
-# Copy the rest of the application
-COPY . .
-
-# Build the application
-RUN npm run build
-
-# Production stage
-FROM node:20-alpine AS runner
-
-WORKDIR /app
-
-# Set environment variables
-ENV NODE_ENV=production
-
-# Copy necessary files from builder
-COPY --from=builder /app/next.config.ts ./
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next/standalone ./
-COPY --from=builder /app/.next/static ./.next/static
-
-# Expose the port the app runs on
-EXPOSE 3000
-
-# Command to run the application
-CMD ["node", "server.js"]

package/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

package/eslint.config.mjs

@@ -1,16 +0,0 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
-
-export default eslintConfig;