docs: stable CDN

packages/website/src/constants.ts

@@ -0,0 +1,3 @@
+export const CDN_URL = 'https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js'
+export const CDN_CN_URL =
+	'https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js'

packages/website/src/docs/integration/cdn-setup/page.tsx

@@ -1,5 +1,6 @@
 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
+import { CDN_CN_URL, CDN_URL } from '@/constants'
 
 export default function CdnSetup() {
 	return (
@@ -15,11 +16,16 @@ export default function CdnSetup() {
 			<CodeEditor
 				className="mb-8"
 				code={`
-// 仅供测试使用，稳定 CDN 待定
+// CDN: \t${CDN_URL}
-<script src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js" crossorigin="true" type="text/javascript"></script>
+// Mirror: \t${CDN_CN_URL}
+<script 
+	src="${CDN_URL}" 
+	crossorigin="true" 
+	type="text/javascript"
+></script>
 
 <script>
-	window.pageAgent.panel.show()
+	// window.pageAgent
 </script>`}
 			/>
 

packages/website/src/docs/introduction/quick-start/page.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
 
 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
+import { CDN_CN_URL, CDN_URL } from '@/constants'
 
 export default function QuickStart() {
 	const { t } = useTranslation('docs')
@@ -23,8 +24,9 @@ export default function QuickStart() {
 						<div>
 							<p className="text-sm font-medium mb-2">{t('quick_start.step1_cdn')}</p>
 							<CodeEditor
-								code={`// 仅供测试使用
+								code={`// CDN: \t${CDN_URL}
-<script src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js" crossorigin="true" type="text/javascript"></script>`}
+// Mirror: \t${CDN_CN_URL}
+<script src="${CDN_URL}" crossorigin="true" type="text/javascript"></script>`}
 								language="html"
 							/>
 						</div>

packages/website/src/i18n/locales/en-US/home.ts

@@ -18,6 +18,9 @@ export default {
 		step1_content: 'Show your bookmarks bar',
 		step2_title: 'Step 2:',
 		step2_content: 'Drag this button to your bookmarks',
+		cdn_label: 'CDN Source',
+		cdn_international: 'International',
+		cdn_china: 'China Mirror',
 		step3_title: 'Step 3:',
 		step3_content: 'Click the bookmark on any site to activate',
 		notice_title: '⚠️ Heads Up',

packages/website/src/i18n/locales/zh-CN/home.ts

@@ -17,6 +17,9 @@ export default {
 		step1_content: '显示收藏夹栏',
 		step2_title: '步骤 2:',
 		step2_content: '拖拽下面按钮到收藏夹栏',
+		cdn_label: 'CDN 源',
+		cdn_international: '国际',
+		cdn_china: '国内镜像',
 		step3_title: '步骤 3:',
 		step3_content: '在其他网站点击收藏夹中的按钮即可使用',
 		notice_title: '⚠️ 注意',

packages/website/src/page.tsx

@@ -6,23 +6,27 @@ import { Link, useSearchParams } from 'wouter'
 
 import Footer from './components/Footer'
 import Header from './components/Header'
+import { CDN_CN_URL, CDN_URL } from './constants'
 
-const injection = encodeURI(
+function getInjection(useCN?: boolean) {
-	"javascript:(function(){var s=document.createElement('script');s.src=`https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js?t=${Math.random()}`;s.setAttribute('crossorigin', true);s.type=`text/javascript`;s.onload=()=>console.log('PageAgent script loaded!');document.body.appendChild(s);})();"
+	const cdn = useCN ? CDN_CN_URL : CDN_URL
-)
 
-const injectionA = `
+	const injection = encodeURI(
-<a
+		`javascript:(function(){var s=document.createElement('script');s.src=\`${cdn}?t=\${Math.random()}\`;s.setAttribute('crossorigin', true);s.type="text/javascript";s.onload=()=>console.log('PageAgent script loaded!');document.body.appendChild(s);})();`
-	href=${injection}
+	)
-	class="inline-flex items-center text-xs px-3 py-2 bg-blue-500 text-white font-medium rounded-lg hover:shadow-md transform hover:scale-105 transition-all duration-200 cursor-move border-2 border-dashed border-green-300"
-	draggable="true"
-	onclick="return false;"
-	title="Drag me to your bookmarks bar!"
->
-	✨PageAgent
-</a>
 
-`
+	return `
+	<a
+		href=${injection}
+		class="inline-flex items-center text-xs px-3 py-2 bg-blue-500 text-white font-medium rounded-lg hover:shadow-md transform hover:scale-105 transition-all duration-200 cursor-move border-2 border-dashed border-green-300"
+		draggable="true"
+		onclick="return false;"
+		title="Drag me to your bookmarks bar!"
+	>
+		✨PageAgent
+	</a>
+	`
+}
 
 export default function HomePage() {
 	const { t, i18n } = useTranslation(['home', 'common'])
@@ -38,6 +42,7 @@ export default function HomePage() {
 	const isOther = params.has('try_other')
 
 	const [activeTab, setActiveTab] = useState<'try' | 'other'>(isOther ? 'other' : 'try')
+	const [cdnSource, setCdnSource] = useState<'international' | 'china'>('international')
 
 	const handleExecute = async () => {
 		if (!task.trim()) return
@@ -194,10 +199,25 @@ export default function HomePage() {
 																</span>{' '}
 																{t('home:try_other.step2_content')}
 															</p>
-															<div
+															<div className="flex items-center justify-center gap-3">
-																className="flex items-center justify-center gap-2 text-gray-500 dark:text-gray-400"
+																<select
-																dangerouslySetInnerHTML={{ __html: injectionA }}
+																	value={cdnSource}
-															></div>
+																	onChange={(e) =>
+																		setCdnSource(e.target.value as 'international' | 'china')
+																	}
+																	className="px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-500 rounded bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200"
+																>
+																	<option value="international">
+																		{t('home:try_other.cdn_international')}
+																	</option>
+																	<option value="china">{t('home:try_other.cdn_china')}</option>
+																</select>
+																<div
+																	dangerouslySetInnerHTML={{
+																		__html: getInjection(cdnSource === 'china'),
+																	}}
+																></div>
+															</div>
 														</div>
 
 														{/* Usage Instructions */}