cici 0.1.1 → 0.2.0

package/.next/standalone/data/blog/async-action-in-redux.md

@@ -1,257 +0,0 @@
----
-title: 深入浅出Redux的异步Actions
-comments: true
-date: 2016-10-17 09:13:34
-updated: 2016-10-17 09:13:34
-tags: Redux
-categories: frontend
----
-
-Redux 是一个超棒的 state 容器，它几乎已经成为了 React 前端项目的必备 state 管理库，当然 Redux 可以用于任何应用 JavaScript 应用中，让我们看看这个很棒的库的代码情况吧。
-
-```
-	➜  src git:(master) ✗ pwd
-	/Users/ming/Codes/redux/src
-	➜  src git:(master) ✗ cloc .
-				 7 text files.
-				 7 unique files.
-				 0 files ignored.
-
-	http://cloc.sourceforge.net v 1.65  T=0.03 s (212.3 files/s, 18136.0 lines/s)
-	-------------------------------------------------------------------------------
-	Language                     files          blank        comment           code
-	-------------------------------------------------------------------------------
-	Javascript                       7             62            199            337
-	-------------------------------------------------------------------------------
-	SUM:                             7             62            199            337
-	-------------------------------------------------------------------------------
-```
-
-这么棒的东西， 其实就几百行代码而已，不到两个小时你就几乎可以阅读完了，当然要深入理解其理念，还是需要一些时间的，让我们慢慢来。
-
-### 基本
-
-```
-import { createStore } from 'redux'
-
-function counter(state = 0, action) {
-  switch (action.type) {
-  case 'INCREMENT':
-    return state + 1
-  case 'DECREMENT':
-    return state - 1
-  default:
-    return state
-  }
-}
-
-let store = createStore(counter)
-
-store.subscribe(() =>
-  console.log(store.getState())
-)
-store.dispatch({ type: 'INCREMENT' })
-// 1
-store.dispatch({ type: 'INCREMENT' })
-// 2
-store.dispatch({ type: 'DECREMENT' })
-```
-
-这就是一个很完整的基于 Redux 的 JavaScript 应用了, 我们可以看到这是一个 Counter, 这个 Counter 可以进行 INCREMENT, DECREMENT 操作。 这不是就是简单的观察者模式吗，有人可能会说，是的，其实就是一个简单的观察者模式。还有一些有经验的工程师可能会说，这代码完全没有办法重用和拓展啊，别急，我们慢慢来。
-
-让我们简单重构一下我们的代码吧:
-
-reducer.js
-
-```
-const initState = 0;
-
-export default function reducer(state = initState, action) {
-  switch (action.type) {
-  case 'INCREMENT':
-    return state + 1
-  case 'DECREMENT':
-    return state - 1
-  default:
-    return state
-  }
-}
-```
-
-actions.js
-
-```
-export function incr() {
-  return {
-    type: 'INCREMENT',
-  };
-}
-
-export function decr() {
-  return {
-    type: 'DECREMENT',
-  }
-}
-```
-
-main.js
-
-```
-import { createStore } from 'redux'
-
-let store = createStore(counter)
-store.subscribe(() =>
-  console.log(store.getState())
-)
-store.dispatch({ type: 'INCREMENT' })
-// 1
-store.dispatch({ type: 'INCREMENT' })
-// 2
-store.dispatch({ type: 'DECREMENT' })
-```
-这样是不是感觉熟悉了很多呢，很多时候，简单遵循一些原则，代码就好看很多，比如这里的单一责任原则(Single responsibility principle).
-
-从上面的代码可以看到，我们的 actions 全都是返回 plain object 的 function, 因为 store 只能 dispatch 纯的 Object, 而且携带这 type 属性。那么当我们有 actions 是的异步的怎么呢，比如我们有一个 ADD 的 action, 需要先去取到一个 value 然后才能进行添加操作，那么我们应该怎么做呢？
-
-### 异步 actions
-
-```
-function add(value) {
-  return {
-    type: 'ADD',
-    value,
-  }
-}
-
-function fetchValue() {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(2)
-    }, 1000)
-  })
-}
-
-function asyncAdd() {
-  return function(dispatch) {
-    fetchValue().then((val) => {
-      dispatch(add(val))
-    });
-  }
-}
-
-```
-
-可以看到，我们在 dispatch 这个 add action之前，需要先得到需要 add 的 value, 而这个 value 的获取是异步的。所以我需要 dispatch 的是 asyncAdd() 这个 action, 但是这个 action 返回不是一个 plain object, 而是一个 function, 那么我们怎么才能让 store 能够直接 dispatch 一个 function 呢，我们需要一个中间件。
-
-Redux 提供了  redux-thunk  这个中间件来帮组我们做这件事情。
-
-```
-import { createStore, applyMiddleware } from 'redux'
-
-const store = createStore(redux, applyMiddleware(thunk));
-store.dispatch(asyncAdd());
-```
-
-可以看到我们 dispatch 了一个返回 function 的 action, 这个返回的 function 接收 dispatch 作为参数，在进行了异步操作之后, dispatch 一个 type 为了 ADD 的 action， 这个action 会被 reducer 捕捉然后更新 store. 一句话来总结 redux-thunk 的作用，那就是: 让 store 可以 dispatch 一个 function, 而不仅仅是 plain object.
-
-对于简单的应用来, redux-thunk 也许可以完全胜任我们对于异步 action 的需求，但是它有着很明显的问题:
-
-* actions 不在仅仅是一些返回 plain object 的function.
-* dispatch 散落在不同的地方
-* 测试变得复杂
-
-是否可以有一种更友好进步的方式来管理异步 action 呢，所有 dispatch 出来的 action, 实际上都是广播形式，所有 store 的 listeners 都可以监听到，那么我们就可以让中间件去处理集中管理所有的异步操作, 等到特定结果的时候才 dispatch 相应的结果 action 出来，reducer 监听特定的 actions 去做 state 的更新操作, 这就是 redux-saga 这个第三方中间件的作用.
-
-saga.js
-
-```
-import { takeEvery } from 'redux-saga'
-import { put } from 'redux-saga/effects'
-
-function* addWorker() {
-  const value = yield call([fetchValue]);
-  yield put({ type: 'ADD_SUCCESS', value });
-}
-
-function* addWatcher() {
-  yield* takeEvery('ADD', addWorker);
-}
-
-export default addWatcher;
-```
-
-main.js
-
-```
-const sagaMiddleware = createSagaMiddleware();
-const store = createStore(reducer, applyMiddleware(sagaMiddleware));
-sagaMiddleware.run(addWatcher);
-```
-
-这个代码，可以让我们处理逻辑就变得十分清晰.
-
-* watcher 监听目标 actions, 然后分发到相应的 worker 去执行
-* worker 负责真正的异步操作，完成之后发布特定的 action 到 reducer
-* actions 全部都是 plain object
-
-而且我们的代码非常容易进行测试，actions 全是 plain object, 表征应用的行为，而 saga 负责异步调用, 其测试只需要测试 watcher 是否能正确监听 actions, 然后分发到正确的 worker, 而 worker 是否完成异步操作之后发布正确的 action.
-
-当然这样做有一个不好的地方就是，所有的 action，都会同时被 saga 和 reducer 所监听，所以当你的 actions 设计不当，容易造成循环依赖。这个问题曾经在我的项目出现过一次，debug 起来较为麻烦, 所以在设计 actions 的时候一定要区分好那些 action 是 reducer 去 handle, 而那些 actions 是 saga 去 handle.
-
-### 测试
-其实关于 redux-saga 的测试，估计很少有人写，因为其实用 redux-saga 的其实应该不多, 更多人应该用 redux-thunk， 但其实 redux-thunk 很多人也没有写测试吧, 让我们来看看如何优雅的写好 redux-saga 的单元测试吧。
-
-```
-function constructExpectCallReturn(func, args) {
-  return (
-    {
-      '@@redux-saga/IO': true,
-      CALL: {
-        context: {
-          server: 'http://localhost:3000',
-          baseURL: 'http://localhost:3000/v1',
-        },
-        fn: func,
-        args,
-      },
-    }
-  );
-}
-
-describe('watcher', () => {
-  const action = { type: 'ADD' };
-
-  it('should take on ADD action ', () => {
-    actualYield = addWatcher.next().value;
-    expectedYield = take(ADD, addWorker);
-    expect(expectedYield).to.eql(actualYield);
-  });
-
-  it('should fork the saga handler with action', () => {
-    expectedYield = fork(addWorker, action);
-    actualYield = addWatcher.next(action).value;
-    expect(expectedYield).to.eql(actualYield);
-  });
-
-  it('should return to capturing the FETCH action again', () => {
-    actualYield = addWatcher.next().value;
-    expectedYield = take(ADD, addWorker);
-    expect(actualYield).to.eql(expectedYield);
-  });
-});
-
-describe('worker', () => {
-  it('should handle add', () => {
-    const action = { type: ADD };
-    const addIterator = addWorker(action);
-
-    expectedYield = constructExpectCallReturn(fetchValue, []);
-    actualYield = addIterator.next().value;
-    expect(expectedYield).to.eql(actualYield);
-  });
-});
-
-```
-
-可以看到我们的代码完全是可测试, 而且责任分的十分清楚，模块化程度十分高。
-上面的代码都是在非 React 的应用中，可以看出我的初衷，也就是 Redux 其实适用于所有的 JavaScript 应用，当然在 React 中，更是缺之不可啊，当然用这些优秀工具的同时，我们更重要的是理解其中的理念，知道这样做，也要知道为什么需要这样做，这样我们才能在没有这些东西的时候，我们如何解构我们的代码，甚至是做出自己的类 Redux, 类 redux-thunk, redux-saga 的工具。

package/.next/standalone/data/blog/cofe.md

@@ -1,398 +0,0 @@
----
-title: The Complete Cofe Guide
-date: 2025-10-06T10:30:00.000Z
-status: draft
-latitude: 37.78297388090404
-longitude: -122.41031261300729
-city: San Francisco
-street: Market Street
-external_discussions:
-  - platform: hackernews
-    url: https://news.ycombinator.com/item?id=example
----
-
-[**Cofe**](https://github.com/metrue/cofe) is blog and memo taking app, which fully powered by Github API, and your blog posts and memos are all stored in your own repo, and all the writings are in version control. 
-
-
-
-
-
-**Everything you need to know about setting up, customizing, and mastering Cofe.**
-
-Cofe is a beautifully simple blog and memo app that stores everything in your GitHub repository. No databases, no complex setups - just write and publish.
-
-> **Live Example**: See Cofe in action at [blog.minghe.me](https://blog.minghe.me) - a real blog powered by Cofe.
-
-## Quick Start
-
-### 1. GitHub OAuth Setup
-
-First, create a GitHub OAuth App:
-
-1. Go to [GitHub Settings > Developer Settings > OAuth Apps](https://github.com/settings/developers)
-2. Click "New OAuth App"
-3. Fill in the details:
-   - **Application name**: `Cofe Blog`
-   - **Homepage URL**: `http://localhost:3000` (for development)
-   - **Authorization callback URL**: `http://localhost:3000/api/auth/callback/github`
-4. Save your **Client ID** and **Client Secret**
-
-### 2. Environment Setup
-
-Clone the repository and install dependencies:
-
-```bash
-git clone https://github.com/metrue/Cofe.git
-cd Cofe
-npm install
-```
-
-Create your environment variables:
-
-```bash
-# Required for GitHub integration
-export GITHUB_USERNAME='your-github-username'
-export GITHUB_ID='your-github-oauth-client-id'
-export GITHUB_SECRET='your-github-oauth-client-secret'
-
-# Required for authentication
-export NEXTAUTH_SECRET='your-random-secret-string'
-export NEXTAUTH_URL='http://localhost:3000'
-
-# Optional: Analytics (see Analytics section)
-export NEXT_PUBLIC_ANALYTICS_ENABLED=false
-```
-
-### 3. Start Writing
-
-```bash
-npm run dev
-```
-
-Visit `http://localhost:3000`, sign in with GitHub, and start creating!
-
-## Core Features
-
-### Blog Posts
-
-Rich blog posts with full markdown support:
-
-- **Markdown**: Standard and extended syntax
-- **Code Highlighting**: Syntax highlighting for 100+ languages
-- **Math**: LaTeX equations with KaTeX
-- **Images**: Drag & drop or paste images
-- **Location**: Automatic location tagging
-- **Discussions**: Link external discussions from HN, Reddit, V2EX
-
-### Quick Memos
-
-Capture thoughts instantly:
-
-- **Fast Entry**: One-click memo creation
-- **Location Tracking**: Automatic location capture
-- **Like System**: Engage with your content
-- **Masonry Layout**: Beautiful responsive grid
-
-### External Discussions
-
-Connect your posts to external conversations:
-
-```yaml
-external_discussions:
-  - platform: hackernews
-    url: https://news.ycombinator.com/item?id=123456
-  - platform: reddit
-    url: https://reddit.com/r/programming/comments/xyz/
-  - platform: v2ex
-    url: https://v2ex.com/t/123456
-```
-
-Cofe automatically fetches and displays comment counts and links.
-
-## Advanced Configuration
-
-### Analytics Setup
-
-Enable privacy-first analytics with Umami:
-
-1. **Get Umami**: Sign up at [cloud.umami.is](https://cloud.umami.is) or [self-host](https://umami.is/docs)
-2. **Create Website**: Add your domain and get the Website ID
-3. **Configure Environment**:
-
-```bash
-export NEXT_PUBLIC_ANALYTICS_ENABLED=true
-export NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-website-id
-
-# Optional: Custom Umami instance
-export NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://your-umami.com/script.js
-
-# Optional: Domain restrictions
-export NEXT_PUBLIC_UMAMI_DOMAINS=yourdomain.com,www.yourdomain.com
-```
-
-### Site Configuration
-
-Customize your site in `lib/siteConfig.ts`:
-
-```typescript
-export const getSiteConfig = () => ({
-  title: 'Your Blog Name',
-  description: 'Your blog description',
-  author: {
-    name: 'Your Name',
-    email: 'your@email.com'
-  },
-  social: {
-    twitter: 'yourusername',
-    github: 'yourusername'
-  },
-  keywords: ['blog', 'tech', 'programming']
-})
-```
-
-### Custom Styling
-
-Cofe uses Tailwind CSS. Customize styles in:
-
-- `app/globals.css` - Global styles
-- `tailwind.config.js` - Tailwind configuration
-- Individual components for specific customizations
-
-## Content Management
-
-### File Structure
-
-Cofe stores content in your GitHub repository:
-
-```
-data/
-├── blog/           # Blog posts (.md files)
-├── memos.json      # All memos
-├── links.json      # External links
-└── likes.json      # Like data
-```
-
-### Blog Post Format
-
-Blog posts use frontmatter:
-
-```yaml
----
-title: Your Post Title
-date: 2025-10-06T10:30:00.000Z
-latitude: 37.7749
-longitude: -122.4194
-city: San Francisco
-street: Market Street
-external_discussions:
-  - platform: hackernews
-    url: https://news.ycombinator.com/item?id=123
----
-
-Your markdown content here...
-```
-
-### Memo Format
-
-Memos are stored as JSON objects:
-
-```json
-{
-  "id": "1728123456789",
-  "content": "Your memo content with **markdown**",
-  "timestamp": "2025-10-06T10:30:00.000Z",
-  "latitude": 37.7749,
-  "longitude": -122.4194,
-  "city": "San Francisco",
-  "street": "Market Street"
-}
-```
-
-## Deployment
-
-### Vercel (Recommended)
-
-1. **Deploy**: Click the deploy button or connect your GitHub repo
-2. **Environment Variables**: Add all your environment variables
-3. **Domain**: Configure your custom domain
-4. **SSL**: Automatic HTTPS setup
-
-### Other Platforms
-
-Cofe works on any platform that supports Next.js:
-
-- **Netlify**: Use the Next.js plugin
-- **Railway**: Direct deployment support
-- **DigitalOcean App Platform**: Node.js app
-- **Self-hosted**: Docker or Node.js server
-
-## API Reference
-
-### GraphQL Endpoints
-
-Cofe provides a GraphQL API at `/api/graphql`:
-
-#### Queries
-
-```graphql
-# Get all blog posts
-query {
-  blogPosts {
-    id
-    title
-    content
-    date
-    city
-    street
-  }
-}
-
-# Get specific blog post
-query {
-  blogPost(id: "post-id") {
-    id
-    title
-    content
-    discussions {
-      platform
-      url
-      count
-    }
-  }
-}
-
-# Get all memos
-query {
-  memos {
-    id
-    content
-    timestamp
-    city
-    street
-  }
-}
-
-# Get like information
-query {
-  getLikes(itemType: "blog", id: "post-id") {
-    count
-    countries
-    userLiked
-  }
-}
-```
-
-#### Mutations
-
-```graphql
-# Create blog post
-mutation {
-  createBlogPost(input: {
-    title: "New Post"
-    content: "Content here..."
-    latitude: 37.7749
-    longitude: -122.4194
-    city: "San Francisco"
-    street: "Market Street"
-  }) {
-    id
-    title
-  }
-}
-
-# Create memo
-mutation {
-  createMemo(input: {
-    content: "Quick thought..."
-    latitude: 37.7749
-    longitude: -122.4194
-    city: "San Francisco"
-  }) {
-    id
-    content
-  }
-}
-
-# Toggle like
-mutation {
-  toggleLike(itemType: "blog", id: "post-id") {
-    liked
-    count
-    countries
-  }
-}
-```
-
-## Troubleshooting
-
-### Common Issues
-
-**Authentication not working?**
-- Check your GitHub OAuth callback URL
-- Verify NEXTAUTH_SECRET is set
-- Ensure NEXTAUTH_URL matches your domain
-
-**Images not loading?**
-- Verify GitHub token has repo access
-- Check image URLs are publicly accessible
-- Ensure proper file permissions
-
-**Build failures?**
-- Run `npm run lint` and fix any issues
-- Check `npx tsc --noEmit` for TypeScript errors
-- Verify all environment variables are set
-
-**Location not working?**
-- Enable location permissions in browser
-- Check HTTPS requirement for geolocation
-- Verify network connectivity for reverse geocoding
-
-### Getting Help
-
-1. **Check Issues**: [GitHub Issues](https://github.com/metrue/Cofe/issues)
-2. **Discussions**: Use the external discussions feature
-3. **Contributing**: See [AGENTS.md](./AGENTS.md) for development guidelines
-
-## Migration
-
-### From Jekyll
-
-1. Copy markdown files to `data/blog/`
-2. Update frontmatter format
-3. Move images to GitHub repository
-4. Update image URLs
-
-### From Hugo
-
-1. Convert content to standard markdown
-2. Update frontmatter dates to ISO format
-3. Migrate static assets
-4. Configure redirects if needed
-
-### From Ghost/WordPress
-
-1. Export content to markdown
-2. Clean up HTML remnants
-3. Convert featured images
-4. Set up URL redirects
-
-## Performance Tips
-
-1. **Image Optimization**: Use WebP format when possible
-2. **Caching**: Enable Vercel Edge Caching
-3. **Analytics**: Use minimal tracking for better performance
-4. **Content**: Keep memo count reasonable for faster loading
-
-## Security
-
-- **Authentication**: GitHub OAuth only
-- **Data Storage**: Your GitHub repository
-- **Privacy**: No external databases
-- **Analytics**: Privacy-first Umami integration
-- **HTTPS**: Required in production
-
----
-
-**That's everything!** Cofe is designed to be simple yet powerful. Start with the basics and customize as you grow.
-
-Questions? Open an issue or start a discussion. Happy writing! ☕