Upgrades and refactoring

- Add static social link for GitHub - Add compact mode and name / title overrides for social links - Add more social links - Update MudBlazor package
codemonkey85 · Mar 5, 2024 · 5a4cec3 · 5a4cec3
1 parent e3937ab
commit 5a4cec3
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 52 deletions.
diff --git a/AboutMe/Wasm/AboutMe.Wasm.csproj b/AboutMe/Wasm/AboutMe.Wasm.csproj
@@ -9,7 +9,7 @@
 	<ItemGroup>
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.2" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.2" PrivateAssets="all" />
-		<PackageReference Include="MudBlazor" Version="6.16.0" />
+		<PackageReference Include="MudBlazor" Version="6.17.0" />
 	</ItemGroup>
 
 </Project>
diff --git a/AboutMe/Wasm/Components/SocialLink.cs b/AboutMe/Wasm/Components/SocialLink.cs
@@ -21,4 +21,12 @@ public SocialLink()
         Title = "Email me",
         Icon = Icons.Material.Filled.Email,
     };
+
+    public static SocialLink MyGitHub { get; } = new()
+    {
+        Name = "Michael Bond on GitHub",
+        Url = Constants.MyGitHubBaseUrl,
+        Title = "Michael Bond on GitHub",
+        Icon = Icons.Custom.Brands.GitHub,
+    };
 }
diff --git a/AboutMe/Wasm/Components/SocialLinkComponent.razor b/AboutMe/Wasm/Components/SocialLinkComponent.razor
@@ -1,26 +1,48 @@
-@SocialLinkFragment(SocialLink)
+@SocialLinkFragment(SocialLink, CompactMode, NameOverride, TitleOverride)
 
 @code {
     [Parameter, EditorRequired]
     public SocialLink SocialLink { get; set; }
 
-    private static RenderFragment SocialLinkFragment(SocialLink contactUrl) =>
+    [Parameter]
+    public bool CompactMode { get; set; }
+
+    [Parameter]
+    public string? NameOverride { get; set; } = null;
+
+    [Parameter]
+    public string? TitleOverride { get; set; } = null;
+
+    private static RenderFragment SocialLinkFragmentExpanded(SocialLink socialLink, string? nameOverride = null, string? titleOverride = null) =>
     @<MudCard>
         <MudCardHeader>
             <MudText Typo="@Typo.h5">
-                @contactUrl.Name
+                @(nameOverride ?? socialLink.Name)
             </MudText>
         </MudCardHeader>
         <MudCardActions Class="d-flex gap-4">
-            <MudButton StartIcon="@contactUrl.Icon"
+            <MudButton Href="@socialLink.Url"
+                       Target="_blank"
+                       title="@(titleOverride ?? socialLink.Title)"
                        Variant="Variant.Filled"
                        Color="Color.Primary"
-                       title="@contactUrl.Title"
-                       Href="@contactUrl.Url"
-                       Target="_blank">
+                       StartIcon="@socialLink.Icon">
                 Open
             </MudButton>
         </MudCardActions>
     </MudCard>
+        ;
+
+    private static RenderFragment SocialLinkFragmentCompact(SocialLink socialLink, string? nameOverride = null, string? titleOverride = null) =>
+    @<MudText Typo="@Typo.body1">
+        <MudButton Href="@socialLink.Url"
+                   Target="_blank"
+                   title="@(titleOverride ?? socialLink.Title)"
+                   Variant="@Variant.Filled"
+                   Color="@Color.Primary"
+                   EndIcon="@socialLink.Icon">
+            @(nameOverride ?? socialLink.Name)
+        </MudButton>
+    </MudText>
 ;
 }
diff --git a/AboutMe/Wasm/Components/SocialLinkComponent.razor.cs b/AboutMe/Wasm/Components/SocialLinkComponent.razor.cs
@@ -0,0 +1,9 @@
+namespace AboutMe.Wasm.Components;
+
+public partial class SocialLinkComponent
+{
+    private static RenderFragment SocialLinkFragment(SocialLink socialLink, bool compactMode = false, string? nameOverride = null, string? titleOverride = null) => compactMode
+            ? SocialLinkFragmentCompact(socialLink, nameOverride, titleOverride)
+            : SocialLinkFragmentExpanded(socialLink, nameOverride, titleOverride);
+
+}
diff --git a/AboutMe/Wasm/Constants.cs b/AboutMe/Wasm/Constants.cs
@@ -0,0 +1,6 @@
+namespace AboutMe.Wasm;
+
+public static class Constants
+{
+    public const string MyGitHubBaseUrl = "https://github.com/codemonkey85";
+}
diff --git a/AboutMe/Wasm/GlobalUsings.cs b/AboutMe/Wasm/GlobalUsings.cs
@@ -1,5 +1,6 @@
 global using AboutMe.Wasm;
 global using AboutMe.Wasm.Components;
+global using Microsoft.AspNetCore.Components;
 global using Microsoft.AspNetCore.Components.Web;
 global using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 global using MudBlazor;

diff --git a/AboutMe/Wasm/Layout/MainLayout.razor b/AboutMe/Wasm/Layout/MainLayout.razor
@@ -27,7 +27,7 @@
                        Label="@(isDarkMode ? "Dark" : "Light")" />
             <MudButton Class="d-none d-md-flex"
                        EndIcon="@Icons.Custom.Brands.GitHub"
-                       Href="https://github.com/codemonkey85/aboutme"
+                       Href="@($"{Constants.MyGitHubBaseUrl}/aboutme")"
                        Target="_blank"
                        title="Source code on GitHub"
                        Color="@Color.Inherit"
@@ -36,7 +36,7 @@
             </MudButton>
             <MudIconButton Class="d-md-none"
                            Icon="@Icons.Custom.Brands.GitHub"
-                           Href="https://github.com/codemonkey85/aboutme"
+                           Href="@($"{Constants.MyGitHubBaseUrl}/aboutme")"
                            Target="_blank"
                            Title="Source code on GitHub"
                            Color="@Color.Inherit"

diff --git a/AboutMe/Wasm/Pages/Contact.razor.cs b/AboutMe/Wasm/Pages/Contact.razor.cs
@@ -39,43 +39,59 @@ public partial class Contact
         </svg>
         """;
 
+    private const string SignalSvg = """
+        <svg xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 512 512">
+             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+             <path d="M194.6 7.5l5.8 23.3C177.7 36.3 156 45.3 136 57.4L123.7 36.8c22-13.3 45.9-23.2 70.9-29.3zm122.9 0l-5.8 23.3C334.3 36.3 356 45.3 376 57.4l12.4-20.6c-22-13.3-46-23.2-71-29.3zM36.8 123.7c-13.3 22-23.2 45.9-29.3 70.9l23.3 5.8C36.3 177.7 45.3 156 57.4 136L36.8 123.7zM24 256c0-11.6 .9-23.3 2.6-34.8L2.9 217.6c-3.8 25.4-3.8 51.3 0 76.7l23.7-3.6C24.9 279.3 24 267.6 24 256zM388.3 475.2L376 454.6c-20 12.1-41.6 21-64.2 26.6l5.8 23.3c24.9-6.2 48.8-16 70.8-29.3zM488 256c0 11.6-.9 23.3-2.6 34.8l23.7 3.6c3.8-25.4 3.8-51.3 0-76.7l-23.7 3.6c1.7 11.5 2.6 23.1 2.6 34.8zm16.5 61.4l-23.3-5.8c-5.6 22.7-14.5 44.3-26.6 64.3l20.6 12.4c13.3-22 23.2-46 29.3-71zm-213.8 168c-23 3.5-46.5 3.5-69.5 0l-3.6 23.7c25.4 3.8 51.3 3.8 76.7 0l-3.6-23.7zm152-91.8c-13.8 18.7-30.4 35.3-49.2 49.1l14.2 19.3c20.7-15.2 39-33.4 54.2-54.1l-19.3-14.4zM393.6 69.2c18.8 13.8 35.3 30.4 49.2 49.2L462.1 104C446.9 83.4 428.6 65.1 408 49.9L393.6 69.2zM69.2 118.4c13.8-18.8 30.4-35.3 49.2-49.2L104 49.9C83.4 65.1 65.1 83.4 49.9 104l19.3 14.4zm406 5.3L454.6 136c12.1 20 21 41.6 26.6 64.2l23.3-5.8c-6.2-24.9-16-48.8-29.3-70.8zm-254-97.1c23-3.5 46.5-3.5 69.5 0l3.6-23.7C268.9-1 243.1-1 217.6 2.9l3.6 23.7zM81.6 468.4L32 480l11.6-49.6L20.2 425 8.6 474.5c-.9 4-.8 8.1 .3 12.1s3.2 7.5 6.1 10.4s6.5 5 10.4 6.1s8.1 1.2 12.1 .3L87 492l-5.4-23.6zM25.2 403.6L48.6 409l8-34.4c-11.7-19.6-20.4-40.8-25.8-63L7.5 317.4c5.2 21.2 13.2 41.7 23.6 60.8l-5.9 25.3zm112 52l-34.4 8 5.4 23.4 25.3-5.9c19.2 10.4 39.6 18.4 60.8 23.6l5.8-23.3c-22.1-5.5-43.3-14.3-62.8-26l-.2 .2zM256 48c-37.2 0-73.6 10-105.6 28.9s-58.4 46-76.3 78.6s-26.9 69.3-25.8 106.4s12 73.3 31.8 104.8L60 452l85.3-20c27.3 17.2 58.2 27.8 90.3 31s64.5-1.1 94.6-12.6s57.2-29.8 79-53.6s37.8-52.2 46.8-83.2s10.5-63.6 4.7-95.3s-19-61.6-38.4-87.4s-44.5-46.7-73.4-61S288.3 48 256 48z"/>
+             </svg>
+        """;
+
     private List<SocialLink> SocialLinksList { get; set; } =
     [
         SocialLink.EmailMe,
-        new()
-        {
-            Name = "GitHub",
-            Url = "https://github.com/codemonkey85",
-            Title = "codemonkey85 on GitHub",
-            Icon = Icons.Custom.Brands.GitHub,
-        },
+        SocialLink.MyGitHub with { Name = "GitHub" },
         new()
         {
             Name = "Mastodon",
             Url = "https://mastodon.social/@codemonkey85",
-            Title = "[email protected] on Mastodon",
+            Title = "Michael Bond on Mastodon",
             Icon = MastodonSvg,
         },
         new()
         {
             Name = "Threads",
             Url = "https://www.threads.net/@codemonkey85",
-            Title = "codemonkey85 on Threads",
+            Title = "Michael Bond on Threads",
             Icon = ThreadsSvg,
         },
         new()
         {
             Name = "X (Formerly Twitter)",
             Url = "https://twitter.com/codemonkey85",
-            Title = "codemonkey85 on X (Formerly Twitter)",
+            Title = "Michael Bond on X (Formerly Twitter)",
             Icon = Icons.Custom.Brands.X,
         },
         new()
         {
             Name = "Bluesky",
             Url = "https://bsky.app/profile/codemonkey85.bsky.social",
-            Title = "codemonkey85.bsky.social on BlueSky",
+            Title = "Michael Bond on BlueSky",
             Icon = BlueskySvg,
         },
+        new()
+        {
+            Name = "Signal",
+            Url = "https://signal.me/#eu/2Bhlv1XZ2g4FRDl3UEk5iMQ+NqY/KnM6iV6oJQdBsiAJKz4PJahI1420U+VZ1cHD",
+            Title = "Michael Bond on Signal",
+            Icon = SignalSvg,
+        },
+        new()
+        {
+            Name = "Telegram",
+            Url = "https://t.me/codemonkey85",
+            Title = "Michael Bond on Telegram",
+            Icon = Icons.Custom.Brands.Telegram,
+        },
     ];
 }
diff --git a/AboutMe/Wasm/Pages/Home.razor b/AboutMe/Wasm/Pages/Home.razor
@@ -28,7 +28,7 @@
     </MudPaper>
 
     <MudLink Href="contact"
-             title="Follow Michael Bond's socials'">
-        Follow me on my socials!
+             title="Other ways to contact me">
+        Other ways to contact me!
     </MudLink>
 </MudStack>
diff --git a/AboutMe/Wasm/Pages/Projects.razor b/AboutMe/Wasm/Pages/Projects.razor
@@ -8,13 +8,12 @@
     My Projects
 </MudText>
 
-<MudText Typo="@Typo.subtitle1">
-    <MudLink Href="https://www.github.com/codemonkey85/"
-             Target="_blank"
-             title="Michael Bond's GitHub">
-        Find more on my GitHub!
-    </MudLink>
-</MudText>
+<div class="my-3">
+    <SocialLinkComponent SocialLink="@SocialLink.MyGitHub"
+                         CompactMode="@true"
+                         NameOverride="Find more on my GitHub!"
+                         TitleOverride="Find more on my GitHub!" />
+</div>
 
 <MudGrid Class="mb-3"
          Spacing="1">

diff --git a/AboutMe/Wasm/Pages/Projects.razor.cs b/AboutMe/Wasm/Pages/Projects.razor.cs
@@ -2,62 +2,64 @@ namespace AboutMe.Wasm.Pages;
 
 public partial class Projects
 {
+    private const string GitHubPagesBaseUrl = "https://codemonkey85.github.io";
+
     private List<Project> ProjectsList { get; set; } =
     [
         new()
         {
             Name = "PKMDS Blazor",
             Description = "A port of PKHeX for web, built wih Blazor",
             Url = "https://www.pkmds.app/",
-            GitHubUrl = "https://github.com/codemonkey85/PKMDS-Blazor",
+            GitHubUrl = $"{Constants.MyGitHubBaseUrl}/PKMDS-Blazor",
             Screenshots = [],
         }, // PKMDS Blazor
         new()
         {
             Name = "Sound Test",
             Description = "Messing around with the JavaScript tone APIs in Blazor",
-            Url = "https://codemonkey85.github.io/SoundTest/",
-            GitHubUrl = "https://github.com/codemonkey85/SoundTest",
+            Url = $"{GitHubPagesBaseUrl}SoundTest/",
+            GitHubUrl = $"{Constants.MyGitHubBaseUrl}/SoundTest",
             Screenshots = [],
         }, // Sound Test
         new()
         {
             Name = "Tic Tac Toe Blazor",
             Description = "A Tic Tac Toe game for web, built with Blazor",
-            Url = "https://codemonkey85.github.io/TicTacToeBlazor/",
-            GitHubUrl = "https://github.com/codemonkey85/TicTacToeBlazor",
+            Url = $"{GitHubPagesBaseUrl}TicTacToeBlazor/",
+            GitHubUrl = $"{Constants.MyGitHubBaseUrl}/TicTacToeBlazor",
             Screenshots = [],
         }, // Tic Tac Toe Blazor
         new()
         {
             Name = "Four Is The Magic Number!",
             Description = "A neat party trick, built with Blazor",
-            Url = "https://codemonkey85.github.io/FourMagicNumberGame/",
-            GitHubUrl = "https://github.com/codemonkey85/FourMagicNumberGame",
+            Url = $"{GitHubPagesBaseUrl}FourMagicNumberGame/",
+            GitHubUrl = $"{Constants.MyGitHubBaseUrl}/FourMagicNumberGame",
             Screenshots = [],
         }, // Four Is The Magic Number!
         new()
         {
             Name = "Barcode Helper",
             Description = "Solve the missing digit in a UPC-12",
-            Url = "https://codemonkey85.github.io/BarcodeHelper/",
-            GitHubUrl = "https://github.com/codemonkey85/BarcodeHelper",
+            Url = $"{GitHubPagesBaseUrl}BarcodeHelper/",
+            GitHubUrl = $"{Constants.MyGitHubBaseUrl}/BarcodeHelper",
             Screenshots = [],
         }, // Barcode Helper
         new()
         {
             Name = "Tired Doctor Manhattan",
             Description = "Doctor Manhattan is tired of stuff",
-            Url = "https://codemonkey85.github.io/TiredDoctorManhattan/",
-            GitHubUrl = "https://github.com/codemonkey85/TiredDoctorManhattan",
+            Url = $"{GitHubPagesBaseUrl}TiredDoctorManhattan/",
+            GitHubUrl = $"{Constants.MyGitHubBaseUrl}/TiredDoctorManhattan",
             Screenshots = [],
         }, // Tired Doctor Manhattan
         new()
         {
             Name = "Minecraft Command Builder",
             Description = "A tool to help build Minecraft commands",
-            Url = "https://codemonkey85.github.io/MinecraftCommandBuilder/",
-            GitHubUrl = "https://github.com/codemonkey85/MinecraftCommandBuilder",
+            Url = $"{GitHubPagesBaseUrl}MinecraftCommandBuilder/",
+            GitHubUrl = $"{Constants.MyGitHubBaseUrl}/MinecraftCommandBuilder",
             Screenshots = [],
         }, // Minecraft Command Builder
     ];

diff --git a/AboutMe/Wasm/Pages/Resume.razor b/AboutMe/Wasm/Pages/Resume.razor
@@ -20,15 +20,12 @@
     @resumeModel.Email
 </MudLink>
 
-<MudText Typo="@Typo.body1">
-    <MudButton Href="https://github.com/codemonkey85/"
-               Target="_blank"
-               Variant="@Variant.Filled"
-               Color="@Color.Primary"
-               EndIcon="@Icons.Custom.Brands.GitHub">
-        Follow me on GitHub
-    </MudButton>
-</MudText>
+<div class="my-3">
+    <SocialLinkComponent SocialLink="@SocialLink.MyGitHub"
+                         CompactMode="@true"
+                         NameOverride="Follow me on GitHub"
+                         TitleOverride="Follow me on GitHub" />
+</div>
 
 <MudDivider DividerType="@DividerType.FullWidth"
             Class="my-2" />