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

Update posts by tag, fix ul styling

Browse Source
This commit is contained in:
Cassidy Williams
2023-01-26 23:40:45 -06:00
parent a9097ab84f
commit 77d762b196
8 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/HomePosts.astro
View File

@@ -16,7 +16,7 @@ let posts = allPosts
--- ---
<content> <content>
<ul> <ul class="posts-list">
{ {
posts.map( posts.map(
({ ({

18
src/components/Tags.astro Normal file
View File

@@ -0,0 +1,18 @@
---
const { tags } = Astro.props;
---
<h3>View posts by tag</h3>
<p>
{
tags &&
tags.map((tag) => (
<>
<a class="tag" href={`/tag/${tag}`}>
#{tag}
</a>
{` `}
</>
))
}
</p>

6
src/layouts/BlogPost.astro
View File

@@ -3,6 +3,11 @@ import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro"; import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import ColorScript from "../components/ColorScript.astro"; import ColorScript from "../components/ColorScript.astro";
import Tags from "../components/Tags.astro";
import getTags from "../scripts/getTags";
const posts = await Astro.glob("../posts/*.md");
const tags = getTags(posts);
const { const {
content: { title, description, added, updatedDate, heroImage }, content: { title, description, added, updatedDate, heroImage },
@@ -30,6 +35,7 @@ const {
<slot /> <slot />
</article> </article>
</main> </main>
<Tags tags={tags} />
<Footer /> <Footer />
<ColorScript /> <ColorScript />
</body> </body>

36
src/pages/index.astro
View File

@@ -4,29 +4,14 @@ import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import HomePosts from "../components/HomePosts.astro"; import HomePosts from "../components/HomePosts.astro";
import ColorScript from "../components/ColorScript.astro"; import ColorScript from "../components/ColorScript.astro";
import Tags from "../components/Tags.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../config"; import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
import { Content as About } from "./about.md"; import { Content as About } from "./about.md";
import getTags from "../scripts/getTags";
const posts = await Astro.glob("../posts/*.md"); const posts = await Astro.glob("../posts/*.md");
// Get tags from all posts const tags = getTags(posts);
const getTags = posts
.map((post) => {
const postTags = post.frontmatter.tags;
let allTags = [];
if (postTags.length > 0) {
postTags.forEach((tag) => {
if (allTags.indexOf(tag) === -1) {
allTags.push(tag);
}
});
}
return allTags;
})
.flat(1);
// Make the tags unique
let tags = [...new Set(getTags)];
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -40,20 +25,7 @@ let tags = [...new Set(getTags)];
<h3>Here's my most recent posts</h3> <h3>Here's my most recent posts</h3>
<HomePosts allPosts={posts} /> <HomePosts allPosts={posts} />
<h3>View posts by tag</h3> <Tags tags={tags} />
<p>
{
tags &&
tags.map((tag) => (
<>
<a class="tag" href={`/tag/${tag}`}>
#{tag}
</a>
{` `}
</>
))
}
</p>
</main> </main>
<Footer /> <Footer />
<ColorScript /> <ColorScript />

2
src/pages/posts.astro
View File

@@ -22,7 +22,7 @@ const posts = (await Astro.glob("../posts/*.md")).sort(
<Header /> <Header />
<main> <main>
<content> <content>
<ul> <ul class="posts-list">
{ {
posts.map( posts.map(
({ ({

2
src/pages/tag/[tag].astro
View File

@@ -43,7 +43,7 @@ const { tag: currentTag } = Astro.params;
<main> <main>
<content> <content>
<h3>Posts tagged with "{currentTag}"</h3> <h3>Posts tagged with "{currentTag}"</h3>
<ul> <ul class="tags-list">
{ {
tag.map( tag.map(
({ ({

23
src/scripts/getTags.js Normal file
View File

@@ -0,0 +1,23 @@
export default function getTags(posts) {
// Get tags from all posts
const allTags = posts
.map((post) => {
const postTags = post.frontmatter.tags;
let allTags = [];
if (postTags.length > 0) {
postTags.forEach((tag) => {
if (allTags.indexOf(tag) === -1) {
allTags.push(tag);
}
});
}
return allTags;
})
.flat(1);
// Make the tags unique
let tags = [...new Set(allTags)];
return tags;
}

6
src/style/global.css
View File

@@ -75,10 +75,14 @@ hr {
} }
ul { ul {
list-style-type: none;
padding: unset; padding: unset;
} }
.posts-list,
.tags-list {
list-style-type: none;
}
.post { .post {
margin: 0 0 30px 0; margin: 0 0 30px 0;
} }