Proposal: Static Medium feed

.gitignore

@@ -8,3 +8,4 @@ node_modules/
 public
 /themes/navhub-v2/static/css/nav.css
 /themes/navhub-v2/static/css/nav.css.map
+data/medium.json

netlify.toml

@@ -6,7 +6,7 @@ HUGO_VERSION = "0.53"
 
 [build]
 publish = "public"
-command = "gulp sass && hugo"
+command = "gulp sass && npm run data-medium && hugo"
 
 [[redirects]]
   from = "https://navcore.org/*"
@@ -85,4 +85,3 @@ command = "gulp sass && hugo"
   to = "https://navhub.org/assets"
   status = 301
   force = true
-

package.json

@@ -23,6 +23,7 @@
     "webpack-cli": "^3.3.5"
   },
   "scripts": {
+    "data-medium": "mkdir -p data && node tools/rss-to-json.js https://medium.com/feed/nav-coin ./data/medium.json",
     "start": "hugo server",
     "sass": "gulp sass:watch",
     "build": "webpack --mode production",

themes/navhub-v2/layouts/home.html

@@ -14,13 +14,13 @@ <h2>Community News and Articles</h2>
                 <span class="fa fa-chevron-right"></span>
             </a>
         </div>
-        <div id="react-latest-news">
-            <div class="status-container">
-                <h3>Loading...</h3>
-            </div>
+        <div id="latest-news" class="card-container">
+            {{ range first 8 .Site.Data.medium.items }}
+                {{ partial "news/news_card.html" . }}
+            {{ end }}
         </div>
     </div>
-    
+
     {{ partial "home/projects_section.html" . }}
 
     {{ partial "home/events_section.html" . }}
@@ -31,9 +31,5 @@ <h3>Loading...</h3>
 
     {{ partial "footer.html" . }}
 
-    <!-- React components. -->
-    <script src="/js/react/vendor.bundle.js"></script>
-    <script src="/js/react/latest-news.js"></script>
-
 </body>
 </html>

themes/navhub-v2/layouts/partials/news/news_card.html

@@ -0,0 +1,15 @@
+<div class="homepage-news-card">
+    <a href="{{ .link }}}" target="_blank">
+      <div class="title-container"><h1>{{ .title }}</h1></div>
+      <div class="lower-section">
+          <div class="project-author">
+              <span class="fa fa-user-circle-o"></span>
+              {{ .creator }}
+          </div>
+          <div class="project-date">
+              <span class="fa fa-calendar"></span>
+              <span>{{ dateFormat "2 January 2006" .pubDate }} </span>
+          </div>
+      </div>
+    </a>
+</div>

themes/navhub-v2/static/css/sass/homepage/news_section.scss

@@ -3,7 +3,7 @@
   src: url(/fonts/BIG-JOHN.otf);
 }
 
-#react-latest-news {
+#latest-news {
   min-height: 253px;
 }
 
@@ -119,6 +119,7 @@
         }
         .fa {
           margin-right: 5px;
+          color: #7d5ab5;
         }
       }
     }

tools/rss-to-json.js

@@ -0,0 +1,35 @@
+/*
+
+Download an RSS feed, parse, and save it to a file.
+
+Usage:
+node rss-to-json url-to-rss output.json
+
+*/
+
+
+const fs = require("fs");
+const path = require("path");
+const Parser = require("rss-parser");
+const parser = new Parser();
+const [ url, outputPath ] = process.argv.slice(2);
+
+function save(err, feed) {
+  if (err !== null) {
+    const { message, stack, status } = err;
+    console.log("error parsing", url, message, stack, status)
+    return
+  }
+
+  const outputSource = JSON.stringify(feed, null, "  ");
+  fs.writeFile(outputPath, outputSource, function (err) {
+    if (err !== null) {
+      const { message, stack } = err;
+      console.log("error saving", outputPath, message, stack, status)
+      return
+    }
+    console.log("saved", outputPath)
+  })
+}
+
+parser.parseURL(url, save);