Implemented Table of Contents (only on newly saved articles)

Wave/Components/ArticleComponent.razor

@@ -2,10 +2,11 @@
 @using Humanizer
 @using Wave.Utilities
 
+@inject NavigationManager Navigation
 @inject IStringLocalizer<Pages.ArticleView> Localizer
 
 <SectionContent SectionName="GlobalHeader">
-	<header class="bg-secondary text-secondary-content border-b-2 border-current py-6 px-4 md:px-12">
+	<header class="bg-secondary text-secondary-content border-b-2 border-current py-6 px-4 md:px-12" data-nosnippet>
 		<h1 class="text-3xl lg:text-5xl font-light">
 			@Article.Title
 		</h1>
@@ -46,6 +47,39 @@
 	</header>
 </SectionContent>
 
+@if (Article.Headings.Count > 0) {
+	<section class="mb-3 p-2 bg-base-200 rounded-box w-80 float-start mr-2 mb-2" data-nosnippet>
+		<h2 class="text-xl font-bold mb-3">@Localizer["TableOfContents"]</h2>
+		<ul class="menu p-0 [&_li>*]:rounded-none">
+			@{
+				int level = 1;
+				foreach (var heading in Article.Headings.OrderBy(h => h.Order)) {
+					int headingLevel = heading.Order % 10;
+
+					while (headingLevel < level) {
+						level--;
+						@(new MarkupString("</ul></li>"))
+					}
+
+					while (headingLevel > level) {
+						level++;
+						@(new MarkupString("<li><ul>"))
+					}
+
+					<li>
+						<a href="/@Navigation.ToBaseRelativePath(Navigation.Uri)#@heading.Anchor">@heading.Label</a>
+					</li>
+				}
+
+				while (level > 1) {
+					level--;
+					@(new MarkupString("<li><ul>"))
+				}
+			}
+		</ul>
+	</section>
+}
+
 <article class="mb-6">
 	<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
         @Content

Wave/Components/Pages/Partials/ArticleEditorPartial.razor

@@ -194,7 +194,6 @@
 			}
 
 			Article.LastModified = DateTimeOffset.UtcNow;
-			Article.UpdateBody();
 			
 			await using var context = await ContextFactory.CreateDbContextAsync();
 
@@ -213,6 +212,8 @@
 				.Where(ac => ac.Article.Id == Article.Id).LoadAsync();
 
 			context.Update(Article);
+			context.RemoveRange(Article.Headings);
+			Article.UpdateBody();
 
 			var existingImages = await context.Set<Article>()
 				.IgnoreQueryFilters().Where(a => a.Id == Article.Id)

Wave/Data/ApplicationDbContext.cs

@@ -43,6 +43,7 @@ public class ApplicationDbContext(DbContextOptions<ApplicationDbContext> options
 				.IsRequired().OnDelete(DeleteBehavior.Cascade);
 			article.HasOne(a => a.Reviewer).WithMany()
 				.IsRequired(false).OnDelete(DeleteBehavior.SetNull);
+			article.OwnsMany(a => a.Headings);
 
 			article.Property(a => a.CreationDate)
 				.IsRequired().HasDefaultValueSql("now()")

Wave/Data/Article.cs

@@ -10,10 +10,20 @@ public enum ArticleStatus {
 	Published = 2
 }
 
+public class ArticleHeading {
+	[Key]
+	public int Id { get; set; }
+	public required int Order { get; set; }
+	[MaxLength(128)]
+	public required string Label { get; set; }
+	[MaxLength(256)]
+	public required string Anchor { get; set; }
+}
+
 // TODO:: Add tags for MVP ?
 // TODO:: Archive System (Notice / Redirect to new content?) (Deprecation date?)
 
-public class Article : ISoftDelete {
+public partial class Article : ISoftDelete {
 	[Key]
 	public Guid Id { get; set; }
 	public bool IsDeleted { get; set; }
@@ -46,6 +56,7 @@ public class Article : ISoftDelete {
 
 	public IList<Category> Categories { get; } = [];
 	public IList<ArticleImage> Images { get; } = [];
+	public IList<ArticleHeading> Headings { get; } = [];
 
 	public void UpdateSlug(string? potentialNewSlug = null) {
 		if (!string.IsNullOrWhiteSpace(potentialNewSlug) && Uri.IsWellFormedUriString(potentialNewSlug, UriKind.Relative)) {
@@ -74,11 +85,27 @@ public class Article : ISoftDelete {
 		}
 
 		Slug = slug[..Math.Min(slug.Length, 64 - escapeTrimOvershoot)];
-		if (Slug.EndsWith("%")) Slug = Slug[..^1];
 	}
 
 	public void UpdateBody() {
 		BodyHtml = MarkdownUtilities.Parse(Body).Trim();
 		BodyPlain = HtmlUtilities.GetPlainText(BodyHtml).Trim();
+		
+		Headings.Clear();
+		var headings = HeadingsRegex().Matches(BodyHtml);
+		foreach(Match match in headings) {
+			string label = match.Groups["Label"].Value;
+			string anchor = match.Groups["Anchor"].Value;
+
+			var h = new ArticleHeading {
+				Order = match.Index * 10 + int.Parse(match.Groups["Level"].Value),
+				Label = label[..Math.Min(128, label.Length)],
+				Anchor = anchor[..Math.Min(256, anchor.Length)]
+			};
+			Headings.Add(h);
 		}
 	}
+
+	[GeneratedRegex("<h(?<Level>[1-6]).*id=\"(?<Anchor>.+)\".*>(?<Label>.+)</h[1-6]>")]
+	private static partial Regex HeadingsRegex();
+}

Wave/Data/Migrations/postgres/20240502122029_TableOfContents.Designer.cs

@@ -0,0 +1,750 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using Wave.Data;
+
+#nullable disable
+
+namespace Wave.Data.Migrations.postgres
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    [Migration("20240502122029_TableOfContents")]
+    partial class TableOfContents
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("Npgsql:CollationDefinition:default-case-insensitive", "und-u-kf-upper-ks-level1,und-u-kf-upper-ks-level1,icu,False")
+                .HasAnnotation("ProductVersion", "8.0.0")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("NormalizedName")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedName")
+                        .IsUnique()
+                        .HasDatabaseName("RoleNameIndex");
+
+                    b.ToTable("AspNetRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("text");
+
+                    b.Property<string>("RoleId")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetRoleClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("text");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ProviderKey")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ProviderDisplayName")
+                        .HasColumnType("text");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("LoginProvider", "ProviderKey");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserLogins", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("text");
+
+                    b.Property<string>("RoleId")
+                        .HasColumnType("text");
+
+                    b.HasKey("UserId", "RoleId");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetUserRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("text");
+
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("text");
+
+                    b.HasKey("UserId", "LoginProvider", "Name");
+
+                    b.ToTable("AspNetUserTokens", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.ApiClaim", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ApiKeyKey")
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<string>("Type")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<string>("Value")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ApiKeyKey");
+
+                    b.ToTable("ApiClaim");
+                });
+
+            modelBuilder.Entity("Wave.Data.ApiKey", b =>
+                {
+                    b.Property<string>("Key")
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<string>("OwnerName")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.HasKey("Key");
+
+                    b.ToTable("ApiKey");
+                });
+
+            modelBuilder.Entity("Wave.Data.ApplicationUser", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("text");
+
+                    b.Property<string>("AboutTheAuthor")
+                        .IsRequired()
+                        .HasMaxLength(512)
+                        .HasColumnType("character varying(512)");
+
+                    b.Property<int>("AccessFailedCount")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Biography")
+                        .IsRequired()
+                        .HasMaxLength(4096)
+                        .HasColumnType("character varying(4096)");
+
+                    b.Property<string>("BiographyHtml")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("text");
+
+                    b.Property<string>("ContactEmail")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<string>("ContactPhone")
+                        .IsRequired()
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<string>("ContactPhoneBusiness")
+                        .IsRequired()
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<string>("ContactWebsite")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<string>("Email")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<bool>("EmailConfirmed")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("FullName")
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<bool>("LockoutEnabled")
+                        .HasColumnType("boolean");
+
+                    b.Property<DateTimeOffset?>("LockoutEnd")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("NormalizedEmail")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("NormalizedUserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("text");
+
+                    b.Property<string>("PhoneNumber")
+                        .HasColumnType("text");
+
+                    b.Property<bool>("PhoneNumberConfirmed")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("SecurityStamp")
+                        .HasColumnType("text");
+
+                    b.Property<bool>("TwoFactorEnabled")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("UserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedEmail")
+                        .HasDatabaseName("EmailIndex");
+
+                    b.HasIndex("NormalizedUserName")
+                        .IsUnique()
+                        .HasDatabaseName("UserNameIndex");
+
+                    b.ToTable("AspNetUsers", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.Article", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("AuthorId")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Body")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("BodyHtml")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("BodyPlain")
+                        .IsRequired()
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("text")
+                        .HasDefaultValue("");
+
+                    b.Property<bool>("CanBePublic")
+                        .ValueGeneratedOnAddOrUpdate()
+                        .HasColumnType("boolean")
+                        .HasComputedColumnSql("\"IsDeleted\" = false AND \"Status\" = 2", true);
+
+                    b.Property<DateTimeOffset>("CreationDate")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamp with time zone")
+                        .HasDefaultValueSql("now()");
+
+                    b.Property<bool>("IsDeleted")
+                        .HasColumnType("boolean");
+
+                    b.Property<DateTimeOffset>("LastModified")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamp with time zone")
+                        .HasDefaultValueSql("now()");
+
+                    b.Property<DateTimeOffset>("PublishDate")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("ReviewerId")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Slug")
+                        .IsRequired()
+                        .ValueGeneratedOnAdd()
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)")
+                        .HasDefaultValue("");
+
+                    b.Property<int>("Status")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AuthorId");
+
+                    b.HasIndex("ReviewerId");
+
+                    b.ToTable("Articles", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.ArticleCategory", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<Guid>("ArticleId")
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid>("CategoryId")
+                        .HasColumnType("uuid");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ArticleId");
+
+                    b.HasIndex("CategoryId");
+
+                    b.ToTable("ArticleCategories", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.ArticleImage", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid?>("ArticleId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("ImageDescription")
+                        .IsRequired()
+                        .HasMaxLength(2048)
+                        .HasColumnType("character varying(2048)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ArticleId");
+
+                    b.ToTable("Images", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.Category", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<int>("Color")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer")
+                        .HasDefaultValue(25);
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)")
+                        .UseCollation("default-case-insensitive");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Name")
+                        .IsUnique();
+
+                    b.ToTable("Categories", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.EmailNewsletter", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<Guid>("ArticleId")
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTimeOffset>("DistributionDateTime")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<bool>("IsSend")
+                        .HasColumnType("boolean");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ArticleId")
+                        .IsUnique();
+
+                    b.ToTable("Newsletter", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.EmailSubscriber", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("Email")
+                        .IsRequired()
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)")
+                        .UseCollation("default-case-insensitive");
+
+                    b.Property<string>("Language")
+                        .IsRequired()
+                        .ValueGeneratedOnAdd()
+                        .HasMaxLength(8)
+                        .HasColumnType("character varying(8)")
+                        .HasDefaultValue("en-US");
+
+                    b.Property<DateTimeOffset?>("LastMailOpened")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<DateTimeOffset?>("LastMailReceived")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<string>("UnsubscribeReason")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<bool>("Unsubscribed")
+                        .HasColumnType("boolean");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Email")
+                        .IsUnique();
+
+                    b.HasIndex("Unsubscribed");
+
+                    b.ToTable("NewsletterSubscribers", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.ProfilePicture", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ApplicationUserId")
+                        .HasColumnType("text");
+
+                    b.Property<Guid>("ImageId")
+                        .HasColumnType("uuid");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ApplicationUserId")
+                        .IsUnique();
+
+                    b.ToTable("ProfilePictures", (string)null);
+                });
+
+            modelBuilder.Entity("Wave.Data.UserLink", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ApplicationUserId")
+                        .HasColumnType("text");
+
+                    b.Property<string>("UrlString")
+                        .IsRequired()
+                        .HasMaxLength(1024)
+                        .HasColumnType("character varying(1024)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ApplicationUserId");
+
+                    b.ToTable("UserLink");
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.HasOne("Wave.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.HasOne("Wave.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Wave.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.HasOne("Wave.Data.ApplicationUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Wave.Data.ApiClaim", b =>
+                {
+                    b.HasOne("Wave.Data.ApiKey", null)
+                        .WithMany("ApiClaims")
+                        .HasForeignKey("ApiKeyKey")
+                        .OnDelete(DeleteBehavior.Cascade);
+                });
+
+            modelBuilder.Entity("Wave.Data.Article", b =>
+                {
+                    b.HasOne("Wave.Data.ApplicationUser", "Author")
+                        .WithMany("Articles")
+                        .HasForeignKey("AuthorId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Wave.Data.ApplicationUser", "Reviewer")
+                        .WithMany()
+                        .HasForeignKey("ReviewerId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.OwnsMany("Wave.Data.ArticleHeading", "Headings", b1 =>
+                        {
+                            b1.Property<Guid>("ArticleId")
+                                .HasColumnType("uuid");
+
+                            b1.Property<int>("Id")
+                                .ValueGeneratedOnAdd()
+                                .HasColumnType("integer");
+
+                            NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b1.Property<int>("Id"));
+
+                            b1.Property<string>("Anchor")
+                                .IsRequired()
+                                .HasMaxLength(256)
+                                .HasColumnType("character varying(256)");
+
+                            b1.Property<string>("Label")
+                                .IsRequired()
+                                .HasMaxLength(128)
+                                .HasColumnType("character varying(128)");
+
+                            b1.Property<int>("Order")
+                                .HasColumnType("integer");
+
+                            b1.HasKey("ArticleId", "Id");
+
+                            b1.ToTable("ArticleHeading");
+
+                            b1.WithOwner()
+                                .HasForeignKey("ArticleId");
+                        });
+
+                    b.Navigation("Author");
+
+                    b.Navigation("Headings");
+
+                    b.Navigation("Reviewer");
+                });
+
+            modelBuilder.Entity("Wave.Data.ArticleCategory", b =>
+                {
+                    b.HasOne("Wave.Data.Article", "Article")
+                        .WithMany()
+                        .HasForeignKey("ArticleId")
+                        .OnDelete(DeleteBehavior.NoAction)
+                        .IsRequired();
+
+                    b.HasOne("Wave.Data.Category", "Category")
+                        .WithMany()
+                        .HasForeignKey("CategoryId")
+                        .OnDelete(DeleteBehavior.NoAction)
+                        .IsRequired();
+
+                    b.Navigation("Article");
+
+                    b.Navigation("Category");
+                });
+
+            modelBuilder.Entity("Wave.Data.ArticleImage", b =>
+                {
+                    b.HasOne("Wave.Data.Article", null)
+                        .WithMany("Images")
+                        .HasForeignKey("ArticleId")
+                        .OnDelete(DeleteBehavior.Cascade);
+                });
+
+            modelBuilder.Entity("Wave.Data.EmailNewsletter", b =>
+                {
+                    b.HasOne("Wave.Data.Article", "Article")
+                        .WithOne()
+                        .HasForeignKey("Wave.Data.EmailNewsletter", "ArticleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Article");
+                });
+
+            modelBuilder.Entity("Wave.Data.ProfilePicture", b =>
+                {
+                    b.HasOne("Wave.Data.ApplicationUser", null)
+                        .WithOne("ProfilePicture")
+                        .HasForeignKey("Wave.Data.ProfilePicture", "ApplicationUserId")
+                        .OnDelete(DeleteBehavior.SetNull);
+                });
+
+            modelBuilder.Entity("Wave.Data.UserLink", b =>
+                {
+                    b.HasOne("Wave.Data.ApplicationUser", null)
+                        .WithMany("Links")
+                        .HasForeignKey("ApplicationUserId")
+                        .OnDelete(DeleteBehavior.Cascade);
+                });
+
+            modelBuilder.Entity("Wave.Data.ApiKey", b =>
+                {
+                    b.Navigation("ApiClaims");
+                });
+
+            modelBuilder.Entity("Wave.Data.ApplicationUser", b =>
+                {
+                    b.Navigation("Articles");
+
+                    b.Navigation("Links");
+
+                    b.Navigation("ProfilePicture");
+                });
+
+            modelBuilder.Entity("Wave.Data.Article", b =>
+                {
+                    b.Navigation("Images");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

Wave/Data/Migrations/postgres/20240502122029_TableOfContents.cs

@@ -0,0 +1,40 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace Wave.Data.Migrations.postgres;
+
+/// <inheritdoc />
+public partial class TableOfContents : Migration {
+	/// <inheritdoc />
+	protected override void Up(MigrationBuilder migrationBuilder) {
+		migrationBuilder.CreateTable(
+			name: "ArticleHeading",
+			columns: table => new {
+				ArticleId = table.Column<Guid>(type: "uuid", nullable: false),
+				Id = table.Column<int>(type: "integer", nullable: false)
+					.Annotation("Npgsql:ValueGenerationStrategy",
+						NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+				Order = table.Column<int>(type: "integer", nullable: false),
+				Label = table.Column<string>(type: "character varying(128)", maxLength: 128, nullable: false),
+				Anchor = table.Column<string>(type: "character varying(256)", maxLength: 256, nullable: false)
+			},
+			constraints: table => {
+				table.PrimaryKey("PK_ArticleHeading", x => new {x.ArticleId, x.Id});
+				table.ForeignKey(
+					name: "FK_ArticleHeading_Articles_ArticleId",
+					column: x => x.ArticleId,
+					principalTable: "Articles",
+					principalColumn: "Id",
+					onDelete: ReferentialAction.Cascade);
+			});
+	}
+
+	/// <inheritdoc />
+	protected override void Down(MigrationBuilder migrationBuilder) {
+		migrationBuilder.DropTable(
+			name: "ArticleHeading");
+	}
+}

Wave/Data/Migrations/postgres/ApplicationDbContextModelSnapshot.cs

@@ -630,8 +630,42 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                         .HasForeignKey("ReviewerId")
                         .OnDelete(DeleteBehavior.SetNull);
 
+                    b.OwnsMany("Wave.Data.ArticleHeading", "Headings", b1 =>
+                        {
+                            b1.Property<Guid>("ArticleId")
+                                .HasColumnType("uuid");
+
+                            b1.Property<int>("Id")
+                                .ValueGeneratedOnAdd()
+                                .HasColumnType("integer");
+
+                            NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b1.Property<int>("Id"));
+
+                            b1.Property<string>("Anchor")
+                                .IsRequired()
+                                .HasMaxLength(256)
+                                .HasColumnType("character varying(256)");
+
+                            b1.Property<string>("Label")
+                                .IsRequired()
+                                .HasMaxLength(128)
+                                .HasColumnType("character varying(128)");
+
+                            b1.Property<int>("Order")
+                                .HasColumnType("integer");
+
+                            b1.HasKey("ArticleId", "Id");
+
+                            b1.ToTable("ArticleHeading");
+
+                            b1.WithOwner()
+                                .HasForeignKey("ArticleId");
+                        });
+
                     b.Navigation("Author");
 
+                    b.Navigation("Headings");
+
                     b.Navigation("Reviewer");
                 });
 

Wave/Resources/Components/Pages/ArticleView.de-DE.resx

@@ -158,4 +158,7 @@
     <data name="Recommendations_Title" xml:space="preserve">
         <value>Das könnte Sie auch interessieren</value>
     </data>
+    <data name="TableOfContents" xml:space="preserve">
+        <value>Inhaltsübersicht</value>
+    </data>
 </root>

Wave/Resources/Components/Pages/ArticleView.resx

@@ -158,4 +158,7 @@
     <data name="Recommendations_Title" xml:space="preserve">
         <value>This might also interest you</value>
     </data>
+    <data name="TableOfContents" xml:space="preserve">
+        <value>Table of Content</value>
+    </data>
 </root>

Wave/Utilities/MarkdownUtilities.cs

@@ -1,5 +1,6 @@
 using ColorCode.Styling;
 using Markdig;
+using Markdig.Extensions.AutoIdentifiers;
 using Markdig.Extensions.MediaLinks;
 using Microsoft.AspNetCore.Components;
 using Markdown.ColorCode;
@@ -10,6 +11,7 @@ namespace Wave.Utilities;
 public static class MarkdownUtilities {
     public static string Parse(string markdown) {
         var pipeline = new MarkdownPipelineBuilder()
+	        .UseAutoIdentifiers(AutoIdentifierOptions.GitHub)
 	        .UsePipeTables()
             .UseEmphasisExtras()
             .UseListExtras()