diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index 1e838a7..33ce2eb 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -2,6 +2,7 @@
import { getCollection, type CollectionEntry } from "astro:content";
import Timestamp from "./Timestamp.astro";
import { sortBy } from "lodash-es";
+import TagList from "./TagList.astro";
interface Props {
basePath: string;
@@ -43,18 +44,22 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
{
sortedPosts.map((post) => {
return (
-
-
-
- |
-
-
-
- {post.data.title}
-
-
- |
-
+ <>
+
+
+
+
+ |
+
+
+
+ |
+
+ >
);
})
}
@@ -63,14 +68,14 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
diff --git a/src/components/TagList.astro b/src/components/TagList.astro
new file mode 100644
index 0000000..2702f48
--- /dev/null
+++ b/src/components/TagList.astro
@@ -0,0 +1,18 @@
+---
+import "../styles/tagList.scss";
+
+const { extraFront, tags, extraBack } = Astro.props;
+---
+
+
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index e7e3bd9..e3a069a 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -5,6 +5,7 @@ import { type CollectionEntry, getCollection } from "astro:content";
import Timestamp from "../../components/Timestamp.astro";
import { getImage } from "astro:assets";
import TocWrapper from "../../components/TocWrapper.astro";
+import TagList from "../../components/TagList.astro";
export async function getStaticPaths() {
const posts = await getCollection("posts");
@@ -60,14 +61,7 @@ const excerpt = remarkPluginFrontmatter.excerpt?.replaceAll("\n", "");
)
}
- {
- post.data.tags.map((tag) => (
-
-
- {tag}
-
- ))
- }
+
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index 05cf34c..2cfd0b0 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -16,7 +16,8 @@
--link-color: #{$linkColor};
--link-hover-color: #{lighten($linkColor, 35%)};
--code-color: firebrick;
- --tag-color: #{lighten($linkColor, 35%)};
+ --tag-color: lavender;
+ --tag-text-color: #{darken(lavender, 20%)};
// Admonition
--note-color: #{$linkColor};
diff --git a/src/styles/post.scss b/src/styles/post.scss
index 5470cfe..fe12515 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -239,33 +239,6 @@ hr.endline {
border-color: var(--hr-color);
}
-.tags {
- display: flex;
- gap: 6px;
- margin-bottom: 6px;
- flex-wrap: wrap;
-
- .tag {
- font-size: 0.75rem;
- background-color: var(--tag-color);
- padding: 2px 7px;
- border-radius: 4px;
-
- &.draft {
- background-color: orange;
- color: black;
- }
-
- .text {
- text-decoration: none;
- }
-
- &:hover {
- text-decoration: none;
- }
- }
-}
-
.admonition {
// TODO: Figure out how to distinguish admonitions
--admonition-color: var(--note-color);
diff --git a/src/styles/tagList.scss b/src/styles/tagList.scss
new file mode 100644
index 0000000..2a82773
--- /dev/null
+++ b/src/styles/tagList.scss
@@ -0,0 +1,27 @@
+.tags {
+ display: flex;
+ gap: 6px;
+ // margin-bottom: 6px;
+ flex-wrap: wrap;
+
+ .tag {
+ font-size: 0.75rem;
+ background-color: var(--tag-color);
+ color: var(--tag-text-color);
+ padding: 2px 7px;
+ border-radius: 4px;
+
+ &.draft {
+ background-color: orange;
+ color: black;
+ }
+
+ .text {
+ text-decoration: none;
+ }
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+}