Blog Layout improvements, css revision
This commit is contained in:
parent
aae35105ab
commit
6fd945c6cd
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
title: Third post
|
||||||
|
excerpt: This is the most interesting post that you will ever read. It is the third post, which is extremely interesting and I am too lazy to even input lorem ipsum xd.
|
||||||
|
date: 2023-01-01
|
||||||
|
tags:
|
||||||
|
- first
|
||||||
|
- post
|
||||||
|
published: true
|
||||||
|
image: Feature.jpg
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Svelte
|
||||||
|
|
||||||
|
Media inside the **Svelte** folder is server from the `static` folder.
|
|
@ -1,11 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import PostContentLayout from './PostLayout.svelte';
|
import PostLayout from './PostLayout.svelte';
|
||||||
|
|
||||||
import type { BlogPost } from '$lib/types/blog';
|
import type { BlogPost } from '$lib/types/blog';
|
||||||
|
|
||||||
export let post: BlogPost;
|
export let post: BlogPost;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<PostContentLayout {...post} imagesDirectoryName="blog">
|
<PostLayout {...post} imagesDirectoryName="blog">
|
||||||
<slot />
|
<slot />
|
||||||
</PostContentLayout>
|
</PostLayout>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
let options: BlogTag[] = ['Projects', 'Blog', 'Updates'];
|
let options: BlogTag[] = ['DevOps', 'AI', 'Updates'];
|
||||||
|
|
||||||
const clickHandler = (value: BlogTag) => {
|
const clickHandler = (value: BlogTag) => {
|
||||||
if (value === selected) {
|
if (value === selected) {
|
||||||
|
@ -22,12 +22,18 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="flex justify-center flex-col items-center {className}">
|
<section class="flex justify-center flex-col items-center {className}">
|
||||||
<p class="text-semibold mb-2 md:mb-4">Sort by category</p>
|
<header class="flex flex-col justify-center items-center">
|
||||||
|
<h1 class="h1">Blog</h1>
|
||||||
|
<span />
|
||||||
|
</header>
|
||||||
|
<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
|
||||||
<ul class="flex flex-wrap justify-center gap-2">
|
<ul class="flex flex-wrap justify-center gap-2">
|
||||||
{#each options as option}
|
{#each options as option}
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
class="btn btn-md variant-filled-primary"
|
class="chip {option === selected
|
||||||
|
? 'variant-filled-tertiary'
|
||||||
|
: 'variant-soft-primary'}"
|
||||||
on:click={() => clickHandler(option)}
|
on:click={() => clickHandler(option)}
|
||||||
>
|
>
|
||||||
{option}
|
{option}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
export let tags: string[] = [];
|
export let tags: string[] = [];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article>
|
<article class="text-token">
|
||||||
<div class="flex justify-center mt-4 mb-8">
|
<div class="flex justify-center mt-4 mb-8">
|
||||||
<div class="w-full lg:w-[50rem] leading-[177.7%]">
|
<div class="w-full lg:w-[50rem] leading-[177.7%]">
|
||||||
<header>
|
<header>
|
||||||
|
|
|
@ -2,8 +2,10 @@
|
||||||
import { isAnExternalLink } from '$lib/utils/helpers';
|
import { isAnExternalLink } from '$lib/utils/helpers';
|
||||||
import type { BlogPost } from '$lib/types/blog';
|
import type { BlogPost } from '$lib/types/blog';
|
||||||
|
|
||||||
|
export let isMostRecent: boolean = false;
|
||||||
|
export let type: 'blog' | 'projects';
|
||||||
|
export let layout: 'row' | 'column' = 'column';
|
||||||
export let post: BlogPost;
|
export let post: BlogPost;
|
||||||
export let type: 'blog';
|
|
||||||
// export let published: boolean;
|
// export let published: boolean;
|
||||||
// export let headlineOrder: 'h3' | '' = '';
|
// export let headlineOrder: 'h3' | '' = '';
|
||||||
// export let badge: string = '';
|
// export let badge: string = '';
|
||||||
|
@ -25,32 +27,32 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a
|
<div class="grid auto-rows-auto w-full h-full text-token">
|
||||||
|
<a
|
||||||
{href}
|
{href}
|
||||||
{target}
|
{target}
|
||||||
data-sveltekit-preload-data="hover"
|
data-sveltekit-preload-data="hover"
|
||||||
class="card"
|
class="card bg-gradient-to-br variant-gradient-primary-secondary card-hover overflow-hidden flex flex-col space-y-4"
|
||||||
data-analytics={`{"context":"grid","variant":"preview"}`}
|
data-analytics={`{"context":"grid","variant":"preview"}`}
|
||||||
>
|
|
||||||
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<!-- Detailed -->
|
|
||||||
<a
|
|
||||||
class="card bg-gradient-to-br variant-gradient-tertiary-primary card-hover overflow-hidden"
|
|
||||||
href="/blog/{post.slug}"
|
|
||||||
>
|
>
|
||||||
|
<!-- Detailed -->
|
||||||
|
<!-- <a
|
||||||
|
class="card "
|
||||||
|
href="/blog/{post.slug}"
|
||||||
|
> -->
|
||||||
<header>
|
<header>
|
||||||
<img
|
<img
|
||||||
src="/images/blog/{post.slug}/{post.image}"
|
src="/images/blog/{post.slug}/{post.image}"
|
||||||
class="bg-black/50 w-full aspect-[21/9]"
|
class="bg-black/50 w-full aspect-[3/2]"
|
||||||
alt="Post"
|
alt="Post"
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
<div class="p-4 space-y-4">
|
<section class="p-4 space-y-4">
|
||||||
<h6 class="text-2" data-toc-ignore>
|
<h6 class="text-2" data-toc-ignore>
|
||||||
<div class="items-center flex gap-2">
|
<div class="items-center flex gap-2">
|
||||||
{#if post.tags}
|
{#if post.tags}
|
||||||
{#each post.tags as tag}
|
{#each post.tags as tag}
|
||||||
<span class="chip variant-ghost-surface">{tag}</span>
|
<span class="chip variant-ghost-tertiary">{tag}</span>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
@ -63,14 +65,26 @@
|
||||||
<!-- cspell:enable -->
|
<!-- cspell:enable -->
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</section>
|
||||||
<hr class="opacity-50" />
|
<hr class="opacity-50" />
|
||||||
<footer class="p-4 flex justify-start items-center space-x-4">
|
<footer class="p-4 flex justify-between">
|
||||||
<div class="flex-auto flex justify-between items-center">
|
<div class="flex flex-wrap gap-2">
|
||||||
<h6 class="font-bold" data-toc-ignore>By Matt</h6>
|
{#if post.tags && post.tags.length > 0}
|
||||||
|
<small>tags: </small>
|
||||||
|
{#each post.tags as tag}
|
||||||
|
<a
|
||||||
|
data-sveltekit-preload-data="hover"
|
||||||
|
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
||||||
|
>
|
||||||
|
<h6 class="chip variant-ghost-surface">{tag}</h6>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto">
|
||||||
<small>
|
<small>
|
||||||
{#if post.date}
|
{#if post.date}
|
||||||
<span class="date text-p-small ml-macro">
|
<span class="text-sm ml-4">
|
||||||
{displayDate}
|
{displayDate}
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -78,5 +92,7 @@
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
|
<style lang="postcss">
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue