Skip to content

Commit 9ffc5fb

Browse files
committed
poc book widget without json
1 parent 98bc691 commit 9ffc5fb

File tree

3 files changed

+51
-35
lines changed

3 files changed

+51
-35
lines changed

config.toml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,10 @@ weight = 5
140140
url = "https://enso.no"
141141

142142

143-
[[menu.main]]
144-
name = "React → Elm Book"
145-
weight = 1
146-
url = "/posts/elm-book-announcement"
143+
#[[menu.main]]
144+
#name = "React → Elm Book"
145+
#weight = 1
146+
#url = "/posts/elm-book-announcement"
147147

148148
#[[menu.main]]
149149
#name = "Hire me?"

src/Testimonials.elm

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -139,10 +139,11 @@ view model =
139139
]
140140
(HtmlHelpers.when (index > 0) leftButton
141141
:: rightButton
142+
:: bookEntry (index == 0)
142143
:: (testimonials
143144
|> List.indexedMap
144145
(\i t ->
145-
testimonialEntry (i == index || i == index + 1) t
146+
testimonialEntry (i == index || i + 1 == index) t
146147
)
147148
)
148149
)
@@ -181,13 +182,23 @@ button isLeft =
181182
[ Html.text content ]
182183

183184

184-
testimonialEntry : Bool -> Testimonial -> Html Msg
185-
testimonialEntry visible testimonial =
185+
carouselStyles : Bool -> List (Html.Attribute msg)
186+
carouselStyles visible =
186187
-- Most of this could and should have been ish a one-liner of tailwind, but tailwind breaks the mother app
187-
let
188-
conditionalStyles : List (Html.Attribute msg)
189-
conditionalStyles =
190-
if visible then
188+
[ Attributes.style "transition-property" "all"
189+
, Attributes.style "transition-timing-function" "ease-out"
190+
, Attributes.style "transition-duration" "0.4s"
191+
, Attributes.style "margin" "0.5rem"
192+
, Attributes.style "border-radius" "2rem"
193+
, Attributes.style "background" "rgba(127,127,127,0.05)"
194+
, Attributes.style "overflow-x" "hidden"
195+
, Attributes.style "display" "flex"
196+
, Attributes.style "white-space" "nowrap"
197+
, Attributes.style "flex-direction" "column"
198+
, Attributes.style "gap" "1rem"
199+
, Attributes.style "font-size" "1.8rem"
200+
]
201+
++ (if visible then
191202
[ Attributes.style "width" "60rem"
192203
, Attributes.style "max-height" "60rem"
193204
, Attributes.style "padding" "2rem"
@@ -205,23 +216,36 @@ testimonialEntry visible testimonial =
205216
, Attributes.style "margin" "0rem"
206217
, Attributes.style "flex" "0"
207218
]
208-
in
209-
Html.div
210-
([ Attributes.style "transition-property" "all"
211-
, Attributes.style "transition-timing-function" "ease-out"
212-
, Attributes.style "transition-duration" "0.4s"
213-
, Attributes.style "margin" "0.5rem"
214-
, Attributes.style "border-radius" "2rem"
215-
, Attributes.style "background" "rgba(127,127,127,0.05)"
216-
, Attributes.style "overflow-x" "hidden"
217-
, Attributes.style "display" "flex"
218-
, Attributes.style "white-space" "nowrap"
219-
, Attributes.style "flex-direction" "column"
220-
, Attributes.style "gap" "1rem"
221-
, Attributes.style "font-size" "1.8rem"
222-
]
223-
++ conditionalStyles
219+
)
220+
221+
222+
bookEntry : Bool -> Html msg
223+
bookEntry visible =
224+
Html.a
225+
(Attributes.href "https://leanpub.com/elm-for-react-devs/c/blog-october"
226+
:: Attributes.style "text-align" "center"
227+
:: carouselStyles visible
224228
)
229+
[ title "Early access:"
230+
, Html.img
231+
[ Attributes.src "/images/book.png"
232+
, Attributes.width 250
233+
, Attributes.style "margin" "auto"
234+
]
235+
[]
236+
, Html.span
237+
[]
238+
[ Html.hr [] []
239+
, title "20% off until"
240+
, title "end of October!"
241+
]
242+
]
243+
244+
245+
testimonialEntry : Bool -> Testimonial -> Html Msg
246+
testimonialEntry visible testimonial =
247+
Html.div
248+
(carouselStyles visible)
225249
[ flexRow
226250
[ Html.img
227251
[ Attributes.src testimonial.image

static/testimonials.json

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
11
[
2-
{
3-
"name": "New book available now!",
4-
"title": "Part 1/5 completed",
5-
"text": "An Elm Primer for React Developers: The Best Way to Learn Real Functional Programming\n\nLearn Elm through the lens of React! This comprehensive guide helps React developers transition to Elm's type-safe, functional programming paradigm. Perfect for developers looking to build more reliable frontend applications with confidence. Available now on Leanpub.",
6-
"date": "By Christian Ekrem",
7-
"link": "https://leanpub.com/elm-for-react-devs",
8-
"image": "https://d2sofvawe08yqg.cloudfront.net/elm-for-react-devs/s_hero?1620302297"
9-
},
102
{
113
"name": "Eigil Skjæveland",
124
"title": "Former colleague @ Vipps Mobile Pay",

0 commit comments

Comments
 (0)