Added OpenGraph to Home, addded Customization for page description

This commit is contained in:
Mia Rose Winter 2024-02-07 13:52:18 +01:00
parent 452c93fca0
commit b66c26394d
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
2 changed files with 98 additions and 78 deletions

View file

@ -1,14 +1,33 @@
@page "/" @page "/"
@using Microsoft.Extensions.Localization @using Microsoft.Extensions.Localization
@using Microsoft.EntityFrameworkCore @using Microsoft.EntityFrameworkCore
@using Microsoft.Extensions.Options
@using Wave.Data @using Wave.Data
@using Wave.Utilities @using Wave.Utilities
@rendermode InteractiveServer @rendermode InteractiveServer
@attribute [StreamRendering] @attribute [StreamRendering]
@inject IOptions<Customization> Customizations
@inject NavigationManager Navigation
@inject IDbContextFactory<ApplicationDbContext> ContextFactory; @inject IDbContextFactory<ApplicationDbContext> ContextFactory;
@inject IStringLocalizer<Home> Localizer @inject IStringLocalizer<Home> Localizer
<HeadContent>
<meta property="og:type" content="website">
<meta property="og:title" content="@Customizations.Value.AppName">
<meta property="og:site_name" content="@Customizations.Value.AppName">
<meta property="og:url" content="@Navigation.BaseUri">
@if (!string.IsNullOrWhiteSpace(Customizations.Value.LogoLink)) {
<meta property="og:image" content="@Customizations.Value.LogoLink">
} else {
<meta property="og:image" content="@Navigation.ToAbsoluteUri("/img/logo.png")">
}
@if (!string.IsNullOrWhiteSpace(Customizations.Value.AppDescription)) {
<meta property="description" content="@Customizations.Value.AppDescription">
<meta property="og:description" content="@Customizations.Value.AppDescription">
}
</HeadContent>
<PageTitle>@(TitlePrefix + Localizer["Title"])</PageTitle> <PageTitle>@(TitlePrefix + Localizer["Title"])</PageTitle>
<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"]</h1> <h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"]</h1>
@ -16,97 +35,97 @@
<!-- TODO: somehow get status message --> <!-- TODO: somehow get status message -->
@if (Busy) { @if (Busy) {
<div class="flex place-content-center h-full text-primary"> <div class="flex place-content-center h-full text-primary">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
} else { } else {
@if (Articles.FirstOrDefault() is {} featured) { @if (Articles.FirstOrDefault() is {} featured) {
<article class="mb-6"> <article class="mb-6">
<ArticleLink Article="featured"> <ArticleLink Article="featured">
<div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box"> <div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
<div class="hero-content"> <div class="hero-content">
<div class="flex flex-col space-y-6 my-3"> <div class="flex flex-col space-y-6 my-3">
<h2 class="text-2xl lg:text-4xl"> <h2 class="text-2xl lg:text-4xl">
@featured.Title @featured.Title
<p class="flex flex-wrap gap-2"> <p class="flex flex-wrap gap-2">
@foreach (var category in featured.Categories.OrderBy(c => c.Color)) { @foreach (var category in featured.Categories.OrderBy(c => c.Color)) {
<span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)"> <span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
@category.Name @category.Name
</span> </span>
} }
</p> </p>
</h2> </h2>
<p class="line-clamp-6"> <p class="line-clamp-6">
<small class="text-sm">@featured.PublishDate.ToString("g")</small><br/> <small class="text-sm">@featured.PublishDate.ToString("g")</small><br/>
@featured.Body[..Math.Min(1000, featured.Body.Length)] @featured.Body[..Math.Min(1000, featured.Body.Length)]
</p> </p>
<div class="flex"> <div class="flex">
<ProfilePill Profile="featured.Author" /> <ProfilePill Profile="featured.Author" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ArticleLink> </ArticleLink>
</article> </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> <ArticleTileArray>
@foreach (var article in Articles.Skip(1)) { @foreach (var article in Articles.Skip(1)) {
<ArticleTile Article="article" /> <ArticleTile Article="article" />
} }
</ArticleTileArray> </ArticleTileArray>
} }
@if (HasMore) { @if (HasMore) {
<div class="flex place-content-center"> <div class="flex place-content-center">
<button class="btn btn-wide" @onclick="More">@Localizer["More"]</button> <button class="btn btn-wide" @onclick="More">@Localizer["More"]</button>
</div> </div>
} }
@code { @code {
[CascadingParameter(Name = "TitlePrefix")] [CascadingParameter(Name = "TitlePrefix")]
private string TitlePrefix { get; set; } = default!; private string TitlePrefix { get; set; } = default!;
private List<Article> Articles { get; } = []; private List<Article> Articles { get; } = [];
private bool HasMore { get; set; } private bool HasMore { get; set; }
private bool Busy { get; set; } = true; private bool Busy { get; set; } = true;
protected override async Task OnAfterRenderAsync(bool firstRender) { protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) { if (firstRender) {
try { try {
await using var context = await ContextFactory.CreateDbContextAsync(); await using var context = await ContextFactory.CreateDbContextAsync();
var query = context.Set<Article>() var query = context.Set<Article>()
.Include(a => a.Author).Include(a => a.Categories) .Include(a => a.Author).Include(a => a.Categories)
.OrderByDescending(a => a.PublishDate); .OrderByDescending(a => a.PublishDate);
var articles = await query.Take(11).ToListAsync(); var articles = await query.Take(11).ToListAsync();
HasMore = (await query.CountAsync()) > 11; HasMore = (await query.CountAsync()) > 11;
Articles.AddRange(articles); Articles.AddRange(articles);
} finally { } finally {
Busy = false; Busy = false;
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
} }
} }
} }
private async Task More() { private async Task More() {
try { try {
Busy = HasMore = true; Busy = HasMore = true;
await using var context = await ContextFactory.CreateDbContextAsync(); await using var context = await ContextFactory.CreateDbContextAsync();
var query = context.Set<Article>() var query = context.Set<Article>()
.Include(a => a.Author).Include(a => a.Categories) .Include(a => a.Author).Include(a => a.Categories)
.OrderByDescending(a => a.PublishDate) .OrderByDescending(a => a.PublishDate)
.Skip(Articles.Count); .Skip(Articles.Count);
var articles = await query.Take(10).ToListAsync(); var articles = await query.Take(10).ToListAsync();
Articles.AddRange(articles); Articles.AddRange(articles);
HasMore = (await query.CountAsync()) > 10; HasMore = (await query.CountAsync()) > 10;
} finally { } finally {
Busy = false; Busy = false;
} }
} }
} }

View file

@ -2,6 +2,7 @@
public class Customization { public class Customization {
public string AppName { get; set; } = "Wave"; public string AppName { get; set; } = "Wave";
public string AppDescription { get; set; } = "";
public string DefaultTheme { get; set; } = ""; public string DefaultTheme { get; set; } = "";
public string LogoLink { get; set; } = ""; public string LogoLink { get; set; } = "";
public string Footer { get; set; } = ""; public string Footer { get; set; } = "";