@chassis-ui/docs 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +98 -0
- package/index.ts +7 -0
- package/package.json +66 -0
- package/src/components/DocsSidebar.astro +89 -0
- package/src/components/NavDocsMenu.astro +26 -0
- package/src/components/NavLink.astro +24 -0
- package/src/components/ResponsiveImage.astro +31 -0
- package/src/components/TableOfContents.astro +31 -0
- package/src/components/ThemeToggler.astro +70 -0
- package/src/components/shortcodes/AddedIn.astro +13 -0
- package/src/components/shortcodes/Callout.astro +37 -0
- package/src/components/shortcodes/CxTable.astro +16 -0
- package/src/js/color-modes.js +82 -0
- package/src/js/icon-loader.js +220 -0
- package/src/js/search.js +58 -0
- package/src/js/sidebar.js +30 -0
- package/src/js/theme-color.js +126 -0
- package/src/layouts/BaseLayout.astro +94 -0
- package/src/layouts/DocsLayout.astro +147 -0
- package/src/layouts/IconsLayout.astro +19 -0
- package/src/layouts/RedirectLayout.astro +23 -0
- package/src/layouts/SingleLayout.astro +33 -0
- package/src/layouts/footer/Footer.astro +56 -0
- package/src/layouts/footer/Scripts.astro +22 -0
- package/src/layouts/head/Analytics.astro +22 -0
- package/src/layouts/head/Favicons.astro +11 -0
- package/src/layouts/head/Head.astro +54 -0
- package/src/layouts/head/Scss.astro +9 -0
- package/src/layouts/head/Social.astro +38 -0
- package/src/layouts/head/Stylesheet.astro +15 -0
- package/src/layouts/header/Header.astro +19 -0
- package/src/layouts/header/Navigation.astro +121 -0
- package/src/layouts/header/Skippy.astro +22 -0
- package/src/libs/image.ts +13 -0
- package/src/libs/layout.ts +7 -0
- package/src/libs/rehype.ts +38 -0
- package/src/libs/remark.ts +205 -0
- package/src/libs/toc.ts +44 -0
- package/src/libs/utils.ts +122 -0
- package/src/scss/_anchor.scss +21 -0
- package/src/scss/_brand.scss +59 -0
- package/src/scss/_buttons.scss +36 -0
- package/src/scss/_callouts.scss +40 -0
- package/src/scss/_clipboard-js.scss +63 -0
- package/src/scss/_code.scss +116 -0
- package/src/scss/_colors.scss +140 -0
- package/src/scss/_content.scss +141 -0
- package/src/scss/_docsearch.scss +174 -0
- package/src/scss/_footer.scss +29 -0
- package/src/scss/_layout.scss +72 -0
- package/src/scss/_masthead.scss +124 -0
- package/src/scss/_navbar.scss +138 -0
- package/src/scss/_placeholder-img.scss +15 -0
- package/src/scss/_scrolling.scss +16 -0
- package/src/scss/_settings.scss +37 -0
- package/src/scss/_sidebar.scss +161 -0
- package/src/scss/_skippy.scss +7 -0
- package/src/scss/_syntax.scss +158 -0
- package/src/scss/_toc.scss +117 -0
- package/src/scss/_variables.scss +78 -0
- package/src/scss/fonts.scss +1 -0
- package/src/scss/main.scss +90 -0
- package/src/scss/search.scss +26 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { getConfig } from '@libs/config'
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
path: string
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const { path } = Astro.props
|
|
9
|
+
|
|
10
|
+
const url = new URL(path, Astro.site)
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
<!doctype html>
|
|
14
|
+
<html lang="en">
|
|
15
|
+
<head>
|
|
16
|
+
<meta charset="utf-8" />
|
|
17
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
18
|
+
<title>{getConfig().title}</title>
|
|
19
|
+
<link rel="canonical" href={url} />
|
|
20
|
+
<meta name="robots" content="noindex" />
|
|
21
|
+
<meta http-equiv="refresh" content={`0; url=${path}`} />
|
|
22
|
+
</head>
|
|
23
|
+
</html>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
---
|
|
2
|
+
import BaseLayout from './BaseLayout.astro'
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
description: string
|
|
6
|
+
title: string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const { description, title } = Astro.props
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
<BaseLayout {...Astro.props} layout="single">
|
|
13
|
+
<Fragment slot="main">
|
|
14
|
+
<header class="py-xlarge border-bottom">
|
|
15
|
+
<div class="container-2xlarge cxd-gutter pt-medium-1 pb-medium-4">
|
|
16
|
+
<div class="row">
|
|
17
|
+
<div class="col-xlarge-8">
|
|
18
|
+
<h1 class="cxd-title mt-0">{title}</h1>
|
|
19
|
+
<p class="cxd-subtitle">{description}</p>
|
|
20
|
+
<slot name="header-content" />
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</header>
|
|
25
|
+
|
|
26
|
+
<main class="cxd-content order-1 py-xlarge" id="content">
|
|
27
|
+
<div class="container-2xlarge cxd-gutter">
|
|
28
|
+
<slot />
|
|
29
|
+
<slot name="main-content" />
|
|
30
|
+
</div>
|
|
31
|
+
</main>
|
|
32
|
+
</Fragment>
|
|
33
|
+
</BaseLayout>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
---
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<footer class="cxd-footer py-6xlarge">
|
|
6
|
+
<div class="container-fluid fg-subtle">
|
|
7
|
+
<div class="row">
|
|
8
|
+
<div class="col-medium-10 col-large-5 mb-medium">
|
|
9
|
+
<a
|
|
10
|
+
class="d-inline-flex align-items-center mb-xsmall text-body-emphasis text-decoration-none"
|
|
11
|
+
href="/"
|
|
12
|
+
aria-label="Chassis"
|
|
13
|
+
>
|
|
14
|
+
<img
|
|
15
|
+
src="/static/logo/chassis-logo-brand.svg"
|
|
16
|
+
alt="Chassis UI Logo"
|
|
17
|
+
width="162"
|
|
18
|
+
height="42"
|
|
19
|
+
/>
|
|
20
|
+
</a>
|
|
21
|
+
<p>
|
|
22
|
+
This project is licensed under the MIT License, which allows for free use, modification,
|
|
23
|
+
and distribution of the software.
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="col-small-4 col-large-2 offset-large-1 mb-medium">
|
|
27
|
+
<h5>Docs</h5>
|
|
28
|
+
<ul class="nav">
|
|
29
|
+
<li><a href="/docs/css">CSS Framework</a></li>
|
|
30
|
+
<li><a href="/docs/tokens">Design Tokens</a></li>
|
|
31
|
+
<li><a href="/docs/assets">Asset Distributor</a></li>
|
|
32
|
+
<li><a href="/docs/icons">Icon Generator</a></li>
|
|
33
|
+
<li><a href="/docs/figma">Figma Library</a></li>
|
|
34
|
+
</ul>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="col-small-4 col-large-2 mb-medium">
|
|
37
|
+
<h5>Github</h5>
|
|
38
|
+
<ul class="nav">
|
|
39
|
+
<li><a href="/docs/css">Chassis - CSS</a></li>
|
|
40
|
+
<li><a href="/docs/tokens">Chassis - Tokens</a></li>
|
|
41
|
+
<li><a href="/docs/assets">Chassis - Assets</a></li>
|
|
42
|
+
<li><a href="/docs/icons">Chassis - Icons</a></li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="col-small-4 col-large-2 mb-medium">
|
|
46
|
+
<h5>About</h5>
|
|
47
|
+
<ul class="nav">
|
|
48
|
+
<li><a href="/docs/css">Chassis UI</a></li>
|
|
49
|
+
<li><a href="/docs/css">Developer</a></li>
|
|
50
|
+
<li><a href="/docs/tokens">Blog</a></li>
|
|
51
|
+
<li><a href="/docs/assets">Contribute</a></li>
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</footer>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { getChassisJsProps } from '@libs/chassis'
|
|
3
|
+
import type { Layout } from '../../libs/layout'
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
layout: Layout
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const { layout } = Astro.props
|
|
10
|
+
|
|
11
|
+
console.log('layout in Scripts:', layout)
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
<script is:inline {...getChassisJsProps()}></script>
|
|
15
|
+
|
|
16
|
+
<script src="../../js/search.js"></script>
|
|
17
|
+
|
|
18
|
+
{layout === 'docs' && <script src="../../js/sidebar.js" />}
|
|
19
|
+
|
|
20
|
+
<script src="../../js/icon-loader.js"></script>
|
|
21
|
+
|
|
22
|
+
<slot name="scripts" />
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { getConfig } from '@libs/config'
|
|
3
|
+
const googleId = getConfig().analytics.google_id
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<script
|
|
7
|
+
is:inline
|
|
8
|
+
defer
|
|
9
|
+
src="https://cdn.usefathom.com/script.js"
|
|
10
|
+
data-site={getConfig().analytics.fathom_site}></script>
|
|
11
|
+
<!-- Google tag (gtag.js) -->
|
|
12
|
+
<script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${googleId}`}></script>
|
|
13
|
+
<script
|
|
14
|
+
is:inline
|
|
15
|
+
set:html={`
|
|
16
|
+
window.dataLayer = window.dataLayer || [];
|
|
17
|
+
function gtag(){dataLayer.push(arguments);}
|
|
18
|
+
gtag('js', new Date());
|
|
19
|
+
|
|
20
|
+
gtag('config', '${googleId}');
|
|
21
|
+
`}
|
|
22
|
+
/>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
---
|
|
2
|
+
// <meta name="theme-color" content="#00A4CC" />
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<link rel="apple-touch-icon" href={'/static/images/apple-touch-icon.png'} sizes="180x180" />
|
|
6
|
+
<link rel="icon" href={'/static/images/favicon-32x32.png'} sizes="32x32" type="image/png" />
|
|
7
|
+
<link rel="icon" href={'/static/images/favicon-16x16.png'} sizes="16x16" type="image/png" />
|
|
8
|
+
<link rel="manifest" href={'/static/images/manifest.json'} />
|
|
9
|
+
<link rel="mask-icon" href={'/static/images/safari-pinned-tab.svg'} color="#712cf9" />
|
|
10
|
+
<link rel="icon" href={'/static/images/favicon.ico'} />
|
|
11
|
+
<meta name="theme-color" content="#00A4CC" />
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { getConfig } from '@libs/config'
|
|
3
|
+
import { getChassisDocsPath } from '@libs/path'
|
|
4
|
+
import type { Layout } from '../../libs/layout'
|
|
5
|
+
import Stylesheet from './Stylesheet.astro'
|
|
6
|
+
import Favicons from './Favicons.astro'
|
|
7
|
+
import Social from './Social.astro'
|
|
8
|
+
import Analytics from './Analytics.astro'
|
|
9
|
+
import Scss from './Scss.astro'
|
|
10
|
+
|
|
11
|
+
interface Props {
|
|
12
|
+
description: string
|
|
13
|
+
direction?: 'rtl'
|
|
14
|
+
layout: Layout
|
|
15
|
+
robots: string | undefined
|
|
16
|
+
thumbnail: string
|
|
17
|
+
title: string
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const { description, direction, layout, robots, thumbnail, title } = Astro.props
|
|
21
|
+
|
|
22
|
+
const canonicalUrl = new URL(Astro.url.pathname, Astro.site)
|
|
23
|
+
|
|
24
|
+
const isHome = Astro.url.pathname === '/'
|
|
25
|
+
const pageTitle = isHome
|
|
26
|
+
? `${getConfig().title} · ${getConfig().subtitle}`
|
|
27
|
+
: `${title} · ${getConfig().title} v${getConfig().docs_version}`
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
<meta charset="UTF-8" />
|
|
31
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
32
|
+
|
|
33
|
+
<meta name="description" content={description} />
|
|
34
|
+
|
|
35
|
+
<meta name="author" content={getConfig().authors} />
|
|
36
|
+
<meta name="generator" content={Astro.generator} />
|
|
37
|
+
<meta name="docsearch:language" content="en" />
|
|
38
|
+
<meta name="docsearch:version" content={getConfig().docs_version} />
|
|
39
|
+
|
|
40
|
+
<link rel="canonical" href={canonicalUrl} />
|
|
41
|
+
|
|
42
|
+
<link rel="preconnect" href=`https://${getConfig().algolia.app_id}-dsn.algolia.net` crossorigin />
|
|
43
|
+
|
|
44
|
+
<title>{pageTitle}</title>
|
|
45
|
+
|
|
46
|
+
{robots && <meta name="robots" content={robots} />}
|
|
47
|
+
|
|
48
|
+
<script src="../../js/color-modes.js"></script>
|
|
49
|
+
|
|
50
|
+
<Stylesheet direction={direction} layout={layout} />
|
|
51
|
+
<Scss />
|
|
52
|
+
<Favicons />
|
|
53
|
+
<Social description={description} layout={layout} thumbnail={thumbnail} title={title} />
|
|
54
|
+
<Analytics />
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
import path from 'node:path'
|
|
3
|
+
import { getConfig } from '@libs/config'
|
|
4
|
+
import { getChassisDocsPath, getDocsPublicFsPath } from '@libs/path'
|
|
5
|
+
import { getStaticImageSize } from '../../libs/image'
|
|
6
|
+
import type { Layout } from '../../libs/layout'
|
|
7
|
+
|
|
8
|
+
interface Props {
|
|
9
|
+
description: string
|
|
10
|
+
layout: Layout
|
|
11
|
+
thumbnail: string
|
|
12
|
+
title: string
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const { description, layout, thumbnail, title } = Astro.props
|
|
16
|
+
|
|
17
|
+
const socialImageUrl = new URL(getChassisDocsPath(`logo/${thumbnail}`), Astro.site)
|
|
18
|
+
// const socialImageSize = await getStaticImageSize(`/${thumbnail}`)
|
|
19
|
+
const socialImageSize = await getStaticImageSize(
|
|
20
|
+
path.join(getDocsPublicFsPath(), 'static', thumbnail)
|
|
21
|
+
)
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
25
|
+
<meta name="twitter:site" content=`@${getConfig().x}` />
|
|
26
|
+
<meta name="twitter:creator" content=`@${getConfig().x}` />
|
|
27
|
+
<meta name="twitter:title" content={title} />
|
|
28
|
+
<meta name="twitter:description" content={description} />
|
|
29
|
+
<meta name="twitter:image" content={socialImageUrl} />
|
|
30
|
+
|
|
31
|
+
<meta property="og:url" content={new URL(Astro.url.pathname, Astro.site)} />
|
|
32
|
+
<meta property="og:title" content={title} />
|
|
33
|
+
<meta property="og:description" content={description} />
|
|
34
|
+
<meta property="og:type" content={layout === 'docs' ? 'article' : 'website'} />
|
|
35
|
+
<meta property="og:image" content={socialImageUrl} />
|
|
36
|
+
<meta property="og:image:type" content="image/png" />
|
|
37
|
+
<meta property="og:image:width" content={String(socialImageSize.width)} />
|
|
38
|
+
<meta property="og:image:height" content={String(socialImageSize.height)} />
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { getChassisCssProps } from '@libs/chassis'
|
|
3
|
+
import { getChassisDocsPath } from '@libs/path'
|
|
4
|
+
import type { Layout } from '../../libs/layout'
|
|
5
|
+
|
|
6
|
+
interface Props {
|
|
7
|
+
direction?: 'rtl'
|
|
8
|
+
layout: Layout
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const { direction } = Astro.props
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
<link {...getChassisCssProps(direction)} />
|
|
15
|
+
<link rel="stylesheet" href={`/static/icons/chassis-icons.min.css`} />
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { CollectionEntry } from 'astro:content'
|
|
3
|
+
import type { Layout } from '../../libs/layout'
|
|
4
|
+
import Skippy from './Skippy.astro'
|
|
5
|
+
import Navigation from './Navigation.astro'
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
addedIn?: CollectionEntry<'docs'>['data']['added']
|
|
9
|
+
layout: Layout
|
|
10
|
+
title: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const { addedIn, layout, title } = Astro.props
|
|
14
|
+
const { pathname } = Astro.url
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
<Skippy layout={layout} />
|
|
18
|
+
|
|
19
|
+
<Navigation layout={layout} title={title} />
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { getConfig } from '@libs/config'
|
|
3
|
+
import type { Layout } from '../../libs/layout'
|
|
4
|
+
import NavLink from '../../components/NavLink.astro'
|
|
5
|
+
import ThemeToggler from '../../components/ThemeToggler.astro'
|
|
6
|
+
import NavDocsMenu from '../../components/NavDocsMenu.astro'
|
|
7
|
+
|
|
8
|
+
interface Props {
|
|
9
|
+
layout: Layout
|
|
10
|
+
title: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const { layout, title } = Astro.props
|
|
14
|
+
const { pathname } = Astro.url
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
<header class="navbar navbar-expand-large cxd-navbar sticky-top">
|
|
18
|
+
<nav class="container-fluid" aria-label="Main navigation">
|
|
19
|
+
{
|
|
20
|
+
layout === 'docs' && (
|
|
21
|
+
<div class="cxd-navbar-toggle">
|
|
22
|
+
<button
|
|
23
|
+
class="navbar-toggler p-xsmall2"
|
|
24
|
+
type="button"
|
|
25
|
+
data-cx-toggle="offcanvas"
|
|
26
|
+
data-cx-target="#cxdSidebar"
|
|
27
|
+
aria-controls="cxdSidebar"
|
|
28
|
+
aria-label="Toggle docs navigation"
|
|
29
|
+
>
|
|
30
|
+
<svg class="icon icon-large" aria-hidden="true">
|
|
31
|
+
<use href="#bars-solid" />
|
|
32
|
+
</svg>
|
|
33
|
+
<span class="d-none fs-6 pe-2xsmall">Browse</span>
|
|
34
|
+
</button>
|
|
35
|
+
</div>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
{layout !== 'docs' && <div class="d-large-none" style="width: 4.25rem;" />}
|
|
39
|
+
|
|
40
|
+
<a class="navbar-brand me-large-medium" href="/" aria-label="Chassis">
|
|
41
|
+
<img src="/static/logo/chassis-logo-brand.svg" alt="Chassis UI" width="123" height="32" />
|
|
42
|
+
</a>
|
|
43
|
+
|
|
44
|
+
<div class="d-flex">
|
|
45
|
+
<div class="cxd-search" id="docsearch" data-cxd-docs-version={getConfig().docs_version}></div>
|
|
46
|
+
|
|
47
|
+
<button
|
|
48
|
+
class="navbar-toggler d-flex d-large-none order-3 p-xsmall"
|
|
49
|
+
type="button"
|
|
50
|
+
data-cx-toggle="offcanvas"
|
|
51
|
+
data-cx-target="#cxdNavbar"
|
|
52
|
+
aria-controls="cxdNavbar"
|
|
53
|
+
aria-label="Toggle navigation"
|
|
54
|
+
>
|
|
55
|
+
<svg class="icon" aria-hidden="true"><use xlink:href="#ellipsis-h-solid"></use></svg>
|
|
56
|
+
</button>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div
|
|
60
|
+
class="offcanvas-large offcanvas-end flex-grow-1"
|
|
61
|
+
tabindex="-1"
|
|
62
|
+
id="cxdNavbar"
|
|
63
|
+
aria-labelledby="cxdNavbarOffcanvasLabel"
|
|
64
|
+
>
|
|
65
|
+
<div class="offcanvas-header px-large pb-0">
|
|
66
|
+
<h5 class="offcanvas-title text-white" id="cxdNavbarOffcanvasLabel">Chassis</h5>
|
|
67
|
+
<button
|
|
68
|
+
type="button"
|
|
69
|
+
class="close-button close-button-white"
|
|
70
|
+
data-cx-dismiss="offcanvas"
|
|
71
|
+
aria-label="Close"
|
|
72
|
+
data-cx-target="#cxdNavbar"></button>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div class="offcanvas-body p-large pt-0 p-large-0">
|
|
76
|
+
<hr class="d-large-none text-white-50" />
|
|
77
|
+
<ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 mx-large-medium">
|
|
78
|
+
<NavLink active={pathname.slice(1) === ''} href="/" track>Home</NavLink>
|
|
79
|
+
<li class="nav-item dropdown">
|
|
80
|
+
<NavDocsMenu layout={layout} />
|
|
81
|
+
</li>
|
|
82
|
+
<NavLink active={layout === 'icons'} href="/icons" track>Icons</NavLink>
|
|
83
|
+
<NavLink active={title === 'Tokens'} href="/tokens" track>Tokens</NavLink>
|
|
84
|
+
<NavLink active={title === 'Examples'} href={'/examples/'} track>Examples</NavLink>
|
|
85
|
+
<NavLink active={layout === 'blog'} href={'/blog/'} track>Blog</NavLink>
|
|
86
|
+
</ul>
|
|
87
|
+
|
|
88
|
+
<hr class="d-large-none" />
|
|
89
|
+
|
|
90
|
+
<ul class="navbar-nav flex-row flex-wrap ms-medium-auto align-items-center">
|
|
91
|
+
<NavLink
|
|
92
|
+
class="nav-link px-0 px-large-2"
|
|
93
|
+
href={getConfig().github_org}
|
|
94
|
+
target="_blank"
|
|
95
|
+
rel="noopener"
|
|
96
|
+
>
|
|
97
|
+
<svg class="icon"><title>GitHub</title><use href="#github-brand"></use></svg>
|
|
98
|
+
<small class="d-large-none ms-xsmall">GitHub</small>
|
|
99
|
+
</NavLink>
|
|
100
|
+
<NavLink
|
|
101
|
+
class="nav-link px-0 px-large-2"
|
|
102
|
+
href={`https://x.com/${getConfig().x}`}
|
|
103
|
+
target="_blank"
|
|
104
|
+
rel="noopener"
|
|
105
|
+
>
|
|
106
|
+
<svg class="icon"><title>X</title><use href="#x-twitter-brand"></use></svg>
|
|
107
|
+
<small class="d-large-none ms-xsmall">X</small>
|
|
108
|
+
</NavLink>
|
|
109
|
+
<li class="nav-item col-12 col-large-auto">
|
|
110
|
+
<div class="vr d-none d-large-flex h-100 mx-large-2 text-white"></div>
|
|
111
|
+
<hr class="d-large-none" />
|
|
112
|
+
</li>
|
|
113
|
+
|
|
114
|
+
<li class="nav-item dropdown">
|
|
115
|
+
<ThemeToggler layout={layout} />
|
|
116
|
+
</li>
|
|
117
|
+
</ul>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</nav>
|
|
121
|
+
</header>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { Layout } from '../../libs/layout'
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
layout: Layout
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const { layout } = Astro.props
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<div class="skippy visually-hidden-focusable overflow-hidden">
|
|
12
|
+
<div class="container-xlarge">
|
|
13
|
+
<a class="d-inline-flex p-xsmall m-xsmall" href="#content">Skip to main content</a>
|
|
14
|
+
{
|
|
15
|
+
layout === 'docs' && (
|
|
16
|
+
<a class="d-none d-medium-inline-flex p-xsmall m-xsmall" href="#cxd-docs-nav">
|
|
17
|
+
Skip to docs navigation
|
|
18
|
+
</a>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { promises as fs } from 'node:fs'
|
|
2
|
+
import sizeOf from 'image-size'
|
|
3
|
+
|
|
4
|
+
export async function getStaticImageSize(imagePath: string) {
|
|
5
|
+
const buffer = await fs.readFile(imagePath)
|
|
6
|
+
const size = await sizeOf(new Uint8Array(buffer))
|
|
7
|
+
|
|
8
|
+
if (!size?.height || !size?.width) {
|
|
9
|
+
throw new Error(`Failed to get size of static image at '${imagePath}'.`)
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
return { height: size.height, width: size.width }
|
|
13
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLAttributes, HTMLTag } from 'astro/types'
|
|
2
|
+
|
|
3
|
+
export type Layout = 'docs' | 'icons' | 'examples' | 'single' | 'blog' | undefined
|
|
4
|
+
|
|
5
|
+
export type LayoutOverridesHTMLAttributes<TTag extends HTMLTag> = HTMLAttributes<TTag> & {
|
|
6
|
+
[key in `data-${string}`]: string
|
|
7
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { Root } from 'hast'
|
|
2
|
+
import type { Plugin } from 'unified'
|
|
3
|
+
import { SKIP, visit } from 'unist-util-visit'
|
|
4
|
+
|
|
5
|
+
// A rehype plugin to apply CSS classes to tables rendered in markdown (or MDX) files when wrapped in a `<CxTable />`
|
|
6
|
+
// component.
|
|
7
|
+
export const rehypeCxTable: Plugin<[], Root> = function () {
|
|
8
|
+
return function rehypeCxTablePlugin(ast) {
|
|
9
|
+
visit(ast, 'element', (node, _index, parent) => {
|
|
10
|
+
if (
|
|
11
|
+
node.tagName !== 'table' ||
|
|
12
|
+
parent?.type !== 'mdxJsxFlowElement' ||
|
|
13
|
+
parent.name !== 'CxTable'
|
|
14
|
+
) {
|
|
15
|
+
return SKIP
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const classAttribute = parent.attributes.find(
|
|
19
|
+
(attribute) => attribute.type === 'mdxJsxAttribute' && attribute.name === 'class'
|
|
20
|
+
)
|
|
21
|
+
|
|
22
|
+
if (classAttribute && typeof classAttribute.value !== 'string') {
|
|
23
|
+
return SKIP
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const tableClass = typeof classAttribute?.value === 'string' ? classAttribute.value : 'table'
|
|
27
|
+
|
|
28
|
+
if (!node.properties) {
|
|
29
|
+
node.properties = {}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
node.properties = {
|
|
33
|
+
...node.properties,
|
|
34
|
+
class: tableClass
|
|
35
|
+
}
|
|
36
|
+
})
|
|
37
|
+
}
|
|
38
|
+
}
|