Megabit · stsrki · Jun 11, 2024 · May 21, 2024 · May 21, 2024 · May 21, 2024
diff --git a/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png b/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png
diff --git a/...Server/wwwroot/img/blog/2024-05-17/how-to-create-social-media-share-buttons.png b/...Server/wwwroot/img/blog/2024-05-17/how-to-create-social-media-share-buttons.png
diff --git a/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/share-buttons.png b/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/share-buttons.png
diff --git a/...owToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_BrandsCode.html b/...owToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_BrandsCode.html
@@ -0,0 +1,21 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+.bg-snapchat {
+  background-color: #FFFC00 !important;
+}
+
+.bg-discord {
+  background-color: #5865F2 !important;
+}
+
+.bg-github {
+  background-color: #0D1117 !important;
+}
+
+.bg-x {
+  background-color: #000000 !important;
+}
+
+/* other brand colors. add the brands you need here! */
+</pre></div>
+</div>
diff --git a/...reateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_HeadContentCode.html b/...reateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_HeadContentCode.html
@@ -0,0 +1,15 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">&gt;</span>
+  <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://cdn.jsdelivr.net/npm/bootstrap<span class="atSign">&#64;</span>4.6.1/dist/css/bootstrap.min.css</span><span class="quot">&quot;</span> 
+        <span class="htmlAttributeName">integrity</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn</span><span class="quot">&quot;</span> 
+        <span class="htmlAttributeName">crossorigin</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">anonymous</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+
+  <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+  <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise/blazorise.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+  <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise.Bootstrap/blazorise.bootstrap.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...alMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSectionCode.html b/...alMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSectionCode.html
@@ -0,0 +1,10 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">&gt;</span>
+  <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">brands.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+  ...
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...SocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_InstallBlazoriseCode.html b/...SocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_InstallBlazoriseCode.html
@@ -0,0 +1,6 @@
+<div class="blazorise-codeblock">
+<div class="powershell"><pre>
+Install<span class="powershellOperator">-</span>Package Blazorise.Bootstrap
+Install<span class="powershellOperator">-</span>Package Blazorise.Icons.FontAwesome
+</pre></div>
+</div>
diff --git a/...diaShareButtons/Code/HowToCreateSocialMediaShareButtons_ProgramCsUsingStatementsCode.html b/...diaShareButtons/Code/HowToCreateSocialMediaShareButtons_ProgramCsUsingStatementsCode.html
@@ -0,0 +1,7 @@
+<div class="blazorise-codeblock">
+<div class="csharp"><pre>
+<span class="keyword">using</span> Blazorise;
+<span class="keyword">using</span> Blazorise.Bootstrap;
+<span class="keyword">using</span> Blazorise.Icons.FontAwesome;
+</pre></div>
+</div>
diff --git a/...ialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ServiceRegistrationCode.html b/...ialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ServiceRegistrationCode.html
@@ -0,0 +1,8 @@
+<div class="blazorise-codeblock">
+<div class="csharp"><pre>
+builder.Services
+    .AddBlazorise()
+    .AddBootstrapProviders()
+    .AddFontAwesomeIcons();
+</pre></div>
+</div>
diff --git a/...diaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentCodeCode.html b/...diaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentCodeCode.html
@@ -0,0 +1,24 @@
+<div class="blazorise-codeblock">
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code 
+{
+  [Parameter]
+  <span class="keyword">public</span> <span class="keyword">string</span> TextColor { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+  [Parameter]
+  <span class="keyword">public</span> <span class="keyword">string</span> BackgroundColor { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+  [Parameter]
+  <span class="keyword">public</span> <span class="keyword">string</span> IconName { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+  [Parameter, EditorRequired]
+  <span class="keyword">public</span> <span class="keyword">string</span> To { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+  [Parameter, EditorRequired]
+  <span class="keyword">public</span> RenderFragment ChildContent { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+  [Parameter(CaptureUnmatchedValues = <span class="keyword">true</span>)]
+  <span class="keyword">public</span> Dictionary&lt;<span class="keyword">string</span>, <span class="keyword">object</span>&gt; AdditionalAttributes { <span class="keyword">get</span>; <span class="keyword">set</span>; } = [];
+}
+</pre></div>
+</div>
diff --git a/...aShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkupCode.html b/...aShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkupCode.html
@@ -0,0 +1,11 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">TextColor</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>TextColor</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Background</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(new Background(BackgroundColor))</span><span class="quot">&quot;</span> <span class="htmlAttributeName">To</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>To</span><span class="quot">&quot;</span> 
+        <span class="htmlAttributeName">Type</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>ButtonType.Link</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Size</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Size</span><span class="enumValue">.Large</span><span class="quot">&quot;</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>attributes</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>AdditionalAttributes</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+
+  <span class="atSign">&#64;</span>ChildContent
+
+  <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Icon</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>IconName</span><span class="quot">&quot;</span> <span class="htmlAttributeName">IconStyle</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">IconStyle</span><span class="enumValue">.Light</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...SocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonUsageCode.html b/...SocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonUsageCode.html
@@ -0,0 +1,7 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ShareButton</span> <span class="htmlAttributeName">TextColor</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">white</span><span class="quot">&quot;</span> <span class="htmlAttributeName">BackgroundColor</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">x</span><span class="quot">&quot;</span> <span class="htmlAttributeName">IconName</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">fa-brands fa-x</span><span class="quot">&quot;</span> <span class="htmlAttributeName">To</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://twitter.com/intent/tweet</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    Share on
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ShareButton</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...teSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_UsingStatementCode.html b/...teSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_UsingStatementCode.html
@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="atSign">&#64;</span>using Blazorise
+</pre></div>
+</div>
diff --git a/...oCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Brands.snippet b/...oCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Brands.snippet
@@ -0,0 +1,17 @@
+.bg-snapchat {
+  background-color: #FFFC00 !important;
+}
+
+.bg-discord {
+  background-color: #5865F2 !important;
+}
+
+.bg-github {
+  background-color: #0D1117 !important;
+}
+
+.bg-x {
+  background-color: #000000 !important;
+}
+
+/* other brand colors. add the brands you need here! */
diff --git a/...teSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_HeadContent.snippet b/...teSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_HeadContent.snippet
@@ -0,0 +1,11 @@
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" 
+        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" 
+        crossorigin="anonymous">
+
+  <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
+  <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
+  <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
+</head>
+</html>
diff --git a/...ediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSection.snippet b/...ediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSection.snippet
@@ -0,0 +1,6 @@
+<html>
+<head>
+  <link href="brands.css" rel="stylesheet" />
+  ...
+</head>
+</html>
diff --git a/...ialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_InstallBlazorise.snippet b/...ialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_InstallBlazorise.snippet
@@ -0,0 +1,2 @@
+Install-Package Blazorise.Bootstrap
+Install-Package Blazorise.Icons.FontAwesome
diff --git a/...ShareButtons/Examples/HowToCreateSocialMediaShareButtons_ProgramCsUsingStatements.snippet b/...ShareButtons/Examples/HowToCreateSocialMediaShareButtons_ProgramCsUsingStatements.snippet
@@ -0,0 +1,3 @@
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
diff --git a/...MediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ServiceRegistration.snippet b/...MediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ServiceRegistration.snippet
@@ -0,0 +1,4 @@
+builder.Services
+    .AddBlazorise()
+    .AddBootstrapProviders()
+    .AddFontAwesomeIcons();
diff --git a/...ShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentCode.snippet b/...ShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentCode.snippet
@@ -0,0 +1,20 @@
+@code 
+{
+  [Parameter]
+  public string TextColor { get; set; }
+
+  [Parameter]
+  public string BackgroundColor { get; set; }
+
+  [Parameter]
+  public string IconName { get; set; }
+
+  [Parameter, EditorRequired]
+  public string To { get; set; }
+
+  [Parameter, EditorRequired]
+  public RenderFragment ChildContent { get; set; }
+
+  [Parameter(CaptureUnmatchedValues = true)]
+  public Dictionary<string, object> AdditionalAttributes { get; set; } = [];
+}
diff --git a/...areButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkup.snippet b/...areButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkup.snippet
@@ -0,0 +1,7 @@
+<Button TextColor="@TextColor" Background="@(new Background(BackgroundColor))" To="@To" 
+        Type="@ButtonType.Link" Size="Size.Large" @attributes="@AdditionalAttributes">
+
+  @ChildContent
+
+  <Icon Name="@IconName" IconStyle="IconStyle.Light"/>
+</Button>
diff --git a/...ialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonUsage.snippet b/...ialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonUsage.snippet
@@ -0,0 +1,3 @@
+<ShareButton TextColor="white" BackgroundColor="x" IconName="fa-brands fa-x" To="https://twitter.com/intent/tweet">
+    Share on
+</ShareButton>
diff --git a/...ocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_UsingStatement.snippet b/...ocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_UsingStatement.snippet
@@ -0,0 +1 @@
+@using Blazorise