Amy/Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: changed svelts server processing

Browse Source
This commit is contained in:
Amy Retzerau
2025-10-26 11:18:07 +01:00
parent d1e592e8bf
commit 648e922e3f
2 changed files with 54 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/routes/+page.server.ts
View File

@@ -6,6 +6,7 @@ export interface BlogEntry {
src: string;
src_target: string;
img: string;
scale: string;
date: string;
desc: string;
}
@@ -14,27 +15,29 @@ export interface BlogEntry {
export function load() {
const blog_entries: BlogEntry[] =
Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
.map(([key, value]) => [
key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
value as MDsveXComponent
])
.map(([link, val]) =>
typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link, val]
)
.map(([link, val]) => {
val.metadata.date = Date.parse(val.metadata.date);
return [link, val];
})
.sort(([link1, a], [link2, b]) => b.metadata?.date - a.metadata?.date)
.map(([link, val]) => {
.map(([key, value]) => {
return {
src: link,
src_target: (link.includes('https://') || link.includes('http://')) ? '_blank' : '',
title: val.metadata.title,
img: val.metadata.img,
date: new Date(val.metadata.date).toDateString(),
desc: val.metadata.desc
}
src: key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
metadata: (value as MDsveXComponent).metadata
} as Record<string, any>
})
.filter(entry => entry.metadata.listed)
.map(entry => {
entry.src = (entry.metadata.src ?? entry.src) as string;
entry.title = entry.metadata.title as string ?? "Needs Title!!";
entry.desc = entry.metadata.desc as string ?? "Needs Description!!";
entry.date = Date.parse(entry.metadata.date as string ?? "");
entry.src_target = (entry.src.includes('https://') || entry.src.includes('http://')) ? '_blank' : '';
[entry.img, entry.scale = ""] = (entry.metadata?.img as string ?? "blog-1.png").split('|');
entry.img_bg = entry.metadata.img_bg == "dark" ? "var(--rp-moon-base" : "var(--rp-moon-text)";
entry.scale = (entry.scale == "") ? "" : "transform: scale(" + entry.scale + "); height:auto;border-radius:0;";
return entry;
})
.sort((a, b) => b.date - a.date)
.map((entry) => {
entry.date = new Date(entry.date).toDateString();
return entry as BlogEntry;
})
return {
blogs: blog_entries

36
src/routes/+page.svelte
View File

@@ -20,12 +20,19 @@
</div>
{#each blogs as blog (blog.src)}
<a href={blog.src} target={blog.src_target} class="blog-entry">
<div>
<div class="blog-text">
<h4>{blog.title}</h4>
<p>{blog.desc}</p>
<p class="date">{blog.date}</p>
</div>
<img src="blog-1.png" alt="Preview of the described article" />
<div class="blog-img" style={'background-color:' + blog.img_bg}>
<span style="display: inline-block;height: 100%;vertical-align: middle;"></span><img
src={'/blog-covers/' + blog.img}
alt="Preview of the described article"
style={blog.scale}
/>
<!---->
</div>
</a>
<!-- svelte:component this={page.default} /-->
{/each}
@@ -51,26 +58,45 @@
transition: 0.2s;
}
.blog-entry div {
.blog-text {
width: calc(100% - 15rem - var(--d3) * 2);
padding: var(--d3);
}
.blog-img {
width: 15rem;
margin: 0;
padding: 0;
background-color: var(--rp-moon-text);
border-radius: 0 calc(var(--border-round) + 3px) calc(var(--border-round) + 3px) 0;
}
.blog-entry img {
width: 15rem;
display: inline-block;
vertical-align: middle;
height: 100%;
object-fit: cover;
border-radius: 0 var(--border-round) var(--border-round) 0;
}
@media only screen and (max-width: 700px) {
.blog-entry div {
.blog-text {
width: calc(100% - var(--d1) * 2);
padding: var(--d1);
}
.blog-img {
border-radius: 0 0rem var(--border-round) var(--border-round);
max-height: 10rem;
}
.blog-img {
width: 100%;
}
.blog-entry img {
width: 100%;
max-height: 14rem;
border-radius: 0 0rem var(--border-round) var(--border-round);
}
}