You can get data representing type-safe, guaranteed-available
routes from your generated Pages module in your repo. If the file
is not available, make sure you've run elm-pages develop.
The key in the PagePath key type protects you from using
a route that is not from the static routes that the generated
Pages.elm module provides. That means that if you use one of these values,
you can completely trust it and get helpful compiler errors if you mispell something
or access a dead link!
The static PagePaths for your site are generated so you can grab them in
two ways:
PagePath lookupYou will find a list of all the pages in your app in this generated code:
Pages.allPages : List (PagePath Pages.PathKey)This is handy for creating an index page, for example showing all the blog posts in your site.
PagePath lookupYou can lookup a specific static route based on its path using the record-based lookup:
Pages.pagesThis gives you a record, based on your local content directory, that lets you look paths up like so:
import Pages
import Pages.PagePath as PagePath exposing (PagePath)
homePath : PagePath Pages.PathKey
homePath =
Pages.pages.index
-- PagePath.toString homePath
-- => ""or
import Pages
import Pages.PagePath as PagePath exposing (PagePath)
helloWorldPostPath : PagePath Pages.PathKey
helloWorldPostPath =
Pages.pages.blog.helloWorld
-- PagePath.toString helloWorldPostPath
-- => "blog/hello-world"Note that in the hello-world example it changes from the kebab casing of the actual
URL to camelCasing for the record key.
This is useful for referring to static routes directly from your Elm code (you'll need a different technique for verifying that a link in your markup content is valid).
For example, you might have a navbar that links to specific routes.
Gives you the page's relative URL as a String. This is useful for constructing links:
import Html exposing (Html, a)
import Html.Attributes exposing (href)
import Pages
import Pages.PagePath as PagePath exposing (PagePath)
-- `Pages` is a generated module
homePath : PagePath Pages.PathKey
homePath =
Pages.pages.index
linkToHome : Html msg
linkToHome =
a [ href (PagePath.toString homePath) ] [ text "🏡 Home" ]This allows you to build a URL to an external resource. Avoid using
PagePath.external to refer to statically available routes. Instead, use
this only to point to outside pages.
import Pages
import Pages.PagePath as PagePath exposing (PagePath)
-- The `Pages` module is generated in your codebase.
-- Notice that we can still annotate this external link
-- with `Pages.PathKey`, since external links are always valid
-- (unlike internal routes, which are guaranteed to be present
-- if your code compiles).
googlePath : PagePath Pages.PathKey
googlePath =
PagePath.external "https://google.com"Don't bother using these.
There are only two ways to get a
PagePath:Pages.elmmodule in your repo (see above), orPagePath.external.So
PagePathrepresents either a 1) known, static page path, or 2) an external page path (which is not validated so use these carefully!).