From af0ac66a9c6cc174c0c39b1884b92ec3cf10ca96 Mon Sep 17 00:00:00 2001
From: Gornytskyi Maxim <50423072+MaxymGorn@users.noreply.github.com>
Date: Sun, 22 Oct 2023 21:25:30 +0300
Subject: [PATCH] Add links for examples (#238)

## Target
<!--
  Why are you making this change?
 -->
Add links for examples
#### Open Questions
<!-- OPTIONAL
- [ ] Use the GitHub checklists to spark discussion on issues that may
arise from your approach. Please tick the box and explain your answer.
-->

## Checklist
<!--
It serves as a gentle reminder for common tasks. Confirm it's done and
check everything that applies.
-->
- [x] Documentation updated
- [x] Tests cover new or modified code
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] New dependencies added
- [ ] Includes breaking changes
- [ ] Version bumped

## Visuals
<!-- OPTIONAL
Show results both before and after this change. When the output changes,
it can be a screenshot of a trace, metric, or log illustrating the
change.
-->
---
 src/Cropper.Blazor/Client/Components/Docs/DocsApi.razor     | 1 +
 .../Client/Pages/AspectRatio/AspectRatioPage.razor          | 4 ++--
 .../Client/Pages/BasicUsage/BasicCropperUsagePage.razor     | 6 +++---
 .../Pages/CropBoxDimensions/CropBoxDimensionsPage.razor     | 6 +++---
 .../Client/Pages/CropZoom/CropperZoomPage.razor             | 6 +++---
 .../Client/Pages/ViewModes/ViewModesPage.razor              | 6 +++---
 6 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/Cropper.Blazor/Client/Components/Docs/DocsApi.razor b/src/Cropper.Blazor/Client/Components/Docs/DocsApi.razor
index 9072c262..3ae611ce 100644
--- a/src/Cropper.Blazor/Client/Components/Docs/DocsApi.razor
+++ b/src/Cropper.Blazor/Client/Components/Docs/DocsApi.razor
@@ -19,6 +19,7 @@
                 <ul class="my-2">
                     <li>
                         <MudLink Class="disabled"
+                                 UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })"
                                  Href="#">
                             <CodeInline>@Type.GetTypeDisplayName()</CodeInline>
                         </MudLink>
diff --git a/src/Cropper.Blazor/Client/Pages/AspectRatio/AspectRatioPage.razor b/src/Cropper.Blazor/Client/Pages/AspectRatio/AspectRatioPage.razor
index 64bb04f8..58b8b66f 100644
--- a/src/Cropper.Blazor/Client/Pages/AspectRatio/AspectRatioPage.razor
+++ b/src/Cropper.Blazor/Client/Pages/AspectRatio/AspectRatioPage.razor
@@ -23,7 +23,7 @@
             <SectionHeader Title="Basic setup">
                 <Description>
                     You can use <CodeInline>AspectRatio</CodeInline> decimal field in the
-                    <CodeInline>Option</CodeInline> property to define the <b>fixed</b> aspect ratio of the crop box.
+                    <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> property to define the <b>fixed</b> aspect ratio of the crop box.
                     <br><br>
                     To enable <b>free</b> aspect ratio setting <CodeInline>AspectRatio</CodeInline>
                     propety to <CodeInline>0</CodeInline>.
@@ -54,7 +54,7 @@
             <SectionHeader Title="Initial aspect ratio">
                 <Description>
                     Use <CodeInline>InitialAspectRatio</CodeInline> in the
-                    <CodeInline>Option</CodeInline> cropper component property
+                    <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> cropper component property
                     to define the initial aspect ratio of the crop box.
                     <br><br>
                     By default, it is the same as the aspect ratio of the canvas (image wrapper).
diff --git a/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor b/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
index 2d6beae0..b3bea68f 100644
--- a/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
+++ b/src/Cropper.Blazor/Client/Pages/BasicUsage/BasicCropperUsagePage.razor
@@ -8,7 +8,7 @@
         <DocsPageSection>
             <MudText Typo="Typo.h6" GutterBottom="true">Note</MudText>
             <MudText>The CropperComponent is dependant on <CodeInline Class="docs-code-tertiary">ICropperComponentBase</CodeInline></MudText>
-            <MudText>Check the <MudLink Href="/">Installation</MudLink> page for instructions regarding default setup.</MudText>
+            <MudText>Check the <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Href="/">Installation</MudLink> page for instructions regarding default setup.</MudText>
         </DocsPageSection>
 
         <DocsPageSection>
@@ -16,8 +16,8 @@
                 <Description>
                     To start using the cropper component, <b>you must specify the path to the image</b> 
                     with which you will work in the <CodeInline>Src</CodeInline> property.
-                    You also need to specify the cropper settings using the <CodeInline>Options</CodeInline> property,
-                    which can be left as <MudLink Target="_blank" Href="https://github.com/fengyuanchen/cropperjs/blob/main/src/js/defaults.js">default</MudLink>, as in the example below.
+                    You also need to specify the cropper settings using the <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> property,
+                    which can be left as <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://github.com/fengyuanchen/cropperjs/blob/main/src/js/defaults.js">default</MudLink>, as in the example below.
                     <br>
                     <MudAlert Class="my-3" Severity="Severity.Info">
                         Note: With the release of .NET 8, сropper's default settings will be set automatically, 
diff --git a/src/Cropper.Blazor/Client/Pages/CropBoxDimensions/CropBoxDimensionsPage.razor b/src/Cropper.Blazor/Client/Pages/CropBoxDimensions/CropBoxDimensionsPage.razor
index 09324bde..8f6215c2 100644
--- a/src/Cropper.Blazor/Client/Pages/CropBoxDimensions/CropBoxDimensionsPage.razor
+++ b/src/Cropper.Blazor/Client/Pages/CropBoxDimensions/CropBoxDimensionsPage.razor
@@ -10,14 +10,14 @@
                 <Description>
                     To set the <b>initial dimensions</b> of crop area (crop box), you can use the
                     <CodeInline Class="docs-code-tertiary">SetDataOptions</CodeInline> property,
-                    which is located in the <CodeInline>Option</CodeInline> property of the cropper.
+                    which is located in the <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> property of the cropper.
                     <br><br>
                     To resize the crop area of ​​an <b>already initialized</b> cropper component
                     you can use its <CodeInline Class="docs-code-warning">SetData</CodeInline> method.
                     <br>
                     <MudAlert Class="mt-3" Severity="Severity.Warning">
                         <b>Note:</b> This method only available when the value of the
-                        <CodeInline>ViewMode</CodeInline> option is greater than or equal to 1.
+                        <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/ViewMode">ViewMode</MudLink></CodeInline> option is greater than or equal to 1.
                     </MudAlert>
                     <MudAlert Class="mt-2" Severity="Severity.Info">
                         Height and width of the crop area are based on the <b>natural size of the original image</b>.
@@ -53,7 +53,7 @@
             <SectionHeader Title="Minimum relative dimensions">
                 <Description>
                     Use the <CodeInline>MinCropBoxHeight</CodeInline> and <CodeInline>MinCropBoxWidth</CodeInline>
-                    fields in the <CodeInline>Option</CodeInline> cropper component property to
+                    fields in the <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> cropper component property to
                     enable minimum limit for the relative size of crop area
                     <br>
                     <MudAlert Class="my-3" Severity="Severity.Info">
diff --git a/src/Cropper.Blazor/Client/Pages/CropZoom/CropperZoomPage.razor b/src/Cropper.Blazor/Client/Pages/CropZoom/CropperZoomPage.razor
index 830a708e..9d21193a 100644
--- a/src/Cropper.Blazor/Client/Pages/CropZoom/CropperZoomPage.razor
+++ b/src/Cropper.Blazor/Client/Pages/CropZoom/CropperZoomPage.razor
@@ -19,10 +19,10 @@
             <SectionHeader Title="Zoomable">
                 <Description>
                     You can use <CodeInline>Zoomable</CodeInline> boolean field in the
-                    <CodeInline>Option</CodeInline> property to enable/disable to zoom the image.
+                    <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> property to enable/disable to zoom the image.
                     <br><br>
                     You can use <CodeInline>ZoomOnTouch</CodeInline> boolean field in the
-                    <CodeInline>Option</CodeInline> property to enable/disable to 
+                    <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> property to enable/disable to
                     zoom the image by <b>dragging touch</b>.
                     <br><br>
                     Boolean field <CodeInline>ZoomOnWheel</CodeInline> used to enable/disable
@@ -38,7 +38,7 @@
             <SectionHeader Title="Wheel Zoom Ratio">
                 <Description>
                     Use decimal field <CodeInline>WheelZoomRatio</CodeInline> in the
-                    <CodeInline>Option</CodeInline> cropper component property
+                    <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> cropper component property
                     to define zoom ratio when zooming the image by <b>mouse wheeling</b>.
                     <br><br>
                     By default, <CodeInline>WheelZoomRatio</CodeInline> is 0,1.
diff --git a/src/Cropper.Blazor/Client/Pages/ViewModes/ViewModesPage.razor b/src/Cropper.Blazor/Client/Pages/ViewModes/ViewModesPage.razor
index 4b260bf7..672ee524 100644
--- a/src/Cropper.Blazor/Client/Pages/ViewModes/ViewModesPage.razor
+++ b/src/Cropper.Blazor/Client/Pages/ViewModes/ViewModesPage.razor
@@ -8,7 +8,7 @@
         <DocsPageSection>
             <SectionHeader Title="Simple Usage">
                 <Description>
-                    With the <CodeInline>ViewMode</CodeInline> in <CodeInline>Options</CodeInline> prop 
+                    With the <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/ViewMode">ViewMode</MudLink></CodeInline> in <CodeInline><MudLink Target="_blank" Href="/contract/Options">Options</MudLink></CodeInline> prop
                     you can change the view mode of the cropper.
                     <br><br>
                     <CodeInline Class="docs-code-tertiary">ViewMode</CodeInline> enumeration contains the following view modes:
@@ -34,14 +34,14 @@
                     </MudList>
                     <br>
                     <MudAlert Class="mt-3" Severity="Severity.Info">
-                        If you set <CodeInline>ViewMode</CodeInline> to <CodeInline Class="docs-code-tertiary">ViewMode</CodeInline>.
+                        If you set <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/ViewMode">ViewMode</MudLink></CodeInline> to <CodeInline Class="docs-code-tertiary">ViewMode</CodeInline>.
                         <CodeInline>Vm0</CodeInline>, the crop box can extend outside the canvas, 
                         while a value of <CodeInline>Vm1</CodeInline>, <CodeInline>Vm2</CodeInline>, 
                         or <CodeInline>Vm3</CodeInline> will restrict the crop box to the size of the canvas.
                     </MudAlert>
 
                     <MudAlert Class="mt-2" Severity="Severity.Info">
-                        <CodeInline>ViewMode</CodeInline> of <CodeInline>Vm2</CodeInline> or <CodeInline>Vm3</CodeInline> 
+                        <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/ViewMode">ViewMode</MudLink></CodeInline> of <CodeInline>Vm2</CodeInline> or <CodeInline>Vm3</CodeInline>
                         will additionally restrict the canvas to the container. 
                         <br>
                         There is no difference between <CodeInline>Vm2</CodeInline> and <CodeInline>Vm3</CodeInline>