impl DateX formatting, iterate on vision '2 things'

README.md

@@ -1,4 +1,36 @@
 # interesting
+
 💾  interesting list of things
 
 ![](https://user-images.githubusercontent.com/951011/126082447-5ff5c056-a811-4c92-b7d5-5ed9199aa061.png)
+
+
+## Attribution
+
+- [DateX](https://github.com/foo123/DateX)
+
+## License 
+
+```
+MIT License
+
+Copyright (c) 2021 Julian Weiss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

css/styles.css

@@ -100,6 +100,22 @@ a:hover {
 
     user-select: all;
     cursor: pointer;
+
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 16px;
+}
+
+.blog-date-weekday {
+    text-align: right;
+    float: right;
+
+    font-weight: 500;
+    opacity: 0.8;
+    font-size: 15px;
+    line-height: 15px;
+
+    user-select: none;
 }
 
 .blog-link {
@@ -163,8 +179,6 @@ a:hover {
     color: rgba(50, 51, 70, 1);
 }
 
-
-
 /** Footer */
 #footer {
     position: fixed;

index.html

@@ -20,13 +20,13 @@
 
     <div id="container">
         <div id="header">
-            <div id="title" title="last updated @ 2:10pm 7/18/21">
+            <div id="title" title="last updated @ 2pm 7/19/21">
                 <a href="https://interesting.works">
                     <u>💾</u>  // interesting
                 </a>
             </div>
             <div id="subtitle">
-                a list of things from <a href="https://github.com/insanj" target=_blank>@insanj</a>
+                2 things a day from <a href="https://github.com/insanj" target=_blank>@insanj</a>
             </div>
         </div>
 
@@ -41,6 +41,7 @@
 
     <script src="js/posts.js"></script>
     <script src="js/interactions.js"></script>
+    <script src="js/DateX.min.js"></script>
     <script src="js/engine.js"></script>
 
 </body>

js/engine.js

@@ -23,7 +23,33 @@ function renderPost(post) {
 
     const dateElement = document.createElement("div");
     dateElement.className = "blog-date";
-    dateElement.textContent = displayDate;
+
+    if (post.date.timestamp) {
+        const parsedDate = new DateX(post.date.timestamp); //new Date(Date.parse(post.date.timestamp));
+        const parsedDateString = parsedDate.format('j F Y').toLowerCase();
+
+        // parsedDate.toLocaleDateString('default', {
+        //     year: 'numeric', 
+        //     month: 'long', 
+        //     day: 'numeric'
+        // }).toLowerCase();
+
+        dateElement.textContent = parsedDateString;
+
+        const parsedWeekdayString = parsedDate.format('l').toLowerCase();
+
+        // parsedDate.toLocaleDateString('default', {
+        //     weekday: 'long'
+        // }).toLowerCase();
+
+        const weekdayElement = document.createElement("div");
+        weekdayElement.className = "blog-date-weekday";
+        weekdayElement.textContent = parsedWeekdayString;
+        dateElement.appendChild(weekdayElement);
+    } else {
+        dateElement.textContent = displayDate;
+    }
+
     postElement.appendChild(dateElement);
 
     for (let link of post.links) {

js/posts.js

@@ -2,19 +2,48 @@
 /**
  * Collection of blog posts. Requires the following keypaths:
  * - id
- * - date.display
- * - links ; which each: contain
+ * - date, which contain:
+ *   required keypaths:
+ *      - display
+ *   optional keypaths:
+ *      - timestamp
+ * - links, which contain:
+ *   required keypaths:
  *      - decorator
  *      - text
  *      - url
- *          and optional keypaths:
+ *   optional keypaths:
  *      - attachment
  *          - supported types: url
  */
 const interesting_posts = [{
     id: "7-18-2021",
     date: {
-        display: "18 july 2021"
+        display: "18 july 2021",
+        timestamp: "2021-07-18T12:00:00+00:00"
+    },
+    links: [{
+        decorator: "→",
+        text: "Netflix is planning to add video games to its service in the next year and has hired Facebook’s VR games content head, and former head of mobile games at EA, to run its new gaming division.",
+        attachment: {
+            type: "url",
+            url: "https://www.bloomberg.com/news/articles/2021-07-14/netflix-plans-to-offer-video-games-in-expansion-beyond-films-tv"
+        },
+        url: "https://twitter.com/markgurman/status/1415434620775145477"
+    }, {
+        decorator: "→",
+        text: "Introducing Steam Deck: powerful, portable PC gaming starting at $399. Designed by Valve, powered by Steam. Shipping December 2021. Learn more and reserve yours tomorrow",
+        attachment: {
+            type: "url",
+            url: "https://www.steamdeck.com/"
+        },
+        url: "https://twitter.com/Steam/status/1415718021469925378"
+    }]
+}, {
+    id: "7-15-2021",
+    date: {
+        display: "15 july 2021",
+        timestamp: "2021-07-15T12:00:00+00:00"
     },
     links: [{
         decorator: "→",
@@ -26,17 +55,18 @@ const interesting_posts = [{
         url: "https://twitter.com/tomwarren/status/1415675187509432329"
     }, {
         decorator: "→",
-        text: "Netflix is planning to add video games to its service in the next year and has hired Facebook’s VR games content head, and former head of mobile games at EA, to run its new gaming division.",
+        text: "PS: if you’re curious, I asked*, and these were done by @studiotendril! *important cultural difference between Microsoft and Apple: Microsoft will gladly tell you who they hired to make the cool thing.",
         attachment: {
             type: "url",
-            url: "https://www.bloomberg.com/news/articles/2021-07-14/netflix-plans-to-offer-video-games-in-expansion-beyond-films-tv"
+            url: "https://twitter.com/studiotendril"
         },
-        url: "https://twitter.com/markgurman/status/1415434620775145477"
+        url: "https://twitter.com/cabel/status/1415716203314642947"
     }]
 }, {
     id: "7-14-2021",
     date: {
-        display: "14 july 2021"
+        display: "14 july 2021",
+        timestamp: "2021-07-14T12:00:00+00:00"
     },
     links: [{
         decorator: "→",
@@ -58,7 +88,8 @@ const interesting_posts = [{
 }, {
     id: "7-12-2021",
     date: {
-        display: "12 july 2021"
+        display: "12 july 2021",
+        timestamp: "2021-07-12T12:00:00+00:00"
     },
     links: [{
         decorator: "→",
@@ -80,7 +111,8 @@ const interesting_posts = [{
 }, {
     id: "7-10-2021",
     date: {
-        display: "10 july 2021"
+        display: "10 july 2021",
+        timestamp: "2021-07-10T12:00:00+00:00"
     },
     links: [{
         decorator: "→",
@@ -90,11 +122,20 @@ const interesting_posts = [{
             url: "https://ux.stackexchange.com/questions/52336/why-is-the-mouse-cursor-slightly-tilted-and-not-straight"
         },
         url: "https://twitter.com/vponamariov/status/1413832466813628423"
+    }, {
+        decorator: "→",
+        text: "boom towns! a list of the fastest growing towns in the united states",
+        attachment: {
+            type: "url",
+            url: "http://boomtowns.app"
+        },
+        url: "https://twitter.com/swlkr/status/1413590035526422531"
     }]
 }, {
     id: "7-9-2021",
     date: {
-        display: "9 july 2021"
+        display: "9 july 2021",
+        timestamp: "2021-07-09T12:00:00+00:00"
     },
     links: [{
         decorator: "→",
@@ -104,14 +145,6 @@ const interesting_posts = [{
             url: "http://thespellbook.app/"
         },
         url: "https://twitter.com/adam_blvck/status/1413546769099726853"
-    }, {
-        decorator: "→",
-        text: "boom towns! a list of the fastest growing towns in the united states",
-        attachment: {
-            type: "url",
-            url: "http://boomtowns.app"
-        },
-        url: "https://twitter.com/swlkr/status/1413590035526422531"
     }, {
         decorator: "→",
         text: "✨ Updated my collection of Marvel Cinematic Universe album art to contain released Phase 4 albums. Also cleaned up the art on a few others.",