redesign website and stop using javascript
This commit is contained in:
hippoz
parent
725e7e5088
commit
ea6c4215ac
GPG key ID:
7C52899193467641
20 changed files with 133 additions and 352 deletions
|
|
@ -1,9 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>Turning the <a href="internet.html">internet</a> into a bunch of trackers, ads and zoomers yelling at eachother since 2013</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
The internet
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>hippoz</title>
|
||||
|
||||
<link rel="stylesheet" href="/res/style.css">
|
||||
|
||||
<meta name="description" content="Hippoz's homepage on hippoz.xyz with a file server, a git server, an about page, a contact page, and a blog.">
|
||||
</head>
|
||||
<body>
|
||||
<div class="card navigation noselect">
|
||||
<div class="navigation-branding">
|
||||
<span class="navigation-branding-h">
|
||||
h
|
||||
</span>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<!-- TODO: make these anchor tags with href https://www.youtube.com/watch?v=nwGY-9lwTF4 -->
|
||||
<button id='button-home' class="button-default button-selected">home</button>
|
||||
<button id='button-blog' class="button-default">blog</button>
|
||||
<button id='button-file-server' class="button-default">file server</button>
|
||||
<button id='button-git-server' class="button-default">git server</button>
|
||||
<button id='button-contact-me' class="button-default">contact me</button>
|
||||
<button id='button-about-me' class="button-default">about me</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="content-container">
|
||||
<h2>loading...</h2>
|
||||
<p>i think</p>
|
||||
</div>
|
||||
|
||||
<script src="https://git.hippoz.xyz/personalprojects/bloom/raw/branch/master/js/lib.js"></script>
|
||||
<script src="/res/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<h2>this is my about page</h2>
|
||||
<p>i think</p>
|
||||
<br>
|
||||
<p>i'm hippoz.</p>
|
||||
<p>i sometimes work on projects.</p>
|
||||
<p>i think i like javascript, node, c, c++, html, and some other stuff.</p>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
# Hey! Welcome to my site!
|
||||
```
|
||||
this is a code block
|
||||
```
|
||||
|
||||
this is just text
|
||||
|
||||
|
||||
#### This is smaller heading
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<h2>this is my blog</h2>
|
||||
<p><i>a good excuse to incoherently talk to myself</i></p>
|
||||
<p>i think</p>
|
||||
<br>
|
||||
|
||||
<br>
|
||||
<p>articles:</p>
|
||||
<div id="articlelist">
|
||||
|
||||
</div>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<h2>you can contact me</h2>
|
||||
<p>i think</p>
|
||||
<br>
|
||||
<p>my email is <a href="mailto:hippoz@hippoz.xyz">hippoz@hippoz.xyz</a></p>
|
||||
<p>i might respond.</p>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<h2>this is my homepage</h2>
|
||||
<p>i think</p>
|
||||
<br>
|
||||
<p>i'm hippoz. i sometimes do stuff.</p>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<h2>this is the upload page</h2>
|
||||
<p>i think</p>
|
||||
<br>
|
||||
<form action='https://hippoz.xyz/files/api/upload' method="POST" enctype="multipart/form-data">
|
||||
<input class="input" placeholder="password" type="password" name="password"> </br>
|
||||
<input class="input" placeholder="file name" type="text" name="filename"> </br>
|
||||
<label class="button-default" for="upload-file">browse</label> <br>
|
||||
<input type="file" name="file" id="upload-file"/> </br>
|
||||
<input class="button-default" type='submit' value='upload'/>
|
||||
</form>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
const blogArticles = {
|
||||
'Welcome': 'a welcome page for my new blog'
|
||||
}
|
||||
|
||||
const blogPopulateArticleList = (elementId) => {
|
||||
const element = A(`#${elementId}`);
|
||||
|
||||
let html = '';
|
||||
for (const [k, v] of Object.entries(blogArticles)) {
|
||||
html += `<a href="#" onclick="blogVisitArticle('${k}', '${v}')">${k}</a>`;
|
||||
}
|
||||
|
||||
element.html(html);
|
||||
};
|
||||
|
||||
const blogVisitArticle = async (name, desc) => {
|
||||
if (!name || !desc) return;
|
||||
if (/[^a-zA-Z0-9\.]/.test(name)) {
|
||||
alert('Tried to access and invalid article (invalid name)');
|
||||
console.error('Tried to access and invalid article (invalid name)');
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch(`/pages/blog/articles/${name}.md`);
|
||||
if (!res.ok) {
|
||||
console.error('Article not found');
|
||||
peformRouteAction('/');
|
||||
return;
|
||||
}
|
||||
|
||||
const articleMarkdown = await res.text();
|
||||
// TODO: The output markdown is not sanitized. This is not really 100000% urgent, since I am the one that is uploading the aricles, but this still may pose a threat.
|
||||
A('#content-container').html(marked(articleMarkdown));
|
||||
A('meta[name="description"]').attr('content', desc);
|
||||
history.pushState({ route: `/article/${name}`, articleName: name }, '', `/article/${name}`);
|
||||
}
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
const loadedScripts = [];
|
||||
|
||||
let selectedButtonId = 'button-home';
|
||||
|
||||
const changeSelected = (buttonId) => {
|
||||
A(`#${selectedButtonId}`).removeClass('button-selected');
|
||||
A(`#${buttonId}`).addClass('button-selected');
|
||||
selectedButtonId = buttonId;
|
||||
};
|
||||
|
||||
const stripTrailingSlash = (str) => {
|
||||
return str.endsWith('/') ? str.slice(0, -1) : str;
|
||||
};
|
||||
|
||||
const loadBlogScripts = async () => {
|
||||
await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js');
|
||||
await loadScript('/res/blog.js');
|
||||
}
|
||||
|
||||
const peformRouteAction = async (pathname) => {
|
||||
const route = stripTrailingSlash(pathname);
|
||||
|
||||
switch (route) {
|
||||
case '': {
|
||||
A('#content-container').load('/pages/home.html');
|
||||
A('meta[name="description"]').attr('content', "Hippoz's homepage on hippoz.xyz with a file server, a git server, an about page, a contact page, and a blog.");
|
||||
break;
|
||||
}
|
||||
case '/blog': {
|
||||
A('meta[name="description"]').attr('content', "hippoz's blog");
|
||||
await loadBlogScripts();
|
||||
await A('#content-container').load('/pages/blog/blog.html');
|
||||
blogPopulateArticleList('articlelist');
|
||||
break;
|
||||
}
|
||||
case '/upload': {
|
||||
A('meta[name="description"]').attr('content', "hippoz's upload server");
|
||||
A('#content-container').load('/pages/upload.html');
|
||||
break;
|
||||
}
|
||||
case '/git': {
|
||||
window.location.href = 'https://git.hippoz.xyz/';
|
||||
break;
|
||||
}
|
||||
case '/about': {
|
||||
A('meta[name="description"]').attr('content', "hippoz's about page. i'm hippoz");
|
||||
A('#content-container').load('/pages/about.html');
|
||||
break;
|
||||
}
|
||||
case '/contact': {
|
||||
A('meta[name="description"]').attr('content', "you can contact hippoz");
|
||||
A('#content-container').load('/pages/contact.html');
|
||||
break;
|
||||
}
|
||||
case '/punjabfreemovie': {
|
||||
A('meta[name="description"]').attr('content', "");
|
||||
A('#content-container').html('سوف تموت من أجل خطاياكwinrarfreetrialفيلم أنبوب مثلي الجنسfreemovie 240p camel sex.mp4 😳😳😳' );
|
||||
break;
|
||||
}
|
||||
case '/404': {}
|
||||
default: {
|
||||
A('#content-container').html('<h2>page not found</h2><p>i think</p>');
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const buttonMap = {
|
||||
'button-home': '/',
|
||||
'button-blog': '/blog',
|
||||
'button-file-server': '/upload',
|
||||
'button-git-server': '/git',
|
||||
'button-about-me': '/about',
|
||||
'button-contact-me': '/contact',
|
||||
'button-free-movie': '/punjabfreemovie',
|
||||
'__NOT_FOUND': '/404'
|
||||
}
|
||||
|
||||
const dynamicRoutesActions = {
|
||||
'/article': async (arg) => {
|
||||
await loadBlogScripts();
|
||||
|
||||
const desc = blogArticles[arg];
|
||||
if (!desc) {
|
||||
peformRouteAction('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
changeSelected(getButtonFromPathname('/blog'));
|
||||
blogVisitArticle(arg, desc);
|
||||
}
|
||||
};
|
||||
|
||||
const onButtonClick = (buttonId) => {
|
||||
// The condition after && is kinda of a hack, the reason I do this is because I want users to be able to click the blog button and return to the article list to continue reading when they are already on an article.
|
||||
if (selectedButtonId === buttonId && buttonId !== 'button-blog') {
|
||||
return;
|
||||
}
|
||||
changeSelected(buttonId);
|
||||
|
||||
let route = buttonMap[buttonId];
|
||||
if (!route) {
|
||||
route = buttonMap['__NOT_FOUND'];
|
||||
}
|
||||
|
||||
peformRouteAction(route);
|
||||
|
||||
history.pushState({ route }, '', route);
|
||||
};
|
||||
|
||||
const getButtonFromPathname = (pathname) => {
|
||||
let button = 'button-home';
|
||||
for (const [k, v] of Object.entries(buttonMap)) {
|
||||
if (v === pathname) {
|
||||
button = k;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return button;
|
||||
}
|
||||
|
||||
const updateFromCurrentPathname = () => {
|
||||
let pathname = window.location.pathname;
|
||||
if (!pathname || pathname === '' || pathname === ' ') {
|
||||
pathname = '/';
|
||||
}
|
||||
|
||||
for (const [route, action] of Object.entries(dynamicRoutesActions)) {
|
||||
if (pathname.startsWith(route)) {
|
||||
const arg = stripTrailingSlash(pathname).split('/')[2];
|
||||
action(arg);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const buttonId = getButtonFromPathname(pathname);
|
||||
changeSelected(buttonId);
|
||||
peformRouteAction(pathname);
|
||||
}
|
||||
|
||||
const loadScript = (src) => {
|
||||
if (loadedScripts.includes(src)) {
|
||||
return;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.onload = () => {
|
||||
loadedScripts.push(src);
|
||||
resolve();
|
||||
};
|
||||
script.onerror = reject;
|
||||
script.src = src;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
A(() => {
|
||||
A('.navigation-buttons .button-default').each((el) => {
|
||||
A(el).on('click', () => {
|
||||
onButtonClick(el.id);
|
||||
});
|
||||
});
|
||||
updateFromCurrentPathname();
|
||||
});
|
||||
32
blog.html
Normal file
32
blog.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="hippoz personal blog">
|
||||
<title>hippoz blog</title>
|
||||
|
||||
<link rel="stylesheet" href="res/style.css">
|
||||
</head>
|
||||
<body class="wave-background">
|
||||
<div class="card layout-card navigation noselect">
|
||||
<div class="navigation-branding">
|
||||
<b class="navigation-branding-text">hippoz.</b>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<a href="index.html" class="button-default">home</a>
|
||||
<a href="blog.html" class="button-default button-selected">blog</a>
|
||||
<a href="https://git.hippoz.xyz" class="button-default">git</a>
|
||||
<a href="me.html" class="button-default">me</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card layout-card">
|
||||
<h2>hippoz's blog</h2>
|
||||
<p>i think</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>no articles yet</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
<title>hippoz</title>
|
||||
|
||||
<link rel="stylesheet" href="https://hippoz.xyz/res/style.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
</head>
|
||||
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
34
index.html
34
index.html
|
|
@ -1,9 +1,29 @@
|
|||
<html>
|
||||
<head>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="hippoz personal website homepage">
|
||||
<title>hippoz</title>
|
||||
|
||||
</head>
|
||||
<link rel="stylesheet" href="res/style.css">
|
||||
</head>
|
||||
<body class="wave-background">
|
||||
<div class="card layout-card navigation noselect">
|
||||
<div class="navigation-branding">
|
||||
<b class="navigation-branding-text">hippoz.</b>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<a href="index.html" class="button-default button-selected">home</a>
|
||||
<a href="blog.html" class="button-default">blog</a>
|
||||
<a href="https://git.hippoz.xyz" class="button-default">git</a>
|
||||
<a href="me.html" class="button-default">me</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<body>
|
||||
<p>What you <a href="/_old">can't see</a> doesn't <a href="/_dev">exist</a>.</p>
|
||||
</body>
|
||||
</html>
|
||||
<div class="card layout-card">
|
||||
<h2>hippoz's website</h2>
|
||||
<p>i think</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
me.html
Normal file
32
me.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="hippoz">
|
||||
<title>hippoz</title>
|
||||
|
||||
<link rel="stylesheet" href="res/style.css">
|
||||
</head>
|
||||
<body class="wave-background">
|
||||
<div class="card layout-card navigation noselect">
|
||||
<div class="navigation-branding">
|
||||
<b class="navigation-branding-text">hippoz.</b>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<a href="index.html" class="button-default">home</a>
|
||||
<a href="blog.html" class="button-default">blog</a>
|
||||
<a href="https://git.hippoz.xyz" class="button-default">git</a>
|
||||
<a href="me.html" class="button-default button-selected">me</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card layout-card">
|
||||
<h2>hello</h2>
|
||||
<p>i think</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>i'm hippoz. that's about it.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +1,66 @@
|
|||
:root {
|
||||
--body-bg-color: #2E2E2E;
|
||||
--accent-bg-color: #d1d1d1;
|
||||
--accent-bg-color: #d4d3d3;
|
||||
--button-accent-color: #3d3d3d;
|
||||
--selected-bg-color: #2E2E2E;
|
||||
--hover-bg-color: #555555;
|
||||
--card-border-radius: 0;
|
||||
--button-border-radius: 4px;
|
||||
--main-font-weight: 500;
|
||||
--cards-length: 600px;
|
||||
|
||||
--fonts-proportional: -apple-system,"Segoe UI",system-ui,"Roboto","Helvetica Neue","Arial";
|
||||
--fonts-monospace: "SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace,var(--fonts-emoji);
|
||||
--fonts-emoji: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla";
|
||||
--fonts-regular: var(--fonts-override,var(--fonts-proportional)),"Noto Sans","Liberation Sans",var(--fonts-emoji),sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--body-bg-color);
|
||||
font-family: Tahoma, Verdana, Arial, sans-serif;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--main-font-weight);
|
||||
}
|
||||
|
||||
br {
|
||||
display: block; /* makes it have a width */
|
||||
content: ""; /* clears default height */
|
||||
margin-top: 2px; /* change this to whatever height you want it */
|
||||
display: block;
|
||||
content: "";
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.wave-background {
|
||||
background-image: url(wave.svg);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 25px auto;
|
||||
padding: 20px;
|
||||
width: var(--cards-length);
|
||||
background: var(--accent-bg-color);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--card-border-radius);
|
||||
|
||||
|
||||
-webkit-box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
|
||||
-moz-box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
|
||||
box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
|
||||
}
|
||||
|
||||
/*
|
||||
.card.navigation {
|
||||
|
||||
.card.layout-card {
|
||||
width: var(--cards-length);
|
||||
}
|
||||
*/
|
||||
|
||||
.navigation-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
.navigation-buttons a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.navigation-buttons a:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.navigation-branding {
|
||||
float: left;
|
||||
}
|
||||
.navigation-branding-h {
|
||||
font-size: 34px;
|
||||
padding: 4px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
.navigation-branding-text {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
|
|
@ -66,15 +68,17 @@ br {
|
|||
}
|
||||
|
||||
.button-default {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background-color: var(--accent-bg-color);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
border-radius: var(--button-border-radius);
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
color: var(--button-accent-color);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
|
@ -99,18 +103,8 @@ br {
|
|||
margin: 8px;
|
||||
}
|
||||
|
||||
#upload-file {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#content-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.card {
|
||||
.card.layout-card {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
4
res/wave.svg
Normal file
4
res/wave.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="visual" viewBox="0 0 900 600" preserveAspectRatio="none" version="1.1">
|
||||
<rect x="0" y="0" width="900" height="600" fill="#2E2E2E"/>
|
||||
<path style="filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.4));" filter="url(#dropShadow)" d="M0 128L21.5 119.5C43 111 86 94 128.8 93.7C171.7 93.3 214.3 109.7 257.2 112.2C300 114.7 343 103.3 385.8 96.3C428.7 89.3 471.3 86.7 514.2 101C557 115.3 600 146.7 642.8 147.2C685.7 147.7 728.3 117.3 771.2 108.5C814 99.7 857 112.3 878.5 118.7L900 125L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#d4d3d3" stroke-linecap="round" stroke-linejoin="miter"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 810 B |
|
|
@ -1,3 +1,3 @@
|
|||
User-agent: *
|
||||
Disallow: /_new/
|
||||
Disallow: /_old/
|
||||
Disallow: /extra/
|
||||
Disallow: /res/
|
||||
|
|
|
|||
Loading…
Reference in a new issue