Skip to content
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.

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

Sets up scripts to place pseudo nonces to be transformed by revproxy. #787

Merged
merged 5 commits into from
Oct 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type AppPropsWithLayout = AppProps & {

export function reportWebVitals(metric: object) {
// eslint-disable-next-line no-console
console.log(metric)
// console.log(metric)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very old and should probably be removed.

}

export default function MyApp({
Expand Down
244 changes: 133 additions & 111 deletions src/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -1,126 +1,148 @@
import { Html, Main, NextScript, Head } from 'next/document'
import Document, { Html, Main, NextScript, Head } from 'next/document'
import { GTM_ID } from '@/lib/analytics'
import Script from 'next/script'
import React from 'react'

const Document = () => {
const ASSETS_URL = process.env.NEXT_PUBLIC_ASSETS_URL || '/generated/'
class CustomHead extends Head {
getScripts(files) {
const originalScripts = super.getScripts(files)
return originalScripts.map((script) => {
return React.cloneElement(script, {
'data-nb-nonce': '**CSP_NONCE**',
})
})
}
}

class CustomDocument extends Document {
#ASSETS_URL = process.env.NEXT_PUBLIC_ASSETS_URL || '/generated/'
#nonce = '**CSP_NONCE**'

return (
<Html lang="en" dir="ltr">
<Head>
<meta charSet="utf-8" />
<link
href={`${ASSETS_URL}static-pages.css`}
data-entry-name="static-pages.css"
rel="stylesheet"
/>
<link rel="stylesheet" href={`${ASSETS_URL}style.css`} />
render() {
return (
<Html lang="en" dir="ltr">
<CustomHead>
<meta charSet="utf-8" />
<link
href={`${this.#ASSETS_URL}static-pages.css`}
data-entry-name="static-pages.css"
rel="stylesheet"
/>
<link rel="stylesheet" href={`${this.#ASSETS_URL}style.css`} />

<Script
id="web-components"
strategy="beforeInteractive"
src={`${ASSETS_URL}web-components.entry.js`}
/>
<Script
id="web-components"
strategy="beforeInteractive"
src={`${this.#ASSETS_URL}web-components.entry.js`}
data-nb-nonce={this.#nonce}
/>

{/* Add vendor file */}
<Script
id="vendor"
strategy="beforeInteractive"
src={`${ASSETS_URL}vendor.entry.js`}
/>
{/* Add vendor file */}
<Script
id="vendor"
strategy="beforeInteractive"
src={`${this.#ASSETS_URL}vendor.entry.js`}
data-nb-nonce={this.#nonce}
/>

{/* Preconnect to google tag manager domain */}
<link rel="preconnect" href="https://www.googletagmanager.com" />
{/* Preconnect to google tag manager domain */}
<link rel="preconnect" href="https://www.googletagmanager.com" />

{/* Preload main fonts */}
<link
rel="preload"
href={`${ASSETS_URL}sourcesanspro-bold-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${ASSETS_URL}sourcesanspro-regular-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${ASSETS_URL}bitter-bold.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${ASSETS_URL}fa-solid-900.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
{/* Preload main fonts */}
<link
rel="preload"
href={`${this.#ASSETS_URL}sourcesanspro-bold-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${this.#ASSETS_URL}sourcesanspro-regular-webfont.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${this.#ASSETS_URL}bitter-bold.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${this.#ASSETS_URL}fa-solid-900.woff2`}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>

{/* Load Icons */}
<link
href="/img/design/icons/apple-touch-icon.png"
rel="apple-touch-icon-precomposed"
/>
<link
href="/img/design/icons/apple-touch-icon-72x72.png"
rel="apple-touch-icon-precomposed"
sizes="72x72"
/>
<link
href="/img/design/icons/apple-touch-icon-114x114.png"
rel="apple-touch-icon-precomposed"
sizes="114x114"
/>
<link
href="/img/design/icons/apple-touch-icon-152x152.png"
rel="apple-touch-icon-precomposed"
sizes="144x144"
/>
<link
rel="shortcut icon"
sizes="any"
href="/img/design/icons/favicon.ico"
/>
{/* Load Icons */}
<link
href="/img/design/icons/apple-touch-icon.png"
rel="apple-touch-icon-precomposed"
/>
<link
href="/img/design/icons/apple-touch-icon-72x72.png"
rel="apple-touch-icon-precomposed"
sizes="72x72"
/>
<link
href="/img/design/icons/apple-touch-icon-114x114.png"
rel="apple-touch-icon-precomposed"
sizes="114x114"
/>
<link
href="/img/design/icons/apple-touch-icon-152x152.png"
rel="apple-touch-icon-precomposed"
sizes="144x144"
/>
<link
rel="shortcut icon"
sizes="any"
href="/img/design/icons/favicon.ico"
/>

{/* Add web components */}
<link rel="stylesheet" href={`${ASSETS_URL}web-components.css`} />
{/* Add web components */}
<link
rel="stylesheet"
href={`${this.#ASSETS_URL}web-components.css`}
/>

{/* Add polyfills */}
<Script
id="polyfills"
noModule
strategy="afterInteractive"
src={`${ASSETS_URL}polyfills.entry.js`}
/>
{/* Add polyfills */}
<Script
id="polyfills"
noModule
strategy="afterInteractive"
src={`${this.#ASSETS_URL}polyfills.entry.js`}
data-nb-nonce={this.#nonce}
/>

{/* We participate in the US government’s analytics program. See the data at analytics.usa.gov. https://github.com/digital-analytics-program/gov-wide-code */}
<Script
src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=VA"
id="_fed_an_ua_tag"
strategy="afterInteractive"
async
/>
</Head>
<body className="merger">
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
{/* We participate in the US government’s analytics program. See the data at analytics.usa.gov. https://github.com/digital-analytics-program/gov-wide-code */}
<Script
src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=VA"
id="_fed_an_ua_tag"
strategy="afterInteractive"
async
data-nb-nonce={this.#nonce}
/>
</noscript>
<Main />
<NextScript />
</body>
</Html>
)
</CustomHead>
<body className="merger">
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default Document
export default CustomDocument
Loading