Merge pull request #483 from G-Core/WEB-5704-edit-github

Web 5704 edit GitHub
G-Core · Oct 23, 2023 · 004f5e5 · 004f5e5
2 parents 3b1c4a7 + 5e6f5fe
commit 004f5e5
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 14 deletions.
diff --git a/documentation/edit-article-guide.md b/documentation/edit-article-guide.md
@@ -0,0 +1,6 @@
+---
+title: edit-article
+displayName: If you need help in proposing changes on GitHub, use the guide below:
+published: true
+---
+### If you need help in proposing changes on GitHub, use the guide below:
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { GalleryComponent } from './web-components/gallery/gallery.component';
 import { SearchComponent } from './components/search/search.component';
 import { MenuService } from './services/menu.service';
 import { ModalLoginModule } from './components/modal-login';
+import { EditGithubButtonComponent } from './web-components/edit-github-button/edit-github-button.component';
 
 @NgModule({
     declarations: [
@@ -64,9 +65,13 @@ export class AppModule {
         const gallery = createCustomElement(GalleryComponent, {
             injector,
         });
+        const editGithubButton = createCustomElement(EditGithubButtonComponent, {
+            injector,
+        });
         customElements.define('expandable-element', expandableElement);
         customElements.define('code-block', codeBlock);
         customElements.define('columns-layout', columnsLayout);
         customElements.define('media-gallery', gallery);
+        customElements.define('edit-github-button', editGithubButton);
     }
 }
diff --git a/src/app/components/documentation/documentation.component.html b/src/app/components/documentation/documentation.component.html
@@ -82,17 +82,7 @@
         </div>
         <div class="separator-line"></div>
         <div class="github-actions" *ngIf="showContent">
-            <a href="{{ githubUrl }}" target="blank">
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M10.0127 0.0376955C7.63574 0.0352238 5.3356 0.898855 3.52448 2.47383C1.71336 4.0488 0.509647 6.23216 0.129065 8.63264C-0.251517 11.0331 0.215908 13.4938 1.44756 15.5737C2.67922 17.6536 4.59461 19.2168 6.85047 19.9832C7.34783 20.0774 7.53204 19.757 7.53204 19.4869C7.53204 19.2168 7.53204 18.6011 7.53204 17.7468C4.75049 18.375 4.16102 16.3773 4.16102 16.3773C3.97568 15.7581 3.58192 15.2262 3.04963 14.8759C2.14701 14.2477 3.12331 14.2477 3.12331 14.2477C3.43972 14.2934 3.74181 14.4122 4.0067 14.595C4.2716 14.7779 4.49235 15.02 4.65225 15.3031C4.78811 15.5551 4.97127 15.7772 5.19124 15.9566C5.4112 16.1361 5.66364 16.2693 5.93406 16.3487C6.20447 16.4281 6.48754 16.452 6.76704 16.4192C7.04653 16.3864 7.31693 16.2974 7.56273 16.1574C7.60127 15.6406 7.81904 15.1549 8.17676 14.7879C5.95398 14.5304 3.62068 13.6509 3.62068 9.73089C3.60541 8.71507 3.97256 7.73215 4.6461 6.98563C4.34552 6.10249 4.38059 5.13599 4.74435 4.27807C4.74435 4.27807 5.58556 4.00166 7.49519 5.32717C9.135 4.86655 10.8658 4.86655 12.5057 5.32717C14.4153 4.00166 15.2504 4.27807 15.2504 4.27807C15.6179 5.13477 15.6552 6.10198 15.3548 6.98563C16.0283 7.73215 16.3954 8.71507 16.3802 9.73089C16.3802 13.6634 14.0407 14.5241 11.8118 14.7565C12.0508 15.0023 12.2354 15.2978 12.353 15.623C12.4706 15.9481 12.5184 16.2954 12.4934 16.6411C12.4934 18.0106 12.4934 19.1163 12.4934 19.4492C12.4934 19.7822 12.6715 20.0397 13.1811 19.9455C15.4299 19.1719 17.3369 17.6062 18.5621 15.5277C19.7873 13.4491 20.2509 10.9929 19.8704 8.5971C19.4898 6.20129 18.2897 4.02168 16.4842 2.44706C14.6787 0.872436 12.3852 0.00518787 10.0127 0V0.0376955Z"
-                        fill="#22174A"
-                    />
-                </svg>
-                Edit on GitHub
-            </a>
+            <a href="/docs/edit-article-guide">Change the article to GitHub</a>
             <div class="last-modified-label">{{ lastModifiedLabel }}</div>
         </div>
     </div>

diff --git a/src/app/components/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts
@@ -204,6 +204,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
                         this.buildMenuSubTree(menuTree, routeSegments, link);
                     }
                 });
+
                 return this.convertToArray(menuTree);
             }),
         );

diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -9,7 +9,7 @@ <h1 class="main-title">Product Documentation</h1>
             <li
                 *ngFor="let category of categories"
                 class="category-item"
-                [class.hide]="category.name === 'Reseller Support'"
+                [class.hide]="hideCategory.includes(category.name)"
             >
                 <a class="category-link" [routerLink]="category.url">
                     <img

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
@@ -14,6 +14,7 @@ export class HomeComponent implements OnInit {
     public categories: Array<Category> = categories;
     public baseHref: string = environment.baseHref;
     public isMenuExpanded: boolean = false;
+    public hideCategory = ['Reseller Support', 'Edit article guide'];
 
     constructor(private changeDetectorRef: ChangeDetectorRef, private data: MenuService) {}
 

diff --git a/src/app/components/left-bar-menu/left-bar-menu.component.html b/src/app/components/left-bar-menu/left-bar-menu.component.html
@@ -8,7 +8,7 @@
         {{ activeMenuItem?.name }}
     </div>
 </div>
-<div class="side-nav-list">
+<div class="side-nav-list" *ngIf="menuItems?.length">
     <div class="side-nav-list-top">
         <div class="side-nav-list-close" (click)="toggleMenu($event)">
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/src/app/constants/categories-config.ts b/src/app/constants/categories-config.ts
@@ -42,4 +42,8 @@ export const categories: Array<Category> = [
         name: 'Reseller Support',
         url: 'reseller-support',
     },
+    {
+        name: 'Edit article guide',
+        url: 'edit-article-guide',
+    },
 ];
diff --git a/src/app/web-components/edit-github-button/edit-github-button.component.html b/src/app/web-components/edit-github-button/edit-github-button.component.html
@@ -0,0 +1,4 @@
+<a class="edit-github-button" href="{{ articleUrl }}" target="blank">
+    <img class="edit-github-button-img" src="../../../assets/icons/category/edit-article-guide.svg" alt="github" />
+    Edit on GitHub
+</a>
diff --git a/src/app/web-components/edit-github-button/edit-github-button.component.scss b/src/app/web-components/edit-github-button/edit-github-button.component.scss
@@ -0,0 +1,15 @@
+.edit-github-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: #22174a;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+
+    &-img {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+}
diff --git a/src/app/web-components/edit-github-button/edit-github-button.component.ts b/src/app/web-components/edit-github-button/edit-github-button.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { DOCS_GITHUB_REPO } from '../../constants';
+
+@Component({
+    selector: 'gc-code-block',
+    templateUrl: './edit-github-button.component.html',
+    styleUrls: ['./edit-github-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EditGithubButtonComponent implements OnInit {
+    public articleUrl: string = '';
+
+    public ngOnInit(): void {
+        const prevPage = document.referrer.split('/docs/')[1];
+        this.articleUrl = `${DOCS_GITHUB_REPO}${prevPage}.md`;
+    }
+}
diff --git a/src/assets/scully-routes.json b/src/assets/scully-routes.json
-Original file line number
+Diff line change
@@ Expand Up @@
                             this.buildMenuSubTree(menuTree, routeSegments, link);
                         }
                     });
                     return this.convertToArray(menuTree);
                 }),
             );
@@ Expand Down @@