Skip to content

Commit 21f1596

Browse files
koculukoculu
committed
Improve doc content readability.
1 parent ba6e346 commit 21f1596

8 files changed

Lines changed: 634 additions & 10 deletions

File tree

‎frontend/docs/documentationLinks.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/** Add native section permalinks without changing headings in live examples. */
2+
export function addDocumentationLinks(document: Document) {
3+
if (!document.body.classList.contains('template-doc')) return
4+
if (document.body.classList.contains('preview')) return
5+
const article = document.querySelector('.doc-main > .doc-content')
6+
if (!article) return
7+
8+
for (const heading of article.children) {
9+
if (!['H2', 'H3'].includes(heading.tagName) || !heading.id) continue
10+
if (heading.querySelector('a')) continue
11+
const link = document.createElement('a')
12+
link.className = 'doc-heading-link'
13+
link.setAttribute('href', `#${encodeURIComponent(heading.id)}`)
14+
link.setAttribute('aria-label', `Link to ${heading.textContent?.trim()}`)
15+
link.setAttribute('title', 'Link to this section')
16+
link.setAttribute('data-pagefind-ignore', '')
17+
link.textContent = '#'
18+
heading.appendChild(link)
19+
}
20+
}

‎frontend/purestack.studio/components/header.mdx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1-
<TopBar tone="neutral" variant="glass" class="spotlight-from-top-right">
1+
<TopBar tone="neutral" variant="surface">
22
<template #actions>
3-
<a class="topbar__icon" href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener" aria-label="PureStack GitHub repository">
3+
<a
4+
class="topbar__icon"
5+
href="https://github.com/PureStackStudio/PureStack"
6+
target="_blank"
7+
rel="noopener"
8+
aria-label="PureStack GitHub repository"
9+
>
410
<Icon name="tabler:brand-github"/>
511
</a>
6-
<a class="topbar__icon" href="https://regor.purestack.studio" target="_blank" rel="noopener" aria-label="Regor website">
12+
<a
13+
class="topbar__icon"
14+
href="https://regor.purestack.studio"
15+
target="_blank"
16+
rel="noopener"
17+
aria-label="Regor website"
18+
>
719
<Icon name="lucide:orbit"/>
820
</a>
9-
<a class="topbar__icon" href="https://x.com/purestackstudio" target="_blank" rel="noopener" aria-label="PureStack Studio on X">
21+
<a
22+
class="topbar__icon"
23+
href="https://x.com/purestackstudio"
24+
target="_blank"
25+
rel="noopener"
26+
aria-label="PureStack Studio on X"
27+
>
1028
<Icon name="tabler:brand-x"/>
1129
</a>
1230
</template>

‎frontend/purestack.studio/guides/header.mdx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1-
<TopBar tone="neutral" variant="glass" class="spotlight-from-top-right">
1+
<TopBar tone="neutral" variant="surface">
22
<template #actions>
3-
<a class="topbar__icon" href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener" aria-label="PureStack GitHub repository">
3+
<a
4+
class="topbar__icon"
5+
href="https://github.com/PureStackStudio/PureStack"
6+
target="_blank"
7+
rel="noopener"
8+
aria-label="PureStack GitHub repository"
9+
>
410
<Icon name="tabler:brand-github"/>
511
</a>
6-
<a class="topbar__icon" href="https://regor.purestack.studio" target="_blank" rel="noopener" aria-label="Regor website">
12+
<a
13+
class="topbar__icon"
14+
href="https://regor.purestack.studio"
15+
target="_blank"
16+
rel="noopener"
17+
aria-label="Regor website"
18+
>
719
<Icon name="lucide:orbit"/>
820
</a>
9-
<a class="topbar__icon" href="https://x.com/purestackstudio" target="_blank" rel="noopener" aria-label="PureStack Studio on X">
21+
<a
22+
class="topbar__icon"
23+
href="https://x.com/purestackstudio"
24+
target="_blank"
25+
rel="noopener"
26+
aria-label="PureStack Studio on X"
27+
>
1028
<Icon name="tabler:brand-x"/>
1129
</a>
1230
</template>

‎frontend/purestack.studio/siteConfig.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828
"includeIndex": true,
2929
"sortBy": "order",
3030
"roots": ["guides", "components"],
31-
"variant": "spotlight",
32-
"class": "spotlight-from-bottom-right"
31+
"variant": "flat"
3332
},
3433
"sitemap": {
3534
"enabled": true,

‎frontend/studioPlugin.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { card } from './demoStyle'
55
import { registerApiReferenceStyles } from './docs/apiReferenceStyles'
66
import { registerComponentGuideStyles } from './docs/componentGuide'
77
import { defineDocumentationComponents } from './docs/docsComponents'
8+
import { addDocumentationLinks } from './docs/documentationLinks'
89
import { previewTemplate } from './docs/previewTemplate'
910
import { sitePreviewPages } from './docs/sitePreviews'
1011
import { ensureLegalContent } from './ensureLegalContent'
12+
import { registerDocumentationStyles } from './theme/documentationStyles'
1113
import { studioSkin } from './theme/studioSkin'
1214
import { registerStudioStyles } from './theme/studioStyles'
1315

@@ -44,11 +46,15 @@ export const studioPlugin = definePlugin({
4446
},
4547
},
4648
hooks: {
49+
onPageDocument(_context, { document }) {
50+
addDocumentationLinks(document)
51+
},
4752
async onConfigResolved({ config }) {
4853
await ensureLegalContent(config.contentDir)
4954
registerStudioStyles()
5055
registerApiReferenceStyles()
5156
registerComponentGuideStyles()
57+
registerDocumentationStyles()
5258
},
5359
},
5460
})

‎frontend/theme/documentationColors.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { ThemeMode, ThemePalette } from '@purestack/ts-style'
2+
import { paint, studioHues } from './studioSkinShared'
3+
4+
export type DocumentationColors = ReturnType<typeof createDocumentationColors>
5+
6+
/** Reading surfaces and their decorative accents, separate from the demo palette. */
7+
export function createDocumentationColors(
8+
theme: ThemeMode,
9+
palette: ThemePalette,
10+
) {
11+
const neutral = paint(studioHues.neutral)
12+
const dark = theme === 'dark'
13+
const surface = dark ? neutral(0.265, 0.13) : neutral(0.99, 0.015)
14+
const shadow = neutral(0.15, 0.1, dark ? 0.16 : 0.045)
15+
16+
return {
17+
canvas: dark ? neutral(0.235, 0.12) : neutral(0.975, 0.025),
18+
surface,
19+
ink: dark ? neutral(0.85, 0.08) : neutral(0.32, 0.12),
20+
heading: dark ? neutral(0.93, 0.06) : neutral(0.25, 0.15),
21+
muted: dark ? neutral(0.72, 0.1) : neutral(0.48, 0.12),
22+
border: dark ? neutral(0.36, 0.12) : neutral(0.88, 0.05),
23+
shadow,
24+
tint: `color-mix(in srgb, ${palette.semanticTone.accent.text.default} 6%, ${surface})`,
25+
elevation: `0 3px 12px ${shadow}, 0 16px 40px ${shadow}`,
26+
}
27+
}

0 commit comments

Comments
 (0)