This may really be a beginner question in terms of elm-pages as well as very specific to the project, but I haven’t found it answered anywhere else so please excuse me posting here.
I’ve checked out the elm-pages starter repo and stripped it from the things I don’t want. Now for my navbar, I’d like to stay consistent and highlight the link of the currently selected sub page (e.g. accentuate the link to the contact page if the user is currently viewing it). For the preexisting blog, there is the function highlightableLink
:
highlightableLink :
PagePath Pages.PathKey
-> Directory Pages.PathKey Directory.WithIndex
-> String
-> Element msg
highlightableLink currentPath linkDirectory displayName =
let
isHighlighted =
currentPath |> Directory.includes linkDirectory
in
Element.link
(if isHighlighted then
[ Font.underline
, Font.color Palette.color.primary
]
else
[]
)
{ url = linkDirectory |> Directory.indexPath |> PagePath.toString
, label = Element.text displayName
}
With this in place, you can highlight or not the link to the blog like so:
Element.row [ Element.spacing 15 ]
[ highlightableLink currentPath Pages.pages.blog.directory "Blog"
]
This works because the generated Pages
file contains this:
pages =
{ blog =
{ draft = (buildPage [ "blog", "draft" ])
, hello = (buildPage [ "blog", "hello" ])
, index = (buildPage [ "blog" ])
, directory = directoryWithIndex ["blog"]
}
, contact = (buildPage [ "contact" ])
, index = (buildPage [ ])
, directory = directoryWithIndex []
}
To me it seems though that “flat” pages (self contained vs. being a category for sub pages) don’t get a directory
, therefore I can not call the highlightableLink
with e.g. Pages.pages.contact
instead of Pages.pages.blog.directory
. So is there a canonical way of highlighting a link to a flat page? So far everything presented is part of the aforementioned repository except for my contact page.
Please be kind, I’m not only new to elm-pages, but to the elm language itself, too.