mirror of
https://github.com/dillonkearns/elm-pages-v3-beta.git
synced 2025-01-05 12:57:33 +03:00
Extract section and use single column view even in large breakpoint for landing page code examples.
This commit is contained in:
Dillon Kearns
parent
b33079eb71
commit
87cf5b217a
@ -123,197 +123,7 @@ landingView =
|
|||||||
]
|
]
|
||||||
]
|
]
|
||||||
[]
|
[]
|
||||||
, div
|
, firstSection
|
||||||
[ css
|
|
||||||
[ Tw.relative
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ div
|
|
||||||
[ css
|
|
||||||
[ Bp.lg
|
|
||||||
[ Tw.mx_auto
|
|
||||||
, Tw.max_w_7xl
|
|
||||||
, Tw.px_8
|
|
||||||
, Tw.grid
|
|
||||||
, Tw.grid_cols_2
|
|
||||||
, Tw.grid_flow_col_dense
|
|
||||||
, Tw.gap_24
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ div
|
|
||||||
[ css
|
|
||||||
[ Tw.px_4
|
|
||||||
, Tw.max_w_xl
|
|
||||||
, Tw.mx_auto
|
|
||||||
, Bp.lg
|
|
||||||
[ Tw.py_16
|
|
||||||
, Tw.max_w_none
|
|
||||||
, Tw.mx_0
|
|
||||||
, Tw.px_0
|
|
||||||
]
|
|
||||||
, Bp.sm
|
|
||||||
[ Tw.px_6
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ div []
|
|
||||||
[ div []
|
|
||||||
[ span
|
|
||||||
[ css
|
|
||||||
[ Tw.h_12
|
|
||||||
, Tw.w_12
|
|
||||||
, Tw.rounded_md
|
|
||||||
, Tw.flex
|
|
||||||
, Tw.items_center
|
|
||||||
, Tw.justify_center
|
|
||||||
, Tw.bg_gradient_to_r
|
|
||||||
, Tw.from_blue_600
|
|
||||||
, Tw.to_blue_700
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ svg
|
|
||||||
[ SvgAttr.css
|
|
||||||
[ Tw.h_6
|
|
||||||
, Tw.w_6
|
|
||||||
, Tw.text_white
|
|
||||||
]
|
|
||||||
, SvgAttr.fill "none"
|
|
||||||
, SvgAttr.viewBox "0 0 24 24"
|
|
||||||
, SvgAttr.stroke "currentColor"
|
|
||||||
, Attr.attribute "aria-hidden" "true"
|
|
||||||
]
|
|
||||||
[ path
|
|
||||||
[ SvgAttr.strokeLinecap "round"
|
|
||||||
, SvgAttr.strokeLinejoin "round"
|
|
||||||
, SvgAttr.strokeWidth "2"
|
|
||||||
, SvgAttr.d "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
||||||
]
|
|
||||||
[]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
, div
|
|
||||||
[ css
|
|
||||||
[ Tw.mt_6
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ h2
|
|
||||||
[ css
|
|
||||||
[ Tw.text_3xl
|
|
||||||
, Tw.font_extrabold
|
|
||||||
, Tw.tracking_tight
|
|
||||||
, Tw.text_gray_900
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ text "Pull in typed Elm data to your pages" ]
|
|
||||||
, p
|
|
||||||
[ css
|
|
||||||
[ Tw.mt_4
|
|
||||||
, Tw.text_lg
|
|
||||||
, Tw.text_gray_500
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ text "Whether your data is coming from markdown files, APIs, a CMS, or all at once, elm-pages lets you pull in just the data you need for a page." ]
|
|
||||||
, div
|
|
||||||
[ css
|
|
||||||
[ Tw.mt_6
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ a
|
|
||||||
[ Attr.href "/docs"
|
|
||||||
, css
|
|
||||||
[ Tw.inline_flex
|
|
||||||
, Tw.px_4
|
|
||||||
, Tw.py_2
|
|
||||||
, Tw.border
|
|
||||||
, Tw.border_transparent
|
|
||||||
, Tw.text_base
|
|
||||||
, Tw.font_medium
|
|
||||||
, Tw.rounded_md
|
|
||||||
, Tw.shadow_sm
|
|
||||||
, Tw.text_white
|
|
||||||
, Tw.bg_gradient_to_r
|
|
||||||
, Tw.from_blue_600
|
|
||||||
, Tw.to_blue_700
|
|
||||||
, Css.hover
|
|
||||||
[ Tw.from_blue_700
|
|
||||||
, Tw.to_blue_800
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ text "Check out the Docs" ]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
, div
|
|
||||||
[ css
|
|
||||||
[ Tw.mt_12
|
|
||||||
, Bp.lg
|
|
||||||
[ Tw.mt_0
|
|
||||||
]
|
|
||||||
, Bp.sm
|
|
||||||
[ Tw.mt_16
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ div
|
|
||||||
[ css
|
|
||||||
[ Tw.pl_4
|
|
||||||
, Tw.neg_mr_48
|
|
||||||
, Bp.lg
|
|
||||||
[ Tw.px_0
|
|
||||||
, Tw.m_0
|
|
||||||
, Tw.relative
|
|
||||||
, Tw.h_full
|
|
||||||
]
|
|
||||||
, Bp.md
|
|
||||||
[ Tw.neg_mr_16
|
|
||||||
]
|
|
||||||
, Bp.sm
|
|
||||||
[ Tw.pl_6
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ CodeTab.view ( "Page.Repo.Name_.elm", """module Page.Repo.Name_ exposing (Data, Model, Msg, page)
|
|
||||||
|
|
||||||
type alias Data = Int
|
|
||||||
type alias RouteParams = { name : String }
|
|
||||||
|
|
||||||
page : Page RouteParams Data
|
|
||||||
page =
|
|
||||||
Page.prerenderedRoute
|
|
||||||
{ head = head
|
|
||||||
, routes = routes
|
|
||||||
, data = data
|
|
||||||
}
|
|
||||||
|> Page.buildNoState { view = view }
|
|
||||||
|
|
||||||
routes : DataSource (List RouteParams)
|
|
||||||
routes =
|
|
||||||
DataSource.succeed [ { name = "elm-pages" } ]
|
|
||||||
|
|
||||||
data : RouteParams -> DataSource Data
|
|
||||||
data routeParams =
|
|
||||||
DataSource.Http.get
|
|
||||||
(Secrets.succeed "https://api.github.com/repos/dillonkearns/elm-pages")
|
|
||||||
(Decode.field "stargazer_count" Decode.int)
|
|
||||||
|
|
||||||
view :
|
|
||||||
StaticPayload Data RouteParams
|
|
||||||
-> Document Msg
|
|
||||||
view static =
|
|
||||||
{ title = static.routeParams.name
|
|
||||||
, body =
|
|
||||||
[ h1 [] [ text static.routeParams.name ]
|
|
||||||
, p [] [ text ("Stars: " ++ String.fromInt static.data) ]
|
|
||||||
]
|
|
||||||
}""" )
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
, div
|
, div
|
||||||
[ css
|
[ css
|
||||||
[ Tw.mt_24
|
[ Tw.mt_24
|
||||||
@ -1041,3 +851,194 @@ gradientFeatures =
|
|||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
firstSection : Html Never
|
||||||
|
firstSection =
|
||||||
|
div
|
||||||
|
[ css
|
||||||
|
[ Tw.relative
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ div
|
||||||
|
[ css
|
||||||
|
[ Bp.lg
|
||||||
|
[ Tw.mx_auto
|
||||||
|
, Tw.max_w_4xl
|
||||||
|
, Tw.px_8
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ div
|
||||||
|
[ css
|
||||||
|
[ Tw.px_4
|
||||||
|
, Tw.max_w_xl
|
||||||
|
, Tw.mx_auto
|
||||||
|
, Bp.lg
|
||||||
|
[ Tw.py_16
|
||||||
|
, Tw.max_w_none
|
||||||
|
, Tw.mx_0
|
||||||
|
, Tw.px_0
|
||||||
|
]
|
||||||
|
, Bp.sm
|
||||||
|
[ Tw.px_6
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ div []
|
||||||
|
[ div []
|
||||||
|
[ span
|
||||||
|
[ css
|
||||||
|
[ Tw.h_12
|
||||||
|
, Tw.w_12
|
||||||
|
, Tw.rounded_md
|
||||||
|
, Tw.flex
|
||||||
|
, Tw.items_center
|
||||||
|
, Tw.justify_center
|
||||||
|
, Tw.bg_gradient_to_r
|
||||||
|
, Tw.from_blue_600
|
||||||
|
, Tw.to_blue_700
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ svg
|
||||||
|
[ SvgAttr.css
|
||||||
|
[ Tw.h_6
|
||||||
|
, Tw.w_6
|
||||||
|
, Tw.text_white
|
||||||
|
]
|
||||||
|
, SvgAttr.fill "none"
|
||||||
|
, SvgAttr.viewBox "0 0 24 24"
|
||||||
|
, SvgAttr.stroke "currentColor"
|
||||||
|
, Attr.attribute "aria-hidden" "true"
|
||||||
|
]
|
||||||
|
[ path
|
||||||
|
[ SvgAttr.strokeLinecap "round"
|
||||||
|
, SvgAttr.strokeLinejoin "round"
|
||||||
|
, SvgAttr.strokeWidth "2"
|
||||||
|
, SvgAttr.d "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||||||
|
]
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
, div
|
||||||
|
[ css
|
||||||
|
[ Tw.mt_6
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ h2
|
||||||
|
[ css
|
||||||
|
[ Tw.text_3xl
|
||||||
|
, Tw.font_extrabold
|
||||||
|
, Tw.tracking_tight
|
||||||
|
, Tw.text_gray_900
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ text "Pull in typed Elm data to your pages" ]
|
||||||
|
, p
|
||||||
|
[ css
|
||||||
|
[ Tw.mt_4
|
||||||
|
, Tw.text_lg
|
||||||
|
, Tw.text_gray_500
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ text "Whether your data is coming from markdown files, APIs, a CMS, or all at once, elm-pages lets you pull in just the data you need for a page." ]
|
||||||
|
, div
|
||||||
|
[ css
|
||||||
|
[ Tw.mt_6
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ a
|
||||||
|
[ Attr.href "/docs"
|
||||||
|
, css
|
||||||
|
[ Tw.inline_flex
|
||||||
|
, Tw.px_4
|
||||||
|
, Tw.py_2
|
||||||
|
, Tw.border
|
||||||
|
, Tw.border_transparent
|
||||||
|
, Tw.text_base
|
||||||
|
, Tw.font_medium
|
||||||
|
, Tw.rounded_md
|
||||||
|
, Tw.shadow_sm
|
||||||
|
, Tw.text_white
|
||||||
|
, Tw.bg_gradient_to_r
|
||||||
|
, Tw.from_blue_600
|
||||||
|
, Tw.to_blue_700
|
||||||
|
, Css.hover
|
||||||
|
[ Tw.from_blue_700
|
||||||
|
, Tw.to_blue_800
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ text "Check out the Docs" ]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
, div
|
||||||
|
[ css
|
||||||
|
[ Tw.mt_12
|
||||||
|
, Bp.lg
|
||||||
|
[ Tw.mt_0
|
||||||
|
]
|
||||||
|
, Bp.sm
|
||||||
|
[ Tw.mt_16
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ div
|
||||||
|
[ css
|
||||||
|
[ Tw.pl_4
|
||||||
|
, Tw.neg_mr_48
|
||||||
|
, Bp.lg
|
||||||
|
[ Tw.px_0
|
||||||
|
, Tw.m_0
|
||||||
|
, Tw.relative
|
||||||
|
, Tw.h_full
|
||||||
|
]
|
||||||
|
, Bp.md
|
||||||
|
[ Tw.neg_mr_16
|
||||||
|
]
|
||||||
|
, Bp.sm
|
||||||
|
[ Tw.pl_6
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
[ CodeTab.view ( "Page.Repo.Name_.elm", """module Page.Repo.Name_ exposing (Data, Model, Msg, page)
|
||||||
|
|
||||||
|
type alias Data = Int
|
||||||
|
type alias RouteParams = { name : String }
|
||||||
|
|
||||||
|
page : Page RouteParams Data
|
||||||
|
page =
|
||||||
|
Page.prerenderedRoute
|
||||||
|
{ head = head
|
||||||
|
, routes = routes
|
||||||
|
, data = data
|
||||||
|
}
|
||||||
|
|> Page.buildNoState { view = view }
|
||||||
|
|
||||||
|
routes : DataSource (List RouteParams)
|
||||||
|
routes =
|
||||||
|
DataSource.succeed [ { name = "elm-pages" } ]
|
||||||
|
|
||||||
|
data : RouteParams -> DataSource Data
|
||||||
|
data routeParams =
|
||||||
|
DataSource.Http.get
|
||||||
|
(Secrets.succeed "https://api.github.com/repos/dillonkearns/elm-pages")
|
||||||
|
(Decode.field "stargazer_count" Decode.int)
|
||||||
|
|
||||||
|
view :
|
||||||
|
StaticPayload Data RouteParams
|
||||||
|
-> Document Msg
|
||||||
|
view static =
|
||||||
|
{ title = static.routeParams.name
|
||||||
|
, body =
|
||||||
|
[ h1 [] [ text static.routeParams.name ]
|
||||||
|
, p [] [ text ("Stars: " ++ String.fromInt static.data) ]
|
||||||
|
]
|
||||||
|
}""" )
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user