create-specra 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.MD +21 -0
- package/README.md +137 -0
- package/package.json +42 -0
- package/templates/minimal/README.md +132 -0
- package/templates/minimal/app/api/mdx-watch/route.ts +80 -0
- package/templates/minimal/app/docs/[version]/[...slug]/loading.tsx +7 -0
- package/templates/minimal/app/docs/[version]/[...slug]/page.tsx +212 -0
- package/templates/minimal/app/docs/[version]/not-found.tsx +10 -0
- package/templates/minimal/app/docs/[version]/page.tsx +27 -0
- package/templates/minimal/app/globals.css +1 -0
- package/templates/minimal/app/layout.tsx +89 -0
- package/templates/minimal/app/page.tsx +185 -0
- package/templates/minimal/docs/v1.0.0/about.mdx +57 -0
- package/templates/minimal/docs/v1.0.0/components/_category_.json +8 -0
- package/templates/minimal/docs/v1.0.0/components/callout.mdx +83 -0
- package/templates/minimal/docs/v1.0.0/components/code-block.mdx +103 -0
- package/templates/minimal/docs/v1.0.0/components/index.mdx +8 -0
- package/templates/minimal/docs/v1.0.0/components/tabs.mdx +92 -0
- package/templates/minimal/docs/v1.0.0/configuration.mdx +322 -0
- package/templates/minimal/docs/v1.0.0/features.mdx +197 -0
- package/templates/minimal/docs/v1.0.0/getting-started.mdx +183 -0
- package/templates/minimal/docs/v1.0.0/index.mdx +29 -0
- package/templates/minimal/middleware.ts +23 -0
- package/templates/minimal/next.config.default.mjs +36 -0
- package/templates/minimal/next.config.export.mjs +62 -0
- package/templates/minimal/next.config.mjs +18 -0
- package/templates/minimal/package-lock.json +7338 -0
- package/templates/minimal/package.json +32 -0
- package/templates/minimal/postcss.config.mjs +8 -0
- package/templates/minimal/public/api-specs/openapi-example.json +259 -0
- package/templates/minimal/public/api-specs/postman-example.json +205 -0
- package/templates/minimal/public/api-specs/test-api.json +256 -0
- package/templates/minimal/public/api-specs/users-api.json +264 -0
- package/templates/minimal/scripts/generate-redirects.mjs +88 -0
- package/templates/minimal/scripts/index-search.ts +159 -0
- package/templates/minimal/scripts/test-search.ts +83 -0
- package/templates/minimal/specra.config.json +124 -0
- package/templates/minimal/tsconfig.json +41 -0
- package/templates/minimal/yarn.lock +3909 -0
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import "server-only"
|
|
2
|
+
|
|
3
|
+
import type React from "react"
|
|
4
|
+
import type { Metadata } from "next"
|
|
5
|
+
import { Geist, Geist_Mono } from "next/font/google"
|
|
6
|
+
|
|
7
|
+
import { initConfig, getConfig, getAssetPath, SpecraConfig } from "specra/lib"
|
|
8
|
+
import { TabProvider } from "specra/components"
|
|
9
|
+
|
|
10
|
+
import specraConfig from "../specra.config.json"
|
|
11
|
+
import "./globals.css"
|
|
12
|
+
|
|
13
|
+
/* -----------------------------
|
|
14
|
+
Fonts
|
|
15
|
+
------------------------------ */
|
|
16
|
+
const geist = Geist({ subsets: ["latin"] })
|
|
17
|
+
const geistMono = Geist_Mono({ subsets: ["latin"] })
|
|
18
|
+
|
|
19
|
+
// const sans = Geist({ subsets: ["latin"] })
|
|
20
|
+
// const geistMono = Geist_Mono({ subsets: ["latin"] })
|
|
21
|
+
|
|
22
|
+
/* -----------------------------
|
|
23
|
+
Initialize Specra config ONCE
|
|
24
|
+
(module scope, server-only)
|
|
25
|
+
------------------------------ */
|
|
26
|
+
initConfig(specraConfig as unknown as Partial<SpecraConfig>)
|
|
27
|
+
|
|
28
|
+
/* -----------------------------
|
|
29
|
+
Runtime Metadata (REQUIRED)
|
|
30
|
+
------------------------------ */
|
|
31
|
+
export async function generateMetadata(): Promise<Metadata> {
|
|
32
|
+
const config = getConfig()
|
|
33
|
+
|
|
34
|
+
return {
|
|
35
|
+
title: {
|
|
36
|
+
default: config.site.title,
|
|
37
|
+
template: `%s | ${config.site.title}`,
|
|
38
|
+
},
|
|
39
|
+
description: config.site.description || "Modern documentation platform",
|
|
40
|
+
metadataBase: config.site.url
|
|
41
|
+
? new URL(config.site.url)
|
|
42
|
+
: undefined,
|
|
43
|
+
icons: {
|
|
44
|
+
icon: config.site.favicon
|
|
45
|
+
? [{ url: getAssetPath(config.site.favicon) }]
|
|
46
|
+
: [],
|
|
47
|
+
apple: getAssetPath("/apple-icon.png"),
|
|
48
|
+
},
|
|
49
|
+
openGraph: {
|
|
50
|
+
title: config.site.title,
|
|
51
|
+
description: config.site.description,
|
|
52
|
+
url: config.site.url,
|
|
53
|
+
siteName: config.site.title,
|
|
54
|
+
locale: config.site.language || "en",
|
|
55
|
+
type: "website",
|
|
56
|
+
},
|
|
57
|
+
twitter: {
|
|
58
|
+
card: "summary_large_image",
|
|
59
|
+
title: config.site.title,
|
|
60
|
+
description: config.site.description,
|
|
61
|
+
},
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* -----------------------------
|
|
66
|
+
Root Layout
|
|
67
|
+
------------------------------ */
|
|
68
|
+
export default function RootLayout({
|
|
69
|
+
children,
|
|
70
|
+
}: {
|
|
71
|
+
children: React.ReactNode
|
|
72
|
+
}) {
|
|
73
|
+
const config = getConfig()
|
|
74
|
+
const defaultTab =
|
|
75
|
+
config.navigation?.tabGroups?.[0]?.id ?? ""
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<html lang={config.site.language || "en"}>
|
|
79
|
+
<body
|
|
80
|
+
// className={`${geist.className} ${geistMono.className} antialiased`}
|
|
81
|
+
className={`font-sans antialiased`}
|
|
82
|
+
>
|
|
83
|
+
<TabProvider defaultTab={defaultTab}>
|
|
84
|
+
{children}
|
|
85
|
+
</TabProvider>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
88
|
+
)
|
|
89
|
+
}
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import Link from "next/link"
|
|
2
|
+
import { ArrowRight, BookOpen, Zap, Code, Github, Twitter, Linkedin } from "lucide-react"
|
|
3
|
+
import { getConfig, getAssetPath } from "specra/lib"
|
|
4
|
+
import { Button, SiteBanner } from "specra/components"
|
|
5
|
+
|
|
6
|
+
export default function HomePage() {
|
|
7
|
+
// Server component - can use getConfig directly
|
|
8
|
+
const config = getConfig()
|
|
9
|
+
|
|
10
|
+
const activeVersion = config.site.activeVersion || "v4.0.0"
|
|
11
|
+
const docsUrl = `/docs/${activeVersion}/about`
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<div className="min-h-screen bg-background">
|
|
15
|
+
<SiteBanner config={config} />
|
|
16
|
+
<header className="border-b border-border">
|
|
17
|
+
<div className="container flex h-16 items-center justify-between px-6 mx-auto">
|
|
18
|
+
<Link href="/" className="flex items-center gap-2">
|
|
19
|
+
{config.site.logo ? (
|
|
20
|
+
<img src={getAssetPath(config.site.logo ?? "")} alt={config.site.title} className="h-8 w-auto" />
|
|
21
|
+
) : (
|
|
22
|
+
<div className="h-8 w-8 rounded-xl bg-primary flex items-center justify-center">
|
|
23
|
+
<span className="text-primary-foreground font-bold text-lg">S</span>
|
|
24
|
+
</div>
|
|
25
|
+
)}
|
|
26
|
+
<span className="font-semibold text-lg text-foreground">Specra</span>
|
|
27
|
+
</Link>
|
|
28
|
+
<div className="flex items-center gap-6">
|
|
29
|
+
<Link href={docsUrl} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
|
30
|
+
Documentation
|
|
31
|
+
</Link>
|
|
32
|
+
{
|
|
33
|
+
config?.social?.github ? (
|
|
34
|
+
<Link href={config.social.github} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-foreground transition-colors">
|
|
35
|
+
<Github className="h-5 w-5" />
|
|
36
|
+
</Link>
|
|
37
|
+
) : null
|
|
38
|
+
}
|
|
39
|
+
<Button asChild>
|
|
40
|
+
<Link href={docsUrl}>Get Started</Link>
|
|
41
|
+
</Button>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</header>
|
|
45
|
+
|
|
46
|
+
<main className="container px-6 mx-auto">
|
|
47
|
+
{/* Hero Section */}
|
|
48
|
+
<div className="mx-auto text-center space-y-6 py-20 max-w-4xl">
|
|
49
|
+
<h1 className="text-5xl md:text-6xl font-bold tracking-tight text-foreground">
|
|
50
|
+
Beautiful documentation made <span className="text-primary">simple</span>
|
|
51
|
+
</h1>
|
|
52
|
+
<p className="text-xl md:text-2xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
|
|
53
|
+
The modern documentation framework that grows with your project
|
|
54
|
+
</p>
|
|
55
|
+
<p className="text-base md:text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
56
|
+
Built for developers who want powerful, flexible documentation without the complexity.
|
|
57
|
+
Write in MDX, configure with ease, and ship beautiful docs in minutes.
|
|
58
|
+
</p>
|
|
59
|
+
<div className="flex items-center justify-center gap-4 pt-4">
|
|
60
|
+
<Button asChild size="lg">
|
|
61
|
+
<Link href={docsUrl}>
|
|
62
|
+
Get Started
|
|
63
|
+
<ArrowRight className="ml-2 h-4 w-4" />
|
|
64
|
+
</Link>
|
|
65
|
+
</Button>
|
|
66
|
+
{
|
|
67
|
+
config?.social?.github ? (
|
|
68
|
+
<Button asChild size="lg" variant="outline">
|
|
69
|
+
<Link href={config.social.github} target="_blank" rel="noopener noreferrer">
|
|
70
|
+
<Github className="mr-2 h-4 w-4" />
|
|
71
|
+
View on GitHub
|
|
72
|
+
</Link>
|
|
73
|
+
</Button>
|
|
74
|
+
) : null
|
|
75
|
+
}
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
{/* Key Features */}
|
|
80
|
+
<div className="grid md:grid-cols-3 gap-6 py-16 max-w-6xl mx-auto">
|
|
81
|
+
<div className="p-6 rounded-lg border border-border bg-card hover:shadow-md transition-shadow">
|
|
82
|
+
<div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
|
83
|
+
<BookOpen className="h-6 w-6 text-primary" />
|
|
84
|
+
</div>
|
|
85
|
+
<h3 className="text-lg font-semibold text-foreground mb-2">MDX-Powered</h3>
|
|
86
|
+
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
87
|
+
Write your docs in MDX with support for custom components, code blocks with syntax highlighting, and rich interactive content.
|
|
88
|
+
</p>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div className="p-6 rounded-lg border border-border bg-card hover:shadow-md transition-shadow">
|
|
92
|
+
<div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
|
93
|
+
<Zap className="h-6 w-6 text-primary" />
|
|
94
|
+
</div>
|
|
95
|
+
<h3 className="text-lg font-semibold text-foreground mb-2">Lightning Fast</h3>
|
|
96
|
+
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
97
|
+
Built on Next.js for optimal performance. Static generation, instant page loads, and seamless navigation out of the box.
|
|
98
|
+
</p>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div className="p-6 rounded-lg border border-border bg-card hover:shadow-md transition-shadow">
|
|
102
|
+
<div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
|
103
|
+
<Code className="h-6 w-6 text-primary" />
|
|
104
|
+
</div>
|
|
105
|
+
<h3 className="text-lg font-semibold text-foreground mb-2">Developer First</h3>
|
|
106
|
+
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
107
|
+
Version control friendly, Git-based workflow, and full TypeScript support. Your docs live alongside your code.
|
|
108
|
+
</p>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
{/* CTA Section */}
|
|
113
|
+
<div className="py-16 max-w-4xl mx-auto">
|
|
114
|
+
<div className="rounded-xl border border-border bg-card p-8 md:p-12 text-center space-y-6">
|
|
115
|
+
<h2 className="text-3xl md:text-4xl font-bold text-foreground">Ready to Get Started?</h2>
|
|
116
|
+
<p className="text-muted-foreground max-w-2xl mx-auto">
|
|
117
|
+
Create beautiful, versioned documentation for your project in minutes. <br />
|
|
118
|
+
Specra gives you everything you need to write, organize, and publish great docs.
|
|
119
|
+
</p>
|
|
120
|
+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
|
|
121
|
+
<Button asChild size="lg" variant="default">
|
|
122
|
+
<Link href={docsUrl}>
|
|
123
|
+
Read the Docs
|
|
124
|
+
<ArrowRight className="ml-2 h-4 w-4" />
|
|
125
|
+
</Link>
|
|
126
|
+
</Button>
|
|
127
|
+
{
|
|
128
|
+
config?.social?.github ? (
|
|
129
|
+
<Button asChild size="lg" variant="outline">
|
|
130
|
+
<Link href={config.social.github} target="_blank" rel="noopener noreferrer">
|
|
131
|
+
<Github className="mr-2 h-4 w-4" />
|
|
132
|
+
Star on GitHub
|
|
133
|
+
</Link>
|
|
134
|
+
</Button>
|
|
135
|
+
) : null
|
|
136
|
+
}
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
{/* Community Section */}
|
|
142
|
+
<div className="py-16 max-w-3xl mx-auto text-center space-y-6">
|
|
143
|
+
<h2 className="text-2xl md:text-3xl font-bold text-foreground">Join the Community</h2>
|
|
144
|
+
<p className="text-muted-foreground">
|
|
145
|
+
Specra is open source and community-driven. Connect with developers and stay updated.
|
|
146
|
+
</p>
|
|
147
|
+
<div className="flex items-center justify-center gap-4 pt-4">
|
|
148
|
+
{
|
|
149
|
+
config?.social?.github ? (
|
|
150
|
+
<Button asChild variant="outline" size="lg">
|
|
151
|
+
<Link href={config.social.github} target="_blank" rel="noopener noreferrer">
|
|
152
|
+
<Github className="mr-2 h-5 w-5" />
|
|
153
|
+
GitHub
|
|
154
|
+
</Link>
|
|
155
|
+
</Button>
|
|
156
|
+
) : null
|
|
157
|
+
}
|
|
158
|
+
{
|
|
159
|
+
config?.social?.twitter ? (
|
|
160
|
+
<Button asChild variant="outline" size="lg">
|
|
161
|
+
<Link href={config.social.twitter} target="_blank" rel="noopener noreferrer">
|
|
162
|
+
<Twitter className="mr-2 h-5 w-5" />
|
|
163
|
+
Twitter
|
|
164
|
+
</Link>
|
|
165
|
+
</Button>
|
|
166
|
+
) : null
|
|
167
|
+
}
|
|
168
|
+
{
|
|
169
|
+
config?.social?.linkedin ? (
|
|
170
|
+
<Button asChild variant="outline" size="lg">
|
|
171
|
+
<Link href={config.social.linkedin} target="_blank" rel="noopener noreferrer">
|
|
172
|
+
<Linkedin className="mr-2 h-5 w-5" />
|
|
173
|
+
LinkedIn
|
|
174
|
+
</Link>
|
|
175
|
+
</Button>
|
|
176
|
+
) : null
|
|
177
|
+
}
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</main>
|
|
181
|
+
|
|
182
|
+
{/* <Footer /> */}
|
|
183
|
+
</div>
|
|
184
|
+
)
|
|
185
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: About Specra
|
|
3
|
+
sidebar_position: 1
|
|
4
|
+
icon: info
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Specra is a self-hosted, Mintlify-quality documentation platform built with **Next.js**, **MDX**, and **Tailwind CSS**. It provides a polished, readable docs experience with powerful features for both readers and writers.
|
|
8
|
+
|
|
9
|
+
## Why Specra?
|
|
10
|
+
|
|
11
|
+
<CardGrid cols={2}>
|
|
12
|
+
<Card icon="zap" title="Fast & Static" description="Pre-rendered pages with edge caching for lightning-fast load times" />
|
|
13
|
+
<Card icon="search" title="Instant Search" description="Meilisearch-powered full-text search with typo tolerance" />
|
|
14
|
+
<Card icon="git-branch" title="Versioned Docs" description="Multiple documentation versions under /docs/v1.0.0/, /docs/v2.0.0/" />
|
|
15
|
+
<Card icon="palette" title="Theme Support" description="Dark mode, customizable colors, and design tokens" />
|
|
16
|
+
</CardGrid>
|
|
17
|
+
|
|
18
|
+
## Built With
|
|
19
|
+
|
|
20
|
+
- **Next.js 15** - React framework with App Router
|
|
21
|
+
- **MDX** - Markdown with React components
|
|
22
|
+
- **Tailwind CSS** - Utility-first styling
|
|
23
|
+
- **Meilisearch** - Fast, typo-tolerant search
|
|
24
|
+
- **TypeScript** - Full type safety
|
|
25
|
+
|
|
26
|
+
## Core Principles
|
|
27
|
+
|
|
28
|
+
<Steps>
|
|
29
|
+
<Step title="Content First">
|
|
30
|
+
Your documentation lives in the `docs/` folder as MDX files. The system handles routing, navigation, and rendering automatically.
|
|
31
|
+
</Step>
|
|
32
|
+
|
|
33
|
+
<Step title="Developer Experience">
|
|
34
|
+
Edit MDX files, and see changes instantly with hot reload. No complex configuration required.
|
|
35
|
+
</Step>
|
|
36
|
+
|
|
37
|
+
<Step title="Production Ready">
|
|
38
|
+
Built-in SEO, accessibility, performance optimization, and CI/CD integration.
|
|
39
|
+
</Step>
|
|
40
|
+
</Steps>
|
|
41
|
+
|
|
42
|
+
## What's Included
|
|
43
|
+
|
|
44
|
+
| Feature | Description |
|
|
45
|
+
|---------|-------------|
|
|
46
|
+
| **MDX Components** | Callouts, tabs, code blocks, cards, accordions, and more |
|
|
47
|
+
| **Sidebar Navigation** | Auto-generated from folder structure with collapsible groups |
|
|
48
|
+
| **Table of Contents** | Auto-generated from headings with scroll tracking |
|
|
49
|
+
| **Version Switcher** | Switch between documentation versions |
|
|
50
|
+
| **Search** | Full-text search with keyboard shortcuts (⌘K) |
|
|
51
|
+
| **Dark Mode** | System-aware theme with manual toggle |
|
|
52
|
+
| **Reading Time** | Automatic reading time estimation |
|
|
53
|
+
| **Responsive** | Mobile-first design that works on all devices |
|
|
54
|
+
|
|
55
|
+
## Getting Started
|
|
56
|
+
|
|
57
|
+
Ready to write documentation? Head to the [Getting Started](/docs/v1.0.0/getting-started) guide.
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Callout
|
|
3
|
+
description: Highlight important information with styled callout boxes
|
|
4
|
+
sidebar_position: 4
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Callouts draw attention to important information within your content. They're styled based on the type of message they convey.
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```mdx
|
|
12
|
+
<Callout type="info">
|
|
13
|
+
This is helpful information for the reader.
|
|
14
|
+
</Callout>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Types
|
|
18
|
+
|
|
19
|
+
### Info
|
|
20
|
+
<Callout type="info">
|
|
21
|
+
This provides additional context or helpful tips.
|
|
22
|
+
</Callout>
|
|
23
|
+
|
|
24
|
+
```mdx
|
|
25
|
+
<Callout type="info">
|
|
26
|
+
Helpful additional context goes here.
|
|
27
|
+
</Callout>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Note
|
|
31
|
+
<Callout type="note">
|
|
32
|
+
Notes highlight important information the reader should be aware of.
|
|
33
|
+
</Callout>
|
|
34
|
+
|
|
35
|
+
### Tip
|
|
36
|
+
<Callout type="tip">
|
|
37
|
+
Tips provide suggestions for better usage or best practices.
|
|
38
|
+
</Callout>
|
|
39
|
+
|
|
40
|
+
### Warning
|
|
41
|
+
<Callout type="warning">
|
|
42
|
+
Warnings alert users to potential issues or breaking changes.
|
|
43
|
+
</Callout>
|
|
44
|
+
|
|
45
|
+
### Success
|
|
46
|
+
<Callout type="success">
|
|
47
|
+
Success callouts confirm positive outcomes or completed actions.
|
|
48
|
+
</Callout>
|
|
49
|
+
|
|
50
|
+
### Error
|
|
51
|
+
<Callout type="error">
|
|
52
|
+
Error callouts highlight critical issues or things to avoid.
|
|
53
|
+
</Callout>
|
|
54
|
+
|
|
55
|
+
### Danger
|
|
56
|
+
<Callout type="danger">
|
|
57
|
+
Danger callouts warn about potentially destructive actions.
|
|
58
|
+
</Callout>
|
|
59
|
+
|
|
60
|
+
## Props
|
|
61
|
+
|
|
62
|
+
| Prop | Type | Default | Description |
|
|
63
|
+
|------|------|---------|-------------|
|
|
64
|
+
| `children` | `ReactNode` | required | Callout content |
|
|
65
|
+
| `type` | `"info" \| "note" \| "tip" \| "warning" \| "success" \| "error" \| "danger"` | `"info"` | Callout style |
|
|
66
|
+
|
|
67
|
+
## GitHub-Style Alerts
|
|
68
|
+
|
|
69
|
+
You can also use markdown blockquotes with alert markers:
|
|
70
|
+
|
|
71
|
+
```mdx
|
|
72
|
+
> [!INFO]
|
|
73
|
+
> This is an info alert using markdown syntax.
|
|
74
|
+
|
|
75
|
+
> [!WARNING]
|
|
76
|
+
> This is a warning using markdown syntax.
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
> [!INFO]
|
|
80
|
+
> This is an info alert using markdown syntax.
|
|
81
|
+
|
|
82
|
+
> [!WARNING]
|
|
83
|
+
> This is a warning alert using markdown syntax.
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Code Block
|
|
3
|
+
description: Display syntax-highlighted code with line numbers and copy functionality
|
|
4
|
+
sidebar_position: 6
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Code blocks display syntax-highlighted code with line numbers, a copy button, and optional filename headers.
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
Code blocks are automatically created when using fenced code blocks with a language specifier:
|
|
12
|
+
|
|
13
|
+
````mdx
|
|
14
|
+
```javascript
|
|
15
|
+
const greeting = "Hello, World!";
|
|
16
|
+
console.log(greeting);
|
|
17
|
+
```
|
|
18
|
+
````
|
|
19
|
+
|
|
20
|
+
## Live Examples
|
|
21
|
+
|
|
22
|
+
### JavaScript
|
|
23
|
+
|
|
24
|
+
```javascript
|
|
25
|
+
function fibonacci(n) {
|
|
26
|
+
if (n <= 1) return n;
|
|
27
|
+
return fibonacci(n - 1) + fibonacci(n - 2);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
console.log(fibonacci(10)); // 55
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### TypeScript
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
interface User {
|
|
37
|
+
id: string;
|
|
38
|
+
name: string;
|
|
39
|
+
email: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function greetUser(user: User): string {
|
|
43
|
+
return `Hello, ${user.name}!`;
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Python
|
|
48
|
+
|
|
49
|
+
```python
|
|
50
|
+
def quicksort(arr):
|
|
51
|
+
if len(arr) <= 1:
|
|
52
|
+
return arr
|
|
53
|
+
pivot = arr[len(arr) // 2]
|
|
54
|
+
left = [x for x in arr if x < pivot]
|
|
55
|
+
middle = [x for x in arr if x == pivot]
|
|
56
|
+
right = [x for x in arr if x > pivot]
|
|
57
|
+
return quicksort(left) + middle + quicksort(right)
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Bash
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
# Install dependencies
|
|
64
|
+
npm install
|
|
65
|
+
|
|
66
|
+
# Start development server
|
|
67
|
+
npm run dev
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### JSON
|
|
71
|
+
|
|
72
|
+
```json
|
|
73
|
+
{
|
|
74
|
+
"name": "my-project",
|
|
75
|
+
"version": "1.0.0",
|
|
76
|
+
"dependencies": {
|
|
77
|
+
"react": "^19.0.0",
|
|
78
|
+
"next": "^16.0.0"
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Features
|
|
84
|
+
|
|
85
|
+
<Callout type="info">
|
|
86
|
+
Code blocks include automatic syntax highlighting for many languages including JavaScript, TypeScript, Python, Bash, JSON, CSS, and more.
|
|
87
|
+
</Callout>
|
|
88
|
+
|
|
89
|
+
- **Syntax Highlighting** - Automatic language detection and highlighting
|
|
90
|
+
- **Line Numbers** - Easy reference for specific lines
|
|
91
|
+
- **Copy Button** - One-click code copying
|
|
92
|
+
- **Filename Header** - Optional filename display
|
|
93
|
+
|
|
94
|
+
## Supported Languages
|
|
95
|
+
|
|
96
|
+
Common languages include:
|
|
97
|
+
- `javascript`, `typescript`, `jsx`, `tsx`
|
|
98
|
+
- `python`, `ruby`, `go`, `rust`
|
|
99
|
+
- `bash`, `shell`, `powershell`
|
|
100
|
+
- `html`, `css`, `scss`
|
|
101
|
+
- `json`, `yaml`, `toml`
|
|
102
|
+
- `sql`, `graphql`
|
|
103
|
+
- `markdown`, `mdx`
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Components
|
|
3
|
+
description: A comprehensive guide to all available components
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
### A list of over 10 useful components
|
|
7
|
+
|
|
8
|
+
Welcome to the components documentation. Here you'll find information about all the reusable components available in this documentation system.
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Tabs
|
|
3
|
+
description: Organize content into tabbed sections
|
|
4
|
+
sidebar_position: 15
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Tabs organize content into switchable panels, perfect for showing alternatives like different package managers or language examples.
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```mdx
|
|
12
|
+
<Tabs defaultValue="npm">
|
|
13
|
+
<Tab label="npm">
|
|
14
|
+
npm content here
|
|
15
|
+
</Tab>
|
|
16
|
+
|
|
17
|
+
<Tab label="yarn">
|
|
18
|
+
yarn content here
|
|
19
|
+
</Tab>
|
|
20
|
+
|
|
21
|
+
<Tab label="pnpm">
|
|
22
|
+
pnpm content here
|
|
23
|
+
</Tab>
|
|
24
|
+
</Tabs>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Live Examples
|
|
28
|
+
|
|
29
|
+
### Package Manager Selection
|
|
30
|
+
|
|
31
|
+
<Tabs defaultValue="npm">
|
|
32
|
+
<Tab label="npm">
|
|
33
|
+
```bash
|
|
34
|
+
npm install my-package
|
|
35
|
+
```
|
|
36
|
+
</Tab>
|
|
37
|
+
|
|
38
|
+
<Tab label="yarn">
|
|
39
|
+
```bash
|
|
40
|
+
yarn add my-package
|
|
41
|
+
```
|
|
42
|
+
</Tab>
|
|
43
|
+
|
|
44
|
+
<Tab label="pnpm">
|
|
45
|
+
```bash
|
|
46
|
+
pnpm add my-package
|
|
47
|
+
```
|
|
48
|
+
</Tab>
|
|
49
|
+
</Tabs>
|
|
50
|
+
|
|
51
|
+
### Code Examples
|
|
52
|
+
|
|
53
|
+
<Tabs defaultValue="JavaScript">
|
|
54
|
+
<Tab label="JavaScript">
|
|
55
|
+
```javascript
|
|
56
|
+
function greet(name) {
|
|
57
|
+
return `Hello, ${name}!`;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
</Tab>
|
|
61
|
+
|
|
62
|
+
<Tab label="TypeScript">
|
|
63
|
+
```typescript
|
|
64
|
+
function greet(name: string): string {
|
|
65
|
+
return `Hello, ${name}!`;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
</Tab>
|
|
69
|
+
|
|
70
|
+
<Tab label="Python">
|
|
71
|
+
```python
|
|
72
|
+
def greet(name):
|
|
73
|
+
return f"Hello, {name}!"
|
|
74
|
+
```
|
|
75
|
+
</Tab>
|
|
76
|
+
</Tabs>
|
|
77
|
+
|
|
78
|
+
## Props
|
|
79
|
+
|
|
80
|
+
### Tabs
|
|
81
|
+
|
|
82
|
+
| Prop | Type | Default | Description |
|
|
83
|
+
|------|------|---------|-------------|
|
|
84
|
+
| `children` | `ReactNode` | required | Tab components |
|
|
85
|
+
| `defaultValue` | `string` | - | Label of initially selected tab (defaults to first tab) |
|
|
86
|
+
|
|
87
|
+
### Tab
|
|
88
|
+
|
|
89
|
+
| Prop | Type | Default | Description |
|
|
90
|
+
|------|------|---------|-------------|
|
|
91
|
+
| `label` | `string` | required | Tab button label |
|
|
92
|
+
| `children` | `ReactNode` | required | Content shown when tab is active |
|