Live Demo : https://jsr.pages.dev/
A beginners project for a Vite-Powered single page web application with HTML, CSS, Javascript (Routing, Template literals) and Markdown.
git clone https://github.com/phothinmg/jsr.gitcd jsrnpm installnpm run dev
Web app on :
src/router.js
import { home,about } from "../page-blog/pages";
import blog from "../page-blog/blog";
// import yours
class Router {
// ***Router code
}
// Add your pages and posts
// Point yours <a href="/*"></a>
const Pages = {
"/": new Router(home),
"/about": new Router(about),
"/blog/posts": new Router(blog.posts),
"/blog/postOne": new Router(blog.postOne),
"/blog/postTwo": new Router(blog.postTwo),
"/blog/md": new Router(blog.md),
};Router code are originally from https://github.com/iMykhailychenko/simple-router, edited by me.
Template literals are used to write pages and blog posts.
page-blog/pages.js
const home = `
<h3>Home</h3>
<p> This is home page</p>
`;
const about = `
<h3>About</h3>
<p> This is about page</p>
`;
// Add more pages and export to router.js
export {home,about}page-blog/blog.js
const blog = {
// Blog home
posts: `
<ol>
<li><a href="/blog/postOne" accesskey = "p1" >Post One</a></li>
<li><a href="/blog/postTwo" accesskey = "p2" >Post Two</a></li>
<li><a href="/blog/md" accesskey = "p3" >Markdown Example Post</a></li>
</ol>
`,
// Add posts
postOne: `
<h3>Post One</h3>
`,
postTwo: `
<h3>Post Two</h3>
`,
// Markdown between <md-block>
md:`
<md-block>
Markdown syntax here
</md-block>
`,
};
// Export to router.js
export default blogMore information about MD-Block , visit https://md-block.verou.me/
-
Cloudflare Pages . Documentation : https://developers.cloudflare.com/pages/get-started/guide/ .
-
Vercel . Documentation : https://vercel.com/docs/getting-started-with-vercel
-
Netlify . Documentation : https://docs.netlify.com/