create-next-mdx-blog-app 2.0.0 → 2.1.1

package/.env.example

@@ -1,6 +1,17 @@
-# Supabase — required for dynamic blog post fetching
-SUPABASE_URL=
-SUPABASE_ANON_KEY=
-
-# Anthropic — required for the Blog Assistant chat feature
-ANTHROPIC_API_KEY=
+# 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/README.md

@@ -59,7 +59,7 @@ npx create-next-mdx-blog-app .
 ### Package Information
 
 - **Package Name**: `create-next-mdx-blog-app`
-- **Version**: `2.0.0`
+- **Version**: `2.1.1`
 - **License**: MIT
 - **Homepage**: [https://www.npmjs.com/package/create-next-mdx-blog-app](https://www.npmjs.com/package/create-next-mdx-blog-app/)
 
@@ -83,7 +83,7 @@ npx create-next-mdx-blog-app .
 - **@ai-sdk/anthropic**: Anthropic provider for the Vercel AI SDK, used to connect to Claude models.
 - **@ai-sdk/react**: React hooks (`useChat`) for building streaming AI chat interfaces.
 - **zod**: TypeScript-first schema validation library used to define and validate AI tool parameters.
-- **sonner**: Lightweight toast notification library used for user feedback in the Code Sandbox.
+- **sonner**: Lightweight toast notification library used for user feedback across the Code Sandbox, the `CodeBlock` copy button, and the GitHub Gist copy button.
 
 ## 🌐 Static/Dynamic Rendering with MDX
 This project utilizes MDX for both static and dynamic rendering of blog posts. The two MDX files included in the project serve as examples of how to structure your content.
@@ -111,19 +111,56 @@ The project includes a custom `CodeBlock` component for syntax highlighting code
 
 Default theme is set to the `vscDarkPlus` theme. Feel free to modify the theme and even add your own syntax highlighting library if you so choose.
 
-You can read more about the library used in this project <a href="https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/">here.</a>
+A **copy button** is rendered in the top-right corner of every code block. Clicking it writes the code to the clipboard and triggers a sonner toast notification confirming success or failure.
 
+You can read more about the library used in this project <a href="https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/">here.</a>
 
 ### GitHub Gists
-For safety and ease of use, GitHub Gists can be integrated into MDX files to manage code snippets with its own custom component.
+GitHub Gists can be embedded directly in MDX files using the `<GitHubGist>` custom component. The component fetches gist content live from the **GitHub REST API** at render time and caches the result for one hour via Next.js ISR (`next: { revalidate: 3600 }`).
+
+```mdx
+<GitHubGist id="your-gist-id" figCaptionText="Caption shown below the gist" />
+```
+
+#### How it works
+1. `GitHubGist` calls `https://api.github.com/gists/<id>` to retrieve metadata (file name, detected language).
+2. It then fetches the raw file content from the `raw_url` returned by the API.
+3. The language is mapped to a Prism-compatible token using the built-in `GITHUB_GIST_LANGUAGE_MAP` constant (70+ languages supported — see `src/utils/constants/GitHubGistConstants.ts`).
+4. The code is rendered via `GistCodeBlock` (syntax-highlighted with `react-syntax-highlighter`) inside a scrollable container with a custom green scrollbar (`scrollbar-gist`).
+
+#### mdxgists.net
+Each rendered gist includes a header bar with:
+- The detected **language badge**
+- A **Copy** button that writes the raw content to clipboard with a sonner toast confirmation
+- A **mdxgists.net** link that opens the gist on [mdxgists.net](https://mdxgists.net) — a companion site for browsing and sharing MDX-ready gists
+
+The mdxgists.net URL is constructed as `<GIST_BASE_URL>/<GITHUB_USERNAME>/<gist-id>` using values from `GitHubGistConstants.ts`. Both values can be overridden via environment variables (see below).
+
+#### Components
+- `src/components/customMDXComponents/GitHubGist.tsx` — async Server Component; fetches from GitHub API, resolves language, builds the mdxgists.net URL, renders the full gist UI
+- `src/components/customMDXComponents/GistCodeBlock.tsx` — syntax-highlighted code display using `react-syntax-highlighter`
+- `src/components/customMDXComponents/GistCopyButton.tsx` — `"use client"` component; copy-to-clipboard with sonner toast + mdxgists.net external link
+
+#### Language Detection
+The `GITHUB_GIST_LANGUAGE_MAP` in `src/utils/constants/GitHubGistConstants.ts` maps GitHub's reported language names to Prism-compatible identifiers. Over 70 languages are supported out of the box including TypeScript, Python, Rust, Go, Solidity, YAML, SQL, and more. If a language is not in the map, the component falls back to `language.toLowerCase()`. If no language is detected, it falls back to `text`.
+
+#### GitHub OAuth Token (optional but recommended)
+Unauthenticated requests to the GitHub API are rate-limited to **60 requests per hour** per IP. For production use, set a `GITHUB_TOKEN` environment variable to increase this to **5,000 requests per hour**:
 
-Note that only GitHub Gists that are publicly available are supported. You can modify the component to integrate private Gists.
+```bash
+# .env.local
+GITHUB_TOKEN=ghp_your_personal_access_token
+```
 
-This custom component also utilizes the `react-syntax-highlighter` package for syntax highlighting the publicly accessible GitHub gists.
+To generate a token: GitHub → Settings → Developer settings → Personal access tokens → Generate new token. The token only needs the **read-only** `gist` scope (or no scopes at all for public gists).
+
+> Only **public** gists are supported by default. The component can be modified to support private gists by adding the appropriate scopes to the token.
 
 ### MDX Images
 The project comes with its own `MDXImage` component that utilizes the Next.js built-in `Image` component as well as the built-in `figure` and `figcaption` elements to integrate imaging and captions seamlessly.
 
+Images are displayed inside a styled container with a **green glow border** and a **hover scale effect** consistent with the rest of the matrix-green design system.
+
 ## 🖥️ Code Sandbox
 The project includes an interactive in-browser code execution environment powered by **Sandpack** (<b>route</b>: `/code-sandbox`).
 
@@ -187,12 +224,18 @@ cp .env.example .env.local
 | `SUPABASE_URL` | Dynamic blog post fetching (Supabase client) |
 | `SUPABASE_ANON_KEY` | Dynamic blog post fetching (Supabase client) |
 | `ANTHROPIC_API_KEY` | Blog Assistant chatbot (`/api/chat` edge route) |
+| `GITHUB_TOKEN` | GitHub API authentication for `<GitHubGist>` — optional but raises rate limit from 60 to 5,000 req/hr |
+| `GITHUB_USERNAME` | Your GitHub username, used to construct the mdxgists.net URL (defaults to `CodingAbdullah`) |
+| `GIST_BASE_URL` | Base URL for mdxgists.net links (defaults to `https://mdxgists.net`) |
 
 ```
 # .env.local
 SUPABASE_URL=
 SUPABASE_ANON_KEY=
 ANTHROPIC_API_KEY=
+GITHUB_TOKEN=
+GITHUB_USERNAME=
+GIST_BASE_URL=
 ```
 
 ## 🌩️ AWS
@@ -210,7 +253,7 @@ docker build -t mdx-medium-blog .
 ``
 
 ``
-docker run -e SUPABASE_URL=your_supabase_url \ -e SUPABASE_ANON_KEY=your_supabase_anon_key \ -e ANTHROPIC_API_KEY=your_anthropic_api_key \ -p 3000:3000 mdx-medium-blog
+docker run -e SUPABASE_URL=your_supabase_url \ -e SUPABASE_ANON_KEY=your_supabase_anon_key \ -e ANTHROPIC_API_KEY=your_anthropic_api_key \ -e GITHUB_TOKEN=your_github_token \ -e GITHUB_USERNAME=your_github_username \ -e GIST_BASE_URL=https://mdxgists.net \ -p 3000:3000 mdx-medium-blog
 ``
 
 ## 🔄 CRUD Operations and Supabase Actions
@@ -227,7 +270,7 @@ The `/scripts` folder contains various scripts to help set up the project and da
 - **Bash Shell Script**: Script for setting up project on Linux, Mac, etc.
 
 ### GitHub Gist Fetcher
-The project includes a GitHub Gist fetcher script that downloads public GitHub Gist content and exports it to a text file for local use.
+> **Note:** This script is no longer required for rendering gists in MDX. The `<GitHubGist>` component now fetches content live from the GitHub API at render time. This script is retained for offline inspection or local caching workflows.
 
 **Location**: `/scripts/github-gist-fetcher/fetch-github-gist.ts`
 
@@ -270,6 +313,29 @@ The article slug is the name of the markdown file located in the `/src/markdown`
 
 The update statement takes in an additional parameter which is also the same thing (file name minus the `.mdx` extension located in the `/src/markdown` directory).
 
+## 📱 Mobile Responsiveness
+All components in the starter kit are built mobile-first using Tailwind CSS responsive prefixes (`sm:`, `md:`, `lg:`).
+
+Key responsive behaviours:
+
+| Component | Mobile behaviour |
+|---|---|
+| `ArticleHeader` | Title scales from `text-2xl` → `text-4xl`; author row stacks vertically on small screens |
+| `ArticleAuthorBio` | Avatar and text stack vertically; button goes full-width; text is center-aligned on mobile |
+| `GitHubGist` | Header wraps via `flex-wrap`; code area scrolls horizontally with a styled green scrollbar |
+| `CodeBlock` | Copy button is absolutely positioned and does not interfere with code flow |
+| `MDXImage` | Image container scales inline; hover effect applies on capable devices |
+| Chat & Code Sandbox | Responsive padding and height calculations across all breakpoints |
+
+The root layout exports a `viewport` configuration (via Next.js `Viewport` type) ensuring correct scaling on all mobile browsers:
+
+```ts
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+```
+
 ## 📊 Analytics
 Integrated in this setup project is Vercel Analytics (`@vercel/analytics`) to track user interactions and performance metrics of the blog.
 

package/mdx.d.ts

@@ -0,0 +1,5 @@
+declare module '*.mdx' {
+  import type { ComponentType } from 'react';
+  const component: ComponentType;
+  export default component;
+}

package/next.config.ts

@@ -1,5 +1,5 @@
 import createMDX from '@next/mdx';
- import type { NextConfig } from 'next';
+import type { NextConfig } from 'next';
 
 // Adding acceptable page extensions to be used in this application
 // Adding external domains to be used in this application

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-mdx-blog-app",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "bin": {
     "create-next-mdx-blog-app": "./bin/create.js"
   },
@@ -29,46 +29,46 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^3.0.0",
-    "@ai-sdk/react": "^3.0.99",
-    "@codesandbox/sandpack-react": "^2.13.5",
+    "@ai-sdk/anthropic": "^3.0.64",
+    "@ai-sdk/react": "^3.0.143",
+    "@codesandbox/sandpack-react": "^2.20.0",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^16.1.1",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@supabase/supabase-js": "^2.89.0",
+    "@next/mdx": "^16.2.1",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@supabase/supabase-js": "^2.101.0",
     "@types/mdx": "^2.0.13",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@vercel/analytics": "^1.6.1",
-    "ai": "^6.0.97",
+    "@vercel/analytics": "^2.0.1",
+    "ai": "^6.0.141",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "degit": "^2.8.4",
-    "execa": "^9.6.0",
+    "execa": "^9.6.1",
     "gray-matter": "^4.0.3",
-    "inquirer": "^8.2.6",
-    "lucide-react": "^0.562.0",
-    "next": "^16.1.1",
+    "inquirer": "^13.3.2",
+    "lucide-react": "^1.7.0",
+    "next": "^16.2.1",
     "next-mdx-remote": "^6.0.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-syntax-highlighter": "^15.6.1",
-    "sonner": "^1.7.4",
-    "tailwind-merge": "^3.3.0",
-    "tsx": "^4.19.4",
-    "zod": "^3.24.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-syntax-highlighter": "^16.1.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tsx": "^4.21.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
-    "@types/node": "^20.17.58",
+    "@types/node": "^25.5.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.2",
+    "eslint": "^10",
+    "eslint-config-next": "16.2.1",
     "tailwindcss": "^4",
-    "tw-animate-css": "^1.3.2",
-    "typescript": "5.9.3"
+    "tw-animate-css": "^1.4.0",
+    "typescript": "6.0.2"
   }
 }

package/src/app/globals.css

@@ -174,4 +174,51 @@
   .matrix-scrollbar::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 200, 0, 0.5);
   }
+
+  /* Enhanced scrollbar for GitHub gist component */
+  .scrollbar-gist {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(34, 197, 94, 0.7) rgba(15, 23, 42, 0.8);
+  }
+
+  .scrollbar-gist::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  .scrollbar-gist::-webkit-scrollbar-track {
+    background: rgba(15, 23, 42, 0.9);
+    border-radius: 6px;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .scrollbar-gist::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg,
+                rgba(34, 197, 94, 0.9) 0%,
+                rgba(22, 163, 74, 0.8) 30%,
+                rgba(21, 128, 61, 0.7) 70%,
+                rgba(34, 197, 94, 0.9) 100%);
+    border-radius: 6px;
+    border: 1px solid rgba(34, 197, 94, 0.4);
+    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5),
+                inset 0 1px 0 rgba(34, 197, 94, 0.3);
+    transition: all 0.3s ease;
+  }
+
+  .scrollbar-gist::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg,
+                rgba(34, 197, 94, 1) 0%,
+                rgba(22, 163, 74, 0.9) 30%,
+                rgba(21, 128, 61, 0.8) 70%,
+                rgba(34, 197, 94, 1) 100%);
+    box-shadow: 0 0 12px rgba(34, 197, 94, 0.7),
+                inset 0 1px 0 rgba(34, 197, 94, 0.4);
+    transform: scale(1.05);
+  }
+
+  .scrollbar-gist::-webkit-scrollbar-corner {
+    background: rgba(15, 23, 42, 0.9);
+    border: 1px solid rgba(34, 197, 94, 0.2);
+  }
 }

package/src/app/layout.tsx

@@ -1,6 +1,12 @@
 import "@/app/globals.css";
 import { Analytics } from "@vercel/analytics/next";
 import { Toaster } from "sonner";
+import type { Viewport } from "next";
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
 
 // Root Layout for the simple Next.js application
 export default function RootLayout({

package/src/components/ArticleAuthorBio.tsx

@@ -7,16 +7,16 @@ import type { ArticleAuthorInfoType } from "@/utils/types";
 // Article Author Bio Section component
 export default function ArticleAuthorBio({ authorInformation }: { authorInformation: ArticleAuthorInfoType }) {
     return (
-        <div className="glass-card p-6 mb-12">
-            <div className="flex items-start">
-              <Avatar className="h-16 w-16 mr-6 border-2 border-green-500/30">
+        <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">
+              <Avatar className="mr-0 sm:mr-6 mb-4 sm:mb-0 border-2 border-green-500/30">
                 <Image src={authorInformation.authorProfileImageURL} alt="No Name" width={64} height={64} className="rounded-full object-cover" />
               </Avatar>
-              <div>
-                <h3 className="text-xl font-semibold mb-2 matrix-glow text-green-300">{authorInformation.authorName}</h3>
-                <p className="text-green-200/80 mb-3">{authorInformation.authorDescription}</p>
+              <div className="text-center sm:text-left w-full">
+                <h3 className="text-lg sm:text-xl font-semibold mb-2 matrix-glow text-green-300">{authorInformation.authorName}</h3>
+                <p className="text-green-200/80 mb-3 text-sm sm:text-base">{authorInformation.authorDescription}</p>
                 <Link href="/">
-                  <Button className="bg-green-600 hover:bg-green-700 text-white border-none">
+                  <Button className="bg-green-600 hover:bg-green-700 text-white border-none w-full sm:w-auto text-sm sm:text-base">
                     Go Back To Home Page
                   </Button>
                 </Link>

package/src/components/ArticleHeader.tsx

@@ -11,26 +11,28 @@ export default function ArticleHeader({ articleHeaderInformation } : { articleHe
             <Badge className="mb-3 bg-green-900/60 text-green-100 border border-green-500/50">
                 { articleHeaderInformation.articleTags[0] }
             </Badge>
-            <h1 className="text-3xl md:text-5xl font-bold mb-6 matrix-glow leading-tight text-green-300">
+            <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-6 matrix-glow leading-tight text-green-300">
                 { articleHeaderInformation.articleTitle }
             </h1>
-            <p className="text-xl text-green-200/80 mb-6 leading-relaxed">
+            <p className="text-base sm:text-xl text-green-200/80 mb-4 sm:mb-6 leading-relaxed">
                 { articleHeaderInformation.articleDescription }
-            </p>         
+            </p>
             {/* Author info and publish date */}
-            <div className="flex items-center mb-6">
-                <Avatar className="h-12 w-12 mr-4 border-2 border-green-500/30">
-                    <Image src={ articleHeaderInformation.articleAuthorInfo.authorProfileImageURL } alt="No Name Exists" width={48} height={48} className="rounded-full object-cover" />
-                </Avatar>
-                <div>
-                    <p className="font-medium text-green-300">{ articleHeaderInformation.articleAuthorInfo.authorName }</p>
-                    <p className="text-sm text-green-400/70">
-                    Published on {new Date(Date.now()).toLocaleDateString('en-US', {
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric'
-                    })} • { articleHeaderInformation.articleReadingTime }
-                    </p>
+            <div className="flex flex-col sm:flex-row sm:items-center mb-4 sm:mb-6 space-y-2 sm:space-y-0">
+                <div className="flex items-center">
+                    <Avatar className="h-10 w-10 sm:h-12 sm:w-12 mr-3 sm:mr-4 border-2 border-green-500/30">
+                        <Image src={ articleHeaderInformation.articleAuthorInfo.authorProfileImageURL } alt="No Name Exists" width={48} height={48} className="rounded-full object-cover" />
+                    </Avatar>
+                    <div>
+                        <p className="font-medium text-green-300 text-sm sm:text-base">{ articleHeaderInformation.articleAuthorInfo.authorName }</p>
+                        <p className="text-xs sm:text-sm text-green-400/70">
+                        Published on {new Date(Date.now()).toLocaleDateString('en-US', {
+                            year: 'numeric',
+                            month: 'long',
+                            day: 'numeric'
+                        })} • { articleHeaderInformation.articleReadingTime }
+                        </p>
+                    </div>
                 </div>
             </div>
             {/* Cover image */}

package/src/components/customMDXComponents/CodeBlock.tsx

@@ -1,19 +1,64 @@
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-
-// Custom code block component for handling code in MDX files
-// Visual Studio Code Dark Plus theme
-const CodeBlock = ({ className = '', children }: { className?: string; children: string }) => {
-  const match = /language-(\w+)/.exec(className || '')
-  return (
-    <SyntaxHighlighter 
-      language={match?.[1] || 'text'} 
-      style={vscDarkPlus}
-      className="rounded-lg"
-    >
-      {String(children).trim()}
-    </SyntaxHighlighter>
-  )
-}
-
-export default CodeBlock;
+"use client";
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+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 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 () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      toast.success('Code copied!', {
+        style: {
+          background: '#0d1117',
+          border: '1px solid #22c55e',
+          color: 'white'
+        }
+      });
+    }
+    catch {
+      toast.error('Failed to copy code', {
+        style: {
+          background: '#0d1117',
+          border: '1px solid #22c55e',
+          color: 'white'
+        }
+      });
+    }
+  };
+
+  return (
+    <div className="relative my-6 group">
+      <div className="absolute top-3 right-3 z-10">
+        <button
+          onClick={copyToClipboard}
+          className="flex items-center gap-1 text-xs text-green-400/70 hover:text-green-300 transition-colors duration-200 bg-black/60 hover:bg-black/80 px-2 py-1 rounded border border-green-500/20 backdrop-blur-sm"
+        >
+          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+          </svg>
+          Copy
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={vscDarkPlus}
+        className="rounded-lg"
+        customStyle={{
+          paddingTop: '2rem',
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+export default CodeBlock;

package/src/components/customMDXComponents/GistCodeBlock.tsx

@@ -0,0 +1,19 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+interface GistCodeBlockProps {
+  content: string;
+  language: string;
+}
+
+export default function GistCodeBlock({ content, language }: GistCodeBlockProps) {
+  return (
+    <SyntaxHighlighter
+      language={language}
+      style={vscDarkPlus}
+      customStyle={{ margin: 0, background: 'transparent', fontSize: '0.875rem' }}
+    >
+      {content}
+    </SyntaxHighlighter>
+  );
+}

package/src/components/customMDXComponents/GistCopyButton.tsx

@@ -0,0 +1,57 @@
+"use client";
+import { toast } from 'sonner';
+
+interface GistCopyButtonProps {
+  content: string;
+  mdxGHGistURL: string;
+}
+
+export default function GistCopyButton({ content, mdxGHGistURL }: GistCopyButtonProps) {
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      toast.success('GitHub Gist copied!', {
+        style: {
+          background: '#0d1117',
+          border: '1px solid #22c55e',
+          color: 'white'
+        }
+      });
+    }
+    catch {
+      toast.error('Failed to copy GitHub Gist', {
+        style: {
+          background: '#0d1117',
+          border: '1px solid #22c55e',
+          color: 'white'
+        }
+      });
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2 shrink-0">
+      <button
+        onClick={copyToClipboard}
+        className="flex items-center gap-1 text-xs text-green-400/70 hover:text-green-300 transition-colors duration-200 bg-green-500/10 hover:bg-green-500/20 px-2 py-1 rounded border border-green-500/20"
+      >
+        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+          <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+        </svg>
+        Copy
+      </button>
+      <a
+        href={mdxGHGistURL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-1 text-xs text-green-400/70 hover:text-green-300 transition-colors duration-200 bg-green-500/10 hover:bg-green-500/20 px-2 py-1 rounded border border-green-500/20"
+      >
+        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+        mdxgists.net
+      </a>
+    </div>
+  );
+}

package/src/components/customMDXComponents/GitHubGist.tsx

@@ -1,44 +1,84 @@
-// components/customMDXComponents/GitHubGist.tsx
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import type { GitHubGistType } from '@/utils/types';
-import fs from 'fs';
-import path from 'path';
-
-// GitHub Gist custom component
-// Read the requested GitHub Gist content from local file using its ID
-async function GitHubGist({ id, figCaptionText }: GitHubGistType) {
-  let content = '';
-  let error = null;
-
-  // Run a try-catch to ensure errors are caught and handled gracefully
-  try {
-    const filePath = path.join(process.cwd(), 'src', 'github_gists', `${id}.txt`);
-    
-    if (!fs.existsSync(filePath)) {
-      throw new Error("GitHub gist could not load");
-    }
-    
-    content = fs.readFileSync(filePath, 'utf8');
-  } 
-  catch {
-    error = "GitHub gist could not load";
-  }
-
-  // Show error state
-  if (error) {
-    return <div className="text-red-600 bg-red-100 p-4 rounded-lg">{error}</div>;
-  }
-
-  // Render the GitHub Gist component using React-Syntax-Highlighting
-  return (
-    <figure className='text-center'>
-      <SyntaxHighlighter language="javascript" style={vscDarkPlus}>
-        {content}
-      </SyntaxHighlighter>
-      <figcaption className="mb-4 leading-relaxed text-green-200/90">{figCaptionText}</figcaption>
-    </figure>
-  );
-}
-
-export default GitHubGist;
+import type GitHubGistType from '@/utils/types/GitHubGistType';
+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) {
+  try {
+    const headers: HeadersInit = {
+      'Accept': 'application/vnd.github.v3+json',
+    };
+
+    if (process.env.GITHUB_TOKEN) {
+      headers['Authorization'] = `Bearer ${process.env.GITHUB_TOKEN}`;
+    }
+
+    const response = await fetch(`https://api.github.com/gists/${id}`, {
+      headers,
+      next: { revalidate: 3600 },
+    });
+
+    if (!response.ok) {
+      return (
+        <div className="text-red-400 bg-red-950/30 border border-red-500/30 p-4 rounded-lg font-mono text-sm">
+          Could not load GitHub Gist ({response.status})
+        </div>
+      );
+    }
+
+    const data = await response.json();
+    const firstFileKey = Object.keys(data.files)[0];
+    const firstFile = data.files[firstFileKey];
+
+    const rawResponse = await fetch(firstFile.raw_url, {
+      headers: process.env.GITHUB_TOKEN
+        ? { 'Authorization': `Bearer ${process.env.GITHUB_TOKEN}` }
+        : {},
+      next: { revalidate: 3600 },
+    });
+
+    const content = await rawResponse.text();
+    const language: string | null = firstFile.language;
+    const prismLanguage = language
+      ? (GITHUB_GIST_LANGUAGE_MAP[language] ?? language.toLowerCase())
+      : 'text';
+    const mdxGHGistURL = `${GIST_BASE_URL}/${GITHUB_USERNAME}/${id}`;
+
+    return (
+      <figure className="my-6">
+        <div className="relative bg-gray-900/30 rounded-lg border-2 border-green-500 shadow-[0_0_15px_rgba(34,197,94,0.3)] overflow-hidden">
+          {/* Header */}
+          <div className="flex flex-wrap items-center justify-between gap-2 px-4 py-2 bg-gray-800/50 border-b border-green-500/30">
+            <div className="flex items-center gap-2">
+              <svg className="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+              </svg>
+              <span className="text-sm text-green-200 font-medium">GitHub Gist</span>
+              {language && (
+                <span className="text-xs text-green-600 font-mono border border-green-500/20 px-1.5 py-0.5 rounded">
+                  {language}
+                </span>
+              )}
+            </div>
+            <GistCopyButton content={content} mdxGHGistURL={mdxGHGistURL} />
+          </div>
+
+          {/* Code */}
+          <div className="scrollbar-gist overflow-auto max-h-96">
+            <GistCodeBlock content={content} language={prismLanguage} />
+          </div>
+        </div>
+        <figcaption className="mt-3 mb-4 leading-relaxed text-green-200/90 text-sm font-medium text-center">
+          {figCaptionText}
+        </figcaption>
+      </figure>
+    );
+  }
+  catch (err) {
+    return (
+      <div className="text-red-400 bg-red-950/30 border border-red-500/30 p-4 rounded-lg font-mono text-sm">
+        Could not load GitHub Gist: {err instanceof Error ? err.message : String(err)}
+      </div>
+    );
+  }
+}

package/src/components/customMDXComponents/MDXImage.tsx

@@ -1,21 +1,23 @@
-import Image from "next/image";
-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) {
-    return (
-        <figure className='text-center'>
-            <Image
-                className='mx-auto'
-                src={imageProperties.src} 
-                height={imageProperties.height} 
-                width={imageProperties.width}
-                alt={imageProperties.alt} 
-            />
-            <figcaption className="mb-4 leading-relaxed text-green-200/90">
-                {imageProperties.figcaption}
-            </figcaption>
-        </figure>
-    )
-}
+import Image from "next/image";
+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) {
+    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]">
+                <Image
+                    className='mx-auto rounded-md transition-transform duration-300'
+                    src={imageProperties.src}
+                    height={imageProperties.height}
+                    width={imageProperties.width}
+                    alt={imageProperties.alt}
+                />
+            </div>
+            <figcaption className="mt-3 mb-4 leading-relaxed text-green-200/90 text-sm font-medium">
+                {imageProperties.figcaption}
+            </figcaption>
+        </figure>
+    );
+}

package/src/markdown/ArticleContent.mdx

@@ -92,7 +92,7 @@
 
     > "The Virtual DOM is useful not because it's faster, but because it allows React to do declarative programming while maintaining good performance." - Dan Abramov, React core team
 
-    ![React Virtual DOM visualization](https://mdx-blog-bucket.s3.us-east-2.amazonaws.com/blog-article-image.PNG)
+    <MDXImage src="https://mdx-blog-bucket.s3.us-east-2.amazonaws.com/blog-article-image.PNG" height="50" width="50" alt="No Image Found" figcaption="This is an image" />
 
     ## When to Worry About Re-renders
 
@@ -104,5 +104,4 @@
 
     ## Conclusion
 
-    The Virtual DOM is a powerful abstraction that allows for a simpler mental model when building UI components. It enables React's declarative programming style while maintaining good performance through efficient updates to the DOM.
-    `
+    The Virtual DOM is a powerful abstraction that allows for a simpler mental model when building UI components. It enables React's declarative programming style while maintaining good performance through efficient updates to the DOM.

package/src/utils/constants/GitHubGistConstants.ts

@@ -0,0 +1,77 @@
+export const GITHUB_USERNAME = process.env.GITHUB_USERNAME ?? "CodingAbdullah";
+export const GIST_BASE_URL = process.env.GIST_BASE_URL ?? "https://mdxgists.net";
+
+export const GITHUB_GIST_LANGUAGE_MAP: Record<string, string> = {
+  'Assembly': 'asm',
+  'Bash': 'bash',
+  'C': 'c',
+  'C#': 'csharp',
+  'C++': 'cpp',
+  'Cairo': 'cairo',
+  'Clojure': 'clojure',
+  'Crystal': 'crystal',
+  'CSS': 'css',
+  'Dart': 'dart',
+  'Diff': 'diff',
+  'Dockerfile': 'dockerfile',
+  'Elixir': 'elixir',
+  'Erlang': 'erlang',
+  'F#': 'fsharp',
+  'GLSL': 'glsl',
+  'Go': 'go',
+  'GraphQL': 'graphql',
+  'GraphQL Schema': 'graphql',
+  'Groovy': 'groovy',
+  'Haml': 'haml',
+  'Handlebars': 'handlebars',
+  'Haskell': 'haskell',
+  'HCL': 'hcl',
+  'HTML': 'html',
+  'INI': 'ini',
+  'Java': 'java',
+  'JavaScript': 'javascript',
+  'JSON': 'json',
+  'JSX': 'jsx',
+  'Julia': 'julia',
+  'Kotlin': 'kotlin',
+  'Less': 'less',
+  'Liquid': 'liquid',
+  'Lua': 'lua',
+  'Makefile': 'makefile',
+  'Markdown': 'markdown',
+  'MATLAB': 'matlab',
+  'Maven POM': 'xml',
+  'MDX': 'mdx',
+  'Nginx': 'nginx',
+  'Nim': 'nim',
+  'OCaml': 'ocaml',
+  'Perl': 'perl',
+  'PHP': 'php',
+  'PowerShell': 'powershell',
+  'Protocol Buffer': 'protobuf',
+  'Pug': 'pug',
+  'Python': 'python',
+  'R': 'r',
+  'Ruby': 'ruby',
+  'Rust': 'rust',
+  'Sass': 'sass',
+  'Scala': 'scala',
+  'SCSS': 'scss',
+  'Shell': 'bash',
+  'Solidity': 'solidity',
+  'SPARQL': 'sparql',
+  'SQL': 'sql',
+  'Svelte': 'svelte',
+  'Swift': 'swift',
+  'Terraform': 'terraform',
+  'TOML': 'toml',
+  'TSX': 'tsx',
+  'TypeScript': 'typescript',
+  'V': 'v',
+  'Vue': 'vue',
+  'Vyper': 'vyper',
+  'WebAssembly': 'wasm',
+  'XML': 'xml',
+  'YAML': 'yaml',
+  'Zig': 'zig',
+};

package/src/utils/constants/index.ts

@@ -8,3 +8,4 @@ export {
     JS_EXAMPLES,
     TS_EXAMPLES,
 } from "./SandboxExamples";
+export { GITHUB_USERNAME, GITHUB_GIST_LANGUAGE_MAP, GIST_BASE_URL } from "./GitHubGistConstants";

package/tsconfig.json

@@ -36,6 +36,7 @@
   ],
   "include": [
     "next-env.d.ts",
+    "mdx.d.ts",
     "**/*.mdx",
     "**/*.ts",
     "**/*.tsx",
@@ -45,4 +46,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}