zoriya/vex
1
0
Fork 0
mirror of https://github.com/zoriya/vex.git synced 2026-08-16 02:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Post card now is clickable

Browse Source
This commit is contained in:
Clément Le Bihan
2024-05-05 16:33:17 +02:00
parent 37dacb0d79
commit ee9966d1fb
5 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/posts/card.svelte
+32 -32
View File
@@ -1,46 +1,45 @@
<script lang="ts">
import type { Post } from "$lib/types";
import Time, { dayjs } from "svelte-time";
import TagList from "./tag-list.svelte";
import QuillPenLine from "virtual:icons/mingcute/quill-pen-line";
export let post: Post;
</script>
<article>
<div class="origin">
<img src={post.feed.faviconUrl} alt={post.feed.title} />
<span>{post.feed.title}</span> |
{#if post.author}
<div class="author">
<QuillPenLine />
<span>{post.author}</span>
</div>
|
{/if}
<Time
timestamp={post.date}
relative={true}
title={dayjs(post.date).locale("en").toString()}
/>
</div>
<content>
<h2>{post.title}</h2>
<p>{post.content}</p>
</content>
<!-- <footer>
<a
href={post.link}
target="_blank"
on:click={() => {
console.log("clicked");
}}
>
<article>
<div class="origin">
<img src={post.feed.faviconUrl} alt={post.feed.title} />
<span>{post.feed.title}</span> |
{#if post.author}
<div class="author">
<QuillPenLine />
<span>{post.author}</span>
</div>
|
{/if}
<Time
timestamp={post.date}
relative={true}
title={dayjs(post.date).locale("en").toString()}
/>
</div>
<content>
<h2>{post.title}</h2>
<p>{post.content}</p>
</content>
<!-- <footer>
<TagList tags={post.feed.tags} />
</footer> -->
</article>
</article>
</a>
<style>
article {
/* border-radius: 10px;
box-shadow: 0px 0px 12px 9px rgba(0, 0, 0, 0.28);
border: 1px solid #e0e0e0;
padding: 0.7rem;
background-color: rgb(220, 220, 220); */
}
.origin {
display: flex;
align-items: center;
@@ -58,6 +57,7 @@
h2 {
margin: 0.5rem;
font-size: 1.3rem;
font-weight: 600;
}
p {
web/src/lib/posts/list.svelte
+11 -12
View File
@@ -4,24 +4,23 @@
export let posts: Post[] = [];
</script>
<div>
<h1>Posts</h1>
<ul>
{#each posts as post}
<li>
<Card {post} />
</li>
<hr>
{/each}
</ul>
</div>
<ul>
{#each posts as post, index}
<li>
<Card {post} />
</li>
{#if index !== posts.length - 1}
<hr />
{/if}
{/each}
</ul>
<style>
ul {
list-style: none;
padding: 0;
display: flex;
gap: 1rem;
flex-direction: column;
}
</style>