diff --git a/pages/blog/blog.html b/pages/blog/blog.html index 52106a4..8b715fe 100644 --- a/pages/blog/blog.html +++ b/pages/blog/blog.html @@ -5,4 +5,6 @@

articles:

-welcome \ No newline at end of file +
+ +
\ No newline at end of file diff --git a/res/blog.js b/res/blog.js index ac2f2c3..24d04c3 100644 --- a/res/blog.js +++ b/res/blog.js @@ -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 += `${k}`; + console.log(html); + } + + 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)'); @@ -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. 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/res/index.js b/res/index.js index 3b52a0d..1b1960e 100644 --- a/res/index.js +++ b/res/index.js @@ -11,6 +11,11 @@ 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); @@ -21,9 +26,9 @@ const peformRouteAction = async (pathname) => { } 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'); + await loadBlogScripts(); + await A('#content-container').load('/pages/blog/blog.html'); + blogPopulateArticleList('articlelist'); break; } case '/upload': { @@ -63,6 +68,19 @@ const buttonMap = { '__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) => { if (selectedButtonId === buttonId) { return; @@ -96,6 +114,15 @@ const updateFromCurrentPathname = () => { 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); changeSelected(buttonId); peformRouteAction(pathname);