UI refresh (#38)

* refactor: refresh wiki index page

* refactor: further wiki index page improvements

* fix: semantic markup of wiki article layout

* add: better a11y for header icons

src/components/common/Icon.astro

@@ -1,10 +1,10 @@
 ---
 const { group, name, class: className, color } = Astro.props;
 
-const displayName = name.replaceAll("-", " ");
-
 const styles = color ? `color: ${color}` : null;
 
+const ariaLabel = Astro.props.ariaLabel ?? name.replaceAll("-", " ");
+
 export interface Props {
   /** The group that the icon belongs to. */
   group: "brands" | "solid";
@@ -14,12 +14,13 @@ export interface Props {
   class?: string;
   /** The colour of the icon. */
   color?: string;
+  ariaLabel?: string;
 }
 ---
 
 <i
   class:list={[`fa-${group}`, `fa-${name}`, className]}
-  aria-label={displayName}
+  aria-label={ariaLabel}
   style={styles}
 >
 </i>

src/components/layout/Header.astro

@@ -14,13 +14,13 @@ const { class: className } = Astro.props;
   <nav>
     <a href="/" class="home">
       <Tooltip content="Home">
-        <Icon name="house" group="solid" />
+        <Icon name="house" group="solid" ariaLabel="Home"/>
       </Tooltip>
     </a>
     <div>
       <a href="/wiki/">
         <Tooltip content="Wiki">
-          <Icon name="book-open" group="solid" />
+          <Icon name="book-open" group="solid" ariaLabel="Wiki"/>
         </Tooltip>
       </a>
     </div>
@@ -29,7 +29,7 @@ const { class: className } = Astro.props;
       allowHTML
     >
       <button class="site-search-icon" aria-keyshortcuts="/">
-        <Icon name="search" group="solid" />
+        <Icon name="search" group="solid" ariaLabel="Search"/>
       </button>
     </Tooltip>
     <span class="github">

src/content/wiki/faq.mdx

@@ -1,7 +1,6 @@
 ---
 title: FAQ
 description: Answers for frequently asked questions
-getting-started: true
 ---
 
 import Accordion from "~/components/common/Accordion.astro";

src/layouts/WikiArticle.astro

@@ -31,10 +31,10 @@ export interface Props {
 
 <Layout title="Wiki" transition={true} displayFooter={false}>
   <div class="columns">
-    <div id="article-browser" class="sidebar">
+    <aside id="article-browser" class="sidebar">
       <button class="open"><Icon name="newspaper" group="solid" /></button>
       <button class="close"><Icon name="x" group="solid" /></button>
-      <div class="title">Articles</div>
+      <h2 class="title">Articles</h2>
       <div class="content">
         <nav>
           {
@@ -52,7 +52,7 @@ export interface Props {
           }
         </nav>
       </div>
-    </div>
+    </aside>
     <div class="center">
       <main>
         <article>
@@ -90,10 +90,10 @@ export interface Props {
       </main>
       <Footer />
     </div>
-    <div id="outline" class="sidebar">
+    <aside id="outline" class="sidebar">
       <button class="open"><Icon name="list" group="solid" /></button>
       <button class="close"><Icon name="x" group="solid" /></button>
-      <div class="title">Outline</div>
+      <h2 class="title">Outline</h2>
       <nav class="content">
         <ol>
           <li><a href={`#${titleSlug}`}>{article.data.title}</a></li>
@@ -106,14 +106,14 @@ export interface Props {
           }
         </ol>
       </nav>
-    </div>
+    </aside>
   </div>
 </Layout>
 
 <script>
   import * as utils from "~/util/DOM";
 
-  const sidebars = utils.assertElements(".sidebar");
+  const sidebars = utils.assertElements("aside.sidebar");
 
   for (const sidebar of sidebars) {
     const openButton = utils.assertElement("button.open", sidebar);
@@ -238,7 +238,7 @@ export interface Props {
     }
   }
 
-  .sidebar {
+  aside.sidebar {
     --sidebar-width: 20em;
     background-color: #081f34;
     height: 100%;
@@ -474,7 +474,7 @@ export interface Props {
       display: none;
     }
 
-    .sidebar {
+    aside.sidebar {
       position: static;
       z-index: 0;
       width: 100%;
@@ -491,7 +491,7 @@ export interface Props {
   }
 
   @media screen and (max-width: 800px) {
-    .sidebar {
+    aside.sidebar {
       --sidebar-width: 70%;
     }