Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: refactor blog articles, fix images ratio #28

Merged
merged 5 commits into from
Sep 21, 2023
Merged

feat: refactor blog articles, fix images ratio #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fb99364
Merge branch 'main' of github.com:appwrite/website into elad-style-2
ArmanNik Sep 20, 2023
7be69da
feat: create article component, refactor blog pages, fix image size
ArmanNik Sep 20, 2023
46958df
Merge branch 'elad-style-2' of github.com:appwrite/website into refac…
ArmanNik Sep 20, 2023
ef6acf0
Merge branch 'main' of github.com:appwrite/website into refactor-arti…
ArmanNik Sep 21, 2023
931b1c0
Merge branch 'main' of github.com:appwrite/website into refactor-arti…
ArmanNik Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions src/lib/components/Article.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<script lang="ts">
export let title: string;
export let cover: string;
export let href: string;
export let date: Date;
export let timeToRead: number;
export let author: string;
export let avatar: string;
</script>

<li>
<a class="aw-grid-articles-item" {href}>
<div class="aw-grid-articles-item-image">
<img src={cover} class="aw-u-media-ratio-16-9" alt={title} />
</div>
<div class="aw-grid-articles-item-content">
<h4 class="aw-label aw-u-color-text-primary">
{title}
</h4>
<div class="aw-author">
<div class="u-flex u-cross-center u-gap-8">
<img class="aw-author-image" src={avatar} width="24" height="24" alt={author} />
<div class="aw-author-info">
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author}</h4>
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
<li>{date.toLocaleDateString()}</li>
<li>{timeToRead} min</li>
</ul>
</div>
</div>
</div>
</div>
</a>
</li>
1 change: 1 addition & 0 deletions src/lib/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ export { default as MobileNav } from './MobileNav.svelte';
export { default as Phone } from './Phone.svelte';
export { default as Newsletter } from './Newsletter.svelte';
export { default as Tooltip } from './Tooltip.svelte';
export { default as Article } from './Article.svelte';
45 changes: 10 additions & 35 deletions src/markdoc/layouts/Author.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</script>

<script lang="ts">
import { FooterNav, MainFooter } from '$lib/components';
import { Article, FooterNav, MainFooter } from '$lib/components';
import { Main } from '$lib/layouts';
import { getContext } from 'svelte';
import type { PostsData } from './Post.svelte';
Expand Down Expand Up @@ -249,40 +249,15 @@
<div class="u-margin-block-start-48">
<ul class="aw-grid-articles">
{#each posts as post}
<li>
<a class="aw-grid-articles-item" href={post.href}>
<div class="aw-grid-articles-item-image">
<img
src={post.cover ?? '/images/blog/placeholder.png'}
class="aw-image-ratio-4/3"
alt=""
/>
</div>
<div class="aw-grid-articles-item-content">
<h4 class="aw-label aw-u-color-text-primary">
{post.title}
</h4>
<div class="aw-author">
<div class="u-flex u-cross-center u-gap-8">
<img
class="aw-author-image"
src={avatar}
width="24"
height="24"
alt={name}
/>
<div class="aw-author-info">
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{name}</h4>
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
<li>{post.date.toLocaleDateString()}</li>
<li>{post.timeToRead} min</li>
</ul>
</div>
</div>
</div>
</div>
</a>
</li>
<Article
title={post.title}
href={post.href}
cover={post.cover}
date={post.date}
timeToRead={post.timeToRead}
{avatar}
author={name}
/>
{/each}
</ul>
</div>
Expand Down
43 changes: 12 additions & 31 deletions src/markdoc/layouts/Category.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</script>

<script lang="ts">
import { FooterNav, MainFooter } from '$lib/components';
import { Article, FooterNav, MainFooter } from '$lib/components';
import { Main } from '$lib/layouts';
import { getContext } from 'svelte';
import type { PostsData } from './Post.svelte';
Expand Down Expand Up @@ -46,36 +46,17 @@
<ul class="aw-grid-articles">
{#each posts as post}
{@const author = authors.find((a) => a.name.includes(post.author))}
<li>
<a class="aw-grid-articles-item" href={post.href}>
<div class="aw-grid-articles-item-image">
<img src={post.cover} class="aw-image-ratio-4/3" alt={post.title} />
</div>
<div class="aw-grid-articles-item-content">
<h4 class="aw-label aw-u-color-text-primary">
{post.title}
</h4>
<div class="aw-author">
<div class="u-flex u-cross-center u-gap-8">
<img
class="aw-author-image"
src={author?.avatar}
width="24"
height="24"
alt={author?.name}
/>
<div class="aw-author-info">
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author?.name}</h4>
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
<li>{post.date.toLocaleDateString()}</li>
<li>{post.timeToRead} min</li>
</ul>
</div>
</div>
</div>
</div>
</a>
</li>
{#if author}
<Article
title={post.title}
href={post.href}
cover={post.cover}
date={post.date}
timeToRead={post.timeToRead}
avatar={author.avatar}
author={author.name}
/>
{/if}
{/each}
</ul>
</div>
Expand Down
43 changes: 12 additions & 31 deletions src/markdoc/layouts/Post.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</script>

<script lang="ts">
import { FooterNav, MainFooter, Newsletter } from '$lib/components';
import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
import { Main } from '$lib/layouts';
import { getContext } from 'svelte';
import type { AuthorData } from './Author.svelte';
Expand Down Expand Up @@ -159,36 +159,17 @@
<ul class="aw-grid-articles">
{#each posts.filter((p) => p.title !== title).slice(0, 3) as post}
{@const author = authors.find((a) => a.name.includes(post.author))}
<li>
<a class="aw-grid-articles-item" href="/blog">
<div class="aw-grid-articles-item-image">
<img src={post.cover} class="aw-image-ratio-4/3" alt={post.title} />
</div>
<div class="aw-grid-articles-item-content">
<h4 class="aw-label aw-u-color-text-primary">
{post.title}
</h4>
<div class="aw-author">
<div class="u-flex u-cross-center u-gap-8">
<img
class="aw-author-image"
src={author?.avatar}
width="24"
height="24"
alt={author?.name}
/>
<div class="aw-author-info">
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author?.name}</h4>
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
<li>{post.date.toLocaleDateString()}</li>
<li>{post.timeToRead} min</li>
</ul>
</div>
</div>
</div>
</div>
</a>
</li>
{#if author}
<Article
title={post.title}
href={post.href}
cover={post.cover}
date={post.date}
timeToRead={post.timeToRead}
avatar={author.avatar}
author={author.name}
/>
{/if}
{/each}
</ul>
</section>
Expand Down
43 changes: 12 additions & 31 deletions src/routes/blog/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { Main } from '$lib/layouts';
import { MainFooter, FooterNav } from '$lib/components';
import { MainFooter, FooterNav, Article } from '$lib/components';

export let data;
</script>
Expand Down Expand Up @@ -233,36 +233,17 @@
{@const author = data.authors.find(
(author) => author.name.toLowerCase() === post.author.toLowerCase()
)}
<li>
<a class="aw-grid-articles-item" href={post.href}>
<div class="aw-grid-articles-item-image">
<img src={post.cover} class="aw-image-ratio-4/3" alt="" />
</div>
<div class="aw-grid-articles-item-content">
<h4 class="aw-label aw-u-color-text-primary">
{post.title}
</h4>
<div class="aw-author">
<div class="u-flex u-cross-center u-gap-8">
<img
class="aw-author-image"
src={author?.avatar}
width="24"
height="24"
alt=""
/>
<div class="aw-author-info">
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author?.name}</h4>
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
<li>{post.date.toLocaleDateString()}</li>
<li>{post.timeToRead} min</li>
</ul>
</div>
</div>
</div>
</div>
</a>
</li>
{#if author}
<Article
title={post.title}
href={post.href}
cover={post.cover}
date={post.date}
timeToRead={post.timeToRead}
avatar={author.avatar}
author={author.name}
/>
{/if}
{/each}
</ul>
</div>
Expand Down