git.iko.soy/rowtype-yoga/psfp
on 6000b7f help sign in
rowtype-yoga/psfp/blog/src/components/PSLayout.purs
180 lines 6.9 kB history raw
1module PSLayout where
3import Prelude
4import Color as Color
5import Data.Maybe (Maybe(..), fromMaybe)
6import Data.Tuple.Nested ((/\))
7import Effect (Effect)
8import MDX (MDX)
9import MDXProvider (MdxProviderProps)
10import Milkis.Impl (FetchImpl)
11import React.Basic (ReactComponent)
12import React.Basic.DOM as R
13import React.Basic.Emotion as Emotion
14import React.Basic.Hooks (ReactChildren, element, reactComponentWithChildren, useState')
15import React.Basic.Hooks as React
16import Yoga ((/>), (</), (</*))
17import Yoga as Y
18import Yoga.Block as Block
19import Yoga.Block.Atom.Toggle.Types (TogglePosition(..))
20import Yoga.Block.Container as Container
21import Yoga.Block.Container.Style (DarkOrLightMode(..), colour)
22import Yoga.Block.Icon.SVG as Icon
23import Yoga.Block.Internal (_0)
24import Yoga.Block.Modal as Modal
26type SiteQueryResult =
27 { siteMetadata ∷
28 { title ∷ String
29 , menuLinks ∷ Array { name ∷ String, link ∷ String }
30 }
31 }
33data ShowModal
34 = ShowModal Modal.Props
35 | HideModal
37mkLayout ∷
38 FetchImpl ->
39 Effect
40 ( ReactComponent
41 { children ∷ ReactChildren MDX
42 , siteInfo ∷ SiteQueryResult
43 , mdxProviderComponent ∷ ReactComponent MdxProviderProps
44 }
45 )
46mkLayout fetchImpl = do
47 -- mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)
48 reactComponentWithChildren "MDXLayout" \{ children, siteInfo, mdxProviderComponent } -> React.do
49 darkOrLightMode /\ setDarkOrLightMode <- useState' Nothing
50 let
51 maybeTogglePosition =
52 darkOrLightMode
53 <#> case _ of
54 DarkMode -> ToggleIsRight
55 LightMode -> ToggleIsLeft
56 darkThemeToggle =
57 Block.toggle
58 Y.</> do
59 { className: "dark-light-toggle"
60 , css:
61 Emotion.css
62 { marginRight: Emotion.str "0"
63 , marginLeft: Emotion.str "auto"
64 }
65 , setTogglePosition:
66 case _ of
67 ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
68 ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
69 , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition
70 , left:
71 Block.icon
72 Y.</> do
73 { icon: Icon.moon
74 , stroke: Emotion.str "#eef"
75 }
76 , right:
77 Block.icon
78 Y.</> do
79 { icon: Icon.sun
80 , stroke: Emotion.str "yellow"
81 }
82 , backgroundLeft:
83 Color.hsl 205.0 1.0 0.80
84 , backgroundRight:
85 Color.hsl 250.0 1.0 0.1
86 }
87 header =
88 Block.box
89 </ { className: "top-box"
90 , css:
91 Emotion.css
92 { background: Emotion.str colour.backgroundLayer5
93 }
94 }
95 /> [ Block.cluster
96 </* { justify: "space-between"
97 , className: "header"
98 , space: "var(--s-2)"
99 , css: Emotion.css { width: Emotion.percent 100.0 }
100 }
101 /> do
102 [ Y.styled
103 R.span'
104 { className: "blog-header"
105 , css:
106 Emotion.css
107 { fontSize: Emotion.str "min(var(--s3), calc(var(--s1) + 1vw))"
108 , textTransform: Emotion.str "uppercase"
109 , letterSpacing: Emotion.str "calc(min(var(--s0) + 3vw), var(--s2) * -1.7)"
110 , fontWeight: Emotion.str "300"
111 , color: Emotion.str colour.text
112 }
113 }
114 [ R.text siteInfo.siteMetadata.title ]
115 , darkThemeToggle
116 ]
117 ]
118 pure
119 $ element Container.component
120 { themeVariant: darkOrLightMode
121 , content:
122 Y.styled Block.stack
123 { className: "blog-content"
124 , space: _0
125 , splitAfter: 2
126 , css:
127 Emotion.css
128 { minHeight: Emotion.vh 100.0
129 , background: Emotion.str colour.background
130 , borderRadius: Emotion.str "0 var(--s1) var(--s1) 0"
131 }
132 }
133 [ header
134 , Block.centre
135 </* { className: "centre"
136 , padding: _0
137 , gutters: _0
138 , css: Emotion.css { maxWidth: Emotion.ch 90.0 }
139 }
140 /> [ Block.box
141 </ do
142 { padding: Emotion.px 16
143 , css:
144 Emotion.css
145 { "& > p:first-of-type:first-letter":
146 Emotion.nested
147 $ Emotion.css
148 { overflow: Emotion.str "visible"
149 , float: Emotion.str "left"
150 , fontSize: Emotion.str "min(calc(var(--s0) * 1 + 8.03vw), var(--s5))"
151 , fontFamily: Emotion.str "Cormorant Garamond"
152 , lineHeight: Emotion.str "min(calc(var(--s-1) + 2px + 3vw), var(--s3))"
153 , marginTop: Emotion.str "min(calc(var(--s-1) + 1.5vw), var(--s2))"
154 , marginRight: Emotion.var "--s-2"
155 , "&:::selection":
156 Emotion.nested
157 $ Emotion.css
158 { color: Emotion.str colour.highlightText
159 , background: Emotion.str "green" -- colour.highlight
160 }
161 }
162 }
163 }
164 /> [ element mdxProviderComponent
165 { children
166 }
167 ]
168 ]
169 , Y.styled Block.box
170 { className: "blog-footer"
171 , css:
172 Emotion.css
173 { background: Emotion.str colour.backgroundLayer1
174 , borderTop: Emotion.str $ "1px solid " <> colour.backgroundLayer3
175 , color: Emotion.str colour.text
176 }
177 }
178 [ R.text "Mark Eibes" ]
179 ]
180 }