Annotations frontend (github#37724)

hectorsector · heiskr · Peter Bengtsson · web-flow · commit 61885e9e6d6e · 2023-06-12T20:53:31.000Z
Co-authored-by: Kevin Heis &lt;heiskr@users.noreply.github.com&gt;
Co-authored-by: Peter Bengtsson &lt;peterbe@github.com&gt;
diff --git a/lib/render-content/plugins/annotate.js b/lib/render-content/plugins/annotate.js
@@ -35,7 +35,7 @@ import { visit } from 'unist-util-visit'
 import { h } from 'hastscript'
 import { fromMarkdown } from 'mdast-util-from-markdown'
 import { toHast } from 'mdast-util-to-hast'
-// import { header } from './code-header.js'
+import { header } from './code-header.js'
 
 const languages = yaml.load(fs.readFileSync('./data/variables/code-languages.yml', 'utf8'))
 
@@ -121,7 +121,10 @@ function template({ lang, code, rows }) {
   return h(
     'div',
     { class: 'annotate' },
-    // header(lang, code),
+    h('div', { className: 'annotate-row header' }, [
+      h('div', { className: 'annotate-code header color-bg-default' }, header(lang, code)),
+      h('div', { className: 'annotate-note header' }),
+    ]),
     rows.map(([note, code]) =>
       h('div', { className: 'annotate-row' }, [
         h(
diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss
@@ -126,3 +126,79 @@
     white-space: normal;
   }
 }
+
+/* Code annotations
+----------------------------------------------------------------------------*/
+$annotation-breakpoint: 1550px;
+
+.annotate {
+  margin: 0 -250px;
+
+  @media (max-width: $annotation-breakpoint) {
+    margin: auto;
+  }
+
+  & > div:last-child > .annotate-code {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    border-bottom: 1px solid var(--color-border-default);
+  }
+}
+
+.annotate-row {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: $annotation-breakpoint) {
+    flex-direction: row;
+    margin: 0 auto;
+
+    &:not(.header):hover {
+      border-radius: 4px;
+      outline: 2px solid var(--color-accent-fg);
+    }
+  }
+}
+
+.annotate-code {
+  background-color: var(--color-canvas-subtle);
+
+  &:not(.header) {
+    border-left: 1px solid var(--color-border-default);
+    border-right: 1px solid var(--color-border-default);
+  }
+
+  pre {
+    border: 0px !important;
+    margin: 0px !important;
+
+    .hljs {
+      overflow-x: auto;
+      white-space: pre-wrap;
+      white-space: -moz-pre-wrap;
+      white-space: -pre-wrap;
+      white-space: -o-pre-wrap;
+      word-wrap: break-word;
+    }
+  }
+
+  @media (min-width: $annotation-breakpoint) {
+    width: 50%;
+  }
+}
+
+.annotate-note {
+  @media (min-width: $annotation-breakpoint) {
+    width: 50%;
+
+    padding: 16px 0 16px 16px;
+    font-size: 14px;
+  }
+
+  @media (max-width: $annotation-breakpoint) {
+    .annotate-note {
+      padding: 16px 0 32px 0px;
+      font-size: 14px;
+    }
+  }
+}
diff --git a/tests/rendering/__snapshots__/annotate.js.snap b/tests/rendering/__snapshots__/annotate.js.snap
@@ -1,7 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`annotate renders annotations 1`] = `
-"<div class="annotate"><div class="annotate-row"><div class="annotate-code"><pre><code class="hljs language-yaml"><span class="hljs-attr">name:</span> <span class="hljs-string">Post</span> <span class="hljs-string">welcome</span> <span class="hljs-string">comment</span></code></pre></div><div class="annotate-note"><p>The name of the workflow as it will appear in the "Actions" tab of the GitHub repository.</p></div></div><div class="annotate-row"><div class="annotate-code"><pre><code class="hljs language-yaml"><span class="hljs-attr">on:</span>
+"<div class="annotate"><div class="annotate-row header"><div class="annotate-code header color-bg-default"><header class="d-flex flex-items-center flex-justify-between p-2 text-small rounded-top-1 border-top border-left border-right"><span>YAML</span><button class="js-btn-copy btn btn-sm tooltipped tooltipped-nw" data-clipboard-text="# The name of the workflow as it will appear in the &#x22;Actions&#x22; tab of the GitHub repository.
+name: Post welcome comment
+
+# Add the &#x60;pull_request&#x60; event, so that the workflow runs automatically
+# every time a pull request is created.
+on:
+  pull_request:
+    types: [opened]
+" aria-label="Copy code to clipboard"><svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-copy" aria-hidden="true"><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></button></header></div><div class="annotate-note header"></div></div><div class="annotate-row"><div class="annotate-code"><pre><code class="hljs language-yaml"><span class="hljs-attr">name:</span> <span class="hljs-string">Post</span> <span class="hljs-string">welcome</span> <span class="hljs-string">comment</span></code></pre></div><div class="annotate-note"><p>The name of the workflow as it will appear in the "Actions" tab of the GitHub repository.</p></div></div><div class="annotate-row"><div class="annotate-code"><pre><code class="hljs language-yaml"><span class="hljs-attr">on:</span>
   <span class="hljs-attr">pull_request:</span>
     <span class="hljs-attr">types:</span> [<span class="hljs-string">opened</span>]</code></pre></div><div class="annotate-note"><p>Add the <code>pull_request</code> event, so that the workflow runs automatically
 every time a pull request is created.</p></div></div></div>"
