Skip to content

Commit 691eb32

Browse files
drwpowdrwpow
authored
zhuzh up docs (#1303)
1 parent b81a8a0 commit 691eb32

Some content is hidden

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

41 files changed

+1927
-870
lines changed

docs/astro.config.mjs renamed to docs/astro.config.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,29 @@ import { defineConfig } from "astro/config";
22
import preact from "@astrojs/preact";
33
import react from "@astrojs/react";
44
import sitemap from "@astrojs/sitemap";
5+
import sassDts from "vite-plugin-sass-dts";
56

67
// https://astro.build/config
78
export default defineConfig({
89
integrations: [preact(), react(), sitemap()],
910
site: `https://openapi-ts.pages.dev`,
11+
markdown: {
12+
shikiConfig: {
13+
theme: "poimandres",
14+
langs: ["bash", "js", "json", "shell", "ts", "yaml"],
15+
},
16+
},
1017
vite: {
18+
css: {
19+
preprocessorOptions: {
20+
scss: {},
21+
},
22+
},
1123
define: {
1224
"import.meta.env.VITE_ALGOLIA_APP_ID": JSON.stringify(process.env.ALGOLIA_APP_ID ?? ""),
1325
"import.meta.env.VITE_ALGOLIA_INDEX_NAME": JSON.stringify(process.env.ALGOLIA_INDEX_NAME ?? ""),
1426
"import.meta.env.VITE_ALGOLIA_SEARCH_KEY": JSON.stringify(process.env.ALGOLIA_SEARCH_KEY ?? ""),
1527
},
28+
plugins: [sassDts()],
1629
},
1730
});

‎docs/package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
"private": true,
55
"type": "module",
66
"scripts": {
7-
"build": "npm run update-contributors && astro build",
8-
"dev": "npm run update-contributors && astro dev",
7+
"build": "pnpm run tokens && pnpm run update-contributors && astro build",
8+
"dev": "pnpm run tokens && pnpm run update-contributors && astro dev",
9+
"tokens": "co build",
910
"update-contributors": "node scripts/update-contributors.js"
1011
},
1112
"dependencies": {
@@ -24,8 +25,11 @@
2425
},
2526
"devDependencies": {
2627
"@astrojs/sitemap": "^2.0.2",
28+
"@cobalt-ui/cli": "^1.4.1",
29+
"@cobalt-ui/plugin-sass": "^1.2.3",
2730
"@types/node": "^20.5.0",
2831
"html-escaper": "^3.0.3",
29-
"typescript": "^5.1.6"
32+
"typescript": "^5.1.6",
33+
"vite-plugin-sass-dts": "^1.3.9"
3034
}
3135
}

‎docs/src/components/Contributors.astro‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@ const { contributors = [] } = Astro.props;
2323

2424
<style lang="scss">
2525
.wrapper {
26+
column-gap: 0.5rem;
2627
display: grid;
2728
font-size: 0.75rem;
28-
gap: 0.5rem 0.25rem;
29-
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
29+
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
3030
line-height: 1;
3131
list-style: none;
3232
margin: 0;
3333
padding: 0;
34+
row-gap: 1rem;
3435
}
3536

3637
.avatar {
@@ -44,14 +45,16 @@ const { contributors = [] } = Astro.props;
4445
display: flex;
4546
justify-content: center;
4647
margin: 0 !important;
48+
padding: 0;
4749
}
4850

4951
.link {
5052
align-items: center;
5153
display: flex;
5254
flex-direction: column;
53-
line-height: 1;
55+
font-size: 0.875rem;
5456
gap: 0.25rem;
57+
line-height: 1;
5558
text-align: center;
5659
text-decoration: none;
5760

‎docs/src/components/HeadCommon.astro‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ import "../styles/app.scss";
99
<link rel="sitemap" href="/sitemap-index.xml" />
1010
<script src="/make-scrollable-code-focusable.js" is:inline></script>
1111
<script is:inline>
12-
const root = document.documentElement;
13-
const theme = localStorage.getItem("theme");
12+
const theme = localStorage.getItem("theme");
13+
if (document.body) {
1414
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
15-
root.classList.add("theme-dark");
15+
document.body.setAttribute("data-color-mode", "dark");
1616
} else {
17-
root.classList.remove("theme-dark");
17+
document.body.removeAttribute("data-color-mode");
1818
}
19+
}
1920
</script>

‎docs/src/components/HeadSEO.astro‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
import type { CollectionEntry } from "astro:content";
3-
import { SITE, OPEN_GRAPH } from "../consts";
3+
import { SITE, OPEN_GRAPH } from "../consts.js";
44
55
type Props = { canonicalUrl: URL } & CollectionEntry<"docs">["data"];
66
77
const { ogLocale, image, title, description, canonicalUrl } = Astro.props;
88
const formattedContentTitle = `${title} › ${SITE.title}`;
99
const imageSrc = image?.src ?? OPEN_GRAPH.image.src;
1010
const canonicalImageSrc = new URL(imageSrc, Astro.site);
11-
const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt;
11+
const imageAlt = image?.alt;
1212
---
1313

1414
<link rel="canonical" href={canonicalUrl} />
@@ -21,7 +21,6 @@ const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt;
2121
<meta name="description" property="og:description" content={description ?? SITE.description} />
2222
<meta property="og:site_name" content={SITE.title} />
2323
<meta name="twitter:card" content="summary_large_image" />
24-
<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
2524
<meta name="twitter:title" content={formattedContentTitle} />
2625
<meta name="twitter:description" content={description ?? SITE.description} />
2726
<meta name="twitter:image" content={canonicalImageSrc} />

‎docs/src/components/Header/Header.astro‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
import SkipToContent from "./SkipToContent.astro";
3-
import SidebarToggle from "./SidebarToggle.jsx";
43
import Search from "./Search.jsx";
54
65
type Props = {
@@ -13,9 +12,6 @@ const { currentPage } = Astro.props;
1312
<header>
1413
<SkipToContent />
1514
<nav class="nav-wrapper">
16-
<div class="menu-toggle">
17-
<SidebarToggle client:idle />
18-
</div>
1915
<div class="logo flex">
2016
<a href="/">
2117
<img src="/assets/openapi-ts.svg" />
@@ -38,17 +34,16 @@ const { currentPage } = Astro.props;
3834
</header>
3935

4036
<style lang="scss">
37+
@use '../../tokens' as *;
38+
4139
header {
4240
align-items: center;
43-
background-color: var(--theme-navbar-bg);
4441
display: flex;
45-
height: var(--theme-navbar-height);
42+
height: 3rem;
4643
justify-content: center;
47-
width: 100%;
4844
}
4945

5046
.logo {
51-
color: hsla(var(--color-base-white), 100%, 1);
5247
display: flex;
5348
flex: 1;
5449
}
@@ -65,17 +60,10 @@ const { currentPage } = Astro.props;
6560
min-width: 6rem;
6661

6762
a {
68-
color: var(--theme-text);
63+
color: inherit;
6964
display: flex;
70-
padding: 0.5em 0.25em;
71-
margin: -0.5em -0.25em;
72-
text-decoration: none;
7365
font-weight: bold;
74-
75-
&:hover,
76-
&:focus {
77-
color: var(--theme-text-accent);
78-
}
66+
text-decoration: none;
7967
}
8068

8169
img {
@@ -91,12 +79,17 @@ const { currentPage } = Astro.props;
9179
}
9280

9381
.nav-wrapper {
82+
--padding: 1.5rem;
83+
9484
display: flex;
9585
gap: 0.5rem;
9686
justify-content: flex-end;
97-
width: 100%;
98-
max-width: 81rem;
99-
padding-right: 0.5rem;
87+
margin-left: auto;
88+
margin-right: auto;
89+
max-width: 100%;
90+
padding-left: var(--padding);
91+
padding-right: var(--padding);
92+
width: 81rem;
10093

10194
@media (min-width: 600px) {
10295
gap: 1em;
@@ -111,8 +104,8 @@ const { currentPage } = Astro.props;
111104

112105
/** Style Algolia */
113106
:root {
114-
--docsearch-primary-color: var(--theme-accent);
115-
--docsearch-logo-color: var(--theme-text);
107+
--docsearch-primary-color: #{token('color.ui.bg')};
108+
--docsearch-logo-color: #{token('color.blue.60')};
116109
}
117110

118111
.search-item {
@@ -134,7 +127,7 @@ const { currentPage } = Astro.props;
134127
a {
135128
align-items: center;
136129
align-self: stretch;
137-
color: var(--theme-text);
130+
color: inherit;
138131
display: flex;
139132

140133
&:hover {

‎docs/src/components/Header/LanguageSelect.css‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
11
.language-select {
2-
flex-grow: 1;
3-
width: 48px;
4-
box-sizing: border-box;
5-
margin: 0;
6-
padding: 0.33em 0.5em;
7-
overflow: visible;
8-
font-weight: 500;
9-
font-size: 1rem;
10-
font-family: inherit;
11-
line-height: inherit;
12-
background-color: var(--theme-bg);
13-
border-color: var(--theme-text-lighter);
14-
color: var(--theme-text-light);
15-
border-style: solid;
16-
border-width: 1px;
17-
border-radius: 0.25rem;
18-
outline: 0;
19-
cursor: pointer;
20-
transition-timing-function: ease-out;
21-
transition-duration: 0.2s;
22-
transition-property: border-color, color;
23-
-webkit-font-smoothing: antialiased;
24-
padding-left: 30px;
25-
padding-right: 1rem;
2+
flex-grow: 1;
3+
width: 48px;
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0.33em 0.5em;
7+
overflow: visible;
8+
font-weight: 500;
9+
font-size: 1rem;
10+
font-family: inherit;
11+
line-height: inherit;
12+
background-color: var(--theme-bg);
13+
border-color: var(--theme-text-lighter);
14+
color: var(--theme-text-light);
15+
border-style: solid;
16+
border-width: 1px;
17+
border-radius: 0.25rem;
18+
outline: 0;
19+
cursor: pointer;
20+
transition-timing-function: ease-out;
21+
transition-duration: 0.2s;
22+
transition-property: border-color, color;
23+
-webkit-font-smoothing: antialiased;
24+
padding-left: 30px;
25+
padding-right: 1rem;
2626
}
2727
.language-select-wrapper .language-select:hover,
2828
.language-select-wrapper .language-select:focus {
29-
color: var(--theme-text);
30-
border-color: var(--theme-text-light);
29+
color: var(--theme-text);
30+
border-color: var(--theme-text-light);
3131
}
3232
.language-select-wrapper {
33-
color: var(--theme-text-light);
34-
position: relative;
33+
color: var(--theme-text-light);
34+
position: relative;
3535
}
3636
.language-select-wrapper > svg {
37-
position: absolute;
38-
top: 7px;
39-
left: 10px;
40-
pointer-events: none;
37+
position: absolute;
38+
top: 7px;
39+
left: 10px;
40+
pointer-events: none;
4141
}
4242

4343
@media (min-width: 50em) {
44-
.language-select {
45-
width: 100%;
46-
}
44+
.language-select {
45+
width: 100%;
46+
}
4747
}

‎docs/src/components/Header/Search.css‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

0 commit comments

Comments
 (0)