changes to blog

This commit is contained in:
Akis 2023-01-03 10:47:39 +02:00
parent 76435cc3d2
commit 27269d2476
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
9 changed files with 22 additions and 17 deletions

View File

@ -2,14 +2,15 @@
import dayjs from "dayjs";
export let post: any;
export let isPost: boolean = false;
</script>
<div class="flex flex-col md:(flex-row gap-4) gap-2">
<div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}">
{#if post.tags.length > 0}
<div class="flex flex-row items-center gap-2">
<div class="i-fa6-solid:tags" />
{#each post.tags as tag}
<a href="/blog/tags/{tag.slug}" class="no-underline bg-primary rounded-2 p-1">{tag.name}</a>
<a href="/blog/tags/{tag.slug}" class="no-underline rounded-2 p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
{/each}
</div>
{/if}

View File

@ -2,6 +2,6 @@
export let data: any;
</script>
<div class="prose flex flex-col m-auto">
<div class="prose flex flex-col text-justify m-auto">
{@html data.post.html}
</div>

View File

@ -1,8 +1,9 @@
<script lang="ts">
export let url: string = "";
export let isPost: boolean = false;
</script>
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
<div class="flex flex-col gap-4 p-4 rounded-2 {isPost ? "" : "w-120 bg-secondary"}">
<slot />
{#if url}

View File

@ -1,7 +1,8 @@
<script lang="ts">
export let hasMt: boolean = false;
export let isHome: boolean = false;
</script>
<div class="flex flex-col gap-10 {hasMt ? "mt-16" : ""}">
<div class="flex flex-row flex-wrap gap-10 {hasMt ? "mt-16" : ""} {isHome ? "justify-center" : ""}">
<slot />
</div>

View File

@ -1,5 +1,11 @@
<script lang="ts">
export let post: any;
export let isPost: boolean = false;
</script>
<span class="text-xl font-bold">{post.title}</span>
{#if !isPost}
<a href="/blog/{post.slug}" class="text-text no-underline hover:underline"><span class="text-xl font-bold">{post.title}</span></a>
{:else}
<span class="text-xl font-bold">{post.title}</span>
{/if}

View File

@ -1,5 +0,0 @@
<script lang="ts">
export let data: any;
</script>
<span class="text-xl font-bold flex flex-row items-center gap-2"><a href="/blog" class="flex flex-row items-center gap-2"><div class="i-fa6-solid:arrow-left" /> Back</a> - {data.post.title}</span>

View File

@ -3,6 +3,5 @@ export { default as PostOuter } from "./PostOuter.svelte";
export { default as Title } from "./Title.svelte";
export { default as Meta } from "./Meta.svelte";
export { default as ReadMore } from "./ReadMore.svelte";
export { default as TitleWithBackButton } from "./TitleWithBackButton.svelte";
export { default as PostContent } from "./PostContent.svelte";
export { default as SingleWordLists } from "./SingleWordLists.svelte";

View File

@ -39,7 +39,7 @@
/>
</div>
</Hero>
<PostsContainer hasMt>
<PostsContainer hasMt isHome>
{#each data.posts as post}
<PostOuter>
<Title {post} />

View File

@ -2,15 +2,17 @@
import type { PageData } from "./$types";
export let data: PageData;
import { PostOuter, TitleWithBackButton, Meta, PostContent } from "$lib/BlogCard";
import { PostOuter, Title, Meta, PostContent } from "$lib/BlogCard";
</script>
<svelte:head>
<title>{data.post.title} | Project Segfault Blog</title>
</svelte:head>
<PostOuter url={data.post.url}>
<TitleWithBackButton {data} />
<Meta post={data.post} />
<PostOuter url={data.post.url} isPost>
<div class="text-center mt-4 flex flex-col items-center gap-4">
<Title post={data.post} isPost />
<Meta post={data.post} isPost />
</div>
<PostContent {data} />
</PostOuter>