Revert "Revert "Fix Snack links""

This reverts commit cf53475.

Author: brentvatne

docusaurus.config.js

@@ -13,7 +13,7 @@ module.exports = {
     'https://buttons.github.io/buttons.js',
     '/js/snack.js',
     'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
-    '/js/code-block-buttons.js'
+    '/js/code-block-buttons.js',
   ],
   themeConfig: {
     prism: {
@@ -31,17 +31,17 @@ module.exports = {
         src: 'img/spiro.svg',
       },
       links: [
-        {
-          to: 'versions',
-          label: 'Versions',
-        },
-        {to: 'docs/getting-started', label: 'Docs', position: 'left'},
-        {to: 'blog', label: 'Blog', position: 'left'},
+        { to: 'docs/getting-started', label: 'Docs', position: 'left' },
+        { to: 'blog', label: 'Blog', position: 'left' },
         {
           href: 'https://github.com/react-navigation',
           label: 'GitHub',
           position: 'right',
         },
+        {
+          to: 'versions',
+          label: 'Versions',
+        },
       ],
     },
     footer: {
@@ -73,15 +73,17 @@ module.exports = {
             },
             {
               label: 'Get help on Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/react-navigation',
+              href:
+                'https://stackoverflow.com/questions/tagged/react-navigation',
             },
             {
               label: 'Request a feature on Canny',
               href: 'https://react-navigation.canny.io/feature-requests',
             },
             {
               label: 'Report a bug on Github',
-              href: 'https://github.com/react-navigation/react-navigation/issues/new/choose',
+              href:
+                'https://github.com/react-navigation/react-navigation/issues/new/choose',
             },
           ],
         },
@@ -106,14 +108,16 @@ module.exports = {
     },
   },
   plugins: [
-    path.resolve(__dirname, './src/plugins/docusaurus-plugin-redirect-html')
+    path.resolve(__dirname, './src/plugins/docusaurus-plugin-redirect-html'),
   ],
   presets: [
     [
       '@docusaurus/preset-classic',
       {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
+          docLayoutComponent: require.resolve('./src/layouts/DocPage.js'),
+          docItemComponent: require.resolve('./src/layouts/DocItem.js'),
           editUrl:
             'https://github.com/react-navigation/react-navigation.github.io/edit/source/',
           remarkPlugins: [require('./src/plugins/remark-npm2yarn')],

src/css/custom.css

@@ -52,6 +52,6 @@ samp {
 
 .snack-sample-link {
   display: block;
-  margin-bottom: 20px;
-  margin-top: -5px;
+  margin-bottom: 25px;
+  margin-top: -8px;
 }

src/layouts/DocItem.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import DefaultDocItem from '@theme/DocItem';
+
+function DocItem(props) {
+  return <DefaultDocItem {...props} />;
+}
+
+export default DocItem;

src/layouts/DocPage.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import DefaultDocPage from '@theme/DocPage';
+
+function DocPage(props) {
+  React.useEffect(() => {
+    // Tags in Head aren't immediately available when the snack script loads, so
+    // instead let's just store this in a global...
+    window.__reactNavigationVersion = props.docsMetadata.version;
+  });
+
+  return <DefaultDocPage {...props} />;
+}
+
+export default DocPage;

static/js/snack.js

@@ -1,3 +1,5 @@
+// NOTE(brentvatne): the package:version meta tag isn't available when this code
+// first executes....
 const DEFAULT_PLATFORM = 'android';
 const DEPS_VERSIONS = {
   '4': [
@@ -23,16 +25,12 @@ const DEPS_VERSIONS = {
   next: [],
 };
 
-function getVersion(){
-  const navBarItems = document.getElementsByClassName('navbar__items');
-  if(navBarItems[0] && navBarItems[0].children[2] && navBarItems[0].children[2].textContent){
-    return navBarItems[0].children[2].textContent;
+function getVersion() {
+  if (window.__reactNavigationVersion) {
+    return window.__reactNavigationVersion;
   }
-  return 'next';
 }
-// todo: should get the version somewhere, maybe within the page html,
-// and match the appropriate version of react-navigation/stack/tabs/drawer
-// based on that
+
 function getSnackUrl(options) {
   let currentVersion = getVersion();
   let label = options.label || document.title;
@@ -59,24 +57,20 @@ function getSnackUrl(options) {
   }
 }
 
-function findNearestPreElement(node) {
+function findNearestCodeBlock(node) {
   let nextElement = node.nextElementSibling;
   if (!nextElement && node.parentElement.tagName === 'P') {
     nextElement = node.parentElement.nextElementSibling;
   }
 
   while (nextElement) {
-    if(nextElement.tagName === 'DIV' && nextElement.className.includes('mdxCodeBlock_node_modules-@docusaurus-theme-classic-src-theme-MDXComponents-')){
-      nextElement = nextElement.firstChild;
-    }
     if (
-      nextElement.tagName === 'PRE' &&
-      nextElement.children[1] &&
-      nextElement.children[1].tagName === 'CODE'
+      nextElement.tagName === 'DIV' &&
+      nextElement.className.includes(
+        'mdxCodeBlock_node_modules-@docusaurus-theme-classic-src-theme-MDXComponents-'
+      )
     ) {
-      return nextElement.children[1];
-    } else {
-      nextElement = nextElement.nextElementSibling;
+      return nextElement;
     }
   }
 }
@@ -92,20 +86,19 @@ function appendSnackLink() {
   }
 
   samples.forEach(samp => {
-    let pre = findNearestPreElement(samp);
+    let codeBlock = findNearestCodeBlock(samp);
 
-    if (!pre) {
+    if (!codeBlock) {
       console.log(
-        `<pre> tag with <code> child not found for <samp> element ${samp.innerText}`
+        `Code block not found for <samp> element ${samp.innerText}`
       );
       return;
     }
 
-    let code = pre.innerText;
+    let code = codeBlock.innerText;
     let label = samp.innerText;
     let templateId = samp.getAttribute('id');
 
-
     let link = document.createElement('a');
     link.className = 'snack-sample-link';
     link.dataset.snack = true;
@@ -117,7 +110,6 @@ function appendSnackLink() {
       link.innerHTML = `Try this example on Snack ${openIcon}`;
     }
 
-
     // Add the href and append the link element if we have some code
     let href = getSnackUrl({ code, templateId, label });
 
@@ -127,7 +119,7 @@ function appendSnackLink() {
 
     link.href = href;
 
-    pre.insertAdjacentElement('afterend', link);
+    codeBlock.insertAdjacentElement('afterend', link);
 
     // Don't try to add the link more than once!
     samp.remove();