changed blog tags to string enum; added blog post entry gallery
This commit is contained in:
20
src/lib/lists/blog-gallery.svelte
Normal file
20
src/lib/lists/blog-gallery.svelte
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { BlogPostTag, type BlogPostLink } from "../../routes/blog/posts";
|
||||||
|
|
||||||
|
let {
|
||||||
|
posts,
|
||||||
|
}: {
|
||||||
|
posts: BlogPostLink[];
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="entry-container">
|
||||||
|
{#each posts as post}
|
||||||
|
<div class="entry">
|
||||||
|
<p>{post.post.title}</p>
|
||||||
|
{#each post.post.tags as tag}
|
||||||
|
<p>{tag}</p>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
@@ -1,26 +1,27 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Banner2 from "$lib/banner2.svelte";
|
import Banner2 from "$lib/banner2.svelte";
|
||||||
import Content from "$lib/viewport/content.svelte";
|
import Content from "$lib/viewport/content.svelte";
|
||||||
import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
|
// import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
|
||||||
import { posts, type BlogPostLink } from "./posts";
|
import { posts, type BlogPostLink } from "./posts";
|
||||||
|
import BlogGallery from "$lib/lists/blog-gallery.svelte";
|
||||||
|
|
||||||
let entries: GalleryEntry[] = posts.map(mapEntries);
|
// let entries: GalleryEntry[] = posts.map(mapEntries);
|
||||||
|
|
||||||
function mapEntries(entry: BlogPostLink, index: number): GalleryEntry {
|
// function mapEntries(entry: BlogPostLink, index: number): GalleryEntry {
|
||||||
let banner = "";
|
// let banner = "";
|
||||||
if (entry.post.banner && entry.post.banner !== "") {
|
// if (entry.post.banner && entry.post.banner !== "") {
|
||||||
banner = `/blog/${entry.key}/${entry.post.banner}`;
|
// banner = `/blog/${entry.key}/${entry.post.banner}`;
|
||||||
}
|
// }
|
||||||
|
|
||||||
return {
|
// return {
|
||||||
title: `${entry.post.title}`,
|
// title: `${entry.post.title}`,
|
||||||
subtitle: `#${(posts.length - index).toString().padStart(2, '0')} // ${entry.post.date}, ${entry.post.time}`,
|
// subtitle: `#${(posts.length - index).toString().padStart(2, '0')} // ${entry.post.date}, ${entry.post.time}`,
|
||||||
img: banner,
|
// img: banner,
|
||||||
link: `/blog/${entry.key}/`,
|
// link: `/blog/${entry.key}/`,
|
||||||
imgAlt: `Preview image for ${entry.post.title}`,
|
// imgAlt: `Preview image for ${entry.post.title}`,
|
||||||
description: entry.post.description,
|
// description: entry.post.description,
|
||||||
};
|
// };
|
||||||
}
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@@ -33,5 +34,5 @@
|
|||||||
banner="robert.webp"
|
banner="robert.webp"
|
||||||
bannerAlt="View at a tram bridge rising and then curving to the left." />
|
bannerAlt="View at a tram bridge rising and then curving to the left." />
|
||||||
|
|
||||||
<Gallery entries={entries} />
|
<BlogGallery {posts} />
|
||||||
</Content>
|
</Content>
|
||||||
@@ -24,10 +24,10 @@ export interface BlogPostLink {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export enum BlogPostTag {
|
export enum BlogPostTag {
|
||||||
ART, // ramblings to do with art
|
ART = "art-stuff", // ramblings to do with art
|
||||||
DRAWING, // self-explanatory
|
DRAWING = "drawing", // self-explanatory
|
||||||
TECH_TIP, // tech guides
|
TECH_TIP = "tech-tip", // tech guides
|
||||||
META, // about the website itself
|
META = "natconf-meta", // about the website itself
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user