Twiiter to X, fixes SVG, fixes gh link, fixes Published in an article…

…, improved menuItems in navmenu
BlazorStatic · Jan 21, 2024 · 30a02fa · 30a02fa
1 parent 54e6fb6
commit 30a02fa
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 22 deletions.
diff --git a/BlazorStaticWebsite/Components/Layout/MainLayout.razor b/BlazorStaticWebsite/Components/Layout/MainLayout.razor
@@ -22,7 +22,7 @@
 
                     <a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="https://twitter.com/tesar-tech">
                         <span class="sr-only">twitter</span>
-                        <Svg Icon="Svg.Icons.Twitter"/>
+                        <Svg Icon="Svg.Icons.X"/>
                     </a>
                 </div>
                 <div class="mb-2 flex space-x-2 text-sm text-gray-400">

diff --git a/BlazorStaticWebsite/Components/Layout/NavMenu.razor b/BlazorStaticWebsite/Components/Layout/NavMenu.razor
@@ -15,8 +15,14 @@
     <div class="flex items-center space-x-4 leading-5 sm:space-x-6">
         @foreach(var item in menuItems)
         {
-            <NavLink ActiveClass="bg-primary-950 px-2 py-1 rounded-xl" class="hidden font-medium text-gray-100 sm:block" 
-                     Match="@(item.link==""?NavLinkMatch.All:NavLinkMatch.Prefix)" href="@item.link">@item.name</NavLink>
+            <NavLink ActiveClass="bg-primary-950 px-2 py-1 rounded-xl" class="hidden font-medium text-gray-100 sm:block"
+                     Match="@(item.Link == "" ? NavLinkMatch.All : NavLinkMatch.Prefix)" href="@item.Link">
+                @item.Name
+                @if (item.Icon != null)
+                {
+                    <Svg Icon="item.Icon"/>
+                }
+            </NavLink>
 
             @* <a class="hidden font-medium text-gray-100 sm:block   @(Nm.Uri.EndsWith(item.link)?"":"") " href="@item.link">@item.name</a> *@
         } 
@@ -37,8 +43,14 @@
                 @foreach (var item in menuItems)
                 {
                     <div class="px-12 py-4">
-                        <NavLink ActiveClass="underline" class="text-2xl font-bold tracking-widest text-gray-100" 
-                                             Match="@(item.link==""?NavLinkMatch.All:NavLinkMatch.Prefix)" href="@item.link">@item.name</NavLink>
+                        <NavLink ActiveClass="underline" class="text-2xl font-bold tracking-widest text-gray-100"
+                                 Match="@(item.Link == "" ? NavLinkMatch.All : NavLinkMatch.Prefix)" href="@item.Link">
+                            @item.Name
+                            @if(item.Icon != null)
+                            {
+                                <Svg Icon="item.Icon"/>
+                            }
+                        </NavLink>
                     </div>
                 }
             </nav>
@@ -56,15 +68,15 @@
 
 @code
 {
+List<MenuItem> menuItems =
+[
+    new("Home", ""),
+    new("Blog", "blog"),
+    new("Tags", "tags"),
+    new("Docs", "docs"),
+    new("", WebsiteKeys.GitHubRepo, Svg.Icons.Github)
+];
+    record MenuItem(string Name, string Link, Svg.Icons? Icon = null);
+
 
-    List<(string name, string link)> 
-        menuItems =
-        [
-            ("Home", ""),
-            ("Blog", "blog"),
-            ("Tags", "tags"),
-            ("Docs", "docs"),
-            ("Github  \u2b67", WebsiteKeys.GitHubRepo)
-        ];
-
 }
diff --git a/BlazorStaticWebsite/Components/Pages/Blog.razor b/BlazorStaticWebsite/Components/Pages/Blog.razor
@@ -66,7 +66,7 @@
                                             @if (!string.IsNullOrWhiteSpace(author.TwitterUserName))
                                             {
                                                 <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/@author.TwitterUserName" class="flex gap-1 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-                                                    <Svg SizeClasses="w-4 h-4" Icon="Svg.Icons.Twitter"/>
+                                                    <Svg SizeClasses="w-4 h-4" Icon="Svg.Icons.X"/>
                                                 </a>
                                             }
                                             @if (!string.IsNullOrWhiteSpace(author.GitHubUserName))

diff --git a/BlazorStaticWebsite/Components/Svg.razor b/BlazorStaticWebsite/Components/Svg.razor
@@ -1,8 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover:text-primary-400 @SizeClasses fill-current text-gray-200">
+@if (Icon == null)
+    return;
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="@IconToViewBox(Icon)" class="hover:text-primary-400 @SizeClasses fill-current text-gray-200">
     @switch (Icon)
     {
-        case Icons.Twitter:
-            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
+        case Icons.X:
+            <path d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/>
             break;
         case Icons.Github:
             <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
@@ -15,7 +17,14 @@
     [Parameter, EditorRequired] public Icons? Icon { get; set; }
     [Parameter] public string SizeClasses { get; set; } = "h-6 w-6";
     public enum Icons{
-        Twitter,
+        X,
         Github
     }
+
+    string IconToViewBox(Icons? icon) => icon switch
+    {
+        Icons.X => "0 0 50 50",
+        Icons.Github => "0 0 24 24",
+        _ => "0 0 24 24"
+    };
 }
diff --git a/BlazorStaticWebsite/Content/Blog/the-origins-of-blazorstatic.md b/BlazorStaticWebsite/Content/Blog/the-origins-of-blazorstatic.md
@@ -1,7 +1,7 @@
 ---
 title: The Origins of BlazorStatic
 lead: BlazorStatic started as a weekend side project, growing into a practical tool for .NET developers seeking an efficient static site generator with Blazor's flexibility.
-Published: 2023-11-27
+published: 2023-11-27
 tags: [story]
 authors:
     - name: "Jan Tesař"

diff --git a/BlazorStaticWebsite/Program.cs b/BlazorStaticWebsite/Program.cs
@@ -66,5 +66,5 @@ public static class WebsiteKeys
 {
     public const string BlogPostStorageAddress = "https://github.com/tesar-tech/BlazorStatic/tree/master/BlazorStaticWebsite/Content/Blog/";
 
-    public const string GitHubRepo = "https://github.com/tesar-tech/blob/BlazorStatic/";
+    public const string GitHubRepo = "https://github.com/tesar-tech/BlazorStatic/";
 }