Skip to content

Commit 2396304

Browse files
streamichstreamich
authored
Merge pull request #334 from streamich/docs-site
docs: ✏️ add docs site
2 parents 981615f + 13827a4 commit 2396304

66 files changed

Lines changed: 6473 additions & 4 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/gh-pages.yml‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Node.js CI
1+
name: Publish Docs Site
22

33
on:
44
push:
@@ -7,6 +7,8 @@ on:
77
jobs:
88
gh-pages:
99
runs-on: ubuntu-latest
10+
permissions:
11+
contents: write
1012
strategy:
1113
matrix:
1214
node-version: [20.x]
@@ -17,10 +19,12 @@ jobs:
1719
with:
1820
node-version: ${{ matrix.node-version }}
1921
cache: yarn
20-
- run: yarn install --frozen-lockfile
21-
- run: yarn test --coverage
22+
cache-dependency-path: site/yarn.lock
23+
- run: yarn --cwd site --frozen-lockfile
24+
- run: yarn --cwd site build
25+
- run: touch site/out/.nojekyll
2226
- name: Publish to gh-pages
2327
uses: peaceiris/actions-gh-pages@v3
2428
with:
2529
github_token: ${{ secrets.GITHUB_TOKEN }}
26-
publish_dir: ./coverage/lcov-report
30+
publish_dir: ./site/out

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,8 @@ lerna-debug.log
1212
/dist/
1313
_book/
1414
/demo/
15+
16+
# Static docs site artifacts
17+
site/.next/
18+
site/out/
19+
site/node_modules/

‎site/app/[[...mdxPath]]/page.jsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { generateStaticParamsFor, importPage } from 'nextra/pages'
2+
import { notFound } from 'next/navigation'
3+
import { useMDXComponents as getMDXComponents } from '../../mdx-components'
4+
5+
const isAssetLikePath = (mdxPath = []) =>
6+
mdxPath.some((segment) => segment.includes('.'))
7+
8+
export const generateStaticParams = generateStaticParamsFor('mdxPath')
9+
10+
export async function generateMetadata(props) {
11+
const params = await props.params
12+
const mdxPath = params?.mdxPath ?? []
13+
14+
if (isAssetLikePath(mdxPath)) {
15+
return {}
16+
}
17+
18+
try {
19+
const { metadata } = await importPage(mdxPath)
20+
return metadata
21+
} catch {
22+
return {}
23+
}
24+
}
25+
26+
const Wrapper = getMDXComponents().wrapper
27+
28+
export default async function Page(props) {
29+
const params = await props.params
30+
const mdxPath = params?.mdxPath ?? []
31+
32+
if (isAssetLikePath(mdxPath)) {
33+
notFound()
34+
}
35+
36+
let page
37+
try {
38+
page = await importPage(mdxPath)
39+
} catch {
40+
notFound()
41+
}
42+
43+
const { default: MDXContent, toc, metadata, sourceCode } = page
44+
45+
return (
46+
<Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
47+
<MDXContent {...props} params={params} />
48+
</Wrapper>
49+
)
50+
}

‎site/app/favicon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎site/app/globals.css‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
/* nano-css docs - Professional theme overrides */
2+
3+
:root {
4+
--nano-accent: #0a0a0a;
5+
--nano-muted: #666;
6+
--nano-border: #e5e5e5;
7+
--nano-surface: #fafafa;
8+
--nano-brand: #0969da;
9+
}
10+
11+
.dark {
12+
--nano-accent: #fafafa;
13+
--nano-muted: #999;
14+
--nano-border: #2a2a2a;
15+
--nano-surface: #111;
16+
--nano-brand: #58a6ff;
17+
}
18+
19+
/* Landing page hero */
20+
.nano-hero {
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: center;
25+
text-align: center;
26+
padding: 6rem 1.5rem 4rem;
27+
min-height: 70vh;
28+
}
29+
30+
.nano-hero h1 {
31+
font-size: clamp(3rem, 8vw, 5.5rem);
32+
font-weight: 800;
33+
letter-spacing: -0.04em;
34+
line-height: 1;
35+
margin: 0;
36+
color: var(--nano-accent);
37+
}
38+
39+
.nano-hero .nano-tagline {
40+
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
41+
color: var(--nano-muted);
42+
margin-top: 1.25rem;
43+
font-weight: 400;
44+
letter-spacing: -0.01em;
45+
max-width: 540px;
46+
}
47+
48+
.nano-hero .nano-version {
49+
display: inline-block;
50+
margin-top: 1.5rem;
51+
padding: 0.25rem 0.75rem;
52+
font-size: 0.8rem;
53+
font-weight: 500;
54+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
55+
color: var(--nano-muted);
56+
border: 1px solid var(--nano-border);
57+
border-radius: 999px;
58+
background: var(--nano-surface);
59+
}
60+
61+
.nano-cta {
62+
display: flex;
63+
gap: 0.75rem;
64+
margin-top: 2.5rem;
65+
flex-wrap: wrap;
66+
justify-content: center;
67+
}
68+
69+
.nano-cta a {
70+
display: inline-flex;
71+
align-items: center;
72+
gap: 0.5rem;
73+
padding: 0.7rem 1.5rem;
74+
border-radius: 8px;
75+
font-size: 0.95rem;
76+
font-weight: 500;
77+
text-decoration: none;
78+
transition: all 150ms ease;
79+
}
80+
81+
.nano-cta .primary {
82+
background: var(--nano-accent);
83+
color: var(--nano-surface);
84+
}
85+
.nano-cta .primary:hover {
86+
opacity: 0.85;
87+
}
88+
89+
.nano-cta .secondary {
90+
border: 1px solid var(--nano-border);
91+
color: var(--nano-accent);
92+
background: transparent;
93+
}
94+
.nano-cta .secondary:hover {
95+
background: var(--nano-surface);
96+
border-color: var(--nano-muted);
97+
}
98+
99+
/* Stats bar */
100+
.nano-stats {
101+
display: flex;
102+
gap: 3rem;
103+
margin-top: 4rem;
104+
flex-wrap: wrap;
105+
justify-content: center;
106+
}
107+
108+
.nano-stat {
109+
text-align: center;
110+
}
111+
112+
.nano-stat .value {
113+
display: block;
114+
font-size: 1.8rem;
115+
font-weight: 700;
116+
letter-spacing: -0.02em;
117+
color: var(--nano-accent);
118+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
119+
}
120+
121+
.nano-stat .label {
122+
display: block;
123+
font-size: 0.85rem;
124+
color: var(--nano-muted);
125+
margin-top: 0.25rem;
126+
}
127+
128+
/* Feature grid */
129+
.nano-features {
130+
display: grid;
131+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
132+
gap: 1.5rem;
133+
max-width: 960px;
134+
margin: 4rem auto;
135+
padding: 0 1.5rem;
136+
}
137+
138+
.nano-feature {
139+
padding: 1.75rem;
140+
border: 1px solid var(--nano-border);
141+
border-radius: 12px;
142+
background: var(--nano-surface);
143+
transition: border-color 150ms ease;
144+
}
145+
.nano-feature:hover {
146+
border-color: var(--nano-muted);
147+
}
148+
149+
.nano-feature h3 {
150+
font-size: 1.05rem;
151+
font-weight: 600;
152+
margin: 0 0 0.5rem;
153+
color: var(--nano-accent);
154+
}
155+
156+
.nano-feature p,
157+
.nano-feature-text {
158+
font-size: 0.9rem;
159+
color: var(--nano-muted);
160+
margin: 0;
161+
line-height: 1.6;
162+
}
163+
164+
/* Install snippet */
165+
.nano-install {
166+
max-width: 480px;
167+
margin: 0 auto 4rem;
168+
text-align: center;
169+
}
170+
171+
.nano-install code {
172+
display: inline-block;
173+
padding: 0.6rem 1.25rem;
174+
font-size: 0.9rem;
175+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
176+
background: var(--nano-surface);
177+
border: 1px solid var(--nano-border);
178+
border-radius: 8px;
179+
color: var(--nano-accent);
180+
}
181+
182+
/* Footer section on landing */
183+
.nano-footer-section {
184+
text-align: center;
185+
padding: 3rem 1.5rem 5rem;
186+
color: var(--nano-muted);
187+
font-size: 0.85rem;
188+
}
189+
190+
.nano-footer-section a {
191+
color: var(--nano-brand);
192+
text-decoration: none;
193+
}
194+
.nano-footer-section a:hover {
195+
text-decoration: underline;
196+
}
197+
198+
/* Quick start code block on landing */
199+
.nano-quickstart {
200+
max-width: 560px;
201+
margin: 0 auto 4rem;
202+
text-align: left;
203+
}
204+
205+
.nano-quickstart h2 {
206+
text-align: center;
207+
font-size: 1.5rem;
208+
font-weight: 700;
209+
margin-bottom: 1.5rem;
210+
color: var(--nano-accent);
211+
letter-spacing: -0.02em;
212+
}
213+
214+
/* Separator line */
215+
.nano-separator {
216+
max-width: 960px;
217+
margin: 0 auto;
218+
border: none;
219+
border-top: 1px solid var(--nano-border);
220+
}

‎site/app/layout.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Footer, Layout, Navbar } from 'nextra-theme-docs'
2+
import { Head } from 'nextra/components'
3+
import { getPageMap } from 'nextra/page-map'
4+
import 'nextra-theme-docs/style.css'
5+
import './globals.css'
6+
7+
export const metadata = {
8+
title: {
9+
default: 'nano-css — Tiny CSS-in-JS Library',
10+
template: '%s — nano-css',
11+
},
12+
description:
13+
'nano-css is a tiny 5th generation CSS-in-JS library with a ~0.5 Kb core and 40+ addons. Framework agnostic, isomorphic, and fast.',
14+
}
15+
16+
const navbar = (
17+
<Navbar
18+
logo={
19+
<span style={{ fontWeight: 700, fontSize: '1.1rem', letterSpacing: '-0.02em' }}>
20+
nano-css
21+
</span>
22+
}
23+
projectLink="https://github.com/streamich/nano-css"
24+
/>
25+
)
26+
27+
const footer = (
28+
<Footer>
29+
<span style={{ fontSize: '0.85rem', color: '#888' }}>
30+
Unlicense {new Date().getFullYear()} © nano-css contributors
31+
</span>
32+
</Footer>
33+
)
34+
35+
export default async function RootLayout({ children }) {
36+
return (
37+
<html lang="en" dir="ltr" suppressHydrationWarning>
38+
<Head>
39+
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
40+
</Head>
41+
<body>
42+
<Layout
43+
navbar={navbar}
44+
pageMap={await getPageMap()}
45+
docsRepositoryBase="https://github.com/streamich/nano-css/tree/master/site"
46+
footer={footer}
47+
sidebar={{ defaultMenuCollapseLevel: 1 }}
48+
editLink="Edit this page on GitHub"
49+
>
50+
{children}
51+
</Layout>
52+
</body>
53+
</html>
54+
)
55+
}

‎site/content/_meta.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export default {
2+
index: {
3+
title: 'Home',
4+
type: 'page',
5+
theme: {
6+
layout: 'full',
7+
timestamp: false,
8+
breadcrumb: false,
9+
pagination: false,
10+
toc: false,
11+
sidebar: false,
12+
},
13+
},
14+
docs: {
15+
title: 'Documentation',
16+
type: 'page',
17+
},
18+
github_link: {
19+
title: 'GitHub',
20+
href: 'https://github.com/streamich/nano-css',
21+
},
22+
}

0 commit comments

Comments
 (0)