Elmstatic 0.3.1: generate subsections, make index pages, add page aliases

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:

├── 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:

├── 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.

Comments or questions? I’m @alexkorban on Twitter.

Looking for the nuts-and-bolts guide to creating non-trivial real world apps in Elm?

My book, Practical Elm for a Busy Developer, skips the basics and gets right into explaining how to do practical stuff. Things like building out the UI, communicating with servers, parsing JSON, structuring the application as it grows, testing, and so on. No handholding — the focus is on giving you more substance.

It’s up to date with Elm 0.19.

Pop in your email to get a sample chapter.

(You will also get notifications of new posts along with other mailing list only freebies.)

Book cover