Skip to content

Commit 17e2ab1

Browse files
drwpowdrwpow
authored
Minor docs fixes, update deps (#1112)
1 parent 351894e commit 17e2ab1

File tree

14 files changed

+405
-449
lines changed

14 files changed

+405
-449
lines changed

‎docs/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515
"@docsearch/react": "^3.3.4",
1616
"@types/react": "^18.2.6",
1717
"@types/react-dom": "^18.2.4",
18-
"astro": "^2.4.3",
19-
"preact": "^10.13.2",
18+
"astro": "^2.4.5",
19+
"preact": "^10.14.0",
2020
"react": "^18.2.0",
2121
"react-dom": "^18.2.0",
2222
"sass": "^1.62.1"
2323
},
2424
"devDependencies": {
2525
"@astrojs/sitemap": "^1.3.1",
26-
"@types/node": "^20.1.1",
26+
"@types/node": "^20.1.4",
2727
"html-escaper": "^3.0.3",
2828
"typescript": "^5.0.4"
2929
}

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

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,14 @@ const { currentPage } = Astro.props;
2525
<Search client:idle />
2626
</div>
2727
<div class="social">
28-
<a
29-
href="https://github.com/drwpow/openapi-typescript"
30-
title="View openapi-typescript on GitHub"
31-
target="_blank"
32-
rel="noopener noreferrer"
28+
<a href="https://github.com/drwpow/openapi-typescript" title="View openapi-typescript on GitHub" target="_blank" rel="noopener noreferrer"
3329
><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77"
3430
><path
3531
d="M16.29 0a16.29 16.29 0 0 0-5.15 31.75c.82.15 1.11-.36 1.11-.79v-2.77C7.7 29.18 6.74 26 6.74 26a4.36 4.36 0 0 0-1.81-2.39c-1.47-1 .12-1 .12-1a3.43 3.43 0 0 1 2.49 1.68 3.48 3.48 0 0 0 4.74 1.36 3.46 3.46 0 0 1 1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3 6.3 0 0 1 1.67-4.37 5.94 5.94 0 0 1 .16-4.31s1.37-.44 4.48 1.67a15.41 15.41 0 0 1 8.16 0c3.11-2.11 4.47-1.67 4.47-1.67a5.91 5.91 0 0 1 .2 4.28 6.3 6.3 0 0 1 1.67 4.37c0 6.26-3.81 7.63-7.44 8a3.85 3.85 0 0 1 1.11 3v4.47c0 .53.29.94 1.12.78A16.29 16.29 0 0 0 16.29 0Z"
3632
></path></svg
3733
>
3834
</a>
39-
<a
40-
class="github-button"
41-
href="https://github.com/drwpow/openapi-typescript"
42-
data-icon="octicon-star"
43-
data-show-count="true"
44-
aria-label="Star drwpow/openapi-typescript on GitHub">Star</a
45-
>
35+
<span class="star-count"><a class="github-button" href="https://github.com/drwpow/openapi-typescript" data-icon="octicon-star" data-show-count="true" aria-label="Star drwpow/openapi-typescript on GitHub">Star</a></span>
4636
</div>
4737
</nav>
4838
</header>
@@ -54,27 +44,26 @@ const { currentPage } = Astro.props;
5444
display: flex;
5545
height: var(--theme-navbar-height);
5646
justify-content: center;
57-
overflow: hidden;
58-
position: sticky;
59-
top: 0;
6047
width: 100%;
61-
z-index: 11;
62-
63-
@media (min-width: 50em) {
64-
position: static;
65-
}
6648
}
6749

6850
.logo {
6951
color: hsla(var(--color-base-white), 100%, 1);
7052
display: flex;
71-
flex-shrink: 0;
7253
flex: 1;
73-
overflow: hidden;
74-
z-index: -1;
54+
}
55+
56+
.star-count {
57+
display: none;
58+
59+
@media (min-width: 600px) {
60+
display: block;
61+
}
7562
}
7663

7764
.logo {
65+
min-width: 6rem;
66+
7867
a {
7968
color: var(--theme-text);
8069
display: flex;
@@ -103,11 +92,15 @@ const { currentPage } = Astro.props;
10392

10493
.nav-wrapper {
10594
display: flex;
95+
gap: 0.5rem;
10696
justify-content: flex-end;
107-
gap: 1em;
10897
width: 100%;
109-
max-width: 83.25rem;
110-
padding: 0 1rem;
98+
max-width: 81rem;
99+
padding-right: 0.5rem;
100+
101+
@media (min-width: 600px) {
102+
gap: 1em;
103+
}
111104
}
112105

113106
@media (min-width: 50em) {

‎docs/src/components/LeftSidebar/LeftSidebar.astro‎

Lines changed: 53 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -32,22 +32,20 @@ const sidebar: Record<string, Link[]> = {
3232
<ul class="nav-groups">
3333
{
3434
Object.entries(sidebar).map(([header, children]) => (
35-
<li>
36-
<div class="nav-group">
37-
<h2 class="nav-group-title">{header}</h2>
38-
<ul>
39-
{children.map((child) => {
40-
const url = Astro.site?.pathname + child.url;
41-
return (
42-
<li class="nav-link">
43-
<a href={url} aria-current={currentPageMatch === child.url ? "page" : false}>
44-
{child.text}
45-
</a>
46-
</li>
47-
);
48-
})}
49-
</ul>
50-
</div>
35+
<li class="nav-group">
36+
<h2 class="nav-group-title">{header}</h2>
37+
<ul class="nav-group-subnav">
38+
{children.map((child) => {
39+
const url = Astro.site?.pathname + child.url;
40+
return (
41+
<li class="nav-link">
42+
<a class="link" href={url} aria-current={currentPageMatch === child.url ? "page" : false}>
43+
{child.text}
44+
</a>
45+
</li>
46+
);
47+
})}
48+
</ul>
5149
</li>
5250
))
5351
}
@@ -68,30 +66,63 @@ const sidebar: Record<string, Link[]> = {
6866
width: 100%;
6967
}
7068

69+
.link {
70+
color: inherit;
71+
display: block;
72+
font-size: 0.875rem;
73+
line-height: 1;
74+
margin: 1px;
75+
padding: 0.25rem 0.5rem;
76+
text-decoration: none;
77+
78+
@media (min-width: 600px) {
79+
padding: 0.375rem;
80+
}
81+
82+
&:hover,
83+
&:focus {
84+
background-color: var(--theme-bg-hover);
85+
}
86+
87+
&[aria-current="page"] {
88+
color: var(--theme-text-accent);
89+
background-color: var(--theme-bg-accent);
90+
font-weight: 500;
91+
}
92+
}
93+
7194
.nav-groups {
7295
height: 100%;
73-
padding: 2rem 0;
96+
margin: 0;
97+
padding: 0;
7498
overflow-y: auto;
7599
max-height: 100vh;
76100

77-
> li + li {
78-
margin-top: 1rem;
79-
}
80-
81101
> :first-child {
82102
padding-top: var(--doc-padding);
83103
}
84104

85105
> :last-child {
86106
padding-bottom: 2rem;
87-
margin-bottom: var(--theme-navbar-height);
88107
}
89108

90109
@media (min-width: 50em) {
91110
padding: 0;
92111
}
93112
}
94113

114+
.nav-group {
115+
margin-top: 1rem;
116+
117+
&:first-of-type {
118+
margin-top: 0;
119+
}
120+
}
121+
122+
.nav-group-subnav {
123+
margin-top: 0.6;
124+
}
125+
95126
.nav-group-title {
96127
font-size: 0.76rem;
97128
font-weight: 400;
@@ -102,29 +133,6 @@ const sidebar: Record<string, Link[]> = {
102133
padding: 0 0.5rem;
103134
text-transform: uppercase;
104135
}
105-
106-
.nav-link {
107-
a {
108-
color: inherit;
109-
display: block;
110-
font-size: 0.875rem;
111-
line-height: 1;
112-
margin: 1px;
113-
padding: 0.375rem;
114-
text-decoration: none;
115-
116-
&:hover,
117-
&:focus {
118-
background-color: var(--theme-bg-hover);
119-
}
120-
121-
&[aria-current="page"] {
122-
color: var(--theme-text-accent);
123-
background-color: var(--theme-bg-accent);
124-
font-weight: 500;
125-
}
126-
}
127-
}
128136
</style>
129137

130138
<style is:global>

‎docs/src/components/PageContent/PageContent.astro‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,15 @@ const { title, headings, githubEditUrl } = Astro.props;
2525
</nav>
2626
</article>
2727

28-
<style>
28+
<style lang="scss">
2929
.content {
30-
padding: 0;
3130
max-width: 75ch;
32-
width: 100%;
33-
height: 100%;
34-
display: flex;
35-
flex-direction: column;
36-
}
31+
padding-left: 1rem;
32+
padding-right: 1rem;
3733

38-
.content > section {
39-
margin-bottom: 4rem;
34+
> section {
35+
margin-bottom: 4rem;
36+
}
4037
}
4138

4239
.block {

‎docs/src/components/RightSidebar/MoreMenu.astro‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,12 @@ const { editHref } = Astro.props;
99
---
1010

1111
<h2 class="heading">More</h2>
12-
<ul>
12+
<ul class="more-menu">
1313
{
1414
editHref && (
1515
<li class={`header-link depth-2`}>
1616
<a class="edit-on-github" href={editHref} target="_blank">
17-
<svg
18-
aria-hidden="true"
19-
focusable="false"
20-
data-prefix="fas"
21-
data-icon="pen"
22-
class="svg-inline--fa fa-pen fa-w-16"
23-
role="img"
24-
xmlns="http://www.w3.org/2000/svg"
25-
viewBox="0 0 512 512"
26-
height="1em"
27-
width="1em"
28-
>
17+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen" class="svg-inline--fa fa-pen fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="1em" width="1em">
2918
<path
3019
fill="currentColor"
3120
d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
@@ -41,15 +30,16 @@ const { editHref } = Astro.props;
4130
<ThemeToggleButton client:visible />
4231
</div>
4332

44-
<style>
33+
<style lang="scss">
4534
.edit-on-github {
4635
text-decoration: none;
4736
font: inherit;
4837
color: inherit;
4938
font-size: 1rem;
5039
}
5140

52-
.heading {
53-
margin-top: 1rem !important;
41+
.more-menu {
42+
margin: 0;
43+
padding: 0;
5444
}
5545
</style>

‎docs/src/components/RightSidebar/TableOfContents.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,11 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
6969
<h2 id={onThisPageID} className="heading">
7070
On this page
7171
</h2>
72-
<ul ref={toc}>
72+
<ul className="toc" ref={toc}>
7373
{headings
7474
.filter(({ depth }) => depth > 1 && depth < 4)
7575
.map((heading) => (
76-
<li
77-
className={`header-link depth-${heading.depth} ${
78-
currentID === heading.slug ? "current-header-link" : ""
79-
}`.trim()}
80-
>
76+
<li className={`header-link depth-${heading.depth} ${currentID === heading.slug ? "current-header-link" : ""}`.trim()}>
8177
<a href={`#${heading.slug}`} onClick={onLinkClick}>
8278
{unescape(heading.text)}
8379
</a>

‎docs/src/layouts/MainLayout.astro‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,9 @@ const nextLink: Record<string, Link | undefined> = {
5454
}
5555

5656
.layout {
57-
display: grid;
58-
grid-auto-flow: column;
59-
grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
60-
6157
@media (min-width: 50em) {
58+
display: grid;
6259
overflow: initial;
63-
gap: 1.5rem;
6460
grid-template-columns: 15rem minmax(0, var(--max-width));
6561
}
6662

@@ -87,7 +83,6 @@ const nextLink: Record<string, Link | undefined> = {
8783

8884
@media (min-width: 50em) {
8985
display: flex;
90-
padding-left: 1rem;
9186
position: sticky;
9287
grid-column: 1;
9388
}
@@ -96,8 +91,6 @@ const nextLink: Record<string, Link | undefined> = {
9691
#grid-main {
9792
display: flex;
9893
flex-direction: column;
99-
grid-column: 2;
100-
height: 100%;
10194
}
10295

10396
#grid-right {
@@ -109,19 +102,15 @@ const nextLink: Record<string, Link | undefined> = {
109102
}
110103
}
111104
</style>
112-
<style is:global>
113-
.layout > * {
114-
width: 100%;
115-
height: 100%;
116-
}
117-
105+
<style is:global lang="scss">
118106
.mobile-sidebar-toggle {
119107
overflow: hidden;
120-
}
121108

122-
.mobile-sidebar-toggle #grid-left {
123-
display: block;
124-
top: 2rem;
109+
#grid-left {
110+
display: block;
111+
top: 4rem;
112+
width: 100%;
113+
}
125114
}
126115
</style>
127116
</head>

0 commit comments

Comments
 (0)