refactor: move out of sites data (#42)

* refactor: move out of sites data * docs: update add site guide * chore: format * docs: follow format
liruifengv · Apr 1, 2024 · 152fddd · 152fddd
1 parent df8df31
commit 152fddd
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@
 | `pnpm run preview`         | 本地预览     |
 
 ## 添加 Showcase
+
 用 Astro 或 Starlight 构建过中文网站？欢迎添加 Showcase!
 
 1. Fork 此仓库，在你的[本地运行](#-commands)。
@@ -25,20 +26,21 @@
     - 你网站域名命名的 `.png` 格式，例如 `example.com.png`。
     - 图片尺寸为 800 × 450 像素。
 
-3. 在 `src/components/showcase-sites.astro` 为你的网站添加新的一条。
+3. 在 `src/sites.ts` 为你的网站添加新的一条。
     - 新的网站必须放在已存在的列表最后。
     - `title` 属性是必须的，它是你的网站的名称。
     - `href` 属性是必须的，它是你的网站的 URL。
     - `thumbnail` 属性是必须的，它是第 2 步中添加的截图文件名。  
 
 ```diff
-  <Card title="Example" href="https://example.com" thumbnail="example.com.png" />
-  <Card title="Last Example" href="https://example.org" thumbnail="example.org.png" />
-+ <Card title="你的网站" href="https://example.com" thumbnail="example.com.png" />
-</FluidGrid>
+const sites: Site[] = [
+  // ...
+  { title: "Example", href: "https://example.com", thumbnail: "example.com.png" },
+  { title: "Last Example", href: "https://example.org", thumbnail: "example.org.png" },
++ { title: "你的网站", href: "https://example.com", thumbnail: "example.com.png" },
+]
 ```
 
 4. 创建一个 PR 到本仓库。
 
 [![Deployed on Zeabur](https://zeabur.com/deployed-on-zeabur-dark.svg)](https://zeabur.com?referralCode=liruifengv&utm_source=liruifengv&utm_campaign=oss)
-
diff --git a/src/components/showcase-sites.astro b/src/components/showcase-sites.astro
@@ -1,35 +1,10 @@
 ---
 import FluidGrid from "./fluid-grid.astro";
 import Card from "./showcase-card.astro";
+
+import { sites } from "../sites";
 ---
 
 <FluidGrid minColumnWidth="18rem">
-	<Card title="liruifengv.com" href="https://liruifengv.com" thumbnail="liruifengv.com.png" />
-	<Card title="captainofphb.me" href="https://captainofphb.me" thumbnail="captainofphb.me.png" />
-  <Card title="Sehnsucht" href="https://blog.sehnsucht.top" thumbnail="blog.sehnsucht.top.png" />
-  <Card title="Kai's blog" href="https://kaiyi.cool/" thumbnail="kaiyi.cool.png" />
-  <Card title="Mikan's Home" href="https://blog.bangdream.moe" thumbnail="blog.bangdream.moe.png" />
-  <Card title="yuhang.ch" href="https://yuhang.ch" thumbnail="yuhang.ch.png" />
-	<Card title="blog.pakchoi.opscat.cn" href="https://blog.pakchoi.opscat.cn" thumbnail="blog.pakchoi.opscat.cn.png" />
-  <Card title="blog.asyncx.top" href="https://blog.asyncx.top" thumbnail="blog.asyncx.top.png" />
-  <Card title="四畳半のへや" href="https://blog.moeyua.com" thumbnail="blog.moeyua.com.png" />
-  <Card title='Bruce の Site' href="https://brucesong.xyz" thumbnail="brucesong.xyz.png" />
-  <Card title="左子祯" href="https://zuozizhen.com" thumbnail="zuozizhen.com.png" />
-  <Card title="devlike.top" href="https://devlike.top" thumbnail="devlike.top.png" />
-  <Card title="Licodeao's Blog" href="https://licodeao.netlify.app" thumbnail="licodeao.netlify.app.png" />
-  <Card title="lolo洛明" href='https://blog.luoming.space' thumbnail='blog.luoming.space.png' />
-  <Card title="Volare's blog" href="https://hanzhen.wang" thumbnail="hanzhen.wang.png" />
-  <Card title="超级小镇 · 刘俊" href="https://super.town" thumbnail="super.town.png" />
-  <Card title="面条实验室" href="https://mt.ci" thumbnail="mt.ci.png" />
-  <Card title="chi.miantiao.me" href="https://chi.miantiao.me" thumbnail="chi.miantiao.me.png" />
-  <Card title="huyikai.xyz" href="https://huyikai.xyz" thumbnail="huyikai.xyz.png" />
-  <Card title="File Renamer Online" href="https://renamer.forth.ink" thumbnail="renamer.forth.ink.png" />
-  <Card title="ssshooter.com" href="https://ssshooter.com" thumbnail="ssshooter.com.png" />
-  <Card title="JoeSay" href="https://joesay.pages.dev" thumbnail="joesay.pages.dev.png" />  
-  <Card title="小付同学的开发日常" href="https://blog.xiaozi.cc" thumbnail="blog.xiaozi.cc.png" />  
-  <Card title="Anime Garden" href="https://garden.onekuma.cn" thumbnail="garden.onekuma.cn.png" />
-  <Card title="龙场茶室" href="https://blog.peterchen97.cn" thumbnail="blog.peterchen97.cn.png" />
-  <Card title="人生現役" href="https://blog.tianpei.cool" thumbnail="blog.tianpei.cool.png" />
-  <Card title="Nin3's Blog" href="https://nin3-lee.netlify.app/" thumbnail="nin3-lee.netlify.app.png" />
-  <Card title="小羊molly" href="https://mollypan.tech" thumbnail="mollypan.tech.png" />
+  { sites.map(site => <Card title={site.title} href={site.href} thumbnail={site.thumbnail}></Card>) }
 </FluidGrid>
diff --git a/src/sites.ts b/src/sites.ts
@@ -0,0 +1,142 @@
+export interface Site {
+	title: string;
+
+	href: string;
+
+	thumbnail: string;
+}
+
+export const sites: Site[] = [
+	{
+		title: "liruifengv.com",
+		href: "https://liruifengv.com",
+		thumbnail: "liruifengv.com.png",
+	},
+	{
+		title: "captainofphb.me",
+		href: "https://captainofphb.me",
+		thumbnail: "captainofphb.me.png",
+	},
+	{
+		title: "Sehnsucht",
+		href: "https://blog.sehnsucht.top",
+		thumbnail: "blog.sehnsucht.top.png",
+	},
+	{
+		title: "Kai's blog",
+		href: "https://kaiyi.cool/",
+		thumbnail: "kaiyi.cool.png",
+	},
+	{
+		title: "Mikan's Home",
+		href: "https://blog.bangdream.moe",
+		thumbnail: "blog.bangdream.moe.png",
+	},
+	{ title: "yuhang.ch", href: "https://yuhang.ch", thumbnail: "yuhang.ch.png" },
+	{
+		title: "blog.pakchoi.opscat.cn",
+		href: "https://blog.pakchoi.opscat.cn",
+		thumbnail: "blog.pakchoi.opscat.cn.png",
+	},
+	{
+		title: "blog.asyncx.top",
+		href: "https://blog.asyncx.top",
+		thumbnail: "blog.asyncx.top.png",
+	},
+	{
+		title: "四畳半のへや",
+		href: "https://blog.moeyua.com",
+		thumbnail: "blog.moeyua.com.png",
+	},
+	{
+		title: "Bruce の Site",
+		href: "https://brucesong.xyz",
+		thumbnail: "brucesong.xyz.png",
+	},
+	{
+		title: "左子祯",
+		href: "https://zuozizhen.com",
+		thumbnail: "zuozizhen.com.png",
+	},
+	{
+		title: "devlike.top",
+		href: "https://devlike.top",
+		thumbnail: "devlike.top.png",
+	},
+	{
+		title: "Licodeao's Blog",
+		href: "https://licodeao.netlify.app",
+		thumbnail: "licodeao.netlify.app.png",
+	},
+	{
+		title: "lolo洛明",
+		href: "https://blog.luoming.space",
+		thumbnail: "blog.luoming.space.png",
+	},
+	{
+		title: "Volare's blog",
+		href: "https://hanzhen.wang",
+		thumbnail: "hanzhen.wang.png",
+	},
+	{
+		title: "超级小镇 · 刘俊",
+		href: "https://super.town",
+		thumbnail: "super.town.png",
+	},
+	{ title: "面条实验室", href: "https://mt.ci", thumbnail: "mt.ci.png" },
+	{
+		title: "chi.miantiao.me",
+		href: "https://chi.miantiao.me",
+		thumbnail: "chi.miantiao.me.png",
+	},
+	{
+		title: "huyikai.xyz",
+		href: "https://huyikai.xyz",
+		thumbnail: "huyikai.xyz.png",
+	},
+	{
+		title: "File Renamer Online",
+		href: "https://renamer.forth.ink",
+		thumbnail: "renamer.forth.ink.png",
+	},
+	{
+		title: "ssshooter.com",
+		href: "https://ssshooter.com",
+		thumbnail: "ssshooter.com.png",
+	},
+	{
+		title: "JoeSay",
+		href: "https://joesay.pages.dev",
+		thumbnail: "joesay.pages.dev.png",
+	},
+	{
+		title: "小付同学的开发日常",
+		href: "https://blog.xiaozi.cc",
+		thumbnail: "blog.xiaozi.cc.png",
+	},
+	{
+		title: "Anime Garden",
+		href: "https://garden.onekuma.cn",
+		thumbnail: "garden.onekuma.cn.png",
+	},
+	{
+		title: "龙场茶室",
+		href: "https://blog.peterchen97.cn",
+		thumbnail: "blog.peterchen97.cn.png",
+	},
+	{
+		title: "人生現役",
+		href: "https://blog.tianpei.cool",
+		thumbnail: "blog.tianpei.cool.png",
+	},
+	{
+		title: "Nin3's Blog",
+		href: "https://nin3-lee.netlify.app/",
+		thumbnail: "nin3-lee.netlify.app.png",
+	},
+	{
+		title: "小羊molly",
+		href: "https://mollypan.tech",
+		thumbnail: "mollypan.tech.png",
+	},
+];