prepare for guide videos

examples/docs/README.md

@@ -1,5 +1,5 @@
 # your elm-spa
-> learn more at [https://elm-spa.dev](https://elm-spa.dev)
+> single page apps made easy. learn more at [https://elm-spa.dev](https://elm-spa.dev)
 
 ### local development
 

examples/docs/public/content/guide/deploying.md

@@ -1,5 +0,0 @@
----
-{ "title": "deploy bois" }
----
-
-here's how to share your site with the world (for freesies)

examples/docs/public/content/guide/getting-started.md

@@ -0,0 +1,11 @@
+---
+{ "title": "getting started"
+, "description": "easy peasy, web app... squeezy? 🤔"
+}
+---
+
+<iframe></iframe>
+
+## don't have elm installed?
+
+No worries, you can [get installation here](./installation) or click the link on the left. It'll bring you back when you're done!

examples/docs/public/content/guide/installation.md

@@ -0,0 +1,67 @@
+---
+{ "title": "installing things"
+, "description": "getting your computer ready to roll."
+}
+---
+
+<iframe></iframe>
+
+### what's in this section?
+
+Together, we're going to:
+
+1. install node
+1. install elm via npm
+1. install your text editor
+
+### installing node
+
+Installing NodeJS from [nodejs.org](https://nodejs.org/) will allow us to run `npm` commands from our terminal or command prompt.
+
+Make sure to get the latest LTS release (at the time of writing this, that was `12.13.1 LTS`)
+
+#### did it work?
+
+You can confirm that node is installed by running this command
+
+```bash
+npm -v
+```
+
+(that should spit out a number like `6.11.3`, though it doesn't need to that exact number)
+
+### installing all the elm things
+
+We can use `npm` to install `elm` and a few other tools.
+
+```bash
+npm install -g elm elm-format elm-live elm-spa
+```
+
+These things will be useful for running commands in the terminal, and help us with the next section!
+
+### installing a text editor
+
+There's plenty of choices out there, but for this guide I'll be using:
+
+- [VS Code](https://code.visualstudio.com/)
+
+Once you have that installed, we can start getting our Elm dev environment
+setup!
+
+Install the [Elm](https://marketplace.visualstudio.com/items?itemName=Elmtooling.elm-ls-vscode) extension so we get syntax highlighting and
+magical format-on-save technology!
+
+You can run `Ctrl+Shift+P` in VS code to add these settings to your user settings:
+
+```js
+{
+  // ...
+  "[elm]": {
+      "editor.formatOnSave": true,
+      "editor.tabSize": 4
+  }
+}
+```
+
+That's it! You're ready for the next section!

examples/docs/public/content/guide/setup.md

@@ -1,19 +0,0 @@
----
-{ "title": "setup" }
----
-
-### what's in this section?
-
-- Installing NodeJS
-- Installing VS Code
-- Installing Elm
-
-<iframe></iframe>
-
-Make sure you have the latest version of [NodeJS](https://nodejs.org/) installed.
-
-```
-npx elm-spa init our-project
-```
-
-That's it! Next let's [add a page](/guide/adding-pages).

examples/docs/public/styles.css

@@ -102,7 +102,7 @@ html, body {
 
 .markdown iframe {
   width: 100%;
-  height: calc(61.25vw - 2rem);
+  height: calc(56.25vw - 2rem);
   max-width: 560px;
   max-height: 315px;
   margin-top: 2em;

examples/docs/src/Components/Sidebar.elm

@@ -1,4 +1,9 @@
-module Components.Sidebar exposing (view, viewNextArticle)
+module Components.Sidebar exposing
+    ( viewDocLinks
+    , viewGuideLinks
+    , viewNextDocsArticle
+    , viewNextGuideArticle
+    )
 
 import Element exposing (..)
 import Element.Font as Font
@@ -11,8 +16,16 @@ type SideItem
     | Link ( String, Route )
 
 
-links : List SideItem
-links =
+guideLinks : List SideItem
+guideLinks =
+    [ Link ( "intro", routes.guide )
+    , Link ( "installation", routes.guide_dynamic "installation" )
+    , Link ( "getting started", routes.guide_dynamic "getting-started" )
+    ]
+
+
+docsLinks : List SideItem
+docsLinks =
     [ Link ( "overview", routes.docs_top )
     , Heading "elm-spa"
     , Link ( "overview", routes.docs_dynamic "elm-spa" )
@@ -83,10 +96,38 @@ nextArticle activeRoute items =
            )
 
 
-viewNextArticle : Route -> Element msg
-viewNextArticle route =
+viewNextDocsArticle =
+    viewNextArticle
+        { items = docsLinks
+        , nextUp =
+            { label = text "the guide"
+            , url = "/guide"
+            }
+        }
+
+
+viewNextGuideArticle =
+    viewNextArticle
+        { items = guideLinks
+        , nextUp =
+            { label = text "the docs"
+            , url = "/docs"
+            }
+        }
+
+
+viewNextArticle :
+    { nextUp :
+        { label : Element msg
+        , url : String
+        }
+    , items : List SideItem
+    }
+    -> Route
+    -> Element msg
+viewNextArticle options route =
     (\link -> paragraph [ Font.size 20 ] [ el [ Font.semiBold ] <| text "next up: ", link ]) <|
-        case nextArticle route links of
+        case nextArticle route options.items of
             Just ( label, r ) ->
                 link (Font.color colors.coral :: styles.link.enabled)
                     { label = text label
@@ -95,21 +136,35 @@ viewNextArticle route =
 
             Nothing ->
                 link (Font.color colors.coral :: styles.link.enabled)
-                    { label = text "the guide"
-                    , url = "/guide"
-                    }
+                    options.nextUp
 
 
-view : Route -> Element msg
-view activeRoute =
+viewDocLinks : Route -> Element msg
+viewDocLinks =
+    view
+        { items = docsLinks
+        , heading = "docs"
+        }
+
+
+viewGuideLinks : Route -> Element msg
+viewGuideLinks =
+    view
+        { items = guideLinks
+        , heading = "guide"
+        }
+
+
+view : { heading : String, items : List SideItem } -> Route -> Element msg
+view { heading, items } activeRoute =
     column
         [ alignTop
         , spacing 16
         , width (px 200)
         , paddingEach { top = 84, left = 0, right = 0, bottom = 0 }
         ]
-        [ el [ Font.size 24, Font.semiBold ] (text "docs")
-        , column [ spacing 8 ] (List.map (viewSideLink activeRoute) links)
+        [ el [ Font.size 24, Font.semiBold ] (text heading)
+        , column [ spacing 8 ] (List.map (viewSideLink activeRoute) items)
         ]
 
 

examples/docs/src/Layouts/Docs.elm

@@ -2,10 +2,7 @@ module Layouts.Docs exposing (view)
 
 import Components.Sidebar as Sidebar
 import Element exposing (..)
-import Element.Font as Font
-import Generated.Routes as Routes exposing (Route, routes)
 import Global
-import Ui exposing (colors, styles)
 import Utils.Spa as Spa
 
 
@@ -15,11 +12,11 @@ view { page, route, global } =
         Global.Mobile ->
             column [ width fill ]
                 [ page
-                , Sidebar.view route
+                , Sidebar.viewDocLinks route
                 ]
 
         Global.Desktop ->
             row [ width fill ]
-                [ Sidebar.view route
+                [ Sidebar.viewDocLinks route
                 , el [ width fill, alignTop ] page
                 ]

examples/docs/src/Layouts/Guide.elm

@@ -0,0 +1,22 @@
+module Layouts.Guide exposing (view)
+
+import Components.Sidebar as Sidebar
+import Element exposing (..)
+import Global
+import Utils.Spa as Spa
+
+
+view : Spa.LayoutContext msg -> Element msg
+view { page, route, global } =
+    case global.device of
+        Global.Mobile ->
+            column [ width fill ]
+                [ page
+                , Sidebar.viewGuideLinks route
+                ]
+
+        Global.Desktop ->
+            row [ width fill ]
+                [ Sidebar.viewGuideLinks route
+                , el [ width fill, alignTop ] page
+                ]

examples/docs/src/Pages/Docs/Dynamic.elm

@@ -5,7 +5,6 @@ import Element exposing (..)
 import Generated.Docs.Params as Params
 import Generated.Routes exposing (Route)
 import Http
-import Json.Decode as D exposing (Decoder)
 import Spa.Page
 import Ui
 import Utils.Markdown as Markdown exposing (Markdown)
@@ -95,10 +94,10 @@ view model =
         [ Ui.webDataMarkdownArticle model.markdown
         , case model.markdown of
             WebData.Success _ ->
-                Sidebar.viewNextArticle model.route
+                Sidebar.viewNextDocsArticle model.route
 
             WebData.Failure _ ->
-                Sidebar.viewNextArticle model.route
+                Sidebar.viewNextDocsArticle model.route
 
             _ ->
                 text ""

examples/docs/src/Pages/Docs/Dynamic/Dynamic.elm

@@ -96,10 +96,10 @@ view model =
         [ Ui.webDataMarkdownArticle model.markdown
         , case model.markdown of
             WebData.Success _ ->
-                Sidebar.viewNextArticle model.route
+                Sidebar.viewNextDocsArticle model.route
 
             WebData.Failure _ ->
-                Sidebar.viewNextArticle model.route
+                Sidebar.viewNextDocsArticle model.route
 
             _ ->
                 text ""

examples/docs/src/Pages/Guide.elm

@@ -33,7 +33,7 @@ view =
     Ui.sections
         [ Hero.view
             { title = "guide"
-            , subtitle = "(coming soon)"
+            , subtitle = "(videos coming soon)"
             , links = []
             }
         , el [ centerX, width (fill |> maximum 512) ] <|
@@ -45,5 +45,8 @@ __This entire site!__ And in this guide we'll build it together, from scratch.
 
 <iframe></iframe>
         """
-        , link ([ centerX ] ++ Ui.styles.button) { label = text "let's gooo", url = "/docs" }
+        , link ([ centerX ] ++ Ui.styles.button)
+            { label = text "let's gooo"
+            , url = "/guide/getting-started"
+            }
         ]

examples/docs/src/Pages/Guide/Dynamic.elm

@@ -0,0 +1,104 @@
+module Pages.Guide.Dynamic exposing (Model, Msg, page)
+
+import Components.Sidebar as Sidebar
+import Element exposing (..)
+import Generated.Guide.Params as Params
+import Generated.Routes exposing (Route)
+import Http
+import Spa.Page
+import Ui
+import Utils.Markdown as Markdown exposing (Markdown)
+import Utils.Spa exposing (Page, PageContext)
+import Utils.WebData as WebData exposing (WebData(..))
+
+
+page : Page Params.Dynamic Model Msg model msg appMsg
+page =
+    Spa.Page.element
+        { title = \{ model } -> String.join " | " [ model.slug, "guide", "elm-spa" ]
+        , init = init
+        , update = always update
+        , subscriptions = always subscriptions
+        , view = always view
+        }
+
+
+
+-- INIT
+
+
+type alias Model =
+    { slug : String
+    , markdown : WebData (Markdown Markdown.Frontmatter)
+    , route : Route
+    }
+
+
+init : PageContext -> Params.Dynamic -> ( Model, Cmd Msg )
+init { route } { param1 } =
+    ( { slug = param1
+      , markdown = Loading
+      , route = route
+      }
+    , Http.get
+        { url = "/" ++ String.join "/" [ "content", "guide", param1 ++ ".md" ]
+        , expect = WebData.expectMarkdown Loaded
+        }
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Loaded (WebData (Markdown Markdown.Frontmatter))
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        Loaded data ->
+            ( { model | markdown = data }
+            , Cmd.none
+            )
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none
+
+
+
+-- VIEW
+
+
+view : Model -> Element Msg
+view model =
+    column
+        [ width fill
+        , spacing 32
+        , alpha
+            (if model.markdown == WebData.Loading then
+                0
+
+             else
+                1
+            )
+        , Ui.transition { props = [ "opacity" ], duration = 300 }
+        ]
+        [ Ui.webDataMarkdownArticle model.markdown
+        , case model.markdown of
+            WebData.Success _ ->
+                Sidebar.viewNextGuideArticle model.route
+
+            WebData.Failure _ ->
+                Sidebar.viewNextGuideArticle model.route
+
+            _ ->
+                text ""
+        ]