Redesign (#5337)

MDN redesign

Co-authored-by: Kasey Kelly <[email protected]>
Co-authored-by: Chris Beaven <[email protected]>
Co-authored-by: Michael Trythall <[email protected]>
Co-authored-by: Luciano Ratamero <[email protected]>
Co-authored-by: Nicolas Lara <[email protected]>
Co-authored-by: Guy Sleigh <[email protected]>
Co-authored-by: Schalk Neethling <[email protected]>

.env-dist

@@ -1,4 +1,6 @@
+#CONTENT_ROOT=/path/to/content/files
 #CONTENT_TRANSLATED_ROOT=/path/to/translated-content/files
+#CONTRIBUTOR_SPOTLIGHT_ROOT=/path/to/mdn-contributor-spotlight/contributors
 
 # See documentation in docs/envvars.md for more information about this
 #BUILD_FLAW_LEVELS=broken_links:error, macros:ignore

.github/workflows/prod-build.yml

@@ -79,6 +79,11 @@ jobs:
           repository: mdn/translated-content
           path: mdn/translated-content
 
+      - uses: actions/[email protected]
+        with:
+          repository: mdn/mdn-contributor-spotlight
+          path: mdn/mdn-contributor-spotlight
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
@@ -126,6 +131,7 @@ jobs:
           # sub-folder called "mdn/content"
           CONTENT_ROOT: ${{ github.workspace }}/mdn/content/files
           CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/mdn/translated-content/files
+          CONTRIBUTOR_SPOTLIGHT_ROOT: ${{ github.workspace }}/mdn/mdn-contributor-spotlight/contributors
 
           # The default for this environment variable is geared for writers
           # (aka. local development). Usually defaults are supposed to be for
@@ -147,8 +153,8 @@ jobs:
           # https://speedcurve.com/mozilla-add-ons/mdn/settings/updated/#lux
           BUILD_SPEEDCURVE_LUX_ID: 108906238
 
-          # This enables the Plus call-to-action banner and the Plus landing page
-          REACT_APP_ENABLE_PLUS: true
+          # This enables the MDN Plus
+          REACT_APP_ENABLE_PLUS: false
 
           # This removes the ability to sign in
           REACT_APP_DISABLE_AUTH: true

.github/workflows/stage-build.yml

@@ -79,6 +79,11 @@ jobs:
           repository: mdn/translated-content
           path: mdn/translated-content
 
+      - uses: actions/[email protected]
+        with:
+          repository: mdn/mdn-contributor-spotlight
+          path: mdn/mdn-contributor-spotlight
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
@@ -126,13 +131,17 @@ jobs:
           # sub-folder called "mdn/content"
           CONTENT_ROOT: ${{ github.workspace }}/mdn/content/files
           CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/mdn/translated-content/files
+          CONTRIBUTOR_SPOTLIGHT_ROOT: ${{ github.workspace }}/mdn/mdn-contributor-spotlight/contributors
 
           # The default for this environment variable is geared for writers
           # (aka. local development). Usually defaults are supposed to be for
           # secure production but this is an exception and default
           # is not insecure.
           BUILD_LIVE_SAMPLES_BASE_URL: https://yari-demos.stage.mdn.mozit.cloud
 
+          # Use the stage version of interactive examples.
+          BUILD_INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.stage.mdn.mozilla.net
+
           # Now is not the time to worry about flaws.
           BUILD_FLAW_LEVELS: "*:ignore"
 
@@ -148,17 +157,22 @@ jobs:
           BUILD_SPEEDCURVE_LUX_ID: 108906238
 
           # This enables the Plus call-to-action banner and the Plus landing page
-          REACT_APP_ENABLE_PLUS: true
+          REACT_APP_ENABLE_PLUS: false
 
           # This adds the ability to sign in (stage only for now)
           REACT_APP_DISABLE_AUTH: false
 
+          # Use the stage version of interactive examples in react app
+          REACT_APP_INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.stage.mdn.mozilla.net
+
           # Firefox Accounts and SubPlat settings
           REACT_APP_FXA_SIGNIN_URL: /users/fxa/login/authenticate/
           REACT_APP_FXA_SETTINGS_URL: https://accounts.stage.mozaws.net/settings/
           REACT_APP_MDN_PLUS_SUBSCRIBE_URL: https://accounts.stage.mozaws.net/subscriptions/products/prod_Jtbg9tyGyLRuB0
-          REACT_APP_MDN_PLUS_YEARLY_PLAN: price_1JpIPwKb9q6OnNsLJLsIqMp7
-          REACT_APP_MDN_PLUS_MONTHLY_PLAN: price_1JFoTYKb9q6OnNsLalexa03p
+          REACT_APP_MDN_PLUS_5M_PLAN: price_1JFoTYKb9q6OnNsLalexa03p
+          REACT_APP_MDN_PLUS_5Y_PLAN: price_1JpIPwKb9q6OnNsLJLsIqMp7
+          REACT_APP_MDN_PLUS_10M_PLAN: price_1K6X7gKb9q6OnNsLi44HdLcC
+          REACT_APP_MDN_PLUS_10Y_PLAN: price_1K6X8VKb9q6OnNsLFlUcEiu4
 
         run: |
 

.gitignore

@@ -17,6 +17,7 @@ node_modules/
 /.env
 /client/.env
 __pycache__/
+.idea/
 
 npm-debug.log*
 yarn-debug.log*
@@ -75,3 +76,6 @@ testing/translated-content/files/**/_githistory.json
 # eslintcache
 client/.eslintcache
 popularities.json
+
+client/src/.linaria_cache
+ssr/.linaria-cache/

.prettierignore

@@ -23,3 +23,4 @@ _githistory.json
 /testing/content/
 /kumascript/coverage/
 /ssr/mozilla.dnthelper.min.js
+popularities.json

.stylelintignore

@@ -1 +1,2 @@
 **/*.css
+/client/src/ui/vars/sass/_variables.scss

build/constants.js

@@ -64,13 +64,6 @@ const ALWAYS_ALLOW_ROBOTS = JSON.parse(
   process.env.BUILD_ALWAYS_ALLOW_ROBOTS || "false"
 );
 
-const HOMEPAGE_FEED_URL =
-  process.env.BUILD_HOMEPAGE_FEED_URL || "https://hacks.mozilla.org/feed/";
-
-const HOMEPAGE_FEED_DISPLAY_MAX = JSON.parse(
-  process.env.BUILD_HOMEPAGE_FEED_DISPLAY_MAX || "5"
-);
-
 module.exports = {
   BUILD_OUT_ROOT,
   DEFAULT_FLAW_LEVELS,
@@ -86,6 +79,4 @@ module.exports = {
   FIX_FLAWS_DRY_RUN,
   FIX_FLAWS_VERBOSE,
   ALWAYS_ALLOW_ROBOTS,
-  HOMEPAGE_FEED_URL,
-  HOMEPAGE_FEED_DISPLAY_MAX,
 };

build/document-utils.js

@@ -1,11 +1,45 @@
 const { Document } = require("../content");
 
-/** The breadcrumb is an array of parents include the document itself.
- * It only gets added to the document there are actual parents.
+/**
+ * Temporary fix for long titles in breadcrumbs
+ * @see https://github.com/mdn/yari-private/issues/612
+ * @param {String} title : the title of the document
+ * @returns transformed title or original title as a string
+ */
+function transformTitle(title) {
+  const transformStrings = {
+    "Web technology for developers": "References",
+    "Learn web development": "Guides",
+    "HTML: HyperText Markup Language": "HTML",
+    "CSS: Cascading Style Sheets": "CSS",
+    "Graphics on the Web": "Graphics",
+    "HTML elements reference": "Elements",
+    "JavaScript reference": "JavaScript",
+    "Structuring the web with HTML": "HTML",
+    "Learn to style HTML using CSS": "CSS",
+    "Web forms — Working with user data": "Forms",
+  };
+
+  // if the title contains a string like `<input>: The Input (Form Input) element`,
+  // return only the `<input>` portion of the title
+  if (/<\w+>/g.test(title)) {
+    return /<\w+>/g.exec(title)[0];
+  }
+
+  // if the above did not match, see if it is one of the strings in the
+  // transformStrings object and return the relevant replacement or
+  // the unmodified title string
+  return transformStrings[title] || title;
+}
+
+/**
+ * The breadcrumb is an array of parents including the document itself.
+ * It is only added to the document if there are actual parents.
  */
 function addBreadcrumbData(url, document) {
   const parents = [];
   const split = url.split("/");
+
   let parentURL;
   // If the URL was something like `/en-US/docs/Foo/Bar` when you split
   // that, the array becomes `['', 'en-US', 'docs', 'Foo', 'Bar']`
@@ -23,11 +57,16 @@ function addBreadcrumbData(url, document) {
     if (parentDoc) {
       parents.unshift({
         uri: parentURL,
-        title: parentDoc.metadata.title,
+        title: transformTitle(parentDoc.metadata.title),
       });
     }
   }
+
   if (parents.length) {
+    if (!document.short_title) {
+      document.short_title = transformTitle(document.title);
+    }
+
     parents.push({
       uri: url,
       title: document.short_title || document.title,