reorganize site into two sections

docs/public/content/examples.md

@@ -1,7 +1,29 @@
 # Examples
 
-Here are real-world applications using __elm-spa__:
+Prefer to learn by example? Wonderful! The source code for all of the examples on this site can be found in the Github repo's [examples](https://github.com/ryannhg/elm-spa/tree/main/examples) folder.
 
-- This site
-- Realworld example app
-- User featured projects
+## Featured examples
+
+### Hello, world!
+
+[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+
+### Pages & routing
+
+[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+
+### Local storage
+
+[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+
+### User authentication
+
+[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+
+### Testing
+
+[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+
+### Working with NPM
+
+[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)

docs/public/content/examples/03-storage.md

@@ -0,0 +1,3 @@
+# Storage
+
+> Coming soon!

docs/public/content/examples/04-authentication.md

@@ -17,7 +17,7 @@ __Great news:__ This is exactly what we can do in __elm-spa__!
 
 ## Protected pages
 
-At the end of the [pages docs](/docs/pages#pageprotected), we learned that there are also `protected` versions of every __page type__. 
+At the end of the [pages docs](/guide/pages#pageprotected), we learned that there are also `protected` versions of every __page type__. 
 
 These protected pages have slightly different signatures:
 
@@ -116,7 +116,7 @@ But before that code will work we need to take care of two things:
 
 ## Updating Shared.elm
 
-If you haven't already ejected `Shared.elm`, you should move it from `.elm-spa/defaults` into your `src` folder. The [shared state](/docs/shared-state) docs cover this file in depth, but we'll provide all the code you'll need to change here.
+If you haven't already ejected `Shared.elm`, you should move it from `.elm-spa/defaults` into your `src` folder. The [shared state](/guide/shared-state) docs cover this file in depth, but we'll provide all the code you'll need to change here.
 
 Let's change `Shared.Model` to keep track of a `Maybe User`, the value that can either be a user or nothing:
 
@@ -382,4 +382,4 @@ Now everything is working! Visiting the `/sign-in` page and clicking "Sign In" s
 
 #### But wait...
 
-When we refresh the page, the user is signed out... how can we keep them signed in after refresh? Sounds like a job for [local storage](/guides/local-storage)!
+When we refresh the page, the user is signed out... how can we keep them signed in after refresh? Sounds like a job for [local storage](/examples/local-storage)!

docs/public/content/examples/05-testing.md

@@ -0,0 +1,3 @@
+# Testing
+
+> Coming soon!

docs/public/content/examples/06-npm.md

@@ -0,0 +1,3 @@
+# Working with NPM
+
+> Coming soon!

docs/public/content/guide.md

@@ -1,4 +1,4 @@
-# Docs
+# Guide
 
 Welcome to __elm-spa__, a framework for building web applications with [Elm](https://elm-lang.org)!
 If you are new to Elm, you should check out [the official guide](https://guide.elm-lang.org), which
@@ -68,4 +68,4 @@ Visit https://elm-spa.dev for more!
 
 __Ready for more?__
 
-Let's check out [the CLI](/docs/cli) to learn more about those five commands!
+Let's check out [the CLI](/guide/cli) to learn more about those five commands!

docs/public/content/guide/cli.md

@@ -10,9 +10,10 @@ This gave us the ability to run a few commands:
 
 1. [__elm-spa new__](#elm-spa-new) - creates a new project
 1. [__elm-spa server__](#elm-spa-server) - runs a dev server as you code
-1. [__elm-spa watch__](#elm-spa-watch) - builds as you code
-1. [__elm-spa build__](#elm-spa-build) - one-time production build
 1. [__elm-spa add__](#elm-spa-add) - adds a page to an existing project
+1. [__elm-spa build__](#elm-spa-build) - one-time production build
+1. [__elm-spa gen__](#elm-spa-gen) - generates files, without elm make
+1. [__elm-spa watch__](#elm-spa-watch) - generates files as you code
 
 What do these do? This section of the guide dives into more detail on each command!
 
@@ -49,27 +50,6 @@ This will start a development server for your project at [http://localhost:1234]
 
 When we edit our code, `elm-spa server` automatically compiles your application.
 
-## elm-spa watch
-
-If you want the automatic compilation on change, but don't need a HTTP server, you can use the `elm-spa watch` command:
-
-```terminal
-elm-spa watch
-```
-
-This will automatically generate code and compile your Elm files on save, but without the server. This is a great command to combine __elm-spa__ with another tool like [Parcel](https://parceljs.org/elm.html).
-
-
-## elm-spa build
-
-The `server` and `watch` commands are great for development, but for __production__, we'll want the `elm-spa build` command.
-
-```terminal
-elm-spa build
-```
-
-This compiles your app into __an optimized and minified JS file__. This makes it great for serving your application in the real world!
-
 
 ## elm-spa add
 
@@ -103,3 +83,35 @@ elm-spa add /example static
 elm-spa add /example sandbox
 elm-spa add /example element
 ```
+
+## elm-spa build
+
+The `server` and `watch` commands are great for development, but for __production__, we'll want the `elm-spa build` command.
+
+```terminal
+elm-spa build
+```
+
+This compiles your app into __an optimized and minified JS file__. This makes it great for serving your application in the real world!
+
+## elm-spa gen
+
+If you are working with another dev server, you won't need the `.js` file generated by the `build` command. To only generate __elm-spa__ files, use the `elm-spa gen` command:
+
+```terminal
+elm-spa gen
+```
+
+This will generate files in the `.elm-spa` folder, but allow your custom workflow to define it's own way of compiling Elm. This is a great command to combine __elm-spa__ with another tool like [Vite](/examples/05-npm) or [Parcel](https://parceljs.org/elm.html).
+
+
+## elm-spa watch
+
+If you want the automatic code generation on change, but don't need elm make or an HTTP server, you can use the `elm-spa watch` command:
+
+```terminal
+elm-spa watch
+```
+
+This will automatically generate code and compile your Elm files on save, but without the server.
+

docs/public/content/guide/pages.md

@@ -227,7 +227,7 @@ view : Model -> View Msg
 subscriptions : Model -> Sub Msg
 ```
 
-This `Effect Msg` value also allows support for folks using [elm-program-test](https://package.elm-lang.org/packages/avh4/elm-program-test/latest/), which requires users to define their own custom type on top of `Cmd Msg`. More about that in the [testing guide](/guides/06-testing)
+This `Effect Msg` value also allows support for folks using [elm-program-test](https://package.elm-lang.org/packages/avh4/elm-program-test/latest/), which requires users to define their own custom type on top of `Cmd Msg`. More about that in the [testing guide](/examples/06-testing)
 
 
 ## Page.protected
@@ -250,4 +250,4 @@ Page.protected.sandbox
     }
 ```
 
-When you are ready for user authentication, you can learn more about using `Page.protected` in the [authentication guide](/guides/04-authentication).
+When you are ready for user authentication, you can learn more about using `Page.protected` in the [authentication guide](/examples/04-authentication).

docs/public/content/guide/routing.md

@@ -16,7 +16,7 @@ In this section, we'll cover the different kinds of routes you'll find in every
 
 ## The homepage
  
-`Home_.elm` is a reserved filename that handles requests to your homepage. The easiest way to add a new homepage is with the [`elm-spa add`](/docs/cli#elm-spa-add) covered in the CLI docs:
+`Home_.elm` is a reserved filename that handles requests to your homepage. The easiest way to add a new homepage is with the [`elm-spa add`](/guide/cli#elm-spa-add) covered in the CLI docs:
 
 ```terminal
 elm-spa add /

docs/public/content/guide/shared-state.md

@@ -52,7 +52,7 @@ type alias User =
     }
 ```
 
-As we saw in the [pages guide](/docs/pages), this `Shared.Model` will be passed into every page– so we can check if `shared.user` has a value or not!
+As we saw in the [pages guide](/guide/pages), this `Shared.Model` will be passed into every page– so we can check if `shared.user` has a value or not!
 
 ## Shared.init
 
@@ -65,7 +65,7 @@ init flags req =
 The `init` function is called when your application loads for the first time. It takes in two inputs:
 
 - `Flags` - initial JS values passed in on startup.
-- `Request` - the [Request](/docs/request) value with current URL information.
+- `Request` - the [Request](/guide/request) value with current URL information.
 
 The `init` function returns the initial `Shared.Model`, as well as any side effect's you'd like to run (like initial HTTP requests, etc)
 

docs/public/content/guide/url-requests.md

@@ -12,7 +12,7 @@ This might be useful when you need to show the active link in your navbar, or na
 
 ## req.params
 
-Every [dynamic route](/docs/routing#dynamic-routes) has parameters that you'll want to get access to. For [static routes](/docs/routing@static-routes), those parameters will be `()`:
+Every [dynamic route](/guide/routing#dynamic-routes) has parameters that you'll want to get access to. For [static routes](/guide/routing@static-routes), those parameters will be `()`:
 
 URL | Request
  --- | ---

docs/public/content/guides.md

@@ -1,7 +0,0 @@
-# Guides
-
-Ready to get started with __elm-spa__? Me too!
-
-...
-
-Unfortunately, I haven't uploaded any guides yet...

docs/public/content/guides/04-storage.md

@@ -1 +0,0 @@
-# Local storage

docs/public/content/guides/05-npm.md

@@ -1 +0,0 @@
-# Working with NPM

docs/public/style.css

@@ -279,6 +279,15 @@ hr { border: 0; }
   transform: translate(50%, -25%);
 }
 
+.markdown a img {
+  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
+}
+
+.markdown a img:hover {
+  transform: scale(1.05);
+  opacity: 0.75;
+}
+
 .bold {
   font-weight: var(--weight--bold);
 }

docs/src/Domain/Index.elm

@@ -106,8 +106,7 @@ sections : Index -> List Section
 sections index =
     let
         sectionOrder =
-            [ "Docs"
-            , "Guides"
+            [ "Guide"
             , "Examples"
             ]
 
@@ -143,6 +142,7 @@ sections index =
                 index
                     |> List.filter (.url >> (\url -> String.startsWith top.url url && url /= top.url))
                     |> toLabelUrls
+                    |> List.sortBy .url
                     |> toSection top
             )
         |> List.sortBy

docs/src/Pages/Examples/Section_.elm

@@ -1,4 +1,4 @@
-module Pages.Guides.Section_ exposing (Model, Msg, page)
+module Pages.Examples.Section_ exposing (Model, Msg, page)
 
 import Page
 import Request

docs/src/Pages/Guide.elm

@@ -1,4 +1,4 @@
-module Pages.Docs exposing (Model, Msg, page)
+module Pages.Guide exposing (Model, Msg, page)
 
 import Page
 import Request

docs/src/Pages/Guide/Section_.elm

@@ -1,4 +1,4 @@
-module Pages.Docs.Section_ exposing (Model, Msg, page)
+module Pages.Guide.Section_ exposing (Model, Msg, page)
 
 import Page
 import Request

docs/src/Pages/Guides.elm

@@ -1,19 +0,0 @@
-module Pages.Guides exposing (Model, Msg, page)
-
-import Page
-import Request
-import Shared
-import UI.Docs
-
-
-page : Shared.Model -> Request.With params -> Page.With Model Msg
-page =
-    UI.Docs.page
-
-
-type alias Model =
-    UI.Docs.Model
-
-
-type alias Msg =
-    UI.Docs.Msg

docs/src/Pages/NotFound.elm

@@ -32,6 +32,6 @@ view =
             { title = "404"
             , description = "that page wasn't found."
             }
-        , UI.markdown { withHeaderLinks = False } "### Well, that's a shame...\n\nHow about the [homepage?](/)"
+        , UI.markdown { withHeaderLinks = False } "## But that's alright.\n\nThere's always [the homepage](/)!"
         ]
     }

docs/src/UI/Layout.elm

@@ -125,10 +125,23 @@ navbar { onMsg, model, shared, url } =
     let
         navLink : { text : String, route : Route } -> Html msg
         navLink options =
+            let
+                href : String
+                href =
+                    Route.toHref options.route
+            in
             Html.a
                 [ Attr.class "link"
-                , Attr.href (Route.toHref options.route)
-                , Attr.classList [ ( "bold text-blue", String.startsWith (Route.toHref options.route) url.path ) ]
+                , Attr.href href
+                , Attr.classList
+                    [ ( "bold text-blue"
+                      , if href == "/" then
+                            href == url.path
+
+                        else
+                            String.startsWith href url.path
+                      )
+                    ]
                 ]
                 [ Html.text options.text ]
     in
@@ -138,8 +151,8 @@ navbar { onMsg, model, shared, url } =
                 [ Html.div [ Attr.class "row align-center gap-lg" ]
                     [ Html.a [ Attr.class "header__logo", Attr.href "/" ] [ UI.logo ]
                     , Html.nav [ Attr.class "row gap-md hidden-mobile pad-left-xs" ]
-                        [ navLink { text = "docs", route = Route.Docs }
-                        , navLink { text = "guides  ", route = Route.Guides }
+                        [ navLink { text = "about", route = Route.Home_ }
+                        , navLink { text = "guide", route = Route.Guide }
                         , navLink { text = "examples", route = Route.Examples }
                         ]
                     ]