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

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.1`
+- **Version**: `2.1.3`
 - **License**: MIT
 - **Homepage**: [https://www.npmjs.com/package/create-next-mdx-blog-app](https://www.npmjs.com/package/create-next-mdx-blog-app/)
 
@@ -161,6 +161,15 @@ The project comes with its own `MDXImage` component that utilizes the Next.js bu
 
 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.
 
+### 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.
+
 ## 🖥️ Code Sandbox
 The project includes an interactive in-browser code execution environment powered by **Sandpack** (<b>route</b>: `/code-sandbox`).
 

package/package.json

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

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

@@ -3,6 +3,8 @@ 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 type { Metadata } from 'next';
 
 // Generate metadata for the Sample Blog Post page
@@ -21,7 +23,9 @@ 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} />

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

@@ -1,11 +1,13 @@
 import { Avatar } from "@radix-ui/react-avatar";
 import { Badge } from "./ui/badge";
 import ArticleCoverImage from "./ArticleCoverImage";
+import CopyLinkButton from "./CopyLinkButton";
+import SocialShareButtons from "./SocialShareButtons";
 import type { ArticleHeaderInfoType } from "@/utils/types";
 import Image from "next/image";
 
 // Article Header custom component
-export default function ArticleHeader({ articleHeaderInformation } : { articleHeaderInformation: ArticleHeaderInfoType }) {
+export default function ArticleHeader({ articleHeaderInformation } : { articleHeaderInformation: ArticleHeaderInfoType }): React.JSX.Element {
     return (
         <div className="mb-8">
             <Badge className="mb-3 bg-green-900/60 text-green-100 border border-green-500/50">
@@ -35,8 +37,13 @@ export default function ArticleHeader({ articleHeaderInformation } : { articleHe
                     </div>
                 </div>
             </div>
+            {/* Copy link and social share actions */}
+            <div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-4 sm:mb-6">
+                <CopyLinkButton />
+                <SocialShareButtons articleTitle={ articleHeaderInformation.articleTitle } />
+            </div>
             {/* Cover image */}
-            <ArticleCoverImage coverImageURL={ articleHeaderInformation.articleCoverImageURL.coverImageURL } />        
+            <ArticleCoverImage coverImageURL={ articleHeaderInformation.articleCoverImageURL.coverImageURL } />
         </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/CopyLinkButton.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+// Client Component — requires navigator.clipboard and window APIs
+export default function CopyLinkButton(): React.JSX.Element {
+    const [copied, setCopied] = useState<boolean>(false);
+
+    const handleCopy = async (): Promise<void> => {
+        try {
+            await navigator.clipboard.writeText(window.location.href);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } 
+        catch {
+            // Clipboard API unavailable — silently ignore
+        }
+    };
+
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            onClick={handleCopy}
+            className="border-green-500/40 bg-green-900/20 text-green-300 hover:bg-green-800/40 hover:text-green-200 transition-colors text-xs w-full sm:w-auto"
+            aria-label="Copy article link to clipboard"
+        >
+            {copied ? (
+                <Check className="h-4 w-4" aria-hidden="true" />
+            ) : (
+                <Copy className="h-4 w-4" aria-hidden="true" />
+            )}
+            {copied ? 'Copied!' : 'Copy Link'}
+        </Button>
+    );
+}

package/src/components/DynamicArticle.tsx

@@ -3,10 +3,12 @@ import ArticleAuthorBio from "@/components/ArticleAuthorBio";
 import ArticleHeader from "@/components/ArticleHeader";
 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";
 
 // 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);
   
@@ -15,7 +17,9 @@ export default async function DynamicArticle({ slug } : { slug: string }) {
   }
   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} />

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/SocialShareButtons.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import type SocialShareButtonsType from '@/utils/types/SocialShareButtonsType';
+import type { SocialPlatform } from '@/utils/types/SocialShareButtonsType';
+import { PLATFORM_CONFIG } from '@/utils/constants/SocialShareConstants';
+
+// Client Component — requires window APIs for share URL construction and popup
+export default function SocialShareButtons({ articleTitle }: SocialShareButtonsType): React.JSX.Element {
+    const handleShare = (platform: SocialPlatform): void => {
+        const encodedUrl = encodeURIComponent(window.location.href);
+        const encodedTitle = encodeURIComponent(articleTitle);
+        const shareUrl = PLATFORM_CONFIG[platform].buildUrl(encodedUrl, encodedTitle);
+        window.open(shareUrl, '_blank', 'noopener,noreferrer');
+    };
+
+    return (
+        <div className="flex items-center gap-2 flex-wrap w-full sm:w-auto">
+            <span className="text-xs sm:text-sm text-green-400/70">Share:</span>
+            {(Object.keys(PLATFORM_CONFIG) as SocialPlatform[]).map((platform) => (
+                <Button
+                    key={platform}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleShare(platform)}
+                    className="border-green-500/40 bg-green-900/20 text-green-300 hover:bg-green-800/40 hover:text-green-200 transition-colors text-xs px-3"
+                    aria-label={`Share on ${PLATFORM_CONFIG[platform].label}`}
+                >
+                    {PLATFORM_CONFIG[platform].label}
+                </Button>
+            ))}
+        </div>
+    );
+}

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/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/constants/SocialShareConstants.ts

@@ -0,0 +1,20 @@
+import type { PlatformConfig, SocialPlatform } from "@/utils/types/SocialShareButtonsType";
+
+// Social share platform configuration
+export const PLATFORM_CONFIG: Record<SocialPlatform, PlatformConfig> = {
+    twitter: {
+        label: 'X',
+        buildUrl: (encodedUrl, encodedTitle) =>
+            `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
+    },
+    linkedin: {
+        label: 'LinkedIn',
+        buildUrl: (encodedUrl) =>
+            `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+    },
+    reddit: {
+        label: 'Reddit',
+        buildUrl: (encodedUrl, encodedTitle) =>
+            `https://reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
+    },
+};

package/src/utils/constants/index.ts

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

package/src/utils/types/SocialShareButtonsType.ts

@@ -0,0 +1,13 @@
+// Social Share Buttons types
+export type SocialPlatform = 'twitter' | 'linkedin' | 'reddit';
+
+// Social Platform configuration
+export interface PlatformConfig {
+    label: string;
+    buildUrl: (encodedUrl: string, encodedTitle: string) => string;
+}
+
+// Social Share Button export
+export default interface SocialShareButtonsType {
+    articleTitle: string;
+}

package/src/utils/types/index.ts

@@ -9,3 +9,4 @@ export type { default as MDXImageType } from "./MDXImageType";
 export type { default as SandboxExampleType } from "./SandboxExampleType";
 export type { default as ToolConfigType } from "./ToolConfigType";
 export type { default as ToolInvocationPartType } from "./ToolInvocationPartType";
+export type { default as SocialShareButtonsType, SocialPlatform, PlatformConfig } from "./SocialShareButtonsType";