Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add keep-all (partially) #5

Merged
merged 1 commit into from Jan 26, 2023
Merged

Add keep-all (partially) #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Markdown.mjs
View file
Open in desktop
Expand Up @@ -17,7 +17,7 @@ import * as ParseNumericRangeJs from "../ffi/parse-numeric-range.js";
function Markdown$P(Props) {
var children = Props.children;
return React.createElement("p", {
className: "md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"
className: "md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16 word-keep-all"
}, children);
}

Expand Down
4 changes: 3 additions & 1 deletion src/components/Markdown.res
View file
Open in desktop
Expand Up @@ -4,7 +4,9 @@
module P = {
@react.component
let make = (~children) =>
<p className="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"> children </p>
<p className="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16 word-keep-all">
children
</p>
}

// Used for hero like introduction text in
Expand Down
28 changes: 15 additions & 13 deletions src/layouts/LandingPageLayout.mjs
View file
Open in desktop
Expand Up @@ -19,14 +19,14 @@ import * as ImageGallery from "../components/ImageGallery.mjs";

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

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

function LandingPageLayout$QuickInstall(Props) {
return React.createElement("section", {
className: "my-32 sm:px-4 sm:flex sm:justify-center"
className: "my-32 sm:px-4 sm:flex sm:justify-center word-keep-all"
}, React.createElement("div", {
className: "max-w-1060 flex flex-col w-full px-5 md:px-8 lg:px-8 lg:box-content "
}, React.createElement("div", {
Expand All @@ -210,11 +210,11 @@ function LandingPageLayout$QuickInstall(Props) {
className: "relative z-1 space-y-12 text-gray-80 font-semibold text-24 md:text-32 leading-2"
}, React.createElement("span", {
className: "bg-fire-5 rounded-lg border border-fire-10 p-1 "
}, "JavaScript의 모든 기능을"), React.createElement("br", undefined), "\`any(어떤)\` 타입으로 쓰던", React.createElement("br", undefined), "걱정 없이 강력한 타입의 언어로 누리세요.")), React.createElement("div", {
}, "JavaScript의 모든 기능"), "을 \`any(어떤)\` 타입으로 쓰던 걱정 없이 강력한 타입의 언어로 누리세요.")), React.createElement("div", {
className: "w-full mt-12 md:flex flex-col lg:flex-row md:justify-between "
}, React.createElement("p", {
className: "relative z-1 text-gray-80 font-semibold text-24 md:text-32 leading-2 max-w-[32rem]"
}, "ReScript는 UI 및 UX가 우수한", React.createElement("br", undefined), "미션 크리티컬한 제품을", React.createElement("br", undefined), "출시하고 관리하는 데 사용됩니다."), React.createElement("div", {
}, "ReScript는 UI 및 UX가 우수한 미션 크리티컬한 제품을 출시하고 관리하는 데 사용됩니다."), React.createElement("div", {
className: "mt-16 lg:mt-0 self-end",
style: {
maxWidth: "25rem"
Expand All @@ -234,7 +234,7 @@ function LandingPageLayout$MainUSP$Item(Props) {
var polyPointsMobile = polygonDirection ? "0,100 100,100 100,70 0,80" : "0,100 100,100 100,78 0,72";
var polyColor = polygonDirection ? "text-fire-30" : "text-fire";
return React.createElement("div", {
className: "relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden"
className: "relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden word-keep-all"
}, React.createElement("div", {
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"
}, React.createElement("div", {
Expand Down Expand Up @@ -323,7 +323,7 @@ var item3 = React.createElement(LandingPageLayout$MainUSP$Item, {
caption: "매끄럽게 진행되는 인터그레이션",
title: React.createElement(React.Fragment, undefined, React.createElement("span", {
className: "text-orange-dark"
}, "JS에 친숙한 생태계를"), React.createElement("br", undefined), "바로 사용해보세요."),
}, "JS에 친숙한 생태계"), React.createElement("br", undefined), "를 바로 사용해보세요."),
media: React.createElement("video", {
className: "rounded-lg",
controls: true,
Expand All @@ -346,7 +346,7 @@ function LandingPageLayout$MainUSP(Props) {

function LandingPageLayout$OtherSellingPoints(Props) {
return React.createElement("section", {
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 "
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"
}, React.createElement("div", {
className: "max-w-1060 grid grid-cols-4 md:grid-cols-10 grid-rows-2 gap-8"
}, React.createElement("div", {
Expand Down Expand Up @@ -435,7 +435,9 @@ var cards = [
},
{
imgSrc: "/static/ic_manual@2x.png",
title: "점진적으로 ReScript 적용하기",
title: React.createElement(React.Fragment, undefined, React.createElement("div", {
className: "word-keep-all"
}, "점진적으로 ReScript 적용하기")),
descr: "현 프로젝트에서 ReScript 사용을 시작하는 방법에 대해 배워보세요. 전부를 이해할 필요는 없습니다. 먼저 사용해 보세요!",
href: "/docs/manual/latest/installation#integrate-into-an-existing-js-project"
},
Expand Down Expand Up @@ -472,7 +474,7 @@ function LandingPageLayout$CuratedResources(Props) {
}, "설명 가이드와 문서들"), React.createElement("hr", {
className: "bg-gray-80 h-px border-0 relative top-[-12px]"
})), React.createElement("div", undefined, React.createElement("div", {
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"
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"
}, Belt_Array.mapWithIndex(cards, (function (i, card) {
return React.createElement(Next.Link.make, {
href: card.href,
Expand Down Expand Up @@ -507,7 +509,7 @@ function LandingPageLayout$CuratedResources(Props) {
}), React.createElement("h5", {
className: "text-gray-10 hl-4 mt-32 h-12"
}, card.title), React.createElement("div", {
className: "text-gray-40 mt-4 body-sm"
className: "text-gray-40 mt-4 body-sm word-keep-all"
}, card.descr));
})))));
}
Expand Down
45 changes: 21 additions & 24 deletions src/layouts/LandingPageLayout.res
View file
Open in desktop
@@ -1,7 +1,7 @@
module Intro = {
@react.component
let make = () => {
<section className="flex justify-center">
<section className="flex justify-center word-keep-all">
<div className="max-w-1060 flex flex-col items-center px-5 sm:px-8 lg:box-content">
<h1 className="hl-title text-center max-w-[53rem]">
{React.string(`빠르고, 단순하고,`)}
Expand All @@ -11,9 +11,7 @@ module Intro = {
{React.string(`미래에서 온 JavaScript`)}
</h1>
<h2 className="body-lg text-center text-gray-60 my-4 max-w-[40rem]">
{React.string(`ReScript는 강력한 타입의 언어로 효율적이며 가독성 높은 JavaScript로 컴파일`)}
<br />
{React.string(`됩니다. 함께 제공되는 번개처럼 빠른 툴체인을 통해 어떠한 크기의 코드베이스도 컴파일해낼 수 있습니다.`)}
{React.string(`ReScript는 강력한 타입의 언어로 효율적이며 가독성 높은 JavaScript로 컴파일됩니다. 함께 제공되는 번개처럼 빠른 툴체인을 통해 어떠한 크기의 코드베이스도 컴파일해낼 수 있습니다.`)}
</h2>
<div className="mt-4 mb-2">
<Next.Link href="/docs/manual/latest/installation" passHref={true}>
Expand Down Expand Up @@ -70,7 +68,7 @@ exports.Button = Button;`,
let (example, _setExample) = React.useState(_ => examples->Js.Array2.unsafe_get(0))

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

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

<div
className="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden">
className="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden word-keep-all">
// Content
<div
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">
Expand Down Expand Up @@ -415,9 +406,9 @@ module MainUSP = {
<Item
caption="매끄럽게 진행되는 인터그레이션"
title={<>
<span className="text-orange-dark"> {React.string(`JS에 친숙한 생태계를`)} </span>
<span className="text-orange-dark"> {React.string(`JS에 친숙한 생태계`)} </span>
<br />
{React.string(`바로 사용해보세요.`)}
{React.string(`를 바로 사용해보세요.`)}
</>}
media={<video
className="rounded-lg" controls={true} poster={"/static/lp/interop-example-preview.jpg"}>
Expand Down Expand Up @@ -447,7 +438,7 @@ module OtherSellingPoints = {
let make = () => {
<section
className="flex justify-center w-full bg-gray-90 border-t border-gray-80
px-4 sm:px-8 lg:px-16 pt-24 pb-20 ">
px-4 sm:px-8 lg:px-16 pt-24 pb-20 word-keep-all">
//defines the grid
<div className="max-w-1060 grid grid-cols-4 md:grid-cols-10 grid-rows-2 gap-8">
//Large Item
Expand Down Expand Up @@ -561,7 +552,11 @@ module CuratedResources = {
},
{
imgSrc: "/static/ic_manual@2x.png",
title: React.string("점진적으로 ReScript 적용하기"),
title: <>
<div className="word-keep-all">
{React.string("점진적으로 ReScript 적용하기")}
</div>
</>,
descr: "현 프로젝트에서 ReScript 사용을 시작하는 방법에 대해 배워보세요. 전부를 이해할 필요는 없습니다. 먼저 사용해 보세요!",
href: "/docs/manual/latest/installation#integrate-into-an-existing-js-project",
},
Expand Down Expand Up @@ -630,7 +625,7 @@ module CuratedResources = {
//container for guides
<div>
<div
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">
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">
{cards
->Belt.Array.mapWithIndex((i, card) =>
<Next.Link key={Belt.Int.toString(i)} href={card.href}>
Expand Down Expand Up @@ -662,7 +657,9 @@ module CuratedResources = {
className="hover:bg-gray-80 bg-gray-90 px-5 pb-8 relative rounded-xl min-w-[200px]">
<img className="h-12 absolute mt-5" src=card.imgSrc />
<h5 className="text-gray-10 hl-4 mt-32 h-12"> {card.title} </h5>
<div className="text-gray-40 mt-4 body-sm"> {React.string(card.descr)} </div>
<div className="text-gray-40 mt-4 body-sm word-keep-all">
{React.string(card.descr)}
</div>
</a>
)
->React.array}
Expand Down
19 changes: 12 additions & 7 deletions styles/_markdown.css
View file
Open in desktop
@@ -1,12 +1,13 @@
/* Markdown related stuff */
/* Sometimes we cannot circumvent the cascade, especially for nested lists */

.md-ul, .md-ol {
.md-ul,
.md-ol {
@apply mb-8;
}

.md-ul ul {
@apply mb-0 ;
@apply mb-0;
}

.md-ol > li {
Expand All @@ -22,12 +23,12 @@
@apply absolute font-semibold;
}

.md-ul > .md-li::before{
.md-ul > .md-li::before {
content: "•";
@apply absolute;
}

.md-ul > .md-li > ul > li::before{
.md-ul > .md-li > ul > li::before {
content: "—";
@apply absolute;
}
Expand All @@ -51,15 +52,19 @@
/* INFOBOX (Markdown.res) Find a better solution for <p> text inside of Info-Box (Markdown)? */
.infobox > p {
@apply text-14 mt-0;
}
}

.infobox > .md-p {
@apply mt-0;
}

.infobox >p >a {
.infobox > p > a {
@apply underline text-current;
}
.infobox >p >a:hover {
.infobox > p > a:hover {
@apply no-underline text-current text-gray-70;
}

.word-keep-all {
word-break: keep-all;
}