Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ jobs:

strategy:
matrix:
node-version: [22.x]
node-version: [18.x, 20.x, 22.x]

steps:
- name: Checkout repository
Expand Down
Binary file added docs/android-chrome-192x192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/android-chrome-512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/apple-touch-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/favicon-16x16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/favicon-32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/favicon.ico
Binary file not shown.
147 changes: 147 additions & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>create-next-quick Docs</title>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Added proper header with logo image integration -->
<header class="header">
<div class="header-content">
<div class="logo-section">
<img src="logo.png" alt="create-next-quick" class="logo-image">
<span class="logo-text">create-next-quick</span>
</div>
<button class="hamburger-menu" id="hamburger-menu" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<nav class="header-nav" id="main-nav">
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#contributing">Contributing</a></li>
</ul>
</nav>
</div>
</header>

<div class="main-wrapper">
<main class="content">
<section id="hero" class="hero-section">
<h1>create-next-quick</h1>
<p class="subtitle">Bootstrap your Next.js project in seconds with your preferred setup</p>
</section>

<section id="why">
<h2>Why create-next-quick?</h2>
<p><code>create-next-quick</code> is a lightweight CLI that helps you quickly bootstrap a Next.js app
with your preferred setup options. No more manual configuration—just answer a few questions and
you're ready to go.</p>
</section>

<section id="features">
<h2>Features</h2>
<ul>
<li><strong>TypeScript Support</strong> — Full TypeScript configuration out of the box</li>
<li><strong>Tailwind CSS</strong> — Modern utility-first CSS framework pre-configured</li>
<li><strong>App Router</strong> — Latest Next.js App Router setup</li>
<li><strong>ORM Options</strong> — Choose between Prisma or Drizzle</li>
<li><strong>Shadcn UI</strong> — Automatic component library setup</li>
<li><strong>Error Handling</strong> — Built-in error handling and cleanup</li>
</ul>
</section>

<section id="prerequisites">
<h2>Prerequisites</h2>
<p>Before you begin, ensure you have the following installed:</p>
<ul>
<li><strong>Node.js 16+</strong> — Download from <a href="https://nodejs.org"
target="_blank">nodejs.org</a></li>
<li><strong>npm or yarn</strong> — Comes with Node.js</li>
</ul>
</section>

<section id="installation">
<h2>Installation</h2>
<p>Get started with a single command. No global installation needed:</p>
<div class="code-block">
<code>npx create-next-quick</code>
<button class="copy-btn" data-code="npx create-next-quick">
<span class="copy-icon">📋</span>
<span class="copy-text">Copy</span>
</button>
</div>
</section>

<section id="usage">
<h2>Usage</h2>
<p>You can run the CLI with or without specifying a project name:</p>
<div class="code-block">
<code>npx create-next-quick my-app</code>
<button class="copy-btn" data-code="npx create-next-quick my-app">
<span class="copy-icon">📋</span>
<span class="copy-text">Copy</span>
</button>
</div>
<p>Or let the CLI prompt you for a project name:</p>
<div class="code-block">
<code>npx create-next-quick</code>
<button class="copy-btn" data-code="npx create-next-quick">
<span class="copy-icon">📋</span>
<span class="copy-text">Copy</span>
</button>
</div>
</section>

<section id="testing">
<h2>Testing</h2>
<p>Run the test suite to ensure everything is working correctly:</p>
<div class="code-block">
<code>npm run test:generate && npm test</code>
<button class="copy-btn" data-code="npm run test:generate && npm test">
<span class="copy-icon">📋</span>
<span class="copy-text">Copy</span>
</button>
</div>
</section>

<section id="contributing">
<h2>Contributing</h2>
<p>We welcome contributions! Here's how to get started:</p>
<ol>
<li>Fork the repository</li>
<li>Create a feature branch (<code>git checkout -b feature/amazing-feature</code>)</li>
<li>Commit your changes (<code>git commit -m 'Add amazing feature'</code>)</li>
<li>Push to the branch (<code>git push origin feature/amazing-feature</code>)</li>
<li>Open a Pull Request</li>
</ol>
</section>

<section id="license">
<h2>License</h2>
<p>This project is licensed under the MIT License — see the <a href="LICENSE">LICENSE</a> file for
details.</p>
</section>
</main>
</div>

<script src="script.js"></script>
</body>

</html>
Binary file added docs/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 66 additions & 0 deletions docs/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
const hamburgerMenu = document.getElementById("hamburger-menu")
const mainNav = document.getElementById("main-nav")
const sidebar = document.getElementById("sidebar")
const copyButtons = document.querySelectorAll(".copy-btn")

// Toggle hamburger menu and navigation
hamburgerMenu.addEventListener("click", () => {
hamburgerMenu.classList.toggle("active")
mainNav.classList.toggle("active")
})

// Close menu when a nav link is clicked
document.querySelectorAll("#main-nav a").forEach((link) => {
link.addEventListener("click", () => {
hamburgerMenu.classList.remove("active")
mainNav.classList.remove("active")
})
})

// Toggle sidebar on mobile
hamburgerMenu.addEventListener("click", () => {
sidebar.classList.toggle("active")
})

// Close sidebar when a sidebar link is clicked
document.querySelectorAll(".sidebar a").forEach((link) => {
link.addEventListener("click", () => {
if (window.innerWidth <= 768) {
sidebar.classList.remove("active")
hamburgerMenu.classList.remove("active")
}
})
})

copyButtons.forEach((button) => {
button.addEventListener("click", () => {
const textToCopy = button.getAttribute("data-code")
const originalText = button.innerHTML // Declare originalText variable here

navigator.clipboard
.writeText(textToCopy)
.then(() => {
button.classList.add("copied")
button.innerHTML = '<span class="copy-icon">✓</span><span class="copy-text">Copied!</span>'

setTimeout(() => {
button.classList.remove("copied")
button.innerHTML = originalText
}, 2000)
})
.catch(() => {
button.innerHTML = '<span class="copy-icon">✗</span><span class="copy-text">Failed</span>'
setTimeout(() => {
button.innerHTML = originalText
}, 2000)
})
})
})

// Close mobile menu when clicking outside
document.addEventListener("click", (e) => {
if (!e.target.closest("header")) {
hamburgerMenu.classList.remove("active")
mainNav.classList.remove("active")
}
})
1 change: 1 addition & 0 deletions docs/site.webmanifest
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
Loading
Loading