Изменён тип роутеров с # на /

This commit is contained in:
Alexander Popov 2023-08-19 03:18:03 +03:00
parent d44badb89e
commit 34aee6e4cb
Signed by: iiiypuk
GPG Key ID: E47FE0AB36CD5ED6
11 changed files with 195 additions and 135 deletions

11
.gitignore vendored
View File

@ -1,6 +1,11 @@
.parcel-cache/
.parcel-app/
ec*.exe
public/
content/
app/bootstrap*
# new env
dev/
dist/
# for windows
ec*.exe

View File

@ -1,8 +1,5 @@
public/
static/
app/assets/css/bootstrap*
app/assets/js/bootstrap*
package.json
package-lock.json
server/
*.md

View File

@ -1,7 +1,7 @@
## Используемые технологии
- **Языки:** **JavaScript** для фрота, **Crystal** для бэка и **Bash** для скриптов.
- **Инструменты:** Parcel, Prettier, EditorConfig
- **Инструменты:** Parcel, Prettier, EditorConfig, nginx
## Сборка

View File

@ -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 = '';
}

View File

@ -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

View File

@ -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"

View File

@ -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>

View File

@ -1,18 +1,16 @@
{
"private": true,
"name": "a2s",
"version": "1.0.0",
"version": "0.0.0",
"description": "ololo",
"scripts": {
"serve": "npx parcel serve --dist-dir .parcel-app app/index.html icons/*.png pages/*.html content/*/*/*",
"serve-https": "npx parcel serve --https --dist-dir public app/index.html pages/*.html content/*/*/*",
"build": "npm run clean; npm run build-pages; npm run build-app; npm run git-hash",
"build-app": "npx parcel build --no-cache --no-source-maps --no-optimize --no-content-hash --dist-dir public app/index.html",
"build-pages": "npx parcel build --no-cache --no-source-maps --no-optimize --no-content-hash --dist-dir public/ content/*/*/* pages/*.html",
"develop": "npm run clean; ln -s pages/ dev/pages/; npm run watch-app",
"watch-app": "npx parcel watch --dist-dir dev/ app/index.html",
"build": "npm run clean; npm run build-app; npm run git-hash",
"build-app": "npx parcel build --no-cache --no-source-maps --no-optimize --no-content-hash --dist-dir dist/ app/index.html",
"prettier": "npx prettier --write .",
"git-hash": "./update_commit.sh",
"clean": "rm -rf ./public/ &> /dev/null",
"test": "echo \"Error: no test specified\" && exit 1"
"clean": "rm -rf ./dev/* ./dist/* &> /dev/null"
},
"author": "Alexander Popov <iiiypuk@fastmail.fm>",
"license": "WTFPL",

View File

@ -23,7 +23,7 @@
</div>
<script type="module">
import { update_lastfm_nowplay } from './js/lastfm-nowplay.js';
import { update_lastfm_nowplay } from '/pages/js/lastfm-nowplay.js';
function autorun() {
if (!window.DEBUG) {

View File

@ -94,7 +94,7 @@
</p>
<script type="module">
import { update_rev2 } from './js/rev2.js';
import { update_rev2 } from '/pages/js/rev2.js';
function autorun() {
if (!window.DEBUG) {

View File

@ -1,10 +1,10 @@
#!/bin/sh
if [ -f "./public/index.html" ]; then
if [ -f "./dist/index.html" ]; then
GIT_COMMIT_HASH=$(git rev-parse --short HEAD)
echo -n "Update git commit hash in 'index.html' "
sed -i -- "s/{GIT_COMMIT_HASH}/$GIT_COMMIT_HASH/g" ./public/index.html
sed -i -- "s/{GIT_COMMIT_HASH}/$GIT_COMMIT_HASH/g" ./dist/index.html
echo " Complete!"
else
echo "Run 'npm run build'"