From a1c12866ae6f24dd3db819757b8de40644b1efd9 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Thu, 18 May 2023 22:17:46 +0200
Subject: [PATCH] Format

---
 README.md                                |  2 +-
 astro.config.ts                          | 26 +++++----
 public/favicon.svg                       |  2 +-
 src/components/ArticleSearch.svelte      | 46 ++++++++--------
 src/components/Dropdown.svelte           | 68 ++++++++++++------------
 src/components/Footer.astro              |  6 ++-
 src/components/Head.astro                |  2 +-
 src/components/Nav.astro                 |  6 +--
 src/components/TableOfContents.svelte    |  2 +-
 src/components/ThemeToggle.svelte        |  2 +-
 src/content/blog/markdown-style-guide.md |  2 +-
 src/layouts/ArticleLayout.astro          |  7 ++-
 src/pages/[...slug].astro                |  2 +-
 src/styles/global.css                    | 23 +++++---
 14 files changed, 109 insertions(+), 87 deletions(-)

diff --git a/README.md b/README.md
index aa2dc2b..b54d7e4 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # aurora
 
-Minimal blog theme built with Astro, mainly focused on accessibility and usability. 
+Minimal blog theme built with Astro, mainly focused on accessibility and usability.
diff --git a/astro.config.ts b/astro.config.ts
index c888c68..0e3dd86 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -7,19 +7,25 @@ import svelte from "@astrojs/svelte";
 export default defineConfig({
   experimental: {
     assets: true,
-    inlineStylesheets: "auto"
+    inlineStylesheets: "auto",
   },
   scopedStyleStrategy: "class",
   markdown: {
-    rehypePlugins: [rehypeHeadingIds, [rehypeAutolinkHeadings, {
-      behavior: "wrap",
-      properties: {
-        class: "heading-linker"
-      }
-    }]]
+    rehypePlugins: [
+      rehypeHeadingIds,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "wrap",
+          properties: {
+            class: "heading-linker",
+          },
+        },
+      ],
+    ],
   },
   image: {
-    service: sharpImageService()
+    service: sharpImageService(),
   },
-  integrations: [svelte()]
-});
\ No newline at end of file
+  integrations: [svelte()],
+});
diff --git a/public/favicon.svg b/public/favicon.svg
index ef28244..5039b46 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+  <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 </svg>
 
 <style>
diff --git a/src/components/ArticleSearch.svelte b/src/components/ArticleSearch.svelte
index 8e38207..213626e 100644
--- a/src/components/ArticleSearch.svelte
+++ b/src/components/ArticleSearch.svelte
@@ -8,53 +8,53 @@
     let searchTerm = "";
 
     $: filteredArticles = articles.filter(article => {
-        const searchTermWords = searchTerm.trim().replace(/\s+/g, " ").toLowerCase().split(' ');
-        const articleTitle = article.data.title.trim().replace(/\s+/g, " ").toLowerCase();
+      const searchTermWords = searchTerm.trim().replace(/\s+/g, " ").toLowerCase().split(' ');
+      const articleTitle = article.data.title.trim().replace(/\s+/g, " ").toLowerCase();
 
-        return searchTermWords.every(word => articleTitle.includes(word)) && searchTerm.trim() !== "";
+      return searchTermWords.every(word => articleTitle.includes(word)) && searchTerm.trim() !== "";
     });
 </script>
 
 <Dropdown shortcut="S">
-    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
       <title>Search for an article (Shift + s)</title>
       <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" />
     </svg>
     <div class="article-search">
-        <label for="article-search">Search for an article:</label>
-        <input type="search" id="article-search" placeholder="first po..." bind:value={searchTerm} />
+      <label for="article-search">Search for an article:</label>
+      <input type="search" id="article-search" placeholder="first po..." bind:value={searchTerm} />
         {#if filteredArticles.length > 0}
-            <p>Results: <strong>{filteredArticles.length}</strong></p>
+          <p>Results: <strong>{filteredArticles.length}</strong></p>
             <ul>
-                {#each filteredArticles as article}
-                    <li>
-                        <a href="/{article.slug}">{article.data.title}</a>
-                    </li>
-                {/each}
+              {#each filteredArticles as article}
+                <li>
+                  <a href="/{article.slug}">{article.data.title}</a>
+                </li>
+              {/each}
             </ul>
         {:else if searchTerm.trim() !== ""}
-            <p>No results found</p>
+          <p>No results found</p>
         {/if}
     </div>
 </Dropdown>
 
 <style>
     .article-search {
-        padding: 1rem;
-        position: absolute;
-        inset-inline: 0;
-        border: var(--standard-border);
-        inset-block-start: var(--nav-height);
-        background-color: var(--background-color);
-        display: grid;
-        overflow-x: auto;
+      padding: 1rem;
+      position: absolute;
+      inset-inline: 0;
+      border: var(--standard-border);
+      inset-block-start: var(--nav-height);
+      background-color: var(--background-color);
+      display: grid;
+      overflow-x: auto;
     }
 
     ul {
-        margin-block-start: 0;
+      margin-block-start: 0;
     }
 
     input {
-        max-inline-size: 100%;
+      max-inline-size: 100%;
     }
 </style>
diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte
index d1b60be..8444896 100644
--- a/src/components/Dropdown.svelte
+++ b/src/components/Dropdown.svelte
@@ -1,49 +1,49 @@
 <script lang="ts">
-    export let shortcut: string;
+  export let shortcut: string;
 
-    const possibleShortcuts = ["S", "C", "T"];
+  const possibleShortcuts = ["S", "C", "T"];
 
-    let detailsElement: HTMLDetailsElement;
-    let summaryElement: HTMLElement;
+  let detailsElement: HTMLDetailsElement;
+  let summaryElement: HTMLElement;
 
-    function openMenu() {
-        detailsElement.setAttribute("open", "");
-    }
+  function openMenu() {
+      detailsElement.setAttribute("open", "");
+  }
 
-    export function closeMenu() {
-        detailsElement.removeAttribute("open");
-    }
+  export function closeMenu() {
+      detailsElement.removeAttribute("open");
+  }
 
-    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === "Escape") closeMenu();
+  function handleKeydown(event: KeyboardEvent) {
+      if (event.key === "Escape") closeMenu();
 
-        if (event.key === shortcut) {
-            summaryElement.focus();
-            openMenu();
-        } else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) {
-            closeMenu();
-        }
-    }
+      if (event.key === shortcut) {
+          summaryElement.focus();
+          openMenu();
+      } else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) {
+          closeMenu();
+      }
+  }
 
-    function handleClick(event: MouseEvent) {
-        if (!detailsElement.contains(event.target as Node)) {
-            closeMenu();
-        }
-    }
+  function handleClick(event: MouseEvent) {
+      if (!detailsElement.contains(event.target as Node)) {
+          closeMenu();
+      }
+  }
 </script>
 
-<svelte:window on:keydown={handleKeydown} on:click={handleClick} />
+<svelte:window on:keydown="{handleKeydown}" on:click="{handleClick}" />
 
-<details bind:this={detailsElement}>
-    <summary bind:this={summaryElement}>
-        <slot name="icon" />
-    </summary>
-    <slot />
+<details bind:this="{detailsElement}">
+  <summary bind:this="{summaryElement}">
+    <slot name="icon" />
+  </summary>
+  <slot />
 </details>
 
 <style>
-    summary {
-        display: grid;
-        padding: 0.5rem;
-    }
+  summary {
+    display: grid;
+    padding: 0.5rem;
+  }
 </style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index d4a1905..99d7891 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -25,7 +25,11 @@ const currentDateYear = new Date().getFullYear();
   footer {
     margin-block-start: 4rem;
     padding-block: 1rem;
-    background: linear-gradient(0deg, var(--tertiary-background-color) 0%, var(--background-color) 100%);
+    background: linear-gradient(
+      0deg,
+      var(--tertiary-background-color) 0%,
+      var(--background-color) 100%
+    );
   }
 
   .container {
diff --git a/src/components/Head.astro b/src/components/Head.astro
index 02d6d70..6004e7a 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -7,7 +7,7 @@ const { title, description } = Astro.props;
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <meta name="viewport" content="width=device-width" />
   <meta name="generator" content={Astro.generator} />
-  <meta name="color-scheme" content="light">
+  <meta name="color-scheme" content="light" />
   <title>{title}</title>
   <meta name="author" content="Your Name" />
   <meta name="description" content={description} />
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 3179d09..e7eeb4c 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -5,9 +5,7 @@ import ThemeToggle from "../components/ThemeToggle.svelte";
 
 <nav>
   <div class="container">
-    <a href="/">
-      Logo
-    </a>
+    <a href="/"> Logo</a>
     <slot />
     <ArticleSearchWrapper />
     <ThemeToggle client:only="svelte" />
@@ -29,7 +27,7 @@ import ThemeToggle from "../components/ThemeToggle.svelte";
     position: relative;
   }
 
-  a {
+  .container > *:first-child {
     margin-inline-end: auto;
   }
 </style>
diff --git a/src/components/TableOfContents.svelte b/src/components/TableOfContents.svelte
index 99659bb..e799e12 100644
--- a/src/components/TableOfContents.svelte
+++ b/src/components/TableOfContents.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <Dropdown shortcut="C">
-    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
       <title>Table of contents (Shift + c)</title>
       <path fill-rule="evenodd" d="M2.625 6.75a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0A.75.75 0 018.25 6h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75zM2.625 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zM7.5 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12A.75.75 0 017.5 12zm-4.875 5.25a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
     </svg>
diff --git a/src/components/ThemeToggle.svelte b/src/components/ThemeToggle.svelte
index 40edc70..df155c2 100644
--- a/src/components/ThemeToggle.svelte
+++ b/src/components/ThemeToggle.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <Dropdown shortcut="T">
-  <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+  <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
     <title>Toggle theme (Shift + t)</title>
     <path fill-rule="evenodd" d="M2.25 5.25a3 3 0 013-3h13.5a3 3 0 013 3V15a3 3 0 01-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 01-.53 1.28h-9a.75.75 0 01-.53-1.28l.621-.622a2.25 2.25 0 00.659-1.59V18h-3a3 3 0 01-3-3V5.25zm1.5 0v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5z" clip-rule="evenodd" />
   </svg>
diff --git a/src/content/blog/markdown-style-guide.md b/src/content/blog/markdown-style-guide.md
index 1355cfb..893dce7 100644
--- a/src/content/blog/markdown-style-guide.md
+++ b/src/content/blog/markdown-style-guide.md
@@ -39,7 +39,7 @@ hello **bold** the brown fox jumps _italicized text_ over the `code` high fence
 
 ## Image
 
-![Minke Whale breaching in Antarctica](../../assets/blog/markdown-style-guide/example-image.jpg)
+![A deer with its head resting on its back. The animal has a brown fur coat and long ears, and it appears to be standing in an outdoor setting. Its snout is visible, as well as the white markings around its eyes.](../../assets/blog/markdown-style-guide/example-image.jpg)
 
 ## Table
 
diff --git a/src/layouts/ArticleLayout.astro b/src/layouts/ArticleLayout.astro
index 6d2312a..6becc84 100644
--- a/src/layouts/ArticleLayout.astro
+++ b/src/layouts/ArticleLayout.astro
@@ -1,5 +1,5 @@
 ---
-const { title, description, publicationDate, headings } = Astro.props;
+const { id, title, description, publicationDate, headings } = Astro.props;
 
 import PageLayout from "./PageLayout.astro";
 import TableOfContents from "../components/TableOfContents.svelte";
@@ -15,7 +15,10 @@ import PublicationDate from "../components/PublicationDate.astro";
         <PublicationDate {publicationDate} />
       </strong>
     </p>
-    <a href="#">Edit this page</a>
+    <a
+      href={`https://github.com/thiloho/aurora/edit/main/src/content/blog/${id}`}
+      >Edit this page</a
+    >
   </Fragment>
   <slot />
 </PageLayout>
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index 156a432..e1e1fb1 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -14,6 +14,6 @@ const { entry } = Astro.props;
 const { Content, headings } = await entry.render();
 ---
 
-<ArticleLayout {...entry.data} {headings}>
+<ArticleLayout id={entry.id} {...entry.data} {headings}>
   <Content />
 </ArticleLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 8b48d0c..73685e3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -54,7 +54,10 @@ body {
   color: var(--text-color);
 }
 
-nav, header, main, footer {
+nav,
+header,
+main,
+footer {
   padding-inline: 1rem;
 }
 
@@ -63,7 +66,12 @@ nav, header, main, footer {
   margin-inline: auto;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   scroll-margin-block-start: var(--nav-height);
 }
 
@@ -73,7 +81,7 @@ img {
   block-size: auto;
 }
 
-svg {
+.icon {
   inline-size: 1.5rem;
   block-size: 1.5rem;
   vertical-align: middle;
@@ -85,7 +93,8 @@ table {
   overflow-x: auto;
 }
 
-td, th {
+td,
+th {
   border: var(--standard-border);
   padding-inline: 0.5rem;
   padding-block: 0.25rem;
@@ -116,7 +125,8 @@ input {
   padding-inline: 0.5rem;
 }
 
-summary, button {
+summary,
+button {
   cursor: pointer;
 }
 
@@ -124,7 +134,8 @@ button {
   color: inherit;
 }
 
-ul, ol {
+ul,
+ol {
   line-height: 2;
 }