Skip to content

Commit d664137

Browse files
ryyppyryyppy
authored
Merge pull request rescript-lang#52 from reason-association/refine-api-and-code-styling
Refine api and code styling
2 parents 7c3026c + 5ae596b commit d664137

13 files changed

+76
-56
lines changed

‎components/ApiMarkdown.re

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,10 @@ module H2 = {
2828
// We will currently hide the headline, to keep the structure,
2929
// but having an Elm like documentation
3030
[@react.component]
31-
let make = (~id, ~children as _) => {
31+
let make = (~id, ~children) => {
3232
<>
33-
// Here we know that children is always a string (## headline)
34-
<InvisibleAnchor id />
35-
<div className="border-b border-gray-200 my-20" />
33+
<div className="border-b border-gray-10 mb-10 mt-20" />
34+
<Markdown.H2 id> children </Markdown.H2>
3635
</>;
3736
};
3837
};

‎components/CodeExample.re

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,24 @@ let langShortname = (lang: string) => {
4848
};
4949

5050
[@react.component]
51-
let make = (~highlightedLines=[||], ~code: string, ~lang="text") => {
51+
let make = (~highlightedLines=[||], ~code: string, ~showLabel=true, ~lang="text") => {
5252
let children = renderHLJS(~highlightedLines, ~code, ~lang, ());
5353

54-
let label = langShortname(lang);
55-
56-
<div
57-
className="flex w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-snow-dark bg-snow-light px-5 py-2 text-night-dark">
54+
let label = if(showLabel) {
55+
let label = langShortname(lang);
5856
<div
59-
className="flex self-end font-sans mb-4 text-sm font-bold text-night-light">
57+
className="flex self-end font-sans mb-4 text-sm font-bold text-night-light px-4">
6058
{Js.String2.toUpperCase(label)->s}
6159
</div>
62-
<div className="px-5 text-base pb-6 overflow-x-auto -mt-2"> children </div>
60+
}
61+
else {
62+
<div className="mt-4"/>
63+
};
64+
65+
<div
66+
className="flex w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-snow-dark bg-snow-light py-2 text-night-dark">
67+
label
68+
<div className="px-4 text-base pb-2 overflow-x-auto -mt-2"> children </div>
6369
</div>;
6470
};
6571

@@ -81,9 +87,11 @@ module Toggle = {
8187
"highlightedLines": tab.highlightedLines,
8288
"code": tab.code,
8389
"lang": tab.lang,
90+
"showLabel": Some(true),
8491
})
8592
| multiple =>
86-
let labels =
93+
let numberOfItems = Js.Array.length(multiple);
94+
let tabElements =
8795
Belt.Array.mapWithIndex(
8896
multiple,
8997
(i, tab) => {
@@ -99,18 +107,24 @@ module Toggle = {
99107
};
100108

101109
let activeClass =
102-
selected === i ? "text-fire-80" : "hover:cursor-pointer";
110+
selected === i ? "font-bold text-gray-100 bg-snow-light border border-b-0 border-snow-dark border-gray-20" : "border-gray-20 border-b hover:cursor-pointer";
103111

104112
let onClick = evt => {
105113
ReactEvent.Mouse.preventDefault(evt);
106114
setSelected(_ => i);
107115
};
108116
let key = label ++ "-" ++ Belt.Int.toString(i);
109117

118+
let paddingX = switch(numberOfItems) {
119+
| 1
120+
| 2 => "sm:px-16"
121+
| 3 => "lg:px-8"
122+
| _ => ""
123+
};
110124
<span
111125
key
112126
className={
113-
"inline-block p-2 last:border-r-0 border-r " ++ activeClass
127+
paddingX ++ " flex-none px-4 inline-block p-2 bg-gray-10 rounded-tl rounded-tr " ++ activeClass
114128
}
115129
onClick>
116130
label->s
@@ -132,12 +146,17 @@ module Toggle = {
132146
->Belt.Option.getWithDefault(React.null);
133147

134148
<div
135-
className="flex w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-snow-dark bg-snow-light px-5 pb-2 text-night-dark">
149+
className="flex w-full flex-col rounded-none text-night-dark">
136150
<div
137-
className="border-b border-l border-r flex self-end font-sans mb-6 md:mb-4 text-sm font-bold text-night-light">
138-
labels->ate
151+
className="flex w-full overflow-auto scrolling-touch font-sans bg-transparent text-sm text-gray-60-tr">
152+
<div className="flex">
153+
tabElements->ate
154+
</div>
155+
<div className="flex-1 border-b border-gray-20">
156+
{j|\u00A0|j}->s
157+
</div>
139158
</div>
140-
<div className="px-5 text-base pb-6 overflow-x-auto -mt-2">
159+
<div className="px-4 text-base pb-4 pt-4 overflow-x-auto bg-snow-light border-snow-dark xs:rounded-b border border-t-0">
141160
<pre> children </pre>
142161
</div>
143162
</div>;

‎components/CodeSignature.re

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

‎components/Markdown.re

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,11 @@ module H2 = {
154154
<>
155155
// Here we know that children is always a string (## headline)
156156
<h2
157-
className="group mt-12 mb-3 text-28 leading-1 font-sans font-semibold text-onyx">
158-
<span className="pr-2" style={Style.make(~marginLeft="-2rem", ())}>
157+
className="group mt-12 mb-3 text-28 leading-1 font-sans font-medium text-onyx">
158+
children
159+
<span className="ml-2">
159160
<Anchor id />
160161
</span>
161-
children
162162
</h2>
163163
</>;
164164
};
@@ -169,10 +169,10 @@ module H3 = {
169169
let make = (~id, ~children) => {
170170
<h3
171171
className="group text-xl mt-12 mb-3 leading-3 font-sans font-semibold text-onyx">
172-
<span className="pr-2" style={Style.make(~marginLeft="-1.6rem", ())}>
172+
children
173+
<span className="ml-2">
173174
<Anchor id />
174175
</span>
175-
children
176176
</h3>;
177177
};
178178
};
@@ -186,6 +186,9 @@ module H4 = {
186186
<Anchor id />
187187
</span>
188188
children
189+
<span className="ml-2">
190+
<Anchor id />
191+
</span>
189192
</h4>;
190193
};
191194
};
@@ -195,10 +198,10 @@ module H5 = {
195198
let make = (~id, ~children) => {
196199
<h5
197200
className="group mt-12 mb-3 text-xs leading-2 font-sans font-semibold uppercase tracking-wide text-onyx">
198-
<span className="pr-2" style={Style.make(~marginLeft="-1.1rem", ())}>
201+
children
202+
<span className="ml-2">
199203
<Anchor id />
200204
</span>
201-
children
202205
</h5>;
203206
};
204207
};
@@ -303,7 +306,7 @@ module Code = {
303306
if (Belt.List.has(metaSplits, "example", (==))) {
304307
<CodeExample code lang />;
305308
} else if (Belt.List.has(metaSplits, "sig", (==))) {
306-
<CodeSignature code lang />;
309+
<CodeExample code lang showLabel=false/>;
307310
} else {
308311
<CodeExample highlightedLines code lang />;
309312
};
@@ -429,7 +432,7 @@ module CodeTab = {
429432
},
430433
);
431434

432-
<div className="mt-4 mb-10">
435+
<div className="mt-4 mb-10 -mx-6 xs:mx-0">
433436
<CodeExample.Toggle tabs />
434437
</div>
435438
};

‎layouts/BeltDocsLayout.re

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,6 @@ module Docs = {
146146
module Prose = {
147147
[@react.component]
148148
let make = (~children) => {
149-
<Docs components=Markdown.default> children </Docs>;
149+
<Docs components=ApiMarkdown.default> children </Docs>;
150150
};
151151
};

‎layouts/BeltDocsLayout8_0_0.re

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,6 @@ module Docs = {
176176
module Prose = {
177177
[@react.component]
178178
let make = (~children) => {
179-
<Docs components=Markdown.default> children </Docs>;
179+
<Docs components=ApiMarkdown.default> children </Docs>;
180180
};
181181
};

‎layouts/DomDocsLayout.re

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,6 @@ module Docs = {
8787
module Prose = {
8888
[@react.component]
8989
let make = (~children) => {
90-
<Docs components=Markdown.default> children </Docs>;
90+
<Docs components=ApiMarkdown.default> children </Docs>;
9191
};
9292
};

‎layouts/DomDocsLayout8_0_0.re

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,6 @@ module Docs = {
9090
module Prose = {
9191
[@react.component]
9292
let make = (~children) => {
93-
<Docs components=Markdown.default> children </Docs>;
93+
<Docs components=ApiMarkdown.default> children </Docs>;
9494
};
9595
};

‎layouts/JsDocsLayout.re

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,6 @@ module Docs = {
203203
module Prose = {
204204
[@react.component]
205205
let make = (~children) => {
206-
<Docs components=Markdown.default> children </Docs>;
206+
<Docs components=ApiMarkdown.default> children </Docs>;
207207
};
208208
};

‎layouts/JsDocsLayout8_0_0.re

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,6 @@ module Docs = {
213213
module Prose = {
214214
[@react.component]
215215
let make = (~children) => {
216-
<Docs components=Markdown.default> children </Docs>;
216+
<Docs components=ApiMarkdown.default> children </Docs>;
217217
};
218218
};

0 commit comments

Comments
 (0)