auto copy header link

website/docs/docs/collaborate/documentation.md

@@ -6,7 +6,7 @@ pagination_next: "docs/collaborate/build-and-view-your-docs"
 pagination_prev: null
 ---
 
-## Related documentation
+## Related documentation <ReleaseStatus status="Beta" />
 
 * [Declaring properties](/reference/configs-and-properties)
 * [`dbt docs` command](/reference/commands/cmd-docs)
@@ -17,7 +17,7 @@ pagination_prev: null
 
 * [Tests](/docs/build/tests)
 
-## Overview
+## Overview 
 
 Good documentation for your dbt models will help downstream consumers discover and understand the datasets which you curate for them.
 

website/docusaurus.config.js

@@ -2,6 +2,7 @@ const path = require("path");
 const math = require("remark-math");
 const katex = require("rehype-katex");
 const { versions, versionedPages, versionedCategories } = require("./dbt-versions");
+const reactPlugin = import('remark-react');
 require("dotenv").config();
 
 /* Debugging */
@@ -215,7 +216,7 @@ var siteSettings = {
           path: "docs",
           routeBasePath: "/",
           sidebarPath: require.resolve("./sidebars.js"),
-          remarkPlugins: [math],
+          remarkPlugins: [math, reactPlugin],
           rehypePlugins: [katex],
 
           editUrl:
@@ -258,6 +259,8 @@ var siteSettings = {
       src: "https://cdn.jsdelivr.net/npm/[email protected]/release/featherlight.min.js",
       defer: true,
     },
+    "https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js",
+    "/js/headerLinkCopy.js",
     "/js/gtm.js",
     "/js/onetrust.js",
     "https://kit.fontawesome.com/7110474d41.js",

website/package.json

@@ -20,6 +20,7 @@
     "@svgr/webpack": "^6.0.0",
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
+    "clipboard": "^2.0.11",
     "clsx": "^1.1.1",
     "color": "^3.1.2",
     "core-js": "^3.20.0",
@@ -43,6 +44,7 @@
     "redoc": "^2.0.0-rc.57",
     "rehype-katex": "^5.0.0",
     "remark-math": "^3.0.1",
+    "remark-react": "^9.0.1",
     "sanitize-html": "^2.8.0",
     "slugify": "^1.6.1",
     "styled-components": "5.3.3",

website/src/components/lifecyclePill/ReleaseStatus.js

@@ -0,0 +1,13 @@
+// ReleaseStatus.js
+import React from 'react';
+import './custom.css'; //  import path
+
+function ReleaseStatus({ status }) {
+  return (
+    <div className={`release-status release-status-${status.toLowerCase()}`}>
+      {status}
+    </div>
+  );
+}
+
+export default ReleaseStatus;

website/src/css/custom.css

@@ -2034,6 +2034,68 @@ html[data-theme="dark"] .theme-doc-sidebar-container>div>button.button:hover {
   color: #818589; /* You can adjust the color as needed */
 }
 
+h3.anchor a.hash-link:before,
+h2.anchor a.hash-link:before {
+  content: "";
+  background-image: url('/img/copy.png');
+  background-size: 18px 18px;
+  height: 18px;
+  width: 18px;
+  display: inline-block;
+}
+
+h3.anchor.clicked a.hash-link:before,
+h2.anchor.clicked a.hash-link:before {
+  background-image: url('/img/check.png');
+  background-size: 18px 13px;
+  height: 13px;
+}
+
+.copy-popup {
+  position: fixed;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #047377;
+  color: rgb(236, 236, 236);
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 9999;
+}
+
+.close-button {
+  cursor: pointer;
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.close-button:hover {
+  color: #fff; /* Change color on hover if desired */
+}
+
+.release-status {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.8em;
+  margin-right: 8px;
+}
+
+.release-status-beta {
+  background-color:lightgreen; /* Adjust the color as needed */
+  color: #eae6e6;
+}
+
+.release-status-public-preview {
+  background-color: #4caf50; /* Adjust the color as needed */
+  color: #fff;
+}
+
+.release-status-private-preview {
+  background-color: #2196f3; /* Adjust the color as needed */
+  color: #fff;
+}
+
 @media (max-width: 996px) {
   .quickstart-container {
     flex-direction: column;

website/static/js/headerLinkCopy.js

@@ -0,0 +1,52 @@
+/* eslint-disable */
+
+  // Get all the headers with anchor links
+  window.addEventListener("load", function() {
+    const headers = document.querySelectorAll("h2.anchor, h3.anchor");
+
+headers.forEach((header) => {
+    header.style.cursor = "pointer";
+    const clipboard = new ClipboardJS(header, {
+        text: function(trigger) {
+            const anchorLink = trigger.getAttribute("id");
+            return window.location.href.split('#')[0] + '#' + anchorLink;
+        }
+    });
+
+    clipboard.on('success', function(e) {
+        // Provide user feedback (e.g., alert or tooltip) here
+        const popup = document.createElement('div');
+        popup.classList.add('copy-popup');
+        popup.innerText = 'Link copied!';
+        document.body.appendChild(popup);
+
+        // Set up timeout to remove the popup after 5 seconds
+        setTimeout(() => {
+            document.body.removeChild(popup);
+        }, 5000);
+
+        // Add close button ('x')
+        const closeButton = document.createElement('span');
+        closeButton.classList.add('close-button');
+        closeButton.innerHTML = ' ×'; // '×' symbol for 'x'
+        closeButton.addEventListener('click', () => {
+            if (document.body.contains(popup)) {
+                document.body.removeChild(popup);
+            }
+        });
+        popup.appendChild(closeButton);
+
+        // Add and remove the 'clicked' class for styling purposes
+        e.trigger.classList.add("clicked");
+        setTimeout(() => {
+            if (document.body.contains(popup)) {
+                document.body.removeChild(popup);
+            }
+        }, 5000);
+    });
+
+    clipboard.on('error', function(e) {
+        console.error("Unable to copy to clipboard: " + e.text);
+    });
+});
+});