create-next-mdx-blog-app 1.0.0

package/Dockerfile

@@ -0,0 +1,37 @@
+# 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/README.md

@@ -0,0 +1,182 @@
+# 🌟 Next-MDX-Blog-Starter
+## 📖 Introduction
+This project is inspired by the elegant design and functionality of **Loveable**. It leverages the **Claude Sonnet 4** model for development, ensuring a robust and efficient coding experience. 
+
+The goal of this repository is to serve as a comprehensive starter kit for working with static and dynamic content using MDX, React, and Next.js (more specifically the App Router).
+
+## ⚙️ Project Setup
+
+### Prerequisites
+- **Node.js**: Ensure you have Node.js installed (version 15.x or later).
+- **NPM**: Node Package Manager comes with Node.js.
+
+### Installation
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/CodingAbdullah/Next-MDX-Blog-Starter.git
+   cd mdx-medium-blog-post-provider
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Start the development server:
+   ```bash
+   npm run dev
+   ```
+
+If you want, you can also run this project using the following command:
+   ```bash
+   npx create-next-blog-app .
+   ```
+This will instantly create and setup the starter kit project for you to work on.
+
+## 🛠️ Tools
+### AI Tools
+- **Cursor**: An AI-powered coding assistant that enhances productivity and code quality.
+- **Loveable**: A design inspiration that emphasizes user-friendly interfaces and experiences.
+- **Claude Sonnet 4**: A model that aids in development, providing intelligent suggestions and optimizations.
+
+### Common NPM Libraries
+- **mdx**: A markdown format that allows you to write JSX in your markdown files, enabling rich content.
+- **Supabase**: An open-source Firebase alternative that provides a backend as a service, including database and authentication.
+- **shadcn/ui**: A collection of UI components designed for building modern web applications.
+- **lucide-react**: A set of customizable icons for React applications, enhancing visual appeal.
+- **gray-matter**: A library for parsing front matter from markdown files, useful for managing metadata.
+- **react**: A JavaScript library for building user interfaces, allowing for the creation of reusable UI components.
+- **react-syntax-highlighter**: A library for syntax highlighting in React applications, making code snippets more readable.
+- **tsx**: Run TypeScript code without worrying about configuration! Run the `article-manager.ts` for manually working with published articles.
+
+## 🌐 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.
+
+- **Static MDX**: Pre-rendered at build time (<b>route</b>: `/app/sample-blog-post-page`, <b>article content</b>: `/markdown/ArticleContent.mdx`).
+- **Dynamic MDX**: Rendered on the server at request time (<b>route</b>: `/app/dynamic`, <b>article content</b>: `/markdown/DynamicArticleContent.mdx`).
+
+### Article Metadata
+`.mdx` files can contain useful information that can be thought of as metadata for the file itself. This is called frontmatter and it is stored at the top of the file using this `---` opening and closing syntax.
+
+A helpful package known as `gray-matter` is used to format and separate frontmatter from the article content which is useful when fetching and rendering dynamic MDX content.
+
+Dynamic MDX content is rendered with the help of the `next-mdx-remote` package and utilizing the `MDXRemote` custom component.
+
+## 🖼️ MDX Components File
+The `mdx-components.tsx` file located in the root, integrates styling for built-in HTML elements as well as optimizing built-in elements such as `<a>` and `<img>` using the built-in components provided by Next.js (`<Image>` and `<Link>`). 
+
+For more details on what this file is and how it is utilized in a Next.js application, you can refer to the official docs here.
+
+## 🧩 Custom React Components
+Custom React components are created for enhanced functionality when working with MDX. The following are located in the `customMDXComponents` directory inside the `components` directory of the project.
+
+### Syntax Highlighting
+The project includes a custom `CodeBlock` component for syntax highlighting code blocks using the `react-syntax-highlighter` package. 
+
+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 here.
+
+### 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. Note that only GitHub Gists that are publicly available are supported. You can modify the component to integrate private Gists.
+
+This custom component also utilizes the `react-syntax-highlighter` package for syntax highlighting the publicly accessible GitHub gists.
+
+### 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.
+
+## 🧩 Constants, Functions, & Types
+In this project, you will find custom constants, functions, and types in the `/src/utils/` directory. Certain constants serve as placeholders in this demo application. While functions and data types are integral to the function of this web application, feel free to check them out.
+
+## 🗄️ Supabase Database Setup
+The project uses Supabase for database management. The `SupabaseClient` module is configured to interact with your Supabase instance. The instance is located in `/src/utils/functions/supabase_client`.
+
+**Ensure that the policies of the Supabase database enable you to perform the desired CRUD actions against your tables. You can modify these in the Supabase console.**
+
+### Environment Variables
+Create a `.env` file in the root directory and add your Supabase secrets:
+
+``
+SUPABASE_URL=your_supabase_url
+``
+
+``
+SUPABASE_ANON_KEY=your_supabase_anon_key
+``
+
+## 🌩️ AWS
+This application utilizes the AWS S3 service for the storage of images. You can find the external URL used to access these objects in the `next.config.ts` file. Feel free to use another service or modify the URL to point to a S3 bucket of your own.
+
+Images are used in the `.mdx` files and utilized via the custom `MDXImage` component covered earlier.
+
+## 🐳 Docker
+This application can be containerized using Docker. 
+
+To build an image, utilize the Dockerfile located in the root location of the repository and run the following commands to run this web application in a standalone container (passing in the Supabase credentials as well):
+
+``
+docker build -t mdx-medium-blog .
+``
+
+``
+docker run -e SUPABASE_URL=your_supabase_url \
+           -e SUPABASE_ANON_KEY=your_supabase_anon_key \
+           -p 3000:3000 mdx-medium-blog
+``
+
+## 🔄 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.
+
+The `article-manager.ts` file utilizes these CRUD functions to successfully perform the desired actions.
+
+## 📜 Scripts for Setting Up Project
+The `/scripts` folder contains various scripts to help set up the project and database.
+
+### Setup Scripts
+- **SQL Scripts**: DDL and DML statements for initializing and populating the database.
+- **Powershell Script**: Script for setting up project on Windows.
+- **Bash Shell Script**: Script for setting up project on Linux, Mac, etc.
+
+This project directly integrates Supabase in the front-end using React Server components which removes the need for custom back-end APIs.
+
+## 🛠️ Compiling TypeScript and Testing Locally
+The `article-manager.ts` file (located in `/scripts/action-script`) utilizes the `tsx` package to perform the different actions (CRUD operations) on articles stored locally.
+
+You can use this handy script for testing MDX and article functionality locally.
+
+The following codeblock highlights the different command prompts that can be used with this file:
+
+    - Insert an Article into Supabase
+    npx tsx article-manager.ts insert article-slug
+
+    - Delete an Article from Supabase
+    npx tsx article-manager.ts delete article-slug
+
+    - Update an Article in Supabase
+    npx tsx article-manager.ts update article-slug new-article-file
+
+    - Fetch a Single Article from Supabase
+    npx tsx article-manager.ts fetch article-slug
+
+    - Fetch all Articles from Supabase
+    npx tsx article-manager.ts fetchAll
+
+The article slug is the name of the markdown file located in the `/src/markdown` directory minus the extension, `.mdx`.
+
+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).
+
+## 📊 Analytics
+Integrated in this setup project is Vercel Analytics (`@vercel/analytics`) to track user interactions and performance metrics of the blog.
+
+## ⚙️ Next.js Configuration
+The `next.config.ts` file is set up for working with AWS S3 and includes MDX extensions for enhanced functionality. Feel free to modify and add your own custom links to access storage and setting up other configurations.
+
+## 🔗 Useful Links
+- [Next.js Documentation](https://nextjs.org/docs)
+- [MDX Documentation](https://mdxjs.com/docs/)
+- [Lee Robinson's Next.js + MDX Tutorial Video](https://www.youtube.com/watch?v=34bRv6cQezo&ab_channel=leerob)
+- [MDX Playground](https://mdxjs.com/playground/)
+- [React Documentation](https://reactjs.org/docs/getting-started.html)
+- [Supabase Documentation](https://supabase.com/docs)
+- [Docker Documentation](https://docs.docker.com/)
+- [React Syntax Highlighter Package](https://github.com/react-syntax-highlighter/react-syntax-highlighter)

package/cli.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+const execa = require('execa');
+const fs = require('fs');
+const path = require('path');
+const inquirer = require('inquirer');
+
+// Script for setting up CLI command for setting up project
+async function setup() {
+  // Check if we are inside a project folder
+  const cwd = process.cwd();
+  const hasPackageJson = fs.existsSync(path.join(cwd, 'package.json'));
+
+  if (hasPackageJson) {
+    console.log('You already have a project setup here.');
+    return;
+  }
+
+  // Ask user for confirmation to set up
+  const answers = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'install',
+      message: 'Do you want to set up a Next.js blog app here?',
+      default: true,
+    },
+  ]);
+
+  if (!answers.install) {
+    console.log('Aborted the installation.');
+    return;
+  }
+
+  console.log('Setting up the project...');
+
+  // Initialize npm and install dependencies
+  try {
+    // Initialize package.json
+    await execa('npm', ['init', '-y']);
+
+    // Install dependencies
+    await execa('npm', ['install'], {
+      stdio: 'inherit',
+    });
+
+    console.log('Next.js Blog setup completed!');
+  } catch (error) {
+    console.error('Error during setup:', error);
+  }
+}
+
+setup();

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$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

@@ -0,0 +1,16 @@
+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;

package/mdx-components.tsx

@@ -0,0 +1,208 @@
+import type { MDXComponents } from 'mdx/types';
+import Image, { ImageProps } from 'next/image';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import CodeBlock from '@/components/customMDXComponents/CodeBlock';
+import GitHubGist from '@/components/customMDXComponents/GitHubGist';
+import MDXImage from '@/components/customMDXComponents/MDXImage';
+// Custom MDX components for writing Medium article style blog posts
+// Optimize Links and Images using Image and Link built-in components replacing img, a tags
+// Code blocks, a, b, u, i, img, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, custom component for handling GitHub Gists
+// React-Syntax-Highlighting for Code Blocks (GitHub Gists) (integrate into MDX components file)
+// Supabase containing Article Metadata (Name, Subtitle, Tags, Date, Slug, Description, etc.)
+// *Check to see if Supabase can be used to store article content*
+// Map markdown slugs to dynamic file path routing, loading static files
+// Supabase for storing article metadata (article content?)
+// AWS S3 for article images, thumbnails, etc.
+// Gray Matter for MDX content metadata
+// Dockerize the application
+// Separate branch for SvelteKit version
+// npx command script for downloading starting template
+// Powershell/Shell script for creating the npx command script
+// NPM package publishing as well
+/*
+// Example of Metadata for a MDX file
+---
+title: "Understanding SEO in MDX"
+description: "A guide on how to optimize MDX pages for search engines"
+author: "John Doe"
+date: "2025-05-28"
+tags: ["SEO", "MDX", "React"]
+slug: "/seo-in-mdx"
+---
+*/
+
+// MDX Components mapper for both built-in and custom components
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    h1: ({ children, ...props }) => (
+      <h1 {...props} className={cn("text-3xl font-bold text-green-300 matrix-glow mt-8 mb-4", props.className)}>
+      {children}
+      </h1>
+    ),
+    h2: ({ children, ...props }) => (
+      <h2 {...props} className={cn("text-2xl font-bold text-green-300 matrix-glow mt-8 mb-4 border-b border-green-500/20 pb-2", props.className)}>
+        {children}
+      </h2>
+    ),
+    h3: ({ children, ...props }) => (
+      <h3 {...props} className={cn("text-xl font-bold text-green-300  matrix-glow mt-6 mb-3", props.className)}>
+        {children}
+      </h3>
+    ),
+    h4: ({ children, ...props }) => (
+      <h4 {...props} className={cn("text-lg font-bold text-green-300 matrix-glow mt-6 mb-2", props.className)}>
+        {children}
+      </h4>
+    ),
+    h5: ({ children, ...props }) => (
+      <h5 {...props} className={cn("text-base font-bold text-green-300  matrix-glow mt-4 mb-2", props.className)}>
+        {children}
+      </h5>
+    ),
+    h6: ({ children, ...props }) => (
+      <h6 {...props} className={cn("text-base font-bold text-green-300 mt-4 mb-2", props.className)}>
+        {children}
+      </h6>
+    ),
+    p: ({ children, ...props }) => {
+      // Check if the children is a code block
+      if (typeof children === 'string' && children.startsWith('```')) {
+        return <>{children}</>;
+      }
+      return (
+        <p {...props} className={cn("mb-4 leading-relaxed text-green-200/90", props.className)}>
+          {children}
+        </p>
+      );
+    },
+    a: ({ children, href, ...props }) => {
+      if (href?.startsWith('/')) {
+        return (
+          <Link href={href} className={cn("text-green-400 hover:text-green-300 underline", props.className)} {...props}>
+            {children}
+          </Link>
+        );
+      }
+      else if (href?.startsWith('https') || href?.startsWith('http')) {
+        return (
+          <a href={href} className={cn("text-green-400 hover:text-green-300 underline", props.className)} {...props}>
+            {children}
+          </a>
+        );
+      }
+      else {
+        return (
+          <Link
+            {...props} 
+            href={href || ''}
+            className={cn("text-green-400 hover:text-green-300 underline", props.className)}>
+            {children}
+          </Link>
+        );
+      }
+    },
+    ul: ({ children, ...props }) => (
+      <ul {...props} className={cn("list-disc pl-6 mb-4 space-y-1", props.className)}>
+        {children}
+      </ul>
+    ),
+    ol: ({ children, ...props }) => (
+      <ol {...props} className={cn("list-decimal pl-6 mb-4 space-y-1", props.className)}>
+        {children}
+      </ol>
+    ),
+    li: ({ children, ...props }) => (
+      <li {...props} className={cn("mb-1 text-green-200/90", props.className)}>
+        {children}
+      </li>
+    ),
+    blockquote: ({ children, ...props }) => (
+      <blockquote 
+        {...props} 
+        className={cn("border-l-4 border-green-500/50 pl-4 py-1 mb-4 text-green-200/80 italic", props.className)}
+      >
+        {children}
+      </blockquote>
+    ),
+    img: (props) => (
+      <Image
+        width={50}
+        height={50}
+        sizes="100vw"
+        style={{ width: '50%', height: 'auto' }}
+        {...(props as ImageProps)}
+      />
+    ),
+    pre: ({ children, ...props }) => {
+      const codeChild = 
+        typeof children === 'object' && 
+        children && 
+        'props' in children &&
+        children.props;
+    
+      if (codeChild) {
+        const { className, children: codeContent } = codeChild;
+    
+        return (
+          <CodeBlock className={className}>
+            {codeContent}
+          </CodeBlock>
+        );
+      }
+    
+      return (
+        <pre {...props} className={cn("not-prose my-6", props.className)}>
+          {children}
+        </pre>
+      );
+    },    
+    strong: ({ children, ...props }) => (
+      <strong {...props} className="font-bold">
+        {children}
+      </strong>
+    ),
+    em: ({ children, ...props }) => (
+      <em {...props} className="italic">
+        {children}
+      </em>
+    ),
+    del: ({ children, ...props }) => (
+      <del {...props} className="line-through">
+        {children}
+      </del>
+    ),
+    table: ({ children, ...props }) => (
+      <div className="overflow-x-auto mb-6">
+        <table {...props} className="min-w-full border-collapse">
+          {children}
+        </table>
+      </div>
+    ),
+    thead: ({ children, ...props }) => (
+      <thead {...props} className="bg-green-900/30 border-b border-green-500/30">
+        {children}
+      </thead>
+    ),
+    th: ({ children, ...props }) => (
+      <th {...props} className="px-6 py-3 text-left text-sm font-semibold text-green-300">
+        {children}
+      </th>
+    ),
+    tr: ({ children, ...props }) => (
+      <tr {...props} className="border-b border-green-500/20">
+        {children}
+      </tr>
+    ), 
+    td: ({ children, ...props }) => (
+      <td {...props} className="px-6 py-4 text-sm">
+        {children}
+      </td>
+    ),
+    hr: ({ ...props }) => (
+      <hr {...props} className="my-6 border-green-500/20" />
+    ),
+    GitHubGist,
+    MDXImage
+  }
+};

package/next.config.ts

@@ -0,0 +1,22 @@
+import createMDX from '@next/mdx';
+ import type { NextConfig } from 'next';
+
+// Adding acceptable page extensions to be used in this application
+// Adding external domains to be used in this application
+const nextConfig: NextConfig = {
+  // Configure `pageExtensions` to include markdown and MDX files
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  images: {
+    domains: ["mdx-blog-bucket.s3.us-east-2.amazonaws.com"]
+  },
+  experimental: {
+    mdxRs: true,
+    viewTransition: true
+  },
+  output: 'standalone' as const
+}
+ 
+const withMDX = createMDX({});
+ 
+// Wrapping app configurations with the withMDX function
+export default withMDX(nextConfig);

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "create-next-mdx-blog-app",
+  "version": "1.0.0",
+  "bin": {
+    "create-next-blog-app": "./cli.js"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.3.2",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@supabase/supabase-js": "^2.49.8",
+    "@types/mdx": "^2.0.13",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vercel/analytics": "^1.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "execa": "^9.6.0",
+    "gray-matter": "^4.0.3",
+    "inquirer": "^12.6.3",
+    "lucide-react": "^0.511.0",
+    "next": "15.3.2",
+    "next-mdx-remote": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "tailwind-merge": "^3.3.0",
+    "tsx": "^4.19.4"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20.17.58",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.2",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.2",
+    "typescript": "^5.8.3"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>