redesign website and stop using javascript

This commit is contained in:
hippoz 2021-05-05 17:02:12 +03:00
parent 725e7e5088
commit ea6c4215ac
No known key found for this signature in database
GPG key ID: 7C52899193467641
20 changed files with 133 additions and 352 deletions

View file

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

View file

@ -1,9 +0,0 @@
<html>
<head>
</head>
<body>
The internet
</body>
</html>

View file

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

View file

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

View file

@ -1,9 +0,0 @@
# Hey! Welcome to my site!
```
this is a code block
```
this is just text
#### This is smaller heading

View file

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

View file

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

View file

@ -1,4 +0,0 @@
<h2>this is my homepage</h2>
<p>i think</p>
<br>
<p>i'm hippoz. i sometimes do stuff.</p>

View file

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

View file

@ -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}`);
}

View file

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

View file

@ -6,7 +6,6 @@
<title>hippoz</title> <title>hippoz</title>
<link rel="stylesheet" href="https://hippoz.xyz/res/style.css"> <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> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> </head>

View file

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 67 KiB

View file

@ -1,9 +1,29 @@
<html> <!DOCTYPE html>
<head> <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> <div class="card layout-card">
<p>What you <a href="/_old">can't see</a> doesn't <a href="/_dev">exist</a>.</p> <h2>hippoz's website</h2>
</body> <p>i think</p>
</html> </div>
</body>
</html>

32
me.html Normal file
View 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>

View file

@ -1,64 +1,66 @@
:root { :root {
--body-bg-color: #2E2E2E; --body-bg-color: #2E2E2E;
--accent-bg-color: #d1d1d1; --accent-bg-color: #d4d3d3;
--button-accent-color: #3d3d3d; --button-accent-color: #3d3d3d;
--selected-bg-color: #2E2E2E; --selected-bg-color: #2E2E2E;
--hover-bg-color: #555555; --hover-bg-color: #555555;
--card-border-radius: 0;
--button-border-radius: 4px;
--main-font-weight: 500; --main-font-weight: 500;
--cards-length: 600px; --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 { body {
background: var(--body-bg-color); background: var(--body-bg-color);
font-family: Tahoma, Verdana, Arial, sans-serif; font-family: var(--fonts-regular);
font-weight: var(--main-font-weight); font-weight: var(--main-font-weight);
} }
br { br {
display: block; /* makes it have a width */ display: block;
content: ""; /* clears default height */ content: "";
margin-top: 2px; /* change this to whatever height you want it */ margin-top: 2px;
}
.wave-background {
background-image: url(wave.svg);
background-size: 100% auto;
background-repeat: no-repeat;
} }
.card { .card {
margin: 25px auto; margin: 25px auto;
padding: 20px; padding: 20px;
width: var(--cards-length);
background: var(--accent-bg-color); 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); box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
} }
/* .card.layout-card {
.card.navigation { width: var(--cards-length);
} }
*/
.navigation-buttons { .navigation-buttons {
text-align: right; text-align: right;
} }
.navigation-buttons a {
margin-left: 10px;
}
.navigation-buttons a:first-child {
margin-left: 0px;
}
.navigation-branding { .navigation-branding {
float: left; float: left;
} }
.navigation-branding-h { .navigation-branding-text {
font-size: 34px;
padding: 4px;
margin-top: 2px;
margin-bottom: 2px;
white-space: nowrap;
text-decoration: none; text-decoration: none;
border: none; display: inline-block;
padding: 8px;
font-size: 18px;
white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
} }
.noselect { .noselect {
@ -66,15 +68,17 @@ br {
} }
.button-default { .button-default {
display: inline-block;
text-decoration: none; text-decoration: none;
font-weight: 500;
border: none; border: none;
background-color: var(--accent-bg-color); background-color: var(--accent-bg-color);
border-radius: 5px; border-radius: var(--button-border-radius);
padding: 5px; padding: 8px;
font-size: 18px; font-size: 18px;
white-space: nowrap; white-space: nowrap;
margin-top: 2px; margin-left: 10px;
margin-bottom: 2px; margin-right: 10px;
color: var(--button-accent-color); color: var(--button-accent-color);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -99,18 +103,8 @@ br {
margin: 8px; margin: 8px;
} }
#upload-file {
opacity: 0;
position: absolute;
z-index: -1;
}
#content-container {
text-align: center;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.card { .card.layout-card {
width: 80%; width: 80%;
} }
} }

4
res/wave.svg Normal file
View 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

View file

@ -1,3 +1,3 @@
User-agent: * User-agent: *
Disallow: /_new/ Disallow: /extra/
Disallow: /_old/ Disallow: /res/