Elmstatic 0.3.1: generate subsections, make index pages, add page aliases
2018-05-07

New release is out today. Now it allows you to:

  • Create subsections with their own posts
  • Create Index.elm pages which turn into index pages, both at the root level and at subsection level. For example, Pages/Index.elm becomes the page at / in contrast to Pages/Projects.elm which becomes /projects. At subsection level, Pages/Elm/Index.elm becomes the page at /elm, while Pages/Elm/Projects.elm becomes /elm/projects.
  • Use the postprocessing copy step to give pages aliases (eg /projects can be made to appear at /portfolio as well). This is configured in config.json and is achieved by simply copying the source page to the destination path.

How sections work

In addition to the root level pages like /contact and /about, this site has a couple of subsections: /postgres and /elm. These are defined via subdirectories of Pages, and Elmstatic handles them in a particular way.

The structure of Pages for this site looks like this:

Pages
├── Elm
│   ├── About.elm
│   ├── Book.elm
│   ├── Contact.elm
│   ├── Index.elm
│   ├── Post.elm
│   └── Posts.elm
|
├── Postgres
│   ├── About.elm
│   ├── Book.elm
│   ├── Contact.elm
│   ├── Post.elm
│   └── Posts.elm
|
├── About.elm
├── Contact.elm
├── Index.elm
├── Post.elm
├── Posts.elm
└── Projects.elm

Correspondingly, under Posts I have:

Posts
├── Elm
│   ├── 2018-01-23-decoding-json-to-nested-record-fields-in-elm.md
│   ├── 2018-03-15-how-to-read-elm-types-like-html-msg.md
|   └── ...
└── Postgres
|   ├── 2013-11-11-installing-postgis-with-homebrew.md
|   ├── 2014-11-18-visualising-postgis-data-from-shell.md
|   └── ...
├── 2009-12-06-add-case-insensitive-finders-by-extending-activerecord.md
├── 2010-03-04-delete-expired-activerecord-based-sessions-regularly.md
└── ...

Each subsection must have Post.elm and Posts.elm, everything else is optional. In my case, I set up different “About” pages at the root level and in each subsection (mainly because I wanted to have different headers in each subscection), so I have /about, /elm/about and /postgres/about.

Most of the special handling is to do with posts. /posts/elm only lists posts from the Posts/Elm directory, and /posts/postgres only lists posts from the Posts/Elm directory. However, /posts aggregates all of the posts into a single list, meaning it lists posts from the root level as well as posts from each subsection.

Further, /posts is generated using Pages/Posts.elm, and root level posts are generated using Pages/Post.elm. Each subsection has its own templates, so, for example, /posts/elm is generated using Pages/Elm/Posts.elm, and the posts under the Elm subsections are generated using Pages/Elm/Post.elm.

Each section is treated as an additional tag for posts in that section, so Elmstatic also generates /tags/elm and /tags/postgres pages.

Currently, there are some opportunities to avoid duplication at the Elm code level (by extracting functions into a shared module), but there isn’t a built-in mechanism to specify section specific layout elements such as header/footer or styles, for example. I opted to keep things simple and duplicate some of the pages, but I’m open to ideas for making this better.

Would you like to dive further into Elm?
📢 My book
Practical Elm
skips the basics and gets straight into the nuts-and-bolts of building non-trivial apps.
🛠 Things like building out the UI, communicating with servers, parsing JSON, structuring the application as it grows, testing, and so on.
Practical Elm