Updated Clean package to latest version

src/SeoToolkit.Umbraco.Site/SeoToolkit.Umbraco.Site.csproj

@@ -9,7 +9,7 @@
 
   <!-- Force windows to use ICU. Otherwise Windows 10 2019H1+ will do it, but older windows 10 and most if not all winodws servers will run NLS -->
   <ItemGroup>
-    <PackageReference Include="clean" Version="2.0.0-beta002" />
+    <PackageReference Include="Clean" Version="3.1.2" />
     <PackageReference Include="Microsoft.ICU.ICU4C.Runtime" Version="68.2.0.6" />
     <RuntimeHostConfigurationOption Include="System.Globalization.AppLocalIcu" Value="68.2" />
   </ItemGroup>

src/SeoToolkit.Umbraco.Site/Views/Author.cshtml

@@ -0,0 +1,30 @@
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Author>
+
+@using Clean.Core.Models.ViewModels
+@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels
+
+@{
+    Layout = "master.cshtml";
+    var authorListPage = Model.Parent as AuthorList;
+}
+
+
+@await Html.PartialAsync("~/Views/Partials/pageHeader.cshtml", new PageHeaderViewModel(Model.Name, Model.Title, Model.Subtitle, authorListPage.MainImage, null, null))
+
+<article>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-md-10 mx-auto">
+
+                <div class="row clearfix">
+                    <div class="col-md-4 column mx-auto">
+                        <img src="@Model.MainImage.GetCropUrl(400)" alt="@Model.Name" class="w-100">
+                        <p class="caption">@Model.Name</p>
+                    </div>
+                </div>
+
+                @Html.GetBlockListHtml(Model.ContentRows)
+            </div>
+        </div>
+    </div>
+</article>

src/SeoToolkit.Umbraco.Site/Views/AuthorList.cshtml

@@ -0,0 +1,12 @@
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.AuthorList>
+
+@using Clean.Core.Models.ViewModels
+@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels
+
+@{
+    Layout = "master.cshtml";
+}
+
+@await Html.PartialAsync("~/Views/Partials/pageHeader.cshtml", new PageHeaderViewModel(Model.Name, Model.Title, Model.Subtitle, Model.MainImage))
+
+@await Html.PartialAsync("~/Views/Partials/authors.cshtml")

src/SeoToolkit.Umbraco.Site/Views/Components/Contact/Default.cshtml

@@ -1,27 +1,26 @@
 @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContactViewModel>
 
-@using Clean.Core.Controllers.Surface
 @using Clean.Core.Models.ViewModels;
-@using Umbraco.Extensions
 
-@using (Html.BeginUmbracoForm<ContactSurfaceController>("SubmitForm", FormMethod.Post, new { @class = "text-left" }))
+@using (Html.BeginUmbracoForm("SubmitForm", "ContactSurface", FormMethod.Post, new { @class = "text-left" }))
 {
-    <div class="form-group">
+    <div class="form-floating">
+        <input asp-for="@Model.Name" class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
         <label for="Name">@Umbraco.GetDictionaryValue("ContactForm.Name")</label>
-        <input asp-for="@Model.Name" class="form-control" />
         <span asp-validation-for="@Model.Name" class="text-danger"></span>
     </div>
-    <div class="form-group">
+    <div class="form-floating">
+        <input asp-for="@Model.Email" class="form-control" id="email" placeholder="Enter your email..." data-sb-validations="required,email"/>
         <label for="Email">@Umbraco.GetDictionaryValue("ContactForm.Email")</label>
-        <input asp-for="@Model.Email" class="form-control" />
         <span asp-validation-for="@Model.Email" class="text-danger"></span>
     </div>
-    <div class="form-group">
+    <div class="form-floating">
+        <textarea asp-for="@Model.Message" class="form-control" id="message" placeholder="Enter your message here..." rows="5" style="height: 12rem"></textarea>
         <label for="Message">@Umbraco.GetDictionaryValue("ContactForm.Message")</label>
-        <textarea asp-for="@Model.Message" class="form-control" rows="5"></textarea>
         <span asp-validation-for="@Model.Message" class="text-danger"></span>
     </div>
-    <div class="form-group">
-        <button class="btn btn-primary btn-block btn-lg" type="submit">@Umbraco.GetDictionaryValue("ContactForm.Send")</button>
+    <br />
+    <div class="form-floating">
+        <button class="btn btn-primary text-uppercase float-end" id="submitButton" type="submit">@Umbraco.GetDictionaryValue("ContactForm.Send")</button>
     </div>
 }

src/SeoToolkit.Umbraco.Site/Views/Components/Pagination/Default.cshtml

@@ -0,0 +1,48 @@
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<PaginationViewModel>
+
+@using Clean.Core.Models.ViewModels;
+
+<nav aria-label="Pagination controls">
+    @if (Model.PageCount > 1)
+    {
+        <ul class="pagination justify-content-center">
+            @if (Model.PageNumber > 1)
+            {
+                <li class="page-item">
+                    <a class="page-link text-primary" href="@($"{Model.Url}?page={Model.PageNumber - 1}")">@Umbraco.GetDictionaryValue("Paging.Previous")</a>
+                </li>
+            }
+            @if(Model.ShowFirst)
+            {
+                <li class="page-item">
+                    <a class="page-link" href="@($"{Model.Url}?page={1}")">1</a>
+                </li>
+                <li class="page-item disabled">
+                    <a class="page-link" href="#">...</a>
+                </li>
+            }
+
+            @for (var p = Model.PageNumberStart; p <= Model.PageNumberEnd; p++)
+            {
+                var isCurrentPage = p == Model.PageNumber;
+                <li class="page-item">
+                    @if(isCurrentPage) 
+                    {
+                        @:<strong>
+                    }
+                        <a class="page-link @(isCurrentPage ? "text-primary" : null)" href="@($"{Model.Url}?page={p}")">@p</a>
+                    @if(isCurrentPage) 
+                    {
+                        @:</strong>
+                    }
+                </li>
+            }
+            @if (Model.PageNumber < Model.PageCount)
+            {
+                <li class="page-item">
+                    <a class="page-link text-primary" href="@($"{Model.Url}?page={Model.PageNumber + 1}")">@Umbraco.GetDictionaryValue("Paging.Next")</a>
+                </li>
+            }
+        </ul>
+    }
+</nav>

src/SeoToolkit.Umbraco.Site/Views/Partials/authors.cshtml

@@ -0,0 +1,55 @@
+@inherits UmbracoViewPage
+
+@using Clean.Core.Helpers
+@using Clean.Core.Models.ViewModels;
+@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels
+
+@{
+    AuthorList authorList = UmbracoContext.Content.GetAtRoot().DescendantsOrSelf<AuthorList>().FirstOrDefault();
+    int modelId = Model.Id;
+    var isAuthorListPage = modelId == authorList?.Id;
+    var fallbackPageSize = isAuthorListPage ? 10 : 3;
+
+    var pageSize = QueryStringHelper.GetIntFromQueryString(Context.Request.Query, "size", fallbackPageSize);
+    var pageNumber = QueryStringHelper.GetIntFromQueryString(Context.Request.Query, "page", 1);
+    var allAuthors = authorList?.Children<Author>().Where(x => x.IsVisible()) ?? Enumerable.Empty<Author>();
+    var pageOfAuthors = allAuthors.Skip((pageNumber - 1) * pageSize).Take(pageSize);
+    var totalItemCount = allAuthors.Count();
+    var pageCount = totalItemCount > 0 ? Math.Ceiling((double)totalItemCount / pageSize) : 1;
+
+}
+
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-md-10 mx-auto">
+            <div class="container-fluid">
+                <div class="row">
+                    @foreach (var author in pageOfAuthors)
+                    {
+                        <div class="col-4 mx-auto">
+                            <div class="card">
+                                <header>
+                                    <img src="@(author.MainImage.Url())" alt="@author.Name" class="w-100" />
+                                </header>
+                                <div class="card-body">
+                                    <div class="content-left text-start my-auto py-4">
+                                        <h2 class="card-title">@author.Name</h2>
+                                        <p class="card-description">@author.MetaDescription</p>
+                                        <a href="@author.Url()" class="text-primary">
+                                            @Umbraco.GetDictionaryValue("Author.ReadMore")
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+
+            @if (isAuthorListPage)
+            {
+                @await Component.InvokeAsync("Pagination", new { totalItems = totalItemCount, url = Model.Url(), pageNumber = pageNumber, pageSize = pageSize })
+            }
+        </div>
+    </div>
+</div>

src/SeoToolkit.Umbraco.Site/Views/Partials/blocklist/Components/codeSnippetRow.cshtml

@@ -0,0 +1,30 @@
+@inherits UmbracoViewPage<BlockListItem>
+@using Umbraco.Cms.Core.Models.Blocks
+
+@{
+    var row = Model.Content as CodeSnippetRow;
+    var settings = Model.Settings as CodeSnippetRowSettings;
+    if (settings?.Hide ?? false) { return; }
+
+    var spacingClasses = "";
+    if (Model.Settings is ISpacingProperties spacing)
+    {
+        spacingClasses = Clean.Core.Helpers.SpacingHelper.GetSpacingClasses(spacing.PaddingTop, spacing.PaddingBottom, spacing.PaddingLeft, spacing.PaddingRight, spacing.MarginTop, spacing.MarginBottom, spacing.MarginLeft, spacing.MarginRight);
+    }
+
+    SmidgeHelper.RequiresCss("~/clean-assets/css/vs2015.css");
+    SmidgeHelper.RequiresCss("~/clean-assets/css/highlightjs-copy.min.css");
+    SmidgeHelper.RequiresJs("~/clean-assets/js/highlight.min.js");
+    SmidgeHelper.RequiresJs("~/clean-assets/js/highlightjs-copy.min.js");
+    SmidgeHelper.RequiresJs("~/clean-assets/js/initHighlight.js");
+}
+
+<div class="row clearfix @(spacingClasses)">
+    <div class="col-md-12 column">
+        <pre><code>@row.Code</code></pre>
+        @if (!string.IsNullOrWhiteSpace(row.Title))
+        {
+            <p class="caption">@row.Title</p>
+        }
+    </div>
+</div>

src/SeoToolkit.Umbraco.Site/Views/Partials/blocklist/Components/iconLinkRow.cshtml

@@ -0,0 +1,15 @@
+@inherits UmbracoViewPage<BlockListItem>
+@using Umbraco.Cms.Core.Models.Blocks
+@addTagHelper *, Clean.Core
+
+@{
+    var row = Model.Content as IconLinkRow;
+    var settings = Model.Settings as IconLinkRowSettings;
+    if (settings?.Hide ?? false) { return; }
+}
+
+<li class="list-inline-item">
+    <a href="@row.Link.Url" target="@row.Link.Target" rel="@(row.Link.Type == global::Umbraco.Cms.Core.Models.LinkType.External ? "noopener" : null)" title="@row.Link.Name">
+        <our-svg media-item="@row.Icon" class="social-icon"></our-svg>
+    </a>
+</li>

src/SeoToolkit.Umbraco.Site/Views/Partials/blocklist/Components/imageCarouselRow.cshtml

@@ -0,0 +1,57 @@
+@inherits UmbracoViewPage<BlockListItem>
+@using Umbraco.Cms.Core.Models.Blocks
+@using Clean.Core.Extensions
+
+@{
+    var row = Model.Content as ImageCarouselRow;
+    var settings = Model.Settings as ImageCarouselRowSettings;
+    if (settings?.Hide ?? false) { return; }
+    if (row.Images == null || !row.Images.Any()) { return; }
+
+    var spacingClasses = "";
+    if (Model.Settings is ISpacingProperties spacing)
+    {
+        spacingClasses = Clean.Core.Helpers.SpacingHelper.GetSpacingClasses(spacing.PaddingTop, spacing.PaddingBottom, spacing.PaddingLeft, spacing.PaddingRight, spacing.MarginTop, spacing.MarginBottom, spacing.MarginLeft, spacing.MarginRight);
+    }
+
+    SmidgeHelper.RequiresCss("~/clean-assets/css/swiffy-slider.min.css");
+    SmidgeHelper.RequiresJs("~/clean-assets/js/swiffy-slider.min.js");
+}
+
+<div class="row clearfix @(spacingClasses)">
+    <div class="col-md-12 column">
+        <div class="swiffy-slider slider-item-reveal slider-nav-round slider-item-ratio slider-item-ratio-21x9" id="slider-@(row.Key.ToString())">
+            <ul class="slider-container">
+                @foreach (var item in row.Images)
+                {
+                    <li><img src="@item.Url()" loading="lazy" alt="@item.Content.GetAltText()"></li>
+                }
+            </ul>
+
+            <button type="button" class="slider-nav" aria-label="Go left"></button>
+            <button type="button" class="slider-nav slider-nav-next" aria-label="Go right"></button>
+
+            <div class="slider-indicators slider-indicators-square d-none d-md-flex">
+                <button class="active" aria-label="Go to slide"></button>
+                @if (row.Images.Count() > 1)
+                {
+                    foreach (var image in row.Images.Skip(1))
+                    {
+                        <button aria-label="Go to slide"></button>
+                    }
+                }
+            </div>
+
+            <div class="slider-indicators slider-indicators-sm slider-indicators-dark slider-indicators-round d-md-none slider-indicators-highlight">
+                <button class="active" aria-label="Go to slide"></button>
+                @if (row.Images.Count() > 1)
+                {
+                    foreach (var image in row.Images.Skip(1))
+                    {
+                        <button aria-label="Go to slide"></button>
+                    }
+                }
+            </div>
+        </div>
+    </div>
+</div>

src/SeoToolkit.Umbraco.Site/Views/Partials/blocklist/Components/imageRow.cshtml

@@ -0,0 +1,26 @@
+@inherits UmbracoViewPage<BlockListItem>
+@using Umbraco.Cms.Core.Models.Blocks
+@using Clean.Core.Extensions
+
+@{
+    var row = Model.Content as ImageRow;
+    var settings = Model.Settings as ImageRowSettings;
+    if (settings?.Hide ?? false) { return; }
+
+    var spacingClasses = "";
+    if (Model.Settings is ISpacingProperties spacing)
+    {
+        spacingClasses = Clean.Core.Helpers.SpacingHelper.GetSpacingClasses(spacing.PaddingTop, spacing.PaddingBottom, spacing.PaddingLeft, spacing.PaddingRight, spacing.MarginTop, spacing.MarginBottom, spacing.MarginLeft, spacing.MarginRight);
+    }
+}
+
+<div class="row clearfix @(spacingClasses)">
+    <div class="col-md-12 column">
+        <img src="@row.Image.Url()" alt="@row.Image.Content.GetAltText()" class="img-fluid">
+        @if (!string.IsNullOrWhiteSpace(row.Caption))
+        {
+            <p class="caption">@row.Caption</p>
+        }
+    </div>
+</div>
+