Skip to content

Commit 643d8d3

Browse files
alpha912alpha912
committed
docs: add v1.3 feature guide and update docs hub
1 parent ae165d2 commit 643d8d3

1 file changed

Lines changed: 225 additions & 0 deletions

File tree

‎app/docs/v1-3-features/page.tsx‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
// File: app/docs/v1-3-features/page.tsx
2+
// What: v1.3 features reference guide
3+
// Why: Provide a single source of truth for all active OSF features in v1.3
4+
// Related: app/docs/releases/v1-3/page.tsx, app/docs/v1-2-features/page.tsx
5+
6+
'use client';
7+
8+
import Link from 'next/link';
9+
import Navigation from '@/components/Navigation';
10+
import { Book, FileText, PresentationChart, Table, ChartBar, FlowArrow, Code, Shield } from 'phosphor-react';
11+
12+
export default function V13FeaturesPage() {
13+
return (
14+
<div className="min-h-screen bg-black text-white">
15+
<Navigation dark />
16+
<div className="container mx-auto px-4 py-12 pt-24 max-w-5xl">
17+
<div className="mb-8">
18+
<div className="flex items-center gap-4 mb-4">
19+
<Book size={48} weight="duotone" />
20+
<h1 className="text-5xl font-bold">v1.3 Features Reference</h1>
21+
<span className="px-4 py-2 bg-green-500 text-black text-sm font-bold">LATEST</span>
22+
</div>
23+
<p className="text-xl text-gray-300">
24+
A single, up-to-date reference for everything supported in OmniScript v1.3.0 — regardless of
25+
when it was introduced.
26+
</p>
27+
<div className="mt-4 text-sm text-gray-400">
28+
Spec: v1.2 (current stable) • Release: v1.3.0
29+
</div>
30+
</div>
31+
32+
{/* Core Blocks */}
33+
<section className="mb-12 border-l-4 border-green-500 pl-6">
34+
<h2 className="text-4xl font-bold mb-6">Core Blocks</h2>
35+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
36+
<div className="border-2 border-white p-4 bg-gray-900">
37+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
38+
<FileText size={22} weight="duotone" />@meta
39+
</h3>
40+
<p className="text-gray-300 mb-3">Document metadata (title, author, date, theme).</p>
41+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@meta {
42+
title: "My First Document";
43+
author: "Your Name";
44+
date: "2025-10-16";
45+
theme: corporate;
46+
}`}</pre>
47+
</div>
48+
<div className="border-2 border-white p-4 bg-gray-900">
49+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
50+
<FileText size={22} weight="duotone" />@doc
51+
</h3>
52+
<p className="text-gray-300 mb-3">Markdown-style narrative content.</p>
53+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@doc {
54+
# Heading
55+
This is **bold**, *italic*, and ~~strikethrough~~.
56+
}`}</pre>
57+
</div>
58+
<div className="border-2 border-white p-4 bg-gray-900">
59+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
60+
<PresentationChart size={22} weight="duotone" />@slide
61+
</h3>
62+
<p className="text-gray-300 mb-3">Presentation slides with layouts and bullets.</p>
63+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@slide {
64+
title: "Key Metrics";
65+
layout: TitleAndBullets;
66+
bullets {
67+
"Revenue up 20%";
68+
"Churn down to 2%";
69+
}
70+
}`}</pre>
71+
</div>
72+
<div className="border-2 border-white p-4 bg-gray-900">
73+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
74+
<Table size={22} weight="duotone" />@sheet
75+
</h3>
76+
<p className="text-gray-300 mb-3">Spreadsheet-style data with formulas.</p>
77+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@sheet {
78+
name: "Budget";
79+
cols: [Item, Cost, Qty, Total];
80+
A2 = "Hosting"; B2 = 120; C2 = 12; D2 = =B2*C2;
81+
}`}</pre>
82+
</div>
83+
</div>
84+
</section>
85+
86+
{/* Advanced Blocks */}
87+
<section className="mb-12 border-l-4 border-purple-500 pl-6">
88+
<h2 className="text-4xl font-bold mb-6">Advanced Blocks</h2>
89+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
90+
<div className="border-2 border-white p-4 bg-gray-900">
91+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
92+
<ChartBar size={22} weight="duotone" />@chart
93+
</h3>
94+
<p className="text-gray-300 mb-3">Bar/line/pie/area charts.</p>
95+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@chart {
96+
type: "bar";
97+
title: "Sales";
98+
data: [
99+
{ label: "Q1"; values: [100]; }
100+
];
101+
}`}</pre>
102+
</div>
103+
<div className="border-2 border-white p-4 bg-gray-900">
104+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
105+
<FlowArrow size={22} weight="duotone" />@diagram
106+
</h3>
107+
<p className="text-gray-300 mb-3">Mermaid or Graphviz diagrams.</p>
108+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@diagram {
109+
type: "flowchart";
110+
engine: "mermaid";
111+
code: "graph TD; A-->B;";
112+
}`}</pre>
113+
</div>
114+
<div className="border-2 border-white p-4 bg-gray-900">
115+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
116+
<Code size={22} weight="duotone" />@code
117+
</h3>
118+
<p className="text-gray-300 mb-3">Formatted code blocks.</p>
119+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@code {
120+
language: "ts";
121+
code: "const x = 1;";
122+
}`}</pre>
123+
</div>
124+
</div>
125+
</section>
126+
127+
{/* Tables + Includes */}
128+
<section className="mb-12 border-l-4 border-blue-500 pl-6">
129+
<h2 className="text-4xl font-bold mb-6">Tables & Modular Includes</h2>
130+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
131+
<div className="border-2 border-white p-4 bg-gray-900">
132+
<h3 className="text-2xl font-bold mb-2">@table</h3>
133+
<p className="text-gray-300 mb-3">Markdown tables with caption, style, and alignment.</p>
134+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@table {
135+
caption: "Regional Performance";
136+
style: "bordered";
137+
alignment: ["left", "right", "right", "center"];
138+
| Region | Q3 | Q4 | Growth |
139+
| --- | --- | --- | --- |
140+
| NA | $975K | $1.15M | +18% |
141+
}`}</pre>
142+
</div>
143+
<div className="border-2 border-white p-4 bg-gray-900">
144+
<h3 className="text-2xl font-bold mb-2">@include</h3>
145+
<p className="text-gray-300 mb-3">Compose documents from multiple files.</p>
146+
<pre className="bg-black p-3 border-2 border-white text-green-400 text-xs overflow-x-auto">{`@include { path: "./sections/intro.osf"; }
147+
@include { path: "./sections/body.osf"; }`}</pre>
148+
</div>
149+
</div>
150+
<div className="mt-4 text-sm text-gray-400">
151+
Includes support depth up to 10 and block path traversal for safety.
152+
</div>
153+
</section>
154+
155+
{/* Formatting */}
156+
<section className="mb-12 border-l-4 border-white pl-6">
157+
<h2 className="text-4xl font-bold mb-6">Formatting & Inline Syntax</h2>
158+
<ul className="list-disc list-inside space-y-2 text-gray-300">
159+
<li>Headings: <code>#</code>, <code>##</code>, <code>###</code></li>
160+
<li>Bold: <code>**text**</code> • Italic: <code>*text*</code></li>
161+
<li>Strikethrough: <code>~~text~~</code></li>
162+
<li>Inline code: <code>`code`</code> • Code blocks: <code>```lang</code></li>
163+
<li>Lists: <code>-</code>, <code>*</code>, ordered lists <code>1.</code></li>
164+
<li>Blockquotes: <code>&gt; quoted text</code></li>
165+
<li>Links: <code>[text](url)</code> • Images: <code>![alt](url)</code></li>
166+
<li>Unicode escapes: <code>\uXXXX</code> and <code>\xXX</code></li>
167+
</ul>
168+
</section>
169+
170+
{/* Export Targets */}
171+
<section className="mb-12 border-l-4 border-orange-500 pl-6">
172+
<h2 className="text-4xl font-bold mb-6">Export Targets (v1.3)</h2>
173+
<p className="text-gray-300 mb-4">
174+
v1.3 aligns table and blockquote rendering across all exporters.
175+
</p>
176+
<ul className="list-disc list-inside space-y-2 text-gray-300">
177+
<li>PDF</li>
178+
<li>DOCX</li>
179+
<li>PPTX</li>
180+
<li>XLSX</li>
181+
<li>HTML</li>
182+
<li>JSON (AST)</li>
183+
</ul>
184+
</section>
185+
186+
{/* Security */}
187+
<section className="mb-12 border-l-4 border-purple-500 pl-6">
188+
<div className="flex items-center gap-3 mb-4">
189+
<Shield size={28} weight="duotone" />
190+
<h2 className="text-4xl font-bold">Security & Safety</h2>
191+
</div>
192+
<ul className="list-disc list-inside space-y-2 text-gray-300">
193+
<li>HTML escaping for all rendered content</li>
194+
<li>Path traversal protection for @include</li>
195+
<li>Strict input validation (tables, numbers, alignments)</li>
196+
<li>ReDoS protection with bounded regex usage</li>
197+
</ul>
198+
</section>
199+
200+
{/* Links */}
201+
<section className="mb-12">
202+
<h2 className="text-4xl font-bold mb-6">Reference Links</h2>
203+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
204+
<Link
205+
href="/docs/releases/v1-3"
206+
className="block p-6 border-2 border-white hover:bg-white hover:text-black transition-colors"
207+
>
208+
<h3 className="text-xl font-bold mb-2">v1.3 Release Notes →</h3>
209+
<p className="text-sm opacity-80">What changed in the latest release</p>
210+
</Link>
211+
<a
212+
href="https://github.com/OmniScriptOSF/omniscript-core/blob/main/spec/v1.2/README.md"
213+
className="block p-6 border-2 border-white hover:bg-white hover:text-black transition-colors"
214+
target="_blank"
215+
rel="noopener noreferrer"
216+
>
217+
<h3 className="text-xl font-bold mb-2">Spec v1.2 →</h3>
218+
<p className="text-sm opacity-80">Current stable OSF specification</p>
219+
</a>
220+
</div>
221+
</section>
222+
</div>
223+
</div>
224+
);
225+
}

0 commit comments

Comments
 (0)