How to navigate to a custom HTML page and back to Elm preserving state?

[chshersh]

Hi everyone

For the last couple of months, I’ve been rewriting my personal website from Haskell to Elm. You can find it here:

• https://chshersh.com/

My main index.html page is written in Elm. But I also have a blog written in Markdown, so I use pandoc to generate HTML from Markdown and therefore I don’t use Elm in my blog.

However, I’m having difficulty now. I want to go to my articles from my main page, and when I go back, I want to keep the state of my Elm app. My website has some interactivity where users select the “Blog” section and then select a blog and then go to the article, so when they go back, I’d like all the selections to be the same (see screenshot).

What would be the best way to achieve that with Elm?

Here’s the source code of my website:

• GitHub - chshersh/chshersh.github.io: 💛 My website

I feel like something has to be done near these lines but I can’t figure out what exactly:

linkClicked : Model -> Browser.UrlRequest -> ( Model, Cmd Msg )
linkClicked model urlRequest =
    case urlRequest of
        Browser.Internal url ->
            ( model, Nav.load (Url.toString url) )

        Browser.External href ->
            ( model, Nav.load href )


urlChanged : Model -> Url.Url -> ( Model, Cmd Msg )
urlChanged model url =
    ( { model | route = toRoute url }
    , Cmd.none
    )

I tried changing Nav.load to Nav.pushUrl but it doesn’t work when I go back from HTML to my Elm app (it doesn’t update the content of the article).

Any help is greatly appreciated!

[lydell]

Hi!

To preserve state between page loads on the web, local storage or session storage is often used.

To do that in Elm: When the user makes a selection, call a port to store their selections in local storage. On app init, pass in the stuff stored in local storage as flags.

[paulh]

Hi Chshersh,

Welcome to the forum.

There’s a few options I can think of off the top of my head.

1. You could do everything in Elm using a markdown parser. If you search for ‘markdown’ on the packages site you’ll find quite a few. I’ve used @dillonkearns parser before, and liked it a lot.
2. You could use a port to send the state to JS and then save the state to local storage. You’d then read it back from your init function in main.elm, or pass it in as a flag.
3. You could use routing, so that the state is stored in the URL, which is what you appear to be hinting at in your question - you’re close. It would require using Nav.pushUrl (as you have tried), but you would push a url that you can use to identify your required state. This will trigger urlChanged where you can then call Nav.load to load your blog html page. You will also need to use Url.Parser to parse the url when the user comes back from your html blog to elm. So in pseudo code it would be:

User clicks link
Clicked link gets caught by linkClicked
Call Nav.pushUrl appending some identifier for the blog that was clicked
urlChanged gets called where you can call Nav.load to go the blog article
User clicks the back button
Browser goes back to the url you pushed previously
init gets called in Main.elm where you can use Url.Parser.parse to parse the url and grab your blog identifier
Update your state accordingly wrt your blog identifier

That should work fine, although it’s been a long day happy to come back to this if you need any more help.

Paul

[chshersh]

Hey @paulh and @lydell,

Thanks for the suggestion! I’ll give it a try and come back if I experience any issues.

[LupusMichaelis]

I don’t have much to add, just that you may find additional techniques by looking for PWA (Progressive Web Apps) as an implementation pattern.

It’s using service workers to hijack the browsing on a specific website. The original use is to allow for offline browsing and application like behaviour in a SPA.

This could help you maintain a state while browsing your static pages. You may even be able to write the service workers in Elm (didn’t try my-self, seems an interesting topic to dig in).