refactor: remove sass (#108)

CONTRIBUTING.md

@@ -7,7 +7,7 @@ Thank you for your interest in building the coziest web experience for people li
 You will need [to install nodejs](https://nodejs.org/en/download) and [pnpm](https://pnpm.io/installation) if you do not have them yet in your machine.
 
 This project is built with the following tech
-1. TypeScript, HTML, SCSS - even just knowing basic JS and CSS will give you familiarity of the code
+1. TypeScript, HTML, CSS - even just knowing basic JS and CSS will give you familiarity of the code
 1. [Astro](https://astro.build) - Astro is the chosen framework, please read throught the basics on their docs if you are unfamiliar
  - we don't use any framework that ships to the browser, we only write Astro components for server-side rendering, and vanilla DOM manipulation via `script` tags.
 1. [@extractus/article-extractor](https://www.npmjs.com/package/@extractus/article-extractor) - Article Extractor is the library we use to fetch and extract article content

README.md

@@ -75,7 +75,6 @@ We are thankful for all the building blocks provided by the following projects:
 1. [@ayco/astro-sw](https://ayco.io/n/@ayco/astro-sw) for taking app's service worker, and injecting needed dynamic assets & variables 
 1. [@extractus/article-extractor](https://www.npmjs.com/package/@extractus/article-extractor) for the amazing scraping of articles
 1. [astro-iconify](https://www.npmjs.com/package/astro-iconify) for easily using icon-sets in [iconify](https://icon-sets.iconify.design/)
-1. [sass](https://www.npmjs.com/package/sass) for some nested styling
 1. [ultrahtml](https://www.npmjs.com/package/ultrahtml) for any cleanup and transformation we do on the received article content
 1. [fastify](https://fastify.dev/) for our production server and [nginx](https://nginx.org/) as reverse proxy
 

pnpm-lock.yaml

@@ -2235,8 +2235,8 @@ packages:
   pkg-types@1.2.0:
     resolution: {integrity: sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==}
 
-  postcss@8.4.43:
+  postcss@8.4.44:
-    resolution: {integrity: sha512-gJAQVYbh5R3gYm33FijzCZj7CHyQ3hWMgJMprLUlIYqCwTeZhBQ19wp0e9mA25BUbEvY5+EXuuaAjqQsrBxQBQ==}
+    resolution: {integrity: sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==}
     engines: {node: ^10 || ^12 || >=14}
 
   preferred-pm@4.0.0:
@@ -2472,8 +2472,8 @@ packages:
     engines: {node: '>=12.0.0', npm: '>=5.6.0'}
     hasBin: true
 
-  sonic-boom@4.0.1:
+  sonic-boom@4.1.0:
-    resolution: {integrity: sha512-hTSD/6JMLyT4r9zeof6UtuBDpjJ9sO08/nmS5djaA9eozT9oOlNdpXSnzcgj4FTqpk3nkLrs61l4gip9r1HCrQ==}
+    resolution: {integrity: sha512-NGipjjRicyJJ03rPiZCJYjwlsuP2d1/5QUviozRXC7S3WdVWNK5e3Ojieb9CCyfhq2UC+3+SRd9nG3I2lPRvUw==}
 
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
@@ -5556,7 +5556,7 @@ snapshots:
       quick-format-unescaped: 4.0.4
       real-require: 0.2.0
       safe-stable-stringify: 2.5.0
-      sonic-boom: 4.0.1
+      sonic-boom: 4.1.0
       thread-stream: 3.1.0
 
   pkg-dir@4.2.0:
@@ -5569,7 +5569,7 @@ snapshots:
       mlly: 1.7.1
       pathe: 1.1.2
 
-  postcss@8.4.43:
+  postcss@8.4.44:
     dependencies:
       nanoid: 3.3.7
       picocolors: 1.0.1
@@ -5797,7 +5797,7 @@ snapshots:
       htmlparser2: 8.0.2
       is-plain-object: 5.0.0
       parse-srcset: 1.0.2
-      postcss: 8.4.43
+      postcss: 8.4.44
 
   sass@1.77.8:
     dependencies:
@@ -5897,7 +5897,7 @@ snapshots:
       arg: 5.0.2
       sax: 1.4.1
 
-  sonic-boom@4.0.1:
+  sonic-boom@4.1.0:
     dependencies:
       atomic-sleep: 1.0.0
 
@@ -6118,7 +6118,7 @@ snapshots:
   vite@5.4.2(@types/node@22.5.2)(sass@1.77.8):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.43
+      postcss: 8.4.44
       rollup: 4.21.2
     optionalDependencies:
       '@types/node': 22.5.2

public/article.css

@@ -0,0 +1,62 @@
+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;
+      }
+    }
+  }
+
+}

src/components/AddressBar.astro

@@ -90,7 +90,7 @@ const { url } = Astro.props;
   });
 </script>
 
-<style lang="scss">
+<style>
   .address-bar {
     width: 100%;
     position: relative;

src/components/Footer.astro

@@ -22,7 +22,7 @@ import {VERSION} from '../consts';
   <section class="disclaimer">All rights reserved to content owners.</section>
 </footer>
 
-<style lang="scss">
+<style>
   footer {
     width: 100%;
     margin: 0 auto;
@@ -31,15 +31,15 @@ import {VERSION} from '../consts';
     display: flex;
     font-size: small;
 
-    a {
+    & a {
       color: rgb(var(--gray));
     }
 
-    a:hover {
+    & a:hover {
       color: var(--accent);
     }
 
-    svg {
+    & svg {
       width: 1.25rem;
       height: 1.25rem;
       vertical-align: bottom;
@@ -48,7 +48,7 @@ import {VERSION} from '../consts';
       color: red;
     }
 
-    section {
+    & section {
       flex: 1;
       padding: 1rem 1rem 0;
 

src/components/Jumbotron.astro

@@ -15,13 +15,15 @@
 
 <style>
   div {
-    margin: 2em 0 1em;
+    margin: 0 auto;
+
     svg {
       border: 0px;
-      width: 100%;
+      width: 280px;
+      max-width: 100%;
     }
 
-    svg:hover {
+    &:hover {
       filter: var(--svg-filter-accent)
     }
   }

src/components/Library.astro

@@ -127,7 +127,8 @@ export interface Props {
   }
 </script>
 
-<style lang="scss">
+<style>
+
   #library {
     span#heading {
       color: #555;
@@ -136,71 +137,90 @@ export interface Props {
     }
   }
   #post-list {
+    margin: 0;
+    list-style: none;
+    padding-left: 0;
 
-    /**
+    li {
-    `:global` is needed for elements not generated by Astro
-      - can be improved by CSS in JS, but... this is fine
-    */
-    :global(li) {
-      list-style: none;
-      width: calc(100% + 40px);
-      margin-left: -40px;
 
-      :global(a) {
+      margin: 0;
+
+      a {
         text-decoration: none;
         color: #000;
 
-        :global(h3) {
+        h3 {
           text-decoration: underline;
         }
 
-        :global(.post-card) {
+        .post-card {
           padding-bottom: 1rem;
+          grid-template-columns: calc(70px + 0.5em) auto;
+          display: grid;
+          margin: 0;
 
-          :global(.post-card__image) {
+          p {
-            float: left;
+            margin: 0;
-            margin: 0.25rem 0.5rem 0.25rem 0;
+          }
 
-            :global(img, svg) {
+          .post-card__image,
+          .post-card__content {
+            margin: 0;
+          }
+
+          .post-card__image {
+            img, svg {
               width: 70px;
               height: 70px;
               object-fit: cover;
               border-radius: 5px;
               border: 1px solid #eee;
+              margin: 0;
             }
-            :global(svg) {
+            svg {
               color: #ccc;
               padding: 0.5rem;
             }
           }
-        }
+        
-        :global(.post-card__content) {
+          .post-card__content {
-          display: flex;
+            display: flex;
-          flex-direction: column;
+            flex-direction: column;
-          justify-content: center;
+            justify-content: center;
-          min-height: calc(70px + 0.5rem);
+            min-height: calc(70px + 0.5rem);
-        }
+          }
-        :global(.post-card__title, .post-card__description) {
+          
-          display: -webkit-box;
+          .post-card__title, .post-card__description {
-          -webkit-line-clamp: 2;
+            display: -webkit-box;
-          -webkit-box-orient: vertical;  
+            -webkit-line-clamp: 2;
-          overflow: hidden;
+            -webkit-box-orient: vertical;  
-        }
+            overflow: hidden;
-        :global(.post-card__meta, .post-card__description){
+            margin: 0 0 5px;
-          font-size: smaller;
+          }
-          color: #555;
+          
-        }
+          .post-card__meta, .post-card__description {
-        :global(.post-card__meta) {
+            font-size: smaller;
-          display: flex;
+            color: #555;
-          justify-content: space-between;
+          }
+          
+          .post-card__meta {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 0;
 
-          * {
+            * {
-            flex: 1;
+              flex: 1;
+            }
+
+            .post-card__source {
+              font-weight: bold;
+            }
+
+            .post-card__published {
+              text-align: right;
+            }
           }
 
-          :global(.post-card__source) {
-            font-weight: bold;
-          }
         }
       }
     }

src/components/Post.astro

@@ -36,63 +36,3 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
       </>
   }
 </div>
-
-<style is:global lang="scss">
-
-  @counter-style publish-icons {
-    system: cyclic;
-    symbols: "️✍️" "🗓️";
-    suffix: " ";
-  }
-
-  h1.title {
-    font-size: xx-large;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    line-height: 1.2;
-  }
-
-  .source, .publish-info {
-    font-size: smaller;
-    color: #555;
-  }
-  .source {
-    font-weight: bold;
-  }
-  .publish-info {
-    margin: 0.3em -1em 1em;
-    list-style: publish-icons;
-  }
-
-  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>

src/components/SettingsPopover.astro

@@ -56,7 +56,7 @@ const { toggle } = Astro.props;
 </script>
 
 
-<style lang="scss">
+<style>
   #settings-form {
     border: 1px solid #ccc;
     border-radius: 5px;

src/components/SimpleAddressBar.astro

@@ -36,7 +36,7 @@ const { url } = Astro.props;
   <SettingsPopover toggle="settings-toggle" />
 </div>
 
-<style lang="scss">
+<style>
   .address-bar {
     width: 100%;
     position: relative;
@@ -51,7 +51,7 @@ const { url } = Astro.props;
 
   form {
     width: 100%;
-    padding: 0.15rem 1rem;
+    padding: 0.5rem 1rem;
     text-align: center;
     border-radius: 30px;
     border: 1px solid #ccc;

src/consts.ts

@@ -6,4 +6,4 @@ export const SITE_AUTHOR_MASTODON = 'https://social.ayco.io/@ayo';
 export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy';
 export const SITE_DESCRIPTION = 'The Web is Yours.';
 
-export const VERSION = 'Victorious-Viper';
+export const VERSION = 'Whiny-Walrus';

src/layouts/Layout.astro

@@ -46,6 +46,7 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
       )
     }
     <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="/article.css" />
   </head>
   <body>
     <div id="app-wrapper">
@@ -63,7 +64,7 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
   </body>
 </html>
 
-<style lang="scss">
+<style>
   #app-wrapper {
     width: 100%;
     max-width: 650px;
@@ -81,7 +82,7 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
     }
   }
 </style>
-<style is:global lang="scss">
+<style is:global>
   :root {
     --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

src/utils/library.ts

@@ -56,7 +56,7 @@ export function renderPost(responseText: string | null, url, postDivSelector: st
     const html = document.createElement('html');
     html.innerHTML = responseText;
     const newPost = html.querySelector('body')?.querySelector('#post');
-    postText = newPost?.innerHTML || '';
+    postText = newPost?.outerHTML || '';
     cozyUrl = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content') ?? '/';
     cozyTitle = `${getCozyTitle(html)} | Cozy`;
   }