96 lines
2.4 KiB
Svelte
96 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import type { MDsveXComponent } from '$lib/types';
|
|
import type { SvelteComponent } from 'svelte';
|
|
import './style-entries.css';
|
|
|
|
let blog_entries: [string, SvelteComponent][] = 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])=>{
|
|
if(val.metadata)
|
|
val.metadata.date = Date.parse(val.metadata?.date);
|
|
return [link,val];
|
|
}
|
|
).sort(([link1,a],[link2,b])=>b.metadata?.date-a.metadata?.date);
|
|
console.log(blog_entries);
|
|
</script>
|
|
|
|
<main>
|
|
<div class="start">
|
|
<h1>Welcome to SvelteKit</h1>
|
|
<p>
|
|
Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
|
|
</p>
|
|
</div>
|
|
{#each blog_entries as [href, page]}
|
|
<a {href}>
|
|
<div class="blog-entry">
|
|
<div>
|
|
<h4>{page.metadata?.title}</h4>
|
|
<p>{page.metadata?.desc}</p>
|
|
<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
|
|
</div>
|
|
<img src="blog-1.png" class="blog-image" />
|
|
</div>
|
|
</a>
|
|
<br />
|
|
<!-- svelte:component this={page.default} /-->
|
|
{/each}
|
|
</main>
|
|
|
|
<style>
|
|
|
|
.start {
|
|
padding: var(--d2);
|
|
}
|
|
|
|
.blog-entry {
|
|
background: var(--rp-moon-surface);
|
|
border-radius: var(--border-round);
|
|
width: 100%;
|
|
color: var(--rp-moon-text);
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.blog-entry:hover {
|
|
box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
|
|
background: var(--rp-moon-overlay);
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.blog-entry div {
|
|
width: calc(100% - 15rem - var(--d2) * 2);
|
|
padding: var(--d2);
|
|
}
|
|
|
|
.blog-entry img {
|
|
width: 15rem;
|
|
object-fit: cover;
|
|
border-radius: 0 var(--border-round) var(--border-round) 0;
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.blog-entry div {
|
|
width: calc(100% - var(--d2) * 2);
|
|
}
|
|
|
|
.blog-entry img {
|
|
width: 100%;
|
|
max-height: 14rem;
|
|
border-radius: 0 0rem var(--border-round) var(--border-round) ;
|
|
}
|
|
}
|
|
|
|
.blog-entry h4 {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
</style>
|