docs: stable CDN

This commit is contained in:
Simon
2025-12-16 20:17:58 +08:00
parent 2fee2d5ea3
commit aa694e3b85
6 changed files with 60 additions and 23 deletions

View File

@@ -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'

View File

@@ -1,5 +1,6 @@
import BetaNotice from '@/components/BetaNotice' import BetaNotice from '@/components/BetaNotice'
import CodeEditor from '@/components/CodeEditor' import CodeEditor from '@/components/CodeEditor'
import { CDN_CN_URL, CDN_URL } from '@/constants'
export default function CdnSetup() { export default function CdnSetup() {
return ( return (
@@ -15,11 +16,16 @@ export default function CdnSetup() {
<CodeEditor <CodeEditor
className="mb-8" className="mb-8"
code={` 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> <script>
window.pageAgent.panel.show() // window.pageAgent
</script>`} </script>`}
/> />

View File

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
import BetaNotice from '@/components/BetaNotice' import BetaNotice from '@/components/BetaNotice'
import CodeEditor from '@/components/CodeEditor' import CodeEditor from '@/components/CodeEditor'
import { CDN_CN_URL, CDN_URL } from '@/constants'
export default function QuickStart() { export default function QuickStart() {
const { t } = useTranslation('docs') const { t } = useTranslation('docs')
@@ -23,8 +24,9 @@ export default function QuickStart() {
<div> <div>
<p className="text-sm font-medium mb-2">{t('quick_start.step1_cdn')}</p> <p className="text-sm font-medium mb-2">{t('quick_start.step1_cdn')}</p>
<CodeEditor <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" language="html"
/> />
</div> </div>

View File

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

View File

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

View File

@@ -6,23 +6,27 @@ import { Link, useSearchParams } from 'wouter'
import Footer from './components/Footer' import Footer from './components/Footer'
import Header from './components/Header' 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);})();`
)
return `
<a
href=${injection} 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" 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" draggable="true"
onclick="return false;" onclick="return false;"
title="Drag me to your bookmarks bar!" title="Drag me to your bookmarks bar!"
> >
✨PageAgent ✨PageAgent
</a> </a>
`
` }
export default function HomePage() { export default function HomePage() {
const { t, i18n } = useTranslation(['home', 'common']) const { t, i18n } = useTranslation(['home', 'common'])
@@ -38,6 +42,7 @@ export default function HomePage() {
const isOther = params.has('try_other') const isOther = params.has('try_other')
const [activeTab, setActiveTab] = useState<'try' | 'other'>(isOther ? 'other' : 'try') const [activeTab, setActiveTab] = useState<'try' | 'other'>(isOther ? 'other' : 'try')
const [cdnSource, setCdnSource] = useState<'international' | 'china'>('international')
const handleExecute = async () => { const handleExecute = async () => {
if (!task.trim()) return if (!task.trim()) return
@@ -194,11 +199,26 @@ export default function HomePage() {
</span>{' '} </span>{' '}
{t('home:try_other.step2_content')} {t('home:try_other.step2_content')}
</p> </p>
<div className="flex items-center justify-center gap-3">
<select
value={cdnSource}
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 <div
className="flex items-center justify-center gap-2 text-gray-500 dark:text-gray-400" dangerouslySetInnerHTML={{
dangerouslySetInnerHTML={{ __html: injectionA }} __html: getInjection(cdnSource === 'china'),
}}
></div> ></div>
</div> </div>
</div>
{/* Usage Instructions */} {/* Usage Instructions */}
<div className="bg-purple-50 dark:bg-gray-700 p-4 rounded-lg"> <div className="bg-purple-50 dark:bg-gray-700 p-4 rounded-lg">