| 1 | /** @jsxImportSource hono/jsx */ |
| 2 | /** |
| 3 | * Favicons, app icons, the social preview image, robots.txt, sitemap.xml and the |
| 4 | * search/social meta tags every page carries. |
| 5 | * |
| 6 | * The PNG and ICO files come from scripts/make-icons.py (icons.generated.ts). Google |
| 7 | * shows a site's favicon in results when it is crawlable, square and a multiple of |
| 8 | * 48px, so /favicon.ico (16–64px) and /favicon-48.png are linked from every page. |
| 9 | */ |
| 10 | import { raw } from "hono/html"; |
| 11 | import type { AppContext } from "../auth/principal.js"; |
| 12 | import type { WebApp } from "./ui.js"; |
| 13 | import { ICON_FILES } from "./icons.generated.js"; |
| 14 | import { docsSitemapPaths } from "../docs/web.js"; |
| 15 | |
| 16 | export const SITE = { |
| 17 | name: "Diffinery", |
| 18 | tagline: "Code hosting and CI for the agentic era", |
| 19 | description: |
| 20 | "Diffinery is code hosting and CI for the agentic era: Git repositories, pull requests with intent, GitHub Actions compatible workflows and AI agents as first-class collaborators, running on Cloudflare.", |
| 21 | color: "#f6821f", |
| 22 | }; |
| 23 | |
| 24 | /** The mark on an orange tile, for browsers that take SVG favicons. */ |
| 25 | export const FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="5.3" fill="${SITE.color}"/><g transform="translate(2.4 2.4) scale(.8)" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="12" r="2.5"/><path d="M6 8.5v7M8.3 7.2c4 1 7.4 2.2 7.6 3.3M8.3 16.8c4-1 7.4-2.2 7.6-3.3"/></g></svg>`; |
| 26 | |
| 27 | const TYPES: Record<string, string> = { ico: "image/x-icon", png: "image/png" }; |
| 28 | const bytes = new Map<string, Uint8Array<ArrayBuffer>>(); |
| 29 | function file(name: string): Uint8Array<ArrayBuffer> | null { |
| 30 | const b64 = ICON_FILES[name]; |
| 31 | if (!b64) return null; |
| 32 | let b = bytes.get(name); |
| 33 | if (!b) { |
| 34 | const bin = atob(b64); |
| 35 | b = new Uint8Array(bin.length); |
| 36 | for (let i = 0; i < bin.length; i++) b[i] = bin.charCodeAt(i); |
| 37 | bytes.set(name, b); |
| 38 | } |
| 39 | return b; |
| 40 | } |
| 41 | |
| 42 | const CACHE = "public, max-age=604800"; |
| 43 | |
| 44 | /** Paths that are never useful in search results. */ |
| 45 | const PRIVATE = /^\/(login|logout|auth|signin|signup|invite|settings|notifications|new|admin|request-access|-)(\/|$)/; |
| 46 | |
| 47 | export function registerSeo(web: WebApp): void { |
| 48 | for (const name of Object.keys(ICON_FILES)) { |
| 49 | const type = TYPES[name.split(".").pop()!]!; |
| 50 | web.get(`/${name}`, (c) => c.body(file(name)!, 200, { "content-type": type, "cache-control": CACHE, "x-content-type-options": "nosniff" })); |
| 51 | } |
| 52 | web.get("/favicon.svg", (c) => c.body(FAVICON_SVG, 200, { "content-type": "image/svg+xml", "cache-control": CACHE, "x-content-type-options": "nosniff" })); |
| 53 | web.get("/site.webmanifest", (c) => |
| 54 | c.body( |
| 55 | JSON.stringify({ |
| 56 | name: SITE.name, |
| 57 | short_name: SITE.name, |
| 58 | description: SITE.description, |
| 59 | start_url: "/", |
| 60 | display: "standalone", |
| 61 | background_color: "#ffffff", |
| 62 | theme_color: SITE.color, |
| 63 | icons: [ |
| 64 | { src: "/icon-192.png", sizes: "192x192", type: "image/png" }, |
| 65 | { src: "/icon-512.png", sizes: "512x512", type: "image/png" }, |
| 66 | { src: "/icon-maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" }, |
| 67 | ], |
| 68 | }), |
| 69 | 200, |
| 70 | { "content-type": "application/manifest+json", "cache-control": CACHE }, |
| 71 | ), |
| 72 | ); |
| 73 | web.get("/robots.txt", (c) => { |
| 74 | const origin = c.env.PUBLIC_URL.replace(/\/$/, ""); |
| 75 | const lines = [ |
| 76 | "User-agent: *", |
| 77 | "Allow: /", |
| 78 | ...["/api/", "/mcp", "/runner/", "/auth/", "/login", "/signin/", "/invite/", "/settings", "/notifications", "/new", "/admin", "/request-access", "/-/", "/*.git/", "/*/raw/"].map((p) => `Disallow: ${p}`), |
| 79 | "", |
| 80 | `Sitemap: ${origin}/sitemap.xml`, |
| 81 | "", |
| 82 | ]; |
| 83 | return c.text(lines.join("\n"), 200, { "cache-control": "public, max-age=86400" }); |
| 84 | }); |
| 85 | web.get("/sitemap.xml", async (c) => { |
| 86 | const origin = c.env.PUBLIC_URL.replace(/\/$/, ""); |
| 87 | const repos = await c.get("dir").publicRepos(5000); |
| 88 | const esc = (s: string) => s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); |
| 89 | const url = (loc: string, lastmod?: string | null) => `<url><loc>${esc(loc)}</loc>${lastmod ? `<lastmod>${esc(lastmod.slice(0, 10))}</lastmod>` : ""}</url>`; |
| 90 | const body = [ |
| 91 | '<?xml version="1.0" encoding="UTF-8"?>', |
| 92 | '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">', |
| 93 | url(`${origin}/`), |
| 94 | ...docsSitemapPaths().map((p) => url(`${origin}${p}`)), |
| 95 | ...repos.map((r) => url(`${origin}/${encodeURIComponent(r.owner_login)}/${encodeURIComponent(r.name)}`, r.pushed_at ?? r.updated_at)), |
| 96 | "</urlset>", |
| 97 | ].join("\n"); |
| 98 | return c.body(body, 200, { "content-type": "application/xml; charset=utf-8", "cache-control": "public, max-age=3600" }); |
| 99 | }); |
| 100 | } |
| 101 | |
| 102 | export type SeoOpts = { |
| 103 | title: string; |
| 104 | description?: string; |
| 105 | /** Keep the page out of search results. */ |
| 106 | noindex?: boolean; |
| 107 | /** Add WebSite and Organization structured data (the home page). */ |
| 108 | home?: boolean; |
| 109 | nonce: string; |
| 110 | }; |
| 111 | |
| 112 | /** Icons plus search and social meta tags for the page's <head>. */ |
| 113 | export function SeoHead(c: AppContext, o: SeoOpts) { |
| 114 | const origin = c.env.PUBLIC_URL.replace(/\/$/, ""); |
| 115 | const path = c.req.path; |
| 116 | const url = `${origin}${path}`; |
| 117 | const description = o.description?.trim() || SITE.description; |
| 118 | const noindex = o.noindex || PRIVATE.test(path); |
| 119 | const image = `${origin}/og-image.png`; |
| 120 | const ld = o.home |
| 121 | ? JSON.stringify([ |
| 122 | { "@context": "https://schema.org", "@type": "WebSite", name: SITE.name, url: `${origin}/` }, |
| 123 | { "@context": "https://schema.org", "@type": "Organization", name: SITE.name, url: `${origin}/`, logo: `${origin}/icon-512.png` }, |
| 124 | ]).replace(/</g, "\\u003c") |
| 125 | : null; |
| 126 | return ( |
| 127 | <> |
| 128 | <meta name="description" content={description} /> |
| 129 | {noindex ? <meta name="robots" content="noindex, nofollow" /> : <link rel="canonical" href={url} />} |
| 130 | <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" /> |
| 131 | <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> |
| 132 | <link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png" /> |
| 133 | <link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png" /> |
| 134 | <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> |
| 135 | <link rel="manifest" href="/site.webmanifest" /> |
| 136 | <meta name="theme-color" content={SITE.color} /> |
| 137 | <meta name="application-name" content={SITE.name} /> |
| 138 | <meta name="apple-mobile-web-app-title" content={SITE.name} /> |
| 139 | <meta property="og:type" content="website" /> |
| 140 | <meta property="og:site_name" content={SITE.name} /> |
| 141 | <meta property="og:title" content={o.title} /> |
| 142 | <meta property="og:description" content={description} /> |
| 143 | <meta property="og:url" content={url} /> |
| 144 | <meta property="og:image" content={image} /> |
| 145 | <meta property="og:image:width" content="1200" /> |
| 146 | <meta property="og:image:height" content="630" /> |
| 147 | <meta property="og:image:alt" content={`${SITE.name}: ${SITE.tagline}`} /> |
| 148 | <meta name="twitter:card" content="summary_large_image" /> |
| 149 | <meta name="twitter:title" content={o.title} /> |
| 150 | <meta name="twitter:description" content={description} /> |
| 151 | <meta name="twitter:image" content={image} /> |
| 152 | {ld ? <script type="application/ld+json" nonce={o.nonce}>{raw(ld)}</script> : null} |
| 153 | </> |
| 154 | ); |
| 155 | } |