Skip to content

Commit

Permalink
chore(ssr): use jsx in ssr/render.tsx
Browse files Browse the repository at this point in the history 
generate csp hashes in webpack
remove manual asset hashing
  • Loading branch information
@LeoMcA
LeoMcA committed Aug 22, 2024
1 parent 19a1854 commit 96fd148
Show file tree
Hide file tree
Showing 16 changed files with 483 additions and 409 deletions.
17 changes: 1 addition & 16 deletions client/config/webpack.config.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -383,29 +383,14 @@ function config(webpackEnv) {
}, },
plugins: [ plugins: [
// Generates an `index.html` file with the <script> injected. // Generates an `index.html` file with the <script> injected.
isEnvDevelopment &&
new HtmlWebpackPlugin( new HtmlWebpackPlugin(
Object.assign( Object.assign(
{}, {},
{ {
inject: true, inject: true,
template: paths.appHtml, template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
} }
: undefined
) )
), ),
// Makes some environment variables available to the JS code, for example: // Makes some environment variables available to the JS code, for example:
Expand Down
126 changes: 1 addition & 125 deletions client/public/index.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,136 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en" prefix="og: https://ogp.me/ns#"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

<!--
Note that our build process will rewrite this 'href' value to a copy
of the file that has a hash in it.
-->

<link rel="icon" href="/favicon-48x48.png" /> <link rel="icon" href="/favicon-48x48.png" />

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<meta name="theme-color" content="#ffffff" />

<link rel="manifest" href="/manifest.json" />

<link
rel="search"
type="application/opensearchdescription+xml"
href="/opensearch.xml"
title="MDN Web Docs"
/>

<title>MDN Web Docs</title> <title>MDN Web Docs</title>
<meta name="SSR_DATA" />
<meta
name="description"
content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
/>

<!--
Why these Open Graph meta tags? ...when the '<title>' and '<meta name=description>'
already exist?
Well, because of Twitter.
When you paste in an MDN URL into Twitter it will not make a "card".
See this comment: https://github.com/mdn/yari/issues/3590#issuecomment-825153396
According to Twitter's documentation on "Cards" they will use their proprietary
tags (e.g. `<meta name="twitter:card" content="summary">`) but if not available
they will fall back to Open Graph meta tags.
See https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#opengraph
It is a lot of repetition and additional bloat to the index.html files. But
keep in mind that repeated strings of texts compresses very well and most
clients will only download the Gzip or Brotli compressed HTML file.
Remember, all of these are *default* values. The actual values are processed in
ssr/render.js and uses cheerio to replace the content on all of these.
-->
<meta property="og:url" content="https://developer.mozilla.org" />
<meta property="og:title" content="MDN Web Docs" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta
property="og:description"
content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
/>
<meta property="og:image" content="/mdn-social-share.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:width" content="1920" />
<meta
property="og:image:alt"
content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."
/>
<meta property="og:site_name" content="MDN Web Docs" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="MozDevNet" />

<link rel="canonical" href="https://developer.mozilla.org" />
<style media="print">
.article-actions-container,
.main-menu-toggle,
.document-toc-container,
.on-github,
.sidebar,
.top-navigation-main,
.page-footer,
.top-banner,
.place,
ul.prev-next,
.language-menu {
display: none !important;
}

.main-page-content,
.main-page-content pre {
padding: 2px;
}

.main-page-content pre {
border-left-width: 2px;
}
</style>
<meta name="SSR_SCRIPTS" />
</head> </head>

<body> <body>
<script>
/**
* If we modify this script, we must update the CSP hash as follows:
* 1. Run `yarn run jest testing/tests/csp.test.ts --watch`
* 2. Open `libs/constants/index.js` and find the current hash in CSP_SCRIPT_SRC_VALUES.
* 3. Remove the old "previous" hash and replace it with the old "current" hash.
* 4. Replace the old "current" hash with the new hash from the failing test (step 1).
*/
document.body.addEventListener(
"load",
(e) => {
if (e.target.classList.contains("interactive")) {
e.target.setAttribute("data-readystate", "complete");
}
},
{ capture: true }
);

if (window && document.documentElement) {
const c = { light: "#ffffff", dark: "#1b1b1b" };
try {
const o = window.localStorage.getItem("theme");
o &&
((document.documentElement.className = o),
(document.documentElement.style.backgroundColor = c[o]));
const n = window.localStorage.getItem("nop");
n && (document.documentElement.dataset["nop"] = n);
} catch (e) {
console.warn("Unable to read theme from localStorage", e);
}
}
</script>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>
13 changes: 0 additions & 13 deletions client/scripts/build.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,14 +1,12 @@
// Ensure environment variables are read. // Ensure environment variables are read.
import "../config/env.js"; import "../config/env.js";


import path from "node:path";
import chalk from "chalk"; import chalk from "chalk";
import fs from "fs-extra"; import fs from "fs-extra";
import webpack from "webpack"; import webpack from "webpack";


import configFactory from "../config/webpack.config.js"; import configFactory from "../config/webpack.config.js";
import paths from "../config/paths.js"; import paths from "../config/paths.js";
import { hashSomeStaticFilesForClientBuild } from "./postprocess-client-build.js";


// Makes the script crash on unhandled rejections instead of silently // Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will // ignoring them. In the future, promise rejections that are not handled will
Expand Down Expand Up @@ -37,17 +35,6 @@ build()
process.exit(1); process.exit(1);
} }
) )
.then(async () => {
const { results } = await hashSomeStaticFilesForClientBuild(paths.appBuild);
console.log(
chalk.green(
`Hashed ${results.length} files in ${path.join(
paths.appBuild,
"index.html"
)}`
)
);
})
.catch((err) => { .catch((err) => {
if (err && err.message) { if (err && err.message) {
console.log(err.message); console.log(err.message);
Expand Down
121 changes: 0 additions & 121 deletions client/scripts/postprocess-client-build.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion libs/constants/index.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const CSP_SCRIPT_SRC_VALUES = [
"https://js.stripe.com", "https://js.stripe.com",


/* /*
* Inline scripts (defined in `client/public/index.html`). * Inline scripts (imported in `ssr/render.tsx`).
* *
* If we modify them, we must always update their CSP hash here. * If we modify them, we must always update their CSP hash here.
* *
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^7.1.2", "css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.0", "css-minimizer-webpack-plugin": "^7.0.0",
"cssnano": "^7.0.5",
"diff": "^5.2.0", "diff": "^5.2.0",
"downshift": "^7.6.1", "downshift": "^7.6.1",
"eslint": "^8.57.0", "eslint": "^8.57.0",
Expand Down Expand Up @@ -250,6 +251,7 @@
"stylelint-prettier": "^4.1.0", "stylelint-prettier": "^4.1.0",
"stylelint-scss": "^5.3.2", "stylelint-scss": "^5.3.2",
"swr": "^2.2.5", "swr": "^2.2.5",
"terser-loader": "^2.0.3",
"terser-webpack-plugin": "^5.3.10", "terser-webpack-plugin": "^5.3.10",
"ts-jest": "^29.2.4", "ts-jest": "^29.2.4",
"ts-loader": "^9.5.1", "ts-loader": "^9.5.1",
Expand Down
1 change: 1 addition & 0 deletions ssr/.gitignore
View file
Original file line number Original file line Diff line number Diff line change
@@ -1 +1,2 @@
include.ts include.ts
!*.js
8 changes: 7 additions & 1 deletion ssr/include.d.ts
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,4 +1,10 @@
export const WEBFONT_TAGS: string; interface AssetManifest {
files: Record<string, string>;
entrypoints: string[];
}

export const WEBFONT_URLS: string[];
export const GTAG_PATH: null | string; export const GTAG_PATH: null | string;
export const BASE_URL: string; export const BASE_URL: string;
export const ALWAYS_ALLOW_ROBOTS: boolean; export const ALWAYS_ALLOW_ROBOTS: boolean;
export const ASSET_MANIFEST: AssetManifest;
Loading

0 comments on commit 96fd148

Please sign in to comment.