diff options
| author | mattkae <mattkae@protonmail.com> | 2022-11-13 20:07:38 -0500 |
|---|---|---|
| committer | mattkae <mattkae@protonmail.com> | 2022-11-13 20:07:38 -0500 |
| commit | 3ca36d468d1d1fb2aab4f0ed889cd46849d6c272 (patch) | |
| tree | cbd054c6ae2ea311da12f2dd0ec809611d5b456b | |
| parent | f75dfb5d736b644ad2649452c3056ba71be856b8 (diff) | |
Per tag filter page
| -rw-r--r-- | _posts/processPosts.js | 30 | ||||
| -rw-r--r-- | posts.html | 5 | ||||
| -rw-r--r-- | posts/tag_[object Object].html | 36 | ||||
| -rw-r--r-- | posts/tag_personal.html | 36 |
4 files changed, 99 insertions, 8 deletions
diff --git a/_posts/processPosts.js b/_posts/processPosts.js index 9db4103..55c97df 100644 --- a/_posts/processPosts.js +++ b/_posts/processPosts.js @@ -18,9 +18,22 @@ const posts = [ } ]; +function createTagFile(tag) { + const dir = path.resolve(path.join(__dirname, '..', 'posts')); + + if (!fs.existsSync(dir)) { + fs.mkdirSync(dir); + } + + + const tagFileName = `tag_${tag.id}.html` + createPostPage(path.join(__dirname, '..', 'posts', tagFileName), tag.id) + return `/posts/${tagFileName}`; +} + function createTag(tag) { return ` - <button id="${tag.id}">${tag.title}</button> + <a href="${createTagFile(tag)}"><button id="${tag.id}">${tag.title}</button></a> `; } @@ -77,7 +90,8 @@ function createPostLink(post) { `; } -const output = ` +function createPostPage(outputFile, postFilter) { + const output = ` <!DOCTYPE html> <html lang="en"> <head> @@ -101,21 +115,25 @@ const output = ` </nav> </header> - <section> + ${postFilter ? '' : `<section> <h2>Tags</h2> + <div id='tag_list'> ${tags.map(createTag)} </div> - </section + </section`} <section> <h2>Posts</h2> <ul id='post_list'> - ${posts.map(createPostLink)} + ${posts.filter(post => !postFilter || post.tags.includes(postFilter)).map(createPostLink)} </ul> </section> </body> </html> ` -fs.writeFileSync(path.join(__dirname, '..', 'posts.html'), output); + fs.writeFileSync(outputFile, output); +} + +createPostPage(path.join(__dirname, '..', 'posts.html')); @@ -24,12 +24,13 @@ <section> <h2>Tags</h2> + <div id='tag_list'> - <button id="personal">Personal 👨</button> + <a href="/posts/tag_personal.html"><button id="personal">Personal 👨</button></a> </div> - </section + </section <section> <h2>Posts</h2> diff --git a/posts/tag_[object Object].html b/posts/tag_[object Object].html new file mode 100644 index 0000000..1999d78 --- /dev/null +++ b/posts/tag_[object Object].html @@ -0,0 +1,36 @@ + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta charset="utf-8"> + <link rel="stylesheet" href="/index.css"> + <link rel="stylesheet" href="/posts.css"> + <title>Matthew Kosarek</title> + <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon"> + </head> + <body> + <header> + <h1>Matthew Kosarek</h1> + <nav> + <ul> + <li><a href='/'>🏡 Home</a></li> + <li><a href='/resume.html'>📘 CV</a></li> + <li><a href="https://www.linkedin.com/in/matthew-kosarek/">🏢 LinkedIn</a></li> + <li><a href='/posts.html'>📝 Posts</a></li> + </ul> + </nav> + </header> + + + + <section> + <h2>Posts</h2> + <ul id='post_list'> + + <li><a href="/posts//hello_world.html">Hello, World!</a></li> + + </ul> + </section> + </body> +</html> diff --git a/posts/tag_personal.html b/posts/tag_personal.html new file mode 100644 index 0000000..1999d78 --- /dev/null +++ b/posts/tag_personal.html @@ -0,0 +1,36 @@ + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta charset="utf-8"> + <link rel="stylesheet" href="/index.css"> + <link rel="stylesheet" href="/posts.css"> + <title>Matthew Kosarek</title> + <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon"> + </head> + <body> + <header> + <h1>Matthew Kosarek</h1> + <nav> + <ul> + <li><a href='/'>🏡 Home</a></li> + <li><a href='/resume.html'>📘 CV</a></li> + <li><a href="https://www.linkedin.com/in/matthew-kosarek/">🏢 LinkedIn</a></li> + <li><a href='/posts.html'>📝 Posts</a></li> + </ul> + </nav> + </header> + + + + <section> + <h2>Posts</h2> + <ul id='post_list'> + + <li><a href="/posts//hello_world.html">Hello, World!</a></li> + + </ul> + </section> + </body> +</html> |