chore(project): copy from blog

Author: syfxlin

.env.example

@@ -1,5 +1,5 @@
 #COLINE_ANALYZE=true
-NEXT_PUBLIC_COLINE_LANGUAGE=zh_Hans
+NEXT_PUBLIC_COLINE_LANGUAGE=zh-Hans
 NEXT_PUBLIC_COLINE_GOOGLE_ANALYTICS=G-xxxxxxxxxx
 NEXT_PUBLIC_COLINE_ARTALK_SITE_NAME=Blog
 NEXT_PUBLIC_COLINE_ARTALK_SERVER_URL=https://artalk.example.com

README.md

@@ -1,5 +1,52 @@
-# Otstar's Blog
+# Coline - 轻快、简洁、优雅的 Next.js 模板
 
-Otstar Lin 的个人博客，基于 Gatsby 开发。
+Coline（**co**nnect, **line**）是一个基于 Next.js App Router 开发的博客模板，建立在轻快与简洁的设计理念上，摒弃花里胡哨的界面，专注于内容创作。
 
-链接：https://blog.ixk.me
+## 设计理念
+
+- **简洁清新**：人的注意力是有限的，为了使读者能聚焦于内容之上。Coline 仅保留了少量色彩，大范围使用中性色，鲜明的色彩仅用于特殊场景，同时任何与内容无关的信息都不应该出现。
+- **轻量快速**：人的容忍度是有限的，通常一个网站如果不能在 3 秒内加载出大部分内容，读者就会失去等待的耐心。Coline 在 LightHouse 中表现优秀，Performance > 98%，Best practice 100%。
+- **SEO 100%**：网站不仅要给人类看，还需要给机器看。Coline 在 LightHouse 中 SEO 评分达到了 100%。同时也支持了 RSS，使读者能够使用 RSS 阅读器订阅博客。
+- **无障碍支持**：不是所有人都是完美的，不应该歧视任何不完美的人。Coline 尽可能降低障碍人士使用难度，在 LightHouse 中 Accessibility > 90%。
+- **写作友好**：网站的内容是作者产出的，如果不能有良好的写作体验，那么其他都是泡沫。Coline 集成了 Keystatic CMS，支持可视化编辑，仅需 GitHub 与 Vercel 即可启动一个 Coline 站点。
+
+## 技术栈
+
+- Next.js 14 (App Router)
+- Vanilla Extract
+- Keystatic
+- Artalk
+- Fuse.js
+
+## 使用方式
+
+1. 使用 create-next-app 初始化站点文件
+
+```shell
+pnpm dlx create-next-app --example https://github.com/syfxlin/blog
+```
+
+2. 配置 env 文件
+
+```shell
+cp .env.example .env
+```
+
+> - **NEXT_PUBLIC_COLINE_LANGUAGE**：配置站点语言，支持 zh-Hans、zh-Hant、en
+> - **NEXT_PUBLIC_COLINE_GOOGLE_ANALYTICS**：配置 Google Analysis
+> - **NEXT_PUBLIC_COLINE_ARTALK_SITE_NAME** 和 **NEXT_PUBLIC_COLINE_ARTALK_SERVER_URL** 配置 [Artalk](https://github.com/ArtalkJS/Artalk)
+> - **NEXT_PUBLIC_COLINE_GITHUB_REPO**：配置站点仓库的地址
+> - **COLINE_GITHUB_TOKEN**：配置你的 GitHub Token，用于 Projects 页面，建议只给 public_repo 权限
+> - **KEYSTATIC_SECRET**、**KEYSTATIC_GITHUB_CLIENT_ID**、**KEYSTATIC_GITHUB_CLIENT_SECRET**、**NEXT_PUBLIC_KEYSTATIC_GITHUB_APP_SLUG** 具体可以看 [Keystatic 的文档](https://keystatic.com/docs/github-mode)
+
+4. 启动站点
+
+```shell
+pnpm dev
+```
+
+5. 构建站点
+
+``shell
+pnpm build
+``

depker.config.ts

@@ -1,15 +1,24 @@
-import { depker, docker, nextjs } from "https://raw.githubusercontent.com/syfxlin/depker/master/mod.ts";
+import { depker, nextjs } from "https://raw.githubusercontent.com/syfxlin/depker/master/mod.ts";
 
 const app = depker();
 
-app.master(docker({ type: "https" }));
-app.runner(docker({ type: "local" }));
-
 app.service(
   nextjs({
     name: "blog",
     domain: "blog.ixk.me",
     tls: true,
+    secrets: {
+      NEXT_PUBLIC_COLINE_LANGUAGE: "@COLINE_LANGUAGE",
+      NEXT_PUBLIC_COLINE_GOOGLE_ANALYTICS: "@COLINE_GOOGLE_ANALYTICS",
+      NEXT_PUBLIC_COLINE_ARTALK_SITE_NAME: "@COLINE_ARTALK_SITE_NAME",
+      NEXT_PUBLIC_COLINE_ARTALK_SERVER_URL: "@COLINE_ARTALK_SERVER_URL",
+      NEXT_PUBLIC_COLINE_GITHUB_REPO: "@COLINE_GITHUB_REPO",
+      COLINE_GITHUB_TOKEN: "@COLINE_GITHUB_TOKEN",
+      KEYSTATIC_SECRET: "@KEYSTATIC_SECRET",
+      KEYSTATIC_GITHUB_CLIENT_ID: "@KEYSTATIC_GITHUB_CLIENT_ID",
+      KEYSTATIC_GITHUB_CLIENT_SECRET: "@KEYSTATIC_GITHUB_CLIENT_SECRET",
+      NEXT_PUBLIC_KEYSTATIC_GITHUB_APP_SLUG: "@KEYSTATIC_GITHUB_APP_SLUG",
+    },
   }),
 );
 

public/content/config/friends.yaml

@@ -1,183 +1,20 @@
 display: top
 links:
-  - name: Pasi's Studio
-    link: https://pasi.cat/
-    avatar: /image/config/friends/links/0/avatar.640x640.jpg
-    author: Pasi
-    description: 404 Not Found
-  - name: 天空·边界
-    link: https://liyin.date
-    avatar: /image/config/friends/links/1/avatar.160x160.png
-    author: 立音喵
-    description: 用心探知天空的边界
-  - name: 晴耕物语博客
-    link: https://www.sayxw.top
-    avatar: /image/config/friends/links/2/avatar.120x120.png
-    description: 晴天丶故事丶雨声丶平静的心。
-  - name: Zavier's Blog
-    link: https://zavierlab.com
-    avatar: /image/config/friends/links/3/avatar.750x750.png
-    author: Zavier
-    description: 平淡就好
-  - name: 蠢黑通行
-    link: https://blackyau.cc
-    avatar: /image/config/friends/links/4/avatar.360x354.png
-    author: 蠢黑通行
-  - name: 下午茶的轻音部
-    link: https://www.myeriri.com/
-    avatar: /image/config/friends/links/5/avatar.512x512.png
-    author: Haibara
-  - name: 恶魔菌の记事簿
-    link: https://meow3.family.blog
-    avatar: /image/config/friends/links/6/avatar.661x661.png
-    author: 恶魔菌
-    description: 半文艺、半动漫的二次元美少女的涂鸦簿！
-  - name: Zohar's Blog
-    link: https://www.iwch.me
-    avatar: /image/config/friends/links/7/avatar.640x640.png
-    author: Zohar
-    description: The Most Important Thing in My Life is Freedom
-  - name: 萨摩公园
-    link: https://i-meto.com
-    avatar: /image/config/friends/links/8/avatar.256x256.png
-    author: Meto
-    description: 我就是我，不食人间烟火
-  - name: 奶冰の冷藏室
-    link: https://milkice.me
-    avatar: /image/config/friends/links/9/avatar.256x256.png
-    author: Milkice
-    description: Maybe a way to explore the world?
-  - name: KeJun's Blog
-    link: https://kejun.me
-    avatar: /image/config/friends/links/10/avatar.500x500.png
-    author: KeJun
-    description: 二次元智障
-  - name: 梦之翼
-    link: https://fly.moe
-    avatar: /image/config/friends/links/11/avatar.140x140.png
-    author: Fly3949
-    description: Flyの宅基地
-  - name: Elepover's Blog
-    link: https://daily.elepover.com
-    avatar: /image/config/friends/links/12/avatar.700x700.png
-    author: Elepover
-    description: 没有人能阻挡，我们与生俱来对自由的渴望
-  - name: 无垠
-    link: https://flyhigher.top
-    avatar: /image/config/friends/links/13/avatar.270x270.png
-    author: Axton
-    description: 飞翔的天空无限大
-  - name: 苏卡卡的有底洞
-    link: https://skk.moe
-    avatar: /image/config/friends/links/14/avatar.128x128.png
-    author: Sukka
-    description: 「童话只美在真实却从不续写」
-  - name: ⑨BIE
-    link: https://9bie.org
-    avatar: /image/config/friends/links/15/avatar.800x800.jpg
-    author: ⑨BIE
-    description: 伪技术宅的谜之地
-  - name: Re:Vigorous Pro
-    link: https://www.wevg.org
-    avatar: /image/config/friends/links/16/avatar.959x960.jpg
-    author: Edison Jwa
-    description: Hi, nice to meet you.这是一个从零开始的世界
-  - name: Indexyz's Blog
-    link: https://blog.indexyz.me
-    avatar: /image/config/friends/links/17/avatar.640x640.jpg
-    author: Indexyz
-    description: Sharing light, even in death.
-  - name: 黄蜂说
-    link: https://www.sjy.im
-    avatar: /image/config/friends/links/18/avatar.530x530.png
-    author: a.k.a. 小黄蜂
-    description: 一名互联网从业者的自留地，分享自己的所见所得，自认为过程比结果重要。
-  - name: NEVER迷の小窝
-    link: https://blog.never.pet
-    avatar: /image/config/friends/links/19/avatar.512x388.png
-    author: NeverBehave
-    description: 喵喵喵～
-  - name: idealclover
-    link: https://idealclover.top
-    avatar: /image/config/friends/links/20/avatar.320x320.jpg
-    author: idealclover
-    description: 翠翠酱的个人网站
-  - name: 罗炜杰个人博客
-    link: https://www.lwjppz.cn
-    avatar: /image/config/friends/links/21/avatar.700x700.jpg
-    author: 不必谁懂我
-    description: 记录写代码的苦逼日子
-  - name: 小竹's Blog
-    link: https://blog.justforlxz.com
-    avatar: /image/config/friends/links/22/avatar.400x400.png
-    author: 小竹
-    description: 永远不要停止思考
-  - name: 辣椒の酱
-    link: https://removeif.github.io
-    avatar: /image/config/friends/links/23/avatar.640x638.jpg
-    author: 辣椒の酱
-    description: 后端开发，技术分享
-  - name: 蝉時雨
-    link: https://chanshiyu.com
-    avatar: /image/config/friends/links/24/avatar.402x402.jpg
-    author: 蝉時雨
-    description: 蝉鸣如雨 花宵道中
-  - name: Jing blog
-    link: https://jingine.com
-    avatar: /image/config/friends/links/25/avatar.1247x1280.png
-    author: Chris
-  - name: TonyHe
-    link: https://www.ouorz.com
-    avatar: /image/config/friends/links/26/avatar.960x960.jpg
-    author: TonyHe
-    description: Just A Poor Lifesinger
-  - name: Cyberspace of Swung
-    link: https://www.swung0x48.com
-    avatar: /image/config/friends/links/27/avatar.640x640.jpg
-    author: Swung0x48
-    description: Lost in cyberpunk.
-  - name: WenJie' Blog
-    link: https://wenjie.store
-    avatar: /image/config/friends/links/28/avatar.1893x1594.jpg
-    author: chenwenjie
-    description: 记录一些学习笔记、杂谈
-  - name: 蚊Blog
-    link: https://qwq.moe
-    avatar: /image/config/friends/links/29/avatar.640x640.png
-    author: 贫困の蚊子
-  - name: Cyris
-    link: https://cyris.moe
-    avatar: /image/config/friends/links/30/avatar.1558x1556.png
-    author: Cyris
-    description: 花如解笑还多事，石不能言最可人
-  - name: Cotpear
-    link: https://www.cotpear.com?utm_src=blog.ixk.me
-    avatar: /image/config/friends/links/31/avatar.1600x1600.jpg
-    author: 齊一和其團隊
-  - name: QWQAQ
-    link: https://qwqaq.com
-    avatar: /image/config/friends/links/32/avatar.640x640.png
-    author: qwqaq
-    description: 生命不止，折腾不息 ( ゜- ゜)
-  - name: OS0day
-    link: https://blog.os0day.cn
-    avatar: /image/config/friends/links/33/avatar.640x640.png
-    author: OS0day
-    description: 一位医疗行业的软件工程师
-  - name: 冰糕Luminous の 小窝
-    link: https://0m0.co
-    avatar: /image/config/friends/links/34/avatar.500x500.png
-    author: 冰糕Luminous
-lost_links:
-  - name: 周海棠啦
-    link: https://begonia98.github.io
-  - name: Viosey's Blog
-    link: https://blog.viosey.com
-  - name: neoFelhz's Blog
-    link: https://nfz.moe
-  - name: 诸葛小百科
-    link: https://www.xiaobaike.net/
-  - name: stackboom
-    link: http://stackboom.xin
-  - name: N0ts Blog
-    link: https://blog.n0ts.cn
+  - name: 个人主页
+    link: https://ixk.me
+    avatar: /image/config/friends/links/0/avatar.400x400.png
+    author: Otstar Lin
+    description: Otstar's Space的源码，个人主页。
+  - name: 青空之蓝
+    link: https://blog.ixk.me
+    avatar: /image/config/friends/links/1/avatar.400x400.png
+    author: Otstar Lin
+    description: 站在时光一端，回忆过往记忆。
+  - name: GitHub
+    link: https://github.com/syfxlin
+    avatar: /image/config/friends/links/2/avatar.400x400.png
+    author: Otstar Lin
+    description: >-
+      💻Coding / 🎉GuGuGu / 📖 Learning / 🚩 Open Source developer / 🐛 Bug
+      making machine
+lost_links: []

public/content/config/friends/content.mdoc

@@ -1,5 +0,0 @@
-欢迎交换友链呀 ~{% textAlign="center" %}
-
-以下是我的友链列表，列表随机排序，信息如果有变动，可以联系我进行更改。{% textAlign="center" %}
-
-申请友链请到 [友链申请](/links-application)，**先友后链**，不定期过滤阵亡名单。{% textAlign="center" %}

public/content/config/header.yaml

@@ -7,10 +7,6 @@ main:
     link: /links
     icon: ri:heart-line
     view: elastic
-  - title: 自述
-    link: /about
-    icon: ri:user-line
-    view: elastic
   - title: 归档
     link: /archives
     icon: ri:archive-line

public/content/config/home.yaml

@@ -1 +1 @@
-display: document
+display: articles

public/content/config/home/content.mdoc

@@ -1,19 +0,0 @@
-Hi👋，我是 Otstar Lin，也可以称呼为繁星🌟。
-
-我主要聚焦在 Spring Projects、Node.js、React.js、Rich Text Editor、CI/CD 相关的领域。对设计、艺术和交互很感兴趣，但没有系统研究过。
-
-热爱开源社区，但是长期以来总是在折腾自己无人问津的项目👀，最近才开始为开源项目做出贡献😶。
-
-喜欢在空闲的时间造点有趣的东西，想法很多💡，但基本都是挖坑不填🕳️，您可以在 [这里](/projects) 找到我的完整项目列表。
-
-除了编程之外，摄影、阅读、写文章也是我的爱好📝。我开始写博客是在 2017 年左右，博客逐渐成了我在互联网上的一块小天地☁️。这些年来写博客的朋友们越来越少了，或许我的博客也会在未来的某一天从互联网上消失吧⏳。
-
-博客最新的文章：
-
-{% articles /%}
-
-你可以在这里找到我：
-
-[GitHub](simple-icons:github$$https://github.com/syfxlin)    [Twitter](simple-icons:twitter$$https://twitter.com/syfxlin)    [Telegram](simple-icons:telegram$$https://t.me/otstar)    [QQ](simple-icons:tencentqq$$https://qm.qq.com/q/WwnAzRUC0U)    [Mail](simple-icons:maildotru$$mailto:[email protected])    [DouBan](simple-icons:douban$$https://www.douban.com/people/141694435)    [NetEase](ri:netease-cloud-music-line$$https://music.163.com/#/user/home?id=281301709)    [BiliBili](simple-icons:bilibili$$https://space.bilibili.com/16210802)
-
-如果您喜欢我的作品，请考虑在 [爱发电](carbon:lightning$$https://afdian.net/@syfxlin) 上赞助我，以保持它们的可持续发展。

public/content/config/seo.yaml

@@ -1,17 +1,15 @@
-link: https://blog.ixk.me
+link: https://coline.ixk.me
 logo: /image/config/seo/logo.400x400.jpg
-title: 青空之蓝
-subtitle: 站在时光一端，回忆过往记忆。
+title: Coline
+subtitle: 轻快、简洁、优雅的 Next.js 模板
 description: >-
-  青空之蓝（博客）- Otstar Lin (@syfxlin，繁星) 在互联网上的一片小天地，随便写点东西的地方。技术博客，以 Java
-  后端开发，前端开发相关内容为主。
-birthday: 2017-07-01T00:00
+  Coline（connect, line）是一个基于 Next.js App Router
+  开发的博客模板，建立在轻快与简洁的设计理念上，摒弃花里胡哨的界面，专注于内容创作。
+birthday: 2024-01-01T00:00
 keywords:
   - Otstar Lin
   - syfxlin
   - Blog
   - 博客
-  - Java
-  - JavaScript
-  - TypeScript
-  - Full Stack
+  - Next.js
+  - Next.js App Router