From ea6c4215ac7bb44428c4da1c69885c6084b7f053 Mon Sep 17 00:00:00 2001 From: hippoz Date: Wed, 5 May 2021 17:02:12 +0300 Subject: [PATCH] redesign website and stop using javascript --- _old/README.md => README.md | 0 _dev/index.html | 9 - _dev/internet.html | 9 - _old/index.html | 38 ---- _old/pages/about.html | 6 - _old/pages/blog/articles/Welcome.md | 9 - _old/pages/blog/blog.html | 10 -- _old/pages/contact.html | 5 - _old/pages/home.html | 4 - _old/pages/upload.html | 10 -- _old/res/blog.js | 36 ---- _old/res/index.js | 164 ------------------ blog.html | 32 ++++ .../discordwebhookmanager/index.html | 1 - _old/favicon.ico => favicon.ico | Bin index.html | 34 +++- me.html | 32 ++++ {_old/res => res}/style.css | 78 ++++----- res/wave.svg | 4 + robots.txt | 4 +- 20 files changed, 133 insertions(+), 352 deletions(-) rename _old/README.md => README.md (100%) delete mode 100644 _dev/index.html delete mode 100644 _dev/internet.html delete mode 100644 _old/index.html delete mode 100644 _old/pages/about.html delete mode 100644 _old/pages/blog/articles/Welcome.md delete mode 100644 _old/pages/blog/blog.html delete mode 100644 _old/pages/contact.html delete mode 100644 _old/pages/home.html delete mode 100644 _old/pages/upload.html delete mode 100644 _old/res/blog.js delete mode 100644 _old/res/index.js create mode 100644 blog.html rename {_old => extra}/discordwebhookmanager/index.html (97%) rename _old/favicon.ico => favicon.ico (100%) create mode 100644 me.html rename {_old/res => res}/style.css (55%) create mode 100644 res/wave.svg diff --git a/_old/README.md b/README.md similarity index 100% rename from _old/README.md rename to README.md diff --git a/_dev/index.html b/_dev/index.html deleted file mode 100644 index c97df1d..0000000 --- a/_dev/index.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - -

Turning the internet into a bunch of trackers, ads and zoomers yelling at eachother since 2013

- - diff --git a/_dev/internet.html b/_dev/internet.html deleted file mode 100644 index 0c6a094..0000000 --- a/_dev/internet.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - The internet - - diff --git a/_old/index.html b/_old/index.html deleted file mode 100644 index e0d1ec6..0000000 --- a/_old/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - hippoz - - - - - - -
-
- - h - -
-
- - - - - - - -
-
- -
-

loading...

-

i think

-
- - - - - \ No newline at end of file diff --git a/_old/pages/about.html b/_old/pages/about.html deleted file mode 100644 index f0c5d05..0000000 --- a/_old/pages/about.html +++ /dev/null @@ -1,6 +0,0 @@ -

this is my about page

-

i think

-
-

i'm hippoz.

-

i sometimes work on projects.

-

i think i like javascript, node, c, c++, html, and some other stuff.

\ No newline at end of file diff --git a/_old/pages/blog/articles/Welcome.md b/_old/pages/blog/articles/Welcome.md deleted file mode 100644 index c3ee9c7..0000000 --- a/_old/pages/blog/articles/Welcome.md +++ /dev/null @@ -1,9 +0,0 @@ -# Hey! Welcome to my site! -``` -this is a code block -``` - -this is just text - - -#### This is smaller heading \ No newline at end of file diff --git a/_old/pages/blog/blog.html b/_old/pages/blog/blog.html deleted file mode 100644 index 8b715fe..0000000 --- a/_old/pages/blog/blog.html +++ /dev/null @@ -1,10 +0,0 @@ -

this is my blog

-

a good excuse to incoherently talk to myself

-

i think

-
- -
-

articles:

-
- -
\ No newline at end of file diff --git a/_old/pages/contact.html b/_old/pages/contact.html deleted file mode 100644 index 545372e..0000000 --- a/_old/pages/contact.html +++ /dev/null @@ -1,5 +0,0 @@ -

you can contact me

-

i think

-
-

my email is hippoz@hippoz.xyz

-

i might respond.

\ No newline at end of file diff --git a/_old/pages/home.html b/_old/pages/home.html deleted file mode 100644 index a396aec..0000000 --- a/_old/pages/home.html +++ /dev/null @@ -1,4 +0,0 @@ -

this is my homepage

-

i think

-
-

i'm hippoz. i sometimes do stuff.

\ No newline at end of file diff --git a/_old/pages/upload.html b/_old/pages/upload.html deleted file mode 100644 index d00a22a..0000000 --- a/_old/pages/upload.html +++ /dev/null @@ -1,10 +0,0 @@ -

this is the upload page

-

i think

-
-
-
-
-
-
- -
\ No newline at end of file diff --git a/_old/res/blog.js b/_old/res/blog.js deleted file mode 100644 index a8cdac3..0000000 --- a/_old/res/blog.js +++ /dev/null @@ -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 += `${k}`; - } - - 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}`); -} \ No newline at end of file diff --git a/_old/res/index.js b/_old/res/index.js deleted file mode 100644 index eb62a16..0000000 --- a/_old/res/index.js +++ /dev/null @@ -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('

page not found

i think

'); - 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(); -}); \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..670df92 --- /dev/null +++ b/blog.html @@ -0,0 +1,32 @@ + + + + + + + hippoz blog + + + + +
+
+ hippoz. +
+
+ home + blog + git + me +
+
+ +
+

hippoz's blog

+

i think

+
+
+

no articles yet

+
+ + \ No newline at end of file diff --git a/_old/discordwebhookmanager/index.html b/extra/discordwebhookmanager/index.html similarity index 97% rename from _old/discordwebhookmanager/index.html rename to extra/discordwebhookmanager/index.html index 862f8da..26eddd9 100644 --- a/_old/discordwebhookmanager/index.html +++ b/extra/discordwebhookmanager/index.html @@ -6,7 +6,6 @@ hippoz - diff --git a/_old/favicon.ico b/favicon.ico similarity index 100% rename from _old/favicon.ico rename to favicon.ico diff --git a/index.html b/index.html index d751c06..11e87d5 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,29 @@ - - + + + + + + + hippoz - + + + +
+
+ hippoz. +
+
+ home + blog + git + me +
+
- -

What you can't see doesn't exist.

- - +
+

hippoz's website

+

i think

+
+ + \ No newline at end of file diff --git a/me.html b/me.html new file mode 100644 index 0000000..928b67e --- /dev/null +++ b/me.html @@ -0,0 +1,32 @@ + + + + + + + hippoz + + + + +
+
+ hippoz. +
+
+ home + blog + git + me +
+
+ +
+

hello

+

i think

+
+
+

i'm hippoz. that's about it.

+
+ + \ No newline at end of file diff --git a/_old/res/style.css b/res/style.css similarity index 55% rename from _old/res/style.css rename to res/style.css index f02ea25..647763a 100644 --- a/_old/res/style.css +++ b/res/style.css @@ -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%; } } \ No newline at end of file diff --git a/res/wave.svg b/res/wave.svg new file mode 100644 index 0000000..946454b --- /dev/null +++ b/res/wave.svg @@ -0,0 +1,4 @@ + + + + diff --git a/robots.txt b/robots.txt index 2ef3945..caebd43 100644 --- a/robots.txt +++ b/robots.txt @@ -1,3 +1,3 @@ User-agent: * -Disallow: /_new/ -Disallow: /_old/ +Disallow: /extra/ +Disallow: /res/