single-page-app-vanilla-js's Issues
Fix post view
Currently the PostView.js page renders the same content as Posts.js.
It doesn't have to work as a proper single post view but the heading and content should at least look different.
Url ends with and without / is difference
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 },
];
Page reload
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
โ Question | Optional URL-Parameters
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
Add license
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.
[Suggestion] Change default port from 5060 to something else
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
Page is refreshed when using <picture> tag as link
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).
Trivial question
- It's my first time building a SPA with vanilla js and I was wondering, can this work with a webpack-based application?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.