Add SVG logo, favicons, OG images, and social meta tags

+1

.gitignore

··· 1 + .DS_Store 1 2 /target 2 3 appview/_build/ 3 4 appview/deps/

+119

tools/generate-og-images.mjs

··· 1 + #!/usr/bin/env node 2 + import { execFileSync } from "node:child_process"; 3 + import { writeFileSync, mkdirSync } from "node:fs"; 4 + import { join } from "node:path"; 5 + 6 + const PUBLIC = join(import.meta.dirname, "../web/public"); 7 + const OG_DIR = join(PUBLIC, "og"); 8 + mkdirSync(OG_DIR, { recursive: true }); 9 + 10 + const BG = "#f4f0e8"; 11 + const TEXT = "#1C1408"; 12 + const MUTED = "#5C4A2E"; 13 + const GOLD = "#9A7840"; 14 + const WIDTH = 1200; 15 + const HEIGHT = 630; 16 + 17 + const LOGO_MARK_LG = ` 18 + <rect x="0" y="0" width="90" height="90" rx="7" fill="${GOLD}" fill-opacity="0.7" /> 19 + <rect x="24" y="24" width="90" height="90" rx="7" fill="${GOLD}" fill-opacity="0.2" stroke="${GOLD}" stroke-opacity="0.45" stroke-width="3.5" /> 20 + `; 21 + 22 + const LOGO_MARK_SM = ` 23 + <rect x="0" y="0" width="60" height="60" rx="5" fill="${GOLD}" fill-opacity="0.7" /> 24 + <rect x="16" y="16" width="60" height="60" rx="5" fill="${GOLD}" fill-opacity="0.2" stroke="${GOLD}" stroke-opacity="0.45" stroke-width="2.5" /> 25 + `; 26 + 27 + function escapeXml(s) { 28 + return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """); 29 + } 30 + 31 + function wrapText(text, maxChars) { 32 + const words = text.split(" "); 33 + const lines = []; 34 + let current = ""; 35 + for (const word of words) { 36 + if (current.length + word.length + 1 > maxChars) { 37 + lines.push(current); 38 + current = word; 39 + } else { 40 + current = current ? `${current} ${word}` : word; 41 + } 42 + } 43 + if (current) lines.push(current); 44 + return lines; 45 + } 46 + 47 + function baseSvg() { 48 + return `<svg xmlns="http://www.w3.org/2000/svg" width="${WIDTH}" height="${HEIGHT}" viewBox="0 0 ${WIDTH} ${HEIGHT}"> 49 + <rect width="${WIDTH}" height="${HEIGHT}" fill="${BG}" /> 50 + <g transform="translate(${(WIDTH - 114) / 2}, 110)"> 51 + ${LOGO_MARK_LG} 52 + </g> 53 + <text x="${WIDTH / 2}" y="330" text-anchor="middle" 54 + font-family="Cormorant Garamond, Georgia, serif" font-size="120" font-weight="500" 55 + letter-spacing="0.05em" fill="${TEXT}">Opake</text> 56 + <text x="${WIDTH / 2}" y="400" text-anchor="middle" 57 + font-family="Inter, Helvetica, sans-serif" font-size="34" fill="${MUTED}">Your data, freely shared, privately kept</text> 58 + </svg>`; 59 + } 60 + 61 + function docSvg(title, description) { 62 + const titleLines = wrapText(escapeXml(title), 22); 63 + const descLines = wrapText(escapeXml(description), 45); 64 + 65 + const titleY = 290; 66 + const titleMarkup = titleLines 67 + .map((line, i) => `<tspan x="100" dy="${i === 0 ? 0 : 95}">${line}</tspan>`) 68 + .join(""); 69 + const descStartY = titleY + titleLines.length * 95 + 36; 70 + const descMarkup = descLines 71 + .map((line, i) => `<tspan x="100" dy="${i === 0 ? 0 : 42}">${line}</tspan>`) 72 + .join(""); 73 + 74 + return `<svg xmlns="http://www.w3.org/2000/svg" width="${WIDTH}" height="${HEIGHT}" viewBox="0 0 ${WIDTH} ${HEIGHT}"> 75 + <rect width="${WIDTH}" height="${HEIGHT}" fill="${BG}" /> 76 + <g transform="translate(100, 70)"> 77 + ${LOGO_MARK_SM} 78 + </g> 79 + <text x="186" y="115" 80 + font-family="Cormorant Garamond, Georgia, serif" font-size="42" font-weight="500" 81 + letter-spacing="0.05em" fill="${TEXT}">Opake</text> 82 + <text y="${titleY}" 83 + font-family="Cormorant Garamond, Georgia, serif" font-size="84" font-weight="400" 84 + fill="${TEXT}">${titleMarkup}</text> 85 + <text y="${descStartY}" 86 + font-family="Inter, Helvetica, sans-serif" font-size="32" fill="${MUTED}">${descMarkup}</text> 87 + </svg>`; 88 + } 89 + 90 + const DOCS = [ 91 + { slug: "getting-started", title: "Getting Started", description: "Set up your cabinet, create your first encrypted file, and explore the interface." }, 92 + { slug: "at-protocol", title: "AT Protocol", description: "The open standard powering Opake — identity, data portability, and federation." }, 93 + { slug: "encryption-keys", title: "Encryption & Keys", description: "How end-to-end encryption works in Opake and how your keys are managed." }, 94 + { slug: "sharing-dids", title: "Sharing & DIDs", description: "Share files using decentralised identifiers without a central authority." }, 95 + { slug: "keyrings", title: "Keyrings & Groups", description: "Manage secure group sharing for families, teams, and research groups." }, 96 + { slug: "pairing", title: "Multi-Device Magic", description: "Securely transfer your identity keypair to new devices using your PDS as a relay." }, 97 + { slug: "glossary", title: "Glossary", description: "A quick-hit reference for the terminology and acronyms we use in Opake." }, 98 + { slug: "faq", title: "FAQ", description: "Common questions about privacy, security, and how Opake compares to alternatives." }, 99 + ]; 100 + 101 + function renderPng(svgContent, outputPath) { 102 + const tmpSvg = `${outputPath}.tmp.svg`; 103 + writeFileSync(tmpSvg, svgContent); 104 + execFileSync("npx", ["sharp-cli", "-i", tmpSvg, "-o", outputPath, "resize", String(WIDTH), String(HEIGHT)], { 105 + cwd: join(import.meta.dirname, "../web"), 106 + stdio: "pipe", 107 + }); 108 + execFileSync("rm", [tmpSvg]); 109 + } 110 + 111 + console.log("Generating base OG image..."); 112 + renderPng(baseSvg(), join(OG_DIR, "default.png")); 113 + 114 + for (const doc of DOCS) { 115 + console.log(`Generating OG image for ${doc.slug}...`); 116 + renderPng(docSvg(doc.title, doc.description), join(OG_DIR, `${doc.slug}.png`)); 117 + } 118 + 119 + console.log("Done!");

+1

web/.env.development

··· 1 1 VITE_APPVIEW_URL=http://localhost:6100 2 + VITE_SITE_URL=http://localhost:3000

web/public/apple-touch-icon.png