Skip to content

Commit fae652e

Browse files
alpha912alpha912
committed
feat: update tagline and add complete documentation
- Updated homepage tagline to reflect all v1.0 features Old: Documents + Slides + Spreadsheets New: Documents • Slides • Spreadsheets • Charts • Diagrams • Code - Added comprehensive User Guide page - All block types with examples (@meta, @doc, @slide, @sheet, @Chart, @diagram, @code) - Best practices - Next steps navigation - Added complete API Reference page - omniscript-parser API - omniscript-converters API (PDF, DOCX, PPTX, XLSX) - omniscript-cli commands - Complete TypeScript examples - Updated docs hub to link to new pages - Removed 'Coming Soon' status from API Reference and User Guide
1 parent 28812c7 commit fae652e

File tree

3 files changed

+633
-2
lines changed

3 files changed

+633
-2
lines changed

‎app/docs/api-reference/page.tsx‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
'use client';
2+
3+
import { Code, Package, Wrench } from 'phosphor-react';
4+
5+
export default function APIReferencePage() {
6+
return (
7+
<div className="min-h-screen bg-black text-white">
8+
<div className="container mx-auto px-4 py-12 max-w-4xl">
9+
{/* Header */}
10+
<div className="mb-8">
11+
<div className="flex items-center gap-4 mb-4">
12+
<Code size={48} weight="duotone" />
13+
<h1 className="text-5xl font-bold">API Reference</h1>
14+
</div>
15+
<p className="text-gray-400">Programmatic usage of OmniScript Format</p>
16+
</div>
17+
18+
<div className="prose prose-invert max-w-none">
19+
{/* Parser Package */}
20+
<section className="mb-12">
21+
<h2 className="text-3xl font-bold mb-6 border-b-2 border-white pb-2 flex items-center gap-3">
22+
<Package size={36} weight="duotone" />
23+
omniscript-parser
24+
</h2>
25+
26+
<p className="text-gray-300 mb-4">
27+
Zero-dependency TypeScript parser for converting OSF text to Abstract Syntax Tree (AST) and back.
28+
</p>
29+
30+
<h3 className="text-2xl font-bold mb-4 mt-8">Installation</h3>
31+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
32+
npm install omniscript-parser
33+
</pre>
34+
35+
<h3 className="text-2xl font-bold mb-4">Usage</h3>
36+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
37+
{`import { parse, serialize } from 'omniscript-parser';
38+
39+
// Parse OSF to AST
40+
const osfCode = \`
41+
@meta { title: "My Document"; }
42+
@doc { content: "# Hello World"; }
43+
\`;
44+
45+
const ast = parse(osfCode);
46+
console.log(ast);
47+
// Output: { version: "1.0", blocks: [...] }
48+
49+
// Serialize AST back to OSF
50+
const osfOutput = serialize(ast);
51+
console.log(osfOutput);`}
52+
</pre>
53+
54+
<h3 className="text-2xl font-bold mb-4">API</h3>
55+
56+
<div className="mb-6 border-2 border-blue-500 p-6">
57+
<h4 className="font-bold text-xl mb-3">parse(osfCode: string): OSFDocument</h4>
58+
<p className="text-gray-300 mb-4">
59+
Parses OSF text into an Abstract Syntax Tree (AST).
60+
</p>
61+
<p className="text-sm text-gray-400">
62+
<strong>Parameters:</strong> osfCode - String containing OSF content
63+
</p>
64+
<p className="text-sm text-gray-400">
65+
<strong>Returns:</strong> OSFDocument object with version and blocks array
66+
</p>
67+
<p className="text-sm text-gray-400">
68+
<strong>Throws:</strong> Error if syntax is invalid
69+
</p>
70+
</div>
71+
72+
<div className="mb-6 border-2 border-blue-500 p-6">
73+
<h4 className="font-bold text-xl mb-3">serialize(ast: OSFDocument): string</h4>
74+
<p className="text-gray-300 mb-4">
75+
Converts an AST back to OSF text format.
76+
</p>
77+
<p className="text-sm text-gray-400">
78+
<strong>Parameters:</strong> ast - OSFDocument object
79+
</p>
80+
<p className="text-sm text-gray-400">
81+
<strong>Returns:</strong> String containing formatted OSF code
82+
</p>
83+
</div>
84+
85+
<h3 className="text-2xl font-bold mb-4 mt-8">Types</h3>
86+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
87+
{`interface OSFDocument {
88+
version?: string;
89+
blocks: OSFBlock[];
90+
}
91+
92+
type OSFBlock =
93+
| MetaBlock
94+
| DocBlock
95+
| SlideBlock
96+
| SheetBlock
97+
| ChartBlock
98+
| DiagramBlock
99+
| OSFCodeBlock;
100+
101+
interface MetaBlock {
102+
type: 'meta';
103+
title?: string;
104+
author?: string;
105+
date?: string;
106+
version?: string;
107+
theme?: string;
108+
tags?: string[];
109+
description?: string;
110+
}
111+
112+
interface ChartBlock {
113+
type: 'chart';
114+
chartType: 'bar' | 'line' | 'pie' | 'scatter' | 'area';
115+
title: string;
116+
data: ChartDataSeries[];
117+
options?: ChartOptions;
118+
}`}
119+
</pre>
120+
</section>
121+
122+
{/* Converters Package */}
123+
<section className="mb-12">
124+
<h2 className="text-3xl font-bold mb-6 border-b-2 border-white pb-2 flex items-center gap-3">
125+
<Package size={36} weight="duotone" />
126+
omniscript-converters
127+
</h2>
128+
129+
<p className="text-gray-300 mb-4">
130+
Professional document converters for exporting OSF to PDF, DOCX, PPTX, and XLSX.
131+
</p>
132+
133+
<h3 className="text-2xl font-bold mb-4 mt-8">Installation</h3>
134+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
135+
npm install omniscript-parser omniscript-converters
136+
</pre>
137+
138+
<h3 className="text-2xl font-bold mb-4">Usage - PDF</h3>
139+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
140+
{`import { parse } from 'omniscript-parser';
141+
import { PDFConverter } from 'omniscript-converters';
142+
143+
const osfCode = \`@meta { title: "My Document"; }\`;
144+
const ast = parse(osfCode);
145+
146+
const converter = new PDFConverter();
147+
const result = await converter.convert(ast, { theme: 'Corporate' });
148+
149+
// Write to file
150+
import fs from 'fs';
151+
fs.writeFileSync('output.pdf', result.buffer);`}
152+
</pre>
153+
154+
<h3 className="text-2xl font-bold mb-4">Usage - DOCX</h3>
155+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
156+
{`import { DOCXConverter } from 'omniscript-converters';
157+
158+
const converter = new DOCXConverter();
159+
const result = await converter.convert(ast);
160+
161+
fs.writeFileSync('output.docx', result.buffer);`}
162+
</pre>
163+
164+
<h3 className="text-2xl font-bold mb-4">Usage - PPTX</h3>
165+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
166+
{`import { PPTXConverter } from 'omniscript-converters';
167+
168+
const converter = new PPTXConverter();
169+
const result = await converter.convert(ast, { theme: 'Modern' });
170+
171+
fs.writeFileSync('output.pptx', result.buffer);`}
172+
</pre>
173+
174+
<h3 className="text-2xl font-bold mb-4">Usage - XLSX</h3>
175+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
176+
{`import { XLSXConverter } from 'omniscript-converters';
177+
178+
const converter = new XLSXConverter();
179+
const result = await converter.convert(ast);
180+
181+
fs.writeFileSync('output.xlsx', result.buffer);`}
182+
</pre>
183+
184+
<h3 className="text-2xl font-bold mb-4 mt-8">Converter Options</h3>
185+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
186+
{`interface ConverterOptions {
187+
theme?: string; // Theme name (default: 'default')
188+
pageSize?: 'A4' | 'Letter';
189+
orientation?: 'portrait' | 'landscape';
190+
fontSize?: number;
191+
fontFamily?: string;
192+
}`}
193+
</pre>
194+
195+
<h3 className="text-2xl font-bold mb-4">Themes</h3>
196+
<p className="text-gray-300 mb-4">
197+
Available themes: <code>default</code>, <code>Corporate</code>, <code>Modern</code>,
198+
<code>Minimal</code>, <code>Academic</code>, <code>Dark</code>, <code>Light</code>
199+
</p>
200+
</section>
201+
202+
{/* CLI Package */}
203+
<section className="mb-12">
204+
<h2 className="text-3xl font-bold mb-6 border-b-2 border-white pb-2 flex items-center gap-3">
205+
<Wrench size={36} weight="duotone" />
206+
omniscript-cli
207+
</h2>
208+
209+
<p className="text-gray-300 mb-4">
210+
Command-line interface for parsing, validating, and converting OSF files.
211+
</p>
212+
213+
<h3 className="text-2xl font-bold mb-4 mt-8">Installation</h3>
214+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
215+
npm install -g omniscript-cli
216+
</pre>
217+
218+
<h3 className="text-2xl font-bold mb-4">Commands</h3>
219+
220+
<div className="space-y-6">
221+
<div className="border-2 border-green-500 p-6">
222+
<h4 className="font-bold text-xl mb-3 font-mono">osf parse {'<file>'}</h4>
223+
<p className="text-gray-300 mb-2">
224+
Parse and validate an OSF file, output AST as JSON.
225+
</p>
226+
<pre className="bg-gray-900 p-2 rounded text-sm">
227+
osf parse document.osf
228+
</pre>
229+
</div>
230+
231+
<div className="border-2 border-green-500 p-6">
232+
<h4 className="font-bold text-xl mb-3 font-mono">osf render {'<file>'} --format {'<type>'}</h4>
233+
<p className="text-gray-300 mb-2">
234+
Convert OSF to specified format (pdf, docx, pptx, xlsx, html).
235+
</p>
236+
<pre className="bg-gray-900 p-2 rounded text-sm">
237+
{`osf render doc.osf --format pdf --output output.pdf
238+
osf render doc.osf --format docx --theme Corporate`}
239+
</pre>
240+
</div>
241+
242+
<div className="border-2 border-green-500 p-6">
243+
<h4 className="font-bold text-xl mb-3 font-mono">osf lint {'<file>'}</h4>
244+
<p className="text-gray-300 mb-2">
245+
Check OSF file for syntax errors and best practice violations.
246+
</p>
247+
<pre className="bg-gray-900 p-2 rounded text-sm">
248+
osf lint document.osf
249+
</pre>
250+
</div>
251+
252+
<div className="border-2 border-green-500 p-6">
253+
<h4 className="font-bold text-xl mb-3 font-mono">osf export {'<file>'} --target {'<type>'}</h4>
254+
<p className="text-gray-300 mb-2">
255+
Export OSF to another text format (md, json).
256+
</p>
257+
<pre className="bg-gray-900 p-2 rounded text-sm">
258+
osf export doc.osf --target md --output README.md
259+
</pre>
260+
</div>
261+
</div>
262+
</section>
263+
264+
{/* Examples */}
265+
<section className="mb-12">
266+
<h2 className="text-3xl font-bold mb-4 border-b-2 border-white pb-2">Complete Example</h2>
267+
268+
<pre className="bg-gray-900 p-4 rounded overflow-x-auto mb-6">
269+
{`// File: generate-report.ts
270+
import { parse, serialize } from 'omniscript-parser';
271+
import { PDFConverter, DOCXConverter } from 'omniscript-converters';
272+
import fs from 'fs';
273+
274+
async function generateReport() {
275+
// Create OSF content
276+
const osfCode = \`
277+
@meta {
278+
title: "Q4 Business Report";
279+
author: "Finance Team";
280+
date: "2025-10-15";
281+
theme: "Corporate";
282+
}
283+
284+
@doc {
285+
content: "# Executive Summary
286+
287+
Revenue grew **25%** this quarter.
288+
";
289+
}
290+
291+
@chart {
292+
type: "bar";
293+
title: "Revenue by Quarter";
294+
data: [
295+
{ label: "Q1"; values: [100]; },
296+
{ label: "Q2"; values: [120]; },
297+
{ label: "Q3"; values: [140]; },
298+
{ label: "Q4"; values: [175]; }
299+
];
300+
}
301+
\`;
302+
303+
// Parse to AST
304+
const ast = parse(osfCode);
305+
306+
// Generate PDF
307+
const pdfConverter = new PDFConverter();
308+
const pdfResult = await pdfConverter.convert(ast);
309+
fs.writeFileSync('report.pdf', pdfResult.buffer);
310+
311+
// Generate DOCX
312+
const docxConverter = new DOCXConverter();
313+
const docxResult = await docxConverter.convert(ast);
314+
fs.writeFileSync('report.docx', docxResult.buffer);
315+
316+
console.log('✅ Generated report.pdf and report.docx');
317+
}
318+
319+
generateReport();`}
320+
</pre>
321+
</section>
322+
</div>
323+
324+
{/* Footer Navigation */}
325+
<div className="flex justify-between items-center mt-12 pt-8 border-t-2 border-gray-800">
326+
<a href="/docs/user-guide" className="text-blue-400 hover:underline">← User Guide</a>
327+
<a href="https://github.com/OmniScriptOSF/omniscript-core" className="text-blue-400 hover:underline" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
328+
</div>
329+
</div>
330+
</div>
331+
);
332+
}

0 commit comments

Comments
 (0)