tags on home page
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed

This commit is contained in:
Michael Zhang 2023-10-24 14:00:40 -05:00
parent 4895546226
commit d70327ffb9
6 changed files with 73 additions and 50 deletions

View file

@ -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 (
<>
<tr class="row">
<td class="info">
<span class="spacer" />
<Timestamp timestamp={post.data.date} />
</td>
<td>
<span class="title">
<div class="title">
<a href={`${basePath}/${post.slug}`} class="brand-colorlink">
{post.data.title}
</a>
</span>
</div>
<TagList tags={post.data.tags} />
</td>
</tr>
</>
);
})
}
@ -63,14 +68,14 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
<style lang="scss">
.postListing {
width: 100%;
border-spacing: 6px;
border-spacing: 6px 10px;
td {
// padding-bottom: 10px;
// line-height: 1;
.title {
font-size: 1.1em;
font-size: 12pt;
}
.summary {
@ -89,6 +94,11 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
font-size: 0.75em;
white-space: nowrap;
text-align: right;
vertical-align: baseline;
.spacer {
font-size: 12pt;
}
}
}
</style>

View file

@ -0,0 +1,18 @@
---
import "../styles/tagList.scss";
const { extraFront, tags, extraBack } = Astro.props;
---
<div class="tags">
{extraFront}
{
tags.toSorted().map((tag) => (
<a href={`/tags/${tag}`} class="tag">
<i class="fa fa-tag" aria-hidden="true" />
<span class="text">{tag}</span>
</a>
))
}
{extraBack}
</div>

View file

@ -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) => (
<a href={`/tags/${tag}`} class="tag">
<i class="fa fa-tag" aria-hidden="true" />
<span class="text">{tag}</span>
</a>
))
}
<TagList tags={post.data.tags} />
</span>
<small class="post-meta">

View file

@ -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};

View file

@ -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);

27
src/styles/tagList.scss Normal file
View file

@ -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;
}
}
}