git.iko.soy/rowtype-yoga/psfp
on master help sign in
Paragaraphs
commita333b88a489ffe5a3ff8862ac964d539fb675141 authorMark Eibes <mark.eibes@gmail.com> dateSun 3 Jan 2021, 21:53 (6 years ago) parent74e7b2d
15 files changed+1378−1154
blog/.storybook/preview.js+1 blog/.vscode/settings.json+1−1 blog/package-lock.json+28−9 blog/package.json+2 blog/src/components/PSLayout.js → blog/src/components/MDXProvider.js blog/src/components/MDXProvider.purs+223 blog/src/components/PSLayout.purs+91−259 blog/src/components/fonts.js+5 blog/src/components/layout.js+7−6 blog/src/pages/cast.mdx+3 blog/src/purescript/Typography/SmallCaps.purs+22 blog/src/stories/PSLayout.purs+36−19 components/src/Yoga/CompileEditor/Component.purs+141−65 components/src/Yoga/Monaco/Editor.js+811−792 components/src/Yoga/Monaco/Editor.purs+7−3
blog/.storybook/preview.js+1
@@ -1,3 +1,4 @@
1+require("../src/components/fonts")
12export const parameters = {
23 layout: 'fullscreen'
34}
blog/.vscode/settings.json+1−1
@@ -1,5 +1,5 @@
11{
22 "workbench.preferredDarkColorTheme": "Base2Tone_HeathDark",
3− "workbench.colorTheme": "Horizon",
3+ "workbench.colorTheme": "Halcyon",
44 "editor.formatOnSave": true
55}
blog/package-lock.json+28−9
@@ -10,6 +10,8 @@
1010 "license": "MIT",
1111 "dependencies": {
1212 "@emotion/core": "^10.0.28",
13+ "@fontsource/cormorant-garamond": "^4.1.0",
14+ "@fontsource/inter": "^4.1.0",
1315 "@material-ui/styles": "^4.9.0",
1416 "@mdx-js/mdx": "^1.1.5",
1517 "@mdx-js/react": "^1.1.5",
@@ -1722,6 +1724,16 @@
17221724 "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
17231725 "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
17241726 },
1727+ "node_modules/@fontsource/cormorant-garamond": {
1728+ "version": "4.1.0",
1729+ "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",
1730+ "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="
1731+ },
1732+ "node_modules/@fontsource/inter": {
1733+ "version": "4.1.0",
1734+ "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",
1735+ "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="
1736+ },
17251737 "node_modules/@graphql-tools/batch-execute": {
17261738 "version": "7.0.0",
17271739 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
@@ -19137,12 +19149,9 @@
1913719149 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
1913819150 },
1913919151 "node_modules/ini": {
19140− "version": "1.3.5",
19141− "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
19142− "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
19143− "engines": {
19144− "node": "*"
19145− }
19152+ "version": "1.3.8",
19153+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
19154+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
1914619155 },
1914719156 "node_modules/inline-style-parser": {
1914819157 "version": "0.1.1",
@@ -35230,6 +35239,16 @@
3523035239 }
3523135240 }
3523235241 },
35242+ "@fontsource/cormorant-garamond": {
35243+ "version": "4.1.0",
35244+ "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",
35245+ "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="
35246+ },
35247+ "@fontsource/inter": {
35248+ "version": "4.1.0",
35249+ "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",
35250+ "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="
35251+ },
3523335252 "@graphql-tools/batch-execute": {
3523435253 "version": "7.0.0",
3523535254 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
@@ -49346,9 +49365,9 @@
4934649365 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
4934749366 },
4934849367 "ini": {
49349− "version": "1.3.5",
49350− "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
49351− "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
49368+ "version": "1.3.8",
49369+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
49370+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
4935249371 },
4935349372 "inline-style-parser": {
4935449373 "version": "0.1.1",
blog/package.json+2
@@ -5,6 +5,8 @@
55 "author": "Mark Eibes",
66 "dependencies": {
77 "@emotion/core": "^10.0.28",
8+ "@fontsource/cormorant-garamond": "^4.1.0",
9+ "@fontsource/inter": "^4.1.0",
810 "@material-ui/styles": "^4.9.0",
911 "@mdx-js/mdx": "^1.1.5",
1012 "@mdx-js/react": "^1.1.5",
blog/src/components/PSLayout.js → blog/src/components/MDXProvider.jsrenamed

The content is the same.

blog/src/components/MDXProvider.pursnew file+223
@@ -0,0 +1,223 @@
1+module MDXProvider where
2+
3+import Prelude
4+import Data.Array (intercalate)
5+import Data.Array as Array
6+import Data.Either (Either(..))
7+import Data.Function.Uncurried (mkFn2)
8+import Data.Maybe (Maybe(..), fromMaybe, isJust)
9+import Data.Nullable (Nullable)
10+import Data.Nullable as Nullable
11+import Data.String as String
12+import Data.Traversable (mapAccumL)
13+import Data.Tuple.Nested ((/\))
14+import Effect (Effect)
15+import Effect.Aff (launchAff_)
16+import Effect.Class (liftEffect)
17+import Effect.Class.Console (log)
18+import Effect.Unsafe (unsafePerformEffect)
19+import Framer.Motion as M
20+import MDX (MDX(..))
21+import Milkis.Impl (FetchImpl)
22+import React.Basic (JSX, ReactComponent)
23+import React.Basic.DOM (Props_h1, Props_h2, Props_h3, Props_h4, Props_p, Props_a, unsafeCreateDOMComponent)
24+import React.Basic.DOM as R
25+import React.Basic.Emotion as E
26+import React.Basic.Hooks (ReactChildren, element, memo, reactChildrenFromArray, reactChildrenToArray, reactComponent, reactComponentWithChildren, useState)
27+import React.Basic.Hooks as React
28+import Shared.Models.Body (CompileResult)
29+import Typography.SmallCaps (mkSmallCaps)
30+import Unsafe.Coerce (unsafeCoerce)
31+import Yoga.CompileEditor.Component (mkCompileEditor)
32+import Yoga.Compiler.Api (apiCompiler)
33+import Yoga.Compiler.Types (Compiler)
34+import Yoga.FillInTheGaps.Component as FillInTheGaps
35+import Yoga.FillInTheGaps.Logic (Segment, findResult, parseSegments, toCode)
36+import Yoga.Helpers ((?||))
37+import Yoga as Y
38+
39+type PreProps
40+ = { children ∷
41+ Nullable
42+ { props ∷
43+ Nullable
44+ { mdxType ∷ Nullable String
45+ , children ∷ Nullable String
46+ , className ∷ Nullable String
47+ }
48+ }
49+ }
50+
51+isQuiz ∷ MDX -> Boolean
52+isQuiz (MDX a) =
53+ a.props.mdxType == "pre"
54+ && ((unsafeCoerce a).props.children.props.className == "language-purescript")
55+ && ((unsafeCoerce a).props.children.props.mdxType == "code")
56+ && ((unsafeCoerce a).props.children.props.children # parseSegments # isJust)
57+
58+type MdxProviderProps
59+ = { children ∷ ReactChildren MDX
60+ }
61+
62+mkLiveMdxProviderComponent ∷ FetchImpl -> Effect (ReactComponent MdxProviderProps)
63+mkLiveMdxProviderComponent fetchImpl = mkMdxProviderComponent (apiCompiler fetchImpl)
64+
65+mkMdxProviderComponent ∷
66+ ∀ r.
67+ { | Compiler r } ->
68+ Effect (ReactComponent MdxProviderProps)
69+mkMdxProviderComponent compiler = do
70+ editor <- memo $ mkCompileEditor compiler
71+ quiz <- memo $ mkQuiz compiler
72+ smallCaps <- mkSmallCaps
73+ reactComponentWithChildren "MDXProviderComponent" do
74+ \{ children } -> React.do
75+ visibleUntil /\ updateVisible <- useState 1
76+ let
77+ onFailure title kids = log "Oopsie daisy"
78+
79+ onSuccess = updateVisible (_ + one)
80+
81+ mapVisible ∷ Int -> MDX -> _
82+ mapVisible i kid =
83+ { accum: i + if isQuiz kid then one else zero
84+ , value: if (i < visibleUntil) then Just kid else Nothing
85+ }
86+
87+ visibleKids ∷ Array MDX
88+ visibleKids =
89+ reactChildrenToArray children
90+ # mapAccumL mapVisible zero
91+ # _.value
92+ # Array.catMaybes
93+
94+ contentMDX ∷ ReactChildren MDX
95+ contentMDX = reactChildrenFromArray visibleKids
96+
97+ paragraph parChildren =
98+ E.element M.p
99+ ( { layout: M.layout true
100+ , css:
101+ E.css
102+ { fontFamily: E.str "Cormorant Garamond"
103+ , fontSize: E.str "min(calc(var(--s0) + 4vw), var(--s1))"
104+ , "-ms-hyphens": E.str "auto"
105+ , "-webkit-hyphens": E.str "auto"
106+ , hyphens: E.str "auto"
107+ }
108+ , className: "blog-p"
109+ , children: parChildren
110+ }
111+ )
112+ let
113+ mdxComponents =
114+ { "Sc":
115+ \(props :: { children :: String }) ->
116+ smallCaps props.children
117+ , h1:
118+ \(props ∷ { | M.MotionProps Props_h1 }) ->
119+ React.element M.h1 (props { layout = M.layout true })
120+ , h2:
121+ \(props ∷ { | M.MotionProps Props_h2 }) ->
122+ React.element M.h2 (props { layout = M.layout true })
123+ , h3:
124+ \(props ∷ { | M.MotionProps Props_h3 }) ->
125+ React.element M.h3 (props { layout = M.layout true })
126+ , h4:
127+ \(props ∷ { | M.MotionProps Props_h4 }) ->
128+ React.element M.h4 (props { layout = M.layout true })
129+ , hr: (const $ R.hr {})
130+ , p:
131+ \(props ∷ { children :: Array JSX }) ->
132+ paragraph props.children
133+ , inlineCode:
134+ \props -> do
135+ R.span { children: props.children }
136+ , pre:
137+ mkFn2 \(props ∷ PreProps) other -> do
138+ let
139+ childrenQ = Nullable.toMaybe props.children
140+
141+ propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ
142+
143+ mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ
144+
145+ childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ
146+
147+ classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ
148+
149+ isCode = fromMaybe false (mdxTypeQ <#> eq "code")
150+
151+ codeQ = childrenQ2
152+
153+ height =
154+ (fromMaybe 200 >>> show >>> (_ <> "px")) do
155+ code <- codeQ
156+ pure
157+ ( String.split (String.Pattern "\n") code
158+ # Array.length
159+ # \x -> (x * 12) + 100
160+ )
161+
162+ language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
163+
164+ segmentsQ = parseSegments (codeQ ?|| "")
165+ case isCode, language, segmentsQ of
166+ true, "purescript", Just initialSegments -> element quiz { initialSegments, onFailure, onSuccess }
167+ true, _, _ ->
168+ element editor
169+ { initialCode: fromMaybe "" codeQ
170+ , height
171+ , language
172+ }
173+ false, _, _ -> element (unsafePerformEffect $ unsafeCreateDOMComponent "pre") props
174+ }
175+ pure
176+ $ element mdxProvider
177+ { children: contentMDX
178+ , components: mdxComponents
179+ }
180+
181+type QuizProps
182+ = { initialSegments ∷ Array (Array Segment)
183+ , onFailure ∷ String -> Array JSX -> Effect Unit
184+ , onSuccess ∷ Effect Unit
185+ }
186+
187+mkQuiz ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent QuizProps)
188+mkQuiz compiler = do
189+ fillInTheGaps <- FillInTheGaps.makeComponent
190+ reactComponent "Quiz" \({ initialSegments, onFailure, onSuccess } ∷ QuizProps) -> React.do
191+ segments /\ updateSegments <- useState initialSegments
192+ solvedWith /\ updateSolvedWith <- useState Nothing
193+ pure
194+ $ element fillInTheGaps
195+ { segments
196+ , run:
197+ launchAff_ do
198+ let
199+ code = toCode segments
200+ result <- compiler.compileAndRun { code }
201+ liftEffect case result of
202+ Right r
203+ | String.stripSuffix (String.Pattern "\n") r.stdout == (findResult $ join segments) -> do
204+ updateSolvedWith (const $ String.stripSuffix (String.Pattern "\n") r.stdout)
205+ onSuccess
206+ Right r
207+ | r.stdout /= "\n" -> onFailure "Oh shit!" [ R.text r.stdout ]
208+ Right r -> onFailure "Oh shit!" [ R.text r.stderr ]
209+ Left (cr ∷ CompileResult) -> onFailure "Oh shit!" [ R.text (intercalate ", " (cr.result <#> _.message)) ]
210+ , updateSegments:
211+ \update -> do
212+ let
213+ updated = update segments
214+ unless (segments == updated) do updateSegments (const updated)
215+ , solvedWith
216+ }
217+
218+foreign import mdxProvider ∷
219+ ∀ r.
220+ ReactComponent
221+ { components ∷ { | r }
222+ , children ∷ ReactChildren MDX
223+ }
blog/src/components/PSLayout.purs+91−259
@@ -2,30 +2,17 @@ module PSLayout where
22
33import Prelude
44import Color as Color
5−import Data.Array (intercalate)
6−import Data.Array as Array
7−import Data.Either (Either(..))
8−import Data.Function.Uncurried (mkFn2)
9−import Data.Maybe (Maybe(..), fromMaybe, isJust)
10−import Data.Nullable (Nullable)
11−import Data.Nullable as Nullable
12−import Data.String as String
13−import Data.Traversable (mapAccumL)
5+import Data.Maybe (Maybe(..), fromMaybe)
146import Data.Tuple.Nested ((/\))
157import Effect (Effect)
16−import Effect.Aff (launchAff_)
17−import Effect.Class (liftEffect)
18−import Effect.Unsafe (unsafePerformEffect)
19−import MDX (MDX(..))
8+import MDX (MDX)
9+import MDXProvider (MdxProviderProps)
2010import Milkis.Impl (FetchImpl)
21−import React.Basic (JSX, ReactComponent, fragment)
22−import React.Basic.DOM (Props_h1, Props_h2, Props_h3, Props_p, unsafeCreateDOMComponent)
11+import React.Basic (ReactComponent)
2312import React.Basic.DOM as R
2413import React.Basic.Emotion as Emotion
25−import React.Basic.Hooks (ReactChildren, element, memo, mkReducer, reactChildrenFromArray, reactChildrenToArray, reactComponent, reactComponentWithChildren, useReducer, useState, useState')
14+import React.Basic.Hooks (ReactChildren, element, reactComponentWithChildren, useState')
2615import React.Basic.Hooks as React
27−import Shared.Models.Body (CompileResult)
28−import Unsafe.Coerce (unsafeCoerce)
2916import Yoga ((/>), (</), (</*))
3017import Yoga as Y
3118import Yoga.Block as Block
@@ -35,31 +22,13 @@ import Yoga.Block.Container.Style (DarkOrLightMode(..), colour)
3522import Yoga.Block.Icon.SVG as Icon
3623import Yoga.Block.Internal (_0)
3724import Yoga.Block.Modal as Modal
38−import Yoga.CompileEditor.Component (mkCompileEditor)
39−import Yoga.Compiler.Api (apiCompiler)
40−import Yoga.Compiler.Types (Compiler)
41−import Yoga.FillInTheGaps.Component as FillInTheGaps
42−import Yoga.FillInTheGaps.Logic (Segment, findResult, parseSegments, toCode)
43−import Yoga.Helpers ((?||))
4425
45−type SiteQueryResult =
46− { siteMetadata ∷
47− { title ∷ String
48− , menuLinks ∷ Array { name ∷ String, link ∷ String }
26+type SiteQueryResult
27+ = { siteMetadata ∷
28+ { title ∷ String
29+ , menuLinks ∷ Array { name ∷ String, link ∷ String }
30+ }
4931 }
50− }
51−
52−type PreProps =
53− { children ∷
54− Nullable
55− { props ∷
56− Nullable
57− { mdxType ∷ Nullable String
58− , children ∷ Nullable String
59− , className ∷ Nullable String
60− }
61− }
62− }
6332
6433data ShowModal
6534 = ShowModal Modal.Props
@@ -75,13 +44,8 @@ mkLayout ∷
7544 }
7645 )
7746mkLayout fetchImpl = do
78− reducer <-
79− mkReducer case _, _ of
80− _, ShowModal props -> Just props
81− _, HideModal -> Nothing
8247 -- mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)
8348 reactComponentWithChildren "MDXLayout" \{ children, siteInfo, mdxProviderComponent } -> React.do
84− (maybeModalProps ∷ Maybe Modal.Props) /\ dispatch <- useReducer Nothing reducer
8549 darkOrLightMode /\ setDarkOrLightMode <- useState' Nothing
8650 let
8751 maybeTogglePosition =
@@ -89,44 +53,46 @@ mkLayout fetchImpl = do
8953 <#> case _ of
9054 DarkMode -> ToggleIsRight
9155 LightMode -> ToggleIsLeft
56+
9257 darkThemeToggle =
9358 Block.toggle
9459 Y.</> do
9560 { className: "dark-light-toggle"
9661 , css:
97− Emotion.css
98− { marginRight: Emotion.str "0"
99− , marginLeft: Emotion.str "auto"
100− }
62+ Emotion.css
63+ { marginRight: Emotion.str "0"
64+ , marginLeft: Emotion.str "auto"
65+ }
10166 , setTogglePosition:
102− case _ of
103− ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
104− ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
67+ case _ of
68+ ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
69+ ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
10570 , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition
10671 , left:
107− Block.icon
108− Y.</> do
109− { icon: Icon.moon
110− , stroke: Emotion.str "#eef"
111− }
72+ Block.icon
73+ Y.</> do
74+ { icon: Icon.moon
75+ , stroke: Emotion.str "#eef"
76+ }
11277 , right:
113− Block.icon
114− Y.</> do
115− { icon: Icon.sun
116− , stroke: Emotion.str "yellow"
117− }
78+ Block.icon
79+ Y.</> do
80+ { icon: Icon.sun
81+ , stroke: Emotion.str "yellow"
82+ }
11883 , backgroundLeft:
119− Color.hsl 205.0 1.0 0.80
84+ Color.hsl 205.0 1.0 0.80
12085 , backgroundRight:
121− Color.hsl 250.0 1.0 0.1
86+ Color.hsl 250.0 1.0 0.1
12287 }
88+
12389 header =
12490 Block.box
12591 </ { className: "top-box"
12692 , css:
127− Emotion.css
128− { background: Emotion.str colour.backgroundLayer5
129− }
93+ Emotion.css
94+ { background: Emotion.str colour.backgroundLayer5
95+ }
13096 }
13197 /> [ Block.cluster
13298 </* { justify: "space-between"
@@ -139,13 +105,13 @@ mkLayout fetchImpl = do
139105 R.span'
140106 { className: "blog-header"
141107 , css:
142− Emotion.css
143− { fontSize: Emotion.str "min(var(--s3), calc(var(--s1) + 1vw))"
144− , textTransform: Emotion.str "uppercase"
145− , letterSpacing: Emotion.str "calc(min(var(--s0) + 3vw), var(--s2) * -1.7)"
146− , fontWeight: Emotion.str "300"
147− , color: Emotion.str colour.text
148− }
108+ Emotion.css
109+ { fontSize: Emotion.str "min(var(--s3), calc(var(--s1) + 1vw))"
110+ , textTransform: Emotion.str "uppercase"
111+ , letterSpacing: Emotion.str "calc(min(var(--s0) + 3vw), var(--s2) * -1.7)"
112+ , fontWeight: Emotion.str "300"
113+ , color: Emotion.str colour.text
114+ }
149115 }
150116 [ R.text siteInfo.siteMetadata.title ]
151117 , darkThemeToggle
@@ -155,191 +121,57 @@ mkLayout fetchImpl = do
155121 $ element Container.component
156122 { themeVariant: darkOrLightMode
157123 , content:
158− Y.styled Block.stack
159− { className: "blog-content"
160− , space: _0
161− , splitAfter: 2
162− , css:
163− Emotion.css
164− { minHeight: Emotion.vh 100.0
165− , background: Emotion.str colour.background
166− , borderRadius: Emotion.str "0 var(--s1) var(--s1) 0"
167− }
168− }
169− [ header
170− , Block.centre
171− </* { className: "centre"
172− , padding: _0
173− , gutters: _0
174− , css:
175− Emotion.css
176− { maxWidth: Emotion.ch 90.0
177− }
178− }
179− /> [ Block.box
180− </ do
181− { padding: Emotion.px 16
182− , css: Emotion.css { background: Emotion.str colour.background }
183− }
184− /> [ element mdxProviderComponent
185− { children
186− , siteInfo
187− , showModal: dispatch <<< ShowModal
188− , hideModal: dispatch HideModal
189− , modalOpen: isJust maybeModalProps
190− }
191− ]
192− ]
193− , Y.styled Block.box
194− { className: "blog-footer"
195− , css:
124+ Y.styled Block.stack
125+ { className: "blog-content"
126+ , space: _0
127+ , splitAfter: 2
128+ , css:
196129 Emotion.css
197− { background: Emotion.str colour.backgroundLayer1
198− , borderTop: Emotion.str colour.backgroundLayer3
199− , color: Emotion.str colour.text
130+ { minHeight: Emotion.vh 100.0
131+ , background: Emotion.str colour.backgroundLayer5
132+ , borderRadius: Emotion.str "0 var(--s1) var(--s1) 0"
200133 }
201− }
202− [ R.text "Mark Eibes" ]
203− ]
204− }
205−
206−isQuiz ∷ MDX -> Boolean
207−isQuiz (MDX a) =
208− a.props.mdxType == "pre"
209− && ((unsafeCoerce a).props.children.props.className == "language-purescript")
210− && ((unsafeCoerce a).props.children.props.mdxType == "code")
211− && ((unsafeCoerce a).props.children.props.children # parseSegments # isJust)
212−
213−type MdxProviderProps =
214− { children ∷ ReactChildren MDX
215− , siteInfo ∷ SiteQueryResult
216− , showModal ∷ Modal.Props -> Effect Unit
217− , hideModal ∷ Effect Unit
218− , modalOpen ∷ Boolean
219− }
220−
221−mkLiveMdxProviderComponent ∷ FetchImpl -> Effect (ReactComponent MdxProviderProps)
222−mkLiveMdxProviderComponent fetchImpl = mkMdxProviderComponent (apiCompiler fetchImpl)
223−
224−mkMdxProviderComponent ∷
225− ∀ r.
226− { | Compiler r } ->
227− Effect (ReactComponent MdxProviderProps)
228−mkMdxProviderComponent compiler = do
229− editor <- memo $ mkCompileEditor compiler
230− quiz <- memo $ mkQuiz compiler
231− reactComponentWithChildren "MDXProviderComponent" do
232− \{ children, siteInfo, showModal, hideModal, modalOpen } -> React.do
233− visibleUntil /\ updateVisible <- useState 1
234− let
235− onFailure title kids =
236− showModal
237− { content: fragment kids
238− , isOpen: modalOpen
239− , setIsOpen: if _ then pure unit else hideModal
240− }
241− onSuccess = updateVisible (_ + one)
242− mapVisible ∷ Int -> MDX -> _
243− mapVisible i kid =
244− { accum: i + if isQuiz kid then one else zero
245− , value: if (i < visibleUntil) then Just kid else Nothing
246− }
247− visibleKids ∷ Array MDX
248− visibleKids =
249− reactChildrenToArray children
250− # mapAccumL mapVisible zero
251− # _.value
252− # Array.catMaybes
253− contentMDX ∷ ReactChildren MDX
254− contentMDX = reactChildrenFromArray visibleKids
255− let
256− mdxComponents =
257− { h1:
258− \(props ∷ { | Props_h1 }) -> R.h2 props
259− , h2:
260− \(props ∷ { | Props_h2 }) -> R.h3 props
261− , h3:
262− \(props ∷ { | Props_h3 }) -> R.h4 props
263− , hr: (const $ R.hr {})
264− , p:
265− \(props ∷ { | Props_p }) -> R.p props
266− , inlineCode:
267− \props -> do
268− R.span { children: props.children }
269− , pre:
270− mkFn2 \(props ∷ PreProps) other -> do
271− let
272− childrenQ = Nullable.toMaybe props.children
273− propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ
274− mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ
275− childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ
276− classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ
277− isCode = fromMaybe false (mdxTypeQ <#> eq "code")
278− codeQ = childrenQ2
279− height =
280− (fromMaybe 200 >>> show >>> (_ <> "px")) do
281− code <- codeQ
282− pure
283− ( String.split (String.Pattern "\n") code
284− # Array.length
285− # \x -> (x * 12) + 100
286− )
287− language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
288− segmentsQ = parseSegments (codeQ ?|| "")
289− case isCode, language, segmentsQ of
290− true, "purescript", Just initialSegments -> element quiz { initialSegments, onFailure, onSuccess }
291− true, _, _ ->
292− element editor
293− { initialCode: fromMaybe "" codeQ
294− , height
295− , language
134+ }
135+ [ header
136+ , Block.centre
137+ </* { className: "centre"
138+ , padding: _0
139+ , gutters: _0
140+ , css: Emotion.css { maxWidth: Emotion.ch 90.0 }
141+ }
142+ /> [ Block.box
143+ </ do
144+ { padding: Emotion.px 16
145+ , css:
146+ Emotion.css
147+ { "& > p:first-of-type:first-letter":
148+ Emotion.nested
149+ $ Emotion.css
150+ { fontSize: Emotion.var "--s4"
151+ , height: Emotion.var "--s3"
152+ , display: Emotion.str "block"
153+ , overflow: Emotion.str "hidden"
154+ , float: Emotion.str "left"
155+ , marginTop: Emotion.str "calc(var(--s0))"
156+ , lineHeight: Emotion.var "--s3"
157+ , marginRight: Emotion.var "--s-2"
158+ }
159+ }
160+ }
161+ /> [ element mdxProviderComponent
162+ { children
163+ }
164+ ]
165+ ]
166+ , Y.styled Block.box
167+ { className: "blog-footer"
168+ , css:
169+ Emotion.css
170+ { background: Emotion.str colour.backgroundLayer1
171+ , borderTop: Emotion.str $ "1px solid " <> colour.backgroundLayer3
172+ , color: Emotion.str colour.text
173+ }
296174 }
297− false, _, _ -> element (unsafePerformEffect $ unsafeCreateDOMComponent "pre") props
175+ [ R.text "Mark Eibes" ]
176+ ]
298177 }
299− pure
300− $ element mdxProvider
301− { children: contentMDX
302− , components: mdxComponents
303− }
304−
305−type QuizProps =
306− { initialSegments ∷ Array (Array Segment)
307− , onFailure ∷ String -> Array JSX -> Effect Unit
308− , onSuccess ∷ Effect Unit
309− }
310−
311−mkQuiz ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent QuizProps)
312−mkQuiz compiler = do
313− fillInTheGaps <- FillInTheGaps.makeComponent
314− reactComponent "Quiz" \({ initialSegments, onFailure, onSuccess } ∷ QuizProps) -> React.do
315− segments /\ updateSegments <- useState initialSegments
316− solvedWith /\ updateSolvedWith <- useState Nothing
317− pure
318− $ element fillInTheGaps
319− { segments
320− , run:
321− launchAff_ do
322− let code = toCode segments
323− result <- compiler.compileAndRun { code }
324− liftEffect case result of
325− Right r
326− | String.stripSuffix (String.Pattern "\n") r.stdout == (findResult $ join segments) -> do
327− updateSolvedWith (const $ String.stripSuffix (String.Pattern "\n") r.stdout)
328− onSuccess
329− Right r
330− | r.stdout /= "\n" -> onFailure "Oh shit!" [ R.text r.stdout ]
331− Right r -> onFailure "Oh shit!" [ R.text r.stderr ]
332− Left (cr ∷ CompileResult) -> onFailure "Oh shit!" [ R.text (intercalate ", " (cr.result <#> _.message)) ]
333− , updateSegments:
334− \update -> do
335− let updated = update segments
336− unless (segments == updated) do updateSegments (const updated)
337− , solvedWith
338− }
339−
340−foreign import mdxProvider ∷
341− ∀ r.
342− ReactComponent
343− { components ∷ { | r } -- TODO Don't lie
344− , children ∷ ReactChildren MDX
345− }
blog/src/components/fonts.jsnew file+5
@@ -0,0 +1,5 @@
1+// Fonts
2+import "@fontsource/cormorant-garamond/500.css"
3+import "@fontsource/cormorant-garamond/500-italic.css"
4+import "@fontsource/cormorant-garamond/700.css"
5+import "@fontsource/cormorant-garamond/700-italic.css"
blog/src/components/layout.js+7−6
@@ -1,13 +1,14 @@
11import React from "react";
2−import PropTypes from "prop-types";
32import { graphql, useStaticQuery } from "gatsby";
4−import { preToCodeBlock } from "mdx-utils";
5−const psLayout = require("../../output/PSLayout"); // [FIXME] use the next line
3+// Load
4+require("./fonts")
5+const psLayout = require("../../output/PSLayout")
6+const mdxProvider = require("../../output/MDXProvider")
67const fetch = typeof window !== "undefined" && window.fetch;
7−import Img from "gatsby-image";
8+
89
910const PSLayout = psLayout.mkLayout(fetch)();
10−const MdxProvider = psLayout.mkLiveMdxProviderComponent(fetch)()
11+const MdxProvider = mdxProvider.mkLiveMdxProviderComponent(fetch)()
1112
1213const query = graphql`
1314 query {
@@ -26,7 +27,7 @@ const query = graphql`
2627const Layout = ({ children }) => {
2728 const q = useStaticQuery(query);
2829 return (
29− <PSLayout siteInfo={q.site} mdxProviderComponent={mdxProvider}>
30+ <PSLayout siteInfo={q.site} mdxProviderComponent={MdxProvider}>
3031 {children}
3132 </PSLayout>
3233 );
blog/src/pages/cast.mdx+3
@@ -6,6 +6,9 @@ import SEO from '../components/seo'
66
77# The beginning
88
9+Welcome, my little friend.
10+I am telling *you* very explicitly that you should **stop** this.
11+
912## Hocus
1013
1114```purescript
blog/src/purescript/Typography/SmallCaps.pursnew file+22
@@ -0,0 +1,22 @@
1+module Typography.SmallCaps where
2+
3+import Prelude
4+import Effect (Effect)
5+import React.Basic.DOM as R
6+import React.Basic.Emotion as E
7+import React.Basic.Hooks (JSX)
8+import React.Basic.Hooks as React
9+import Yoga as Y
10+
11+mkSmallCaps :: Effect (String -> JSX)
12+mkSmallCaps = do
13+ React.component "SmallCaps" \text -> React.do
14+ pure
15+ $ Y.styled R.span'
16+ { className: "small-caps"
17+ , css:
18+ E.css
19+ { fontVariant: E.str "small-caps"
20+ }
21+ }
22+ [ R.text $ text ]
blog/src/stories/PSLayout.purs+36−19
@@ -5,14 +5,12 @@ import Data.Tuple.Nested ((/\))
55import Effect (Effect)
66import Effect.Aff (Aff)
77import Effect.Class (liftEffect)
8−import Effect.Class.Console as Console
9−import MDX (MDX(..), renderWithReact)
8+import MDX (MDX, renderWithReact)
9+import MDXProvider (MdxProviderProps, mkLiveMdxProviderComponent)
1010import Milkis as M
1111import Milkis.Impl.Window (windowFetch)
12−import PSLayout (MdxProviderProps)
13−import PSLayout (mkLayout, mkLiveMdxProviderComponent)
12+import PSLayout (mkLayout)
1413import React.Basic (JSX, ReactComponent, fragment)
15−import React.Basic.DOM as R
1614import React.Basic.Hooks (reactChildrenFromArray, reactComponent, reactComponentWithChildren)
1715import React.Basic.Hooks as React
1816import React.Basic.Hooks.Aff (useAff)
@@ -37,8 +35,10 @@ compileMDX body = do
3735example ∷ String
3836example =
3937 """
40−# Help me!
41−I am stuck in this shit
38+# Monad
39+
40+A<Sc>ccording to [Hippolytus](https://en.wikipedia.org/wiki/Hippolytus_of_Rome "Hippolytus of Rome")</Sc>, the worldview was inspired by the [Pythagoreans](https://en.wikipedia.org/wiki/Pythagoreanism "Pythagoreanism"), who called the first thing that came into existence the "monad", which begat (bore) the [dyad](https://en.wikipedia.org/wiki/Dyad_(Greek_philosophy) "Dyad (Greek philosophy)") (from the Greek word for two), which begat the [numbers](https://en.wikipedia.org/wiki/Number "Number"), which begat the [point](https://en.wikipedia.org/wiki/Point_(geometry) "Point (geometry)"), begetting [lines](https://en.wikipedia.org/wiki/Line_(geometry) "Line (geometry)") or [finiteness](https://en.wiktionary.org/wiki/finite "wikt:finite"), etc.<sup>[[2]](https://en.wikipedia.org/wiki/Monad_(philosophy)#cite_note-2)</sup> It meant [divinity](https://en.wikipedia.org/wiki/Divinity "Divinity"), the first being, or the totality of all beings, referring in [cosmogony](https://en.wikipedia.org/wiki/Cosmogony "Cosmogony") (creation theories) variously to source acting alone and/or an indivisible origin and [equivalent comparators](https://en.wikipedia.org/wiki/Abstraction_(philosophy) "Abstraction (philosophy)").^[[3]](https://en.wikipedia.org/wiki/Monad_(philosophy)#cite_note-3)
41+
4242no way is out
4343
4444```purescript
@@ -47,6 +47,23 @@ module You.Are.An where
4747asshole = "You"
4848```
4949
50+```purescript
51+--result 12
52+module Bla where
53+--start here
54+pigboy = "Piggy {-hi-} Pigster"
55+--end here
56+```
57+
58+```javascript
59+'use strict'
60+undefined = NaN || null
61+undefined = NaN || null
62+undefined = NaN || null
63+undefined = NaN || null
64+undefined = NaN || null
65+```
66+
5067This is particularly lovely.
5168I cannot recommend this party enough.
5269
@@ -63,25 +80,25 @@ landingPage = do
6380 reactComponent "Landing Page Story" \{} -> React.do
6481 mdx /\ setMdx <- React.useState' []
6582 useAff unit do
66− mdx <- compileMDX example
67− liftEffect $ setMdx mdx
83+ mdxCode <- compileMDX example
84+ liftEffect $ setMdx mdxCode
6885 pure
6986 $ React.element layout
7087 { children:
71− reactChildrenFromArray mdx
88+ reactChildrenFromArray mdx
7289 , mdxProviderComponent: mdxProvider
7390 , siteInfo:
74− { siteMetadata:
75− { menuLinks: []
76− , title: "Page"
91+ { siteMetadata:
92+ { menuLinks: []
93+ , title: "Page"
94+ }
7795 }
78− }
7996 }
8097 compo <- mkCompo
8198 pure $ React.element compo {}
8299 where
83− mkFakeMdxProvider ∷ Effect (ReactComponent MdxProviderProps)
84− mkFakeMdxProvider =
85− reactComponentWithChildren "Fake MDX Provider" \{ children } -> React.do
86− pure
87− $ fragment (unsafeCoerce children)
100+ mkFakeMdxProvider ∷ Effect (ReactComponent MdxProviderProps)
101+ mkFakeMdxProvider =
102+ reactComponentWithChildren "Fake MDX Provider" \{ children } -> React.do
103+ pure
104+ $ fragment (unsafeCoerce children)
components/src/Yoga/CompileEditor/Component.purs+141−65
@@ -1,113 +1,189 @@
11module Yoga.CompileEditor.Component where
22
33import Prelude hiding (add)
4−import CSS (JustifyContentValue(..), flexEnd)
54import Data.Array (intercalate)
65import Data.Either (Either(..))
76import Data.Foldable (for_)
8−import Data.Interpolate (i)
97import Data.Maybe (Maybe(..))
8+import Data.Monoid (guard)
109import Data.Tuple.Nested ((/\))
10+import Data.TwoOrMore (twoOrMore)
1111import Effect (Effect)
12−import Effect.Aff (launchAff_)
12+import Effect.Aff (Error, launchAff_, message, try)
1313import Effect.Class (liftEffect)
14−import JSS (jssClasses)
15−import React.Basic (ReactComponent)
14+import Framer.Motion as M
15+import React.Basic (JSX, ReactComponent)
16+import React.Basic.DOM (css)
1617import React.Basic.DOM as R
18+import React.Basic.Emotion as E
1719import React.Basic.Events (handler_)
18−import React.Basic.Helpers (jsx)
19−import React.Basic.Hooks (reactComponent, element, useState)
20+import React.Basic.Hooks (reactComponent, useState)
2021import React.Basic.Hooks as React
22+import Shared.Models.Body (CompileResult, RunResult)
23+import Yoga ((</>))
2124import Yoga as Y
2225import Yoga.Block as Block
2326import Yoga.Block.Atom.Button.Types as BT
2427import Yoga.Block.Container.Style (colour)
25−import Yoga.Card.Component (mkCard)
26−import Yoga.Cluster.Component as Cluster
2728import Yoga.Compiler.Types (Compiler)
2829import Yoga.Editor (getValue, mkEditor, setValue)
29−import Yoga.Stack.Component as Stack
30−import Yoga.Theme.Styles (makeStylesJSS)
3130
32−type Props =
33− { initialCode ∷ String, height ∷ String, language ∷ String }
31+type Props
32+ = { initialCode ∷ String, height ∷ String, language ∷ String }
3433
3534mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)
3635mkCompileEditor { compileAndRun } = do
3736 editor <- mkEditor
38− card <- mkCard
39− cluster <- Cluster.makeComponent
40− stack <- Stack.makeComponent
41− useStyles <-
42− makeStylesJSS
43− $ jssClasses \_ ->
44− { editor:
45− { background: colour.background
46− , boxSizing: "content-box"
47− , height: "80%"
48− , padding: "20px"
49− , marginTop: "0px"
50− , borderRadius: "12px"
51− , boxShadow: i "22px 22px 24px " colour.background ", -22px -22px 24px " colour.backgroundLayer1 ∷ String
52− , display: "flex"
53− , flexDirection: "column"
54− -- , minWidth: theme.measure
55− }
56− , card:
57− { zIndex: 0
58− }
59− , cardHidden: { opacity: 0 }
60− , compileError: { color: colour.invalid, opacity: 1, transition: "opacity 2.0s ease" }
61− , runOutput: { color: colour.success, opacity: 1, transition: "opacity 2.0s ease" }
62− }
37+ motionBox <- M.custom Block.box
38+ motionBox1 <- M.custom Block.box
39+ motionButton <- M.custom Block.button
6340 reactComponent "CompileEditor" \{ initialCode, height, language } -> React.do
41+ activeIndex /\ updateActiveIndex <- React.useState' 0
6442 maybeEditor /\ modifyEditor <- useState Nothing
65− classes <- useStyles {}
6643 let
6744 onLoad e = do
6845 setValue initialCode e
6946 modifyEditor (const $ Just e)
7047 compileResult /\ modifyCompileResult <- useState Nothing
7148 let
72− reset = do
49+ showEditor = updateActiveIndex 0
50+
51+ showResult = updateActiveIndex 1
52+
53+ reset = resetCompileResult *> showEditor
54+
55+ run = compile *> showResult
56+
57+ resetCompileResult = do
7358 setCompileResult Nothing
7459 for_ maybeEditor (setValue initialCode)
60+
61+ compileResultToString ∷ Maybe (Either Error (Either CompileResult RunResult)) -> String
7562 compileResultToString = case _ of
7663 Nothing -> ""
77− Just (Left cr) -> cr.result <#> _.message # intercalate "/n"
78− Just (Right r) -> r.stdout
79− compileResultToClass = case _ of
80− Nothing -> classes.cardHidden
81− Just (Left cr) -> classes.compileError
82− Just (Right r) -> classes.runOutput
64+ Just (Right (Left cr)) -> cr.result <#> _.message # intercalate "/n"
65+ Just (Right (Right r)) -> r.stdout
66+ Just (Left e) -> message e
67+
8368 setCompileResult = modifyCompileResult <<< const
69+
8470 compile = do
8571 for_ maybeEditor \ed -> do
8672 setCompileResult Nothing
8773 code <- getValue ed
8874 launchAff_ do
89− res <- compileAndRun { code }
75+ res <- try $ compileAndRun { code }
9076 setCompileResult (Just res) # liftEffect
77+
78+ tabs ∷ JSX
79+ tabs =
80+ Block.segmented
81+ </> { activeIndex
82+ , updateActiveIndex
83+ , buttonContents:
84+ twoOrMore
85+ { id: "editor", value: "Editor" }
86+ { id: "Result", value: "Result" }
87+ []
88+ }
89+
90+ editorView ∷ JSX
91+ editorView = editor </> { onLoad, height, language }
92+
93+ buttons ∷ Array JSX -> JSX
94+ buttons = Y.el Block.cluster { justify: "flex-end", space: "var(--s-1)" }
95+
96+ button =
97+ Y.el motionButton
98+ <<< M.motion
99+ { transition: M.transition $ { duration: 0.2 }
100+ }
101+
102+ resetButton ∷ JSX
103+ resetButton =
104+ button
105+ { buttonType: BT.Generic, onClick: handler_ reset }
106+ [ R.text "Reset" ]
107+
108+ runButton ∷ JSX
109+ runButton =
110+ button
111+ { buttonType: BT.Primary, onClick: handler_ run }
112+ [ R.text "Run" ]
113+
114+ buttonControls ∷ Array JSX -> JSX
115+ buttonControls = Y.el motionBox $ M.motion { layout: M.layout true } {}
116+
117+ tabContainer ∷ Array JSX -> JSX
118+ tabContainer children =
119+ Y.styled R.div'
120+ { className: "tabby"
121+ , css:
122+ E.css
123+ { background: E.str colour.backgroundLayer4
124+ , borderTop: E.str $ "1px solid " <> colour.interfaceBackgroundHighlight
125+ , borderRadius: E.str "14px 14px 0 0"
126+ , paddingLeft: E.var "--s-1"
127+ , paddingRight: E.var "--s-1"
128+ , paddingTop: E.str "0"
129+ , paddingBottom: E.str "0"
130+ , marginBottom: E.str "0"
131+ , zIndex: E.str "0"
132+ }
133+ }
134+ [ Y.el Block.centre { andText: true } children
135+ ]
136+
137+ terminal ∷ Array JSX -> JSX
138+ terminal =
139+ Y.el motionBox1
140+ $ M.motion
141+ { layout: M.layout true
142+ }
143+ { css:
144+ E.css
145+ { background: E.str "rgb(42,42,59)"
146+ , boxSizing: E.str "content-box"
147+ , margin: E.str "0"
148+ , minHeight: E.str "8em"
149+ , padding: E.str "0"
150+ , display: E.str "flex"
151+ }
152+ }
153+
154+ container =
155+ Y.el motionBox1
156+ $ M.motion { layout: M.layout true }
157+ { css:
158+ E.css
159+ { background: E.str colour.backgroundLayer4
160+ , borderBottom: E.str $ "1px solid " <> colour.interfaceBackgroundShadow
161+ , borderRadius: E.str "0 0 14px 14px"
162+ , paddingLeft: E.str "0"
163+ , paddingRight: E.str "0"
164+ , paddingTop: E.str "0"
165+ , paddingBottom: E.var "--s-1"
166+ , zIndex: E.str "0"
167+ }
168+ }
91169 pure
92− $ jsx stack { space: "--s1" }
93− [ jsx stack { space: "--s0", className: classes.editor }
94− [ element editor { onLoad, height, language }
95− , jsx cluster { justify: JustifyContentValue flexEnd }
96− [ R.div_
97− [ Y.el Block.button
98− { onClick: handler_ reset
99− }
100− [ R.text "Reset" ]
101− , Y.el Block.button
102− { buttonType: BT.Primary
103− , onClick: handler_ compile
104− }
105− [ R.text "Run" ]
170+ $ Y.el Block.stack { space: E.str "0" }
171+ [ tabContainer [ tabs ]
172+ , Y.el M.animateSharedLayout {}
173+ [ container
174+ [ terminal
175+ [ if activeIndex == 0 then
176+ editorView
177+ else
178+ Y.el M.div
179+ { layout: M.layout true
180+ , initial: M.initial $ css { width: "100%" }
181+ }
182+ [ R.text (compileResultToString compileResult) ]
183+ ]
184+ , buttonControls
185+ [ buttons [ resetButton, runButton ]
106186 ]
107187 ]
108188 ]
109− , jsx card
110− { className: classes.card <> " " <> compileResultToClass compileResult
111− }
112− [ R.text (compileResultToString compileResult) ]
113189 ]
components/src/Yoga/Monaco/Editor.js+811−792
@@ -1,14 +1,14 @@
11"use strict";
2−var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
2+var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
33 if (k2 === undefined) k2 = k;
4− Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5−}) : (function(o, m, k, k2) {
4+ Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
5+}) : (function (o, m, k, k2) {
66 if (k2 === undefined) k2 = k;
77 o[k2] = m[k];
88}));
9−var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
9+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
1010 Object.defineProperty(o, "default", { enumerable: true, value: v });
11−}) : function(o, v) {
11+}) : function (o, v) {
1212 o["default"] = v;
1313});
1414var __importStar = (this && this.__importStar) || function (mod) {
@@ -28,8 +28,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
2828 });
2929};
3030var __generator = (this && this.__generator) || function (thisArg, body) {
31− var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
32− return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
31+ var _ = { label: 0, sent: function () { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
32+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
3333 function verb(n) { return function (v) { return step([n, v]); }; }
3434 function step(op) {
3535 if (f) throw new TypeError("Generator is already executing.");
@@ -54,29 +54,43 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
5454 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
5555 }
5656};
57−exports.monacoEditorImpl = function () { return __awaiter(void 0, void 0, void 0, function () {
58− var x;
59− return __generator(this, function (_a) {
60− switch (_a.label) {
61− case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("react-monaco-editor")); })];
62− case 1:
63− x = _a.sent();
64− return [2 /*return*/, x.default];
65− }
57+exports.monacoEditorImpl = function () {
58+ return __awaiter(void 0, void 0, void 0, function () {
59+ var x;
60+ return __generator(this, function (_a) {
61+ switch (_a.label) {
62+ case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("react-monaco-editor")); })];
63+ case 1:
64+ x = _a.sent();
65+ return [2 /*return*/, x.default];
66+ }
67+ });
6668 });
67−}); };
69+};
6870exports.getValue = function (editor) {
6971 return function () {
7072 return editor.getValue();
7173 };
7274};
73−exports.colorizeImpl = function (text) { return function (languageId) { return function (options) { return function (editor) {
74− return editor.colorize(text, languageId, options);
75−}; }; }; };
75+exports.colorizeImpl = function (text) {
76+ return function (languageId) {
77+ return function (options) {
78+ return function (editor) {
79+ return editor.colorize(text, languageId, options);
80+ };
81+ };
82+ };
83+};
7684exports.setValue = function (value) { return function (editor) { return function () { return editor.setValue(value); }; }; };
77−exports.defineThemeImpl = function (monacoInstance) { return function (name) { return function (theme) { return function () {
78− return monacoInstance.editor.defineTheme(name, theme);
79−}; }; }; };
85+exports.defineThemeImpl = function (monacoInstance) {
86+ return function (name) {
87+ return function (theme) {
88+ return function () {
89+ return monacoInstance.editor.defineTheme(name, theme);
90+ };
91+ };
92+ };
93+};
8094exports.setThemeImpl = function (monacoInstance) {
8195 return function (theme) {
8296 return function () {
@@ -100,777 +114,782 @@ exports.setMonarchTokensProviderImpl = function (monacoInstance) {
100114 };
101115 };
102116};
103−exports.vsCodeTheme = function (bg) { return ({
104− base: "vs",
105− inherit: true,
106− rules: [
107− {
108− foreground: "008e00",
109− token: "comment",
110− },
111− {
112− foreground: "7d4726",
113− token: "meta.preprocessor",
114− },
115− {
116− foreground: "7d4726",
117− token: "keyword.control.import",
118− },
119− {
120− foreground: "df0002",
121− token: "string",
122− },
123− {
124− foreground: "3a00dc",
125− token: "constant.numeric",
126− },
127− {
128− foreground: "c800a4",
129− token: "constant.language",
130− },
131− {
132− foreground: "275a5e",
133− token: "constant.character",
134− },
135− {
136− foreground: "275a5e",
137− token: "constant.other",
138− },
139− {
140− foreground: "c800a4",
141− token: "variable.language",
142− },
143− {
144− foreground: "c800a4",
145− token: "variable.other",
146− },
147− {
148− foreground: "c800a4",
149− token: "keyword",
150− },
151− {
152− foreground: "c900a4",
153− token: "storage",
154− },
155− {
156− foreground: "438288",
157− token: "entity.name.class",
158− },
159− {
160− foreground: "790ead",
161− token: "entity.name.tag",
162− },
163− {
164− foreground: "450084",
165− token: "entity.other.attribute-name",
166− },
167− {
168− foreground: "450084",
169− token: "support.function",
170− },
171− {
172− foreground: "450084",
173− token: "support.constant",
174− },
175− {
176− foreground: "790ead",
177− token: "support.type",
178− },
179− {
180− foreground: "790ead",
181− token: "support.class",
182− },
183− {
184− foreground: "790ead",
185− token: "support.other.variable",
186− },
187− ],
188− colors: {
189− "editor.foreground": "#000000",
190− "editor.background": bg,
191− "editor.selectionBackground": "#B5D5FF",
192− "editor.lineHighlightBackground": "#00000012",
193− "editorCursor.foreground": "#000000",
194− "editorWhitespace.foreground": "#BFBFBF",
195− },
196−}); };
197−exports.nightOwlTheme = function (bg) { return ({
198− base: "vs-dark",
199− inherit: true,
200− rules: [
201− {
202− foreground: "637777",
203− token: "comment",
204− },
205− {
206− foreground: "addb67",
207− token: "string",
208− },
209− {
210− foreground: "ecc48d",
211− token: "vstring.quoted",
212− },
213− {
214− foreground: "ecc48d",
215− token: "variable.other.readwrite.js",
216− },
217− {
218− foreground: "5ca7e4",
219− token: "string.regexp",
220− },
221− {
222− foreground: "5ca7e4",
223− token: "string.regexp keyword.other",
224− },
225− {
226− foreground: "5f7e97",
227− token: "meta.function punctuation.separator.comma",
228− },
229− {
230− foreground: "f78c6c",
231− token: "constant.numeric",
232− },
233− {
234− foreground: "f78c6c",
235− token: "constant.character.numeric",
236− },
237− {
238− foreground: "addb67",
239− token: "variable",
240− },
241− {
242− foreground: "c792ea",
243− token: "keyword",
244− },
245− {
246− foreground: "c792ea",
247− token: "punctuation.accessor",
248− },
249− {
250− foreground: "c792ea",
251− token: "storage",
252− },
253− {
254− foreground: "c792ea",
255− token: "meta.var.expr",
256− },
257− {
258− foreground: "c792ea",
259− token: "meta.class meta.method.declaration meta.var.expr storage.type.jsm",
260− },
261− {
262− foreground: "c792ea",
263− token: "storage.type.property.js",
264− },
265− {
266− foreground: "c792ea",
267− token: "storage.type.property.ts",
268− },
269− {
270− foreground: "c792ea",
271− token: "storage.type.property.tsx",
272− },
273− {
274− foreground: "82aaff",
275− token: "storage.type",
276− },
277− {
278− foreground: "ffcb8b",
279− token: "entity.name.class",
280− },
281− {
282− foreground: "ffcb8b",
283− token: "meta.class entity.name.type.class",
284− },
285− {
286− foreground: "addb67",
287− token: "entity.other.inherited-class",
288− },
289− {
290− foreground: "82aaff",
291− token: "entity.name.function",
292− },
293− {
294− foreground: "addb67",
295− token: "punctuation.definition.variable",
296− },
297− {
298− foreground: "d3423e",
299− token: "punctuation.section.embedded",
300− },
301− {
302− foreground: "d6deeb",
303− token: "punctuation.terminator.expression",
304− },
305− {
306− foreground: "d6deeb",
307− token: "punctuation.definition.arguments",
308− },
309− {
310− foreground: "d6deeb",
311− token: "punctuation.definition.array",
312− },
313− {
314− foreground: "d6deeb",
315− token: "punctuation.section.array",
316− },
317− {
318− foreground: "d6deeb",
319− token: "meta.array",
320− },
321− {
322− foreground: "d9f5dd",
323− token: "punctuation.definition.list.begin",
324− },
325− {
326− foreground: "d9f5dd",
327− token: "punctuation.definition.list.end",
328− },
329− {
330− foreground: "d9f5dd",
331− token: "punctuation.separator.arguments",
332− },
333− {
334− foreground: "d9f5dd",
335− token: "punctuation.definition.list",
336− },
337− {
338− foreground: "d3423e",
339− token: "string.template meta.template.expression",
340− },
341− {
342− foreground: "d6deeb",
343− token: "string.template punctuation.definition.string",
344− },
345− {
346− foreground: "c792ea",
347− fontStyle: "italic",
348− token: "italic",
349− },
350− {
351− foreground: "addb67",
352− fontStyle: "bold",
353− token: "bold",
354− },
355− {
356− foreground: "82aaff",
357− token: "constant.language",
358− },
359− {
360− foreground: "82aaff",
361− token: "punctuation.definition.constant",
362− },
363− {
364− foreground: "82aaff",
365− token: "variable.other.constant",
366− },
367− {
368− foreground: "7fdbca",
369− token: "support.function.construct",
370− },
371− {
372− foreground: "7fdbca",
373− token: "keyword.other.new",
374− },
375− {
376− foreground: "82aaff",
377− token: "constant.character",
378− },
379− {
380− foreground: "82aaff",
381− token: "constant.other",
382− },
383− {
384− foreground: "f78c6c",
385− token: "constant.character.escape",
386− },
387− {
388− foreground: "addb67",
389− token: "entity.other.inherited-class",
390− },
391− {
392− foreground: "d7dbe0",
393− token: "variable.parameter",
394− },
395− {
396− foreground: "7fdbca",
397− token: "entity.name.tag",
398− },
399− {
400− foreground: "cc2996",
401− token: "punctuation.definition.tag.html",
402− },
403− {
404− foreground: "cc2996",
405− token: "punctuation.definition.tag.begin",
406− },
407− {
408− foreground: "cc2996",
409− token: "punctuation.definition.tag.end",
410− },
411− {
412− foreground: "addb67",
413− token: "entity.other.attribute-name",
414− },
415− {
416− foreground: "addb67",
417− token: "entity.name.tag.custom",
418− },
419− {
420− foreground: "82aaff",
421− token: "support.function",
422− },
423− {
424− foreground: "82aaff",
425− token: "support.constant",
426− },
427− {
428− foreground: "7fdbca",
429− token: "upport.constant.meta.property-value",
430− },
431− {
432− foreground: "addb67",
433− token: "support.type",
434− },
435− {
436− foreground: "addb67",
437− token: "support.class",
438− },
439− {
440− foreground: "addb67",
441− token: "support.variable.dom",
442− },
443− {
444− foreground: "7fdbca",
445− token: "support.constant",
446− },
447− {
448− foreground: "7fdbca",
449− token: "keyword.other.special-method",
450− },
451− {
452− foreground: "7fdbca",
453− token: "keyword.other.new",
454− },
455− {
456− foreground: "7fdbca",
457− token: "keyword.other.debugger",
458− },
459− {
460− foreground: "7fdbca",
461− token: "keyword.control",
462− },
463− {
464− foreground: "c792ea",
465− token: "keyword.operator.comparison",
466− },
467− {
468− foreground: "c792ea",
469− token: "keyword.control.flow.js",
470− },
471− {
472− foreground: "c792ea",
473− token: "keyword.control.flow.ts",
474− },
475− {
476− foreground: "c792ea",
477− token: "keyword.control.flow.tsx",
478− },
479− {
480− foreground: "c792ea",
481− token: "keyword.control.ruby",
482− },
483− {
484− foreground: "c792ea",
485− token: "keyword.control.module.ruby",
486− },
487− {
488− foreground: "c792ea",
489− token: "keyword.control.class.ruby",
490− },
491− {
492− foreground: "c792ea",
493− token: "keyword.control.def.ruby",
494− },
495− {
496− foreground: "c792ea",
497− token: "keyword.control.loop.js",
498− },
499− {
500− foreground: "c792ea",
501− token: "keyword.control.loop.ts",
502− },
503− {
504− foreground: "c792ea",
505− token: "keyword.control.import.js",
506− },
507− {
508− foreground: "c792ea",
509− token: "keyword.control.import.ts",
510− },
511− {
512− foreground: "c792ea",
513− token: "keyword.control.import.tsx",
514− },
515− {
516− foreground: "c792ea",
517− token: "keyword.control.from.js",
518− },
519− {
520− foreground: "c792ea",
521− token: "keyword.control.from.ts",
522− },
523− {
524− foreground: "c792ea",
525− token: "keyword.control.from.tsx",
526− },
527− {
528− foreground: "ffffff",
529− background: "ff2c83",
530− token: "invalid",
531− },
532− {
533− foreground: "ffffff",
534− background: "d3423e",
535− token: "invalid.deprecated",
536− },
537− {
538− foreground: "7fdbca",
539− token: "keyword.operator",
540− },
541− {
542− foreground: "c792ea",
543− token: "keyword.operator.relational",
544− },
545− {
546− foreground: "c792ea",
547− token: "keyword.operator.assignement",
548− },
549− {
550− foreground: "c792ea",
551− token: "keyword.operator.arithmetic",
552− },
553− {
554− foreground: "c792ea",
555− token: "keyword.operator.bitwise",
556− },
557− {
558− foreground: "c792ea",
559− token: "keyword.operator.increment",
560− },
561− {
562− foreground: "c792ea",
563− token: "keyword.operator.ternary",
564− },
565− {
566− foreground: "637777",
567− token: "comment.line.double-slash",
568− },
569− {
570− foreground: "cdebf7",
571− token: "object",
572− },
573− {
574− foreground: "ff5874",
575− token: "constant.language.null",
576− },
577− {
578− foreground: "d6deeb",
579− token: "meta.brace",
580− },
581− {
582− foreground: "c792ea",
583− token: "meta.delimiter.period",
584− },
585− {
586− foreground: "d9f5dd",
587− token: "punctuation.definition.string",
588− },
589− {
590− foreground: "ff5874",
591− token: "constant.language.boolean",
592− },
593− {
594− foreground: "ffffff",
595− token: "object.comma",
596− },
597− {
598− foreground: "7fdbca",
599− token: "variable.parameter.function",
600− },
601− {
602− foreground: "80cbc4",
603− token: "support.type.vendor.property-name",
604− },
605− {
606− foreground: "80cbc4",
607− token: "support.constant.vendor.property-value",
608− },
609− {
610− foreground: "80cbc4",
611− token: "support.type.property-name",
612− },
613− {
614− foreground: "80cbc4",
615− token: "meta.property-list entity.name.tag",
616− },
617− {
618− foreground: "57eaf1",
619− token: "meta.property-list entity.name.tag.reference",
620− },
621− {
622− foreground: "f78c6c",
623− token: "constant.other.color.rgb-value punctuation.definition.constant",
624− },
625− {
626− foreground: "ffeb95",
627− token: "constant.other.color",
628− },
629− {
630− foreground: "ffeb95",
631− token: "keyword.other.unit",
632− },
633− {
634− foreground: "c792ea",
635− token: "meta.selector",
636− },
637− {
638− foreground: "fad430",
639− token: "entity.other.attribute-name.id",
640− },
641− {
642− foreground: "80cbc4",
643− token: "meta.property-name",
644− },
645− {
646− foreground: "c792ea",
647− token: "entity.name.tag.doctype",
648− },
649− {
650− foreground: "c792ea",
651− token: "meta.tag.sgml.doctype",
652− },
653− {
654− foreground: "d9f5dd",
655− token: "punctuation.definition.parameters",
656− },
657− {
658− foreground: "ecc48d",
659− token: "string.quoted",
660− },
661− {
662− foreground: "ecc48d",
663− token: "string.quoted.double",
664− },
665− {
666− foreground: "ecc48d",
667− token: "string.quoted.single",
668− },
669− {
670− foreground: "addb67",
671− token: "support.constant.math",
672− },
673− {
674− foreground: "addb67",
675− token: "support.type.property-name.json",
676− },
677− {
678− foreground: "addb67",
679− token: "support.constant.json",
680− },
681− {
682− foreground: "c789d6",
683− token: "meta.structure.dictionary.value.json string.quoted.double",
684− },
685− {
686− foreground: "80cbc4",
687− token: "string.quoted.double.json punctuation.definition.string.json",
688− },
689− {
690− foreground: "ff5874",
691− token: "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",
692− },
693− {
694− foreground: "d6deeb",
695− token: "variable.other.ruby",
696− },
697− {
698− foreground: "ecc48d",
699− token: "entity.name.type.class.ruby",
700− },
701− {
702− foreground: "ecc48d",
703− token: "keyword.control.class.ruby",
704− },
705− {
706− foreground: "ecc48d",
707− token: "meta.class.ruby",
708− },
709− {
710− foreground: "7fdbca",
711− token: "constant.language.symbol.hashkey.ruby",
712− },
713− {
714− foreground: "e0eddd",
715− background: "a57706",
716− fontStyle: "italic",
717− token: "meta.diff",
718− },
719− {
720− foreground: "e0eddd",
721− background: "a57706",
722− fontStyle: "italic",
723− token: "meta.diff.header",
724− },
725− {
726− foreground: "ef535090",
727− fontStyle: "italic",
728− token: "markup.deleted",
729− },
730− {
731− foreground: "a2bffc",
732− fontStyle: "italic",
733− token: "markup.changed",
734− },
735− {
736− foreground: "a2bffc",
737− fontStyle: "italic",
738− token: "meta.diff.header.git",
739− },
740− {
741− foreground: "a2bffc",
742− fontStyle: "italic",
743− token: "meta.diff.header.from-file",
744− },
745− {
746− foreground: "a2bffc",
747− fontStyle: "italic",
748− token: "meta.diff.header.to-file",
749− },
750− {
751− foreground: "219186",
752− background: "eae3ca",
753− token: "markup.inserted",
754− },
755− {
756− foreground: "d3201f",
757− token: "other.package.exclude",
758− },
759− {
760− foreground: "d3201f",
761− token: "other.remove",
762− },
763− {
764− foreground: "269186",
765− token: "other.add",
766− },
767− {
768− foreground: "ff5874",
769− token: "constant.language.python",
770− },
771− {
772− foreground: "82aaff",
773− token: "variable.parameter.function.python",
774− },
775− {
776− foreground: "82aaff",
777− token: "meta.function-call.arguments.python",
778− },
779− {
780− foreground: "b2ccd6",
781− token: "meta.function-call.python",
782− },
783− {
784− foreground: "b2ccd6",
785− token: "meta.function-call.generic.python",
786− },
787− {
788− foreground: "d6deeb",
789− token: "punctuation.python",
790− },
791− {
792− foreground: "addb67",
793− token: "entity.name.function.decorator.python",
794− },
795− {
796− foreground: "8eace3",
797− token: "source.python variable.language.special",
798− },
799− {
800− foreground: "82b1ff",
801− token: "markup.heading.markdown",
802− },
803− {
804− foreground: "c792ea",
805− fontStyle: "italic",
806− token: "markup.italic.markdown",
807− },
808− {
809− foreground: "addb67",
810− fontStyle: "bold",
811− token: "markup.bold.markdown",
812− },
813− {
814− foreground: "697098",
815− token: "markup.quote.markdown",
816− },
817− {
818− foreground: "80cbc4",
819− token: "markup.inline.raw.markdown",
820− },
821− {
822− foreground: "ff869a",
823− token: "markup.underline.link.markdown",
824− },
825− {
826− foreground: "ff869a",
827− token: "markup.underline.link.image.markdown",
828− },
829− {
830− foreground: "d6deeb",
831− token: "string.other.link.title.markdown",
832− },
833− {
834− foreground: "d6deeb",
835− token: "string.other.link.description.markdown",
836− },
837− {
838− foreground: "82b1ff",
839− token: "punctuation.definition.string.markdown",
840− },
841− {
842− foreground: "82b1ff",
843− token: "punctuation.definition.string.begin.markdown",
844− },
845− {
846− foreground: "82b1ff",
847− token: "punctuation.definition.string.end.markdown",
848− },
849− {
850− foreground: "82b1ff",
851− token: "meta.link.inline.markdown punctuation.definition.string",
852− },
853− {
854− foreground: "7fdbca",
855− token: "punctuation.definition.metadata.markdown",
117+exports.vsCodeTheme = function (bg) {
118+ return ({
119+ base: "vs",
120+ inherit: true,
121+ rules: [
122+ {
123+ foreground: "008e00",
124+ token: "comment",
125+ },
126+ {
127+ foreground: "7d4726",
128+ token: "meta.preprocessor",
129+ },
130+ {
131+ foreground: "7d4726",
132+ token: "keyword.control.import",
133+ },
134+ {
135+ foreground: "df0002",
136+ token: "string",
137+ },
138+ {
139+ foreground: "3a00dc",
140+ token: "constant.numeric",
141+ },
142+ {
143+ foreground: "c800a4",
144+ token: "constant.language",
145+ },
146+ {
147+ foreground: "275a5e",
148+ token: "constant.character",
149+ },
150+ {
151+ foreground: "275a5e",
152+ token: "constant.other",
153+ },
154+ {
155+ foreground: "c800a4",
156+ token: "variable.language",
157+ },
158+ {
159+ foreground: "c800a4",
160+ token: "variable.other",
161+ },
162+ {
163+ foreground: "c800a4",
164+ token: "keyword",
165+ },
166+ {
167+ foreground: "c900a4",
168+ token: "storage",
169+ },
170+ {
171+ foreground: "438288",
172+ token: "entity.name.class",
173+ },
174+ {
175+ foreground: "790ead",
176+ token: "entity.name.tag",
177+ },
178+ {
179+ foreground: "450084",
180+ token: "entity.other.attribute-name",
181+ },
182+ {
183+ foreground: "450084",
184+ token: "support.function",
185+ },
186+ {
187+ foreground: "450084",
188+ token: "support.constant",
189+ },
190+ {
191+ foreground: "790ead",
192+ token: "support.type",
193+ },
194+ {
195+ foreground: "790ead",
196+ token: "support.class",
197+ },
198+ {
199+ foreground: "790ead",
200+ token: "support.other.variable",
201+ },
202+ ],
203+ colors: {
204+ "editor.foreground": "#000000",
205+ "editor.background": bg,
206+ "editor.selectionBackground": "#B5D5FF",
207+ "editor.lineHighlightBackground": "#B5D5FF",
208+ "editor.lineHighlightBorder": "#B5D5FF",
209+ "editorCursor.foreground": "#000000",
210+ "editorWhitespace.foreground": "#BFBFBF",
856211 },
857− {
858− foreground: "82b1ff",
859− token: "beginning.punctuation.definition.list.markdown",
212+ });
213+};
214+exports.nightOwlTheme = function (bg) {
215+ return ({
216+ base: "vs-dark",
217+ inherit: true,
218+ rules: [
219+ {
220+ foreground: "637777",
221+ token: "comment",
222+ },
223+ {
224+ foreground: "addb67",
225+ token: "string",
226+ },
227+ {
228+ foreground: "ecc48d",
229+ token: "vstring.quoted",
230+ },
231+ {
232+ foreground: "ecc48d",
233+ token: "variable.other.readwrite.js",
234+ },
235+ {
236+ foreground: "5ca7e4",
237+ token: "string.regexp",
238+ },
239+ {
240+ foreground: "5ca7e4",
241+ token: "string.regexp keyword.other",
242+ },
243+ {
244+ foreground: "5f7e97",
245+ token: "meta.function punctuation.separator.comma",
246+ },
247+ {
248+ foreground: "f78c6c",
249+ token: "constant.numeric",
250+ },
251+ {
252+ foreground: "f78c6c",
253+ token: "constant.character.numeric",
254+ },
255+ {
256+ foreground: "addb67",
257+ token: "variable",
258+ },
259+ {
260+ foreground: "c792ea",
261+ token: "keyword",
262+ },
263+ {
264+ foreground: "c792ea",
265+ token: "punctuation.accessor",
266+ },
267+ {
268+ foreground: "c792ea",
269+ token: "storage",
270+ },
271+ {
272+ foreground: "c792ea",
273+ token: "meta.var.expr",
274+ },
275+ {
276+ foreground: "c792ea",
277+ token: "meta.class meta.method.declaration meta.var.expr storage.type.jsm",
278+ },
279+ {
280+ foreground: "c792ea",
281+ token: "storage.type.property.js",
282+ },
283+ {
284+ foreground: "c792ea",
285+ token: "storage.type.property.ts",
286+ },
287+ {
288+ foreground: "c792ea",
289+ token: "storage.type.property.tsx",
290+ },
291+ {
292+ foreground: "82aaff",
293+ token: "storage.type",
294+ },
295+ {
296+ foreground: "ffcb8b",
297+ token: "entity.name.class",
298+ },
299+ {
300+ foreground: "ffcb8b",
301+ token: "meta.class entity.name.type.class",
302+ },
303+ {
304+ foreground: "addb67",
305+ token: "entity.other.inherited-class",
306+ },
307+ {
308+ foreground: "82aaff",
309+ token: "entity.name.function",
310+ },
311+ {
312+ foreground: "addb67",
313+ token: "punctuation.definition.variable",
314+ },
315+ {
316+ foreground: "d3423e",
317+ token: "punctuation.section.embedded",
318+ },
319+ {
320+ foreground: "d6deeb",
321+ token: "punctuation.terminator.expression",
322+ },
323+ {
324+ foreground: "d6deeb",
325+ token: "punctuation.definition.arguments",
326+ },
327+ {
328+ foreground: "d6deeb",
329+ token: "punctuation.definition.array",
330+ },
331+ {
332+ foreground: "d6deeb",
333+ token: "punctuation.section.array",
334+ },
335+ {
336+ foreground: "d6deeb",
337+ token: "meta.array",
338+ },
339+ {
340+ foreground: "d9f5dd",
341+ token: "punctuation.definition.list.begin",
342+ },
343+ {
344+ foreground: "d9f5dd",
345+ token: "punctuation.definition.list.end",
346+ },
347+ {
348+ foreground: "d9f5dd",
349+ token: "punctuation.separator.arguments",
350+ },
351+ {
352+ foreground: "d9f5dd",
353+ token: "punctuation.definition.list",
354+ },
355+ {
356+ foreground: "d3423e",
357+ token: "string.template meta.template.expression",
358+ },
359+ {
360+ foreground: "d6deeb",
361+ token: "string.template punctuation.definition.string",
362+ },
363+ {
364+ foreground: "c792ea",
365+ fontStyle: "italic",
366+ token: "italic",
367+ },
368+ {
369+ foreground: "addb67",
370+ fontStyle: "bold",
371+ token: "bold",
372+ },
373+ {
374+ foreground: "82aaff",
375+ token: "constant.language",
376+ },
377+ {
378+ foreground: "82aaff",
379+ token: "punctuation.definition.constant",
380+ },
381+ {
382+ foreground: "82aaff",
383+ token: "variable.other.constant",
384+ },
385+ {
386+ foreground: "7fdbca",
387+ token: "support.function.construct",
388+ },
389+ {
390+ foreground: "7fdbca",
391+ token: "keyword.other.new",
392+ },
393+ {
394+ foreground: "82aaff",
395+ token: "constant.character",
396+ },
397+ {
398+ foreground: "82aaff",
399+ token: "constant.other",
400+ },
401+ {
402+ foreground: "f78c6c",
403+ token: "constant.character.escape",
404+ },
405+ {
406+ foreground: "addb67",
407+ token: "entity.other.inherited-class",
408+ },
409+ {
410+ foreground: "d7dbe0",
411+ token: "variable.parameter",
412+ },
413+ {
414+ foreground: "7fdbca",
415+ token: "entity.name.tag",
416+ },
417+ {
418+ foreground: "cc2996",
419+ token: "punctuation.definition.tag.html",
420+ },
421+ {
422+ foreground: "cc2996",
423+ token: "punctuation.definition.tag.begin",
424+ },
425+ {
426+ foreground: "cc2996",
427+ token: "punctuation.definition.tag.end",
428+ },
429+ {
430+ foreground: "addb67",
431+ token: "entity.other.attribute-name",
432+ },
433+ {
434+ foreground: "addb67",
435+ token: "entity.name.tag.custom",
436+ },
437+ {
438+ foreground: "82aaff",
439+ token: "support.function",
440+ },
441+ {
442+ foreground: "82aaff",
443+ token: "support.constant",
444+ },
445+ {
446+ foreground: "7fdbca",
447+ token: "upport.constant.meta.property-value",
448+ },
449+ {
450+ foreground: "addb67",
451+ token: "support.type",
452+ },
453+ {
454+ foreground: "addb67",
455+ token: "support.class",
456+ },
457+ {
458+ foreground: "addb67",
459+ token: "support.variable.dom",
460+ },
461+ {
462+ foreground: "7fdbca",
463+ token: "support.constant",
464+ },
465+ {
466+ foreground: "7fdbca",
467+ token: "keyword.other.special-method",
468+ },
469+ {
470+ foreground: "7fdbca",
471+ token: "keyword.other.new",
472+ },
473+ {
474+ foreground: "7fdbca",
475+ token: "keyword.other.debugger",
476+ },
477+ {
478+ foreground: "7fdbca",
479+ token: "keyword.control",
480+ },
481+ {
482+ foreground: "c792ea",
483+ token: "keyword.operator.comparison",
484+ },
485+ {
486+ foreground: "c792ea",
487+ token: "keyword.control.flow.js",
488+ },
489+ {
490+ foreground: "c792ea",
491+ token: "keyword.control.flow.ts",
492+ },
493+ {
494+ foreground: "c792ea",
495+ token: "keyword.control.flow.tsx",
496+ },
497+ {
498+ foreground: "c792ea",
499+ token: "keyword.control.ruby",
500+ },
501+ {
502+ foreground: "c792ea",
503+ token: "keyword.control.module.ruby",
504+ },
505+ {
506+ foreground: "c792ea",
507+ token: "keyword.control.class.ruby",
508+ },
509+ {
510+ foreground: "c792ea",
511+ token: "keyword.control.def.ruby",
512+ },
513+ {
514+ foreground: "c792ea",
515+ token: "keyword.control.loop.js",
516+ },
517+ {
518+ foreground: "c792ea",
519+ token: "keyword.control.loop.ts",
520+ },
521+ {
522+ foreground: "c792ea",
523+ token: "keyword.control.import.js",
524+ },
525+ {
526+ foreground: "c792ea",
527+ token: "keyword.control.import.ts",
528+ },
529+ {
530+ foreground: "c792ea",
531+ token: "keyword.control.import.tsx",
532+ },
533+ {
534+ foreground: "c792ea",
535+ token: "keyword.control.from.js",
536+ },
537+ {
538+ foreground: "c792ea",
539+ token: "keyword.control.from.ts",
540+ },
541+ {
542+ foreground: "c792ea",
543+ token: "keyword.control.from.tsx",
544+ },
545+ {
546+ foreground: "ffffff",
547+ background: "ff2c83",
548+ token: "invalid",
549+ },
550+ {
551+ foreground: "ffffff",
552+ background: "d3423e",
553+ token: "invalid.deprecated",
554+ },
555+ {
556+ foreground: "7fdbca",
557+ token: "keyword.operator",
558+ },
559+ {
560+ foreground: "c792ea",
561+ token: "keyword.operator.relational",
562+ },
563+ {
564+ foreground: "c792ea",
565+ token: "keyword.operator.assignement",
566+ },
567+ {
568+ foreground: "c792ea",
569+ token: "keyword.operator.arithmetic",
570+ },
571+ {
572+ foreground: "c792ea",
573+ token: "keyword.operator.bitwise",
574+ },
575+ {
576+ foreground: "c792ea",
577+ token: "keyword.operator.increment",
578+ },
579+ {
580+ foreground: "c792ea",
581+ token: "keyword.operator.ternary",
582+ },
583+ {
584+ foreground: "637777",
585+ token: "comment.line.double-slash",
586+ },
587+ {
588+ foreground: "cdebf7",
589+ token: "object",
590+ },
591+ {
592+ foreground: "ff5874",
593+ token: "constant.language.null",
594+ },
595+ {
596+ foreground: "d6deeb",
597+ token: "meta.brace",
598+ },
599+ {
600+ foreground: "c792ea",
601+ token: "meta.delimiter.period",
602+ },
603+ {
604+ foreground: "d9f5dd",
605+ token: "punctuation.definition.string",
606+ },
607+ {
608+ foreground: "ff5874",
609+ token: "constant.language.boolean",
610+ },
611+ {
612+ foreground: "ffffff",
613+ token: "object.comma",
614+ },
615+ {
616+ foreground: "7fdbca",
617+ token: "variable.parameter.function",
618+ },
619+ {
620+ foreground: "80cbc4",
621+ token: "support.type.vendor.property-name",
622+ },
623+ {
624+ foreground: "80cbc4",
625+ token: "support.constant.vendor.property-value",
626+ },
627+ {
628+ foreground: "80cbc4",
629+ token: "support.type.property-name",
630+ },
631+ {
632+ foreground: "80cbc4",
633+ token: "meta.property-list entity.name.tag",
634+ },
635+ {
636+ foreground: "57eaf1",
637+ token: "meta.property-list entity.name.tag.reference",
638+ },
639+ {
640+ foreground: "f78c6c",
641+ token: "constant.other.color.rgb-value punctuation.definition.constant",
642+ },
643+ {
644+ foreground: "ffeb95",
645+ token: "constant.other.color",
646+ },
647+ {
648+ foreground: "ffeb95",
649+ token: "keyword.other.unit",
650+ },
651+ {
652+ foreground: "c792ea",
653+ token: "meta.selector",
654+ },
655+ {
656+ foreground: "fad430",
657+ token: "entity.other.attribute-name.id",
658+ },
659+ {
660+ foreground: "80cbc4",
661+ token: "meta.property-name",
662+ },
663+ {
664+ foreground: "c792ea",
665+ token: "entity.name.tag.doctype",
666+ },
667+ {
668+ foreground: "c792ea",
669+ token: "meta.tag.sgml.doctype",
670+ },
671+ {
672+ foreground: "d9f5dd",
673+ token: "punctuation.definition.parameters",
674+ },
675+ {
676+ foreground: "ecc48d",
677+ token: "string.quoted",
678+ },
679+ {
680+ foreground: "ecc48d",
681+ token: "string.quoted.double",
682+ },
683+ {
684+ foreground: "ecc48d",
685+ token: "string.quoted.single",
686+ },
687+ {
688+ foreground: "addb67",
689+ token: "support.constant.math",
690+ },
691+ {
692+ foreground: "addb67",
693+ token: "support.type.property-name.json",
694+ },
695+ {
696+ foreground: "addb67",
697+ token: "support.constant.json",
698+ },
699+ {
700+ foreground: "c789d6",
701+ token: "meta.structure.dictionary.value.json string.quoted.double",
702+ },
703+ {
704+ foreground: "80cbc4",
705+ token: "string.quoted.double.json punctuation.definition.string.json",
706+ },
707+ {
708+ foreground: "ff5874",
709+ token: "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",
710+ },
711+ {
712+ foreground: "d6deeb",
713+ token: "variable.other.ruby",
714+ },
715+ {
716+ foreground: "ecc48d",
717+ token: "entity.name.type.class.ruby",
718+ },
719+ {
720+ foreground: "ecc48d",
721+ token: "keyword.control.class.ruby",
722+ },
723+ {
724+ foreground: "ecc48d",
725+ token: "meta.class.ruby",
726+ },
727+ {
728+ foreground: "7fdbca",
729+ token: "constant.language.symbol.hashkey.ruby",
730+ },
731+ {
732+ foreground: "e0eddd",
733+ background: "a57706",
734+ fontStyle: "italic",
735+ token: "meta.diff",
736+ },
737+ {
738+ foreground: "e0eddd",
739+ background: "a57706",
740+ fontStyle: "italic",
741+ token: "meta.diff.header",
742+ },
743+ {
744+ foreground: "ef535090",
745+ fontStyle: "italic",
746+ token: "markup.deleted",
747+ },
748+ {
749+ foreground: "a2bffc",
750+ fontStyle: "italic",
751+ token: "markup.changed",
752+ },
753+ {
754+ foreground: "a2bffc",
755+ fontStyle: "italic",
756+ token: "meta.diff.header.git",
757+ },
758+ {
759+ foreground: "a2bffc",
760+ fontStyle: "italic",
761+ token: "meta.diff.header.from-file",
762+ },
763+ {
764+ foreground: "a2bffc",
765+ fontStyle: "italic",
766+ token: "meta.diff.header.to-file",
767+ },
768+ {
769+ foreground: "219186",
770+ background: "eae3ca",
771+ token: "markup.inserted",
772+ },
773+ {
774+ foreground: "d3201f",
775+ token: "other.package.exclude",
776+ },
777+ {
778+ foreground: "d3201f",
779+ token: "other.remove",
780+ },
781+ {
782+ foreground: "269186",
783+ token: "other.add",
784+ },
785+ {
786+ foreground: "ff5874",
787+ token: "constant.language.python",
788+ },
789+ {
790+ foreground: "82aaff",
791+ token: "variable.parameter.function.python",
792+ },
793+ {
794+ foreground: "82aaff",
795+ token: "meta.function-call.arguments.python",
796+ },
797+ {
798+ foreground: "b2ccd6",
799+ token: "meta.function-call.python",
800+ },
801+ {
802+ foreground: "b2ccd6",
803+ token: "meta.function-call.generic.python",
804+ },
805+ {
806+ foreground: "d6deeb",
807+ token: "punctuation.python",
808+ },
809+ {
810+ foreground: "addb67",
811+ token: "entity.name.function.decorator.python",
812+ },
813+ {
814+ foreground: "8eace3",
815+ token: "source.python variable.language.special",
816+ },
817+ {
818+ foreground: "82b1ff",
819+ token: "markup.heading.markdown",
820+ },
821+ {
822+ foreground: "c792ea",
823+ fontStyle: "italic",
824+ token: "markup.italic.markdown",
825+ },
826+ {
827+ foreground: "addb67",
828+ fontStyle: "bold",
829+ token: "markup.bold.markdown",
830+ },
831+ {
832+ foreground: "697098",
833+ token: "markup.quote.markdown",
834+ },
835+ {
836+ foreground: "80cbc4",
837+ token: "markup.inline.raw.markdown",
838+ },
839+ {
840+ foreground: "ff869a",
841+ token: "markup.underline.link.markdown",
842+ },
843+ {
844+ foreground: "ff869a",
845+ token: "markup.underline.link.image.markdown",
846+ },
847+ {
848+ foreground: "d6deeb",
849+ token: "string.other.link.title.markdown",
850+ },
851+ {
852+ foreground: "d6deeb",
853+ token: "string.other.link.description.markdown",
854+ },
855+ {
856+ foreground: "82b1ff",
857+ token: "punctuation.definition.string.markdown",
858+ },
859+ {
860+ foreground: "82b1ff",
861+ token: "punctuation.definition.string.begin.markdown",
862+ },
863+ {
864+ foreground: "82b1ff",
865+ token: "punctuation.definition.string.end.markdown",
866+ },
867+ {
868+ foreground: "82b1ff",
869+ token: "meta.link.inline.markdown punctuation.definition.string",
870+ },
871+ {
872+ foreground: "7fdbca",
873+ token: "punctuation.definition.metadata.markdown",
874+ },
875+ {
876+ foreground: "82b1ff",
877+ token: "beginning.punctuation.definition.list.markdown",
878+ },
879+ ],
880+ colors: {
881+ "editor.foreground": "#d6deeb",
882+ // "editor.background": "#011627",
883+ "editor.background": bg,
884+ "editor.selectionBackground": "#5f7e9779",
885+ // "editor.lineHighlightBackground": "#010E17",
886+ "editorCursor.foreground": "#80a4c2",
887+ "editorWhitespace.foreground": "#2e2040",
888+ "editorIndentGuide.background": "#5e81ce52",
889+ "editor.selectionHighlightBorder": "#122d42",
860890 },
861− ],
862− colors: {
863− "editor.foreground": "#d6deeb",
864− // "editor.background": "#011627",
865− "editor.background": bg,
866− "editor.selectionBackground": "#5f7e9779",
867− "editor.lineHighlightBackground": "#010E17",
868− "editorCursor.foreground": "#80a4c2",
869− "editorWhitespace.foreground": "#2e2040",
870− "editorIndentGuide.background": "#5e81ce52",
871− "editor.selectionHighlightBorder": "#122d42",
872− },
873−}); };
891+ });
892+};
874893exports.purescriptSyntax = {
875894 displayName: "Purescript",
876895 name: "purescript",
components/src/Yoga/Monaco/Editor.purs+7−3
@@ -1,7 +1,7 @@
11module Yoga.Editor where
22
33import Prelude
4−import CSS (borderBox, borderRadius, boxSizing, margin, padding, pct, px, toHexString, unitless, width)
4+import CSS (borderBox, borderRadius, boxSizing, calc, margin, padding, pct, px, toHexString, unitless, width)
55import CSS.Overflow (hidden, overflowY)
66import Control.Promise (Promise)
77import Control.Promise as Promise
@@ -19,6 +19,7 @@ import JSS (jssClasses)
1919import Prim.Row (class Union)
2020import React.Basic (JSX, ReactComponent, Ref, element, fragment)
2121import React.Basic.DOM as R
22+import React.Basic.Emotion (var)
2223import React.Basic.Hooks (reactComponent, useEffect, useState)
2324import React.Basic.Hooks as React
2425import React.Basic.Hooks.Aff (useAff)
@@ -107,6 +108,7 @@ mkEditor = do
107108 margin (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) (0.0 # unitless)
108109 boxSizing borderBox
109110 borderRadius (8.0 # px) (8.0 # px) (8.0 # px) (8.0 # px)
111+ padding (4.0 # px) (8.0 # px) (0.0 # px) (8.0 # px)
110112 width (100.0 # pct)
111113 overflowY hidden
112114 -- backgroundColor (colour.background) [TODO]
@@ -136,7 +138,7 @@ mkEditor = do
136138 unsafeToForeign
137139 { fontFamily: "Victor Mono"
138140 , fontLigatures: true
139− , fontSize: "var(--s0)"
141+ , fontSize: "15px"
140142 , lineNumbers: "off"
141143 , glyphMargin: false
142144 , folding: false
@@ -144,9 +146,11 @@ mkEditor = do
144146 , lineNumbersMinChars: 0
145147 , minimap: { enabled: false }
146148 , scrollBeyondLastLine: false
147− , scrollbar: { vertical: "hidden", verticalScrollBarSize: 20 }
148149 , hideCursorInOverviewRuler: true
149150 , overviewRulerBorder: false
151+ , renderLineHighlightOnlyWhenFocus: true
152+ , scrollbar: { alwaysConsumeMouseWheel: false }
153+ , renderLineHighlight: "none"
150154 }
151155 , language
152156 -- https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages