Skip to content

Commit 75d60a0

Browse files
alpha912claude
alpha912
and
claude
committed
feat: implement OmniScript landing page with NOIR design system
Next.js Site Implementation: - Built with Next.js 14.2.18 and TypeScript 5.x - Configured for static site generation (SSG) - Optimized for GitHub Pages deployment NOIR Design System: - Terminal-aesthetic design language - Pure black/white color scheme with grayscale - JetBrains Mono monospace typography - 8px base spacing unit with geometric precision - Custom Tailwind CSS configuration Landing Page Features: - Hero section with installation terminal - Features grid showcasing 6 key benefits - Interactive code examples with syntax highlighting - Quick start guide with step-by-step instructions - Responsive navigation and footer - SEO-optimized metadata Components: - Terminal component with window chrome - CodeBlock component with line numbers - Reusable button and card components - Accessibility features (skip links, focus states) GitHub Pages Setup: - Automated deployment workflow - Build and deploy on push to main - Static export configuration - .nojekyll file for proper routing Dependencies: - React 18.3.1 - Tailwind CSS 3.4.17 - Next.js optimized fonts (Inter, JetBrains Mono) - pnpm for package management 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 61d2c6d commit 75d60a0

File tree

17 files changed

+4651
-2
lines changed

17 files changed

+4651
-2
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: ['main']
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: 'pages'
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup pnpm
25+
uses: pnpm/action-setup@v2
26+
with:
27+
version: 8
28+
29+
- name: Setup Node.js
30+
uses: actions/setup-node@v4
31+
with:
32+
node-version: '20'
33+
cache: 'pnpm'
34+
35+
- name: Install dependencies
36+
run: pnpm install --frozen-lockfile
37+
38+
- name: Build site
39+
run: pnpm run build
40+
41+
- name: Upload artifact
42+
uses: actions/upload-pages-artifact@v3
43+
with:
44+
path: ./out
45+
46+
deploy:
47+
environment:
48+
name: github-pages
49+
url: ${{ steps.deployment.outputs.page_url }}
50+
runs-on: ubuntu-latest
51+
needs: build
52+
steps:
53+
- name: Deploy to GitHub Pages
54+
id: deployment
55+
uses: actions/deploy-pages@v4

‎.nojekyll‎

Whitespace-only changes.

‎README.md‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,68 @@
1-
# omniscript-site
2-
The website + documentation hub for OmniScript — including spec documentation, tutorials, and live playground.
1+
# OmniScript Site
2+
3+
Official landing page for OmniScript - the universal document DSL for LLMs and AI.
4+
5+
## 🎨 Design System
6+
7+
Built with the **NOIR design system** - a terminal-aesthetic design language featuring:
8+
9+
- Pure black & white color scheme with grayscale variations
10+
- Monospace-first typography (JetBrains Mono)
11+
- Geometric precision with 8px base unit
12+
- Terminal-inspired components
13+
- Maximum clarity and readability
14+
15+
## 🛠 Tech Stack
16+
17+
- **Framework**: Next.js 14 (Static Site Generation)
18+
- **Language**: TypeScript 5.x (strict mode)
19+
- **Styling**: Tailwind CSS 3.4+
20+
- **Fonts**: JetBrains Mono, Inter
21+
- **Package Manager**: pnpm
22+
- **Deployment**: GitHub Pages
23+
24+
## 🚀 Development
25+
26+
```bash
27+
# Install dependencies
28+
pnpm install
29+
30+
# Start development server
31+
pnpm run dev
32+
33+
# Build for production
34+
pnpm run build
35+
36+
# Preview production build
37+
pnpm run start
38+
```
39+
40+
Visit `http://localhost:3000` to see the site.
41+
42+
## 📦 Project Structure
43+
44+
```
45+
omniscript-site/
46+
├── app/
47+
│ ├── layout.tsx # Root layout with fonts
48+
│ ├── page.tsx # Landing page
49+
│ └── globals.css # NOIR design system styles
50+
├── components/
51+
│ ├── Terminal.tsx # Terminal window component
52+
│ └── CodeBlock.tsx # Code display component
53+
├── public/
54+
│ └── .nojekyll # Disable Jekyll processing
55+
└── .github/
56+
└── workflows/
57+
└── deploy.yml # GitHub Pages deployment
58+
```
59+
60+
## 🌐 Deployment
61+
62+
The site automatically deploys to GitHub Pages on every push to `main` branch.
63+
64+
**Live URL**: https://omniscriptosf.github.io/omniscript-site/
65+
66+
## 📄 License
67+
68+
MIT License - Built with ❤️ by [Alphin Tom](https://github.com/alpha912)

‎README.md.bak‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# omniscript-site
2+
The website + documentation hub for OmniScript — including spec documentation, tutorials, and live playground.

‎app/globals.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
/* Font Loading */
6+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
7+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
8+
9+
@layer base {
10+
/* Root Variables */
11+
:root {
12+
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
13+
--font-sans: 'Inter', system-ui, sans-serif;
14+
}
15+
16+
/* Base Styles */
17+
* {
18+
@apply border-noir-black;
19+
}
20+
21+
html {
22+
@apply antialiased;
23+
font-feature-settings: 'liga', 'calt', 'zero', 'ss01';
24+
}
25+
26+
body {
27+
@apply bg-noir-white text-noir-black font-mono;
28+
}
29+
30+
/* Focus Styles */
31+
:focus-visible {
32+
@apply outline outline-[3px] outline-noir-black outline-offset-2;
33+
}
34+
35+
:focus:not(:focus-visible) {
36+
@apply outline-none;
37+
}
38+
39+
/* Selection */
40+
::selection {
41+
@apply bg-noir-black text-noir-white;
42+
}
43+
44+
/* Scrollbar */
45+
::-webkit-scrollbar {
46+
@apply w-2 h-2;
47+
}
48+
49+
::-webkit-scrollbar-track {
50+
@apply bg-gray-100;
51+
}
52+
53+
::-webkit-scrollbar-thumb {
54+
@apply bg-gray-400;
55+
}
56+
57+
::-webkit-scrollbar-thumb:hover {
58+
@apply bg-gray-600;
59+
}
60+
}
61+
62+
@layer components {
63+
/* Container */
64+
.container-noir {
65+
@apply max-w-7xl mx-auto px-6 md:px-12;
66+
}
67+
68+
.container-narrow {
69+
@apply max-w-3xl mx-auto px-6 md:px-8;
70+
}
71+
72+
/* Button Base */
73+
.btn {
74+
@apply inline-flex items-center justify-center gap-2;
75+
@apply px-6 py-3;
76+
@apply font-mono font-medium text-sm uppercase tracking-wide;
77+
@apply border-2 border-noir-black;
78+
@apply transition-all duration-200;
79+
@apply active:scale-95;
80+
@apply disabled:opacity-50 disabled:cursor-not-allowed;
81+
}
82+
83+
.btn-primary {
84+
@apply btn bg-noir-black text-noir-white;
85+
@apply hover:bg-noir-white hover:text-noir-black;
86+
}
87+
88+
.btn-secondary {
89+
@apply btn bg-transparent text-noir-black;
90+
@apply hover:bg-noir-black hover:text-noir-white;
91+
}
92+
93+
/* Card Base */
94+
.card {
95+
@apply bg-noir-white border-2 border-gray-200 p-8;
96+
@apply transition-all duration-300;
97+
}
98+
99+
.card-hover {
100+
@apply card hover:border-noir-black hover:shadow-noir-md;
101+
}
102+
103+
/* Terminal Window */
104+
.terminal {
105+
@apply bg-gray-900 border-2 border-gray-800 overflow-hidden;
106+
}
107+
108+
.terminal-header {
109+
@apply flex items-center gap-2 px-4 py-3;
110+
@apply bg-gray-800 border-b-2 border-gray-700;
111+
}
112+
113+
.terminal-dot {
114+
@apply w-3 h-3 rounded-full bg-gray-600;
115+
}
116+
117+
.terminal-content {
118+
@apply p-6 font-mono text-sm text-gray-100;
119+
}
120+
121+
/* Code Block */
122+
.code-block {
123+
@apply bg-gray-900 border-2 border-gray-800 overflow-hidden;
124+
}
125+
126+
.code-block pre {
127+
@apply p-6 overflow-x-auto;
128+
}
129+
130+
.code-block code {
131+
@apply font-mono text-sm text-gray-100;
132+
}
133+
}
134+
135+
@layer utilities {
136+
/* Text Utilities */
137+
.text-balance {
138+
text-wrap: balance;
139+
}
140+
141+
/* Grid Utilities */
142+
.grid-noir {
143+
@apply grid gap-8;
144+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
145+
}
146+
147+
/* Animation Utilities */
148+
@media (prefers-reduced-motion: reduce) {
149+
*,
150+
*::before,
151+
*::after {
152+
animation-duration: 0.01ms !important;
153+
animation-iteration-count: 1 !important;
154+
transition-duration: 0.01ms !important;
155+
}
156+
}
157+
}

‎app/layout.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import type { Metadata } from 'next'
2+
import { JetBrains_Mono, Inter } from 'next/font/google'
3+
import './globals.css'
4+
5+
const jetbrainsMono = JetBrains_Mono({
6+
subsets: ['latin'],
7+
variable: '--font-mono',
8+
weight: ['400', '500', '700'],
9+
display: 'swap',
10+
})
11+
12+
const inter = Inter({
13+
subsets: ['latin'],
14+
variable: '--font-sans',
15+
weight: ['400', '600', '800'],
16+
display: 'swap',
17+
})
18+
19+
export const metadata: Metadata = {
20+
title: 'OmniScript Format - Universal Document DSL for LLMs & AI',
21+
description: 'The universal document format that unifies docs, slides, and spreadsheets into one AI-friendly, Git-native format.',
22+
keywords: ['omniscript', 'osf', 'document format', 'llm', 'ai', 'git-native', 'markdown', 'typescript'],
23+
authors: [{ name: 'Alphin Tom', url: 'https://github.com/alpha912' }],
24+
openGraph: {
25+
title: 'OmniScript Format',
26+
description: 'Universal Document DSL for LLMs, Agentic AI, and Git-Native Workflows',
27+
type: 'website',
28+
url: 'https://omniscript.github.io',
29+
},
30+
}
31+
32+
export default function RootLayout({
33+
children,
34+
}: {
35+
children: React.ReactNode
36+
}) {
37+
return (
38+
<html lang="en" className={`${jetbrainsMono.variable} ${inter.variable}`}>
39+
<body className="font-mono antialiased">
40+
{/* Skip Link */}
41+
<a
42+
href="#main-content"
43+
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-noir-black focus:text-noir-white"
44+
>
45+
Skip to main content
46+
</a>
47+
48+
{/* Main Content */}
49+
<main id="main-content">
50+
{children}
51+
</main>
52+
</body>
53+
</html>
54+
)
55+
}

0 commit comments

Comments
 (0)