Merge pull request #486 from G-Core/WEB-4462

Web 4462

documentation/cdn/cdn-resource-options/rules-for-particular-files/create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files.md

@@ -41,7 +41,7 @@ A new page will open. Follow the remaining steps on that page.
 
 2\. Enter the rule name.
 
-3\. Specify the path to the file or folder for which the rule will be applied. The path muststart with “**^/**” or “**/**” and cannot contain the domain name of your origin. You can specify a URI or use <a href="https://en.wikipedia.org/wiki/Regular_expression" target="_blank">regular expressions (regex)</a>.
+3\. Specify the path to the file or folder for which the rule will be applied. The path must start with “**^/**” or “**/**” and cannot contain the domain name of your origin. You can specify a URI or use <a href="https://en.wikipedia.org/wiki/Regular_expression" target="_blank">regular expressions (regex)</a>.
 
 **Note**: If a URI matches multiple rules, the one higher in the order of the rules will be applied. For example, there are two rules on the resource: ```/folder/.*``` (the first rule) and ```/folder/image.jpg``` (the second rule). The first rule will be applied to the ```/folder/image file.jpg``` file.
 
@@ -119,4 +119,4 @@ To disable or enable a rule:
 
 Disabled rules will have a Suspended status and enabled rules will have an Active status.
 
-<img src="https://assets.gcore.pro/docs/cdn/cdn-resource-options/rules-for-particular-files/create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files/10612307136657.png" alt="Suspended status and" width="80%">
+<img src="https://assets.gcore.pro/docs/cdn/cdn-resource-options/rules-for-particular-files/create-a-rule-manually-or-from-a-template-to-configure-settings-for-particular-files/10612307136657.png" alt="Suspended status and" width="80%">

documentation/cloud/virtual-instances/create-an-instance.md

@@ -27,28 +27,37 @@ Regions can be of two types: Core and Edge. A region determines the equipment sp
 | Designed for high scalability on the fly | Yes                         | Not                                 |
 | Available resources                      | 1000 cores and 30 TB of RAM | Up to 300 cores and 1 TB of RAM     |
 | Ports for user traffic and storage       | Separate                    | Shared                              |
-| Choice of configurations                 | 8 types, 45 configurations  | 1 type (Standard), 4 configurations |
 | Price                                    | Higher                      | Lower                               |
 
 
 \* We can always transform an edge region to core upon your request.
 
-3. Select an **Image**.
+3. Configure the image.
 
-<img src="https://assets.gcore.pro/docs/cloud/virtual-instances/create/3-image-selection.png" alt="Select an Image" width=80%>
+Select the type of hardware architecture on which your instance will be running:
 
-*   Choose an OS template, a volume, a snapshot, a custom <a href="https://gcore.com/docs/cloud/images/upload-an-image-to-the-storage" target="_blank">image</a>, or a template from the marketplace.
-*   (for a Linux instance) Remember the login from the **For login to OS** field to connect to your instance on Linux OS via SSH from another Linux device. For details, refer to the article: <a href="https://gcore.com/docs/cloud/virtual-instances/connect/connect-to-your-instance-via-ssh" target="_blank">Connect to your instance via SSH</a>.
+- **x86-64**: This architecture is known for its broad compatibility with Linux operating systems and Windows distributions. It is commonly used in general purpose computing applications.
+- **ARM**: ARM architecture is designed for energy efficiency and low power consumption, which also supports strong performance, making it ideal for high-performance computing tasks. However, ARM instances are compatible with fewer OS distributions.
 
-**Important!** If you want to connect to a Linux instance from a Windows device, use a special application such as <a href="https://putty.org" target="_blank">PuTTY</a>.
+<img src="https://assets.gcore.pro/docs/cloud/virtual-instances/create/17.png" alt="Choose x86-64 or ARM architecture">
 
-4. For **Type**, choose the configuration.
+Your choice of hardware architecture will affect the available OS options and instance flavors. Choose an OS distribution, a volume, a snapshot, a custom image, or a template from the marketplace.
 
-<img src="https://assets.gcore.pro/docs/cloud/virtual-instances/create/4-type%20selection.png" alt="choose the configuration" width=80%>
+4. Configure the instance type.
 
-Select the CPU generation and a flavor. 
+Select the appropriate CPU generation:
 
-<expandable-element title="Available flavors of virtual machines ">
+- **Intel® Xeon® Scalable, 3rd Gen or 2nd Gen** if you’ve selected x-86-64 architecture at the previous step.
+
+<img src="https://assets.gcore.pro/docs/cloud/virtual-instances/create/18.png" alt="VM based on Intel® Xeon® Scalable, 3rd Gen or 2nd Gen">
+
+- **ARM Ampere® Altra® Max Family** if you’ve selected ARM architecture at the previous step.
+
+<img src="https://assets.gcore.pro/docs/cloud/virtual-instances/create/19.png" alt="VM based on Ampere® Altra® Max Family">
+
+Choose one of the available flavors.
+
+<expandable-element title="Description of flavors">
 
 *   **Shared**. VMs that share a core of a physical machine with other VMs, designed for workloads that do not require high performance.  
     Availability: Luxembourg

documentation/streaming-platform/extra-features/add-monetization-to-your-live-streams-and-videos.md

@@ -14,7 +14,7 @@ pageDescription: A step-by-step guide on how to add monetization to your video c
 
 ## What is the Ads feature?
 
-Ads is a paid feature for adding custom ads in any part of videos (VOD) and live streams that allows you to monetize content. We support different ad formats: Videos, banners, hyperlinks, and various advertising vendors such as Google, Criteo, Adfox, etc.
+Ads is a free feature for adding custom ads in any part of videos (VOD) and live streams that allows you to monetize content. We support different ad formats: Videos, banners, hyperlinks, and various advertising vendors such as Google, Criteo, Adfox, etc.
 
 We use VAST (Video Ad Serving Template) integration, which contains all the information about the ad: Its physical location, format, URLs that will be invoked when different events occur, and more.
 

documentation/streaming-platform/extra-features/customize-appearance-of-the-built-in-player.md

@@ -14,7 +14,7 @@ pageDescription: A step-by-step guide on configuring custom players with your br
 
 ## What is a Players feature
 
-Player is a paid feature that allows customizing the default player.
+Player is a free feature that allows customizing the default player.
 
 Let’s compare the default and custom player. To show you the customization options:
 

documentation/streaming-platform/live-streaming/combine-multiple-live-streams.md

@@ -5,6 +5,7 @@ published: true
 order: 40
 toc:
    --1--What is Multicamera?: "what-is-multicamera"
+   --1--Enable: "enable-the-multicamera-feature"
    --1--Configure: "configure-multicamera"
 pageTitle: Overview of the Multicamera Feature and Its Setup | Gcore
 pageDescription: A step-by-step guide on how to combine several live streams in one interface.
@@ -13,14 +14,25 @@ pageDescription: A step-by-step guide on how to combine several live streams in
 
 ## What is Multicamera? 
 
-Multicamera is a free option used to combine two or more live streams. You deliver several streams at once, and a user can switch between them using a button in the player. 
+Multicamera is a free feature used to combine two or more live streams. You deliver several streams at once, and a user can switch between them using a button in the player. 
 
-This option is useful when you need to stream the event simultaneously from several angles or in different languages. 
+This feature is useful when you need to stream the event simultaneously from several angles or in different languages. 
 
 **Multiple angles.** You are broadcasting a film award ceremony. Your audience wants to see not only the stage, where the host announces winners but also the hall with celebrities. With a Multicamera, you stream from two cameras at once — one shoots the stage, and the other films the hall.  Each viewer can click a button in the player to switch between cameras at any time. 
 
 **Multiple languages.** You are broadcasting for a multilingual audience: Germans, English and French. You create three live streams dubbed into English, German and French, respectively. You send these streams through Multicamera, and viewers get the opportunity to instantly switch between different voice-overs. 
 
+## Enable the Multicamera feature
+
+Please, send us the request to activate the option via [support@gcore.com](mailto:support@gcore.com) or the chat window in the bottom-right corner of our website. Specify your ID in the request so that we can identify your account. You can find it on the main page of your control panel.
+
+<img src="https://assets.gcore.pro/docs/streaming-platform/live-streaming/record-your-live-streams-and-save-them-as-videos/9612975911185.png" alt="Enable the Record feature" width="80%">
+
+The message template: *"Good afternoon! Please enable the Multicamera feature for an account with ID … (your ID)"*.
+
+We will notify you when we activate the Multicamera feature. After that, you will be able to work with several live streams in one player.
+
+
 ## Configure Multicamera
 
 Create at least two live streams before you configure the Multicamera. To do this, you can use our guide: <a href="https://gcore.com/docs/streaming-platform/live-streaming/create-a-live-stream" target="_blank">Create a live stream</a>. 

documentation/streaming-platform/live-streaming/pause-and-rewind-the-live-streams.md

@@ -14,7 +14,7 @@ pageDescription: A step-by-step guide on how to pause and rewind the live stream
 
 ## What is the DVR feature?
 
-DVR (Digital Video Recorder) is a paid feature that allows your viewers to pause and rewind the broadcast.
+DVR (Digital Video Recorder) is a free feature that allows your viewers to pause and rewind the broadcast.
 
 DVR is based on caching technology. When you enable the feature, we start caching your live streams for 1 hour by default. This means that viewers can rewind your broadcast for up to one hour.
 

documentation/streaming-platform/live-streaming/record-your-live-streams-and-save-them-as-videos.md

@@ -17,11 +17,11 @@ pageDescription: A step-by-step guide on how to record your live streams and whe
 
 ## What is the Record feature
 
-Record is a paid feature that allows you to record your live streams and store them in the Streaming storage. You can automatically record entire streams or manually record only desired fragments.
+Record is a free feature that allows you to record your live streams and store them in the Streaming storage. You can automatically record entire streams or manually record only desired fragments.
 
 ## Enable the Record feature
 
-Please, send us the request to activate the option via [support@gcore.com](mailto:support@gcore.com) or the chat window in the bottom-right corner of our website. Specify your ID in the request so that we can identify your account. You can find it on the main page of your Control panel.
+Please, send us the request to activate the option via [support@gcore.com](mailto:support@gcore.com) or the chat window in the bottom-right corner of our website. Specify your ID in the request so that we can identify your account. You can find it on the main page of your control panel.
 
 <img src="https://assets.gcore.pro/docs/streaming-platform/live-streaming/record-your-live-streams-and-save-them-as-videos/9612975911185.png" alt="Enable the Record feature" width="80%">
 

documentation/streaming-platform/video-hosting/create-an-illusion-of-a-live-broadcast-with-uploaded-videos.md

@@ -13,7 +13,7 @@ pageDescription: A step-by-step guide on creating an illusion of live mode for y
 
 ## What is Live imitation?
 
-Live imitation is a paid feature that is used for broadcasting videos uploaded to your account in live mode.
+Live imitation is a free feature that is used for broadcasting videos uploaded to your account in live mode.
 
 Example: You are the owner of a movie streaming service. On September 1, you are going to premiere a new series for your viewers. One way to do it is to use the Live imitation feature. In this case, you upload episodes to our Streaming Platform as usual videos and select the start date and time (e.g., September 1 at 9 pm). So, up to this moment, videos will not be shown. Your viewers will be able to see it only at a fixed time. From their point of view, it would not look like watching a video but like a live stream.
 

documentation/streaming-platform/video-hosting/create-and-configure-playlists-for-videos.md

@@ -14,7 +14,7 @@ pageDescription: A step-by-step guide to creating and customizing playlists that
 
 ## What is the Playlists feature?
 
-Playlists are a paid feature that allows you to merge several videos into one playlist and play them alternately.
+Playlists are a free feature that allows you to merge several videos into one playlist and play them alternately.
 
 ## Enable the Playlists feature
 

src/app/components/bread-crumbs/bread-crumbs.component.scss

@@ -29,6 +29,6 @@
     }
 
     &:active {
-        color: $contentSecondaryActive;
+        color: $contentSecondary;
     }
 }

src/app/components/documentation/documentation.component.scss

@@ -147,7 +147,7 @@ gcore-loader {
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 2rem;
-            color: $secondaryContrastFocus;
+            color: $actionPrimary;
             margin-top: 1.5rem;
         }
 
@@ -157,36 +157,46 @@ gcore-loader {
             margin-top: 1.25rem;
 
             .doc-estimate-button {
-                width: 3rem;
-                height: 2.25rem;
-                border: 1px solid $secondaryContrastFocus;
-                border-radius: 0.25rem;
+                width: 3.5rem;
+                height: 2.5rem;
+                border: 1px solid $actionPrimary;
+                border-radius: $borderButtonRadius;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                transition: all 0.3s ease-in-out;
+                transition: 0.15s;
                 background: transparent;
                 cursor: pointer;
 
                 &:nth-child(1) {
-                    margin-right: 1rem;
+                    margin-right: 0.5rem;
                 }
 
                 svg {
                     path {
-                        fill: $secondaryContrastFocus;
-                        transition: all 0.3s ease-in-out;
+                        fill: $actionPrimary;
+                        transition: 0.15s;
                     }
                 }
 
-                &.active {
-                    background: $secondaryContrastFocus;
-                    transition: all 0.3s ease-in-out;
+                &:hover {
+                    border: 1px solid $actionPrimaryHover;
 
                     svg {
                         path {
-                            fill: $secondaryContrastActive;
-                            transition: all 0.3s ease-in-out;
+                            fill: $actionPrimaryHover;
+                        }
+                    }
+                }
+
+                &.active,
+                &:active {
+                    background: $actionPrimaryActive;
+                    border: 1px solid $actionPrimaryActive;
+
+                    svg {
+                        path {
+                            fill: $contentContrastPrimary;
                         }
                     }
                 }
@@ -269,7 +279,7 @@ gcore-loader {
         top: 0;
         width: 1px;
         height: 100%;
-        background: $greyPurple;
+        background: $bgSurfaceLight2;
         position: absolute;
     }
 

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

@@ -4,7 +4,6 @@ import {
     ChangeDetectorRef,
     Component,
     ElementRef,
-    NgZone,
     OnDestroy,
     OnInit,
     Renderer2,
@@ -39,7 +38,6 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
     public tableOfContents: Array<TableOfContents> = [];
     public tableOfContentsHeaders: Array<Element> = [];
     public activeTocItem: string = '';
-    public showFullSizeImage: boolean = false;
     public targetImageSrc: string = '';
     public isMenuExpanded: boolean = false;
     public category: string;
@@ -52,6 +50,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
     public isArticleReady: boolean = false;
 
     private routerSubscription: Subscription;
+    private hasScrolled = false;
 
     @ViewChild('scullyContainer') public scullyContainer: ElementRef;
     @ViewChild('fullSizeImage') public fullSizeImage: ElementRef;
@@ -62,17 +61,12 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
         private route: ActivatedRoute,
         private githubApiService: GitHubAPIService,
         private viewportScroller: ViewportScroller,
-        private ngZone: NgZone,
         private renderer: Renderer2,
         private changeDetectorRef: ChangeDetectorRef,
         private data: MenuService,
     ) {}
 
     public ngAfterViewChecked(): void {
-        this.route.fragment.pipe(first()).subscribe((fragment) => {
-            this.viewportScroller.scrollToAnchor(fragment);
-        });
-
         if (this.scullyContainer.nativeElement) {
             if (this.scullyContainer.nativeElement.childElementCount > 1) {
                 this.isArticleReady = true;
@@ -82,31 +76,34 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
                 this.changeDetectorRef.detectChanges();
             }
 
-            this.scullyContainer.nativeElement.querySelectorAll(':not(.gc-gallery p) > img').forEach((img: Element) => {
-                this.ngZone.runOutsideAngular(() => {
-                    this.renderer.listen(img, 'click', (event) => this.expandImage(event));
+            if (this.isArticleReady && !this.hasScrolled) {
+                this.route.fragment.pipe(first()).subscribe((fragment) => {
+                    this.viewportScroller.scrollToAnchor(fragment);
+                    this.hasScrolled = true;
                 });
-            });
 
-            this.ngZone.runOutsideAngular(() => {
+                this.scullyContainer.nativeElement
+                    .querySelectorAll(':not(.gc-gallery p) > img')
+                    .forEach((img: Element) => {
+                        this.renderer.listen(img, 'click', (event) => this.expandImage(event));
+                    });
+
                 window.document.addEventListener('scroll', this.handlePageScroll, true);
-            });
 
-            this.ngZone.runOutsideAngular(() => {
                 this.renderer.listen(this.fullSizeImage.nativeElement, 'click', () => this.closeFullSizeModal());
-            });
-
-            if (this.tableOfContents) {
-                this.tableOfContentsHeaders = this.tableOfContents
-                    .map(({ fragment }) => {
-                        if (fragment) {
-                            return document.getElementById(`${fragment}`);
-                        }
-                        return null;
-                    })
-                    .filter((item: Element) => item);
             }
         }
+
+        if (this.isArticleReady && this.tableOfContents) {
+            this.tableOfContentsHeaders = this.tableOfContents
+                .map(({ fragment }) => {
+                    if (fragment) {
+                        return document.getElementById(`${fragment}`);
+                    }
+                    return null;
+                })
+                .filter((item: Element) => item);
+        }
     }
 
     public getAnchor(anchorIndex: number, pageUrl: string): string {