Sample Yugal App
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./yugal/yugal.css">
<title>Yugal App</title>
<meta name="title" content="Yugal App" />
<!-- ADD ANY YOUR CUSTOM <HEAD> CODE ABOVE, DON'T ADD ANY CUSTOM HEAD CODE BELOW. -->
<!-- DO NOT DELETE THIS COMMENT! THIS COMMENT IS VERY IMPORTANT FOR YUGAL TO WORK! -->
</head>
<body>
<div id="yugal-root"></div>
<script src="./yugal/yugal.js"></script>
<script src="./app.js"></script>
</body>
</html>app.js
const {navigate, router, header, title, production} = yugal;
production();
const navBar = `
<ul>
<li onclick="navigate(HomePage())">HOME</li>
<li onclick="navigate(AboutPage())">ABOUT</li>
</ul>
`;
function HomePage(){
return{
render: `
${navBar}
<h1>HOME PAGE</h1>
`,
uri: 'index.html',
onMount: ()=>{
let value = localStorage.getItem("something");
alert(value);
header("<meta name='abc' content='def' />");
title("HOME PAGE");
},
willMount:()=>{
localStorage.setItem("something", "HELLO");
header("");
}
};
}
function AboutPage(){
return{
render: `
${navBar}
<h1>ABOUT PAGE</h1>
`,
uri: 'about.html',
onMount: function(){
console.log("PAGE MOUNTED!");
title("ABOUT PAGE");
},
willMount: function(){
console.log("PAGE IS GOING TO MOUNT");
header("");
}
}
}
function error404(){
return{
render: 'ERROR!'
};
}
window.addEventListener("load", ()=>{
router({
initial: HomePage,
error404: error404,
screens: [
HomePage,
AboutPage
]
});
});In above code const {navigate, router, header, title, production} = yugal;, this line is extracting yugal.navigate, yugal.router, yugal.header, yugal.title, yugal.production as navigate, router, header, title, production respectively.
.htaccess
ErrorDocument 404 /index.htmlLast updated
Was this helpful?