beggenings of the blog and dynamic description based on route

This commit is contained in:
hippoz 2020-10-25 17:43:06 +02:00
parent 479f6119b4
commit 12c5ad46d0
4 changed files with 65 additions and 1 deletions

View file

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

8
pages/blog/blog.html Normal file
View file

@ -0,0 +1,8 @@
<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>
<a href="#" onclick="blogVisitArticle('Welcome', 'a welcome article for my website')">welcome</a>

19
res/blog.js Normal file
View file

@ -0,0 +1,19 @@
const blogVisitArticle = async (name, desc) => {
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);
}

View file

@ -1,4 +1,5 @@
let selectedButtonId = 'button-home'; let selectedButtonId = 'button-home';
const loadedScripts = [];
const changeSelected = (buttonId) => { const changeSelected = (buttonId) => {
A(`#${selectedButtonId}`).removeClass('button-selected'); A(`#${selectedButtonId}`).removeClass('button-selected');
@ -10,7 +11,7 @@ const stripTrailingSlash = (str) => {
return str.endsWith('/') ? str.slice(0, -1) : str; return str.endsWith('/') ? str.slice(0, -1) : str;
}; };
const peformRouteAction = (pathname) => { const peformRouteAction = async (pathname) => {
const route = stripTrailingSlash(pathname); const route = stripTrailingSlash(pathname);
switch (route) { switch (route) {
@ -18,7 +19,15 @@ const peformRouteAction = (pathname) => {
A('#content-container').load('/pages/home.html'); A('#content-container').load('/pages/home.html');
break; break;
} }
case '/blog': {
A('meta[name="description"]').attr('content', "hippoz's blog");
await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js');
await loadScript('/res/blog.js');
A('#content-container').load('/pages/blog/blog.html');
break;
}
case '/upload': { case '/upload': {
A('meta[name="description"]').attr('content', "hippoz's upload server");
A('#content-container').load('/pages/upload.html'); A('#content-container').load('/pages/upload.html');
break; break;
} }
@ -27,10 +36,12 @@ const peformRouteAction = (pathname) => {
break; break;
} }
case '/about': { case '/about': {
A('meta[name="description"]').attr('content', "hippoz's about page. i'm hippoz");
A('#content-container').load('/pages/about.html'); A('#content-container').load('/pages/about.html');
break; break;
} }
case '/contact': { case '/contact': {
A('meta[name="description"]').attr('content', "you can contact hippoz");
A('#content-container').load('/pages/contact.html'); A('#content-container').load('/pages/contact.html');
break; break;
} }
@ -44,6 +55,7 @@ const peformRouteAction = (pathname) => {
const buttonMap = { const buttonMap = {
'button-home': '/', 'button-home': '/',
'button-blog': '/blog',
'button-file-server': '/upload', 'button-file-server': '/upload',
'button-git-server': '/git', 'button-git-server': '/git',
'button-about-me': '/about', 'button-about-me': '/about',
@ -89,6 +101,22 @@ const updateFromCurrentPathname = () => {
peformRouteAction(pathname); 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(() => {
A('.navigation-buttons .button-default').each((el) => { A('.navigation-buttons .button-default').each((el) => {
A(el).on('click', () => { A(el).on('click', () => {