Изменён тип роутеров с # на /
This commit is contained in:
45
app/app.js
45
app/app.js
@@ -22,7 +22,17 @@ window.onload = function () {
|
||||
document.getElementById('app_theme_switcher').addEventListener('click', switch_theme, false);
|
||||
|
||||
// routes handler
|
||||
window.addEventListener('hashchange', location_handler);
|
||||
document.addEventListener('click', (e) => {
|
||||
const { target } = e;
|
||||
if (!target.matches('nav a')) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
route();
|
||||
});
|
||||
|
||||
window.onpopstate = location_handler;
|
||||
window.route = route;
|
||||
location_handler();
|
||||
};
|
||||
|
||||
@@ -46,11 +56,24 @@ function switch_theme() {
|
||||
}
|
||||
}
|
||||
|
||||
const route = (event) => {
|
||||
event = event || window.event; // get window.event if event argument not provided
|
||||
event.preventDefault();
|
||||
// window.history.pushState(state, unused, target link);
|
||||
window.history.pushState({}, '', event.target.href);
|
||||
location_handler();
|
||||
};
|
||||
|
||||
const location_handler = async () => {
|
||||
let location = window.location.hash.replace('#', '');
|
||||
if (location.length == 0) {
|
||||
const url = window.location.pathname;
|
||||
let location;
|
||||
|
||||
if (url == 0 || url == '/') {
|
||||
location = '/';
|
||||
} else {
|
||||
location = url.slice(1);
|
||||
}
|
||||
|
||||
const route = routes[location] || routes['404'];
|
||||
const html = await fetch(route.template).then((response) => response.text());
|
||||
document.getElementById('content').innerHTML = html;
|
||||
@@ -58,11 +81,19 @@ const location_handler = async () => {
|
||||
document.querySelector('meta[name="description"]').setAttribute('content', route.description);
|
||||
|
||||
if (route.script) {
|
||||
let script = document.getElementById('content').querySelector('script');
|
||||
document.querySelector('#autorun').innerHTML = script.innerHTML;
|
||||
script.remove();
|
||||
const route_script = document.getElementById('content').querySelector('script');
|
||||
let autorun_script = document.querySelector('#autorun');
|
||||
|
||||
eval(document.querySelector('#autorun').innerHTML);
|
||||
// инициализирует новый блок кода
|
||||
autorun_script.remove();
|
||||
autorun_script = document.createElement('script');
|
||||
autorun_script.setAttribute('type', 'module');
|
||||
autorun_script.setAttribute('id', 'autorun');
|
||||
autorun_script.innerHTML = route_script.innerHTML;
|
||||
|
||||
// удаляет скрипт из загруженной страницы и запускает новый
|
||||
route_script.remove();
|
||||
document.body.append(autorun_script);
|
||||
} else {
|
||||
document.querySelector('#autorun').innerHTML = '';
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* SITE */
|
||||
Last update: Sun Aug 06 04:57 AM MSK 2023
|
||||
Last update: Sun Aug 19 02:47 AM MSK 2023
|
||||
Language: Russian
|
||||
Doctype: HTML5
|
||||
IDE: Sublime Text 4
|
||||
Tools: Parcel, Prettier, EditorConfig
|
||||
Tools: Parcel, Prettier, EditorConfig, nginx
|
||||
Components: Bootstrap 5.3.1
|
||||
Server: 1Gb RAM 1CPU KVM by FirstVDS
|
||||
Server OS: ArchLinux rolling
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-link fw-bold py-1 px-0 icon-link" href="#about">
|
||||
<a class="nav-link fw-bold py-1 px-0 icon-link" href="/about">
|
||||
<svg
|
||||
class="svg-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -1,106 +1,135 @@
|
||||
<ul class="dropdown-menu d-block position-static shadow mb-3 mb-md-0">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#games">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-activity">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
||||
</svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex gap-2 align-items-center"
|
||||
href="https://ё.a2s.su/"
|
||||
target="_blank">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-book">
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
||||
</svg>
|
||||
Буква <span class="font-monospace">ё</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#git">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path
|
||||
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
|
||||
<line x1="12" y1="22.08" x2="12" y2="12" />
|
||||
</svg>
|
||||
Git инстанс
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#personal">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-user">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
Personal
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#trash">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-trash-2">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path
|
||||
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
</svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul class="dropdown-menu d-block position-static shadow mb-3 mb-md-0">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="/games">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-activity">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
||||
</svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="/old_pc">
|
||||
Старые компьютеры
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex gap-2 align-items-center"
|
||||
href="https://ё.a2s.su/"
|
||||
target="_blank">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-book">
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
||||
</svg>
|
||||
Буква <span class="font-monospace">ё</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="/irc">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<line x1="4" y1="9" x2="20" y2="9" />
|
||||
<line x1="4" y1="15" x2="20" y2="15" />
|
||||
<line x1="10" y1="3" x2="8" y2="21" />
|
||||
<line x1="16" y1="3" x2="14" y2="21" />
|
||||
</svg>
|
||||
|
||||
IRC сервер
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="/git">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path
|
||||
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
|
||||
<line x1="12" y1="22.08" x2="12" y2="12" />
|
||||
</svg>
|
||||
Git инстанс
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="/personal">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-user">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
Personal
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="/trash">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-trash-2">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path
|
||||
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
</svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user