feat: add document.

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://jaywcjlove.github.io/#/sponsor

.github/workflows/ci.yml

@@ -0,0 +1,71 @@
+name: CI/CD
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Create idoc config.
+        run: |
+          cat > idoc.yml << EOF
+          site: "PaletteGenius"
+          description: PaletteGenius is a screen color picker tool designed to improve efficiency for designers and developers.
+          keywords: designers,developers,color picker,convert,popular colors,standard color,color code formats
+          favicon: assets/logo.png
+          logo: ./assets/logo.png
+          openSource: https://github.com/jaywcjlove/palette-genius
+          homepage: https://wangchujiang.com/palette-genius/
+          tocs: false
+          element: 
+            wrapper: style=max-width:720px;
+          meta:
+            - <meta name="author" content="Kenny Wong">
+            - <meta property="og:site_name" content="<%= site %>">
+            - <meta property="og:url" content="<%=homepage%><%=RESOLVE_PATH%>">
+            - <meta property="og:image" content="<%=homepage%>assets/logo.png">
+            - <meta property="og:type" content="application">
+            - <meta property="og:title" content="<%= site %>">
+            - <meta property="og:description" content="<%= description%>">
+            - <meta property="twitter:image:src" content="<%=homepage%>assets/screenshots-1.png">
+            - <meta property="twitter:site" content="@jaywcjlove">
+            - <meta property="twitter:creator" content="jaywcjlove">
+            - <meta property="twitter:card" content="summary_large_image">
+            - <meta property="twitter:title" content="<%= site %> - <%= description%>">
+            - <meta property="twitter:description" content="<%= description%>">
+            - <meta name="apple-itunes-app" content="app-id=id6472593276">
+          menus:
+            Home: index.html
+            Apps: 
+              url: https://wangchujiang.com/#/app
+              target: __blank
+            About: 
+              url: https://wangchujiang.com/#/about
+              target: __blank
+          sideEffectFiles:
+            - README.zh.md
+          footer: |
+            <a href="https://wangchujiang.com/#/app" target="_blank">App</a> • 
+            <a href="https://wangchujiang.com/#/projects" target="_blank">Projects</a> • 
+            <a href="https://wangchujiang.com/#/sponsor" target="_blank">Sponsor</a> • 
+            <a href="https://wangchujiang.com/#/app" target="_blank">More Apps</a><br /><br />
+            Generated by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a> v{{idocVersion}}      
+          EOF
+
+      - run: npm install idoc@1 -g
+      - run: idoc
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          commit_message: ${{ github.event.head_commit.message }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

.gitignore

@@ -0,0 +1,19 @@
+dist
+
+.DS_Store
+.cache
+.vscode
+.idea
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*
+
+# IDEA
+*.iml
+*.ipr
+*.iws
+.idea/

README.md

@@ -1,2 +1,37 @@
-# palette-genius
+<div align="center">
+	<br />
+	<br />
+	<img src="./assets/logo.png" alt="DevHub LOGO" width="160" height="160">
+  <p>
+		<a href="./README.md">English</a> • 
+    <a target="_blank" href="https://apps.apple.com/app/palette-genius/id6472593276">AppStore</a> • 
+		<a target="_blank" href="https://wangchujiang.com/#/contact">联系&支持</a>
+  </p>
+	<h1>Palette Genius</h1>
+  <!--rehype:style=border: 0;-->
+  <p>
+    <a target="_blank" href="https://apps.apple.com/app/palette-genius/id6472593276" title="Palette Genius AppStore"><img alt="Palette Genius AppStore" src="https://tools.applemediaservices.com/api/badges/download-on-the-mac-app-store/black/en-us?size=250x83&amp;releaseDate=1705968000" height="51">
+    </a>
+    <a target="_blank" href="https://www.producthunt.com/posts/palettegenius?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-palettegenius"><img alt="Palette Genius Product Hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=430074&theme=dark" height="51">
+    </a>
+  </p>
+</div>
+
 PaletteGenius is a screen color picker tool designed to improve efficiency for designers and developers.
+
+![Palette Genius screenshots-1](./assets/screenshots-1.png)
+![Palette Genius screenshots-2](./assets/screenshots-2.png)
+![Palette Genius screenshots-3](./assets/screenshots-3.png)
+![Palette Genius screenshots-4](./assets/screenshots-4.png)
+![Palette Genius screenshots-5](./assets/screenshots-5.png)
+![Palette Genius screenshots-6](./assets/screenshots-6.png)
+
+Why do I need to develop this application?
+
+✦ I have always been using the built-in color picker in my system. It is compact and fast, but it has noticeable drawbacks. It cannot display hexadecimal values and it is not easy to copy and convert to other color formats.
+
+✦ Collect popular colors, including colors from popular component libraries and standard color values.
+
+✦ Rich color code formats: covering mainstream platforms and programming languages (iOS, Android, Swift, Objc, CSS, etc.), with keyboard shortcuts for quick code copying.
+
+✦ Appearance: supporting light and dark modes.

README.zh.md

@@ -0,0 +1,37 @@
+<div align="center">
+	<br />
+	<br />
+	<img src="./assets/logo.png" alt="DevHub LOGO" width="160" height="160">
+  <p>
+		<a href="./README.md">English</a> • 
+    <a target="_blank" href="https://apps.apple.com/app/palette-genius/id6472593276">AppStore</a> • 
+		<a target="_blank" href="https://wangchujiang.com/#/contact">联系&支持</a>
+  </p>
+	<h1>Palette Genius</h1>
+  <!--rehype:style=border: 0;-->
+  <p>
+    <a target="_blank" href="https://apps.apple.com/app/palette-genius/id6472593276" title="Palette Genius AppStore"><img alt="Palette Genius AppStore" src="https://tools.applemediaservices.com/api/badges/download-on-the-mac-app-store/black/en-us?size=250x83&amp;releaseDate=1705968000" height="51">
+    </a>
+    <a target="_blank" href="https://www.producthunt.com/posts/palettegenius?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-palettegenius"><img alt="Palette Genius Product Hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=430074&theme=dark" height="51">
+    </a>
+  </p>
+</div>
+
+PaletteGenius 是一款旨在提高设计师和开发者效率的屏幕颜色选择工具。
+
+![Palette Genius screenshots-1](./assets/screenshots-1.png)
+![Palette Genius screenshots-2](./assets/screenshots-2.png)
+![Palette Genius screenshots-3](./assets/screenshots-3.png)
+![Palette Genius screenshots-4](./assets/screenshots-4.png)
+![Palette Genius screenshots-5](./assets/screenshots-5.png)
+![Palette Genius screenshots-6](./assets/screenshots-6.png)
+
+为什么需要开发这个应用程序呢？
+
+✦ 我一直在使用系统内置的颜色选择器。它既紧凑又快速，但它也有明显的缺点。它无法显示十六进制值，并且不容易复制并转换为其他颜色格式。
+
+✦ 收集流行的颜色，包括来自流行组件库和标准颜色值的颜色。
+
+✦ 丰富的颜色代码格式：涵盖主流平台和编程语言（iOS、Android、Swift、Objc、CSS 等），并提供快速代码复制的键盘快捷键。
+
+✦ 外观：支持浅色和深色模式。