From 18df6ff221c527d138ad8d7216fbf2903790c25c Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 27 Sep 2023 18:35:03 -0500
Subject: [PATCH] Website: add edit button to articles (#14140)

Closes: #13897

Changes:
- Added an "edit page" button to article pages.
- Updated button styles on article pages.

---------

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
---
 website/assets/images/pencil-16x16@2x.png     | Bin 0 -> 527 bytes
 .../styles/pages/articles/basic-article.less  |  32 ++++++++++++++++--
 .../views/pages/articles/basic-article.ejs    |   5 ++-
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 website/assets/images/pencil-16x16@2x.png

diff --git a/website/assets/images/pencil-16x16@2x.png b/website/assets/images/pencil-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bb2c0ceaacfc8bb78d151f649b8dae44f368075
GIT binary patch
literal 527
zcmV+q0`UEbP)<h;3K|Lk000e1NJLTq001BW001Ef1^@s6xF)Gl00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0i;PpK~#7F#g?&7
z!!Qtr?~)28Bu2)}uykf2eFGy9s#p+jKm|x_bVL*(@dlkxVL*O^whMC?#7N%&1}3ED
zu&p*K)Jg5cPXD2D<67URyNhao6$im{4x1P8gy32%V;~%101q#{PItB+g2x;jou4Ft
zTr4B?0AWjfvhAH+cz=5xdKFM`#IAM|A)ZNiX#r#HO<e!}5X;TH-wAlj+YGSd%Q{Y|
zpD%&q031e^oi(o_x#o|Z5rx<g%dhMc6gd-^^&Dx^H<u7^1vtp!z~PuMZ1CRASbocD
z2T`zJx&r!Xr)XIv2$NI(e9KE!Aoo>M(N{viTfBF#&J`9|4$qJfuPEp3v=W5`%;9>8
z`B=|@JzRz&NRqm4rv?@&2A>Yx(;e6C8MmMmd^&K21$@Dc1bo7m3iyWS3RD5l6sQWW
z6{r%vAW${@kH9M6sQ_bV;tp5)1k03#%c%c?a4n3%GA`h$Kq9WmHiulnQvuP5J<|g&
z;fie2f7fuCz_kB9;7Y)x|GwZdwT%9c#PcChGJv0r!TcT0hk&@NQ)R&a`30Eo5XK>J
Rc{u<8002ovPDHLkV1oFd-Q@rP

literal 0
HcmV?d00001

diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less
index 4dfe99c4b3..e7b5632fae 100644
--- a/website/assets/styles/pages/articles/basic-article.less
+++ b/website/assets/styles/pages/articles/basic-article.less
@@ -28,17 +28,45 @@
     padding: 4px 8px;
     display: inline;
     max-width: min-content;
-    color: #192147;
+    color: @core-fleet-black-75;
     text-decoration: none;
     font-size: 14px;
+    border-radius: 6px;
     span::before {
       vertical-align: baseline;
       font-family: 'FontAwesome';
       content: '\f09e';
-      color: #192147;
       padding-right: 8px;
       font-size: 16px;
     }
+    &:hover {
+      background-color: rgba(25,33,71,.05);
+    }
+    &:active{
+      background-color: rgba(25,33,71,.1);
+    }
+  }
+  [purpose='edit-button'] {
+    margin-left: 24px;
+    img {
+      width: 16px;
+      height: 16px;
+      display: inline;
+      margin-right: 8px;
+    }
+    padding: 4px 8px;
+    display: block;
+    color: @core-fleet-black-75;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 21px;
+    border-radius: 6px;
+    &:hover {
+      background-color: rgba(25,33,71,.05);
+    }
+    &:active{
+      background-color: rgba(25,33,71,.1);
+    }
   }
   [purpose='article-details'] {
     font-size: 14px;
diff --git a/website/views/pages/articles/basic-article.ejs b/website/views/pages/articles/basic-article.ejs
index 43b30a477e..646efdd21d 100644
--- a/website/views/pages/articles/basic-article.ejs
+++ b/website/views/pages/articles/basic-article.ejs
@@ -11,7 +11,10 @@
       <img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
       <p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
       </div>
-      <a purpose="rss-button" class="px-0 px-sm-2 pt-3 pt-sm-1" taget="_blank" :href="'/rss/'+articleCategorySlug"><span>Subscribe</span></a>
+      <div class="d-flex flex-row align-items-center pt-3 pt-sm-1">
+      <a purpose="rss-button" target="_blank" :href="'/rss/'+articleCategorySlug"><span>Subscribe</span></a>
+      <a purpose="edit-button" class="d-flex flex-row align-items-center" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</span></a>
+      </div>
     </div>
     <div purpose="article-content" class="d-flex flex-column" parasails-has-no-page-script>
       <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, thisPage.htmlId)))) %>