perf(website): self-host fonts + lazy AnalyzeTab for mobile 90+ (#385)

* perf(website): self-host fonts + lazy-load AnalyzeTab for mobile 90+

- Replace Google Fonts external requests with self-hosted @fontsource packages
  (eliminates ~1s latency on Slow 4G)
- Remove Google Fonts preconnect/preload links and CSP allowances from BaseLayout
- Lazy-load AnalyzeTab via React.lazy() in both HeroPlayground and Playground
  (reduces initial JS by ~124KB)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* ci: add OFL-1.1 to allowed licenses for fontsource packages

SIL Open Font License 1.1 is the standard license for open-source
fonts (IBM Plex Mono, Instrument Sans, JetBrains Mono).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 3 people

.github/workflows/security.yml

@@ -168,7 +168,7 @@ jobs:
           # to handle golang.org/x packages which report as compound license
           allow-licenses: >-
             MIT, Apache-2.0, BSD-2-Clause, BSD-3-Clause, ISC,
-            BlueOak-1.0.0,
+            BlueOak-1.0.0, OFL-1.1,
             LicenseRef-scancode-google-patent-license-golang,
             BSD-3-Clause AND LicenseRef-scancode-google-patent-license-golang
 

website/package-lock.json

@@ -22,6 +22,9 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.40.0",
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/instrument-sans": "^5.2.8",
+    "@fontsource/jetbrains-mono": "^5.2.8",
     "@tailwindcss/typography": "^0.5.19",
     "astro": "^5.18.1",
     "codemirror": "^6.0.2",

website/package.json

@@ -1,10 +1,10 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, Suspense } from "react";
 import { useWasm } from "./WasmLoader";
 import SqlEditor from "./SqlEditor";
 import AstTab from "./playground/AstTab";
 import FormatTab from "./playground/FormatTab";
 import LintTab from "./playground/LintTab";
-import AnalyzeTab from "./playground/AnalyzeTab";
+const AnalyzeTab = React.lazy(() => import("./playground/AnalyzeTab"));
 
 const HERO_SQL = `SELECT u.name, COUNT(o.id) AS orders
 FROM users u
@@ -196,7 +196,9 @@ function InteractiveHero() {
                   {activeTab === "format" && <FormatTab data={results.format} />}
                   {activeTab === "lint" && <LintTab data={results.lint} />}
                   {activeTab === "analyze" && (
-                    <AnalyzeTab data={results.analyze} />
+                    <Suspense fallback={<div className="p-4 text-slate-400">Loading...</div>}>
+                      <AnalyzeTab data={results.analyze} />
+                    </Suspense>
                   )}
                 </div>
               </div>

website/src/components/HeroPlayground.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, Suspense } from "react";
 import { useWasm } from "./WasmLoader";
 import SqlEditor from "./SqlEditor";
 import AstTab from "./playground/AstTab";
 import FormatTab from "./playground/FormatTab";
 import LintTab from "./playground/LintTab";
-import AnalyzeTab from "./playground/AnalyzeTab";
+const AnalyzeTab = React.lazy(() => import("./playground/AnalyzeTab"));
 
 const DEFAULT_SQL = `SELECT u.id, u.name, COUNT(o.id) AS order_count
 FROM users u
@@ -218,7 +218,11 @@ export default function Playground() {
             {activeTab === "ast" && <AstTab data={results.ast} />}
             {activeTab === "format" && <FormatTab data={results.format} />}
             {activeTab === "lint" && <LintTab data={results.lint} />}
-            {activeTab === "analyze" && <AnalyzeTab data={results.analyze} />}
+            {activeTab === "analyze" && (
+              <Suspense fallback={<div className="p-4 text-slate-400">Loading...</div>}>
+                <AnalyzeTab data={results.analyze} />
+              </Suspense>
+            )}
           </div>
         </div>
       </div>

website/src/components/Playground.tsx

@@ -35,12 +35,8 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <link rel="alternate" hreflang="x-default" href={canonicalURL}>
     <link rel="icon" type="image/png" href="/images/logo.png" />
     <link rel="preconnect" href="https://gosqlx.dev" crossorigin>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preload" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=Instrument+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=Instrument+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap"></noscript>
     <link rel="preconnect" href="https://img.shields.io" crossorigin>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' https://img.shields.io https://goreportcard.com https://*.shields.io data:; connect-src 'self'">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' https://img.shields.io https://goreportcard.com https://*.shields.io data:; connect-src 'self'">
     <title>{title}</title>
     <script type="application/ld+json" set:html={JSON.stringify({
       "@context": "https://schema.org",

website/src/layouts/BaseLayout.astro

@@ -1,3 +1,11 @@
+/* Self-hosted fonts */
+@import '@fontsource/instrument-sans/400.css';
+@import '@fontsource/instrument-sans/600.css';
+@import '@fontsource/instrument-sans/700.css';
+@import '@fontsource/ibm-plex-mono/500.css';
+@import '@fontsource/ibm-plex-mono/700.css';
+@import '@fontsource/jetbrains-mono/400.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;