Skip to content

Commit 4a42648

Browse files
JiaeKnamenu
JiaeK
authored and
namenu
committed
add keep-all (partially)
1 parent 12852fc commit 4a42648

File tree

6 files changed

+77
-68
lines changed

6 files changed

+77
-68
lines changed

‎src/components/Markdown.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import * as ParseNumericRangeJs from "../ffi/parse-numeric-range.js";
1717
function Markdown$P(Props) {
1818
var children = Props.children;
1919
return React.createElement("p", {
20-
className: "md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"
20+
className: "md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16 word-keep-all"
2121
}, children);
2222
}
2323

‎src/components/Markdown.res

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
module P = {
55
@react.component
66
let make = (~children) =>
7-
<p className="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"> children </p>
7+
<p className="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16 word-keep-all">
8+
children
9+
</p>
810
}
911

1012
// Used for hero like introduction text in

‎src/layouts/LandingPageLayout.mjs

+15-13
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ import * as ImageGallery from "../components/ImageGallery.mjs";
1919

2020
function LandingPageLayout$Intro(Props) {
2121
return React.createElement("section", {
22-
className: "flex justify-center"
22+
className: "flex justify-center word-keep-all"
2323
}, React.createElement("div", {
2424
className: "max-w-1060 flex flex-col items-center px-5 sm:px-8 lg:box-content"
2525
}, React.createElement("h1", {
2626
className: "hl-title text-center max-w-[53rem]"
2727
}, "빠르고, 단순하고,", React.createElement("br", undefined), "온전한 타입의", React.createElement("br", undefined), "미래에서 온 JavaScript"), React.createElement("h2", {
2828
className: "body-lg text-center text-gray-60 my-4 max-w-[40rem]"
29-
}, "ReScript는 강력한 타입의 언어로 효율적이며 가독성 높은 JavaScript로 컴파일", React.createElement("br", undefined), "됩니다. 함께 제공되는 번개처럼 빠른 툴체인을 통해 어떠한 크기의 코드베이스도 컴파일해낼 수 있습니다."), React.createElement("div", {
29+
}, "ReScript는 강력한 타입의 언어로 효율적이며 가독성 높은 JavaScript로 컴파일됩니다. 함께 제공되는 번개처럼 빠른 툴체인을 통해 어떠한 크기의 코드베이스도 컴파일해낼 수 있습니다."), React.createElement("div", {
3030
className: "mt-4 mb-2"
3131
}, React.createElement(Next.Link.make, {
3232
href: "/docs/manual/latest/installation",
@@ -48,7 +48,7 @@ function LandingPageLayout$PlaygroundHero(Props) {
4848
});
4949
var example = match[0];
5050
return React.createElement("section", {
51-
className: "relative mt-20 bg-gray-10"
51+
className: "relative mt-20 bg-gray-10 word-keep-all"
5252
}, React.createElement("div", {
5353
className: "relative flex justify-center w-full"
5454
}, React.createElement("div", {
@@ -189,7 +189,7 @@ function copyBox(text) {
189189

190190
function LandingPageLayout$QuickInstall$Instructions(Props) {
191191
return React.createElement("div", {
192-
className: "w-full max-w-[400px]"
192+
className: "w-full max-w-[400px] word-keep-all"
193193
}, React.createElement("h2", {
194194
className: "hl-3 lg:mt-12"
195195
}, "빠른 설치"), React.createElement("div", {
@@ -201,7 +201,7 @@ function LandingPageLayout$QuickInstall$Instructions(Props) {
201201

202202
function LandingPageLayout$QuickInstall(Props) {
203203
return React.createElement("section", {
204-
className: "my-32 sm:px-4 sm:flex sm:justify-center"
204+
className: "my-32 sm:px-4 sm:flex sm:justify-center word-keep-all"
205205
}, React.createElement("div", {
206206
className: "max-w-1060 flex flex-col w-full px-5 md:px-8 lg:px-8 lg:box-content "
207207
}, React.createElement("div", {
@@ -210,11 +210,11 @@ function LandingPageLayout$QuickInstall(Props) {
210210
className: "relative z-1 space-y-12 text-gray-80 font-semibold text-24 md:text-32 leading-2"
211211
}, React.createElement("span", {
212212
className: "bg-fire-5 rounded-lg border border-fire-10 p-1 "
213-
}, "JavaScript의 모든 기능을"), React.createElement("br", undefined), "\`any(어떤)\` 타입으로 쓰던", React.createElement("br", undefined), "걱정 없이 강력한 타입의 언어로 누리세요.")), React.createElement("div", {
213+
}, "JavaScript의 모든 기능"), "을 \`any(어떤)\` 타입으로 쓰던 걱정 없이 강력한 타입의 언어로 누리세요.")), React.createElement("div", {
214214
className: "w-full mt-12 md:flex flex-col lg:flex-row md:justify-between "
215215
}, React.createElement("p", {
216216
className: "relative z-1 text-gray-80 font-semibold text-24 md:text-32 leading-2 max-w-[32rem]"
217-
}, "ReScript는 UI 및 UX가 우수한", React.createElement("br", undefined), "미션 크리티컬한 제품을", React.createElement("br", undefined), "출시하고 관리하는 데 사용됩니다."), React.createElement("div", {
217+
}, "ReScript는 UI 및 UX가 우수한 미션 크리티컬한 제품을 출시하고 관리하는 데 사용됩니다."), React.createElement("div", {
218218
className: "mt-16 lg:mt-0 self-end",
219219
style: {
220220
maxWidth: "25rem"
@@ -234,7 +234,7 @@ function LandingPageLayout$MainUSP$Item(Props) {
234234
var polyPointsMobile = polygonDirection ? "0,100 100,100 100,70 0,80" : "0,100 100,100 100,78 0,72";
235235
var polyColor = polygonDirection ? "text-fire-30" : "text-fire";
236236
return React.createElement("div", {
237-
className: "relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden"
237+
className: "relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden word-keep-all"
238238
}, React.createElement("div", {
239239
className: "relative max-w-1060 z-3 flex flex-wrap justify-center lg:justify-between pb-16 pt-20 md:pb-20 md:pt-32 lg:pb-40 md:space-x-4 w-full"
240240
}, React.createElement("div", {
@@ -323,7 +323,7 @@ var item3 = React.createElement(LandingPageLayout$MainUSP$Item, {
323323
caption: "매끄럽게 진행되는 인터그레이션",
324324
title: React.createElement(React.Fragment, undefined, React.createElement("span", {
325325
className: "text-orange-dark"
326-
}, "JS에 친숙한 생태계를"), React.createElement("br", undefined), "바로 사용해보세요."),
326+
}, "JS에 친숙한 생태계"), React.createElement("br", undefined), "를 바로 사용해보세요."),
327327
media: React.createElement("video", {
328328
className: "rounded-lg",
329329
controls: true,
@@ -346,7 +346,7 @@ function LandingPageLayout$MainUSP(Props) {
346346

347347
function LandingPageLayout$OtherSellingPoints(Props) {
348348
return React.createElement("section", {
349-
className: "flex justify-center w-full bg-gray-90 border-t border-gray-80\n px-4 sm:px-8 lg:px-16 pt-24 pb-20 "
349+
className: "flex justify-center w-full bg-gray-90 border-t border-gray-80\n px-4 sm:px-8 lg:px-16 pt-24 pb-20 word-keep-all"
350350
}, React.createElement("div", {
351351
className: "max-w-1060 grid grid-cols-4 md:grid-cols-10 grid-rows-2 gap-8"
352352
}, React.createElement("div", {
@@ -435,7 +435,9 @@ var cards = [
435435
},
436436
{
437437
imgSrc: "/static/[email protected]",
438-
title: "점진적으로 ReScript 적용하기",
438+
title: React.createElement(React.Fragment, undefined, React.createElement("div", {
439+
className: "word-keep-all"
440+
}, "점진적으로 ReScript 적용하기")),
439441
descr: "현 프로젝트에서 ReScript 사용을 시작하는 방법에 대해 배워보세요. 전부를 이해할 필요는 없습니다. 먼저 사용해 보세요!",
440442
href: "/docs/manual/latest/installation#integrate-into-an-existing-js-project"
441443
},
@@ -472,7 +474,7 @@ function LandingPageLayout$CuratedResources(Props) {
472474
}, "설명 가이드와 문서들"), React.createElement("hr", {
473475
className: "bg-gray-80 h-px border-0 relative top-[-12px]"
474476
})), React.createElement("div", undefined, React.createElement("div", {
475-
className: "grid grid-flow-col grid-cols-2 grid-rows-2 lg:grid-cols-4 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto"
477+
className: "grid grid-flow-col grid-cols-2 grid-rows-2 lg:grid-cols-4 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto word-keep-all"
476478
}, Belt_Array.mapWithIndex(cards, (function (i, card) {
477479
return React.createElement(Next.Link.make, {
478480
href: card.href,
@@ -507,7 +509,7 @@ function LandingPageLayout$CuratedResources(Props) {
507509
}), React.createElement("h5", {
508510
className: "text-gray-10 hl-4 mt-32 h-12"
509511
}, card.title), React.createElement("div", {
510-
className: "text-gray-40 mt-4 body-sm"
512+
className: "text-gray-40 mt-4 body-sm word-keep-all"
511513
}, card.descr));
512514
})))));
513515
}

‎src/layouts/LandingPageLayout.res

+21-24
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module Intro = {
22
@react.component
33
let make = () => {
4-
<section className="flex justify-center">
4+
<section className="flex justify-center word-keep-all">
55
<div className="max-w-1060 flex flex-col items-center px-5 sm:px-8 lg:box-content">
66
<h1 className="hl-title text-center max-w-[53rem]">
77
{React.string(`빠르고, 단순하고,`)}
@@ -11,9 +11,7 @@ module Intro = {
1111
{React.string(`미래에서 온 JavaScript`)}
1212
</h1>
1313
<h2 className="body-lg text-center text-gray-60 my-4 max-w-[40rem]">
14-
{React.string(`ReScript는 강력한 타입의 언어로 효율적이며 가독성 높은 JavaScript로 컴파일`)}
15-
<br />
16-
{React.string(`됩니다. 함께 제공되는 번개처럼 빠른 툴체인을 통해 어떠한 크기의 코드베이스도 컴파일해낼 수 있습니다.`)}
14+
{React.string(`ReScript는 강력한 타입의 언어로 효율적이며 가독성 높은 JavaScript로 컴파일됩니다. 함께 제공되는 번개처럼 빠른 툴체인을 통해 어떠한 크기의 코드베이스도 컴파일해낼 수 있습니다.`)}
1715
</h2>
1816
<div className="mt-4 mb-2">
1917
<Next.Link href="/docs/manual/latest/installation" passHref={true}>
@@ -70,7 +68,7 @@ exports.Button = Button;`,
7068
let (example, _setExample) = React.useState(_ => examples->Js.Array2.unsafe_get(0))
7169

7270
//Playground Section & Background
73-
<section className="relative mt-20 bg-gray-10">
71+
<section className="relative mt-20 bg-gray-10 word-keep-all">
7472
<div className="relative flex justify-center w-full">
7573
<div className="relative w-full pt-6 pb-8 sm:px-8 md:px-16 max-w-[1400px]">
7674
// Playground widget
@@ -240,7 +238,7 @@ module QuickInstall = {
240238
}
241239
@react.component
242240
let make = () => {
243-
<div className="w-full max-w-[400px]">
241+
<div className="w-full max-w-[400px] word-keep-all">
244242
<h2 className="hl-3 lg:mt-12"> {React.string(`빠른 설치`)} </h2>
245243
<div className="captions x text-gray-40 mb-2 mt-1">
246244
{React.string(`기존 JavaScript 코드베이스에서 npm 또는 yarn을 이용해 ReScript를 빠르게 추가할 수 있습니다.`)}
@@ -255,30 +253,23 @@ module QuickInstall = {
255253

256254
@react.component
257255
let make = () => {
258-
<section className="my-32 sm:px-4 sm:flex sm:justify-center">
256+
<section className="my-32 sm:px-4 sm:flex sm:justify-center word-keep-all">
259257
<div className="max-w-1060 flex flex-col w-full px-5 md:px-8 lg:px-8 lg:box-content ">
260258
//---Textblock on the left side---
261259
<div className="relative max-w-[28rem]">
262260
<h2
263261
className="relative z-1 space-y-12 text-gray-80 font-semibold text-24 md:text-32 leading-2">
264262
<span className="bg-fire-5 rounded-lg border border-fire-10 p-1 ">
265-
{React.string(`JavaScript의 모든 기능을`)}
263+
{React.string(`JavaScript의 모든 기능`)}
266264
</span>
267-
<br />
268-
{React.string(`\`any(어떤)\` 타입으로 쓰던`)}
269-
<br />
270-
{React.string(`걱정 없이 강력한 타입의 언어로 누리세요.`)}
265+
{React.string(`을 \`any(어떤)\` 타입으로 쓰던 걱정 없이 강력한 타입의 언어로 누리세요.`)}
271266
</h2>
272267
</div>
273268
//spacing between columns
274269
<div className="w-full mt-12 md:flex flex-col lg:flex-row md:justify-between ">
275270
<p
276271
className="relative z-1 text-gray-80 font-semibold text-24 md:text-32 leading-2 max-w-[32rem]">
277-
{React.string(`ReScript는 UI 및 UX가 우수한`)}
278-
<br />
279-
{React.string(`미션 크리티컬한 제품을`)}
280-
<br />
281-
{React.string(`출시하고 관리하는 데 사용됩니다.`)}
272+
{React.string(`ReScript는 UI 및 UX가 우수한 미션 크리티컬한 제품을 출시하고 관리하는 데 사용됩니다.`)}
282273
</p>
283274
<div
284275
className="mt-16 lg:mt-0 self-end" style={ReactDOM.Style.make(~maxWidth="25rem", ())}>
@@ -319,7 +310,7 @@ module MainUSP = {
319310
}
320311

321312
<div
322-
className="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden">
313+
className="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden word-keep-all">
323314
// Content
324315
<div
325316
className="relative max-w-1060 z-3 flex flex-wrap justify-center lg:justify-between pb-16 pt-20 md:pb-20 md:pt-32 lg:pb-40 md:space-x-4 w-full">
@@ -415,9 +406,9 @@ module MainUSP = {
415406
<Item
416407
caption="매끄럽게 진행되는 인터그레이션"
417408
title={<>
418-
<span className="text-orange-dark"> {React.string(`JS에 친숙한 생태계를`)} </span>
409+
<span className="text-orange-dark"> {React.string(`JS에 친숙한 생태계`)} </span>
419410
<br />
420-
{React.string(`바로 사용해보세요.`)}
411+
{React.string(`를 바로 사용해보세요.`)}
421412
</>}
422413
media={<video
423414
className="rounded-lg" controls={true} poster={"/static/lp/interop-example-preview.jpg"}>
@@ -447,7 +438,7 @@ module OtherSellingPoints = {
447438
let make = () => {
448439
<section
449440
className="flex justify-center w-full bg-gray-90 border-t border-gray-80
450-
px-4 sm:px-8 lg:px-16 pt-24 pb-20 ">
441+
px-4 sm:px-8 lg:px-16 pt-24 pb-20 word-keep-all">
451442
//defines the grid
452443
<div className="max-w-1060 grid grid-cols-4 md:grid-cols-10 grid-rows-2 gap-8">
453444
//Large Item
@@ -561,7 +552,11 @@ module CuratedResources = {
561552
},
562553
{
563554
imgSrc: "/static/[email protected]",
564-
title: React.string("점진적으로 ReScript 적용하기"),
555+
title: <>
556+
<div className="word-keep-all">
557+
{React.string("점진적으로 ReScript 적용하기")}
558+
</div>
559+
</>,
565560
descr: "현 프로젝트에서 ReScript 사용을 시작하는 방법에 대해 배워보세요. 전부를 이해할 필요는 없습니다. 먼저 사용해 보세요!",
566561
href: "/docs/manual/latest/installation#integrate-into-an-existing-js-project",
567562
},
@@ -630,7 +625,7 @@ module CuratedResources = {
630625
//container for guides
631626
<div>
632627
<div
633-
className="grid grid-flow-col grid-cols-2 grid-rows-2 lg:grid-cols-4 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto">
628+
className="grid grid-flow-col grid-cols-2 grid-rows-2 lg:grid-cols-4 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto word-keep-all">
634629
{cards
635630
->Belt.Array.mapWithIndex((i, card) =>
636631
<Next.Link key={Belt.Int.toString(i)} href={card.href}>
@@ -662,7 +657,9 @@ module CuratedResources = {
662657
className="hover:bg-gray-80 bg-gray-90 px-5 pb-8 relative rounded-xl min-w-[200px]">
663658
<img className="h-12 absolute mt-5" src=card.imgSrc />
664659
<h5 className="text-gray-10 hl-4 mt-32 h-12"> {card.title} </h5>
665-
<div className="text-gray-40 mt-4 body-sm"> {React.string(card.descr)} </div>
660+
<div className="text-gray-40 mt-4 body-sm word-keep-all">
661+
{React.string(card.descr)}
662+
</div>
666663
</a>
667664
)
668665
->React.array}

‎styles/_markdown.css

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
/* Markdown related stuff */
22
/* Sometimes we cannot circumvent the cascade, especially for nested lists */
33

4-
.md-ul, .md-ol {
4+
.md-ul,
5+
.md-ol {
56
@apply mb-8;
67
}
78

89
.md-ul ul {
9-
@apply mb-0 ;
10+
@apply mb-0;
1011
}
1112

1213
.md-ol > li {
@@ -22,12 +23,12 @@
2223
@apply absolute font-semibold;
2324
}
2425

25-
.md-ul > .md-li::before{
26+
.md-ul > .md-li::before {
2627
content: "•";
2728
@apply absolute;
2829
}
2930

30-
.md-ul > .md-li > ul > li::before{
31+
.md-ul > .md-li > ul > li::before {
3132
content: "—";
3233
@apply absolute;
3334
}
@@ -51,15 +52,19 @@
5152
/* INFOBOX (Markdown.res) Find a better solution for <p> text inside of Info-Box (Markdown)? */
5253
.infobox > p {
5354
@apply text-14 mt-0;
54-
}
55+
}
5556

5657
.infobox > .md-p {
5758
@apply mt-0;
5859
}
5960

60-
.infobox >p >a {
61+
.infobox > p > a {
6162
@apply underline text-current;
6263
}
63-
.infobox >p >a:hover {
64+
.infobox > p > a:hover {
6465
@apply no-underline text-current text-gray-70;
6566
}
67+
68+
.word-keep-all {
69+
word-break: keep-all;
70+
}

0 commit comments

Comments
 (0)