82 lines
1.9 KiB
Svelte
82 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { type Post } from './posts_data';
|
|
import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
|
|
|
|
export let data; // <- contains post data
|
|
|
|
let search : string;
|
|
$: regex = search ? new RegExp(search, 'i') : null;
|
|
$: matches = (item : Post) =>
|
|
regex ? regex.test(item.title) || regex.test(item.summary) : true;
|
|
$: matched_posts = data.summaries.filter(matches);
|
|
</script>
|
|
|
|
<div class="head">
|
|
<header>
|
|
<h1>Blog Posts</h1>
|
|
<input id="search" placeholder="Search Blog Posts" bind:value={search} />
|
|
</header>
|
|
</div>
|
|
|
|
<div class="list">
|
|
{#if matched_posts.length == 0}
|
|
<span>No Matches</span>
|
|
{/if}
|
|
{#each matched_posts as summary}
|
|
<NewsVerticalCard
|
|
post_url="/post/{summary.url}"
|
|
title={summary.title}
|
|
summary={summary.summary}
|
|
creation_date={summary.creation_date.toString()}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
h1 {
|
|
font-size: 48px;
|
|
font-family: var(--title-font);
|
|
}
|
|
.head {
|
|
width: 100%;
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
align-content: center;
|
|
justify-content: space-around;
|
|
|
|
padding: 0 0 20px 0;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
#search {
|
|
height: 40px;
|
|
|
|
align-self: center;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 18px;
|
|
line-height: 2;
|
|
padding: 0.5rem 0.8rem;
|
|
margin-top: 0px;
|
|
|
|
background-color: var(--background);
|
|
color: var(--text1);
|
|
}
|
|
|
|
.list {
|
|
max-width: 1500px;
|
|
margin-inline: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 25px;
|
|
|
|
justify-content: center;
|
|
}
|
|
|
|
</style>
|