Currently the PostView.js page renders the same content as Posts.js.

https://github.com/dcode-youtube/single-page-app-vanilla-js/blob/master/frontend/static/js/views/PostView.js

It doesn't have to work as a proper single post view but the heading and content should at least look different.

If an element is created within a link (e.g. an image/logo or just a <span>) then the whole page always reloads when the view is called.

Within the Dashboard.js file this link works great without page reload:
<a href="/posts" data-link>View recent posts</a>.

But whole page reloads here:
<a href="/posts" data-link><span>View recent posts</span></a>.

Maybe we can adjust something here?:

if (e.target.matches("[data-link]")) {
            e.preventDefault();
            navigateTo(e.target.href);
}

Thanks

Hello,

Based on your repo, I've been able to achieve quite a bit. Many thanks for that!
The question I have now is how to implement optional parameters. I have read on the internet that a question mark after the parameter identifier, like the following, should lead to the result.

{ path: "/article-list/:page?", view: articleList },

Unfortunately, that doesn't seem to work here. Do you have a solution?

Thank you very much and best regards.
Felix

Hi, I see you've covered a default license as ISC in your package.json.

Can I suggest you create a new license? If you create LICENSE and choose MIT, GH will generate one for you.

Myself and others have forked the repo so would be nice to include the original LICENSE file in our forks.

Currently, access these urls are difference:

/posts
/posts/

How to make these urls the same?

Currently, I have to define two paths for the same view:

const routes = [
        { path: "/posts", view: Posts },
        { path: "/posts/", view: Posts },
    ];

I have something like this:
<a href="/m/16" data-link> <picture> ... </picture> </a>

I tried with a > * { pointer-events: none } in CSS but it doesn't work and the image is now not-clickable (however normal images (<a href="/m/16" data-link> <img> </a>) work).

Currently the default port used by the app is 5060, which is considered unsafe by chrome browser. Trying to visit the address with such ports is restricted by chrome by default with ERR_UNSAFE_PORT error. This can be circumvented manually or just by editing the port in dotenv or server.js file, but I think it would be better if you change the port to something else.

Here is a list of ports that chrome considers unsafe.
https://chromium.googlesource.com/chromium/src.git/+/refs/heads/master/net/base/port_util.cc

List for firefox.
https://www-archive.mozilla.org/projects/netlib/portbanning#portlist

• It's my first time building a SPA with vanilla js and I was wondering, can this work with a webpack-based application?