Skip to content

Commit 13623f2

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #28 from appwrite/refactor-article-component
feat: refactor blog articles, fix images ratio
2 parents 554469b + 931b1c0 commit 13623f2

File tree

6 files changed

+81
-128
lines changed

6 files changed

+81
-128
lines changed

‎src/lib/components/Article.svelte‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
export let title: string;
3+
export let cover: string;
4+
export let href: string;
5+
export let date: Date;
6+
export let timeToRead: number;
7+
export let author: string;
8+
export let avatar: string;
9+
</script>
10+
11+
<li>
12+
<a class="aw-grid-articles-item" {href}>
13+
<div class="aw-grid-articles-item-image">
14+
<img src={cover} class="aw-u-media-ratio-16-9" alt={title} />
15+
</div>
16+
<div class="aw-grid-articles-item-content">
17+
<h4 class="aw-label aw-u-color-text-primary">
18+
{title}
19+
</h4>
20+
<div class="aw-author">
21+
<div class="u-flex u-cross-center u-gap-8">
22+
<img class="aw-author-image" src={avatar} width="24" height="24" alt={author} />
23+
<div class="aw-author-info">
24+
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author}</h4>
25+
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
26+
<li>{date.toLocaleDateString()}</li>
27+
<li>{timeToRead} min</li>
28+
</ul>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</a>
34+
</li>

‎src/lib/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ export { default as MobileNav } from './MobileNav.svelte';
55
export { default as Phone } from './Phone.svelte';
66
export { default as Newsletter } from './Newsletter.svelte';
77
export { default as Tooltip } from './Tooltip.svelte';
8+
export { default as Article } from './Article.svelte';

‎src/markdoc/layouts/Author.svelte‎

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</script>
1313

1414
<script lang="ts">
15-
import { FooterNav, MainFooter } from '$lib/components';
15+
import { Article, FooterNav, MainFooter } from '$lib/components';
1616
import { Main } from '$lib/layouts';
1717
import { getContext } from 'svelte';
1818
import type { PostsData } from './Post.svelte';
@@ -249,40 +249,15 @@
249249
<div class="u-margin-block-start-48">
250250
<ul class="aw-grid-articles">
251251
{#each posts as post}
252-
<li>
253-
<a class="aw-grid-articles-item" href={post.href}>
254-
<div class="aw-grid-articles-item-image">
255-
<img
256-
src={post.cover ?? '/images/blog/placeholder.png'}
257-
class="aw-image-ratio-4/3"
258-
alt=""
259-
/>
260-
</div>
261-
<div class="aw-grid-articles-item-content">
262-
<h4 class="aw-label aw-u-color-text-primary">
263-
{post.title}
264-
</h4>
265-
<div class="aw-author">
266-
<div class="u-flex u-cross-center u-gap-8">
267-
<img
268-
class="aw-author-image"
269-
src={avatar}
270-
width="24"
271-
height="24"
272-
alt={name}
273-
/>
274-
<div class="aw-author-info">
275-
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{name}</h4>
276-
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
277-
<li>{post.date.toLocaleDateString()}</li>
278-
<li>{post.timeToRead} min</li>
279-
</ul>
280-
</div>
281-
</div>
282-
</div>
283-
</div>
284-
</a>
285-
</li>
252+
<Article
253+
title={post.title}
254+
href={post.href}
255+
cover={post.cover}
256+
date={post.date}
257+
timeToRead={post.timeToRead}
258+
{avatar}
259+
author={name}
260+
/>
286261
{/each}
287262
</ul>
288263
</div>

‎src/markdoc/layouts/Category.svelte‎

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</script>
88

99
<script lang="ts">
10-
import { FooterNav, MainFooter } from '$lib/components';
10+
import { Article, FooterNav, MainFooter } from '$lib/components';
1111
import { Main } from '$lib/layouts';
1212
import { getContext } from 'svelte';
1313
import type { PostsData } from './Post.svelte';
@@ -46,36 +46,17 @@
4646
<ul class="aw-grid-articles">
4747
{#each posts as post}
4848
{@const author = authors.find((a) => a.name.includes(post.author))}
49-
<li>
50-
<a class="aw-grid-articles-item" href={post.href}>
51-
<div class="aw-grid-articles-item-image">
52-
<img src={post.cover} class="aw-image-ratio-4/3" alt={post.title} />
53-
</div>
54-
<div class="aw-grid-articles-item-content">
55-
<h4 class="aw-label aw-u-color-text-primary">
56-
{post.title}
57-
</h4>
58-
<div class="aw-author">
59-
<div class="u-flex u-cross-center u-gap-8">
60-
<img
61-
class="aw-author-image"
62-
src={author?.avatar}
63-
width="24"
64-
height="24"
65-
alt={author?.name}
66-
/>
67-
<div class="aw-author-info">
68-
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author?.name}</h4>
69-
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
70-
<li>{post.date.toLocaleDateString()}</li>
71-
<li>{post.timeToRead} min</li>
72-
</ul>
73-
</div>
74-
</div>
75-
</div>
76-
</div>
77-
</a>
78-
</li>
49+
{#if author}
50+
<Article
51+
title={post.title}
52+
href={post.href}
53+
cover={post.cover}
54+
date={post.date}
55+
timeToRead={post.timeToRead}
56+
avatar={author.avatar}
57+
author={author.name}
58+
/>
59+
{/if}
7960
{/each}
8061
</ul>
8162
</div>

‎src/markdoc/layouts/Post.svelte‎

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</script>
1313

1414
<script lang="ts">
15-
import { FooterNav, MainFooter, Newsletter } from '$lib/components';
15+
import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
1616
import { Main } from '$lib/layouts';
1717
import { getContext } from 'svelte';
1818
import type { AuthorData } from './Author.svelte';
@@ -159,36 +159,17 @@
159159
<ul class="aw-grid-articles">
160160
{#each posts.filter((p) => p.title !== title).slice(0, 3) as post}
161161
{@const author = authors.find((a) => a.name.includes(post.author))}
162-
<li>
163-
<a class="aw-grid-articles-item" href="/blog">
164-
<div class="aw-grid-articles-item-image">
165-
<img src={post.cover} class="aw-image-ratio-4/3" alt={post.title} />
166-
</div>
167-
<div class="aw-grid-articles-item-content">
168-
<h4 class="aw-label aw-u-color-text-primary">
169-
{post.title}
170-
</h4>
171-
<div class="aw-author">
172-
<div class="u-flex u-cross-center u-gap-8">
173-
<img
174-
class="aw-author-image"
175-
src={author?.avatar}
176-
width="24"
177-
height="24"
178-
alt={author?.name}
179-
/>
180-
<div class="aw-author-info">
181-
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author?.name}</h4>
182-
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
183-
<li>{post.date.toLocaleDateString()}</li>
184-
<li>{post.timeToRead} min</li>
185-
</ul>
186-
</div>
187-
</div>
188-
</div>
189-
</div>
190-
</a>
191-
</li>
162+
{#if author}
163+
<Article
164+
title={post.title}
165+
href={post.href}
166+
cover={post.cover}
167+
date={post.date}
168+
timeToRead={post.timeToRead}
169+
avatar={author.avatar}
170+
author={author.name}
171+
/>
172+
{/if}
192173
{/each}
193174
</ul>
194175
</section>

‎src/routes/blog/+page.svelte‎

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { Main } from '$lib/layouts';
3-
import { MainFooter, FooterNav } from '$lib/components';
3+
import { MainFooter, FooterNav, Article } from '$lib/components';
44
55
export let data;
66
</script>
@@ -233,36 +233,17 @@
233233
{@const author = data.authors.find(
234234
(author) => author.name.toLowerCase() === post.author.toLowerCase()
235235
)}
236-
<li>
237-
<a class="aw-grid-articles-item" href={post.href}>
238-
<div class="aw-grid-articles-item-image">
239-
<img src={post.cover} class="aw-image-ratio-4/3" alt="" />
240-
</div>
241-
<div class="aw-grid-articles-item-content">
242-
<h4 class="aw-label aw-u-color-text-primary">
243-
{post.title}
244-
</h4>
245-
<div class="aw-author">
246-
<div class="u-flex u-cross-center u-gap-8">
247-
<img
248-
class="aw-author-image"
249-
src={author?.avatar}
250-
width="24"
251-
height="24"
252-
alt=""
253-
/>
254-
<div class="aw-author-info">
255-
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author?.name}</h4>
256-
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
257-
<li>{post.date.toLocaleDateString()}</li>
258-
<li>{post.timeToRead} min</li>
259-
</ul>
260-
</div>
261-
</div>
262-
</div>
263-
</div>
264-
</a>
265-
</li>
236+
{#if author}
237+
<Article
238+
title={post.title}
239+
href={post.href}
240+
cover={post.cover}
241+
date={post.date}
242+
timeToRead={post.timeToRead}
243+
avatar={author.avatar}
244+
author={author.name}
245+
/>
246+
{/if}
266247
{/each}
267248
</ul>
268249
</div>

0 commit comments

Comments
 (0)