From 87cf5b217a17d88532c7557faba12231cfde6b56 Mon Sep 17 00:00:00 2001 From: Dillon Kearns Date: Mon, 17 May 2021 13:39:43 -0700 Subject: [PATCH] Extract section and use single column view even in large breakpoint for landing page code examples. --- examples/docs/src/Page/Index.elm | 383 ++++++++++++++++--------------- 1 file changed, 192 insertions(+), 191 deletions(-) diff --git a/examples/docs/src/Page/Index.elm b/examples/docs/src/Page/Index.elm index 700aeb07..ce4ee926 100644 --- a/examples/docs/src/Page/Index.elm +++ b/examples/docs/src/Page/Index.elm @@ -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) ] + ] + }""" ) + ] + ] + ] + ]