39 lines
1.3 KiB
Plaintext
39 lines
1.3 KiB
Plaintext
---
|
|
import PostCard from "../components/PostCard.astro";
|
|
import Layout from "../layouts/Layout.astro";
|
|
import "../styles/index.css";
|
|
import { getCollection } from "astro:content";
|
|
|
|
const posts = (await getCollection("blog")).sort(
|
|
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
|
);
|
|
---
|
|
|
|
<Layout>
|
|
{posts.map((post) => <PostCard id={post.id} title={post.data.title}, description={post.data.description} pubDate={post.data.pubDate} updatedDate={post.data.updatedDate} illustration={post.data.illustration} />)}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const searchBar = document.getElementById('searchBar') as HTMLInputElement | null;
|
|
|
|
const posts = document.querySelectorAll('article');
|
|
|
|
if (searchBar) {
|
|
searchBar.addEventListener('input', (e) => {
|
|
const target = e.target as HTMLInputElement;
|
|
const term = target.value.toLowerCase();
|
|
|
|
posts.forEach((post) => {
|
|
const text = post.textContent?.toLowerCase() || '';
|
|
|
|
if (text.includes(term)) {
|
|
(post as HTMLElement).style.display = '';
|
|
} else {
|
|
(post as HTMLElement).style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</Layout>
|