git.iko.soy/rowtype-yoga/psfp
on master help sign in
Highlighting works well enough
a6f9596Mark Eibes
components/src/React/SyntaxHighlighter/Component.jsnew file+136
compare with master
unifiedsplit
@@ -0,0 +1,136 @@
1+"use strict";
2+Object.defineProperty(exports, "__esModule", { value: true });
3+var react_syntax_highlighter_1 = require("react-syntax-highlighter");
4+var purescript = function (hljs) {
5+ var COMMENT = {
6+ variants: [
7+ hljs.COMMENT("--", "$"),
8+ hljs.COMMENT("{-", "-}", {
9+ contains: ["self"],
10+ }),
11+ ],
12+ };
13+ var KEY = {
14+ className: "attribute",
15+ begin: '"?\\w+"?',
16+ relevance: 0,
17+ };
18+ var CONSTRUCTOR = {
19+ className: "type",
20+ begin: "\\b[A-Z][\\w']*",
21+ relevance: 0,
22+ };
23+ var LIST = {
24+ begin: "\\(",
25+ end: "\\)",
26+ illegal: '"',
27+ contains: [
28+ { className: "type", begin: "\\b[A-Z][\\w]*(\\((\\.\\.|,|\\w+)\\))?" },
29+ hljs.inherit(hljs.TITLE_MODE, { begin: "[_a-z][\\w']*" }),
30+ COMMENT,
31+ ],
32+ };
33+ var RECORD = {
34+ begin: "{",
35+ end: "}",
36+ contains: LIST.contains,
37+ };
38+ return {
39+ name: "PureScript",
40+ aliases: ["purs", "purescript"],
41+ keywords: {
42+ keyword: "case " +
43+ "class " +
44+ "data " +
45+ "derive " +
46+ "ado " +
47+ "do " +
48+ "else " +
49+ "if " +
50+ "import " +
51+ "in " +
52+ "infix " +
53+ "infixl " +
54+ "infixr " +
55+ "instance " +
56+ "let " +
57+ "module " +
58+ "newtype " +
59+ "of " +
60+ "then " +
61+ "type " +
62+ "where " +
63+ ": " +
64+ "foreign " +
65+ "forall " +
66+ "∀",
67+ },
68+ contains: [
69+ // Top-level constructions.
70+ {
71+ beginKeywords: "module",
72+ end: "where",
73+ keywords: "module where",
74+ contains: [LIST, COMMENT],
75+ illegal: "\\W\\.|;",
76+ },
77+ {
78+ begin: "\\bimport\\b",
79+ end: "$",
80+ keywords: "import as hiding",
81+ contains: [LIST, COMMENT],
82+ illegal: "\\W\\.|;",
83+ },
84+ {
85+ className: "class",
86+ begin: "^(\\s*)?(class|instance)\\b",
87+ end: "where",
88+ keywords: "class instance where",
89+ contains: [CONSTRUCTOR, LIST, COMMENT],
90+ },
91+ {
92+ className: "class",
93+ begin: "\\b(data|(new)?type)\\b",
94+ end: "$",
95+ keywords: "data family type newtype derive",
96+ contains: [CONSTRUCTOR, LIST, RECORD, COMMENT],
97+ },
98+ {
99+ className: "symbol",
100+ begin: "<-|->|\\:\\:|\\\\|=>|<=|forall|∀|\\:|∷",
101+ },
102+ // {
103+ // begin: "[{,]\\s*",
104+ // end: "\\s*(?::{2}|∷)",
105+ // contains: [KEY],
106+ // },
107+ {
108+ beginKeywords: "default",
109+ end: "$",
110+ contains: [CONSTRUCTOR, LIST, COMMENT],
111+ },
112+ {
113+ beginKeywords: "infix infixl infixr",
114+ end: "$",
115+ contains: [hljs.C_NUMBER_MODE, COMMENT],
116+ },
117+ {
118+ begin: "\\bforeign\\b",
119+ end: "$",
120+ keywords: "foreign import",
121+ contains: [CONSTRUCTOR, hljs.QUOTE_STRING_MODE, COMMENT],
122+ },
123+ // "Whitespaces".
124+ // Literals and names.
125+ // TODO: characters.
126+ hljs.QUOTE_STRING_MODE,
127+ hljs.C_NUMBER_MODE,
128+ CONSTRUCTOR,
129+ hljs.inherit(hljs.TITLE_MODE, { begin: "^[_a-z][\\w']*" }),
130+ COMMENT,
131+ { begin: "->|<-" },
132+ ],
133+ };
134+};
135+react_syntax_highlighter_1.Light.registerLanguage("puresscript", purescript);
136+exports.syntaxHighlighterImpl = react_syntax_highlighter_1.Light;
components/src/React/SyntaxHighlighter/Component.pursnew file+40
@@ -0,0 +1,40 @@
1+module React.Basic.SyntaxHighlighter.Component where
2+
3+import React.Basic (ReactComponent)
4+import React.Basic.DOM (CSS)
5+
6+type HighlighterTheme
7+ = { hljs ∷ CSS
8+ , "hljs-addition" ∷ CSS
9+ , "hljs-attribute" ∷ CSS
10+ , "hljs-built_in" ∷ CSS
11+ , "hljs-bullet" ∷ CSS
12+ , "hljs-comment" ∷ CSS
13+ , "hljs-deletion" ∷ CSS
14+ , "hljs-doctag" ∷ CSS
15+ , "hljs-emphasis" ∷ CSS
16+ , "hljs-keyword" ∷ CSS
17+ , "hljs-link" ∷ CSS
18+ , "hljs-literal" ∷ CSS
19+ , "hljs-meta" ∷ CSS
20+ , "hljs-name" ∷ CSS
21+ , "hljs-quote" ∷ CSS
22+ , "hljs-section" ∷ CSS
23+ , "hljs-selector-tag" ∷ CSS
24+ , "hljs-string" ∷ CSS
25+ , "hljs-strong" ∷ CSS
26+ , "hljs-subst" ∷ CSS
27+ , "hljs-symbol" ∷ CSS
28+ , "hljs-template-tag" ∷ CSS
29+ , "hljs-template-variable" ∷ CSS
30+ , "hljs-title" ∷ CSS
31+ , "hljs-type" ∷ CSS
32+ , "hljs-variable" ∷ CSS
33+ }
34+
35+foreign import syntaxHighlighterImpl ∷
36+ ReactComponent
37+ { language ∷ String
38+ , style ∷ HighlighterTheme
39+ , children ∷ String
40+ }
components/src/React/SyntaxHighlighter/Component.tsnew file+149
@@ -0,0 +1,149 @@
1+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
2+
3+const purescript = (hljs) => {
4+ var COMMENT = {
5+ variants: [
6+ hljs.COMMENT("--", "$"),
7+ hljs.COMMENT("{-", "-}", {
8+ contains: ["self"],
9+ }),
10+ ],
11+ };
12+
13+ var KEY = {
14+ className: "attribute",
15+ begin: '"?\\w+"?',
16+ relevance: 0,
17+ };
18+
19+ var CONSTRUCTOR = {
20+ className: "type",
21+ begin: "\\b[A-Z][\\w']*", // TODO: other constructors (build-in, infix).
22+ relevance: 0,
23+ };
24+
25+ var LIST = {
26+ begin: "\\(",
27+ end: "\\)",
28+ illegal: '"',
29+ contains: [
30+ { className: "type", begin: "\\b[A-Z][\\w]*(\\((\\.\\.|,|\\w+)\\))?" },
31+ hljs.inherit(hljs.TITLE_MODE, { begin: "[_a-z][\\w']*" }),
32+ COMMENT,
33+ ],
34+ };
35+
36+ var RECORD = {
37+ begin: "{",
38+ end: "}",
39+ contains: LIST.contains,
40+ };
41+
42+ return {
43+ name: "PureScript",
44+ aliases: ["purs", "purescript"],
45+ keywords: {
46+ keyword:
47+ "case " +
48+ "class " +
49+ "data " +
50+ "derive " +
51+ "ado " +
52+ "do " +
53+ "else " +
54+ "if " +
55+ "import " +
56+ "in " +
57+ "infix " +
58+ "infixl " +
59+ "infixr " +
60+ "instance " +
61+ "let " +
62+ "module " +
63+ "newtype " +
64+ "of " +
65+ "then " +
66+ "type " +
67+ "where " +
68+ ": " +
69+ "foreign " +
70+ "forall " +
71+ "∀",
72+ },
73+ contains: [
74+ // Top-level constructions.
75+
76+ {
77+ beginKeywords: "module",
78+ end: "where",
79+ keywords: "module where",
80+ contains: [LIST, COMMENT],
81+ illegal: "\\W\\.|;",
82+ },
83+ {
84+ begin: "\\bimport\\b",
85+ end: "$",
86+ keywords: "import as hiding",
87+ contains: [LIST, COMMENT],
88+ illegal: "\\W\\.|;",
89+ },
90+
91+ {
92+ className: "class",
93+ begin: "^(\\s*)?(class|instance)\\b",
94+ end: "where",
95+ keywords: "class instance where",
96+ contains: [CONSTRUCTOR, LIST, COMMENT],
97+ },
98+ {
99+ className: "class",
100+ begin: "\\b(data|(new)?type)\\b",
101+ end: "$",
102+ keywords: "data family type newtype derive",
103+ contains: [CONSTRUCTOR, LIST, RECORD, COMMENT],
104+ },
105+ {
106+ className: "symbol",
107+ begin: "<-|->|\\:\\:|\\\\|=>|<=|forall|∀|\\:|∷",
108+ },
109+ // {
110+ // begin: "[{,]\\s*",
111+ // end: "\\s*(?::{2}|∷)",
112+ // contains: [KEY],
113+ // },
114+ {
115+ beginKeywords: "default",
116+ end: "$",
117+ contains: [CONSTRUCTOR, LIST, COMMENT],
118+ },
119+ {
120+ beginKeywords: "infix infixl infixr",
121+ end: "$",
122+ contains: [hljs.C_NUMBER_MODE, COMMENT],
123+ },
124+ {
125+ begin: "\\bforeign\\b",
126+ end: "$",
127+ keywords: "foreign import",
128+ contains: [CONSTRUCTOR, hljs.QUOTE_STRING_MODE, COMMENT],
129+ },
130+
131+ // "Whitespaces".
132+
133+ // Literals and names.
134+
135+ // TODO: characters.
136+ hljs.QUOTE_STRING_MODE,
137+ hljs.C_NUMBER_MODE,
138+ CONSTRUCTOR,
139+ hljs.inherit(hljs.TITLE_MODE, { begin: "^[_a-z][\\w']*" }),
140+
141+ COMMENT,
142+
143+ { begin: "->|<-" }, // No markup, relevance booster
144+ ],
145+ };
146+};
147+
148+SyntaxHighlighter.registerLanguage("puresscript", purescript);
149+exports.syntaxHighlighterImpl = SyntaxHighlighter;
components/src/Yoga/Button/Component.purs+5−9
@@ -1,17 +1,13 @@
1module Yoga.Button.Component where
1module Yoga.Button.Component where
2
2
3import Prelude
3import Prelude
4−import CSS (Color, ColorSpace(..), angular, black, cssStringRGBA, deg, desaturate, pct, saturate)
4+import CSS (Color, ColorSpace(..), cssStringRGBA)
5−import CSS as C
6import CSS as Color
5import CSS as Color
7−import Color (mixCubehelix)
8−import Color.Scheme.Clrs (blue)
9import Data.Array.NonEmpty as NEA
6import Data.Array.NonEmpty as NEA
10import Data.Foldable (intercalate)
7import Data.Foldable (intercalate)
11import Data.Interpolate (i)
8import Data.Interpolate (i)
12import Data.Maybe (Maybe)
9import Data.Maybe (Maybe)
13import Data.Monoid (guard)
10import Data.Monoid (guard)
14−import Data.Tuple.Nested ((/\))
15import Effect (Effect)
11import Effect (Effect)
16import JSS (JSSClasses, JSSElem, jssClasses)
12import JSS (JSSClasses, JSSElem, jssClasses)
17import React.Basic (JSX)
13import React.Basic (JSX)
@@ -110,16 +106,16 @@ styles =
110 , backgroundClip: "border-box"
106 , backgroundClip: "border-box"
111 , background:
107 , background:
112 linearGradient (if theme.isLight then "180deg" else "0deg")
108 linearGradient (if theme.isLight then "180deg" else "0deg")
113− [ more 0.02 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedBackwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedForwards) (if theme.isLight then 0.94 else 0.85))
109+ [ (if theme.isLight then Color.rotateHue 290.0 <<< Color.desaturate 0.33 else darken 0.16) $ more 0.08 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedBackwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedForwards) (if theme.isLight then 0.94 else 0.85))
114− , less 0.03 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedForwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedBackwards) (if theme.isLight then 0.84 else 0.70))
110+ , (if theme.isLight then Color.rotateHue 290.0 <<< Color.desaturate 0.33 else darken 0.16) $ less 0.05 $ Color.mix HSL theme.backgroundColour theme.highlightColourRotatedForwards 0.05 # (flip (Color.mix HSL theme.highlightColourRotatedBackwards) (if theme.isLight then 0.84 else 0.70))
115 ]
111 ]
116 , display: "inline-block"
112 , display: "inline-block"
117 }
113 }
118 , btn:
114 , btn:
119 { background:
115 { background:
120 linearGradient "127deg"
116 linearGradient "127deg"
121− [ theme.highlightColourRotatedBackwards # Color.rotateHue (-10.0)
117+ [ (if theme.isLight then darken 0.1 else identity) $ theme.highlightColourRotatedBackwards
122− , theme.highlightColourRotatedForwards # Color.rotateHue (10.0)
118+ , (if theme.isLight then darken 0.1 else identity) $ darken 0.2 $ theme.highlightColourRotatedForwards
123 ]
119 ]
124 , boxShadow:
120 , boxShadow:
125 "0 var(--s-5) var(--s-2)" <> (Color.cssStringRGBA $ withAlpha 0.1 Color.black)
121 "0 var(--s-5) var(--s-2)" <> (Color.cssStringRGBA $ withAlpha 0.1 Color.black)
components/src/Yoga/FillInTheGaps/Component.purs+12−8
@@ -30,17 +30,18 @@ import React.Basic.Helpers (jsx)
30import React.Basic.Hooks (component, useState)
30import React.Basic.Hooks (component, useState)
31import React.Basic.Hooks as React
31import React.Basic.Hooks as React
32import React.Basic.Hooks.Spring (useTransition)
32import React.Basic.Hooks.Spring (useTransition)
33+import React.Basic.SyntaxHighlighter.Component (HighlighterTheme, syntaxHighlighterImpl)
33import Shared.Models.Body (CompileResult, RunResult)
34import Shared.Models.Body (CompileResult, RunResult)
34−import Type.Row (type (+))
35import Yoga.Button.Component (ButtonType(..), mkButton)
35import Yoga.Button.Component (ButtonType(..), mkButton)
36import Yoga.ClickAway.Component as ClickAway
36import Yoga.ClickAway.Component as ClickAway
37import Yoga.CloseIcon.Component as CloseIcon
37import Yoga.CloseIcon.Component as CloseIcon
38import Yoga.Cluster.Component as Cluster
38import Yoga.Cluster.Component as Cluster
39import Yoga.Compiler.Types (Compiler)
39import Yoga.Compiler.Types (Compiler)
40import Yoga.Helpers ((?||))
40import Yoga.Helpers ((?||))
41−import Yoga.Highlighter.Types (Highlighter)
42import Yoga.InlineCode.Component as InlineCode
41import Yoga.InlineCode.Component as InlineCode
43import Yoga.Modal.Component as Modal
42import Yoga.Modal.Component as Modal
43+import Yoga.Theme.Styles (useTheme)
44+import Yoga.Theme.Syntax (mkHighlighterTheme)
44
45
45data Segment
46data Segment
46 = ExpectedResult String
47 = ExpectedResult String
@@ -82,14 +83,14 @@ visibleRange arr = { start, end }
82 start = A.findIndex (_ == [ Start ]) arr ?|| 0
83 start = A.findIndex (_ == [ Start ]) arr ?|| 0
83 end = A.findIndex (_ == [ End ]) arr ?|| A.length arr
84 end = A.findIndex (_ == [ End ]) arr ?|| A.length arr
84
85
85−renderSegments ∷ ReactComponent InlineCode.Props -> ((Array (Array Segment) -> Array (Array Segment)) -> Effect Unit) -> Array (Array Segment) -> JSX
86+renderSegments ∷ HighlighterTheme -> ReactComponent InlineCode.Props -> ((Array (Array Segment) -> Array (Array Segment)) -> Effect Unit) -> Array (Array Segment) -> JSX
86−renderSegments ic update arrs = R.div_ (A.mapWithIndex renderLine arrs)
87+renderSegments highlighterTheme ic update arrs = R.div_ (A.mapWithIndex renderLine arrs)
87 where
88 where
88 { start, end } = visibleRange arrs
89 { start, end } = visibleRange arrs
89 renderLine i l = R.div_ (A.mapWithIndex (renderSegment i) l)
90 renderLine i l = R.div_ (A.mapWithIndex (renderSegment i) l)
90 renderSegment i j s =
91 renderSegment i j s =
91 if between start end i then case s of
92 if between start end i then case s of
92− Filler s' -> R.code_ [ R.text s' ]
93+ Filler s' -> element syntaxHighlighterImpl { style: highlighterTheme, language: "purescript", children: s' }
93 Hole width _ ->
94 Hole width _ ->
94 element ic
95 element ic
95 $ justifill
96 $ justifill
@@ -135,10 +136,10 @@ toSegment = case _ of
135 other -> Filler other
136 other -> Filler other
136
137
137type Ctx r
138type Ctx r
138− = (Compiler + Highlighter r)
139+ = (Compiler r)
139
140
140makeComponent ∷ { | Ctx () } -> Effect (ReactComponent { code ∷ String })
141makeComponent ∷ { | Ctx () } -> Effect (ReactComponent { code ∷ String })
141−makeComponent { compileAndRun, highlight } = do
142+makeComponent { compileAndRun } = do
142 ic <- InlineCode.makeComponent
143 ic <- InlineCode.makeComponent
143 modal <- Modal.makeComponent
144 modal <- Modal.makeComponent
144 closeIcon <- CloseIcon.makeComponent
145 closeIcon <- CloseIcon.makeComponent
@@ -152,6 +153,9 @@ makeComponent { compileAndRun, highlight } = do
152 initialSegments = lines <#> \line -> rawSegments line <#> toSegment
153 initialSegments = lines <#> \line -> rawSegments line <#> toSegment
153 segments /\ modifySegments <- useState initialSegments
154 segments /\ modifySegments <- useState initialSegments
154 result /\ modifyResult <- useState Nothing
155 result /\ modifyResult <- useState Nothing
156+ cssTheme <- useTheme
157+ let
158+ highlighterTheme = mkHighlighterTheme cssTheme
155 modalTransitions <-
159 modalTransitions <-
156 useTransition [ result ] (Just show)
160 useTransition [ result ] (Just show)
157 $ css
161 $ css
@@ -184,7 +188,7 @@ makeComponent { compileAndRun, highlight } = do
184 modifyResult (const (Just $ res)) # liftEffect
188 modifyResult (const (Just $ res)) # liftEffect
185 pure
189 pure
186 $ fragment
190 $ fragment
187− $ [ renderSegments ic (modifySegments) segments
191+ $ [ renderSegments highlighterTheme ic (modifySegments) segments
188 , jsx cluster {}
192 , jsx cluster {}
189 [ R.div_
193 [ R.div_
190 [ jsx button
194 [ jsx button
components/src/Yoga/FillInTheGaps/Stories.purs+8−20
@@ -2,29 +2,18 @@ module Yoga.FillInTheGaps.Stories where
2
2
3import Prelude hiding (add)
3import Prelude hiding (add)
4import Data.Either (Either(..))
4import Data.Either (Either(..))
5−import Data.Foldable (foldMap)
6import Data.Maybe (Maybe(..))
5import Data.Maybe (Maybe(..))
7import Data.String as String
6import Data.String as String
8−import Data.Tuple.Nested ((/\))
9import Effect (Effect)
7import Effect (Effect)
10−import React.Basic.DOM (css)
11−import React.Basic.DOM as R
12−import React.Basic.Hooks (component, element, fragment, memo, useState)
13−import React.Basic.Hooks as React
14import Storybook.Decorator.FullScreen (fullScreenDecorator)
8import Storybook.Decorator.FullScreen (fullScreenDecorator)
15import Storybook.React (Storybook, add, addDecorator, storiesOf)
9import Storybook.React (Storybook, add, addDecorator, storiesOf)
16−import Yoga.Editor (mkEditor)
17import Yoga.FillInTheGaps.Component as FillInTheGaps
10import Yoga.FillInTheGaps.Component as FillInTheGaps
18−import Yoga.Highlighter.Monaco (monacoHighlighter)
19−import Yoga.Highlighter.Types (HTMLString(..), Language(..))
20
11
21ctx ∷ { | FillInTheGaps.Ctx () }
12ctx ∷ { | FillInTheGaps.Ctx () }
22ctx =
13ctx =
23 { compileAndRun
14 { compileAndRun
24− , highlight
25 }
15 }
26 where
16 where
27− highlight c Purescript = pure (HTMLString c)
28 compileAndRun = case _ of
17 compileAndRun = case _ of
29 { code }
18 { code }
30 | code == correctCode -> pure (Right { code: Nothing, stdout: "Hello World\n", stderr: "" })
19 | code == correctCode -> pure (Right { code: Nothing, stdout: "Hello World\n", stderr: "" })
@@ -37,10 +26,15 @@ stories = do
37 add "The FillInTheGaps" (FillInTheGaps.makeComponent ctx)
26 add "The FillInTheGaps" (FillInTheGaps.makeComponent ctx)
38 [ { code: codeWithHoles }
27 [ { code: codeWithHoles }
39 ]
28 ]
40− add "The FillInTheGaps with highlighted code" withHighlighting
41− [ { code: codeWithHoles }
42− ]
43
29
30+codeWithHoles =
31+ """
32+--result Hello World
33+--start here
34+module Main where
35+import Batteries
36+
37+-- Some dumb comment
44withHighlighting = do
38withHighlighting = do
45 editorComponent <- memo mkEditor
39 editorComponent <- memo mkEditor
46 component "WithHighlighting" \(props ∷ { code ∷ String }) -> React.do
40 component "WithHighlighting" \(props ∷ { code ∷ String }) -> React.do
@@ -67,14 +61,8 @@ withHighlighting = do
67 element g { code: codeWithHoles }
61 element g { code: codeWithHoles }
68 ]
62 ]
69
63
70−codeWithHoles =
71− """
72−--result Hello World
73−module Main where
74−import Batteries
75
64
76main :: Effect Unit
65main :: Effect Unit
77−--start here
78main = log
66main = log
79 "{-Hello World-}"
67 "{-Hello World-}"
80--end here
68--end here
components/src/Yoga/Highlighter.pursdeleted−3
@@ -1,3 +0,0 @@
1−module Yoga.Highlighter where
2−
3−import Yoga.Highlighter.Types (Highlighter)
components/src/Yoga/Highlighter/Monaco.pursdeleted−24
@@ -1,24 +0,0 @@
1−module Yoga.Highlighter.Monaco where
2−
3−import Prelude
4−import Control.Promise as Promise
5−import Effect.Aff (Aff)
6−import Yoga.Editor (Editor, colorizeImpl)
7−import Yoga.Highlighter.Types (HTMLString(..), Highlighter, Language(..))
8−
9−monacoHighlighter ∷ Editor -> { | Highlighter () }
10−monacoHighlighter editor =
11− { highlight
12− }
13− where
14− langToString ∷ Language -> String
15− langToString Purescript = "purescript"
16− highlight ∷ String -> Language -> Aff HTMLString
17− highlight code lang =
18− HTMLString
19− <$> Promise.toAff
20− ( colorizeImpl code
21− (langToString lang)
22− { tabSize: 2 }
23− editor
24− )
components/src/Yoga/Highlighter/Types.pursdeleted−15
@@ -1,15 +0,0 @@
1−module Yoga.Highlighter.Types where
2−
3−import Effect.Aff (Aff)
4−
5−data Language
6− = Purescript
7−
8−newtype HTMLString
9− = HTMLString String
10−
11−type Highlighter r
12− = ( highlight ∷
13− String -> Language -> Aff HTMLString
14− | r
15− )
components/src/Yoga/Monaco/Editor.js+2
@@ -874,6 +874,7 @@ exports.purescriptSyntax = {
874 "data",
874 "data",
875 "derive",
875 "derive",
876 "do",
876 "do",
877+ "ado",
877 "else",
878 "else",
878 "if",
879 "if",
879 "import",
880 "import",
@@ -899,6 +900,7 @@ exports.purescriptSyntax = {
899 "foreign",
900 "foreign",
900 "forall",
901 "forall",
901 "∷",
902 "∷",
903+ "∀",
902 ],
904 ],
903 extraKeywords: [],
905 extraKeywords: [],
904 typeKeywords: [],
906 typeKeywords: [],
components/src/Yoga/Monaco/Editor.ts+2−2
@@ -1,7 +1,5 @@
1"use strict";
1"use strict";
2
2
3−exports.newMonacoEditorImpl = require("monaco-editor/min/vs/editor");
4−
5exports.monacoEditorImpl = async () => {
3exports.monacoEditorImpl = async () => {
6 const x = await import("react-monaco-editor");
4 const x = await import("react-monaco-editor");
7 return x.default;
5 return x.default;
@@ -845,6 +843,7 @@ exports.purescriptSyntax = {
845 "data",
843 "data",
846 "derive",
844 "derive",
847 "do",
845 "do",
846+ "ado",
848 "else",
847 "else",
849 "if",
848 "if",
850 "import",
849 "import",
@@ -870,6 +869,7 @@ exports.purescriptSyntax = {
870 "foreign",
869 "foreign",
871 "forall",
870 "forall",
872 "∷",
871 "∷",
872+ "∀",
873 ],
873 ],
874
874
875 extraKeywords: [],
875 extraKeywords: [],
components/src/Yoga/Theme.purs+5−5
@@ -10,15 +10,15 @@ import Data.Symbol (SProxy(..))
10import Record.Builder as RB
10import Record.Builder as RB
11import Yoga.Theme.Types (Theme, CSSTheme)
11import Yoga.Theme.Types (Theme, CSSTheme)
12
12
13−increaseContrast ∷ Color -> Color -> Color
13+increaseContrastTo ∷ Number -> Color -> Color -> Color
14−increaseContrast contrastWith = go 0
14+increaseContrastTo target contrastWith = go 0
15 where
15 where
16− modify = if isLight contrastWith then darken else lighten
16+ modify x = if isLight contrastWith then (darken x <<< desaturate (x * (-1.5))) else (lighten x <<< desaturate (x * 0.5))
17 go i col =
17 go i col =
18− if contrast contrastWith col >= 7.5 || i >= 20 then
18+ if contrast contrastWith col >= ((if isLight contrastWith then (target * 0.8) else target)) || i >= 100 then
19 col
19 col
20 else
20 else
21− go (i + 1) (modify 0.1 col)
21+ go (i + 1) (modify 0.005 col)
22
22
23withAlpha ∷ Number -> Color -> Color
23withAlpha ∷ Number -> Color -> Color
24withAlpha alpha c1 = Color.rgba' r g b alpha
24withAlpha alpha c1 = Color.rgba' r g b alpha
components/src/Yoga/Theme/Default.purs+1−1
@@ -19,7 +19,7 @@ darkTheme =
19 { backgroundColour: Color.hsl 238.0 0.12 0.20
19 { backgroundColour: Color.hsl 238.0 0.12 0.20
20 , textColour: Color.hsl 225.0 0.28 0.90
20 , textColour: Color.hsl 225.0 0.28 0.90
21 , interfaceColour: Color.hsl 225.0 0.48 0.12
21 , interfaceColour: Color.hsl 225.0 0.48 0.12
22− , highlightColour: Color.hsl 265.0 0.58 0.77
22+ , highlightColour: Color.hsl 285.0 0.88 0.72
23 , altHighlightColour: Color.hsl 84.0 0.617 0.631
23 , altHighlightColour: Color.hsl 84.0 0.617 0.631
24 , textFontFamily: cons' "Rubik" systemFontStack
24 , textFontFamily: cons' "Rubik" systemFontStack
25 , headingFontFamily: cons' "Rubik" systemFontStack
25 , headingFontFamily: cons' "Rubik" systemFontStack
components/src/Yoga/Theme/Syntax.pursnew file+127
@@ -0,0 +1,127 @@
1+module Yoga.Theme.Syntax where
2+
3+import Prelude
4+import Color as Color
5+import React.Basic.DOM (css)
6+import React.Basic.SyntaxHighlighter.Component (HighlighterTheme)
7+import Yoga.Theme (increaseContrastTo)
8+import Yoga.Theme.Types (CSSTheme)
9+
10+mkHighlighterTheme ∷ CSSTheme -> HighlighterTheme
11+mkHighlighterTheme theme =
12+ let
13+ contrasted = increaseContrastTo 6.0 theme.backgroundColour
14+ in
15+ { hljs:
16+ css
17+ { display: "inline"
18+ , overflowX: "auto"
19+ }
20+ , "hljs-keyword":
21+ css
22+ { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-140.0) theme.highlightColour))
23+ , fontWeight: "normal"
24+ }
25+ , "hljs-symbol":
26+ css
27+ { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-140.0) theme.highlightColour))
28+ }
29+ , "hljs-type":
30+ css
31+ { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-80.0) theme.highlightColour))
32+ , fontWeight: "normal"
33+ }
34+ , "hljs-string":
35+ css
36+ { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-20.0) theme.highlightColour))
37+ }
38+ , "hljs-title":
39+ css
40+ { color: Color.cssStringRGBA (contrasted (Color.rotateHue (-120.0) theme.highlightColour))
41+ , fontStyle: "normal"
42+ }
43+ , "hljs-selector-tag":
44+ css
45+ { color: "yellow"
46+ , fontWeight: "bold"
47+ }
48+ , "hljs-literal":
49+ css
50+ { color: "green"
51+ , fontWeight: "bold"
52+ }
53+ , "hljs-section":
54+ css
55+ { color: "darkslateblue"
56+ , fontWeight: "bold"
57+ }
58+ , "hljs-link":
59+ css
60+ { color: "yellow"
61+ }
62+ , "hljs-subst":
63+ css
64+ { color: "#ddd"
65+ }
66+ , "hljs-name":
67+ css
68+ { color: "#d88"
69+ , fontWeight: "bold"
70+ }
71+ , "hljs-attribute":
72+ css
73+ { color: "tomato"
74+ }
75+ , "hljs-bullet":
76+ css
77+ { color: "#d88"
78+ }
79+ , "hljs-built_in":
80+ css
81+ { color: "#d88"
82+ }
83+ , "hljs-addition":
84+ css
85+ { color: "#d88"
86+ }
87+ , "hljs-variable":
88+ css
89+ { color: "#d88"
90+ }
91+ , "hljs-template-tag":
92+ css
93+ { color: "#d88"
94+ }
95+ , "hljs-template-variable":
96+ css
97+ { color: "#d88"
98+ }
99+ , "hljs-comment":
100+ css
101+ { color: "#777"
102+ }
103+ , "hljs-quote":
104+ css
105+ { color: "#777"
106+ }
107+ , "hljs-deletion":
108+ css
109+ { color: "#777"
110+ }
111+ , "hljs-meta":
112+ css
113+ { color: "#777"
114+ }
115+ , "hljs-doctag":
116+ css
117+ { fontWeight: "bold"
118+ }
119+ , "hljs-strong":
120+ css
121+ { fontWeight: "bold"
122+ }
123+ , "hljs-emphasis":
124+ css
125+ { fontStyle: "italic"
126+ }
127+ }