-
Notifications
You must be signed in to change notification settings - Fork 510
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ssr): render JSX instead of index.html (#11672)
rather than importing our index.html template in javascript and manually replacing and concatenating tags to build each page, now we use jsx to build each page, also: - generate csp hashes in webpack - remove manual asset hashing
- Loading branch information
Showing
18 changed files
with
533 additions
and
618 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,136 +1,12 @@ | ||
| <!doctype html> | ||
| <html lang="en" prefix="og: https://ogp.me/ns#"> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <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="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> | ||
| <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> | ||
|
|
||
| <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> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.