make article show when directly visting with url, well its not done yet, but im working on it

This commit is contained in:
hippoz 2020-10-25 18:23:46 +02:00
parent 12c5ad46d0
commit 628371ed73
3 changed files with 52 additions and 4 deletions

View file

@ -5,4 +5,6 @@
<br> <br>
<p>articles:</p> <p>articles:</p>
<a href="#" onclick="blogVisitArticle('Welcome', 'a welcome article for my website')">welcome</a> <div id="articlelist">
</div>

View file

@ -1,4 +1,22 @@
const blogArticles = {
'Welcome': 'a welcome page for my new blog'
}
const blogPopulateArticleList = (elementId) => {
const element = A(`#${elementId}`);
console.log(element);
let html = '';
for (const [k, v] of Object.entries(blogArticles)) {
html += `<a href="#" onclick="blogVisitArticle('${k}', '${v}')">${k}</a>`;
console.log(html);
}
element.html(html);
};
const blogVisitArticle = async (name, desc) => { const blogVisitArticle = async (name, desc) => {
if (!name || !desc) return;
if (/[^a-zA-Z0-9\.]/.test(name)) { if (/[^a-zA-Z0-9\.]/.test(name)) {
alert('Tried to access and invalid article (invalid name)'); alert('Tried to access and invalid article (invalid name)');
console.error('Tried to access and invalid article (invalid name)'); console.error('Tried to access and invalid article (invalid name)');
@ -16,4 +34,5 @@ const blogVisitArticle = async (name, desc) => {
// 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. // 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('#content-container').html(marked(articleMarkdown));
A('meta[name="description"]').attr('content', desc); A('meta[name="description"]').attr('content', desc);
history.pushState({ route: `/article/${name}`, articleName: name }, '', `/article/${name}`);
} }

View file

@ -11,6 +11,11 @@ const stripTrailingSlash = (str) => {
return str.endsWith('/') ? str.slice(0, -1) : 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 peformRouteAction = async (pathname) => {
const route = stripTrailingSlash(pathname); const route = stripTrailingSlash(pathname);
@ -21,9 +26,9 @@ const peformRouteAction = async (pathname) => {
} }
case '/blog': { case '/blog': {
A('meta[name="description"]').attr('content', "hippoz's blog"); A('meta[name="description"]').attr('content', "hippoz's blog");
await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js'); await loadBlogScripts();
await loadScript('/res/blog.js'); await A('#content-container').load('/pages/blog/blog.html');
A('#content-container').load('/pages/blog/blog.html'); blogPopulateArticleList('articlelist');
break; break;
} }
case '/upload': { case '/upload': {
@ -63,6 +68,19 @@ const buttonMap = {
'__NOT_FOUND': '/404' '__NOT_FOUND': '/404'
} }
const dynamicRoutesActions = {
'/article': async (arg) => {
await loadBlogScripts();
const desc = blogArticles[arg];
if (!desc) {
peformRouteAction('/404');
return;
}
blogVisitArticle(arg, desc);
}
};
const onButtonClick = (buttonId) => { const onButtonClick = (buttonId) => {
if (selectedButtonId === buttonId) { if (selectedButtonId === buttonId) {
return; return;
@ -96,6 +114,15 @@ const updateFromCurrentPathname = () => {
pathname = '/'; pathname = '/';
} }
for (const [route, action] of Object.entries(dynamicRoutesActions)) {
if (pathname.startsWith(route)) {
const arg = stripTrailingSlash(pathname).split('/')[1];
console.log(arg);
action(arg);
break;
}
}
const buttonId = getButtonFromPathname(pathname); const buttonId = getButtonFromPathname(pathname);
changeSelected(buttonId); changeSelected(buttonId);
peformRouteAction(pathname); peformRouteAction(pathname);