Merge branch '1705-googlebot-badge-block' into 'main'

Prevent Googlebot from rendering badges

Closes #1705

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/4214

Merged-by: Achilleas Pipinellis <axil@gitlab.com>
Approved-by: Achilleas Pipinellis <axil@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>

4 files changed, 53 insertions, 48 deletions

diff --git a/content/frontend/default/badges.js b/content/frontend/default/badges.js
new file mode 100644
index 00000000..eabe9a3d
--- /dev/null
+++ b/content/frontend/default/badges.js
@@ -0,0 +1,50 @@
+/* global Vue */
+import { isContainedInHeading } from '../shared/dom';
+import DocsBadges from './components/docs_badges.vue';
+
+/**
+ * Badge components
+ *
+ * Badges are typically added in markdown and rendered by Nanoc as spans.
+ * Contributor docs have a section-wide badge added here.
+ */
+const isContributorDocs = () => {
+  const paths = [
+    '/ee/development/',
+    '/omnibus/development/',
+    '/runner/development/',
+    '/charts/development/',
+  ];
+  return paths.some((substr) => window.location.pathname.startsWith(substr));
+};
+// Inject markup for our Contributor docs badge.
+if (isContributorDocs()) {
+  document
+    .querySelector('h1 a')
+    .insertAdjacentHTML(
+      'beforebegin',
+      ' <span data-component="docs-badges" data-nosnippet><span data-type="content" data-value="contribute"></span></span>',
+    );
+}
+document.querySelectorAll('[data-component="docs-badges"]').forEach((badgeSet) => {
+  const badges = badgeSet.querySelectorAll('span');
+
+  // Get badges that were added to the heading
+  const badgesData = Array.from(badges).map((badge) => ({
+    type: badge.getAttribute('data-type'),
+    text: badge.getAttribute('data-value'),
+  }));
+
+  (() =>
+    new Vue({
+      el: badgeSet,
+      components: {
+        DocsBadges,
+      },
+      render(createElement) {
+        return createElement(DocsBadges, {
+          props: { badgesData, isHeading: isContainedInHeading(badgeSet) },
+        });
+      },
+    }))();
+});
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index f4c92c54..9b4b6053 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -1,63 +1,16 @@
 /* global Vue */
-import { getNextUntil, isContainedInHeading } from '../shared/dom';
+import { getNextUntil } from '../shared/dom';
 import NavigationToggle from './components/navigation_toggle.vue';
 import VersionBanner from './components/version_banner.vue';
 import { setupTableOfContents } from './setup_table_of_contents';
 import VersionsMenu from './components/versions_menu.vue';
 import TabsSection from './components/tabs_section.vue';
-import DocsBadges from './components/docs_badges.vue';
 
 /* eslint-disable no-new */
 document.addEventListener('DOMContentLoaded', () => {
   setupTableOfContents();
 
   /**
-   * Badge components
-   *
-   * Badges are typically added in markdown and rendered by Nanoc as spans.
-   * Contributor docs have a section-wide badge added here.
-   */
-  const isContributorDocs = () => {
-    const paths = [
-      '/ee/development/',
-      '/omnibus/development/',
-      '/runner/development/',
-      '/charts/development/',
-    ];
-    return paths.some((substr) => window.location.pathname.startsWith(substr));
-  };
-  // Inject markup for our Contributor docs badge.
-  if (isContributorDocs()) {
-    document
-      .querySelector('h1 a')
-      .insertAdjacentHTML(
-        'beforebegin',
-        ' <span data-component="docs-badges"><span data-type="content" data-value="contribute"></span></span>',
-      );
-  }
-  document.querySelectorAll('[data-component="docs-badges"]').forEach((badgeSet) => {
-    const badges = badgeSet.querySelectorAll('span');
-
-    // Get badges that were added to the heading
-    const badgesData = Array.from(badges).map((badge) => ({
-      type: badge.getAttribute('data-type'),
-      text: badge.getAttribute('data-value'),
-    }));
-
-    new Vue({
-      el: badgeSet,
-      components: {
-        DocsBadges,
-      },
-      render(createElement) {
-        return createElement(DocsBadges, {
-          props: { badgesData, isHeading: isContainedInHeading(badgeSet) },
-        });
-      },
-    });
-  });
-
-  /**
    * Banner components
    */
   const versionBanner = document.querySelector('#js-version-banner');
diff --git a/content/robots.txt.erb b/content/robots.txt.erb
index f7bfd466..6be46cef 100644
--- a/content/robots.txt.erb
+++ b/content/robots.txt.erb
@@ -8,6 +8,7 @@ sitemap: https://docs.gitlab.com/sitemap.xml
 user-agent: *
 disallow: /ce/
 disallow: /debug/
+disallow: /frontend/default/badges.js
 <% elsif stable_version?(current_branch) %>
 # If on stables branches
 sitemap: https://docs.gitlab.com/<%= current_branch %>/sitemap.xml
diff --git a/layouts/default.html b/layouts/default.html
index ccc36f4b..09d5df66 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -95,6 +95,7 @@
     <% end %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/tables.*'].path %>"></script>
+    <script src="<%= @items['/frontend/default/badges.*'].path %>"></script>
 
     <%# Add analytics only in production %>
     <%= render '/analytics.*' %>