Merge pull request #495 from G-Core/WEB-5319-5704-updates

Web 5319 5704 updates

documentation/edit-article-guide.md

@@ -0,0 +1,91 @@
+---
+title: edit-article-guide
+displayName: Edit article guide
+published: true
+---
+<edit-github-button></edit-github-button>
+
+### If you need help in proposing changes on GitHub, use the guide below:
+
+1\. <a href="https://github.com/login" target="_blank">Sign in</a> to your GitHub account.
+
+2\. (First time only) Click **Fork this repository**. This will copy the Gcore ```product-documentation``` repository to your account. Next time you propose changes to our articles, this page will not be there.
+
+3\. Select the appropriate action from the options below, and follow the instructions.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-10.png" alt="Fork this repository function on GitHub" width="80%">
+
+<expandable-element title="Correct text: errors, typos, irrelevant product information">
+1\. Make edits in the field, click **Commit changes...** and then click **Propose changes** in the pop-up.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-20.gif" alt="How to propose changes if you want to correct text" width="80%">
+
+2\. Click **Create pull request**.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-30.png" alt="Create pull request function on GitHub" width="80%">
+
+3\. Click **Create pull request** again.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-40.png" alt="Create pull request function on GitHub" width="80%">
+
+That’s it. The Gcore technical writers will be notified of your request and will process it. You will receive a message to your GitHub account email about their decision.
+
+</expandable-element>
+
+<expandable-element title="Correct an invalid link">
+1\. Remove the incorrect information from the <code>&lt;a href="https://wrong-link"&gt;</code> attribute. Insert the correct <code>&lt;a href="https://right-link"&gt;</code> link in its place, click <b>Commit changes…</b>, and then click <b>Propose changes</b> in the pop-up.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-v2-50.gif" alt="How to propose changes if you want to correct a link" width="80%">
+
+2\. Click **Create pull request**.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-30.png" alt="Create pull request function on GitHub" width="80%">
+
+3\. Click **Create pull request** again.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-40.png" alt="Create pull request function on GitHub" width="80%">
+
+That’s it. The Gcore technical writers will be notified of your request and will process it. You will receive a message to your GitHub account email about their decision.
+
+</expandable-element>
+
+<expandable-element title="Report an incorrect screenshot or layout error">
+
+**Note**: You cannot fix a screenshot or a layout error (button or content does not work, block is displayed incorrectly, etc.) in the product documentation yourself. If you find errors of this kind, let us know and we’ll fix it.
+
+1\. To delete a screenshot or a fragment with an error, click **Commit changes** in the pop-up that appears, describe the error, and click **Propose changes**.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-60.gif" alt="How to propose changes if you want to correct a screenshot" width="80%">
+
+2\. Click **Create pull request**.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-30.png" alt="Create pull request function on GitHub" width="80%">
+
+3\. Click **Create pull request** again.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-40.png" alt="Create pull request function on GitHub" width="80%">
+
+That’s it. The Gcore technical writers will be notified of your request and will process it. You will receive a message to your GitHub account email about their decision.
+
+</expandable-element>
+
+<expandable-element title="Leave a comment">
+
+If you found an error in the text and do not want to correct it yourself, follow these steps:
+
+1\. Highlight the text fragment with the error, delete it, or write a suggestion to enable comments. Click **Commit changes**, describe the error in the popup, and click **Propose changes**.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-70.gif" alt="How to propose changes if you want to let us know about corrections" width="80%">
+
+2\. Click **Create pull request**.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-30.png" alt="Create pull request function on GitHub" width="80%">
+
+3\. Click **Create pull request** again.
+
+<img src="https://assets.gcore.pro/docs/edit-article-guide/propose-changes-40.png" alt="Create pull request function on GitHub" width="80%">
+
+That’s it. The Gcore technical writers will be notified of your request and will process it. You will receive a message to your GitHub account email about their decision.
+
+</expandable-element>
+

scully/plugins/move-content-files/move-content-files.ts

@@ -22,6 +22,7 @@ const defaultOptions: Required<MoveContentFilesPluginOptions> = {
         'ddos-protection',
         'web-security',
         'reseller-support',
+        'edit-article-guide',
     ],
 };
 const sitemap = 'sitemap.xml';

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);
     }
 }

src/app/components/documentation/documentation.component.html

@@ -40,7 +40,7 @@
                 </ng-container>
             </div>
 
-            <div class="doc-estimate">
+            <div class="doc-estimate" [hidden]="isEditArticleGuidePage">
                 <div class="separator-line doc-separator-line"></div>
                 <p class="doc-estimate-title">Was this article helpful?</p>
                 <p class="doc-estimate-thanks" *ngIf="isArticleRated">Thanks for the rating!</p>
@@ -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">Edit on GitHub</a>
             <div class="last-modified-label">{{ lastModifiedLabel }}</div>
         </div>
     </div>

src/app/components/documentation/documentation.component.ts

@@ -48,6 +48,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
     public baseHref: string = environment.baseHref;
     public isArticleRated: boolean = false;
     public isArticleReady: boolean = false;
+    public isEditArticleGuidePage: boolean = false;
 
     private routerSubscription: Subscription;
     private hasScrolled = false;
@@ -154,6 +155,8 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
                 this.showContent = !!document;
                 this.tableOfContents = [];
 
+                this.isEditArticleGuidePage = category === 'edit-article-guide' ? true : false;
+
                 const filterdLinks = links.filter(({ route }) => {
                     return route.replace('/', '').startsWith(category) && !route.endsWith(`/${category}`);
                 });
@@ -204,6 +207,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
                         this.buildMenuSubTree(menuTree, routeSegments, link);
                     }
                 });
+
                 return this.convertToArray(menuTree);
             }),
         );

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

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) {}
 

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">

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',
+    },
 ];

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>

src/app/web-components/edit-github-button/edit-github-button.component.scss

@@ -0,0 +1,25 @@
+@import '../../../scss/variables';
+
+.edit-github-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    text-decoration: none;
+    color: $contentContrastPrimary;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    background-color: $contentPrimary;
+    border-radius: 0.25rem;
+    transition: all 0.2s;
+
+    &:hover {
+        background-color: $standartPurple;
+    }
+
+    &-img {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+}

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`;
+    }
+}

src/app/web-components/exandable-element/exandable-element.component.scss

@@ -9,6 +9,7 @@
     cursor: pointer;
     border-bottom: 1px solid #d6d7d8;
     border-top: 1px solid #d6d7d8;
+    margin-top: 1.5rem;
 
     .accordion-plus {
         background: $bgSurfaceLight1;