Add highlighting and blur magic comments

Author: yashovardhan

docusaurus.config.js

@@ -17,6 +17,7 @@ const connectDropdown = fs.readFileSync(
   './src/components/NavDropdown/ConnectMetaMask.html',
   'utf-8'
 )
+const baseUrl = process.env.DEST || '/';
 const embedDropdown = fs.readFileSync('./src/components/NavDropdown/EmbedMetaMask.html', 'utf-8')
 const extendDropdown = fs.readFileSync('./src/components/NavDropdown/ExtendScale.html', 'utf-8')
 const npm2yarnPlugin = [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]
@@ -25,7 +26,7 @@ const config = {
   title: 'MetaMask developer documentation',
   // tagline: '',
   url: 'https://docs.metamask.io',
-  baseUrl: process.env.DEST || '/', // overwritten in github action for staging / latest
+  baseUrl, // overwritten in github action for staging / latest
   onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/metamask-fox.svg',
@@ -55,6 +56,16 @@ const config = {
   trailingSlash: true,
 
   scripts: [
+    {
+      src: baseUrl + "js/fix-trailing-slash.js",
+      async: false,
+      defer: false,
+    },
+    {
+      src: baseUrl + "js/code-focus.js",
+      async: false,
+      defer: true,
+    },
     {
       src: 'https://cmp.osano.com/AzZMxHTbQDOQD8c1J/84e64bce-4a70-4dcc-85cb-7958f22b2371/osano.js',
     },
@@ -489,6 +500,21 @@ const config = {
         theme: codeTheme,
         additionalLanguages: ['csharp', 'gradle', 'bash', 'json'],
         magicComments: [
+          {
+            className: 'theme-code-block-highlighted-line',
+            line: 'highlight-next-line',
+            block: { start: 'highlight-start', end: 'highlight-end' },
+          },
+          {
+            className: "code-unfocus",
+            line: "unfocus-next-line",
+            block: { start: "unfocus-start", end: "unfocus-end" },
+          },
+          {
+            className: "code-focus",
+            line: "focus-next-line",
+            block: { start: "focus-start", end: "focus-end" },
+          },
           {
             className: 'git-diff-remove',
             line: 'remove-next-line',
@@ -519,7 +545,7 @@ const config = {
         // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
         replaceSearchResultPathname: {
           from: '/',
-          to: process.env.DEST || '/',
+          to: baseUrl,
         },
 
         // Optional: Algolia search parameters

src/pages/quick-start/builder/highlight.ts

@@ -9,7 +9,7 @@ function highlightStart(fileContent: string, variableName: string): string {
   const contentByLine = fileContent.split(`\n`)
   for (let i = 0; i < contentByLine.length; i += 1) {
     if (contentByLine[i].includes(`IMP START - ${variableName}`)) {
-      contentByLine[i] = '// highlight-start'
+      contentByLine[i] = `//highlight-start \n// focus-start`
     }
   }
   return contentByLine.join('\n')
@@ -25,7 +25,7 @@ function highlightEnd(fileContent: string, variableName: string): string {
   const contentByLine = fileContent.split(`\n`)
   for (let i = 0; i < contentByLine.length; i += 1) {
     if (contentByLine[i].includes(`IMP END - ${variableName}`)) {
-      contentByLine[i] = '// highlight-end'
+      contentByLine[i] = `//highlight-end \n// focus-end`
     }
   }
   return contentByLine.join('\n')

src/scss/custom.scss

@@ -652,6 +652,43 @@ ol {
   }
 }
 
+/* Code Focus & Blur Effects */
+%blur-transition {
+  filter: blur(0.5px);
+  opacity: 0.3;
+  transition:
+    filter 0.2s ease,
+    opacity 0.2s ease;
+  will-change: filter, opacity;
+}
+
+%clear-blur {
+  filter: none;
+  opacity: 1;
+}
+
+.code-unfocus {
+  @extend %blur-transition;
+}
+
+.blurred-code {
+  .token-line:not(.code-focus) {
+    @extend %blur-transition;
+  }
+
+  .code-focus {
+    @extend %clear-blur;
+  }
+
+  &:hover .token-line:not(.code-focus) {
+    @extend %clear-blur;
+  }
+}
+
+code:hover .code-unfocus {
+  @extend %clear-blur;
+}
+
 .git-diff-remove {
   background-color: #ff000020;
   display: block;
@@ -846,4 +883,4 @@ div[class^='theme-announcement-bar'] {
 /* Add scroll padding to account for sticky product banner */
 html {
   scroll-padding-top: 10rem;
-}
+}

static/js/code-focus.js

@@ -0,0 +1,18 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const observer = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+      const codeBlocks = document.querySelectorAll("code");
+
+      codeBlocks.forEach(function (codeBlock) {
+        const hasCodeFocus = codeBlock.querySelector(".code-focus") !== null;
+
+        if (hasCodeFocus) {
+          codeBlock.classList.add("blurred-code");
+        }
+      });
+    });
+  });
+
+  // Start observing the document for additions to the DOM
+  observer.observe(document.body, { childList: true, subtree: true });
+});

static/js/fix-trailing-slash.js

@@ -0,0 +1,3 @@
+if (window && window.location && window.location.pathname.endsWith('/') && window.location.pathname !== '/') {
+    window.history.replaceState('', '', window.location.pathname.substr(0, window.location.pathname.length - 1))
+}