git.iko.soy/rowtype-yoga/psfp
on 21162af help sign in
rowtype-yoga/psfp/blog/src/components/PSLayout.purs
235 lines 7.1 kB history raw
1module PSLayout where
3import Prelude
4import Data.Array as Array
5import Data.Array.NonEmpty as NEA
6import Data.Maybe (Maybe(..), fromMaybe)
7import Data.Nullable (Nullable)
8import Data.Nullable as Nullable
9import Data.String as String
10import Effect (Effect)
11import Effect.Unsafe (unsafePerformEffect)
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, useState)
20import React.Basic.Hooks as React
21import Yoga.Box.Component as Box
22import Yoga.CompileEditor.Component (mkCompileEditor)
23import Yoga.Compiler.Api (apiCompiler)
24import Yoga.FillInTheGaps.Component as FillInTheGaps
25import Yoga.Header.Component (mkHeader)
26import Yoga.InlineCode.Component as InlineCode
27import Yoga.Theme (fromTheme)
28import Yoga.Theme.CSSBaseline (mkCssBaseline)
29import Yoga.Theme.Default (darkTheme)
30import Yoga.Theme.Provider (mkThemeProvider)
31import Yoga.Theme.Styles (makeStylesJSS)
32import Yoga.Theme.Types (CSSTheme)
33import Yoga.Typography.Header (HeadingLevel(..), mkH)
34import Yoga.Typography.Paragraph (mkP)
35import Yoga.WithSidebar.Component (makeComponent) as WithSidebar
37type SiteQueryResult
38 = { site ∷
39 { siteMetadata ∷
40 { title ∷ String
41 , menuLinks ∷ Array { name ∷ String, link ∷ String }
42 }
43 }
44 }
46type PreProps
47 = { children ∷
48 Nullable
49 { props ∷
50 Nullable
51 { mdxType ∷ Nullable String
52 , children ∷ Nullable String
53 , className ∷ Nullable String
54 }
55 }
56 }
58mkLayout ∷
59 FetchImpl ->
60 Effect
61 ( ReactComponent
62 { children ∷ ReactChildren JSX
63 , siteInfo ∷ SiteQueryResult
64 }
65 )
66mkLayout fetchImpl = do
67 themeProvider <- mkThemeProvider
68 mdxProviderComponent <- mkMdxProviderComponent fetchImpl
69 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
70 pure
71 $ element themeProvider
72 { theme: fromTheme darkTheme
73 , children:
74 [ element mdxProviderComponent
75 { children
76 , siteInfo
77 }
78 ]
79 }
81mkSecret :: Effect ( ReactComponent { kids ∷ Array JSX , visible ∷ Boolean })
82mkSecret = do
83 component "Secret" \{ kids, visible } -> React.do
84 pure
85 $ R.div
86 { style: R.css { visibility: if visible then "visible" else "hidden" }
87 , children: kids
88 }
90mkMdxProviderComponent ∷
91 FetchImpl ->
92 Effect
93 ( ReactComponent
94 { children ∷ ReactChildren JSX
95 , siteInfo ∷ SiteQueryResult
96 }
97 )
98mkMdxProviderComponent fetchImpl = do
99 cssBaseline <- mkCssBaseline
100 editor <- mkCompileEditor fetchImpl
101 fillInTheGaps <- FillInTheGaps.makeComponent (apiCompiler fetchImpl)
102 box <- Box.makeComponent
103 sidebar <- mkSidebar
104 header <- mkHeader
105 yogaInlineCode <- InlineCode.makeComponent
106 h <- mkH
107 p <- mkP
108 secret <- mkSecret
109 useStyles <-
110 makeStylesJSS
111 $ jssClasses \(theme ∷ CSSTheme) ->
112 { code:
113 { fontFamily: theme.codeFontFamily # NEA.head
114 , backgroundColor: theme.interfaceColour
115 , fontSize: "10pt"
116 , border: "1px solid #383c39"
117 , padding: "3px"
118 , borderRadius: "3px"
119 }
120 , flexer:
121 { display: "flex"
122 , flexDirection: "row"
123 }
124 }
125 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do
126 classes <- useStyles {}
127 sections <- useState []
128 let
129 baseline child = element cssBaseline { kids: child }
131 siteInfoJSX =
132 R.div
133 { children:
134 [ jsx header { className: "" } [ R.text siteInfo.site.siteMetadata.title ]
135 , element sidebar { links: siteInfo.site.siteMetadata.menuLinks }
136 , jsx box {} (reactChildrenToArray children)
137 ]
138 }
140 mdxComponents =
141 { h1:
142 \props ->
143 element h ({ level: H2, text: props.children, className: Nothing })
144 , h2:
145 \props ->
146 element h { level: H3, text: props.children, className: Nothing }
147 , h3:
148 \props ->
149 element h { level: H4, text: props.children, className: Nothing }
150 , p:
151 \props ->
152 R.div
153 { children: [ element p { text: props.children } ]
154 }
155 , thematicBreak:
156 \props -> R.div_ [ R.text "HOUI" ]
157 , inlineCode:
158 \props -> do
159 R.span { className: classes.code, children: props.children }
160 , pre:
161 \(props ∷ PreProps) -> do
162 let
163 childrenQ = Nullable.toMaybe props.children
165 propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ
167 mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ
169 childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ
171 classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ
173 isCode = fromMaybe false (mdxTypeQ <#> eq "code")
175 codeQ = childrenQ2
177 height =
178 (fromMaybe 200 >>> show >>> (_ <> "px")) do
179 code <- codeQ
180 pure
181 ( String.split (String.Pattern "\n") code
182 # Array.length
183 # \x -> (x * 12) + 100
184 )
186 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
187 case isCode, language of
188 true, "puregaps" -> element fillInTheGaps { code: fromMaybe "" codeQ }
189 true, _ ->
190 element editor
191 { initialCode: fromMaybe "" codeQ
192 , height
193 , language
194 }
195 false, _ -> element (unsafeCreateDOMComponent "pre") props
196 }
197 pure
198 $ baseline
199 [ element mdxProvider
200 { children:
201 [ siteInfoJSX
202 ]
203 , components: mdxComponents
204 }
205 ]
207mkSidebar = do
208 withSidebar <- WithSidebar.makeComponent
209 useStyles <-
210 makeStylesJSS
211 $ jssClasses \(theme ∷ CSSTheme) ->
212 { flexer:
213 jss
214 { display: "flex"
215 , flexDirection: "row"
216 , width: "300px"
217 , height: "300px"
218 }
219 }
220 component "Sidebar" \{ links } -> React.do
221 classes <- useStyles {}
222 pure
223 $ element withSidebar
224 ( justifill
225 { sidebarChildren: [ R.div_ [ R.text "hahahaha" ] ]
226 , notSidebarChildren: [] ∷ Array JSX
227 }
228 )
230foreign import mdxProvider ∷
231 ∀ r.
232 ReactComponent
233 { components ∷ { | r } -- TODO Don't lie
234 , children ∷ Array JSX
235 }