chore: move inline JS to external script (#13203)

* chore: move inline JS to external script * chore: add typekit to font-src
2026-02-04 03:11:21 +01:00 · 2025-10-14 12:10:32 -07:00
parent b2c6f368c6
commit ee4d5da0db
10 changed files with 75 additions and 80 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,5 @@
 gatsby/
 gatsby*
 mdxImportGen.js
-public
+public
+static/scripts/
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ static/fonts/MatterSQItalicVF.woff
 static/fonts/MatterSQItalicVF.woff2
 static/fonts/MatterSQVF.woff
 static/fonts/MatterSQVF.woff2
+static/scripts/posthog-init.js
 yarn.lock
 .vercel
 .env
--- a/gatsby-node.ts
+++ b/gatsby-node.ts
@@ -11,7 +11,7 @@ export { onPostBuild } from './gatsby/onPostBuild'
 export { createResolvers } from './gatsby/createResolvers'
 export { onPreBootstrap } from './gatsby/onPreBootstrap'

-// Implement the Gatsby API “onCreatePage”. This is
+// Implement the Gatsby API "onCreatePage". This is
 // called after every page is created.
 export const onCreatePage: GatsbyNode['onCreatePage'] = async ({ page, actions }) => {
    const { createPage, deletePage } = actions
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -32,48 +32,7 @@ export const onRenderBody = function ({ setPreBodyComponents }) {
    setPreBodyComponents([
        React.createElement('script', {
            key: 'dark-mode',
-            dangerouslySetInnerHTML: {
-                __html: `
-(function () {
-    window.__onThemeChange = function () {}
-    function setTheme(newTheme) {
-        window.__theme = newTheme
-        preferredTheme = newTheme
-        document.body.className = newTheme
-        window.__onThemeChange(newTheme)
-    }
-    var preferredTheme
-    var slug = window.location.pathname.substring(1)
-    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    darkQuery.addListener(function (e) {
-        if (!localStorage.getItem('theme')) {
-            window.__setPreferredTheme('system')
-        }
-    })
-    try {
-        preferredTheme =
-            localStorage.getItem('theme') || 'light'
-    } catch (err) {}
-    window.__setPreferredTheme = function (theme) {
-        const newTheme = theme === 'system' ? (darkQuery.matches ? 'dark' : 'light') : theme
-        setTheme(newTheme)
-        try {
-            localStorage.setItem('theme', newTheme)
-        } catch (err) {}
-        return newTheme
-    }
-    setTheme(preferredTheme === 'system' ? (darkQuery.matches ? 'dark' : 'light') : preferredTheme)
-
-    // Set initial skin value
-    try {
-        const savedSkin = JSON.parse(localStorage.getItem('siteSettings') || '{}').skinMode || 'modern'
-        document.body.setAttribute('data-skin', savedSkin)
-        const savedWallpaper = JSON.parse(localStorage.getItem('siteSettings') || '{}').wallpaper || 'keyboard-garden'
-        document.body.setAttribute('data-wallpaper', savedWallpaper)
-    } catch (err) {}
-})()
-      `,
-            },
+            src: '/scripts/theme-init.js',
        }),
    ])
 }
--- a/gatsby/onPreBootstrap.ts
+++ b/gatsby/onPreBootstrap.ts
@@ -9,6 +9,34 @@ export const PAGEVIEW_CACHE_KEY = 'onPreBootstrap@@posthog-pageviews'
 export const MCP_TOOLS_CACHE_KEY = 'onPreBootstrap@@mcp-tools'

 export const onPreBootstrap: GatsbyNode['onPreBootstrap'] = async ({ cache }) => {
+    if (process.env.GATSBY_POSTHOG_API_KEY && process.env.GATSBY_POSTHOG_API_HOST) {
+        const posthogScript = `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+posthog.init("${process.env.GATSBY_POSTHOG_API_KEY}", {
+    api_host: "${process.env.GATSBY_POSTHOG_API_HOST}",
+    ui_host: "${process.env.GATSBY_POSTHOG_UI_HOST}",
+    capture_pageview: false,
+    capture_pageleave: true,
+    persistence: 'localStorage+cookie',
+    uuid_version:'v7',
+    session_recording: {
+        maskAllInputs: false,
+        maskInputOptions: {
+            password: true,
+        },
+    },
+    person_profiles: 'identified_only',
+    __preview_heatmaps: true,
+    opt_in_site_apps: true,
+    __preview_remote_config: true,
+    __preview_flags_v2: true,
+    __preview_lazy_load_replay: true,
+    cookieless_mode: navigator.userAgent.includes("Firefox/") ? "on_reject" : undefined,
+    __preview_disable_xhr_credentials: true,
+})`
+        const scriptsDir = path.resolve(__dirname, '../static/scripts')
+        fs.writeFileSync(path.join(scriptsDir, 'posthog-init.js'), posthogScript)
+    }
+
    // Copy hedgehog mode assets to public folder
    const source = path.resolve('node_modules/@posthog/hedgehog-mode/assets')
    const hedgehogModeDir = path.resolve(__dirname, '../public/hedgehog-mode')
--- a/src/components/ContactSales/index.tsx
+++ b/src/components/ContactSales/index.tsx
@@ -63,12 +63,7 @@ export default function ContactSales({ location }) {

    return (
        <>
-            <Script
-                id="default-form-script"
-                dangerouslySetInnerHTML={{
-                    __html: `!function(t,e){const o=509041,n=482;let a=0,i=!1;t.__default__={form_id:o,team_id:n,listenToIds:["contact-sales"]},function t(){const r=e.createElement("script");r.async=!0,r.src="https://import-cdn.default.com/v2/index.js",r.onload=()=>{i=!0,console.info("[Default.com] Powered by Default.com")},r.onerror=()=>{!function(t,e){try{fetch("https://nucleus.default.com/import/error",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({errorMessage:t,payload:{attempt:e,form_id:o,team_id:n,location:window.location.href,userAgent:navigator.userAgent,timestamp:Date.now()}})})}catch(t){}}("Script failed to load",a),++a<=3&&setTimeout(t,1e3*a)},e.head.appendChild(r)}()}(window,document);`,
-                }}
-            />
+            <Script id="default-form-script" src="/scripts/default-form-script.js" />
            <SEO
                title="Talk to a human - PostHog"
                description="PostHog is self-serve, but you can talk to a real person if you need to!"
--- a/src/html.tsx
+++ b/src/html.tsx
@@ -40,35 +40,7 @@ export default function HTML(props: HTMLProps): JSX.Element {
                    crossOrigin="anonymous"
                />
                {process.env.GATSBY_POSTHOG_API_KEY && process.env.GATSBY_POSTHOG_API_HOST && (
-                    <script
-                        dangerouslySetInnerHTML={{
-                            __html: `
-                            !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-                            posthog.init("${process.env.GATSBY_POSTHOG_API_KEY}", {
-                                api_host: "${process.env.GATSBY_POSTHOG_API_HOST}",
-                                ui_host: "${process.env.GATSBY_POSTHOG_UI_HOST}",
-                                capture_pageview: false,
-                                capture_pageleave: true,
-                                persistence: 'localStorage+cookie',
-                                uuid_version:'v7',
-                                session_recording: {
-                                    maskAllInputs: false,
-                                    maskInputOptions: {
-                                        password: true,
-                                    },
-                                },
-                                person_profiles: 'identified_only',
-                                __preview_heatmaps: true,
-                                opt_in_site_apps: true,
-                                __preview_remote_config: true,
-                                __preview_flags_v2: true,
-                                __preview_lazy_load_replay: true,
-                                cookieless_mode: navigator.userAgent.includes("Firefox/") ? "on_reject" : undefined,
-                                __preview_disable_xhr_credentials: true,
-                            })
-                            `,
-                        }}
-                    />
+                    <script src="/scripts/posthog-init.js" />
                )}

                {props.headComponents}
--- a/static/scripts/default-form-script.js
+++ b/static/scripts/default-form-script.js
@@ -0,0 +1 @@
+!function(t,e){const o=509041,n=482;let a=0,i=!1;t.__default__={form_id:o,team_id:n,listenToIds:["contact-sales"]},function t(){const r=e.createElement("script");r.async=!0,r.src="https://import-cdn.default.com/v2/index.js",r.onload=()=>{i=!0,console.info("[Default.com] Powered by Default.com")},r.onerror=()=>{!function(t,e){try{fetch("https://nucleus.default.com/import/error",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({errorMessage:t,payload:{attempt:e,form_id:o,team_id:n,location:window.location.href,userAgent:navigator.userAgent,timestamp:Date.now()}})})}catch(t){}}("Script failed to load",a),++a<=3&&setTimeout(t,1e3*a)},e.head.appendChild(r)}()}(window,document);
--- a/static/scripts/theme-init.js
+++ b/static/scripts/theme-init.js
@@ -0,0 +1,38 @@
+(function () {
+    window.__onThemeChange = function () {}
+    function setTheme(newTheme) {
+        window.__theme = newTheme
+        preferredTheme = newTheme
+        document.body.className = newTheme
+        window.__onThemeChange(newTheme)
+    }
+    var preferredTheme
+    var slug = window.location.pathname.substring(1)
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    darkQuery.addListener(function (e) {
+        if (!localStorage.getItem('theme')) {
+            window.__setPreferredTheme('system')
+        }
+    })
+    try {
+        preferredTheme =
+            localStorage.getItem('theme') || 'light'
+    } catch (err) {}
+    window.__setPreferredTheme = function (theme) {
+        const newTheme = theme === 'system' ? (darkQuery.matches ? 'dark' : 'light') : theme
+        setTheme(newTheme)
+        try {
+            localStorage.setItem('theme', newTheme)
+        } catch (err) {}
+        return newTheme
+    }
+    setTheme(preferredTheme === 'system' ? (darkQuery.matches ? 'dark' : 'light') : preferredTheme)
+
+    // Set initial skin value
+    try {
+        const savedSkin = JSON.parse(localStorage.getItem('siteSettings') || '{}').skinMode || 'modern'
+        document.body.setAttribute('data-skin', savedSkin)
+        const savedWallpaper = JSON.parse(localStorage.getItem('siteSettings') || '{}').wallpaper || 'keyboard-garden'
+        document.body.setAttribute('data-wallpaper', savedWallpaper)
+    } catch (err) {}
+})()
--- a/vercel.json
+++ b/vercel.json
@@ -1623,7 +1623,7 @@
            "headers": [
                {
                    "key": "Content-Security-Policy-Report-Only",
-                    "value": "default-src 'self'; script-src 'self' https://*.posthog.com https://www.youtube.com https://fast.wistia.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://*.posthog.com https://res.cloudinary.com https://www.gravatar.com https://raw.githubusercontent.com https://obuldanrptloktxcffvn.supabase.co https://cdn.shopify.com https://i.ytimg.com https://embed-ssl.wistia.com https://fast.wistia.com https://cdn.jsdelivr.net https://user-images.githubusercontent.com https://brandbadge.clearbit.com; font-src 'self' data: https://d27nj4tzr3d5tm.cloudfront.net https://res.cloudinary.com https://fonts.gstatic.com https://r2cdn.perplexity.ai https://fast.wistia.com; connect-src 'self' https://*.posthog.com https://api.github.com https://lottie.host https://better-animal-d658c56969.strapiapp.com https://forms.default.com https://posthog.myshopify.com https://*.algolia.net https://*.algolianet.com https://api.io.inkeep.com https://fast.wistia.net https://fast.wistia.com https://embed-cloudfront.wistia.com https://api.inkeep.com; media-src 'self' https://d1hovhsvet4m1p.cloudfront.net https://res.cloudinary.com blob:; frame-src 'self' https://www.youtube-nocookie.com https://hogwars.vercel.app https://hedgehog-mode-playground.vercel.app; worker-src 'self' blob:; child-src 'self' blob:; object-src 'none'; frame-ancestors 'none'; report-uri https://us.i.posthog.com/report/?token=sTMFPsFhdP1Ssg&sample_rate=0.1&v=1; report-to posthog"
+                    "value": "default-src 'self'; script-src 'self' https://*.posthog.com https://www.youtube.com https://fast.wistia.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://*.posthog.com https://res.cloudinary.com https://www.gravatar.com https://raw.githubusercontent.com https://obuldanrptloktxcffvn.supabase.co https://cdn.shopify.com https://i.ytimg.com https://embed-ssl.wistia.com https://fast.wistia.com https://cdn.jsdelivr.net https://user-images.githubusercontent.com https://brandbadge.clearbit.com; font-src 'self' data: https://d27nj4tzr3d5tm.cloudfront.net https://res.cloudinary.com https://fonts.gstatic.com https://r2cdn.perplexity.ai https://fast.wistia.com https://use.typekit.net; connect-src 'self' https://*.posthog.com https://api.github.com https://lottie.host https://better-animal-d658c56969.strapiapp.com https://forms.default.com https://posthog.myshopify.com https://*.algolia.net https://*.algolianet.com https://api.io.inkeep.com https://fast.wistia.net https://fast.wistia.com https://embed-cloudfront.wistia.com https://api.inkeep.com; media-src 'self' https://d1hovhsvet4m1p.cloudfront.net https://res.cloudinary.com blob:; frame-src 'self' https://www.youtube-nocookie.com https://hogwars.vercel.app https://hedgehog-mode-playground.vercel.app; worker-src 'self' blob:; child-src 'self' blob:; object-src 'none'; frame-ancestors 'none'; report-uri https://us.i.posthog.com/report/?token=sTMFPsFhdP1Ssg&sample_rate=0.1&v=1; report-to posthog"
                },
                {
                    "key": "Reporting-Endpoints",
				`@@ -0,0 +1 @@`
				!function(t,e){const o=509041,n=482;let a=0,i=!1;t.__default__={form_id:o,team_id:n,listenToIds:["contact-sales"]},function t(){const r=e.createElement("script");r.async=!0,r.src="https://import-cdn.default.com/v2/index.js",r.onload=()=>{i=!0,console.info("[Default.com] Powered by Default.com")},r.onerror=()=>{!function(t,e){try{fetch("https://nucleus.default.com/import/error",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({errorMessage:t,payload:{attempt:e,form_id:o,team_id:n,location:window.location.href,userAgent:navigator.userAgent,timestamp:Date.now()}})})}catch(t){}}("Script failed to load",a),++a<=3&&setTimeout(t,1e3*a)},e.head.appendChild(r)}()}(window,document);