mirror of
https://github.com/dillonkearns/elm-pages-v3-beta.git
synced 2025-01-03 17:31:58 +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
|
||||
[ 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) ]
|
||||
]
|
||||
}""" )
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
, firstSection
|
||||
, div
|
||||
[ css
|
||||
[ 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