From d4bc2755bca8335226d247f6346d9a4624eadb30 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Wed, 4 Sep 2024 19:31:04 +0200
Subject: [PATCH] refactor: various improvements

- use semantic elements (main, header, article)
- remove unused AddressBar component
- bundle article css
---
 public/article.css                    | 62 ------------------------
 src/components/Jumbotron.astro        |  6 +--
 src/components/Post.astro             | 70 ++++++++++++++++++++++++++-
 src/components/SimpleAddressBar.astro |  4 +-
 src/layouts/Layout.astro              | 22 +++++----
 src/pages/404.astro                   |  7 +--
 src/pages/index.astro                 |  2 -
 7 files changed, 90 insertions(+), 83 deletions(-)
 delete mode 100644 public/article.css

diff --git a/public/article.css b/public/article.css
deleted file mode 100644
index ca328eb..0000000
--- a/public/article.css
+++ /dev/null
@@ -1,62 +0,0 @@
-div#post {
-
-  h1.title {
-    font-size: xx-large;
-    margin: 0;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    line-height: 1.2;
-  }
-
-  .source, .publish-info {
-    font-size: smaller;
-    color: #555;
-  }
-
-  .source {
-    font-weight: bold;
-  }
-  
-  .publish-info {
-    padding-left: 0;
-    margin: 0;
-    list-style: none;
-
-    li {
-      margin: 0;
-    }
-  }
-
-  content {
-    p, table, ul, img {
-      margin: 1em 0 !important;
-      font-size: 20px;
-    }
-
-    table {
-      border-collapse: collapse;
-      
-      td, th {
-        border: 1px solid #ccc;
-        padding: 0.5em;
-      }
-    }
-
-    pre {
-      white-space: pre-wrap;
-      &:has(code) {
-        padding: 1em;
-        background: #f6f8fa;
-        border-radius: 5px;
-      }
-    }
-  
-    @media (max-width: 600px) {
-      p, table, ul, img {
-        font-size: 16px;
-      }
-    }
-  }
-
-}
\ No newline at end of file
diff --git a/src/components/Jumbotron.astro b/src/components/Jumbotron.astro
index e5bc4f2..1135192 100644
--- a/src/components/Jumbotron.astro
+++ b/src/components/Jumbotron.astro
@@ -1,7 +1,7 @@
 ---
 ---
 
-<div id="jumbotron"><a href="/">
+<header id="jumbotron"><a href="/">
 
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="487.1" height="151.38" version="1.1" viewBox="0 0 128.88 40.052" xmlns="http://www.w3.org/2000/svg">
@@ -11,10 +11,10 @@
 </svg>
  
 
-</a></div>
+</a></header>
 
 <style>
-  div {
+  #jumbotron {
     margin: 0 auto;
 
     svg {
diff --git a/src/components/Post.astro b/src/components/Post.astro
index 6c0f7d1..e7fcffa 100644
--- a/src/components/Post.astro
+++ b/src/components/Post.astro
@@ -22,7 +22,7 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
  -->
   {
     article && article.url !== '/'  &&
-      <div id="post">
+      <article id="post">
         {article.source && <span class="source">{article.source}</span>}
         {article.title && <h1 class="title">{article.title}</h1>}
         {(article.author || datePublished) && (
@@ -32,5 +32,71 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
           </ul>
         )}
         <content set:html={cleanContent} />
-      </div>
+      </article>
   }
+
+
+<style>
+#post {
+
+  h1.title {
+    font-size: xx-large;
+    margin: 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1.2;
+  }
+
+  .source, .publish-info {
+    font-size: smaller;
+    color: #555;
+  }
+
+  .source {
+    font-weight: bold;
+  }
+  
+  .publish-info {
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+
+    li {
+      margin: 0;
+    }
+  }
+
+  content {
+    p, table, ul, img {
+      margin: 1em 0 !important;
+      font-size: 20px;
+    }
+
+    table {
+      border-collapse: collapse;
+      
+      td, th {
+        border: 1px solid #ccc;
+        padding: 0.5em;
+      }
+    }
+
+    pre {
+      white-space: pre-wrap;
+      &:has(code) {
+        padding: 1em;
+        background: #f6f8fa;
+        border-radius: 5px;
+      }
+    }
+  
+    @media (max-width: 600px) {
+      p, table, ul, img {
+        font-size: 16px;
+      }
+    }
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SimpleAddressBar.astro b/src/components/SimpleAddressBar.astro
index 273d8ba..8c82da9 100644
--- a/src/components/SimpleAddressBar.astro
+++ b/src/components/SimpleAddressBar.astro
@@ -9,7 +9,7 @@ const placeholder = "Type the article URL here";
 const { url } = Astro.props;
 ---
 
-<div class="address-bar">
+<div id="address-bar">
   <form>
     <label for="app-url">
       <Icon name="ic:round-arrow-forward-ios" />
@@ -44,7 +44,7 @@ const { url } = Astro.props;
 </div>
 
 <style>
-  .address-bar {
+  #address-bar {
     width: 100%;
     position: relative;
   }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0f38368..0e6bdc7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import Jumbotron from "../components/Jumbotron.astro";
 import { ArticleData } from "@extractus/article-extractor";
 import "../styles/reset.css";
 import '../styles/variables.css';
@@ -49,16 +50,19 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
   </head>
   <body>
     <div id="app-wrapper">
-      <slot />
-      <div id="main-content">
-        <div id="post-wrapper">
-          <slot name="post" />
+      <Jumbotron />
+      <main>
+        <slot />
+        <div id="main-content">
+          <div id="post-wrapper">
+            <slot name="post" />
+          </div>
+          <div id="library-wrapper">
+            <slot name="library" />
+          </div>
         </div>
-        <div id="library-wrapper">
-          <slot name="library" />
-        </div>
-      </div>
-      <slot name="footer">
+      </main>
+      <slot name="footer" />
     </div>
   </body>
 </html>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 67dbdf4..65aa76a 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,15 +1,16 @@
 ---
-import AddressBar from "../components/AddressBar.astro";
 import Layout from "../layouts/Layout.astro";
 import Library from "../components/Library.astro";
 import Footer from "../components/Footer.astro";
+import SimpleAddressBar from "../components/SimpleAddressBar.astro";
 
 export const prerender = false;
 
 ---
+
 <Layout article={null}>
-    <AddressBar url="" />
-    <div slot="post">
+    <SimpleAddressBar url='' />
+    <div slot="post" id="router-outlet">
         <h1>
             404: Not Found
         </h1>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 78928c7..97db37e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,6 @@ import Post from "../components/Post.astro";
 import Layout from "../layouts/Layout.astro";
 import Library from "../components/Library.astro";
 import Footer from "../components/Footer.astro";
-import Jumbotron from "../components/Jumbotron.astro";
 
 export const prerender = false;
 
@@ -25,7 +24,6 @@ if (url)
 
 ---
 <Layout article={article}>
-    <Jumbotron />
     <SimpleAddressBar url={url} />
     <div slot="post" id="router-outlet">
       <Post article={article} />