chore: add sponsor doc

apps/vite-native-skyline/package.json

@@ -30,6 +30,6 @@
     "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "weapp-tailwindcss": "workspace:*",
-    "weapp-vite": "^1.7.7"
+    "weapp-vite": "^1.7.8"
   }
 }

apps/vite-native-ts-skyline/package.json

@@ -29,6 +29,6 @@
     "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "weapp-tailwindcss": "workspace:*",
-    "weapp-vite": "^1.7.7"
+    "weapp-vite": "^1.7.8"
   }
 }

apps/vite-native-ts/package.json

@@ -29,6 +29,6 @@
     "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "weapp-tailwindcss": "workspace:*",
-    "weapp-vite": "^1.7.7"
+    "weapp-vite": "^1.7.8"
   }
 }

apps/vite-native/package.json

@@ -33,6 +33,6 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15",
     "weapp-tailwindcss": "workspace:*",
-    "weapp-vite": "^1.7.7"
+    "weapp-vite": "^1.7.8"
   }
 }

package.json

@@ -48,7 +48,7 @@
     "build": "turbo run build --filter=./packages/* && turbo run build --filter=./plugins/*",
     "build:vite-docs": "turbo run build --filter=./website-weapp-vite/",
     "build:tw-docs": "turbo run build --filter=./website/",
-    "test": "vitest run",
+    "test": "vitest run --coverage.enabled",
     "test:plugins": "vitest run --coverage.enabled --coverage.all=false --project=@weapp-tailwindcss/*",
     "test:cli": "vitest run --coverage.enabled --coverage.all=false --project=@weapp-tailwindcss/cli",
     "test:typography": "vitest run --coverage.enabled --coverage.all=false --project=@weapp-tailwindcss/typography",
@@ -224,7 +224,7 @@
     "tslib": "^2.8.1",
     "tsup": "^8.3.5",
     "tsx": "^4.19.2",
-    "turbo": "^2.3.0",
+    "turbo": "^2.3.1",
     "typescript": "^5.6.3",
     "unbuild": "^2.0.0",
     "uuid": "^11.0.3",

website/docs/sponsor.md

@@ -0,0 +1,61 @@
+# 成为 weapp-tailwindcss 的赞助商
+
+`weapp-tailwindcss` 是采用 `MIT` 许可的开源项目，使用完全免费。
+
+维护这样一个功能，实际上是非常消耗精力的，而且产生不了什么实际的经济收益。
+
+当然，我个人对于经济收益，还是有些不在乎的，谁让我喜欢做开源呢？ 哈哈
+
+---
+
+但是话又说回来了，我又还是想要一些经济收益（我就是既要又要的伪君子），原因非常简单:
+
+因为钱这个玩意，能够给人自由。
+
+人啊，表面上看寿命大差不差，但生命的质量和长度却大不相同。
+
+像我这个年纪，已经走到了人生的中位，
+
+- 结了婚，是一名丈夫。
+- 有了自己的孩子，是一位父亲。
+- 每天忙忙碌碌，开会，加班，是一名职场社畜
+
+然而，当我深夜回顾往事的时候，却发现我所铭记的，那些珍藏在心底的记忆点，并不是那些耗费我最多时间的工作:
+
+- 而是那一年，我付了 `800` 元去产房陪产，亲眼看到我的女儿，在下午的 `2点54分` 从产道里出生的惊奇。
+- 是那一年，我和爱人骑着`9.9`元周卡的共享单车，听着`《成都》`骑到玉林路小酒馆的门口，穿过拥挤的人群，去隔街买了只烤兔，发现竟然格外好吃的欣喜。(至今依然是我吃过的最好吃的烤兔)
+- 也是那一年，我大学时光里熬夜打 `DNF` 搬砖卖金币换钱，收获的纯粹的快乐。(那时候交易平台汇率好像是 `20多万金币换1元`)
+
+所以想想啊，人生如白驹过隙，我们还能够年轻多少年呢？
+
+再过几年，或者我们就说 **现在**
+
+我们还能像以前那样，有说走就走的勇气和身体吗？
+
+> “人生代代无穷已，江月年年望相似。”
+
+所以啊，越是意识到时间的珍贵，越让我明白努力的意义：
+
+努力赚钱，并不是为了单纯的物质享受，而是为了能够用金钱，去换回属于自己的时间，用来做那些真正值得铭记的事情：
+
+- 我想要陪伴我的女儿成长，陪她走过从懵懂到优秀的每一步；
+- 我想要和我的伴侣一起创造更多值得回忆的时刻，让未来的我不留遗憾；
+- 我想要留更多的时间给自己，重新感受那些被忙碌淹没的生命的美好。
+
+钱能够买来自由，而自由能让我们更好地掌控自己的生命。
+
+生命的意义，不在于耗尽时间，而在于与爱和希望相拥的每一刻。
+
+> 上面这些话是我随手写的，我自己读了一遍感到有些矫情，如果让你感到不适，可以提个 issue 我把它删掉
+
+---
+
+当然废话说了这么多，差点忘了这个页面是用来要钱的。（网络乞丐...）
+
+有小额打赏意愿的朋友，你的打赏会被记录在 [sponsors](https://github.com/sonofmagic/sponsors) 仓库中，生成图片挂在我的博客站点。
+
+大额大赏的朋友，可以进行官网广告位的投放，具体的投放的网址，样式由你来定。
+
+当然也可以什么都不给，大家加个微信，交个朋友，也是极好的！
+
+<img src="/img/wechat-qrcode.svg" alt="微信二维码" width="300px" />

website/src/components/AdsContainer/index.tsx

@@ -0,0 +1,13 @@
+import AdsContainerElement from '@site/src/components/AdsContainerElement'
+import React from 'react'
+
+function AdsContainer() {
+  return (
+    <div className="">
+      <AdsContainerElement />
+    </div>
+
+  )
+}
+
+export default AdsContainer

website/src/components/AdsContainerElement/index.tsx

@@ -0,0 +1,44 @@
+import Link from '@docusaurus/Link'
+import Aizex from '@site/static/img/ads/aizex-mini.png'
+import React, { useRef } from 'react'
+
+function AdsContainerElement() {
+  const containerRef = useRef<any>()
+
+  return (
+    <div ref={containerRef} className="px-4 space-y-4">
+      <div className="flex items-center w-full dark:px-2">
+        <div className="group relative">
+          <div className="
+          absolute hidden dark:block -inset-1 rounded-lg bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 opacity-75 blur transition duration-500 group-hover:opacity-100"
+          >
+          </div>
+          <button className="relative rounded-lg dark:bg-black bg-[#f6f6f7] px-4 py-2 text-white font-semibold">
+            <Link to="/docs/sponsor">成为赞助商</Link>
+          </button>
+        </div>
+      </div>
+
+      <a className="dark:bg-[#161618] hover:border-[#747bff] rounded-xl bg-[#f6f6f7] border-solid border-2 border-transparent text-xs text-center flex justify-between p-4" target="_blank" href="https://aizex.cn/0LcJ7G" rel="noopener sponsored nofollow">
+        <div>
+          <img className="w-20" src={Aizex} alt="aizex"></img>
+        </div>
+        <div className="space-y-2">
+          <div className="text-sm font-semibold">
+            Aizex 合租面板
+          </div>
+          <div>
+            更好用的「GPT-4 x 克劳德」使用方式
+          </div>
+          <div>
+            亲测推荐!
+          </div>
+        </div>
+        <div>
+        </div>
+      </a>
+    </div>
+  )
+}
+
+export default AdsContainerElement

website/src/theme/TOC/index.tsx

@@ -0,0 +1,24 @@
+import AdsContainer from '@site/src/components/AdsContainer'
+import TOCItems from '@theme-original/TOCItems'
+import clsx from 'clsx'
+import React from 'react'
+
+import styles from './styles.module.css'
+
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight'
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active'
+
+export default function TOC({ className, ...props }): JSX.Element {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className, '')}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+      <AdsContainer></AdsContainer>
+    </div>
+  )
+}

website/src/theme/TOC/styles.module.css

@@ -0,0 +1,16 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}