Skip to content

Commit c063a48

Browse files
aster-voidaster-void
committed
feat(ui): add "No Image" placeholder for articles and projects
画像がない記事とプロジェクトに対して、"No Image" プレースホルダーを表示するようにしました。 変更内容: - 記事一覧ページ: プレースホルダーを追加 - プロジェクト一覧ページ: プレースホルダーを追加 - 検索ページ: 記事とプロジェクトにプレースホルダーを追加 - ホームページ: 記事セクションとプロジェクトセクションにプレースホルダーを追加 デザイン: - グラデーション背景 (zinc-100 → zinc-200) - JetBrains Monoフォントで "No Image" を表示 - 既存のデザインシステムに統一（rounded corners、aspect ratio [5/3]） - Featured projectはダークテーマに合わせた配色 (zinc-800 → zinc-700)
1 parent f599d5d commit c063a48

File tree

16 files changed

+157
-48
lines changed

16 files changed

+157
-48
lines changed

‎src/lib/components/home/ArticlesSection.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@
4141
class="aspect-[5/3] w-full object-cover"
4242
loading="lazy"
4343
/>
44+
{:else}
45+
<div
46+
class="flex aspect-[5/3] w-full items-center justify-center bg-gradient-to-br from-zinc-100 to-zinc-200"
47+
>
48+
<span class="font-[JetBrains_Mono,monospace] text-sm font-medium text-zinc-400">
49+
No Image
50+
</span>
51+
</div>
4452
{/if}
4553
<div class="p-6">
4654
<h3 class="mb-3 text-xl font-bold text-zinc-900 transition-colors group-hover:text-primary">

‎src/lib/components/home/ProjectsSection.svelte‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@
5454
loading="lazy"
5555
/>
5656
</div>
57+
{:else}
58+
<div class="mt-6 flex aspect-[5/3] w-full items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-zinc-800 to-zinc-700 ring-1 ring-white/10">
59+
<span class="font-[JetBrains_Mono,monospace] text-sm font-medium text-zinc-400">
60+
No Image
61+
</span>
62+
</div>
5763
{/if}
5864
<div class="mt-8">
5965
<h3 class="mb-3 text-2xl font-bold transition-colors duration-300 group-hover:text-primary">
@@ -88,6 +94,12 @@
8894
loading="lazy"
8995
/>
9096
</div>
97+
{:else}
98+
<div class="mb-4 flex aspect-[5/3] w-full items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-zinc-100 to-zinc-200 ring-1 ring-zinc-100">
99+
<span class="font-[JetBrains_Mono,monospace] text-sm font-medium text-zinc-400">
100+
No Image
101+
</span>
102+
</div>
91103
{/if}
92104
<h3 class="mb-2 text-xl font-bold text-zinc-900 transition-colors duration-300 group-hover:text-primary">
93105
{project.name}

‎src/routes/(site)/articles/+page.server.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { getPublicArticles } from "$lib/data/public/index.remote";
2+
import type { PageServerLoad } from "./$types";
3+
4+
export const load: PageServerLoad = async ({ url }) => {
5+
const articles = await getPublicArticles();
6+
const currentPage = Number(url.searchParams.get("page")) || 1;
7+
8+
return {
9+
articles,
10+
currentPage,
11+
};
12+
};

‎src/routes/(site)/articles/+page.svelte‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,14 @@
5959
class="mb-4 aspect-[5/3] w-full rounded-xl object-cover"
6060
loading="lazy"
6161
/>
62+
{:else}
63+
<div
64+
class="mb-4 flex aspect-[5/3] w-full items-center justify-center rounded-xl bg-gradient-to-br from-zinc-100 to-zinc-200"
65+
>
66+
<span class="font-[JetBrains_Mono,monospace] text-sm font-medium text-zinc-400">
67+
No Image
68+
</span>
69+
</div>
6270
{/if}
6371
<h2 class="mb-2 font-semibold transition-colors group-hover:text-primary">
6472
{article.title}
@@ -82,7 +90,7 @@
8290
</div>
8391

8492
{#if articles.length > itemsPerPage}
85-
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-2">
93+
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
8694
{#if currentPage > 1}
8795
<a
8896
href={pageUrl(currentPage - 1)}
@@ -98,7 +106,7 @@
98106
</span>
99107
{/if}
100108

101-
<div class="flex flex-wrap items-center justify-center gap-1">
109+
<div class="flex flex-1 flex-wrap items-center justify-center gap-1 sm:flex-initial">
102110
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as pageNum (pageNum)}
103111
{#if totalPages <= 7 || pageNum === 1 || pageNum === totalPages || Math.abs(pageNum - currentPage) <= 1}
104112
<a

‎src/routes/(site)/articles/[slug]/+page.server.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { getPublicArticle, getPublicRelatedArticles } from "$lib/data/public/index.remote";
2+
import type { PageServerLoad } from "./$types";
3+
4+
export const load: PageServerLoad = async ({ params }) => {
5+
const article = await getPublicArticle(params.slug);
6+
const relatedArticles = article
7+
? await getPublicRelatedArticles({
8+
articleId: article.id,
9+
authorId: article.authorId,
10+
limit: 3,
11+
})
12+
: [];
13+
14+
return { article, relatedArticles };
15+
};

‎src/routes/(site)/articles/[slug]/+page.svelte‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
<script lang="ts">
2-
import { page } from "$app/state";
32
import Markdown from "$lib/components/Markdown.svelte";
4-
import { getPublicArticle, getPublicRelatedArticles } from "$lib/data/public/index.remote";
3+
import type { PageData } from "./$types";
54
6-
const article = await getPublicArticle(page.params.slug ?? "");
7-
const relatedArticles = article
8-
? await getPublicRelatedArticles({
9-
articleId: article.id,
10-
authorId: article.authorId,
11-
limit: 3,
12-
})
13-
: [];
5+
const { data }: { data: PageData } = $props();
6+
const { article, relatedArticles } = data;
147
</script>
158

169
<svelte:head>

‎src/routes/(site)/members/+page.server.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { getPublicMembers } from "$lib/data/public/index.remote";
2+
import type { PageServerLoad } from "./$types";
3+
4+
export const load: PageServerLoad = async ({ url }) => {
5+
const members = await getPublicMembers();
6+
const currentPage = Number(url.searchParams.get("page")) || 1;
7+
8+
return {
9+
members,
10+
currentPage,
11+
};
12+
};

‎src/routes/(site)/members/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
</div>
8080

8181
{#if members.length > itemsPerPage}
82-
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-2">
82+
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
8383
{#if currentPage > 1}
8484
<a
8585
href={pageUrl(currentPage - 1)}
@@ -95,7 +95,7 @@
9595
</span>
9696
{/if}
9797

98-
<div class="flex flex-wrap items-center justify-center gap-1">
98+
<div class="flex flex-1 flex-wrap items-center justify-center gap-1 sm:flex-initial">
9999
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as pageNum (pageNum)}
100100
{#if totalPages <= 7 || pageNum === 1 || pageNum === totalPages || Math.abs(pageNum - currentPage) <= 1}
101101
<a

‎src/routes/(site)/members/[slug]/+page.server.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { getPublicMember } from "$lib/data/public/index.remote";
2+
import type { PageServerLoad } from "./$types";
3+
4+
export const load: PageServerLoad = async ({ params }) => {
5+
const member = await getPublicMember(params.slug);
6+
return { member };
7+
};

‎src/routes/(site)/members/[slug]/+page.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script lang="ts">
2-
import { page } from "$app/state";
32
import Markdown from "$lib/components/Markdown.svelte";
4-
import { getPublicMember } from "$lib/data/public/index.remote";
3+
import type { PageData } from "./$types";
54
6-
const member = await getPublicMember(page.params.slug ?? "");
5+
const { data }: { data: PageData } = $props();
6+
const { member } = data;
77
</script>
88

99
<svelte:head>

0 commit comments

Comments
 (0)