Skip to content

Commit 4b9c8df

Browse files
bennypowersbennypowers
committed
wip: improve API docs
1 parent d4a925a commit 4b9c8df

File tree

16 files changed

+22576
-250
lines changed

16 files changed

+22576
-250
lines changed

‎components/type-doc.ts‎

Lines changed: 104 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -10,130 +10,132 @@ import {
1010
@customElement('type-doc')
1111
export class TypeDoc extends LitElement {
1212
static readonly styles = css`
13-
:host {
14-
position: relative;
15-
max-width: 100%;
16-
display: grid;
17-
grid-template-areas: 'head' 'body';
18-
grid-template-rows: min-content 1fr;
19-
margin-bottom: 1rem;
20-
}
21-
22-
.visually-hidden {
23-
position: absolute;
24-
clip: rect(1px, 1px, 1px, 1px);
25-
}
13+
:host {
14+
position: relative;
15+
max-width: 100%;
16+
display: grid;
17+
grid-template-areas: 'head' 'body';
18+
grid-template-rows: min-content 1fr;
19+
margin-bottom: 1rem;
20+
}
2621
27-
header {
28-
display: flex;
29-
align-items: center;
30-
gap: 16px;
31-
flex-flow: row wrap;
32-
border-top-left-radius: 6px;
33-
border-top-right-radius: 6px;
34-
background: var(--markdown-table-row-odd-background-color, #f6f8fa);
35-
padding: 6px 10px;
36-
transition: background 0.2s ease-in-out;
37-
}
22+
.visually-hidden {
23+
position: absolute;
24+
clip: rect(1px, 1px, 1px, 1px);
25+
}
3826
39-
:host([data-inherited-from]) header {
40-
justify-content: space-between;
41-
overflow-x: hidden;
42-
}
27+
header {
28+
display: flex;
29+
align-items: center;
30+
gap: 16px;
31+
flex-flow: row wrap;
32+
border-top-left-radius: 6px;
33+
border-top-right-radius: 6px;
34+
background: var(--type-doc-header-background-color, var(--markdown-blockquote-color, #c9e3ff));
35+
padding: 6px 10px;
36+
transition: background 0.2s ease-in-out;
37+
}
4338
44-
:host([data-inherited-from]:not([expanded])) header {
45-
border-bottom-left-radius: 6px;
46-
border-bottom-right-radius: 6px;
47-
background: var(--markdown-syntax-background-color);
48-
}
39+
:host([data-inherited-from]) header {
40+
justify-content: space-between;
41+
overflow-x: hidden;
42+
}
4943
50-
:host([data-inherited-from]) header ::slotted([slot="name"]) {
51-
cursor: pointer;
52-
}
44+
:host([data-inherited-from]:not([expanded])) header {
45+
border-bottom-left-radius: 6px;
46+
border-bottom-right-radius: 6px;
47+
background: var(--markdown-syntax-background-color);
48+
}
5349
54-
:host([data-inherited-from]) header ::slotted([slot="type"]) {
55-
display: none !important;
56-
}
50+
:host([data-inherited-from]) header ::slotted([slot="name"]) {
51+
cursor: pointer;
52+
}
5753
58-
type-doc:not([data-inherited-from]) [slot="type"]::before {
59-
content: 'type: ';
60-
}
54+
:host([data-inherited-from]) header ::slotted([slot="type"]) {
55+
display: none !important;
56+
}
6157
62-
#inheritance {
63-
margin-inline-start: auto;
64-
}
58+
type-doc:not([data-inherited-from]) [slot="type"]::before {
59+
content: 'type: ';
60+
}
6561
66-
#inheritance button {
67-
color: inherit;
68-
background: none;
69-
border: none;
70-
margin-inline-end: 3px;
71-
}
62+
#inheritance {
63+
margin-inline-start: auto;
64+
}
7265
73-
#inheritance button,
74-
#inheritance button svg {
75-
height: 24px;
76-
width: 24px;
77-
transform: rotate(0deg);
78-
transition: transform 0.2s ease-in-out;
79-
}
66+
#inheritance button {
67+
color: inherit;
68+
background: none;
69+
border: none;
70+
margin-inline-end: 3px;
71+
}
8072
81-
:host([expanded]) #inheritance button svg {
82-
transform: rotate(180deg);
83-
}
73+
#inheritance button,
74+
#inheritance button svg {
75+
height: 24px;
76+
width: 24px;
77+
transform: rotate(0deg);
78+
transition: transform 0.2s ease-in-out;
79+
}
8480
85-
#body {
86-
background: var(--markdown-syntax-background-color);
87-
padding: 1rem 1.6rem;
88-
border-bottom-left-radius: 6px;
89-
border-bottom-right-radius: 6px;
90-
}
81+
:host([expanded]) #inheritance button svg {
82+
transform: rotate(180deg);
83+
}
9184
92-
#body ::slotted(p:last-child) {
93-
margin: 0 !important;
94-
}
85+
#body {
86+
background: var(--type-doc-body-background-color, #f6f8fa);
87+
padding: 1rem 1.6rem;
88+
border-bottom-left-radius: 6px;
89+
border-bottom-right-radius: 6px;
90+
}
9591
96-
#body ::slotted(h3) {
97-
margin-top: 4px !important;
98-
}
92+
#body ::slotted(p:last-child) {
93+
margin: 0 !important;
94+
}
9995
100-
#body ::slotted(.returns + p:last-child) {
101-
float: right;
102-
}
96+
#body ::slotted(h3) {
97+
margin-top: 4px !important;
98+
}
10399
104-
/* nested type-doc */
105-
#body ::slotted(type-doc) {
106-
margin-bottom: 0;
107-
background: transparent;
108-
padding: 0.3rem 0.8rem;
109-
}
100+
#body ::slotted(.returns + p:last-child) {
101+
float: right;
102+
}
110103
111-
:host([kind="return"]) header,
112-
:host([kind="parameter"]) header {
113-
background: none;
114-
padding-left: 0;
115-
}
104+
/* nested type-doc */
105+
#body ::slotted(type-doc) {
106+
margin-bottom: 0;
107+
background: transparent;
108+
padding: 0.3rem 0.8rem;
109+
}
116110
117-
:host([kind="return"]) #body,
118-
:host([kind="parameter"]) #body {
119-
padding: 0;
120-
}
111+
:host([kind="return"]) header,
112+
:host([kind="parameter"]) header {
113+
background: none;
114+
padding-left: 0;
115+
}
121116
122-
#body,
123-
header,
124-
#body ::slotted(:not(type-doc)) {
125-
max-width: 100%;
126-
}
117+
:host([kind="return"]) #body,
118+
:host([kind="parameter"]) #body {
119+
padding: 0;
120+
}
127121
128-
@media (max-width: 640px) {
129122
#body,
130123
header,
131-
#body ::slotted(:not(type-doc):not(h2):not(h3)) {
132-
overflow: auto;
124+
#body ::slotted(:not(type-doc)) {
125+
max-width: 100%;
126+
}
127+
128+
@media (max-width: 640px) {
129+
#body,
130+
header,
131+
#body ::slotted(:not(type-doc):not(h2):not(h3)) {
132+
overflow: auto;
133+
}
133134
}
134-
}
135135
`;
136136

137+
declare shadowRoot: ShadowRoot;
138+
137139
@property({ type: Boolean, reflect: true }) expanded = false;
138140

139141
render(): TemplateResult {
@@ -173,7 +175,8 @@ export class TypeDoc extends LitElement {
173175

174176
private cloneHeading() {
175177
const hidden = this.shadowRoot.querySelector(".visually-hidden");
176-
for (const child of hidden.children) child.remove();
178+
if (!hidden) return;
179+
for (const child of Array.from(hidden.children)) child.remove();
177180
const heading = this.querySelector('[slot="name"]');
178181
if (!heading) return;
179182
hidden.append(heading.cloneNode(true));

‎docs/_assets/api.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#content-top a svg {
1+
#content-top a:not(.anchor) svg {
22
width: var(--header-link-size, 36px);
33
height: auto;
44
}

‎docs/_assets/logo.svg‎

Lines changed: 18 additions & 6 deletions
Loading

‎docs/_assets/variables.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
html {
2+
--primary-color: #e63946;
3+
--primary-color-lighter: #e25761;
4+
--primary-color-darker: #a22831;
5+
--primary-color-accent: #cee5f6;
6+
--primary-text-color: #2c3e50;
7+
--primary-lines-color: #ccc;
8+
9+
/* Contrast colors */
10+
--contrast-color-light: #fff;
11+
--contrast-color-dark: #1d3557;
12+
13+
/* background-colors */
14+
--page-background: white;
15+
--footer-background: rgba(0, 0, 0, 0.1);
16+
17+
/* text */
18+
--text-color: black;
19+
20+
/* markdown */
21+
--markdown-octicon-link: black;
22+
23+
/* --markdown-syntax-background-color: #a0a0a0; */
24+
--markdown-link-color: #fb7881;
25+
--markdown-blockquote-color: #c9e3ff;
26+
}
27+
28+
html.dark {
29+
--primary-color: #e63946;
30+
--primary-color-lighter: #e25761;
31+
--primary-color-darker: #a22831;
32+
--primary-color-accent: #cee5f6;
33+
--primary-text-color: #eee;
34+
35+
/* Contrast colors */
36+
--contrast-color-light: #fff;
37+
--contrast-color-dark: #1d3557;
38+
39+
/* background-colors */
40+
--page-background: #333;
41+
--footer-background: #4f4f4f;
42+
43+
/* text */
44+
--text-color: white;
45+
46+
/* markdown */
47+
--markdown-octicon-link: white;
48+
--markdown-syntax-background-color: #a0a0a0;
49+
--markdown-link-color: #fb7881;
50+
--markdown-blockquote-color: #c9e3ff;
51+
}

0 commit comments

Comments
 (0)