Skip to content

Commit e30e958

Browse files
thisisjofrankthisisjofrank
authored
restyle codeblocks, put headings in order (#1470)
1 parent 6c347f0 commit e30e958

File tree

9 files changed

+102
-148
lines changed

9 files changed

+102
-148
lines changed

‎_components/Base.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function Base(
66
) {
77
return (
88
<>
9-
<div className="ddoc">
9+
<div className="ddoc markdown-body">
1010
<link rel="stylesheet" href="/reference_styles.css" />
1111
<comp.Breadcrumbs parts={data.breadcrumbs_ctx.parts} />
1212
<div id="content">

‎reference/_components/DocEntry.tsx

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,35 @@ export default function (
99
id={docEntry.id}
1010
>
1111
<div className="docEntryHeader">
12-
<div>
13-
{docEntry.tags && docEntry.tags.length > 0 && (
14-
<div className="space-x-1 mb-1">
15-
{docEntry.tags.map((tag) => <comp.Tag tag={tag} />)}
16-
</div>
17-
)}
12+
{docEntry.tags && docEntry.tags.length > 0 && (
13+
<div className="space-x-1 mb-1">
14+
{docEntry.tags.map((tag) => <comp.Tag tag={tag} />)}
15+
</div>
16+
)}
1817

19-
<code>
20-
{docEntry.name && <comp.Anchor anchor={docEntry.anchor} />}
18+
{/* Chosen 200 as a guestimate of when code is blocks rather than inline, would be better if this was in the markup sent from ddoc */}
19+
<code
20+
className={docEntry.content.length > 200 ? "inline-code-block" : ""}
21+
>
22+
{docEntry.name && <comp.Anchor anchor={docEntry.anchor} />}
2123

22-
{docEntry.name_href
23-
? (
24-
<a className="font-bold font-lg link" href={docEntry.name_href}>
25-
{docEntry.name}
26-
</a>
24+
{docEntry.name_href
25+
? (
26+
<a className="font-bold font-lg link" href={docEntry.name_href}>
27+
{docEntry.name}
28+
</a>
29+
)
30+
: (
31+
docEntry.name && (
32+
<span className="font-bold font-lg">{docEntry.name}</span>
2733
)
28-
: (
29-
docEntry.name && (
30-
<span className="font-bold font-lg">{docEntry.name}</span>
31-
)
32-
)}
33-
{/*typedef rendering*/}
34-
<span
35-
className="font-medium text-stone-500"
36-
dangerouslySetInnerHTML={{ __html: docEntry.content }}
37-
/>
38-
</code>
39-
</div>
34+
)}
35+
{/*typedef rendering*/}
36+
<span
37+
className="font-medium"
38+
dangerouslySetInnerHTML={{ __html: docEntry.content }}
39+
/>
40+
</code>
4041
</div>
4142

4243
{/*markdown rendering*/}

‎reference/_components/Function.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ export default function (
44
{ functionCtx, comp }: { comp: any; functionCtx: FunctionCtx },
55
) {
66
return (
7-
<div className="mt-3 space-y-8">
7+
<div className="mt-3">
88
{functionCtx.functions.map((func, index) => (
99
<>
10+
{functionCtx.functions.length > 1 && <h2>Overload {index + 1}</h2>}
1011
<div className="scroll-mt-16" id={func.id}>
11-
<code className="anchorable text-base break-words">
12+
<code
13+
className={`anchorable break-words inline-code-block`}
14+
>
1215
<comp.Anchor anchor={func.anchor} />
1316
<span className="font-bold">{func.name}</span>
1417

@@ -26,9 +29,6 @@ export default function (
2629
)}
2730
<comp.SymbolContent symbolContent={func.content} />
2831
</div>
29-
{index !== (functionCtx.functions.length - 1) && (
30-
<div className="border-b border-gray-300 max-w-[75ch]" />
31-
)}
3232
</>
3333
))}
3434
</div>

‎reference/_components/Section.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
h1.ref-h1 {
2+
font-size: 1.6rem;
3+
border: 0;
4+
padding: 0;
5+
}
6+
7+
code.inline-code-block {
8+
display: inline-block;
9+
margin-bottom: 1rem;
10+
padding: 1rem;
11+
}
12+
13+
hr.hr {
14+
height: 1px;
15+
}
16+
17+
.anchorable-heading .context-link {
18+
color: hsl(var(--foreground-primary));
19+
}

‎reference/_components/Section.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,14 @@ export default function (
5151
break;
5252
}
5353
}
54-
5554
return (
5655
<section className="section" id={section.header?.anchor.id}>
5756
{section.header && (
5857
<>
5958
<h3 className="anchorable-heading">
6059
{section.header.href
6160
? (
62-
<a href={section.header.href} className="contextLink">
61+
<a href={section.header.href} className="context-link">
6362
{section.header.title}
6463
</a>
6564
)
@@ -79,3 +78,5 @@ export default function (
7978
</section>
8079
);
8180
}
81+
82+
export const css = "@import './reference/_components/Section.css';";

‎reference/_components/SymbolGroup.tsx

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,32 @@ export default function (
77
<main className="symbolGroup" id={`symbol_${symbolGroup.name}`}>
88
{symbolGroup.symbols.map((symbol, i) => (
99
<article>
10-
<div>
11-
<div>
12-
<div className="text-2xl leading-none break-all">
13-
<span className={`text-${symbol.kind.kind}`}>
14-
{symbol.kind.title_lowercase}
15-
</span>{" "}
16-
<span className="font-bold">{symbolGroup.name}</span>
17-
</div>
18-
{symbol.subtitle && (
19-
<div className="symbolSubtitle">
20-
{symbol.subtitle.kind === "class"
21-
? (
22-
<comp.DocBlockSubtitleClass
23-
subtitle={symbol.subtitle.value}
24-
/>
25-
)
26-
: (
27-
<comp.DocBlockSubtitleInterface
28-
subtitle={symbol.subtitle.value}
29-
/>
30-
)}
31-
</div>
32-
)}
33-
{symbol.tags && (
34-
<div className="space-x-2 !mt-2">
35-
{symbol.tags.map((tag) => <comp.Tag tag={tag} large />)}
36-
</div>
37-
)}
10+
<h1 className="ref-h1">
11+
<span className={`text-${symbol.kind.kind}`}>
12+
{symbol.kind.title_lowercase}
13+
</span>{" "}
14+
<span className="font-bold">{symbolGroup.name}</span>
15+
</h1>
16+
{symbol.subtitle && (
17+
<div className="symbolSubtitle">
18+
{symbol.subtitle.kind === "class"
19+
? (
20+
<comp.DocBlockSubtitleClass
21+
subtitle={symbol.subtitle.value}
22+
/>
23+
)
24+
: (
25+
<comp.DocBlockSubtitleInterface
26+
subtitle={symbol.subtitle.value}
27+
/>
28+
)}
3829
</div>
39-
</div>
30+
)}
31+
{(symbol.tags && symbol.tags.length > 0) && (
32+
<div className="space-x-2 !mt-2">
33+
{symbol.tags.map((tag) => <comp.Tag tag={tag} large />)}
34+
</div>
35+
)}
4036

4137
{i === 0 && <comp.UsageLarge usage={symbol.usage} />}
4238

‎reference/_components/UsageLarge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function ({ usages }: { usages: UsagesCtx | null }) {
66
}
77

88
return (
9-
<div class="usageContent px-4 pt-4 pb-5 bg-stone-100 rounded border border-gray-300">
9+
<div class="usageContent mb-4 px-4 pt-4 pb-5 bg-stone-100 rounded border border-gray-300">
1010
<h3>Usage in Deno</h3>
1111

1212
{/*markdown rendering*/}

‎static/reference_styles.css

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
margin-left: 1rem;
1818
}
1919
.ddoc .ml-indent {
20-
margin-left: 2ch;
20+
display: inline;
21+
margin: 0;
2122
}
2223
.ddoc .mr-2 {
2324
margin-right: 0.5rem;
@@ -339,10 +340,6 @@
339340
font-size: 1.5rem;
340341
line-height: 2rem;
341342
}
342-
.ddoc .text-base {
343-
font-size: 1rem;
344-
line-height: 1.5rem;
345-
}
346343
.ddoc .text-sm {
347344
font-size: 0.875rem;
348345
line-height: 1.25rem;
@@ -398,10 +395,6 @@
398395
--tw-text-opacity: 1;
399396
color: rgb(126 87 192/var(--tw-text-opacity));
400397
}
401-
.ddoc .text-\[\#0F172A\] {
402-
--tw-text-opacity: 1;
403-
color: rgb(15 23 42/var(--tw-text-opacity));
404-
}
405398
.ddoc .text-abstract {
406399
--tw-text-opacity: 1;
407400
color: rgb(12 175 198/var(--tw-text-opacity));
@@ -454,13 +447,11 @@
454447
.ddoc {
455448
--ddoc-selection-border-width: 2px;
456449
--ddoc-selection-border-color-default: #d6d3d1;
457-
--ddoc-selection-selected-border-color: #2564eb;
458450
--ddoc-selection-selected-bg: #056cf00c;
459451
--ddoc-selection-padding: 9px 15px;
460452
}
461453
.ddoc .link {
462454
--tw-text-opacity: 1;
463-
color: rgb(37 99 235/var(--tw-text-opacity));
464455
transition-property:
465456
color,
466457
background-color,
@@ -533,26 +524,9 @@
533524
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
534525
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
535526
}
536-
.ddoc .docEntry .docEntryHeader {
537-
justify-content: space-between;
538-
align-items: flex-start;
539-
display: flex;
540-
}
541-
@media (min-width: 768px) {
542-
.ddoc .docEntry .docEntryHeader {
543-
font-size: 1rem;
544-
line-height: 1.5rem;
545-
}
546-
}
547527
.ddoc .docEntry .docEntryHeader > div {
548528
overflow-wrap: break-word;
549529
}
550-
.ddoc .section {
551-
max-width: 75ch;
552-
margin-top: 1.5rem;
553-
padding-bottom: 1rem;
554-
margin-bottom: 0.5rem;
555-
}
556530
.ddoc .section > :not([hidden]) ~ :not([hidden]) {
557531
--tw-space-y-reverse: 0;
558532
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -625,7 +599,6 @@
625599
.namespaceItemContentSubItems
626600
a {
627601
text-decoration-line: underline;
628-
text-decoration-color: #d6d3d1;
629602
}
630603
:is(
631604
.ddoc .namespaceSection .namespaceItem .namespaceItemContent > a,
@@ -983,11 +956,6 @@ ul.namespaceItemContentSubItems {
983956
opacity: 1;
984957
display: block;
985958
}
986-
.ddoc .contextLink:hover {
987-
--tw-text-opacity: 1;
988-
color: rgb(14 101 144/var(--tw-text-opacity));
989-
}
990-
991959
.ddoc .breadcrumbs {
992960
margin: 0;
993961
word-break: break-all;
@@ -1327,3 +1295,10 @@ a.anchor-link {
13271295
.ddoc [id] {
13281296
scroll-margin-top: 10.5rem;
13291297
}
1298+
1299+
.ddoc .link {
1300+
color: hsl(var(--primary));
1301+
&:hover {
1302+
color: hsl(var(--primary));
1303+
}
1304+
}

0 commit comments

Comments
 (0)