add examples, update images

README.md

@@ -1,4 +1,4 @@
-# [![elm-spa](https://next.elm-spa.dev/images/rounded-logo-bg.png)](https://elm-spa.dev)
+# [![elm-spa](https://v6.elm-spa.dev/images/rounded-logo-bg.png)](https://elm-spa.dev)
 
 # **Installation**
 
@@ -11,9 +11,7 @@ npm install -g elm-spa@latest
 ## **1. Create a new project**
 
 ```bash
-mkdir your-new-project
-cd your-new-project
-elm-spa new
+npx elm-spa new
 ```
 
 ## **2. Check out the new files**
@@ -28,13 +26,15 @@ your-new-project/
 ## **3. Run it in your browser**
 
 ```bash
-elm-spa server   # Ready at http://localhost:1234
+npx elm-spa server   # Ready at http://localhost:1234
 ```
 
 # **Learn more**
 
 __Visit the official site__ at [elm-spa.dev](https://elm-spa.dev) for more examples, guides, and other documentation.
 
-## **Do I need the Elm package?**
+### **Do I need the Elm package?**
 
-__If you are using elm-spa__, there's no need to read through the [ryannhg/elm-spa](https://package.elm-lang.org/packages/ryannhg/elm-spa/latest/) package documentation. The package exists to constrain the CLI, and provides basic internal helper functions. Check out the official guide instead!
+If you are using elm-spa, there's no need to read the [ryannhg/elm-spa](https://package.elm-lang.org/packages/ryannhg/elm-spa/latest/) package documentation. The package only exists to constrain the CLI, and provides a few basic internal helper functions. 
+
+Check out [the official website](https://elm-spa.dev) instead!

docs/public/content/examples.md

@@ -2,28 +2,43 @@
 
 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.
 
-## Featured examples
-
 ### Hello, world!
 
-[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
-
-### Pages & routing
+Get an introduction to the framework with a simple app.
 
 [![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
 
+### Pages
+
+Learn how pages and URL routing work together.
+
+[![Hello, world!](/content/images/02-pages.png)](/examples/02-pages)
+
 ### Local storage
 
-[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+Use ports and local storage to persist data on refresh.
+
+[![Hello, world!](/content/images/03-storage.png)](/examples/03-storage)
 
 ### User authentication
 
-[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+Explore the elm-spa's user authentication API.
 
-### Testing
+[![Hello, world!](/content/images/04-authentication.png)](/examples/04-authentication)
 
-[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
 
-### Working with NPM
+## More examples
 
-[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
+There are more examples available on the official repo:
+
+__[Working with NPM 🔗](https://github.com/ryannhg/elm-spa/tree/main/examples/05-vite)__
+
+Use [Vite](https://vitejs.dev/) instead of the default __elm-spa server__ command. This gives you access to NPM, reading environment variables, and fancier JS ecosystem stuff.
+
+__[Testing 🔗](https://github.com/ryannhg/elm-spa/tree/main/examples/06-testing)__
+
+Use [elm-test](https://github.com/elm-explorations/test) and [elm-program-test](https://elm-program-test.netlify.app/) to write unit and end-to-end tests for your single page application.
+
+__[Using Elm UI 🔗](https://github.com/ryannhg/elm-spa/tree/main/examples/07-elm-ui)__
+
+Use the wonderful [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest) package to create web UIs without the need for HTML or CSS. This example can also be applied to [elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/) or any other custom UI of your choice.

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

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

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

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

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

@@ -100,3 +100,7 @@ subscriptions : Request -> Model -> Sub Msg
 If you want all pages to listen for keyboard events, window resizing, or other external updates, this `subscriptions` function is a great place to wire those up! 
 
 It also has access to the current URL request value, so you can conditionally subscribe to events.
+
+---
+
+__Next up:__ [Views](./06-views)

docs/public/content/guide/06-views.md

@@ -103,3 +103,7 @@ placeholder pageName =
     , element = Element.text pageName
     }
 ```
+
+---
+
+__Next up:__ [Examples](../examples)

docs/public/style.css

@@ -563,6 +563,7 @@ hr { border: 0; }
 
 @media screen and (max-width: 640px) {
   .home__section { font-size: 1em }
+  .margin-override { margin-right: 0 !important; }
 }
 
 /* Footer */

docs/src/UI/Layout.elm

@@ -99,7 +99,7 @@ viewDocumentation options markdownContent view =
                 ]
             , Html.main_ [ Attr.class "flex" ]
                 [ UI.row.lg [ UI.align.top ]
-                    [ Html.div [ Attr.class "col flex" ] view
+                    [ Html.div [ Attr.class "col flex margin-override" ] view
                     , Html.div [ Attr.class "hidden-mobile sticky pad-y-lg table-of-contents" ]
                         [ UI.Sidebar.viewTableOfContents
                             { content = markdownContent

elm.json

@@ -1,14 +1,12 @@
 {
     "type": "package",
     "name": "ryannhg/elm-spa",
-    "summary": "Single page apps made easy.",
+    "summary": "single page apps made easy.",
     "license": "BSD-3-Clause",
-    "version": "5.3.0",
+    "version": "6.0.0",
     "exposed-modules": [
-        "ElmSpa.Request",
         "ElmSpa.Page",
-        "ElmSpa.Beta",
-        "ElmSpa.Internals.Page"
+        "ElmSpa.Request"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {

examples/01-hello-world/elm.json

@@ -3,7 +3,8 @@
     "source-directories": [
         "src",
         ".elm-spa/defaults",
-        ".elm-spa/generated"
+        ".elm-spa/generated",
+        "../../src"
     ],
     "elm-version": "0.19.1",
     "dependencies": {
@@ -12,8 +13,7 @@
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
             "elm/json": "1.1.3",
-            "elm/url": "1.0.0",
-            "ryannhg/elm-spa": "5.3.0"
+            "elm/url": "1.0.0"
         },
         "indirect": {
             "elm/time": "1.0.0",

examples/02-pages/elm.json

@@ -3,7 +3,8 @@
     "source-directories": [
         "src",
         ".elm-spa/defaults",
-        ".elm-spa/generated"
+        ".elm-spa/generated",
+        "../../src"
     ],
     "elm-version": "0.19.1",
     "dependencies": {
@@ -13,8 +14,7 @@
             "elm/html": "1.0.0",
             "elm/http": "2.0.0",
             "elm/json": "1.1.3",
-            "elm/url": "1.0.0",
-            "ryannhg/elm-spa": "5.3.0"
+            "elm/url": "1.0.0"
         },
         "indirect": {
             "elm/bytes": "1.0.8",

examples/02-pages/src/Pages/Static.elm

@@ -3,7 +3,7 @@ module Pages.Static exposing (page)
 import Gen.Params.Static exposing (Params)
 import Html
 import Page exposing (Page)
-import Request
+import Request exposing (Request)
 import Shared
 import UI
 import View exposing (View)

examples/04-authentication/src/Auth.elm

@@ -11,7 +11,7 @@ module Auth exposing
 -}
 
 import Domain.User
-import ElmSpa.Internals.Page as ElmSpa
+import ElmSpa.Page as ElmSpa
 import Gen.Route exposing (Route)
 import Request exposing (Request)
 import Shared

examples/05-vite/elm.json

@@ -3,7 +3,8 @@
     "source-directories": [
         "src",
         ".elm-spa/defaults",
-        ".elm-spa/generated"
+        ".elm-spa/generated",
+        "../../src"
     ],
     "elm-version": "0.19.1",
     "dependencies": {
@@ -12,8 +13,7 @@
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
             "elm/json": "1.1.3",
-            "elm/url": "1.0.0",
-            "ryannhg/elm-spa": "5.3.0"
+            "elm/url": "1.0.0"
         },
         "indirect": {
             "elm/time": "1.0.0",

examples/07-elm-ui/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+.elm-spa
+elm-stuff
+node_modules
+dist

examples/07-elm-ui/README.md

@@ -0,0 +1,28 @@
+# my new project
+> 🌳  built with [elm-spa](https://elm-spa.dev)
+
+## dependencies
+
+This project requires the latest LTS version of [Node.js](https://nodejs.org/)
+
+```bash
+npm install -g elm elm-spa
+```
+
+## running locally
+
+```bash
+elm-spa server  # starts this app at http:/localhost:1234
+```
+
+### other commands
+
+```bash
+elm-spa add    # add a new page to the application
+elm-spa build  # production build
+elm-spa watch  # runs build as you code (without the server)
+```
+
+## learn more
+
+You can learn more at [elm-spa.dev](https://elm-spa.dev)

examples/07-elm-ui/elm.json

@@ -0,0 +1,28 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src",
+        ".elm-spa/defaults",
+        ".elm-spa/generated",
+        "../../src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.5",
+            "elm/html": "1.0.0",
+            "elm/json": "1.1.3",
+            "elm/url": "1.0.0",
+            "mdgriffith/elm-ui": "1.1.8"
+        },
+        "indirect": {
+            "elm/time": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}

examples/07-elm-ui/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <script src="/dist/elm.js"></script>
+  <script> Elm.Main.init() </script>
+</body>
+</html>

examples/07-elm-ui/src/Pages/Home_.elm

@@ -0,0 +1,17 @@
+module Pages.Home_ exposing (view)
+
+import Element
+import View exposing (View)
+
+
+view : View msg
+view =
+    { title = "Homepage"
+    , attributes = []
+    , element =
+        Element.el
+            [ Element.centerX
+            , Element.centerY
+            ]
+            (Element.text "Woohoo, it's Elm UI!")
+    }

examples/07-elm-ui/src/View.elm

@@ -0,0 +1,41 @@
+module View exposing (View, map, none, placeholder, toBrowserDocument)
+
+import Browser
+import Element exposing (Element)
+
+
+type alias View msg =
+    { title : String
+    , attributes : List (Element.Attribute msg)
+    , element : Element msg
+    }
+
+
+placeholder : String -> View msg
+placeholder str =
+    { title = str
+    , attributes = []
+    , element = Element.text str
+    }
+
+
+none : View msg
+none =
+    placeholder ""
+
+
+map : (a -> b) -> View a -> View b
+map fn view =
+    { title = view.title
+    , attributes = view.attributes |> List.map (Element.mapAttribute fn)
+    , element = Element.map fn view.element
+    }
+
+
+toBrowserDocument : View msg -> Browser.Document msg
+toBrowserDocument view =
+    { title = view.title
+    , body =
+        [ Element.layout view.attributes view.element
+        ]
+    }

src/ElmSpa/Beta.elm

@@ -1,16 +0,0 @@
-module ElmSpa.Beta exposing (isBeta)
-
-{-| Temporarily here to make the v6 release trigger a major release.
-
-Will be removed when the beta is over.
-
-@docs isBeta
-
--}
-
-
-{-| Returns True until full release (v6.x)
--}
-isBeta : Bool
-isBeta =
-    True

src/ElmSpa/Page.elm

@@ -1,4 +1,4 @@
-module ElmSpa.Internals.Page exposing
+module ElmSpa.Page exposing
     ( Page, static, sandbox, element, advanced
     , Protected(..), protected
     , Bundle, bundle

src/cli/src/defaults/Auth.elm

@@ -10,7 +10,7 @@ module Auth exposing
 
 -}
 
-import ElmSpa.Internals.Page as ElmSpa
+import ElmSpa.Page as ElmSpa
 import Gen.Route exposing (Route)
 import Request exposing (Request)
 import Shared

src/cli/src/templates/page.ts

@@ -15,7 +15,7 @@ module Page exposing
 
 import Auth exposing (User)
 import Effect exposing (Effect)
-import ElmSpa.Internals.Page as ElmSpa
+import ElmSpa.Page as ElmSpa
 import Gen.Route exposing (Route)
 import Request exposing (Request)
 import Shared

src/cli/src/templates/pages.ts

@@ -15,7 +15,7 @@ module Gen.Pages exposing (Model, Msg, init, subscriptions, update, view)
 
 import Browser.Navigation exposing (Key)
 import Effect exposing (Effect)
-import ElmSpa.Internals.Page
+import ElmSpa.Page
 ${paramsImports(pages)}
 import Gen.Model as Model
 import Gen.Msg as Msg
@@ -69,11 +69,11 @@ ${pagesBundleDefinition(pages, options)}
 
 
 type alias Bundle params model msg =
-    ElmSpa.Internals.Page.Bundle params model msg Shared.Model (Effect Msg) Model Msg (View Msg)
+    ElmSpa.Page.Bundle params model msg Shared.Model (Effect Msg) Model Msg (View Msg)
 
 
 bundle page toModel toMsg =
-    ElmSpa.Internals.Page.bundle
+    ElmSpa.Page.bundle
         { redirecting =
             { model = Model.Redirecting_
             , view = View.none