git.iko.soy/rowtype-yoga/psfp
on d04de9c help sign in
rowtype-yoga/psfp/blog/src/components/PSLayout.purs
214 lines 6.2 kB history raw
1module PSLayout where
3import Prelude
5import Color (toHexString)
6import Data.Array as Array
7import Data.Maybe (Maybe(..), fromMaybe)
8import Data.Nullable (Nullable)
9import Data.Nullable as Nullable
10import Data.String as String
11import Effect (Effect)
12import JSS (jss, jssClasses)
13import Justifill (justifill)
14import Milkis.Impl (FetchImpl)
15import React.Basic (JSX, ReactComponent)
16import React.Basic.DOM (unsafeCreateDOMComponent)
17import React.Basic.DOM as R
18import React.Basic.Helpers (jsx)
19import React.Basic.Hooks (ReactChildren, component, componentWithChildren, element, reactChildrenToArray)
20import React.Basic.Hooks as React
21import Yoga.CompileEditor.Component (mkCompileEditor)
22import Yoga.Header.Component (mkHeader)
23import Yoga.Theme (fromTheme)
24import Yoga.Theme.CSSBaseline (mkCssBaseline)
25import Yoga.Theme.Default (darkTheme)
26import Yoga.Theme.Provider (mkThemeProvider)
27import Yoga.Theme.Styles (makeStylesJSS)
28import Yoga.Theme.Types (CSSTheme)
29import Yoga.Typography.Header (HeadingLevel(..), mkH)
30import Yoga.Typography.Paragraph (mkP)
31import Yoga.WithSidebar.Component (makeComponent) as WithSidebar
33type SiteQueryResult
34 = { site ∷
35 { siteMetadata ∷
36 { title ∷ String
37 , menuLinks ∷ Array { name ∷ String, link ∷ String }
38 }
39 }
40 }
42type PreProps
43 = { children ∷
44 Nullable
45 { props ∷
46 Nullable
47 { mdxType ∷ Nullable String
48 , children ∷ Nullable String
49 , className ∷ Nullable String
50 }
51 }
52 }
54mkLayout ∷
55 FetchImpl ->
56 Effect
57 ( ReactComponent
58 { children ∷ ReactChildren JSX
59 , siteInfo ∷ SiteQueryResult
60 }
61 )
62mkLayout fetchImpl = do
63 themeProvider <- mkThemeProvider
64 mdxProviderComponent <- mkMdxProviderComponent fetchImpl
65 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
66 pure
67 $ element themeProvider
68 { theme: fromTheme darkTheme
69 , children:
70 [ element mdxProviderComponent
71 { children
72 , siteInfo
73 }
74 ]
75 }
77mkMdxProviderComponent ∷
78 FetchImpl ->
79 Effect
80 ( ReactComponent
81 { children ∷ ReactChildren JSX
82 , siteInfo ∷ SiteQueryResult
83 }
84 )
85mkMdxProviderComponent fetchImpl = do
86 cssBaseline <- mkCssBaseline
87 editor <- mkCompileEditor fetchImpl
88 sidebar <- mkSidebar
89 header <- mkHeader
90 h <- mkH
91 p <- mkP
92 useStyles <-
93 makeStylesJSS
94 $ jssClasses \(theme ∷ CSSTheme) ->
95 { code:
96 { fontFamily: theme.codeFontFamily
97 , backgroundColor: toHexString $ theme.interfaceColour
98 , fontSize: "10pt"
99 , border: "1px solid #383c39"
100 , padding: "3px"
101 , borderRadius: "3px"
102 }
103 , flexer:
104 { display: "flex"
105 , flexDirection: "row"
106 }
107 }
108 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do
109 classes <- useStyles {}
110 let
111 baseline child = element cssBaseline { kids: child }
113 siteInfoJSX =
114 R.div
115 { children:
116 [ jsx header { className: "" } [ R.text siteInfo.site.siteMetadata.title ]
117 , element sidebar { links: siteInfo.site.siteMetadata.menuLinks }
118 , R.div_ (reactChildrenToArray children)
119 ]
120 }
122 mdxComponents =
123 { h1:
124 \props ->
125 element h ({ level: H2, text: props.children, className: Nothing })
126 , h2:
127 \props ->
128 element h { level: H3, text: props.children, className: Nothing }
129 , h3:
130 \props ->
131 element h { level: H4, text: props.children , className: Nothing}
132 , p:
133 \props ->
134 R.div
135 { children: [ element p { text: props.children } ]
136 }
137 , inlineCode:
138 \props -> do
139 R.span { className: classes.code, children: props.children }
140 , pre:
141 \(props ∷ PreProps) -> do
142 let
143 childrenQ = Nullable.toMaybe props.children
145 propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ
147 mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ
149 childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ
151 classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ
153 isCode = fromMaybe false (mdxTypeQ <#> eq "code")
155 codeQ = childrenQ2
157 height =
158 (fromMaybe 200 >>> show >>> (_ <> "px")) do
159 code <- codeQ
160 pure
161 ( String.split (String.Pattern "\n") code
162 # Array.length
163 # \x -> (x * 12) + 100
164 )
166 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
167 if isCode then
168 element editor
169 { initialCode: fromMaybe "" codeQ
170 , height
171 , language
172 }
173 else
174 element (unsafeCreateDOMComponent "pre") props
175 }
176 pure
177 $ baseline
178 [ element mdxProvider
179 { children:
180 [ siteInfoJSX
181 ]
182 , components: mdxComponents
183 }
184 ]
186mkSidebar = do
187 withSidebar <- WithSidebar.makeComponent
188 useStyles <-
189 makeStylesJSS
190 $ jssClasses \(theme ∷ CSSTheme) ->
191 { flexer:
192 jss
193 { display: "flex"
194 , flexDirection: "row"
195 , width: "300px"
196 , height: "300px"
197 }
198 }
199 component "Sidebar" \{ links } -> React.do
200 classes <- useStyles {}
201 pure
202 $ element withSidebar
203 ( justifill
204 { sidebarChildren: [ R.div_ [ R.text "hahahaha" ] ]
205 , notSidebarChildren: [] ∷ Array JSX
206 }
207 )
209foreign import mdxProvider ∷
210 ∀ r.
211 ReactComponent
212 { components ∷ { | r } -- TODO Don't lie
213 , children ∷ Array JSX
214 }