Layouts for feed and /blog
This commit is contained in:
parent
fd3084fef7
commit
f691a6b377
|
@ -1,12 +1,11 @@
|
|||
<script lang="ts">
|
||||
import type { Tag } from '$lib/types/post';
|
||||
export let selected: Tag | null = null;
|
||||
let className = '';
|
||||
export { className as class };
|
||||
export let className = '';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let options: Tag[] = ['DevOps', 'Philosophy', 'Updates'];
|
||||
const tags: Tag[] = ['Blog', 'Projects', 'Updates'];
|
||||
|
||||
const clickHandler = (value: Tag) => {
|
||||
if (value === selected) {
|
||||
|
@ -24,7 +23,7 @@
|
|||
<section class="flex justify-center flex-col items-center {className}">
|
||||
<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
|
||||
<ul class="flex flex-wrap justify-center gap-2">
|
||||
{#each options as option}
|
||||
{#each tags as option}
|
||||
<li>
|
||||
<button
|
||||
class="chip {option === selected
|
||||
|
|
|
@ -0,0 +1,75 @@
|
|||
<script lang="ts">
|
||||
import Preview from '$lib/components/blog/Preview.svelte';
|
||||
import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
|
||||
import type { Post, Tag } from '$lib/types/post';
|
||||
import { H_ELLIPSIS_ENTITY } from '$lib/constants';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
export let posts: Post[] = [];
|
||||
|
||||
let filter: Tag | null = null;
|
||||
export const displayAmount = 8;
|
||||
|
||||
$: showPosts = displayAmount;
|
||||
$: postCount = posts.length;
|
||||
$: posts = data.posts.filter((post: Post) => (filter ? post.tags?.includes(filter) : true));
|
||||
$: displayPosts = posts.slice(displayAmount);
|
||||
|
||||
const handleClick = () => {
|
||||
showPosts += displayAmount;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const tagParam = $page.url.searchParams.get('tag');
|
||||
|
||||
if (!filter && typeof tagParam == 'string') {
|
||||
filter = tagParam as Tag;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<section role="feed">
|
||||
<div class="space-y-8">
|
||||
<header class="flex flex-col justify-center items-center">
|
||||
<h1 class="h1 m-4">Blog</h1>
|
||||
<CategoryFilter className="mb-2 md:mb-4" bind:selected={filter} />
|
||||
</header>
|
||||
<div
|
||||
class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{#each posts.slice(0, displayAmount) as post, index}
|
||||
<article
|
||||
class="flex justify-center min-w-[20rem] max-w-sm"
|
||||
aria-posinset={index + 1}
|
||||
aria-setsize={postCount}
|
||||
>
|
||||
<Preview {post} type="blog" />
|
||||
</article>
|
||||
{:else}
|
||||
<p>No posts yet!</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if posts.slice(displayAmount).length > 0}
|
||||
<div>
|
||||
<h2 class="mb-4 text-center">Previous posts</h2>
|
||||
<div
|
||||
class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{#each displayPosts as post}
|
||||
<div class="flex justify-center min-w-[20rem] max-w-sm">
|
||||
<Preview {post} type="blog" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showPosts < postCount}
|
||||
<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
|
||||
{/if}
|
||||
</section>
|
|
@ -0,0 +1,96 @@
|
|||
<script lang="ts">
|
||||
import { isAnExternalLink, generateURL } from '$lib/utils/helpers';
|
||||
import type { Post } from '$lib/types/post';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { formatDate } from '$lib/utils/blog';
|
||||
|
||||
export let type: Post['type'];
|
||||
export let post: Post;
|
||||
// export let published: boolean;
|
||||
// export let headlineOrder: 'h3' | '' = '';
|
||||
// export let badge: string = '';
|
||||
// export let textWidth: string = '';
|
||||
|
||||
//window width
|
||||
let iteration = 0;
|
||||
let interval: string | number | NodeJS.Timeout | undefined;
|
||||
|
||||
onMount(() => {
|
||||
const interval = setInterval(() => {
|
||||
console.log(window.innerWidth);
|
||||
iteration++;
|
||||
|
||||
if (iteration === 50) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
$: href = generateURL(post['href'], post.type, post.slug);
|
||||
|
||||
$: target = post && post['href'] && isAnExternalLink(post['href']) ? '_blank' : undefined;
|
||||
|
||||
onDestroy(() => {
|
||||
clearInterval(interval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<a
|
||||
{href}
|
||||
{target}
|
||||
class="card bg-gradient-to-br variant-glass-primary card-hover overflow-hidden flex flex-col space-y-4"
|
||||
>
|
||||
<!-- Blog in long cols, projects in wide rows -->
|
||||
<div class="flex {type === 'blog' ? 'flex-col' : 'flex-row'} justify-between w-full h-full">
|
||||
<header>
|
||||
<!-- <img
|
||||
src={`/images/${type}/${post.slug}/${post.image}`}
|
||||
class="bg-black/200 w-full aspect-[3/2]"
|
||||
alt="Post preview"
|
||||
/> -->
|
||||
<img
|
||||
src={post.featuredImage}
|
||||
alt={post.title}
|
||||
class="bg-black/200 h-[448px] w-[672px] aspect-[3/2]"
|
||||
/>
|
||||
</header>
|
||||
<section class="p-4 space-y-4">
|
||||
<h2 class="h2 text-ellipsis overflow-hidden" data-toc-ignore>{post.title}</h2>
|
||||
<article class="text-ellipsis break-words overflow-hidden max-h-[128px] max-w-4">
|
||||
<p>
|
||||
<!-- cspell:disable -->
|
||||
{post.excerpt}
|
||||
<!-- cspell:enable -->
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<hr class="opacity-30 bg-tertiary-500" />
|
||||
<footer class="p-4 flex justify-between">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#if post.tags && post.tags.length > 0}
|
||||
<small>tags: </small>
|
||||
{#each post.tags as tag}
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
||||
class="chip variant-glass-secondary"
|
||||
>
|
||||
<p class="text-md text-token">{tag}</p>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<small>
|
||||
{#if post.datePublished}
|
||||
<span class="text-sm ml-4">
|
||||
{formatDate(post.datePublished)}
|
||||
</span>
|
||||
{/if}
|
||||
</small>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</a>
|
Loading…
Reference in New Issue