tag helpers

src/TerribleDev.Blog.Web/Controllers/HomeController.cs

@@ -18,10 +18,11 @@ namespace TerribleDev.Blog.Web.Controllers
         {
             this.postCache = postCache;
         }
-        
+
+
+        [Route("/index.html", Order = 2)]
+        [Route("/page/{pageNumber:int}", Order = -1 )]
         [Route("/")]
-        [Route("/index.html")]
-        [Route("/page/{pageNumber?}" )]
         [OutputCache(Duration = 31536000, VaryByParam = "pageNumber")]
         [ResponseCache(Duration = 900)]
         public IActionResult Index(int pageNumber = 1)

src/TerribleDev.Blog.Web/Startup.cs

@@ -12,6 +12,7 @@ using HardHat;
 using TerribleDev.Blog.Web.Models;
 using TerribleDev.Blog.Web.Factories;
 using Microsoft.Extensions.Hosting;
+using Microsoft.AspNetCore.Routing;
 
 namespace TerribleDev.Blog.Web
 {
@@ -44,6 +45,9 @@ namespace TerribleDev.Blog.Web
             });
             services.AddApplicationInsightsTelemetry();
             var controllerBuilder = services.AddControllersWithViews();
+            services.Configure<RouteOptions>(a => {
+              a.AppendTrailingSlash = true;
+            });
 #if DEBUG
             if (Env.IsDevelopment())
             {

src/TerribleDev.Blog.Web/Views/Home/Index.cshtml

@@ -12,16 +12,16 @@
         <div class="bottomNavButtons">
             @if (Model.HasPrevious)
             {
-                <a href="/page/@(Model.Page - 1)/" class="btn">&#8592; Previous Page</a>
+                <a asp-controller="Home" asp-action="Index" asp-route-pageNumber="@(Model.Page - 1)" class="btn">&#8592; Previous Page</a>
             }
             <div class="spacer"></div>
             @if (Model.HasNext)
             {
-                <a href="/page/@(Model.Page + 1)/" class="btn">Next Page &#8594;</a>
+                <a asp-controller="Home" asp-action="Index" asp-route-pageNumber="@(Model.Page + 1)" class="btn">Next Page &#8594;</a>
             }
         </div>
 </cache>
 
 @section Head {
     <partial name="StockMeta" />
-}
+}

src/TerribleDev.Blog.Web/Views/Shared/DisplayTemplates/Post.cshtml

@@ -10,9 +10,9 @@
             <span>Tagged In:</span><br />
             @foreach (var tag in Model.tags)
             {
-                <a href="/tag/@tag/" class="btn block">@tag</a>
+                <a asp-controller="Tags" asp-action="GetTag" asp-route-tagName="@tag" class="btn block">@tag</a>
             }
         </div>
     }
 
-</article>
+</article>

src/TerribleDev.Blog.Web/Views/Shared/Nav.cshtml

@@ -6,9 +6,9 @@
       </picture>
       <span>Tommy "Terrible Dev" Parnell</span>
       <ul class="sidebarBtns">
-          <li><a href="/" class="link-unstyled">Home</a></li>
-          <li><a href="/all-tags" class="link-unstyled">Tags</a></li>
-          <li><a href="/rss.xml" class="link-unstyled">RSS Feed</a></li>
+          <li><a asp-controller="Home" asp-action="Index" asp-route-pageNumber="@(null)" class="link-unstyled">Home</a></li>
+          <li><a asp-controller="Tags" asp-action="AllTags" class="link-unstyled">Tags</a></li>
+          <li><a asp-controller="Seo" asp-action="Rss" class="link-unstyled">RSS Feed</a></li>
           <li><a href="https://github.com/terribledev" rel="noopener" target="_blank" class="link-unstyled">Github</a></li>
           <li><a href="https://twitter.com/terribledev" rel="noopener" target="_blank" class="link-unstyled">Twitter</a></li>
           <li><a href="mailto:tommy@terribledev.io" class="link-unstyled">Email</a></li>

src/TerribleDev.Blog.Web/Views/Shared/_Layout.cshtml

@@ -44,7 +44,7 @@
   <div class="rootbox">
       <header class="header">
           <svg aria-label="Open Menu" id="menuBtn" role="button" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M4 10h24c1.104 0 2-.896 2-2s-.896-2-2-2H4c-1.104 0-2 .896-2 2s.896 2 2 2zm24 4H4c-1.104 0-2 .896-2 2s.896 2 2 2h24c1.104 0 2-.896 2-2s-.896-2-2-2zm0 8H4c-1.104 0-2 .896-2 2s.896 2 2 2h24c1.104 0 2-.896 2-2s-.896-2-2-2z" /></svg>
-          <div class="headerCallout"><a href="/" class="link-unstyled ">@config.Title</a></div>
+          <div class="headerCallout"><a asp-controller="Home" asp-action="Index" asp-route-pageNumber="@(null)" class="link-unstyled ">@config.Title</a></div>
       </header>
       <partial name="Nav" />
           <main class="headerBump main-content-wrap">

src/TerribleDev.Blog.Web/Views/Tags/AllTags.cshtml

@@ -6,7 +6,7 @@
 <cache>
 @foreach (var tag in Model.Keys)
 {
-    <a href="/tag/@tag/" class="btn block">@tag</a>
+    <a asp-controller="Tags" asp-action="GetTag" asp-route-tagName="@tag" class="btn block">@tag</a>
 }
 </cache>
 @section Head {

src/TerribleDev.Blog.Web/wwwroot/css/site.css

@@ -43,26 +43,6 @@ h6 {
   line-height: 1.25em;
 }
 
-h1 {
-  font-size: 3.3rem;
-}
-
-h2 {
-  font-size: 2.6rem;
-}
-
-h3 {
-  font-size: 2.4rem;
-}
-
-h4 {
-  font-size: 2.2rem;
-}
-
-h5 {
-  font-size: 2rem;
-}
-
 article {
   margin-top: 0.5em;
 }
@@ -79,12 +59,12 @@ body {
 
 .main-content-wrap {
   display: block;
-  max-width: 750px;
   padding-right: 1.2em;
   padding-left: 1.2em;
   padding-bottom: 1.2em;
   margin: 0 auto;
-  grid-area: c
+  grid-area: c;
+  word-break: break-word;
 }
 .headerBump {
   padding-top: 3.5rem;
@@ -160,8 +140,6 @@ a:visited {
 .header {
   display: flex;
   align-items: center;
-  height: 3.5rem;
-  top: 0;
   border-bottom: 1px solid var(--horizontal-rule);
   color: var(--headline);
   background-color: var(--primary-background);

src/TerribleDev.Blog.Web/wwwroot/css/site.desktop.css

@@ -1,30 +1,49 @@
 @media screen and (min-width: 769px) {
-    .rootbox {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-template-rows: 1fr 1fr 1fr;
-      gap: 0;
-      grid-template:
-      "b b a"
-      "b b c"
-      "b b c";
-      grid-template-columns: .25fr .75fr;
-    }
-    .navBar {
-      height: auto;
-      position: relative;
-    }
-    .navContent {
-      position: sticky;
-      top: 20px;
-    }
-    .navBar.hide {
-      display: flex;
-    }
-    #closeNav {
-      display: none;
-    }
-    #menuBtn {
-      display: none;
-    }
+  h1 {
+    font-size: 3.3rem;
   }
+
+  h2 {
+    font-size: 2.6rem;
+  }
+
+  h3 {
+    font-size: 2.4rem;
+  }
+
+  h4 {
+    font-size: 2.2rem;
+  }
+
+  h5 {
+    font-size: 2rem;
+  }
+  .rootbox {
+    display: grid;
+    grid-template-areas:
+      "b a"
+      "b c";
+    grid-template-columns: minmax(auto, 270px) 1fr;
+    grid-template-rows: 3.5rem minmax(calc(100vh - 3.5rem), auto);
+    gap: 0;
+  }
+  .navBar {
+    height: auto;
+  }
+  .navContent {
+    position: sticky;
+    top: 20px;
+  }
+  .navBar.hide {
+    display: flex;
+  }
+  #closeNav {
+    display: none;
+  }
+  #menuBtn {
+    display: none;
+  }
+  .main-content-wrap {
+    max-width: 750px;
+  }
+}

src/TerribleDev.Blog.Web/wwwroot/css/site.mobile.css

@@ -1,31 +1,34 @@
 @media screen and (max-width: 768px) {
-    h1 {
-      font-size: 2.6rem;
-    }
+  h1 {
+    font-size: 2.6rem;
+  }
 
-    h2 {
-      font-size: 2.4rem;
-    }
+  h2 {
+    font-size: 2.4rem;
+  }
 
-    h3 {
-      font-size: 2.2rem;
-    }
+  h3 {
+    font-size: 2.2rem;
+  }
 
-    h4 {
-      font-size: 2rem;
-    }
-
-    h5 {
-      font-size: 1.8rem;
-    }
-    .rootbox {
-      display: grid;
-      grid-template-areas: "a" "c";
-      grid-template-columns: 1fr;
-    }
-    .navBar {
-      position: fixed;
-      width: 100vw;
-    }
+  h4 {
+    font-size: 2rem;
+  }
 
+  h5 {
+    font-size: 1.8rem;
+  }
+  .rootbox {
+    display: grid;
+    grid-template-areas: "a" "c";
+    grid-template-rows: 3.5rem minmax(calc(100vh - 3.5rem), auto);
+    grid-template-columns: auto;
+  }
+  .navBar {
+    position: fixed;
+    width: 100vw;
+  }
+  .main-content-wrap {
+    max-width: calc(100vw - 4rem);
+  }
 }