Update references to Template Modules in docs to new term Page Module.

This commit is contained in:
Dillon Kearns 2021-10-13 11:08:56 -07:00
parent 3884e86c37
commit 9cf98f1177
6 changed files with 55 additions and 42 deletions

View File

@ -12,7 +12,7 @@
### CLI commands
- `elm-pages dev` - Run a dev server
- `elm-pages add Slide.Number_` Generate scaffolding for a new Page Template
- `elm-pages add Slide.Number_` Generate scaffolding for a new Page Module
- `elm-pages build` - run a full production build
### The dev server
@ -48,7 +48,7 @@ Must expose
- `template : SharedTemplate Msg Model StaticData msg`
- `Msg` - global `Msg`s across the whole app, like toggling a menu in the shared header view
- `Model` - shared state that persists between page navigations. This `Shared.Model` can be accessed by Page Templates.
- `Model` - shared state that persists between page navigations. This `Shared.Model` can be accessed by Page Modules.
- `SharedMsg` (todo - this needs to be documented better. Consider whether there could be an easier way to wire this in for users, too)
#### `Site.elm`
@ -84,12 +84,12 @@ There
## Page Modules
Page Templates are Elm modules in the `src/Page` folder that define a top-level `template`.
Page Modules are Elm modules in the `src/Page` folder that define a top-level `page`.
You build the `template` using a builder chain, adding complexity as needed. You can scaffold a simple stateless page with `elm-pages add Hello.Name_`. That gives you `src/Page/Hello/Name_.elm`.
You build the `page` using a builder chain, adding complexity as needed. You can scaffold a simple stateless page with `elm-pages add Hello.Name_`. That gives you `src/Page/Hello/Name_.elm`.
```elm
module Template.Hello.Name_ exposing (Model, Msg, StaticData, template)
module Page.Hello.Name_ exposing (Model, Msg, StaticData, page)
import DataSource
import View exposing (View)
@ -98,7 +98,7 @@ import Head.Seo as Seo
import Html exposing (text)
import Pages.ImagePath as ImagePath
import Shared
import Template exposing (StaticPayload, Template)
import Page exposing (StaticPayload, Page)
type alias Route = { name : String }
@ -108,13 +108,13 @@ type alias Model = ()
type alias Msg = Never
template : Template Route StaticData
template =
Template.noStaticData
page : Page Route StaticData
page =
Page.noStaticData
{ head = head
, staticRoutes = DataSource.succeed [ { name = "world" } ]
}
|> Template.buildNoState { view = view }
|> Page.buildNoState { view = view }
head :

View File

@ -11,7 +11,7 @@ This will create a new project in `my-project/`. You can then start a dev server
## CLI commands
- `elm-pages dev` - Start the `elm-pages` dev server
- `elm-pages add Slide.Number_` Generate scaffolding for a new Page Template
- `elm-pages add Slide.Number_` Generate scaffolding for a new Page Module
- `elm-pages build` - generate a full production build in the `dist/` folder. You'll often want to use a CDN service like [Netlify](http://netlify.com/) or [Vercel](https://vercel.com/) to deploy these generated static files
## The dev server

View File

@ -91,10 +91,9 @@ Page module, and can render it within a layout.
Must expose
- `template : SharedTemplate Msg Model StaticData msg`
- `init : SharedTemplate Msg Model StaticData msg`
- `Msg` - global `Msg`s across the whole app, like toggling a menu in the shared header view
- `Model` - shared state that persists between page navigations. This `Shared.Model` can be accessed by Page Templates.
- `SharedMsg`
- `Model` - shared state that persists between page navigations. This `Shared.Model` can be accessed by Page Modules.
## `Site.elm`
@ -110,6 +109,28 @@ Files in this folder are copied directly into `dist/` when you run `elm-pages bu
For example, if you had a file called `public/images/profile.jpg`, then you could access it at `http://localhost:1234/images/profile.jpg` in your dev server, or the corresponding path in your production domain.
## `index.js`
## `public/index.js`
## `style.css`
This is the entrypoint for your JavaScript. Export an Object with a functions `load` and `flags`. Right now, this is the only place that user JavaScript code can be loaded. You can use `import` statements to load other JS files here.
`load` is an `async` function that will be called with a Promise that you can await to register ports on your Elm application (or just wait until the Elm application is loaded).
`flags` will be passed in to your `Flags` in your `Shared.elm` module.
```javascript
export default {
load: async function (elmLoaded) {
const app = await elmLoaded;
// console.log("App loaded", app);
},
flags: function () {
return "You can decode this in Shared.elm using Json.Decode.string!";
},
};
```
## `public/style.css`
This CSS file will be included on the page. It will also live reload if you make changes to this file.
Right now, this is the only user CSS file that is loaded. You can use CSS imports to load other CSS files here.

View File

@ -4,12 +4,12 @@ description: Page Modules are the blueprint for a route in elm-pages.
# Page Modules
Page Templates are Elm modules in the `src/Page` folder that define a top-level `page`.
Page Modules are Elm modules in the `src/Page` folder that define a top-level `page`.
You build the `template` using a builder chain, adding complexity as needed. You can scaffold a simple stateless page with `elm-pages add Hello.Name_`. That gives you `src/Page/Hello/Name_.elm`.
You build the `page` using a builder chain, adding complexity as needed. You can scaffold a simple stateless page with `elm-pages add Hello.Name_`. That gives you `src/Page/Hello/Name_.elm`.
```elm
module Template.Hello.Name_ exposing (Model, Msg, StaticData, template)
module Page.Hello.Name_ exposing (Model, Msg, StaticData, page)
import DataSource
import View exposing (View)
@ -18,7 +18,7 @@ import Head.Seo as Seo
import Html exposing (text)
import Pages.ImagePath as ImagePath
import Shared
import Template exposing (StaticPayload, Template)
import Page exposing (StaticPayload, Page)
type alias Route = { name : String }
@ -28,13 +28,13 @@ type alias Model = ()
type alias Msg = Never
template : Template Route StaticData
template =
Template.noStaticData
page : Page Route StaticData
page =
Page.noStaticData
{ head = head
, staticRoutes = DataSource.succeed [ { name = "world" } ]
}
|> Template.buildNoState { view = view }
|> Page.buildNoState { view = view }
head :

View File

@ -8,13 +8,13 @@ elm-pages generate Projects.Username_.Repo_
type alias RouteParams =
{ username : String, repo : String }
template : Template RouteParams StaticData
template =
Template.noStaticData
page : Page RouteParams StaticData
page =
Page.noStaticData
{ head = head
, staticRoutes = StaticHttp.succeed []
}
|> Template.buildNoState { view = view }
|> Page.buildNoState { view = view }
view :
@ -28,10 +28,6 @@ view static =
## Core Concepts
- Page Templates (`Template.*.elm`)
- Page Modules (`Page.*.elm`)
- `DataSource`s
- `Shared.elm`, `Site.elm`
## Page Templates
Here's another body

View File

@ -8,13 +8,13 @@ elm-pages add Projects.Username_.Repo_
type alias RouteParams =
{ username : String, repo : String }
template : Template RouteParams StaticData
template =
Template.noStaticData
page : Page RouteParams StaticData
page =
Page.noStaticData
{ head = head
, staticRoutes = StaticHttp.succeed []
}
|> Template.buildNoState { view = view }
|> Page.buildNoState { view = view }
view :
@ -28,10 +28,6 @@ view static =
## Core Concepts
- Page Templates (`Template.*.elm`)
- Page Modules (`Page.*.elm`)
- `DataSource`s
- `Shared.elm`, `Site.elm`
## Page Templates
Here's another body