Changed Home Page to new flow layout

.github/workflows/docker.yml

@@ -23,7 +23,7 @@ jobs:
         tags: |
           type=semver,pattern={{version}}
         flavor: |
-          latest=rtue
+          latest=true
         labels: |
           maintainer=Mia Rose Winter
           org.opencontainers.image.title=Wave

Wave/Components/ArticleTile.razor

@@ -2,14 +2,13 @@
 
 <ArticleLink Article="Article">
 	<article class="card card-compact min-h-56 bg-base-200 text-base-content rounded-sm h-full">
-		<div class="card-body">
+		<div class="card-body max-h-full">
 			<h3 class="card-title line-clamp-2">@Article.Title</h3>
 			<small class="text-sm">@Article.PublishDate.ToString("d")</small>
-			<p class="flex-none line-clamp-5">
+			<p class="flex-1 overflow-hidden">
 				@Article.BodyPlain[..Math.Min(1000, Article.BodyPlain.Length)]
 			</p>
-			<div class="flex-1 flex items-end">
+			<div class="flex items-end">
-				
 				<small>@Article.Author.Name</small>
 			</div>
 		</div>

Wave/Components/Pages/Home.razor

@@ -22,7 +22,7 @@
 		<meta property="og:image" content="@Navigation.ToAbsoluteUri("/img/logo.png")">
 	}
 	@if (!string.IsNullOrWhiteSpace(Customizations.Value.AppDescription)) {
-		<meta property="description" content="@Customizations.Value.AppDescription">
+		<meta name="description" content="@Customizations.Value.AppDescription">
 		<meta property="og:description" content="@Customizations.Value.AppDescription">
 	}
 	@if (Features.Value.Rss) { 
@@ -33,42 +33,45 @@
 
 <PageTitle>@(TitlePrefix + Localizer["Title"])</PageTitle>
 
-<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"]</h1>
+<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 xl:grid-rows-4 gap-4">
-
+	<div class="sm:col-span-2 flex flex-col ">
-<section class="flex gap-2 flex-wrap mb-3">
+		<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Customizations.Value.AppName</h1>
-	@if (Features.Value.Rss) {
+		<p class="flex-1">@Customizations.Value.AppDescription</p>
-		<a class="btn btn-sm bg-orange-500 text-slate-50" title="RSS Feed on @Customizations.Value.AppName" href="/rss/rss.xml">
+		<section class="flex gap-2 justify-between sm:justify-start flex-wrap mb-3">
-			RSS 
+			@if (Features.Value.Rss) {
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+				<a class="btn btn-sm bg-orange-500 text-slate-50" title="RSS Feed on @Customizations.Value.AppName" href="/rss/rss.xml">
-				<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
+					RSS
-			</svg>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-		</a>
+						<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
-		<a class="btn btn-sm bg-orange-500 text-slate-50" title="Atom RSS Feed on @Customizations.Value.AppName" href="/rss/atom.xml">
+					</svg>
-			Atom RSS
+				</a>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+				<a class="btn btn-sm bg-orange-500 text-slate-50" title="Atom RSS Feed on @Customizations.Value.AppName" href="/rss/atom.xml">
-				<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
+					Atom RSS
-			</svg>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-		</a>
+						<path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
-	}
+					</svg>
-	@if (Features.Value.EmailSubscriptions) {
+				</a>
-		<a class="btn btn-sm btn-primary" title="E-Mail Newsletter" href="/Email/Subscribe">
+			}
-			E-Mail
+			@if (Features.Value.EmailSubscriptions) {
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+				<a class="btn btn-sm btn-primary" title="E-Mail Newsletter" href="/Email/Subscribe">
-				<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
+					E-Mail
-				<path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-			</svg>
+						<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
-		</a>
+						<path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
-	}
+					</svg>
-</section>
+				</a>
-
+			}
-@if (Featured is {} featured) {
+		</section>
-	<article class="mb-6">
+	</div>
-		<ArticleLink Article="featured">
+	@if (Featured is {} featured) {
-			<div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
+		<div class="sm:col-span-2 row-span-2 aspect-square xl:order-first">
-				<div class="hero-content">
+			<ArticleLink Article="featured" class="">
-					<div class="flex flex-col space-y-6 my-3">
+				<article class="relative h-full bg-secondary text-secondary-content border-l-8 border-current shadow rounded-sm">
-						<h2 class="text-2xl lg:text-4xl">
+					<div class="absolute inset-8 overflow-hidden">
-							@featured.Title
+						<div class="mb-3">
+							<h2 class="text-2xl lg:text-4xl line-clamp-2 hyphens-auto">
+								@featured.Title
+							</h2>
 							<p class="flex flex-wrap gap-2">
 								@foreach (var category in featured.Categories.OrderBy(c => c.Color)) {
 									<span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
@@ -76,29 +79,30 @@
 									</span>
 								}
 							</p>
-						</h2>
-						<p class="line-clamp-6">
-							<small class="text-sm">@featured.PublishDate.ToString("g")</small><br/>
-							@featured.BodyPlain[..Math.Min(1000, featured.BodyPlain.Length)]
-						</p>
-						<div class="flex">
-							<ProfilePill Profile="featured.Author" DisableProfileLink="true" />
 						</div>
+						<div class="hidden sm:block w-1/3 float-left mr-2">
+							<ProfilePictureComponent ProfileId="@featured.Author.Id" Size="400" />
+						</div>
+						<p class="font-bold">@featured.Author.FullName</p>
+						<small class="text-sm">@featured.PublishDate.ToString("g")</small>
+						<p class="hyphens-auto text-justify">
+							@featured.BodyPlain
+						</p>
 					</div>
-				</div>
+				</article>
-			</div>
+			</ArticleLink>
-		</ArticleLink>
+		</div>
-	</article>
+	} else {
-} else {
+		<h2 class="text-2xl lg:text-4xl mb-6">@Localizer["NoArticles_Title"]</h2>
-	<h2 class="text-2xl lg:text-4xl mb-6">@Localizer["NoArticles_Title"]</h2>
+		<p>@Localizer["NoArticles_Message"]</p>
-	<p>@Localizer["NoArticles_Message"]</p>
+	}
-}
 
-<ArticleTileArray>
 	<PageComponent LoadCallback="LoadArticles">
-		<ArticleTile Article="context" />
+		<div class="aspect-square">
+			<ArticleTile Article="context" />
+		</div>
 	</PageComponent>
-</ArticleTileArray>
+</div>
 
 <div class="grid place-content-center my-3">
 	<div class="join">

Wave/tailwind.config.js

@@ -21,6 +21,11 @@ module.exports = {
                     '6xl': "2560px",
                     '8xl': "3072px"
                 }
+            },
+            lineClamp: {
+                8: '8',
+                10: '10',
+                12: '12'
             }
         },
         fontSize: {