update a guide - add edit and report links, closes #831

cncf · Jul 15, 2022 · d338c0b · d338c0b
1 parent fa34aff
commit d338c0b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/src/components/GuideRenderer.js b/src/components/GuideRenderer.js
@@ -10,6 +10,11 @@ const icons = require('../utils/icons');
 
 // guide is a guide index
 module.exports.render = function({settings, items, guide}) {
+  const currentBranch = require('child_process').execSync(`git rev-parse --abbrev-ref HEAD`, {
+    cwd: require('../../tools/settings').projectPath
+  }).toString().trim();
+
+
   const title = `<h1 className="title" style="margin-top: -5px;">${h(settings.global.short_name)} Landscape Guide</h1>`;
   const renderSubcategoryMetadata = ({ node, entries }) => {
     const orderedEntries = _.orderBy(entries,  (x) => !x.isLarge);
@@ -149,6 +154,17 @@ module.exports.render = function({settings, items, guide}) {
       <div class="main-content">
         <div class="container">
           <div class="content">
+            <div class="links">
+              <div>
+                ${icons.edit}
+                <a href="https://github.com/${settings.global.repo}/edit/${currentBranch}/guide.md" target="_blank">Edit this page</a>
+              </div>
+              <div style="height: 5px;"></div>
+                <div>
+                ${icons.github}
+                <a href="https://github.com/${settings.global.repo}/issues/new?title=Guide Issue" target="_blank">Report issue</a>
+              </div>
+            </div>
             ${renderContent({nodes: guide,enhancedEntries: enhancedEntries})}
           </div>
         </div>

diff --git a/src/style.css b/src/style.css
@@ -249,6 +249,41 @@ a:hover svg {
   position: relative;
 }
 
+#guide-page .links {
+  position: absolute;
+  left: calc(100% + 20px);
+  top: 0px;
+  font-size: 12px;
+  width: 200px;
+}
+
+@media (max-width: var(--xl-screen)) {
+  #guide-page .links {
+    position: inherit;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+  #guide-page .links > div {
+    display: inline-block;
+    padding-right: 100px;
+  }
+}
+
+#guide-page .links > div {
+  position: relative;
+}
+
+#guide-page .links svg {
+  position: relative;
+  top: 2px;
+  width: 12px;
+  height: 12px;
+  margin-top: 2px;
+}
+
+
+
 #guide-page h1 {
   font-size: 2.5em;
 }
@@ -542,6 +577,7 @@ a:hover svg {
 }
 
 #guide-page .content {
+  position: relative;
   max-width: 714px;
   margin: 0 auto;
 }