git.iko.soy/rowtype-yoga/psfp
on 29ee243 help sign in
rowtype-yoga/psfp/blog/src/components/PSLayout.purs
134 lines 4.0 kB history raw
1module PSLayout where
3import Prelude
5import CSSBaseline (mkCssBaseline)
6import CompileEditor.Component (mkCompileEditor)
7import Data.Array as Array
8import Data.Maybe (Maybe(..), fromMaybe)
9import Data.Nullable (Nullable)
10import Data.Nullable as Nullable
11import Data.String as String
12import Effect (Effect)
13import Milkis.Impl (FetchImpl)
14import React.Basic (JSX, ReactComponent)
15import React.Basic.DOM (unsafeCreateDOMComponent)
16import React.Basic.DOM as R
17import React.Basic.Hooks (ReactChildren, componentWithChildren, element)
18import Theme (fromTheme)
19import Theme.Default (darkTheme)
20import Theme.Provider (mkThemeProvider)
21import Typography.Header (HeadingLevel(..), mkH)
22import Typography.Paragraph (mkP)
23import Unsafe.Coerce (unsafeCoerce)
25type SiteQueryResult
26 = { site ∷ { siteMetadata ∷ { title ∷ String } } }
28mkLayout ∷
29 ∀ children.
30 FetchImpl ->
31 Effect
32 ( ReactComponent
33 { children ∷ ReactChildren children
34 , siteInfo ∷ SiteQueryResult
35 }
36 )
37mkLayout fetchImpl = do
38 themeProvider <- mkThemeProvider
39 cssBaseline <- mkCssBaseline
40 editor <- mkCompileEditor fetchImpl
41 h <- mkH
42 p <- mkP
43 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
44 let
45 baseline child = element cssBaseline { kids: child }
47 siteInfoJSX =
48 R.div
49 { children:
50 [ element h
51 { level: H1
52 , text: siteInfo.site.siteMetadata.title
53 , className: Nothing
54 }
55 , R.div_ (unsafeCoerce children)
56 ]
57 }
59 mdxComponents =
60 { h1:
61 \props ->
62 element h { level: H2, text: props.children, className: Nothing }
63 , h2:
64 \props ->
65 element h { level: H3, text: props.children, className: Nothing }
66 , h3:
67 \props ->
68 element h { level: H4, text: props.children, className: Nothing }
69 , p:
70 \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 }
83 }
84 ) -> do
85 let
86 childrenQ = Nullable.toMaybe props.children
88 propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ
90 mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ
92 childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ
94 classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ
96 isCode = fromMaybe false (mdxTypeQ <#> eq "code")
98 codeQ = childrenQ2
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 )
106 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
107 if isCode then
108 element editor
109 { initialCode: fromMaybe "" codeQ
110 , height
111 , language
112 }
113 else
114 element (unsafeCreateDOMComponent "pre") props
115 }
116 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 }
129foreign import mdxProvider ∷
130 ∀ r.
131 ReactComponent
132 { components ∷ { | r } -- TODO Don't lie
133 , children ∷ Array JSX
134 }