Version 2

Faster speeds, better typeface, revamped UI, deleting feeds, and more.
thingbomb · Sep 10, 2024 · ad5729a · ad5729a
1 parent 3667224
commit ad5729a
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 118 deletions.
diff --git a/.gitignore b/.gitignore
@@ -67,3 +67,6 @@ node_modules/
 
 # dataconnect generated files
 .dataconnect
+
+.DS_Store
+src/.DS_Store
diff --git a/firebase.json b/firebase.json
@@ -3,6 +3,12 @@
     "public": "src",
     "cleanUrls": true,
     "site": "feedbomb",
+    "rewrites": [
+      {
+        "source": "/read/**",
+        "destination": "/read/index.html"
+      }
+    ],
     "ignore": [
       "firebase.json",
       "**/.*",

diff --git a/src/assets/InterVariable.woff2 b/src/assets/InterVariable.woff2
diff --git a/src/css/home.css b/src/css/home.css
@@ -4,9 +4,14 @@
     box-sizing: border-box;
 }
 
+@font-face {
+    font-family: InterVariable;
+    src: url(../assets/InterVariable.woff2);
+}
+
 body {
     margin: 0;
-    background-color: #191919;
+    background-color: rgb(29, 30, 32);
     color: white;
 }
 
@@ -15,7 +20,7 @@ input,
 select,
 textarea,
 button {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: InterVariable,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
 }
 
 h1,
@@ -31,33 +36,94 @@ h6 {
     display: grid;
     height: 100vh;
     width: 100vw;
-    grid-template-columns: 240px calc(100% - 240px);
+    grid-template-rows: 46px calc(100vh - 46px);
 }
 
-aside {
-    background-color: #202020;
-    box-shadow: rgba(255, 255, 255, 0.05) -1px 0px 0px 0px inset;
-    padding: 20px;
+.main-wrapper {
+    transition: 0.2s;
+    display: grid;
+    grid-template-columns: 0px 100vw;
+}
 
-    .feed-list {
+.main-wrapper.sidebar-open {
+    grid-template-columns: 288px calc(100vw - 288px);
+}
+
+header {
+    display: flex;
+    #hide-button {
+        width: 30px;
+        height: 30px;
+        padding: 0;
         display: flex;
-        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 6px;
+        background-color: transparent;
+        border: none;
+        color: rgba(244, 244, 244, 0.9);
+        margin: 8px 16px;
     }
+    #input-box {
+        background-color: rgba(244, 244, 244, 0.06);
+        box-shadow: rgba(244, 244, 244, 0.09) 0px 0px 0px 1px inset;
+        border-radius: 8px;
+        border: none;
+        color: white;
+        outline: none;
+        margin: 8px 0px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        padding-left: 6px;
+        padding-right: 6px;
+        margin-right: 16px;
+        flex: 1;
+    }
+    #input-box svg {
+        color: rgba(244, 244, 244, 0.65);
+        height: 20px;
+        width: 20px;
+    }
+    input {
+        background-color: transparent;
+        border: none;
+        outline: none;
+        color: white;
+        padding-left: 6px;
+        flex: 1;
+    }
+    input::placeholder {
+        color: rgba(244, 244, 244, 0.35);
+    }
+}
+
+.main-wrapper aside {
+    transition: 0.2s;
+    width: 0px;
+    opacity: 0;
+    z-index: -1;
 
     .feed-item {
-        padding: 10px;
+        padding: 6px 8px;
+        transition: 0.2s;
         border-radius: 6px;
+        height: 32px;
         user-select: none;
         cursor: pointer;
         background-color: transparent;
         border: none;
         text-align: left;
-        font-size: 16px;
+        font-size: 13px;
         color: white;
-        display: grid;
-        grid-template-columns: 30px 10px calc(100% - 40px);
-        justify-content: center;
+        display: flex;
         align-items: center;
+        gap: 5px;
+    }
+
+    .feed-item.active {
+        background-color: rgba(244, 244, 244, 0.09);
     }
 
     .feed-item span {
@@ -69,11 +135,11 @@ aside {
 
     .feed-item img {
         border-radius: 6px;
-        margin: auto;
+        height: 20px;
     }
 
     .feed-item svg {
-        margin: auto;
+        height: 20px;
     }
 
     .feed-item:hover {
@@ -85,6 +151,20 @@ aside {
     }
 }
 
+.main-wrapper.sidebar-open aside {
+    width: 288px;
+    display: block;
+    padding: 8px;
+    padding-top: 0px;
+    opacity: 1;
+    z-index: 1000;
+
+    .feed-list {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
 main {
     padding: 20px;
     overflow: auto;
@@ -145,14 +225,6 @@ main {
             font-size: 14px;
             color: rgb(158, 158, 158);
         }
-        input {
-            background-color: #202020;
-            border-radius: 8px;
-            padding: 10px;
-            border: none;
-            color: white;
-            outline: none;
-        }
         select {
             background-color: #202020;
             border-radius: 8px;
@@ -206,38 +278,22 @@ main {
 }
 
 @media screen and (max-width: 600px) {
-    #root {
-        grid-template-columns: 90px calc(100% - 90px);
-    }
-
-    main {
-        .article {
-            grid-template-columns: 100% !important;
-            grid-template-rows: 100px 20px calc(100% - 120px);
-        }
-    }
-
-    aside {
-        h2 {
-            display: none;
-        }
-
-        br {
-            display: none;
+    .main-wrapper.sidebar-open {
+        grid-template-columns: 0px 100vw;
+
+        aside {
+            position: fixed;
+            top: 0px;
+            left: 0px;
+            height: 100vh;
+            width: 288px;
+            z-index: 1000;
+            margin-top: 46px;
+            background-color: rgb(29, 30, 32);
         }
 
-        .feed-list {
-            .feed-item {
-                grid-template-columns: 30px;
-
-                span {
-                    display: none;
-                }
-
-                .spacer {
-                    display: none;
-                }
-            }
+        main {
+            width: 100vw;
         }
     }
 }
diff --git a/src/css/reader.css b/src/css/reader.css
@@ -12,12 +12,17 @@ body {
     color: white;
 }
 
+@font-face {
+    font-family: InterVariable;
+    src: url(../assets/InterVariable.woff2);
+}
+
 body,
 input,
 select,
 textarea,
 button {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: InterVariable,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
 }
 
 h1,

diff --git a/src/index.html b/src/index.html
@@ -17,12 +17,19 @@
     <meta name="twitter:description" content="Feedbomb is a minimalistic, open-source RSS feed reader.">
     <meta name="twitter:image" content="/assets/poster.png">
     <link rel="stylesheet" href="css/home.css">
+    <link rel="manifest" href="manifest.json">
+    <script src="scripts/dompurify.js"></script>
 </head>
 
 <body>
+    <noscript>You need to enable JavaScript to use this app.</noscript>
     <div id="root">
+        <header>
+            <button id="hide-button" onclick="document.querySelector('.main-wrapper').classList.toggle('sidebar-open')"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5.474 19h13.052c.834 0 1.455-.202 1.863-.605.407-.403.611-1.008.611-1.815V7.42c0-.807-.204-1.412-.611-1.815C19.98 5.202 19.36 5 18.526 5H5.474c-.821 0-1.439.202-1.853.605C3.207 6.008 3 6.613 3 7.42v9.16c0 .807.207 1.412.621 1.815.414.403 1.032.605 1.853.605Zm.02-1.392c-.35 0-.62-.091-.81-.274-.191-.182-.287-.456-.287-.821V7.487c0-.359.096-.63.287-.816.19-.186.46-.279.81-.279h13.012c.35 0 .62.093.81.279.191.185.287.457.287.816v9.026c0 .365-.096.639-.287.821-.19.183-.46.274-.81.274H5.494Zm3.377.268h1.368V6.152H8.87v11.724ZM7.415 9.178a.45.45 0 0 0 .33-.149c.097-.1.146-.21.146-.331a.433.433 0 0 0-.146-.322.465.465 0 0 0-.33-.14H5.882a.465.465 0 0 0-.33.14.433.433 0 0 0-.146.322c0 .121.049.232.146.331a.45.45 0 0 0 .33.149h1.533Zm0 1.92a.457.457 0 0 0 .33-.144.459.459 0 0 0 .146-.336.433.433 0 0 0-.146-.321.465.465 0 0 0-.33-.14H5.882a.465.465 0 0 0-.33.14.433.433 0 0 0-.146.321c0 .128.049.24.146.336a.457.457 0 0 0 .33.144h1.533Zm0 1.92a.465.465 0 0 0 .33-.138.443.443 0 0 0 .146-.332.433.433 0 0 0-.146-.321.465.465 0 0 0-.33-.14H5.882a.465.465 0 0 0-.33.14.433.433 0 0 0-.146.321c0 .128.049.239.146.332.097.092.207.139.33.139h1.533Z" fill="currentColor"></path></svg></button>
+            <div id="input-box"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 10.711c0 .785.15 1.522.449 2.214a5.772 5.772 0 0 0 3.078 3.049c.695.293 1.442.44 2.24.44.61 0 1.194-.09 1.75-.27a5.784 5.784 0 0 0 1.532-.754l3.373 3.35c.097.09.203.155.318.197.115.042.232.063.353.063a.872.872 0 0 0 .653-.26.901.901 0 0 0 .254-.656.928.928 0 0 0-.254-.646l-3.355-3.332c.357-.473.635-.998.834-1.576.2-.578.3-1.184.3-1.819 0-.79-.15-1.53-.45-2.218a5.814 5.814 0 0 0-1.237-1.818 5.769 5.769 0 0 0-1.836-1.23A5.66 5.66 0 0 0 10.767 5a5.65 5.65 0 0 0-2.24.445A5.837 5.837 0 0 0 5.45 8.493 5.504 5.504 0 0 0 5 10.711Zm1.396 0A4.243 4.243 0 0 1 7.67 7.65a4.456 4.456 0 0 1 1.397-.93 4.305 4.305 0 0 1 1.7-.336c.604 0 1.17.112 1.695.337.526.224.99.534 1.392.93.402.394.717.854.943 1.378.227.523.34 1.085.34 1.683 0 .599-.113 1.159-.34 1.68a4.433 4.433 0 0 1-2.335 2.312 4.273 4.273 0 0 1-1.695.337 4.306 4.306 0 0 1-1.7-.337 4.418 4.418 0 0 1-1.397-.934 4.322 4.322 0 0 1-.938-1.378 4.21 4.21 0 0 1-.336-1.68Z" fill="currentColor"></path></svg><input type="text" id="search" placeholder="Search"></div>
+        </header>
+        <div class="main-wrapper">
         <aside>
-            <h2>Feedbomb</h2><br>
             <div class="feed-list">
                 <button class="feed-item" onclick="filterFeeds('all+posts')"><svg xmlns="http://www.w3.org/2000/svg"
                         height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
@@ -40,8 +47,6 @@ <h2>Feedbomb</h2><br>
                 <div class="header">
                     <h2 id="feedTitle">Home</h2>
                     <h5 id="category" style="display: none;"></h5>
-                    <br>
-                    <input type="text" id="search" placeholder="Search">
                 </div>
                 <br>
                 <div id="feed-content">
@@ -54,18 +59,16 @@ <h5 id="category" style="display: none;"></h5>
                     <h2 id="feedTitle">Add Feed</h2>
                 </div>
                 <div class="content">
-                    <p>Add a feed by entering the URL of the feed.<br><br>To add a subreddit, enter the subreddit in
-                        this format: <code>/r/subreddit</code></p>
+                    <p>Add a feed by entering the URL of the feed.</p>
                     <div id="feed-content">
-                        <div id="input-box-container">
-                            <input type="text" id="feed-url" placeholder="URL">
-                            <button id="add-feed-button">+</button>
-                        </div>
+                        <input type="text" id="feed-url" placeholder="URL">
+                        <button id="add-feed-button">+</button>
                     </div>
                 </div>
             </div>
         </main>
     </div>
+    </div>
     <script src="js/home.js"></script>
 </body>