refine token parser + menu bar

pages can now be dynamically loaded with the template prefix '@'
main
Brett 2023-08-20 21:33:36 -04:00
parent dd96940c67
commit 2f4b2a8c98
6 changed files with 84 additions and 21 deletions

Binary file not shown.

View File

@ -1 +1 @@
{"clientID":"50a21c33-66c4-5a0f-902f-9434632025e6","clientToken":"Tcl8i/S1Czz+UGS6NzeRu/Hyk66oJjYbsRsm3tPqd/AVt2yAVbFEEi/oGdaoIlTriQf5TX7heYPxqdcGMmLRVg=="}
{"clientID":"50a21c33-66c4-5a0f-902f-9434632025e6","clientToken":"bsmbPoeuxWBE0/j1W9O/EOs85s79wIS1P5qYHovfhkIhNwl5SGkcpHww+DnbzwNCJ1y+Tb2hLpic3qtgbbtWvg=="}

View File

@ -0,0 +1,34 @@
ul.menu_bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.menu_bar li.left {
display: inline;
float: left;
}
ul.menu_bar li.right {
display: inline;
float: right;
}
ul.menu_bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.menu_bar li a.active {
background-color: #04AA6D;
}
/* Change the link color to #111 (black) on hover */
ul.menu_bar li a:hover {
background-color: #111;
}

View File

@ -3,7 +3,7 @@
<head>
<link rel="stylesheet" href="/static/css/home.css">
<link rel="stylesheet" href="/static/css/bar.css">
<link rel="javascript" href="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<link rel="stylesheet" href="/static/css/menu_bar.css">
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
@ -14,10 +14,8 @@
<body class="blur-bgimage" style="background-image: url({{$SITE_BACKGROUND}})">
<div class="center">
<div class="body">
<div class="titlebar">
<button class="bar"><a href="/home.html">home</a></button>
<button class="bar"><a href="/projects.html">projects</a></button>
</div>
{{@menu_bar.part}}
<div class="center">
HAXsdsad
{{#_admin}}

View File

@ -3,15 +3,19 @@
<head>
<link rel="stylesheet" href="/static/css/home.css">
<link rel="stylesheet" href="/static/css/bar.css">
<link rel="stylesheet" href="/static/css/menu_bar.css">
<meta charset="UTF-8">
<meta name="description" content="Login to {{$SITE_NAME}}">
<meta name="keywords" content="{{$SITE_NAME}}">
<meta name="author" content="Brett">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{$SITE_TITLE}}</title>
</head>
<body>
<body class="blur-bgimage" style="background-image: url({{$SITE_BACKGROUND}})">
<div class="center">
<div class="body">
<div class="titlebar">
<button class="bar"><a href="/home.html">home</a></button>
<button class="bar"><a href="/projects.html">projects</a></button>
</div>
{{@menu_bar.part}}
<div class="center">
<form action="/res/login" method="post">
<label for="username">Username</label><br>

View File

@ -0,0 +1,27 @@
<ul class="menu_bar">
<li class="left"><a id="home" href="/">Home</a></li>
<li class="left"><a id="projects" href="/projects.html">Projects</a></li>
<li class="left"><a id="research" href="/research.html">Research</a></li>
<li class="left"><a id="git" href="/git.html">Git</a></li>
<li class="left"><a id='about' href="/about.html">About</a></li>
{{#_logged_in}}
<li class="right"><a href="/logout.html">Logout</a></li>
{{/_logged_in}}
{{#_not_logged_in}}
<li class="right"><a id='login' href="/login.html">Login</a></li>
{{/_not_logged_in}}
</ul>
<script>
const path = window.location.pathname;
const ids = {
"/": "home",
"/index.html": "home",
"/projects.html": "projects",
"/research.html": "research",
"/git.html": "git",
"/about.html": "about",
"/login.html": "login"
};
var element = document.getElementById(ids[path]);
element.classList += "active";
</script>