Skip to content

feat: add campaign share card generator and OG meta tags (#593) #746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
queenfrostbite wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add campaign share card generator and OG meta tags (#593) #746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
07f6e88
Merge branch 'main' into feature/share-card
queenfrostbite Jul 31, 2026
e4a752b
fix: resolve review alerts for share card feature
queenfrostbite Jul 31, 2026
7da98ab
Merge branch 'main' into feature/share-card
queenfrostbite Aug 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 40 additions & 40 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- PWA: theme color for browser chrome on Android/iOS -->
<meta name="theme-color" content="#1a1a2e" />
<!-- PWA: viewport and mobile web app settings -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- iOS PWA settings -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Goal Vault" />
<!-- PWA icons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
<link rel="icon" type="image/svg+xml" href="/icon-192.svg" />
<!-- SEO / share -->
<meta name="description" content="Decentralized campaign funding platform on the Stellar network." />
<meta property="og:title" content="Stellar Goal Vault" />
<meta property="og:description" content="Decentralized campaign funding platform on the Stellar network." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://stellar-goal-vault.vercel.app" />
<meta name="twitter:card" content="summary_large_image" />
<title>Stellar Goal Vault</title>
<!-- Inline theme detection to avoid FOUC — runs before React hydrates -->
<script>
(function() {
const THEME_KEY = 'stellar-goal-vault-theme';
const storedTheme = localStorage.getItem(THEME_KEY);
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = storedTheme || systemTheme;
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- PWA: theme color for browser chrome on Android/iOS -->
<meta name="theme-color" content="#1a1a2e" />
<!-- PWA: viewport and mobile web app settings -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- iOS PWA settings -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Goal Vault" />
<!-- PWA icons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
<link rel="icon" type="image/svg+xml" href="/icon-192.svg" />
<!-- SEO / share -->
<meta name="description" content="Decentralized campaign funding platform on the Stellar network." />
<meta property="og:title" content="Stellar Goal Vault" />
<meta property="og:description" content="Decentralized campaign funding platform on the Stellar network." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://stellar-goal-vault.vercel.app" />
<meta name="twitter:card" content="summary_large_image" />
<title>Stellar Goal Vault</title>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<!-- Inline theme detection to avoid FOUC — runs before React hydrates -->
<script>
(function() {
const THEME_KEY = 'stellar-goal-vault-theme';
const storedTheme = localStorage.getItem(THEME_KEY);
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = storedTheme || systemTheme;
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
1 change: 1 addition & 0 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -772,6 +772,7 @@ function App() {
onClaim={handleClaim}
onSoftDelete={handleSoftDelete}
onRefund={handleRefund}
onToast={addToast}
/>
</ErrorBoundary>
</section>
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/components/CampaignDetailPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { useCampaignShareCard } from './CampaignShareCard';
import { useToast } from '../hooks/useToast';
import { ShareButtons } from './ShareButtons';
import { useMinDisplayTime } from '../hooks/useMinDisplayTime';
import type { ToastVariant } from '../hooks/useToast';

interface CampaignDetailPanelProps {
campaign: Campaign | null;
Expand All @@ -30,6 +31,11 @@ interface CampaignDetailPanelProps {
onSoftDelete?: (campaignId: string) => Promise<void>;
onRefund?: (campaignId: string, contributor: string) => Promise<void>;
onClose?: () => void;
onToast?: (
message: string,
variant?: ToastVariant,
link?: { href: string; label: string },
) => void;
}

const FEE_ESTIMATION_ERROR_CODES = new Set([
Expand Down Expand Up @@ -79,6 +85,7 @@ export function CampaignDetailPanel({
onPledge = async () => {},
onClaim = async () => {},
onRefund = async () => {},
onToast,
}: CampaignDetailPanelProps) {
const [pledgeAmount, setPledgeAmount] = useState('25');
const [pledgeToken, setPledgeToken] = useState('');
Expand Down
Loading