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

Add random posts to homepage with tags

Browse Source
This commit is contained in:
Cassidy Williams
2022-10-18 18:08:48 -05:00
parent 94f1d7a0fe
commit fe83c6b7a4
2 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/RandomPosts.astro Normal file
View File

@@ -0,0 +1,16 @@
---
import Post from '../components/Post.astro';
const { allPosts } = Astro.props;
let posts = allPosts.sort(() => 0.5 - Math.random()).slice(0, 3)
---
<content>
<ul>
{posts.map(
({url, frontmatter: { description, slug, title, tags, added: date }}) => (
<Post {url} {description} {date} {slug} {title} {tags} />
))}
</ul>
</content>

30
src/pages/index.astro
View File

@@ -2,9 +2,31 @@
import BaseHead from '../components/BaseHead.astro'; 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 RandomPosts from '../components/RandomPosts.astro';
import ColorScript from '../components/ColorScript.astro'; import ColorScript from '../components/ColorScript.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';
const posts = (await Astro.glob('../posts/*.{md,mdx}'));
// Get tags from all 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>
@@ -18,10 +40,14 @@ import {Content as About} from './about.md';
<About /> <About />
<h3>Here's a sampler of some posts</h3> <h3>Here's a sampler of some posts</h3>
<p>hello blah blah blah</p> <RandomPosts allPosts={posts} />
<h3>View posts by tag</h3> <h3>View posts by tag</h3>
<p>hello blah blah blah</p> <p>
{tags && tags.map(tag => (
<><a class="tag-home" href={`/tag/${tag}`}>#{tag}</a>{` `}</>
))}
</p>
</main> </main>
<Footer /> <Footer />
<ColorScript /> <ColorScript />