txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tags pages

Browse Source
This commit is contained in:
Cassidy Williams
2022-09-01 16:02:14 -05:00
parent 32425613cd
commit 9618162bae
2 changed files with 87 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Post.astro
View File

@@ -17,7 +17,7 @@ const { slug, title, tags, description, date } = Astro.props;
<ul> <ul>
{tags && tags.map(tag => ( {tags && tags.map(tag => (
<li class="tag"> <li class="tag">
<div>{tag}</div> <a href={`/tag/${tag}`}>{tag}</a>
</li> </li>
))} ))}
</ul> </ul>

86
src/pages/tag/[tag].astro Normal file
View File

@@ -0,0 +1,86 @@
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import Post from '../../components/Post.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../config';
// @rachsmithcodes wrote this
function postTags(posts) {
return posts.reduce((allTags, post) => {
const postTags = post.frontmatter.tags;
if (postTags) {
postTags.forEach((tag) => {
if (!allTags[tag]) {
allTags[tag] = [];
}
allTags[tag].push(post);
});
}
return allTags;
}, {});
}
// Credit to @rachsmithcodes for helping out my lil ol brain
export async function getStaticPaths() {
let posts = await Astro.glob(`../../posts/*.md`);
const tags = posts.reduce((allTags, post) => {
const postTags = post.frontmatter.tags;
if (postTags) {
postTags.forEach((tag) => {
if (!allTags[tag]) {
allTags[tag] = [];
}
allTags[tag].push(post);
});
}
return allTags;
}, {});
console.log(tags)
return Object.keys(tags).map((t) => {
return ({
params: { tag: t },
props: { tag: tags[t] },
})
});
}
const { tag } = Astro.props;
---
<!DOCTYPE html>
<html lang="en-us">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
ul {
list-style-type: none;
padding: unset;
}
ul li {
display: flex;
}
ul li a:visited {
color: #8e32dc;
}
</style>
</head>
<body>
<Header />
<main>
<content>
<ul>
{tag.map(
({url, frontmatter: { description, slug, title, tags, added: date }}) => (
<Post {url} {description} {date} {slug} {title} {tags} />
))}
</ul>
</content>
<Footer />
</main>
</body>
</html>