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