Skip to content

Commit 25171df

Browse files
alpha912alpha912
committed
docs: add quick reference and reorder docs
1 parent e305aee commit 25171df

3 files changed

Lines changed: 239 additions & 37 deletions

File tree

‎app/docs/getting-started/quick-reference/page.tsx‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
// File: app/docs/getting-started/quick-reference/page.tsx
2+
// What: Quick reference for OSF syntax and blocks
3+
// Why: Give users a fast, scannable cheat sheet
4+
// Related: app/docs/getting-started/installation/page.tsx, app/docs/getting-started/first-document/page.tsx
5+
6+
'use client';
7+
8+
import Link from 'next/link';
9+
import Navigation from '@/components/Navigation';
10+
11+
export default function QuickReferencePage() {
12+
return (
13+
<div className="min-h-screen bg-black text-white">
14+
<Navigation dark />
15+
<div className="container mx-auto px-4 py-12 max-w-5xl pt-24">
16+
<div className="mb-10">
17+
<h1 className="text-5xl font-bold mb-4 border-b-4 border-white pb-4">Quick Reference</h1>
18+
<p className="text-xl text-gray-300">
19+
A fast, scannable cheat sheet for OmniScript Format blocks, directives, and syntax.
20+
</p>
21+
</div>
22+
23+
{/* OSF in 60 seconds */}
24+
<section className="mb-12 border-2 border-white p-6">
25+
<h2 className="text-2xl font-bold mb-4">OSF in 60 Seconds</h2>
26+
<div className="bg-black border-2 border-white p-4 font-mono text-sm text-green-400 overflow-x-auto">
27+
<pre>{`@meta {
28+
title: "My First Document";
29+
author: "Your Name";
30+
date: "2025-10-16";
31+
theme: corporate;
32+
}
33+
34+
@doc {
35+
# Welcome
36+
This is **bold**, this is *italic*, and this is \`code\`.
37+
38+
- Bullet one
39+
- Bullet two
40+
}
41+
42+
@slide {
43+
title: "Quick Start";
44+
layout: TitleAndBullets;
45+
bullets {
46+
"Edit this text";
47+
"Add blocks";
48+
"Export to PDF";
49+
}
50+
}`}</pre>
51+
</div>
52+
</section>
53+
54+
{/* Blocks at a glance */}
55+
<section className="mb-12 border-l-4 border-green-500 pl-6">
56+
<h2 className="text-4xl font-bold mb-6">Blocks at a Glance</h2>
57+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
58+
<div className="border-2 border-white p-4 bg-gray-900">
59+
<h3 className="text-xl font-bold mb-2">@meta</h3>
60+
<p className="text-gray-300">Document metadata: title, author, date, theme.</p>
61+
</div>
62+
<div className="border-2 border-white p-4 bg-gray-900">
63+
<h3 className="text-xl font-bold mb-2">@doc</h3>
64+
<p className="text-gray-300">Markdown-like document content and narrative text.</p>
65+
</div>
66+
<div className="border-2 border-white p-4 bg-gray-900">
67+
<h3 className="text-xl font-bold mb-2">@slide</h3>
68+
<p className="text-gray-300">Presentation slides with layouts and bullets.</p>
69+
</div>
70+
<div className="border-2 border-white p-4 bg-gray-900">
71+
<h3 className="text-xl font-bold mb-2">@sheet</h3>
72+
<p className="text-gray-300">Spreadsheet-style data tables and formulas.</p>
73+
</div>
74+
<div className="border-2 border-white p-4 bg-gray-900">
75+
<h3 className="text-xl font-bold mb-2">@table</h3>
76+
<p className="text-gray-300">Markdown pipe tables with caption and styling.</p>
77+
</div>
78+
<div className="border-2 border-white p-4 bg-gray-900">
79+
<h3 className="text-xl font-bold mb-2">@chart</h3>
80+
<p className="text-gray-300">Bar/line/pie charts from structured series data.</p>
81+
</div>
82+
<div className="border-2 border-white p-4 bg-gray-900">
83+
<h3 className="text-xl font-bold mb-2">@diagram</h3>
84+
<p className="text-gray-300">Mermaid or Graphviz diagrams.</p>
85+
</div>
86+
<div className="border-2 border-white p-4 bg-gray-900">
87+
<h3 className="text-xl font-bold mb-2">@code</h3>
88+
<p className="text-gray-300">Code blocks with language, caption, and highlights.</p>
89+
</div>
90+
</div>
91+
</section>
92+
93+
{/* Tables */}
94+
<section className="mb-12 border-l-4 border-blue-500 pl-6">
95+
<h2 className="text-4xl font-bold mb-6">@table</h2>
96+
<div className="bg-gray-900 border-2 border-blue-500 p-4 font-mono text-sm text-blue-200 overflow-x-auto">
97+
<pre>{`@table {
98+
caption: "Regional Performance";
99+
style: "bordered";
100+
alignment: ["left", "right", "right", "center"];
101+
102+
| Region | Q3 Revenue | Q4 Revenue | Growth |
103+
| --- | --- | --- | --- |
104+
| North America | $975K | $1,150K | +18% |
105+
| Europe | $748K | $880K | +17% |
106+
| APAC | $477K | $592K | +24% |
107+
}`}</pre>
108+
</div>
109+
</section>
110+
111+
{/* Slides */}
112+
<section className="mb-12 border-l-4 border-purple-500 pl-6">
113+
<h2 className="text-4xl font-bold mb-6">@slide</h2>
114+
<p className="text-gray-300 mb-4">Common layouts: <code>TitleOnly</code>, <code>TitleAndContent</code>, <code>TitleAndBullets</code>, <code>TwoColumn</code>.</p>
115+
<div className="bg-gray-900 border-2 border-purple-500 p-4 font-mono text-sm text-purple-200 overflow-x-auto">
116+
<pre>{`@slide {
117+
title: "Key Metrics";
118+
layout: TitleAndBullets;
119+
bullets {
120+
"Revenue up 20%";
121+
"Churn down to 2%";
122+
"New @table support";
123+
}
124+
}`}</pre>
125+
</div>
126+
</section>
127+
128+
{/* Sheets */}
129+
<section className="mb-12 border-l-4 border-green-500 pl-6">
130+
<h2 className="text-4xl font-bold mb-6">@sheet</h2>
131+
<div className="bg-gray-900 border-2 border-green-500 p-4 font-mono text-sm text-green-200 overflow-x-auto">
132+
<pre>{`@sheet {
133+
name: "Budget";
134+
cols: [Item, Cost, Qty, Total];
135+
136+
A2 = "Hosting";
137+
B2 = 120;
138+
C2 = 12;
139+
D2 = =B2*C2;
140+
}`}</pre>
141+
</div>
142+
</section>
143+
144+
{/* Includes */}
145+
<section className="mb-12 border-l-4 border-white pl-6">
146+
<h2 className="text-4xl font-bold mb-6">@include</h2>
147+
<p className="text-gray-300 mb-4">Compose larger documents from modular files.</p>
148+
<div className="bg-gray-900 border-2 border-white p-4 font-mono text-sm text-gray-200 overflow-x-auto">
149+
<pre>{`@include { path: "./sections/intro.osf"; }
150+
@include { path: "./sections/body.osf"; }
151+
@include { path: "./sections/conclusion.osf"; }`}</pre>
152+
</div>
153+
</section>
154+
155+
{/* CLI Commands */}
156+
<section className="mb-12 border-l-4 border-orange-500 pl-6">
157+
<h2 className="text-4xl font-bold mb-6">CLI Commands</h2>
158+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
159+
<div className="bg-gray-900 border-2 border-orange-500 p-4 font-mono text-sm text-orange-200">
160+
<pre>{`osf parse file.osf`}</pre>
161+
<p className="mt-2 text-gray-300">Parse OSF into AST JSON.</p>
162+
</div>
163+
<div className="bg-gray-900 border-2 border-orange-500 p-4 font-mono text-sm text-orange-200">
164+
<pre>{`osf render file.osf --format pdf`}</pre>
165+
<p className="mt-2 text-gray-300">Export to PDF/DOCX/PPTX/XLSX/HTML.</p>
166+
</div>
167+
<div className="bg-gray-900 border-2 border-orange-500 p-4 font-mono text-sm text-orange-200">
168+
<pre>{`osf lint file.osf`}</pre>
169+
<p className="mt-2 text-gray-300">Validate syntax and schema.</p>
170+
</div>
171+
<div className="bg-gray-900 border-2 border-orange-500 p-4 font-mono text-sm text-orange-200">
172+
<pre>{`osf format file.osf`}</pre>
173+
<p className="mt-2 text-gray-300">Normalize formatting.</p>
174+
</div>
175+
</div>
176+
</section>
177+
178+
{/* Next Steps */}
179+
<section className="mb-12">
180+
<h2 className="text-4xl font-bold mb-6">Next Steps</h2>
181+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
182+
<Link
183+
href="/docs/getting-started/installation"
184+
className="block p-6 border-2 border-white hover:bg-white hover:text-black transition-colors"
185+
>
186+
<h3 className="text-xl font-bold mb-2">Install CLI →</h3>
187+
<p className="text-sm opacity-80">Get OmniScript installed locally</p>
188+
</Link>
189+
<Link
190+
href="/docs/getting-started/first-document"
191+
className="block p-6 border-2 border-white hover:bg-white hover:text-black transition-colors"
192+
>
193+
<h3 className="text-xl font-bold mb-2">First Document →</h3>
194+
<p className="text-sm opacity-80">Create and export your first OSF file</p>
195+
</Link>
196+
<Link
197+
href="/playground"
198+
className="block p-6 border-2 border-white hover:bg-white hover:text-black transition-colors"
199+
>
200+
<h3 className="text-xl font-bold mb-2">Try Playground →</h3>
201+
<p className="text-sm opacity-80">Experiment in the browser</p>
202+
</Link>
203+
</div>
204+
</section>
205+
</div>
206+
</div>
207+
);
208+
}

‎app/docs/page.tsx‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,36 @@ export default function DocsPage() {
3838
<DocCard
3939
icon={<Book size={32} weight="duotone" />}
4040
title="User Guide"
41-
description="Complete reference for all OSF features"
41+
description="Complete guide to OSF blocks and formatting"
4242
links={[
43-
{ text: '@meta Blocks', href: '/docs/guide/meta-blocks' },
44-
{ text: '@doc Blocks', href: '/docs/guide/doc-blocks' },
45-
{ text: '@slide Blocks', href: '/docs/guide/slide-blocks' },
46-
{ text: '@sheet Blocks', href: '/docs/guide/sheet-blocks' },
47-
{ text: 'Themes', href: '/docs/guide/themes' }
43+
{ text: 'User Guide', href: '/docs/user-guide' },
44+
{ text: 'Block Types', href: '/docs/user-guide' },
45+
{ text: 'Formatting & Markdown', href: '/docs/user-guide' },
46+
{ text: 'Themes', href: '/docs/user-guide' }
4847
]}
4948
/>
5049

51-
{/* v1.0 Features */}
50+
{/* API Reference */}
51+
<DocCard
52+
icon={<Wrench size={32} weight="duotone" />}
53+
title="API Reference"
54+
description="Programmatic usage of OSF packages"
55+
links={[
56+
{ text: 'Complete API Reference', href: '/docs/api-reference' },
57+
{ text: 'Parser & Converters', href: '/docs/api-reference' },
58+
{ text: 'CLI Commands', href: '/docs/api-reference' }
59+
]}
60+
/>
61+
62+
{/* v1.3 Features */}
5263
<DocCard
5364
icon={<Sparkle size={32} weight="duotone" />}
54-
title="v1.0 Features"
55-
description="Advanced blocks (charts, diagrams, code)"
65+
title="v1.3 Features (Latest)"
66+
description="Export parity and preview alignment"
5667
links={[
57-
{ text: '@chart Blocks', href: '/docs/v1-features/chart-blocks' },
58-
{ text: '@diagram Blocks', href: '/docs/v1-features/diagram-blocks' },
59-
{ text: '@code Blocks', href: '/docs/v1-features/code-blocks' }
68+
{ text: 'v1.3 Release Notes', href: '/docs/releases/v1-3' },
69+
{ text: '@table Parity', href: '/docs/releases/v1-3' },
70+
{ text: 'Blockquote Styling', href: '/docs/releases/v1-3' }
6071
]}
6172
/>
6273

@@ -86,27 +97,15 @@ export default function DocsPage() {
8697
]}
8798
/>
8899

89-
{/* User Guide */}
90-
<DocCard
91-
icon={<Book size={32} weight="duotone" />}
92-
title="User Guide"
93-
description="Complete guide to all OSF block types"
94-
links={[
95-
{ text: 'All Block Types', href: '/docs/user-guide' },
96-
{ text: 'Best Practices', href: '/docs/user-guide#best-practices' },
97-
{ text: 'Common Patterns', href: '/docs/user-guide' }
98-
]}
99-
/>
100-
101-
{/* API Reference */}
100+
{/* v1.0 Features */}
102101
<DocCard
103-
icon={<Wrench size={32} weight="duotone" />}
104-
title="API Reference"
105-
description="Programmatic usage of OSF packages"
102+
icon={<Sparkle size={32} weight="duotone" />}
103+
title="v1.0 Features"
104+
description="Charts, diagrams, and code blocks"
106105
links={[
107-
{ text: 'Complete API Reference', href: '/docs/api-reference' },
108-
{ text: 'Parser & Converters', href: '/docs/api-reference' },
109-
{ text: 'CLI Commands', href: '/docs/api-reference' }
106+
{ text: '@chart Blocks', href: '/docs/v1-features/chart-blocks' },
107+
{ text: '@diagram Blocks', href: '/docs/v1-features/diagram-blocks' },
108+
{ text: '@code Blocks', href: '/docs/v1-features/code-blocks' }
110109
]}
111110
/>
112111

‎app/page.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,7 @@ export default function Home() {
112112
</p>
113113

114114
<div className="flex items-center justify-center gap-4 mb-16">
115-
<a
116-
href="https://github.com/OmniScriptOSF/omniscript-core"
117-
className="btn-primary"
118-
target="_blank"
119-
rel="noopener noreferrer"
120-
>
115+
<a href="/docs/getting-started/quick-reference" className="btn-primary">
121116
Get Started
122117
</a>
123118
<a href="#features" className="btn-secondary">

0 commit comments

Comments
 (0)