@@ -1,7 +1,7 @@
11module PSLayout where
22
33import Prelude
4−
4+import CSS.Safer (cssSafer)
55import CSSBaseline (mkCssBaseline)
66import CompileEditor.Component (mkCompileEditor)
77import Data.Array as Array
@@ -15,9 +15,12 @@ import React.Basic (JSX, ReactComponent)
1515import React.Basic.DOM (unsafeCreateDOMComponent)
1616import React.Basic.DOM as R
1717import React.Basic.Hooks (ReactChildren, componentWithChildren, element)
18+import React.Basic.Hooks as React
1819import Theme (fromTheme)
1920import Theme.Default (darkTheme)
2021import Theme.Provider (mkThemeProvider)
22+import Theme.Styles (makeStyles)
23+import Theme.Types (CSSTheme)
2124import Typography.Header (HeadingLevel(..), mkH)
2225import Typography.Paragraph (mkP)
2326import Unsafe.Coerce (unsafeCoerce)
@@ -25,6 +28,18 @@ import Unsafe.Coerce (unsafeCoerce)
2528type SiteQueryResult
2629 = { site ∷ { siteMetadata ∷ { title ∷ String } } }
2730
31+type PreProps
32+ = { children ∷
33+ Nullable
34+ { props ∷
35+ Nullable
36+ { mdxType ∷ Nullable String
37+ , children ∷ Nullable String
38+ , className ∷ Nullable String
39+ }
40+ }
41+ }
42+
2843mkLayout ∷
2944 ∀ children.
3045 FetchImpl ->
@@ -36,11 +51,52 @@ mkLayout ∷
3651 )
3752mkLayout fetchImpl = do
3853 themeProvider <- mkThemeProvider
54+ mdxProviderComponent <- mkMdxProviderComponent fetchImpl
55+ componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
56+ pure
57+ $ element themeProvider
58+ { theme: fromTheme darkTheme
59+ , children:
60+ [ element mdxProviderComponent
61+ { children
62+ , siteInfo
63+ }
64+ ]
65+ }
66+
67+mkMdxProviderComponent ::
68+ ∀ children.
69+ FetchImpl ->
70+ Effect
71+ ( ReactComponent
72+ { children ∷ ReactChildren children
73+ , siteInfo ∷ SiteQueryResult
74+ }
75+ )
76+mkMdxProviderComponent fetchImpl = do
3977 cssBaseline <- mkCssBaseline
4078 editor <- mkCompileEditor fetchImpl
4179 h <- mkH
4280 p <- mkP
43− componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
81+ useStyles <-
82+ makeStyles \(theme :: CSSTheme) ->
83+ { code:
84+ cssSafer
85+ { fontFamily: "PragmataPro Liga"
86+ , backgroundColor: theme.interfaceColour
87+ , fontSize: "10pt"
88+ , border: "1px solid #383c39"
89+ , padding: "3px"
90+ , borderRadius: "3px"
91+ }
92+ , margins:
93+ cssSafer
94+ { marginLeft: "35px"
95+ , marginRight: "35px"
96+ }
97+ }
98+ componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do
99+ classes <- useStyles
44100 let
45101 baseline child = element cssBaseline { kids: child }
46102
@@ -59,29 +115,24 @@ mkLayout fetchImpl = do
59115 mdxComponents =
60116 { h1:
61117 \props ->
62− element h { level: H2, text: props.children, className: Nothing }
118+ element h { level: H2, text: props.children, className: Just classes.margins }
63119 , h2:
64120 \props ->
65− element h { level: H3, text: props.children, className: Nothing }
121+ element h { level: H3, text: props.children, className: Just classes.margins }
66122 , h3:
67123 \props ->
68− element h { level: H4, text: props.children, className: Nothing }
124+ element h { level: H4, text: props.children, className: Just classes.margins }
69125 , p:
70126 \props ->
71− element p { text: props.children }
72− , pre:
73− \( props ∷
74− { children ∷
75− Nullable
76− { props ∷
77− Nullable
78− { mdxType ∷ Nullable String
79− , children ∷ Nullable String
80− , className ∷ Nullable String
81− }
82− }
127+ R.div
128+ { children: [ element p { text: props.children } ]
129+ , className: classes.margins
83130 }
84− ) -> do
131+ , inlineCode:
132+ \props -> do
133+ R.span { className: classes.code, children: props.children }
134+ , pre:
135+ \(props ∷ PreProps) -> do
85136 let
86137 childrenQ = Nullable.toMaybe props.children
87138
@@ -97,12 +148,15 @@ mkLayout fetchImpl = do
97148
98149 codeQ = childrenQ2
99150
100− height = (fromMaybe 200 >>> show >>> (_ <> "px")) do
101− code <- codeQ
102− pure (String.split (String.Pattern "\n") code
103− # Array.length
104− # \x -> (x * 12) + 100
105− )
151+ height =
152+ (fromMaybe 200 >>> show >>> (_ <> "px")) do
153+ code <- codeQ
154+ pure
155+ ( String.split (String.Pattern "\n") code
156+ # Array.length
157+ # \x -> (x * 12) + 100
158+ )
159+
106160 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
107161 if isCode then
108162 element editor
@@ -114,17 +168,12 @@ mkLayout fetchImpl = do
114168 element (unsafeCreateDOMComponent "pre") props
115169 }
116170 pure
117− $ element themeProvider
118− { theme: fromTheme darkTheme
119− , children:
120− [ baseline
121− [ element mdxProvider
122− { children: [ siteInfoJSX ]
123− , components: mdxComponents
124− }
125− ]
126− ]
127− }
171+ $ baseline
172+ [ element mdxProvider
173+ { children: [ siteInfoJSX ]
174+ , components: mdxComponents
175+ }
176+ ]
128177
129178foreign import mdxProvider ∷
130179 ∀ r.