update readme

gusibi · Nov 2, 2024 · f2bbe62 · f2bbe62
1 parent 5ecb476
commit f2bbe62
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 109 deletions.
diff --git a/image-1.png b/image-1.png
diff --git a/image-10.png b/image-10.png
diff --git a/image-11.png b/image-11.png
diff --git a/image-2.png b/image-2.png
diff --git a/image-3.png b/image-3.png
diff --git a/image-4.png b/image-4.png
diff --git a/image-5.png b/image-5.png
diff --git a/image-6.png b/image-6.png
diff --git a/image-7.png b/image-7.png
diff --git a/image-8.png b/image-8.png
diff --git a/image-9.png b/image-9.png
diff --git a/readme-zh.md b/readme-zh.md
@@ -0,0 +1,114 @@
+# Path Meme
+
+[English](./readme.md) | 简体中文
+
+
+## 简介
+
+Path Meme 是一个简洁、现代的博客系统，灵感来源于 Path 应用的用户界面。它使用 GitHub Issues 作为内容管理系统，使用 Cloudflare Pages 进行静态网站托管。这个系统提供了一个时间线式的博客展示，支持 Markdown 渲染、标签分类、反应统计等功能。
+
+**项目链接：**
+- 代码仓库：[https://github.com/gusibi/path-momo-web](https://github.com/gusibi/path-momo-web)
+- 在线演示：[https://momo.gusibi.mobi](https://momo.gusibi.mobi)
+
+![项目预览](image-10.png)
+
+## 特性
+
+- ✨ 使用 GitHub Issues 作为 CMS
+- 💬 同步 GitHub Issues 评论作为博客评论
+- 🔐 支持使用 Github 账号登录
+- 🗄️ 集成 Supabase
+- ⏱️ 时间线式的博客展示
+- 📝 Markdown 内容渲染
+- 🏷️ 标签分类系统
+- 👍 GitHub 反应（Reactions）统计
+- 🌙 夜间模式
+- 📱 响应式设计
+
+## 使用指南
+
+### 前提条件
+
+- GitHub 账号
+- Cloudflare 账号
+- Supabase 账号
+- 基本的命令行操作知识
+
+### 部署步骤
+
+1. **Fork 项目**
+   - 登录 GitHub 账号
+   - 点击右上角的 "Fork" 按钮
+
+2. **配置 Cloudflare Pages**
+   - 登录 Cloudflare 账号
+   - 进入 "Workers & Pages"
+   - 选择 "Create application" -> "Pages"
+   - 连接 GitHub 并选择已 Fork 的项目
+   - 配置部署命令和目录
+
+   ![Cloudflare Pages 配置](image-1.png)
+
+3. **配置 Supabase**
+   - 创建 Supabase 项目
+   - 启用 GitHub 登录
+   - 配置 OAuth 回调 URL
+
+   ![Supabase GitHub 配置](image-3.png)
+   ![Supabase 回调 URL](image-4.png)
+
+4. **配置 GitHub OAuth**
+   - 访问 GitHub 开发者设置：https://github.com/settings/developers
+   - 创建新的 OAuth App
+   - 设置回调 URL 和主页 URL
+
+   ![GitHub OAuth 配置](image-5.png)
+
+5. **配置环境变量**
+   - 在 Cloudflare Pages 设置中添加环境变量：
+     - `SUPABASE_URL`
+     - `SUPABASE_KEY`
+
+   ![Cloudflare 环境变量](image-7.png)
+
+### 本地开发
+
+```bash
+git clone https://github.com/gusibi/path-meme-web.git
+cd path-meme-web
+npm install
+npm run dev
+```
+
+## 配置参数
+
+| 参数 | 说明 | 配置方式 | 配置位置 |
+|------|------|----------|----------|
+| 站点地址 | 你的站点 URL 或自定义域名 | 环境变量或配置文件 | `SITE_URL` 或 `nuxt.config.ts` |
+| 站点名称 | 导航栏显示的网站名称 | 配置文件 | `nuxt.config.ts` 中的 `siteTitle` |
+| 站点描述 | 网站的描述信息 | 配置文件 | `nuxt.config.ts` 中的 `siteDescription` |
+| 仓库用户名 | GitHub 用户名 | 环境变量或配置文件 | `REPO_OWNER` 或 `nuxt.config.ts` |
+| 仓库名称 | GitHub 仓库名 | 环境变量或配置文件 | `REPO_NAME` 或 `nuxt.config.ts` |
+
+## 故障排除
+
+- **博客文章未显示**
+  - 检查 Cloudflare Worker 的日志
+  - 确认 API 请求是否成功
+
+- **样式未正确加载**
+  - 检查 Cloudflare Pages 的部署日志
+  - 确认静态资源是否正确上传
+
+- **登录问题**
+  - 验证 GitHub OAuth 配置是否正确
+  - 检查 Supabase 设置是否完整
+
+## 贡献指南
+
+欢迎提交 Pull Requests 来改进项目。对于重大更改，请先创建 Issue 讨论你想要改变的内容。
+
+## 许可证
+
+本项目采用 MIT 许可证。详情请参阅 [LICENSE](LICENSE) 文件。
diff --git a/readme.md b/readme.md
@@ -1,131 +1,113 @@
 # Path Meme
 
-## 简介
+[简体中文](./readme-zh.md) | English
+
+## Introduction
+
+Path Meme is a clean, modern blogging system inspired by the Path app's user interface. It uses GitHub Issues as a content management system, provides API services through Cloudflare Workers, and uses Cloudflare Pages for static website hosting. The system offers a timeline-style blog display with features including Markdown rendering, tag categorization, and reaction statistics.
+
+**Project Links:**
+- Repository: [https://github.com/gusibi/path-momo-web](https://github.com/gusibi/path-momo-web)
+- Demo: [https://momo.gusibi.mobi](https://momo.gusibi.mobi)
 
-Path Meme 是一个简洁、现代的博客系统，灵感来源于 Path 应用的用户界面。它使用 GitHub Issues 作为内容管理系统，通过 Cloudflare Workers 提供 API 服务，并使用 Cloudflare Pages 进行静态网站托管。这个系统提供了一个时间线式的博客展示，支持 Markdown 渲染、标签分类、反应统计等功能。
+![Project Preview](image-10.png)
 
-项目地址: [https://github.com/gusibi/path-momo-web](https://github.com/gusibi/path-momo-web)
-demo: [https://momo.gusibi.mobi](https://momo.gusibi.mobi)
+## Features
 
-## 特性
+- ✨ GitHub Issues as CMS
+- 💬 GitHub Issues comments synchronization
+- 🔐 GitHub account authentication
+- 🗄️ Supabase integration
+- ⏱️ Timeline-style blog display
+- 📝 Markdown content rendering
+- 🏷️ Tag categorization system
+- 👍 GitHub reactions statistics
+- 🌙 Dark mode
+- 📱 Responsive design
 
-- 使用 GitHub Issues 作为 CMS
-- 时间线式的博客展示
-- Markdown 内容渲染
-- 标签分类系统
-- GitHub 反应（Reactions）统计
-- 夜间模式
-- 响应式设计
+## Getting Started
 
-![alt text](image.png)
+### Prerequisites
 
-## 如何使用
+- GitHub account
+- Cloudflare account
+- Supabase account
+- Basic command line knowledge
 
-### 前提条件
+### Deployment Steps
 
-- GitHub 账号
-- Cloudflare 账号
-- 基本的命令行操作知识
+1. **Fork the Project**
+   - Log into your GitHub account
+   - Click the "Fork" button in the top right corner
 
-### 详细步骤
+2. **Configure Cloudflare Pages**
+   - Log into your Cloudflare account
+   - Navigate to "Workers & Pages"
+   - Select "Create application" -> "Pages"
+   - Connect GitHub and select your forked project
+   - Configure deployment commands and directory
+
+   ![Cloudflare Pages Configuration](image-1.png)
 
-1. **Fork 此项目**
+3. **Set up Supabase**
+   - Create a Supabase project
+   - Enable GitHub authentication
+   - Configure OAuth callback URL
+
+   ![Supabase GitHub Configuration](image-3.png)
+   ![Supabase Callback URL](image-4.png)
 
-   a. 登录你的 GitHub 账号
-   b. 点击右上角的 "fork" 图标
+4. **Configure GitHub OAuth**
+   - Go to GitHub developer settings: https://github.com/settings/developers
+   - Create a new OAuth App
+   - Set callback URL and homepage URL
+
+   ![GitHub OAuth Configuration](image-5.png)
 
+5. **Set Environment Variables**
+   - Add environment variables in Cloudflare Pages settings:
+     - `SUPABASE_URL`
+     - `SUPABASE_KEY`
+
+   ![Cloudflare Environment Variables](image-7.png)
 
-2. **设置 Cloudflare Worker**
-    此步骤的目的是创建一个 Cloudflare worker 作为 后端api 使用
+### Local Development
 
-   a. 登录 Cloudflare 账号
-   b. 进入 "Workers" 页面
-   c. 点击 "Create a Worker"，可以起名叫 path-momo-api
-   d. 将 `worker/index.js` 中的代码粘贴到编辑器中
-   e. 点击 "Save and Deploy"
-   f. 此时，你的 worker 已经创建成功，并且会自动生成一个 worker 的 url，记下这个 url，后面会用到，访问这个api 会报错，因为关键的变量还没有配置
-   格式类似与 `https://{your-worker-path}.workers.dev/api/blog-posts`
+```bash
+git clone https://github.com/gusibi/path-meme-web.git
+cd path-meme-web
+npm install
+npm run dev
+```
 
-3. **配置 GitHub Personal Access Token**
+## Configuration Parameters
 
-   a. 在 GitHub 中，进入 Settings > Developer settings > Personal access tokens
-   b. 点击 "Generate new token"
-   c. 给 token 一个描述性的名称
-   d. 选择 "repo" 范围
-   e. 点击 "Generate token"
-   f. 复制生成的 token
+| Parameter | Description | Configuration Method | Location |
+|-----------|-------------|---------------------|----------|
+| Site URL | Your site URL or custom domain | Environment variable or config file | `SITE_URL` or `nuxt.config.ts` |
+| Site Name | Website name shown in navigation bar | Config file | `siteTitle` in `nuxt.config.ts` |
+| Site Description | Website description | Config file | `siteDescription` in `nuxt.config.ts` |
+| Repository Owner | GitHub username | Environment variable or config file | `REPO_OWNER` or `nuxt.config.ts` |
+| Repository Name | GitHub repository name | Environment variable or config file | `REPO_NAME` or `nuxt.config.ts` |
 
-4. **更新 Cloudflare Worker**
+## Troubleshooting
 
-   a. 回到刚才创建的 worker，进入设置页面 > 选择变量，添加以下变量
-   b. `GITHUB_TOKEN`，值为你刚刚生成的 GitHub Personal Access Token
-   c. `GITHUB_OWNER`，值为你 GitHub 用户名
-   d. `GITHUB_REPOGIT`，值为你需要使用的 repo
-   e. 点击 "部署"
-   f. 部署完成后，第二步不能访问的 api 就可以访问了
+- **Blog Posts Not Displaying**
+  - Check Cloudflare Worker logs
+  - Verify API request success
 
+- **Styles Not Loading**
+  - Review Cloudflare Pages deployment logs
+  - Confirm static assets are properly uploaded
 
-5. **克隆仓库到本地**
-
-   打开终端，运行以下命令：
-
-   ```bash
-   git clone https://github.com/你的用户名/path-style-blog.git
-   cd path-style-blog
-   ```
-
-6. **更新前端代码中的 API URL**
-
-   在 `public/script.js` 中，将 fetch 请求的 URL 更新为你的 Cloudflare Worker 的 URL。
-
-7. **提交并推送更改**
-
-    ```bash
-    git add .
-    git commit -m "update api url"
-    git push origin main
-    ```
-
-
-8. **设置 Cloudflare Pages**
-
-   a. 在 Cloudflare 中，进入 "Pages" 页面
-   b. 点击 "Create a project"
-   c. 选择 "Connect to Git"
-   d. 选择你的 GitHub 仓库
-   e. 在构建设置中，将构建命令留空，将构建输出目录设置为 "public"
-   f. 点击 "Save and Deploy"
-
-
-9. **创建博客文章**
-
-    a. 在你第四步选择的 GitHub 仓库中，进入 "Issues" 标签页
-    b. 点击 "New issue"
-    c. 使用 Markdown 格式编写你的博客文章
-    d. 添加标签（可选）
-    e. 点击 "Submit new issue"
-
-10. **访问你的博客**
-
-    打开 Cloudflare Pages 为你的项目提供的 URL，你应该能看到你的博客了。
-
-## 自定义
-
-- **Banner 图片**: 将你的 banner 图片添加到 `public` 文件夹，并在 `index.html` 中更新图片路径。
-- **头像**: 同样，将你的头像图片添加到 `public` 文件夹，并在 `index.html` 中更新图片路径。
-- **样式**: 你可以通过修改 `styles.css` 来自定义博客的外观。
-- **功能**: 如果你想添加新功能，可以修改 `script.js` 和 Cloudflare Worker 中的 `index.js`。
-
-## 故障排除
-
-- 如果博客文章没有显示，检查 Cloudflare Worker 的日志以确保 API 请求成功。
-- 确保你的 GitHub Personal Access Token 有正确的权限并且没有过期。
-- 如果样式没有应用，检查 Cloudflare Pages 的部署日志，确保所有文件都被正确上传。
-
-## 贡献
-
-欢迎提交 Pull Requests 来改进这个项目。对于重大更改，请先开一个 issue 讨论你想要改变的内容。
-
-## 许可
-
-这个项目使用 MIT 许可证。详情请见 [LICENSE](LICENSE) 文件。
+- **Login Issues**
+  - Verify GitHub OAuth configuration
+  - Check Supabase settings completeness
+
+## Contributing
+
+Pull requests are welcome to improve the project. For major changes, please open an issue first to discuss what you would like to change.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.