docs: ✏️ Upgrade Website Demo

Author: haozi

.github/workflows/deploy.yml

@@ -136,10 +136,11 @@ jobs:
       - name: Deploy to GitHub Pages
         run: |
           git reset --hard HEAD
-          git clean -xdf
-          pnpm install gh-pages idmp @types/serialize-javascript -Dw
+          git clean -ffdx
+          pnpm install gh-pages idmp @types/serialize-javascript lucide-react react-icons -Dw
           pnpm run www
           echo "idmp.js.org" > dist/CNAME
+          mv dist/index.html dist/404.html
           pnpm gh-pages -d dist -b gh-pages -m "Deploy version ${{ env.VERSION }}" -r "https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierrc

@@ -3,5 +3,9 @@
   "semi": false,
   "tabWidth": 2,
   "singleQuote": true,
-  "plugins": ["prettier-plugin-organize-imports"]
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss",
+    "prettier-plugin-lint-md"
+  ]
 }

README.md

@@ -11,7 +11,7 @@ An elegant, lightweight (~1KB gzipped) utility to deduplicate concurrent calls t
 
 English | [简体中文](README.zh-CN.md)
 
-- Demo <https://idmp.haozi.me>
+- Demo <https://idmp.js.org/>
 
 ## Breaking Changes
 
@@ -28,7 +28,7 @@ English | [简体中文](README.zh-CN.md)
 import idmp from 'idmp'
 
 const getInfo = async () => {
-  const API = `https://idmp.haozi.me/api?/your-info`
+  const API = `https://idmp.js.org/api?/your-info`
   return await fetch(API).then((d) => d.text())
 }
 
@@ -48,7 +48,7 @@ Check the network console, there will be only 1 network request, but 10 callback
 
 ```typescript
 const getInfoById = async (id: string) => {
-  const API = `https://idmp.haozi.me/api?/your-info&id=${id}`
+  const API = `https://idmp.js.org/api?/your-info&id=${id}`
   return await fetch(API).then((d) => d.json())
 }
 
@@ -160,7 +160,7 @@ In React, you can share requests using SWR, Provider and more complex state mana
 2. **Provider**: Needs centralized data management. The data center can't perceive which modules will consume the data, need to maintain the data for a long time, and dare not delete it in time
 3. **Redux**: Should focus on state changes and sequences, not data sharing. `idmp` lets you focus more on local state
 
-See [demo](https://idmp.haozi.me) and [source code](https://github.com/ha0z1/idmp/tree/main/demo)
+See [demo](https://idmp.js.org/) and [source code](https://github.com/ha0z1/idmp/tree/main/demo)
 
 So when module A or module B's code is deleted, there is no need to maintain their cache.
 

README.zh-CN.md

@@ -11,7 +11,7 @@
 
 [English](README.md) | 简体中文
 
-- Demo <https://idmp.haozi.me>
+- Demo <https://idmp.js.org/>
 
 ## Breaking Changes
 
@@ -28,7 +28,7 @@
 import idmp from 'idmp'
 
 const getInfo = async () => {
-  const API = `https://idmp.haozi.me/api?/your-info`
+  const API = `https://idmp.js.org/api?/your-info`
   return await fetch(API).then((d) => d.text())
 }
 
@@ -48,7 +48,7 @@ for (let i = 0; i < 10; ++i) {
 
 ```typescript
 const getInfoById = async (id: string) => {
-  const API = `https://idmp.haozi.me/api?/your-info&id=${id}`
+  const API = `https://idmp.js.org/api?/your-info&id=${id}`
   return await fetch(API).then((d) => d.json())
 }
 
@@ -159,7 +159,7 @@ localStorage.idmp_debug = false，以禁用调试信息显示。
 2. Provider 数据共享: 需要一个中心化的数据管理。数据中心无法感知哪些模块会消费哪些数据，需要长期维护这些数据，而不敢及时删除
 3. Redux 等状态管理库:应该专注的是状态的变化和时序，而非共享数据。`idmp` 让你更关注于局部状态
 
-查看 [demo](https://idmp.haozi.me) 和[源码](https://github.com/ha0z1/idmp/tree/main/demo)
+查看 [demo](https://idmp.js.org/) 和[源码](https://github.com/ha0z1/idmp/tree/main/demo)
 
 这样当模块 A 或者模块 B 的代码删除后，是不需要维护他们的缓存的。
 

demo/App.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

demo/App.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
+import './App.css'
 import Home from './pages/Home'
 import Storage from './pages/Storage'
 
@@ -13,6 +13,10 @@ const router = createBrowserRouter([
     path: 'storage',
     element: <Storage />,
   },
+  {
+    path: '*',
+    element: <Navigate to="/" replace />,
+  },
 ])
 
 const App = () => <RouterProvider router={router} />

demo/api.ts

@@ -1,4 +1,4 @@
-import idmp from '../src'
+import idmp from 'idmp'
 // ;(window as any).idmp = idmp
 // ;(window as any).g = g
 // export const getUserData = async (userId: string) => {
@@ -11,7 +11,7 @@ const sleep = (delay: number) =>
   new Promise((resolve) => setTimeout(resolve, delay))
 
 export const getUserData = async (userId: string) => {
-  const API = `https://idmp.haozi.me/api?id=${userId}&t=${Math.random()}`
+  const API = `https://idmp.js.org/api?id=${userId}&t=${Math.random()}`
   await fetch(API).then((d) => d.text())
 
   await sleep(2000)

demo/components/Ribbon.tsx

@@ -0,0 +1,13 @@
+export default function Ribbon() {
+  return (
+    <div className="fixed top-10 right-[-42px] z-50 w-[200px] rotate-45 shadow-lg">
+      <a
+        href="https://github.com/ha0z1/idmp"
+        target="_blank"
+        className="block h-6 border border-white/30 bg-black text-center leading-6 font-medium text-slate-200 no-underline shadow-[0_0_10px_rgba(0,0,0,0.31)] transition hover:bg-slate-900"
+      >
+        Fork me on GitHub
+      </a>
+    </div>
+  )
+}

demo/package.json

@@ -1,6 +1,9 @@
 {
   "private": true,
   "dependencies": {
-    "idmp": "3.6.6"
+    "@tailwindcss/vite": "^4.1.12",
+    "idmp": "*",
+    "lucide-react": "^0.541.0",
+    "react-icons": "^5.5.0"
   }
 }