feat: document suggest edits link (#1043)

scullyio · Oct 6, 2020 · a411e0a · a411e0a
1 parent 968c5fa
commit a411e0a
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/apps/scully-docs/src/app/pages/docs/page/docs.page.component.css b/apps/scully-docs/src/app/pages/docs/page/docs.page.component.css
@@ -3,6 +3,25 @@ scullyio-docs-page {
   height: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+
+.github-links {
+  right: calc(18rem + 16px + 16px);
+  top: 45px;
+  position: absolute;
+  z-index: 1;
+}
+
+.github-links a.suggest-edit {
+  background: url(/assets/img/icons/pen-solid.svg) no-repeat;
+  width: 20px;
+  height: 20px;
+  filter: var(--scully-link-blue-filter);
+}
+
+.github-links a.suggest-edit:hover {
+  filter: var(--scully-link-blue-light-filter);
 }
 
 .docs-page-content {
@@ -21,4 +40,7 @@ scullyio-docs-page {
     padding: 0 16px;
     padding-top: 34px;
   }
+  .github-links {
+    right: 16px;
+  }
 }
diff --git a/apps/scully-docs/src/app/pages/docs/page/docs.page.component.ts b/apps/scully-docs/src/app/pages/docs/page/docs.page.component.ts
@@ -8,6 +8,9 @@ import { NavListService } from '../../../components/nav-list/nav-list.service';
   selector: 'scullyio-docs-page',
   encapsulation: ViewEncapsulation.None,
   template: `
+    <div class="github-links" *ngIf="currentPage$ | async as cur">
+      <a class="suggest-edit" [href]="cur.suggestEditLink" aria-label="Suggest Edits" title="Suggest Edits"></a>
+    </div>
     <section class="docs-page-content">
       <scully-content></scully-content>
       <div class="docs-prev_next" *ngIf="currentPage$ | async as cur">
@@ -20,6 +23,9 @@ import { NavListService } from '../../../components/nav-list/nav-list.service';
   `,
 })
 export class DocsPageComponent {
+  githubEditLink = (route: string) =>
+    `https://github.com/scullyio/scully/edit/main${route}.md?message=docs%3A%20describe%20your%20change...`;
+
   currentPage$ = this.nav.currentDoc$.pipe(
     tap((cur) => {
       const title = cur._route?.title as string;
@@ -29,7 +35,7 @@ export class DocsPageComponent {
         this.title.setTitle('Scully Documentation');
       }
     }),
-    map((cur) => ({ next: cur._next, prev: cur._prev })),
+    map((cur) => ({ next: cur._next, prev: cur._prev, suggestEditLink: this.githubEditLink(cur?._route?.route) })),
     /** note, this is for testing only, as in the docs site _no_ code will not be there anyway! */
     catchError((e) => {
       console.error(e);

diff --git a/apps/scully-docs/src/assets/img/icons/pen-solid.svg b/apps/scully-docs/src/assets/img/icons/pen-solid.svg
diff --git a/apps/scully-docs/src/styles/_variables.css b/apps/scully-docs/src/styles/_variables.css
@@ -13,6 +13,7 @@
   --scully-green-filter: invert(43%) sepia(96%) saturate(1549%) hue-rotate(110deg) brightness(96%) contrast(79%);
   --scully-darkgray-lighter-filter: invert(53%) sepia(24%) saturate(234%) hue-rotate(110deg) brightness(89%) contrast(90%);
   --scully-link-blue-filter: invert(26%) sepia(46%) saturate(4161%) hue-rotate(184deg) brightness(97%) contrast(101%);
+  --scully-link-blue-light-filter: invert(67%) sepia(96%) saturate(851%) hue-rotate(156deg) brightness(99%) contrast(93%);
   --scully-white-filter: brightness(0) invert(1);
   --scully-grey_5-filter: brightness(0) invert(0.5);
   /* transitions */

diff --git a/apps/scully-docs/src/styles/toc.css b/apps/scully-docs/src/styles/toc.css
@@ -1,5 +1,5 @@
 #toc-doc ul {
-  position: absolute;
+  position: fixed;
   right: 16px;
   top: 90px;
   width: 18rem;