Make all section headers anchors

web-app/src/app.css

@@ -68,7 +68,7 @@ label[for="toggle-mobile-preview"],
 
 :is(button, input, textarea, select):focus,
 #toggle-mobile-preview:checked + label {
-  outline: 0.125rem solid var(--color-accent);
+  outline: 0.125rem solid currentColor;
   outline-offset: 0.25rem;
 }
 

web-app/src/lib/templates/docs/DocsIndex.svelte

@@ -38,11 +38,9 @@
 </header>
 
 <main>
-  <section>
-    {@html mainContent}
-  </section>
+  {@html mainContent}
   {#if articles.length > 0}
-    <section>
+    <section class="articles" id="articles">
       <h2>Articles</h2>
 
       {#each articles as article}

web-app/src/routes/(authenticated)/+page.svelte

@@ -12,8 +12,10 @@
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
-<section>
-  <h2>Create website</h2>
+<section id="create-website">
+  <h2>
+    <a href="#create-website">Create website</a>
+  </h2>
 
   <Modal id="create-website" text="Create website">
     <h3>Create website</h3>
@@ -46,8 +48,10 @@
 </section>
 
 {#if data.totalWebsiteCount > 0}
-  <section>
-    <h2>All websites</h2>
+  <section id="all-websites">
+    <h2>
+      <a href="#all-websites">All websites</a>
+    </h2>
 
     <details>
       <summary>Search & Sort & Filter</summary>

web-app/src/routes/(authenticated)/account/+page.svelte

@@ -9,8 +9,10 @@
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
-<section>
-  <h2>Overview</h2>
+<section id="overview">
+  <h2>
+    <a href="#overview">Overview</a>
+  </h2>
 
   <ul>
     <li>
@@ -24,16 +26,20 @@
   </ul>
 </section>
 
-<section>
-  <h2>Logout</h2>
+<section id="logout">
+  <h2>
+    <a href="#logout">Logout</a>
+  </h2>
 
   <form method="POST" action="?/logout" use:enhance>
     <button type="submit">Logout</button>
   </form>
 </section>
 
-<section>
-  <h2>Delete account</h2>
+<section id="delete-account">
+  <h2>
+    <a href="#delete-account">Delete account</a>
+  </h2>
 
   <Modal id="delete-account" text="Delete account">
     <h3>Delete account</h3>

web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte

@@ -34,8 +34,10 @@
   {previewContent}
   previewScrollTop={textareaScrollTop}
 >
-  <section>
-    <h2>Global</h2>
+  <section id="global">
+    <h2>
+      <a href="#global">Global</a>
+    </h2>
     <form
       action="?/updateGlobal"
       method="POST"
@@ -85,8 +87,10 @@
     </form>
   </section>
 
-  <section>
-    <h2>Header</h2>
+  <section id="header">
+    <h2>
+      <a href="#header">Header</a>
+    </h2>
 
     <form
       action="?/updateHeader"
@@ -139,8 +143,10 @@
     </form>
   </section>
 
-  <section>
-    <h2>Home</h2>
+  <section id="home">
+    <h2>
+      <a href="#home">Home</a>
+    </h2>
 
     <form
       action="?/updateHome"
@@ -168,8 +174,10 @@
     </form>
   </section>
 
-  <section>
-    <h2>Footer</h2>
+  <section id="footer">
+    <h2>
+      <a href="#footer">Footer</a>
+    </h2>
 
     <form
       action="?/updateFooter"

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte

@@ -17,8 +17,10 @@
   title={data.website.title}
   previewContent={data.home.main_content}
 >
-  <section>
-    <h2>Create article</h2>
+  <section id="create-article">
+    <h2>
+      <a href="#create-article">Create article</a>
+    </h2>
 
     <Modal id="create-article" text="Create article">
       <h3>Create article</h3>
@@ -44,8 +46,10 @@
   </section>
 
   {#if data.totalArticleCount > 0}
-    <section>
-      <h2>All articles</h2>
+    <section id="all-articles">
+      <h2>
+        <a href="#all-articles">All articles</a>
+      </h2>
 
       <details>
         <summary>Search & Sort & Filter</summary>

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -35,8 +35,10 @@
     "Put some markdown content in main content to see a live preview here"}
   previewScrollTop={textareaScrollTop}
 >
-  <section>
-    <h2>Edit article</h2>
+  <section id="edit-article">
+    <h2>
+      <a href="#edit-article">Edit article</a>
+    </h2>
 
     <form
       method="POST"

web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte

@@ -15,8 +15,10 @@
   title={data.website.title}
   previewContent={data.home.main_content}
 >
-  <section>
-    <h2>Add collaborator</h2>
+  <section id="add-collaborator">
+    <h2>
+      <a href="#add-collaborator">Add collaborator</a>
+    </h2>
 
     <Modal id="add-collaborator" text="Add collaborator">
       <h3>Add collaborator</h3>
@@ -51,8 +53,10 @@
   </section>
 
   {#if data.collaborators.length > 0}
-    <section>
-      <h2>All collaborators</h2>
+    <section id="all-collaborators">
+      <h2>
+        <a href="#all-collaborators">All collaborators</a>
+      </h2>
 
       <ul class="unpadded">
         {#each data.collaborators as { website_id, user_id, permission_level, user: { username } } (`${website_id}-${user_id}`)}

web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte

@@ -15,8 +15,10 @@
   previewContent={data.websitePreviewUrl}
   fullPreview={true}
 >
-  <section>
-    <h2>Publish website</h2>
+  <section id="publish-website">
+    <h2>
+      <a href="#publish-website">Publish website</a>
+    </h2>
 
     <p>
       The preview area on this page allows you to see exactly how your website will look when it is

web-app/src/routes/+layout.svelte

@@ -53,7 +53,8 @@
 <footer>
   <p>
     <small
-      >&copy; {new Date().getFullYear()} &mdash; <a href="https://archtika.com">archtika</a></small
+      >Copyright &copy; {new Date().getFullYear()} &mdash;
+      <a href="https://archtika.com">archtika</a></small
     >
   </p>
 </footer>