lots of work
This commit is contained in:
@@ -2,10 +2,14 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { postFromProps, PostHeader } from "./PostHelpers.svelte";
|
||||
|
||||
let props = $props();
|
||||
console.log(props);
|
||||
let post = postFromProps(props);
|
||||
</script>
|
||||
|
||||
<h1>meow</h1>
|
||||
{@render PostHeader(post)}
|
||||
{@render props.children?.()}
|
||||
|
||||
<style>
|
||||
|
||||
+223
-20
@@ -1,17 +1,26 @@
|
||||
<script module lang="ts">
|
||||
import { tagImg } from "./tag_store/TagImgHelper.svelte";
|
||||
|
||||
let posts = import.meta.glob("/src/routes/posts/**/*.md", {
|
||||
eager: true,
|
||||
});
|
||||
export type Post = {
|
||||
title: string;
|
||||
description: string;
|
||||
path: string;
|
||||
path?: string;
|
||||
catagory: string;
|
||||
date: Date;
|
||||
updated: Date;
|
||||
updated?: Date;
|
||||
tags: string[];
|
||||
};
|
||||
export { PostCard };
|
||||
export { PostCard, PostHeader };
|
||||
function dateRender(date: Date): string {
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
|
||||
const year = String(date.getFullYear()).slice(-2); // Get last two digits of the year
|
||||
|
||||
return `${day}/${month}/${year}`;
|
||||
}
|
||||
export function getPosts(): Post[] {
|
||||
console.log(posts);
|
||||
let postsNew: Post[] = new Array();
|
||||
@@ -21,11 +30,12 @@
|
||||
let updated = new Date(metadata.updated);
|
||||
let tags = metadata.tags.split(" ");
|
||||
let trimedPath = path.replace("/src/routes/", "");
|
||||
let trimmedPath = trimedPath.replace("/+page.md", "");
|
||||
let post: Post = {
|
||||
title: metadata.title,
|
||||
description: metadata.description,
|
||||
date: date,
|
||||
path: trimedPath,
|
||||
path: trimmedPath,
|
||||
updated: updated,
|
||||
catagory: metadata.catagory,
|
||||
tags: tags,
|
||||
@@ -35,40 +45,233 @@
|
||||
console.log(postsNew);
|
||||
return postsNew;
|
||||
}
|
||||
/// Doesn't provide path
|
||||
export function postFromProps(props: any): Post {
|
||||
const metadata = props;
|
||||
let date = new Date(metadata.date);
|
||||
let updated = new Date(metadata.updated);
|
||||
let tags = metadata.tags.split(" ");
|
||||
// let trimedPath = path.replace("/src/routes/", "");
|
||||
// let trimmedPath = trimedPath.replace("/+page.md", "");
|
||||
let post: Post = {
|
||||
title: metadata.title,
|
||||
description: metadata.description,
|
||||
date: date,
|
||||
updated: updated,
|
||||
catagory: metadata.catagory,
|
||||
tags: tags,
|
||||
};
|
||||
return post;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#snippet PostCard(post: Post)}
|
||||
<a href={post.path}>
|
||||
<div class="card_body">
|
||||
<div>
|
||||
<!-- // Left -->
|
||||
<p>meow Left</p>
|
||||
<p>{post.title}</p>
|
||||
<a class="container" href={post.path}>
|
||||
<div class="card">
|
||||
<div class="left">
|
||||
<span class="post-title">{post.title}</span>
|
||||
<div class="seperater"></div>
|
||||
<p class="post-descr">{post.description}</p>
|
||||
<div class="seperater"></div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- // Right -->
|
||||
<p>meow Right</p>
|
||||
<div class="right">
|
||||
<div class="icons">
|
||||
<div class="icon_container">
|
||||
{@render tagImg(post.tags[0])}
|
||||
</div>
|
||||
<div class="icon_container">
|
||||
{@render tagImg(post.tags[1])}
|
||||
</div>
|
||||
<div class="icon_container">
|
||||
{@render tagImg(post.tags[2])}
|
||||
</div>
|
||||
</div>
|
||||
<div class="seperater"></div>
|
||||
<span title={post.date.toString()}>{dateRender(post.date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
.card_body {
|
||||
{#snippet PostHeader(post: Post)}
|
||||
<div class="card-header-top-div">
|
||||
<div class="card-header-container">
|
||||
<div class="card-header-container-left">
|
||||
<span>{post.title}</span><span>{post.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
.container:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.card-header-top-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.card-header-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
max-width: 1000px;
|
||||
background-color: var(--accent-3);
|
||||
border: 3px, inset, var(--accent-2);
|
||||
}
|
||||
.card_left {
|
||||
.card-header-container-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 3px;
|
||||
span {
|
||||
padding-left: 4px;
|
||||
border-left-style: inset;
|
||||
border-left-width: 3px;
|
||||
border-left-color: whitesmoke;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
--text-color: white;
|
||||
position: relative;
|
||||
background: #4f0515;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
align-content: stretch;
|
||||
justify-content: start;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 10px;
|
||||
padding-block-start: 10px;
|
||||
padding-block-end: 10px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
|
||||
border-style: ridge;
|
||||
border-color: var(--accent-2);
|
||||
border-width: 4px;
|
||||
|
||||
span {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
.icons {
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
justify-items: end;
|
||||
column-gap: 5px;
|
||||
flex-grow: 1;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.icon_container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #555555ff;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
align-content: stretch;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-row: 1;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
.img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
border-width: 2px;
|
||||
border-style: inset;
|
||||
border-color: var(--accent-3);
|
||||
}
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
align-content: stretch;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.card_right {
|
||||
.right {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
align-content: stretch;
|
||||
justify-content: start;
|
||||
row-gap: 2.5px;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
span {
|
||||
color: var(--text-color);
|
||||
margin: 0px;
|
||||
text-box-trim: trim-both;
|
||||
font-family: "sourcesanspro";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.seperater {
|
||||
width: 115px;
|
||||
height: 2.5px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
background: #000000ff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.post-title {
|
||||
color: var(--text-color);
|
||||
text-transform: none;
|
||||
height: 34px;
|
||||
margin: 0px;
|
||||
|
||||
line-break: auto;
|
||||
overflow-wrap: initial;
|
||||
white-space: pre;
|
||||
font-size: 28px;
|
||||
text-rendering: geometricPrecision;
|
||||
caret-color: rgba(0, 0, 0, 1);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0px;
|
||||
font-family: "sourcesanspro";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
.post-descr {
|
||||
color: var(--text-color);
|
||||
text-transform: none;
|
||||
height: 22px;
|
||||
margin: 0px;
|
||||
|
||||
line-break: auto;
|
||||
overflow-wrap: initial;
|
||||
white-space: pre;
|
||||
font-size: 18px;
|
||||
text-rendering: geometricPrecision;
|
||||
caret-color: rgba(0, 0, 0, 1);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0px;
|
||||
font-family: "sourcesanspro";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<script module lang="ts">
|
||||
const imgs = import.meta.glob(
|
||||
"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP}",
|
||||
{
|
||||
eager: true,
|
||||
import: "default",
|
||||
query: {
|
||||
enhanced: true,
|
||||
w: "35",
|
||||
h: "35",
|
||||
},
|
||||
},
|
||||
);
|
||||
console.log(imgs);
|
||||
let trimmedImgs: Record<string, unknown> = {};
|
||||
Object.entries(imgs).forEach(([key, value]) => {
|
||||
let trimmedString = key.replace("./imgs/", "");
|
||||
let trimmedString2 = trimmedString.replace(/(.*)\.[^.]+$/, "$1");
|
||||
trimmedImgs[trimmedString2] = value;
|
||||
});
|
||||
function getTagImg(name: string): any {
|
||||
console.log(trimmedImgs);
|
||||
if (trimmedImgs[name]) {
|
||||
return trimmedImgs[name];
|
||||
} else {
|
||||
return trimmedImgs["unknown"];
|
||||
}
|
||||
}
|
||||
export { tagImg };
|
||||
</script>
|
||||
|
||||
{#snippet tagImg(name: string)}
|
||||
<enhanced:img src={getTagImg(name)} width="35" height="35" />
|
||||
{/snippet}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
@@ -4,6 +4,33 @@
|
||||
const posts = getPosts();
|
||||
</script>
|
||||
|
||||
{#each posts as post}
|
||||
{@render PostCard(post)}
|
||||
{/each}
|
||||
<div class="posts_header">
|
||||
<h2>Posts and what not</h2>
|
||||
</div>
|
||||
<div class="posts_container">
|
||||
{#each posts as post}
|
||||
{@render PostCard(post)}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.posts_container {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: stretch;
|
||||
justify-content: start;
|
||||
row-gap: 20px;
|
||||
padding-block-start: 20px;
|
||||
z-index: 0;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.posts_header {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
title: hi
|
||||
date: 1995-12-17T03:24:00
|
||||
updated: 1995-12-17T03:24:00
|
||||
description: meow
|
||||
title: Test Post, Mreow
|
||||
date: 2026-04-17T03:24:00
|
||||
updated: 2026-04-18T03:24:00
|
||||
description: Description of the test post
|
||||
catagory: main
|
||||
tags: moew meow meow
|
||||
tags: Ammo_Scavenger Rust_Lang Ammo_Scavenger
|
||||
---
|
||||
Test post, this tests the frontmatter processing
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Test Post 2, Mreow
|
||||
date: 2026-04-17T03:24:00
|
||||
updated: 2026-04-18T03:24:00
|
||||
description: Description of the test post
|
||||
catagory: main
|
||||
tags: Ammo_Scavenger Rust_Lang Ammo_Scavenger
|
||||
---
|
||||
Test post, this tests the frontmatter processing
|
||||
Reference in New Issue
Block a user