From 4083be61c1deab784479d7bcf8d35805dfa6428e Mon Sep 17 00:00:00 2001 From: Kresna <13603341+slaveofcode@users.noreply.github.com> Date: Fri, 11 Sep 2026 22:42:41 +0700 Subject: [PATCH] fix(support): open Polar checkout in a new tab (embed is blocked by frame-ancestors) Polar's checkout sends 'frame-ancestors none', so the embedded overlay was refused ('polar.sh refused to connect'). Switch the Buy me a coffee CTA to a plain link that opens the hosted checkout in a new tab, inline it into the /support page (no island, no third-party script), and drop the unused @polar-sh/checkout dependency. --- e2e/support.spec.ts | 8 +++-- package-lock.json | 25 -------------- package.json | 1 - src/islands/shell/SupportButton.tsx | 51 ----------------------------- src/pages/[...locale]/support.astro | 22 +++++++++---- 5 files changed, 21 insertions(+), 86 deletions(-) delete mode 100644 src/islands/shell/SupportButton.tsx diff --git a/e2e/support.spec.ts b/e2e/support.spec.ts index 7ba14a0..329012c 100644 --- a/e2e/support.spec.ts +++ b/e2e/support.spec.ts @@ -4,8 +4,12 @@ test('support page renders with the Buy me a coffee button', async ({ page }) => const res = await page.goto('/support'); expect(res?.status()).toBe(200); await expect(page.getByRole('heading', { name: /Support GoodWebTools/i })).toBeVisible(); - // The button is a client:idle island — wait for hydration. - await expect(page.getByRole('button', { name: 'Buy me a coffee' })).toBeVisible({ timeout: 30_000 }); + // The CTA is a plain link that opens Polar's hosted checkout in a new tab + // (scoped by its Polar href — the header coffee icon shares the label). + const cta = page.locator('a[href*="buy.polar.sh"]'); + await expect(cta).toBeVisible(); + await expect(cta).toHaveAttribute('target', '_blank'); + await expect(cta).toContainText('Buy me a coffee'); }); test('header links to the support page', async ({ page }) => { diff --git a/package-lock.json b/package-lock.json index e73e9c6..10ee02c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,6 @@ "@mediapipe/tasks-vision": "^0.10.35", "@mlc-ai/web-llm": "^0.2.84", "@nanostores/react": "^0.7.3", - "@polar-sh/checkout": "^0.4.1", "@sqlite.org/sqlite-wasm": "^3.50.1-build1", "@tauri-apps/api": "^2.11.1", "@tauri-apps/plugin-clipboard-manager": "^2.3.2", @@ -4867,20 +4866,6 @@ "node": ">=20" } }, - "node_modules/@polar-sh/checkout": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@polar-sh/checkout/-/checkout-0.4.1.tgz", - "integrity": "sha512-/pxHOea10k9BZPz1N7xl8fF3Q+/G6l4l6tuAolfAzIB3J5+xKhcA4/+BlnIg4dHRYtF2KyDUNvhBbufgEQ8AyA==", - "license": "Apache-2.0", - "dependencies": { - "date-fns": "^4.1.0" - }, - "peerDependencies": { - "@stripe/react-stripe-js": "^3.6.0 || ^4.0.2 || ^5.6.1", - "@stripe/stripe-js": "^7.1.0 || ^8.11.0", - "react": "^18 || ^19" - } - }, "node_modules/@poppinss/colors": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/@poppinss/colors/-/colors-4.1.6.tgz", @@ -10738,16 +10723,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/date-fns": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz", - "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==", - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/kossnocorp" - } - }, "node_modules/dayjs": { "version": "1.11.21", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz", diff --git a/package.json b/package.json index 5efb43e..4ad807a 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,6 @@ "@mediapipe/tasks-vision": "^0.10.35", "@mlc-ai/web-llm": "^0.2.84", "@nanostores/react": "^0.7.3", - "@polar-sh/checkout": "^0.4.1", "@sqlite.org/sqlite-wasm": "^3.50.1-build1", "@tauri-apps/api": "^2.11.1", "@tauri-apps/plugin-clipboard-manager": "^2.3.2", diff --git a/src/islands/shell/SupportButton.tsx b/src/islands/shell/SupportButton.tsx deleted file mode 100644 index 296804c..0000000 --- a/src/islands/shell/SupportButton.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { useState } from 'react'; -import { Coffee } from 'lucide-react'; -import { POLAR_CHECKOUT_URL } from '@/config'; -import type { Lang } from '@/i18n/config'; - -const TR: Record = { - en: { cta: 'Buy me a coffee', opening: 'Opening…' }, - id: { cta: 'Belikan saya kopi', opening: 'Membuka…' }, -}; - -/** Reads the current theme so the Polar overlay matches the site. */ -function currentTheme(): 'light' | 'dark' { - if (typeof document === 'undefined') return 'light'; - const root = document.documentElement; - if (root.classList.contains('dark') || root.dataset.theme === 'dark') return 'dark'; - if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) return 'dark'; - return 'light'; -} - -export default function SupportButton({ lang = 'en' }: { lang?: Lang }) { - const t = TR[lang] ?? TR.en; - const [busy, setBusy] = useState(false); - - if (!POLAR_CHECKOUT_URL) return null; - - const open = async () => { - setBusy(true); - try { - // Load Polar's embed on demand so it never weighs on other pages. - const { PolarEmbedCheckout } = await import('@polar-sh/checkout/embed'); - await PolarEmbedCheckout.create(POLAR_CHECKOUT_URL, { theme: currentTheme() }); - } catch { - // Fall back to the hosted checkout page if the overlay can't load. - window.open(POLAR_CHECKOUT_URL, '_blank', 'noopener,noreferrer'); - } finally { - setBusy(false); - } - }; - - return ( - - ); -} diff --git a/src/pages/[...locale]/support.astro b/src/pages/[...locale]/support.astro index 44fd984..012f3de 100644 --- a/src/pages/[...locale]/support.astro +++ b/src/pages/[...locale]/support.astro @@ -1,7 +1,6 @@ --- -import { ChevronRight, Heart } from 'lucide-react'; +import { ChevronRight, Heart, Coffee } from 'lucide-react'; import Base from '@/layouts/Base.astro'; -import SupportButton from '@/islands/shell/SupportButton'; import { POLAR_CHECKOUT_URL } from '@/config'; import { LOCALES, localeParam, localizePath, type Lang } from '@/i18n/config'; @@ -16,17 +15,17 @@ const A = { en: { title: 'Support', metaDesc: 'GoodWebTools is free and private, with no accounts. If a tool saved you time, you can buy me a coffee — entirely optional.', crumb: 'Support', home: 'Home', h1: 'Support GoodWebTools', - leadH: 'Buy me a coffee', + leadH: 'Buy me a coffee', cta: 'Buy me a coffee', leadP: "GoodWebTools is free, runs entirely in your browser, and has no accounts or paywalls. If a tool saved you time and you'd like to chip in toward the running costs, you can buy me a coffee. It's completely optional — the tools stay free either way.", - privP: 'Payment is handled securely by Polar; your files and data never touch it, and nothing here is tracked.', + privP: 'Payment is handled securely by Polar in a new tab; your files and data never touch it, and nothing here is tracked.', thanks: 'Thank you for using GoodWebTools. ❤️', }, id: { title: 'Dukungan', metaDesc: 'GoodWebTools gratis dan privat, tanpa akun. Jika sebuah tool menghemat waktu Anda, Anda bisa membelikan saya kopi — sepenuhnya opsional.', crumb: 'Dukungan', home: 'Beranda', h1: 'Dukung GoodWebTools', - leadH: 'Belikan saya kopi', + leadH: 'Belikan saya kopi', cta: 'Belikan saya kopi', leadP: 'GoodWebTools gratis, berjalan sepenuhnya di browser Anda, tanpa akun atau paywall. Jika sebuah tool menghemat waktu Anda dan Anda ingin ikut membantu biaya operasional, Anda bisa membelikan saya kopi. Ini sepenuhnya opsional — tool-nya tetap gratis.', - privP: 'Pembayaran ditangani dengan aman oleh Polar; berkas dan data Anda tidak menyentuhnya, dan tidak ada yang dilacak di sini.', + privP: 'Pembayaran ditangani dengan aman oleh Polar di tab baru; berkas dan data Anda tidak menyentuhnya, dan tidak ada yang dilacak di sini.', thanks: 'Terima kasih telah memakai GoodWebTools. ❤️', }, }[lang === 'id' ? 'id' : 'en']; @@ -52,7 +51,16 @@ const A = { {A.leadH}

{A.leadP}

- {POLAR_CHECKOUT_URL && } + {POLAR_CHECKOUT_URL && ( + + {A.cta} + + )}

{A.privP}