refine w 2 posts, lil hacky absolute position css fix

insanj · Jul 18, 2021 · a47e14e · a47e14e
1 parent 4c2ab52
commit a47e14e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 65 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -7,6 +7,8 @@ html, body {
 
     font-size: 18px;
     font-weight: 200;
+
+    background-color: rgb(144,215,250);
 }
 
 body {
@@ -26,6 +28,8 @@ body {
     width: 100vw;
     height: 100vh;
 
+    overflow-y: scroll;
+
     padding: 80px 0px;
 
     min-width: 500px;
@@ -70,14 +74,15 @@ a:hover {
 
 /** Blog */
 #blog {
-
+    position: absolute;
     text-align: left;
 
     margin-top: 80px;
     min-width: 300px;
     max-width: 500px;
 
-    overflow: hidden
+    overflow-x: hidden;
+    overflow-y: visible;
 }
 
 .blog-date {
@@ -98,6 +103,7 @@ a:hover {
     margin: 14px 10px;
 
     user-select: all;
+    display: block;
 }
 
 .blog-link a {

diff --git a/js/engine.js b/js/engine.js
@@ -12,9 +12,6 @@ function renderPost(post) {
     // step 1: extract required data
     const id = post.id;
     const displayDate = post.date.display;
-    const decorator = post.body.decorator;
-    const postBody = post.body.text;
-    const postURL = post.body.url;
 
     // step 2: build elements and assign data
     const postElement = document.createElement("div");
@@ -27,43 +24,50 @@ function renderPost(post) {
     dateElement.textContent = displayDate;
     postElement.appendChild(dateElement);
 
-    const linkElement = document.createElement("div");
-    linkElement.className = "blog-link";
-    postElement.appendChild(linkElement);
-
-    const linkFlexElement = document.createElement("div");
-    linkFlexElement.className = "blog-link-flex";
-    linkElement.appendChild(linkFlexElement);
-
-    const bulletElement = document.createElement("div");
-    bulletElement.className = "blog-link-bullet";
-    bulletElement.textContent = decorator;
-    linkFlexElement.appendChild(bulletElement);
-
-    const bodyElement = document.createElement("div");
-    bodyElement.className = "blog-link-left";
-    bodyElement.textContent = postBody;
-    linkFlexElement.appendChild(bodyElement);
-
-    const openElement = document.createElement("div");
-    openElement.className = "blog-link-right";
-    linkFlexElement.appendChild(openElement);
-
-    const openLinkElement = document.createElement("a");
-    openLinkElement.href = postURL;
-    openLinkElement.target = "_blank";
-    openLinkElement.textContent = "↗ Open";
-    openElement.appendChild(openLinkElement);
-
-    // step 3: handle optional keypaths
-
-    if (post.body.attachment) {
-        if (post.body.attachment.type === "url") {
-            const bodyURLElement = document.createElement("a");
-            bodyURLElement.href = post.body.attachment.url;
-            bodyURLElement.textContent = post.body.attachment.url;
-            bodyURLElement.target = "_blank";
-            bodyElement.appendChild(bodyURLElement);
+    for (let link of post.links) {
+
+        const linkDecorator = link.decorator;
+        const linkBody = link.text;
+        const linkURL = link.url;
+
+        const linkElement = document.createElement("div");
+        linkElement.className = "blog-link";
+        postElement.appendChild(linkElement);
+
+        const linkFlexElement = document.createElement("div");
+        linkFlexElement.className = "blog-link-flex";
+        linkElement.appendChild(linkFlexElement);
+
+        const bulletElement = document.createElement("div");
+        bulletElement.className = "blog-link-bullet";
+        bulletElement.textContent = linkDecorator;
+        linkFlexElement.appendChild(bulletElement);
+
+        const bodyElement = document.createElement("div");
+        bodyElement.className = "blog-link-left";
+        bodyElement.textContent = linkBody;
+        linkFlexElement.appendChild(bodyElement);
+
+        const openElement = document.createElement("div");
+        openElement.className = "blog-link-right";
+        linkFlexElement.appendChild(openElement);
+
+        const openLinkElement = document.createElement("a");
+        openLinkElement.href = linkURL;
+        openLinkElement.target = "_blank";
+        openLinkElement.textContent = "↗ Open";
+        openElement.appendChild(openLinkElement);
+
+        // step 3: handle optional keypaths
+
+        if (link.attachment) {
+            if (link.attachment.type === "url") {
+                const bodyURLElement = document.createElement("a");
+                bodyURLElement.href = link.attachment.url;
+                bodyURLElement.textContent = link.attachment.url;
+                bodyURLElement.target = "_blank";
+                bodyElement.appendChild(bodyURLElement);
+            }
         }
     }
 

diff --git a/js/posts.js b/js/posts.js
@@ -3,28 +3,34 @@
  * Collection of blog posts. Requires the following keypaths:
  * - id
  * - date.display
- * - body.decorator
- * - body.text
- * - body.url
- * 
- * And optional keypaths:
- * - post.body.attachment
- *      - supported types: url
+ * - links ; which each: contain
+ *      - decorator
+ *      - text
+ *      - url
+ *          and optional keypaths:
+ *      - attachment
+ *          - supported types: url
  */
-const interesting_posts = [
-    {
-        id: "7-18-2021",
-        date: {
-            display: "18 july 2021"
+const interesting_posts = [{
+    id: "7-18-2021",
+    date: {
+        display: "18 july 2021"
+    },
+    links: [{
+        decorator: "→",
+        text: "this is Microsoft's new 3D emoji. 1,800 emoji will be updated in Windows, Office, and other Microsoft products with a new visual style. Full details here:",
+        attachment: {
+            type: "url",
+            url: "https://www.theverge.com/2021/7/15/22578352/microsoft-new-3d-emoji-clippy-windows-office"
         },
-        body: {
-            decorator: "→",
-            text: "this is Microsoft's new 3D emoji. 1,800 emoji will be updated in Windows, Office, and other Microsoft products with a new visual style. Full details here:",
-            attachment: {
-                type: "url",
-                url: "https://www.theverge.com/2021/7/15/22578352/microsoft-new-3d-emoji-clippy-windows-office"
-            },
-            url: "https://twitter.com/tomwarren/status/1415675187509432329"
-        }
-    }
-];
+        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.",
+        attachment: {
+            type: "url",
+            url: "https://www.bloomberg.com/news/articles/2021-07-14/netflix-plans-to-offer-video-games-in-expansion-beyond-films-tv?sref=9hGJlFio"
+        },
+        url: "https://twitter.com/markgurman/status/1415434620775145477"
+    }]
+}];