feat: adds copy as markdown feature (#1298)

tnolet · web-flow · commit b30935bdcf39 · 2025-06-11T16:49:03.000+02:00
diff --git a/site/config.toml b/site/config.toml
@@ -17,8 +17,26 @@ disqusShortname = "checkly"
 	baseName = "llms"
 	isPlainText = true
 
+[outputFormats.markdown]
+	baseName = 'index'
+	isHTML = false
+	isPlainText = true
+	mediaType = 'text/markdown'
+	noUgly = false
+	notAlternative = false
+	path = ''
+	permalinkable = false
+	protocol = ''
+	rel = 'alternate'
+	root = false
+	ugly = false
+	weight = 0
+
 [outputs]
-	home = ['html', 'rss', 'txt']
+	home = ['html', 'rss', 'txt','markdown']
+	page = ['html', 'markdown']
+	section = ['html', 'markdown']
+
 
 [taxonomies]
   tag = "tags"
diff --git a/site/content/docs/ai/_index.md b/site/content/docs/ai/_index.md
@@ -4,6 +4,7 @@ displayTitle: How Checkly uses AI
 navTitle: How Checkly uses AI
 weight: 1
 slug: /
+beta: true
 menu:
   platform:
     parent: "AI"
diff --git a/site/content/docs/ai/ai-assisted-features.md b/site/content/docs/ai/ai-assisted-features.md
@@ -3,6 +3,7 @@ title: AI assisted features in Checkly - Checkly Docs
 displayTitle: AI assisted Checkly features
 navTitle: AI assisted features
 weight: 2
+beta: true
 menu:
   platform:
     parent: "AI"
diff --git a/site/content/docs/ai/use-checkly-with-ai-ide.md b/site/content/docs/ai/use-checkly-with-ai-ide.md
@@ -4,6 +4,7 @@ displayTitle: Use Checkly with AI IDEs & Copilots
 navTitle: Use Checkly with AI IDEs & Copilots
 weight: 3
 draft: true
+beta: true
 menu:
   platform:
     parent: "AI"
diff --git a/site/layouts/_default/index.md b/site/layouts/_default/index.md
@@ -0,0 +1 @@
+{{ .RawContent }}
diff --git a/site/layouts/_default/list.md b/site/layouts/_default/list.md
@@ -0,0 +1 @@
+{{ .RawContent }}
diff --git a/site/layouts/_default/single.md b/site/layouts/_default/single.md
@@ -0,0 +1 @@
+{{ .RawContent }}
diff --git a/site/layouts/docs/list.html b/site/layouts/docs/list.html
@@ -7,7 +7,14 @@
       {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "/" }}
       {{ $homeURL := $url | absURL }}
 
-      {{ partial "docs-breadcrumb" .}}
+      <div class="d-flex flex-row">
+        <div class="d-flex">
+          {{ partial "docs-breadcrumb" .}}
+        </div>
+        <div class="d-flex align-items-center hidden-xs-down ml-auto">
+          {{ partial "docs-markdown-helper" . }}
+        </div>
+      </div>
 
       <h1 id="{{ anchorize .Title }}">{{ if .Params.displayTitle}}
         {{.Params.displayTitle}}
diff --git a/site/layouts/docs/single.html b/site/layouts/docs/single.html
@@ -3,8 +3,14 @@
     {{ partial "docs-menu" .}}
     <div class="docs-page">
       <article class="markdown DocSearch-content">
-        {{ partial "docs-breadcrumb" .}}
-
+        <div class="d-flex flex-row">
+          <div class="d-flex">
+            {{ partial "docs-breadcrumb" .}}
+          </div>
+          <div class="d-flex align-items-center hidden-xs-down ml-auto">
+            {{ partial "docs-markdown-helper" . }}
+          </div>
+        </div>
         <h1 id="{{ anchorize .Title }}">
         {{ if .Params.displayTitle}}
           {{.Params.displayTitle}}
diff --git a/site/layouts/partials/docs-breadcrumb.html b/site/layouts/partials/docs-breadcrumb.html
@@ -24,12 +24,9 @@
     {{ $.Scratch.Add "path" "/" }}
     {{ end }}
   {{ end }}
-  <div class="ml-auto">
+  <div class="ml-3">
     {{ if .Page.Params.beta }}
     <div class="badge badge-md badge-beta">BETA</div>
     {{ end}}
-    {{ if .Page.Params.cli }}
-    <div class="badge badge-md badge-cli">CLI Enabled</div>
-    {{ end}}
   </div>
 </div>
diff --git a/site/layouts/partials/docs-markdown-helper.html b/site/layouts/partials/docs-markdown-helper.html
@@ -0,0 +1,7 @@
+<div class="docs-md-helper-dropdown">
+  <button class="docs-md-helper-dropdown-button">Copy page</button>
+  <div class="docs-md-helper-dropdown-content">
+    <a href="#" class="docs-md-helper-dropdown-copy">Copy as Markdown</a>
+    <a href="{{ .RelPermalink }}index.md" class="docs-md-helper-dropdown-view" >View as Markdown</a>
+  </div>
+</div>
diff --git a/site/static/images/icons/copy.svg b/site/static/images/icons/copy.svg
@@ -1 +1 @@
-<svg fill="#D4DBE2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>
diff --git a/src/js/index.js b/src/js/index.js
@@ -19,46 +19,68 @@ $(document).ready(() => {
 })
 
 /**
- * Copy code button for code blocks
+ * Copy to Clipboard helpers
  */
 
-function attachClickHandler (highlightDiv) {
-  const button = highlightDiv.querySelector('.copy-code-button')
-  if (!button) return
-  button.addEventListener('click', () => copyCodeToClipboard(button, highlightDiv))
+async function copyCodeBlockExecCommand (codeToCopy) {
+  try {
+    await navigator.clipboard.writeText(codeToCopy)
+  } catch (err) {
+    console.error('Failed to copy text: ', err)
+  }
 }
 
-document.querySelectorAll('.highlight').forEach((highlightDiv) => attachClickHandler(highlightDiv))
-
-async function copyCodeToClipboard (button, highlightDiv) {
-  const codeToCopy = highlightDiv.querySelector(':last-child > code').innerText
-
+async function copyToClipboardWrapper (copyPayload, classToAdd, element, originalText) {
   try {
     const result = await navigator.permissions.query({
       name: 'clipboard-write'
     })
     if (result.state === 'granted' || result.state === 'prompt') {
-      await navigator.clipboard.writeText(codeToCopy)
+      await navigator.clipboard.writeText(copyPayload)
     } else {
-      await copyCodeBlockExecCommand(codeToCopy)
+      await copyCodeBlockExecCommand(copyPayload)
     }
   } catch (_) {
-    await copyCodeBlockExecCommand(codeToCopy)
+    await copyCodeBlockExecCommand(copyPayload)
   } finally {
-    button.blur()
-    button.innerText = ''
-    button.classList.add('copy-code-button--copied')
+    element.blur()
+    element.innerText = 'Copied!'
+    element.classList.add(classToAdd)
     setTimeout(function () {
-      button.innerText = ''
-      button.classList.remove('copy-code-button--copied')
+      element.innerText = originalText
+      element.classList.remove(classToAdd)
     }, 2000)
   }
 }
 
-async function copyCodeBlockExecCommand (codeToCopy) {
-  try {
-    await navigator.clipboard.writeText(codeToCopy)
-  } catch (err) {
-    console.error('Failed to copy text: ', err)
-  }
+/**
+ * Copy code button for code blocks
+ */
+
+function attachClickHandler (highlightDiv) {
+  const button = highlightDiv.querySelector('.copy-code-button')
+  if (!button) return
+  button.addEventListener('click', () => copyCodeToClipboard(button, highlightDiv))
 }
+
+document.querySelectorAll('.highlight').forEach((highlightDiv) => attachClickHandler(highlightDiv))
+
+async function copyCodeToClipboard (button, highlightDiv) {
+  const codeToCopy = highlightDiv.querySelector(':last-child > code').innerText
+
+  await copyToClipboardWrapper(codeToCopy, 'copy-code-button--copied', button)
+}
+
+/**
+ * Copy page as markdown button
+ */
+
+document.querySelectorAll('.docs-md-helper-dropdown-copy').forEach((link) => {
+  link.addEventListener('click', async (evt) => {
+    evt.preventDefault()
+    const markdownUrl = window.location.origin + window.location.pathname + 'index.md'
+    const response = await window.fetch(markdownUrl)
+    const data = await response.text()
+    await copyToClipboardWrapper(data, 'docs-md-helper-dropdown-copy--copied', link, 'Copy as Markdown')
+  })
+})
diff --git a/src/scss/_docs.scss b/src/scss/_docs.scss
@@ -651,4 +651,81 @@
     border-radius: 8px;
     background: $blue-lightest;
   }
+
+  &-md-helper-dropdown {
+    position: relative;
+    display: inline-block;
+    font-size: 14px;
+    &:hover {
+      .docs-md-helper-dropdown-content {
+          display: block;
+      }
+    }
+    &-button {
+      color: $gray-darkish;
+      background: $white;
+      border: none;
+      cursor: pointer;
+      border-radius: 4px;
+      padding: .5rem;
+      &:hover {
+        background: $gray-lightest;
+      }
+    }
+    &-content {
+      display: none;
+      position: absolute;
+      right: 0;
+      min-width: 184px;
+      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+      border-radius: 8px;
+      background-color: $white;
+      padding: 0.5rem 1rem;
+      a {
+        text-decoration: none;
+        display: block;
+        color: $gray-dark;
+        &:hover {
+          color: $gray-darkish;
+          text-decoration: underline;
+        }
+      }
+    }
+    &-copy {
+      background: $white;
+      border-radius: 4px;
+      margin-bottom: 2px;
+      &::before {
+        width: 16px;
+        height: 16px;
+        background-color: $gray;
+        background-repeat: no-repeat;
+        background-clip: content-box;
+        mask: url(/images/icons/copy.svg);
+        background-size: 100%;
+        margin: 0 8px -2px 0;
+        content: '';
+        display: inline-block;
+      }
+      &--copied {
+        &::before {
+          background-color: $gray;
+          mask: url(/images/icons/check.svg);
+        }
+      }
+    }
+    &-view {
+      background: $white;
+      border-radius: 4px;
+      &::before {
+        width: 12px;
+        height: 12px;
+        background: url(/images/icons/arrow-up-right.svg);
+        background-size: 100%;
+        margin: 0 13px 0 0;
+        content: '';
+        display: inline-block;
+      }
+    }
+  }
 }
diff --git a/src/scss/_syntax.scss b/src/scss/_syntax.scss
@@ -191,16 +191,17 @@
     width: 16px;
     height: 16px;
     background-size: 100%;
-    background: url(/images/icons/copy.svg) no-repeat;
+    background-color: $gray-light;
+    mask: url(/images/icons/copy.svg) no-repeat;
     content: '';
     display: inline-block;
     transition: .15s transform ease;
   }
 
   &.copy-code-button--copied {
     &:after {
-      color: $green;
-      background: url(/images/icons/check.svg) no-repeat;
+      background-color: $green;
+      mask: url(/images/icons/check.svg) no-repeat;
 
     }
     &:hover {
