Update blog content block to use custom extension and ERB template

HHS · May 31, 2022 · 6633f90 · 6633f90
1 parent 7fcb658
commit 6633f90
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 47 deletions.
diff --git a/_blocks/home-blog-headlines/block.md b/_blocks/home-blog-headlines/block.md
@@ -8,54 +8,22 @@ name: Blog Headlines (homepage)
 
 ## Blog
 
+{::blogs count="3"}
 <ul class="usa-card-group">
-  <li class="usa-card tablet:grid-col-4">
-    <div class="usa-card__container">
-      <div class="usa-card__header">
-        <h3 class="usa-card__heading">How one postdoc overcame imposter fears</h3>
-      </div>
-      <div class="usa-card__body">
-        <p>
-          In a Nature Career Column, Kelsey Inouye, describes her career path and her struggles along the way. She completed her PhD at the University of Oxford...
-        </p>
-      </div>
-      <div class="usa-card__footer">
-        <a href="#">read this post</a>
-      </div>
-    </div>
-  </li>
-  <li class="usa-card tablet:grid-col-4">
-    <div class="usa-card__container">
-      <div class="usa-card__header">
-        <h3 class="usa-card__heading">How one postdoc overcame imposter fears</h3>
-      </div>
-      <div class="usa-card__body">
-        <p>
-          In a Nature Career Column, Kelsey Inouye, describes her career path and her struggles along the way. She completed her PhD at the University of Oxford...
-        </p>
-      </div>
-      <div class="usa-card__footer">
-        <a href="#">read this post</a>
-      </div>
-    </div>
-  </li>
-
-  <li class="usa-card tablet:grid-col-4">
-    <div class="usa-card__container">
-      <div class="usa-card__header">
-        <h3 class="usa-card__heading">How one postdoc overcame imposter fears</h3>
-      </div>
-      <div class="usa-card__body">
-        <p>
-          In a Nature Career Column, Kelsey Inouye, describes her career path and her struggles along the way. She completed her PhD at the University of Oxford...
-        </p>
-      </div>
-      <div class="usa-card__footer">
-        <a href="#">read this post</a>
-      </div>
-    </div>
-  </li>
+  <% headlines.each do |headline| %>
+    <li class="usa-card tablet:grid-col">
+      <div class="usa-card__container">
+        <div class="usa-card__header">
+          <h3 class="usa-card__heading"><a href="<%= headline.url %>"><%= headline.title %></a></h3>
+        </div>
+        <div class="usa-card__body overflow-hidden">
+          <p><%= headline.blurb %></p>
+        </div>
+      </div>
+    </li>
+  <% end %>
 </ul>
+{:/blogs}
 
 [Subscribe to the OITE careers blog](https://oitecareersblog.od.nih.gov/)
 

diff --git a/app/assets/stylesheets/uswds-settings.scss b/app/assets/stylesheets/uswds-settings.scss
@@ -41,6 +41,7 @@
     "margin",
     "margin-horizontal",
     "margin-vertical",
+    "overflow",
     "padding",
     "text-align",
     "text-transform"

diff --git a/lib/kramdown/parser/custom_parser.rb b/lib/kramdown/parser/custom_parser.rb
@@ -1,12 +1,13 @@
 require_relative "extensions/columns"
 require_relative "extensions/content_block"
 require_relative "extensions/video"
+require_relative "extensions/blog"
 
 class Kramdown::Parser::CustomParser < Kramdown::Parser::Kramdown
   include CustomParserExtensions
 
   # Add support for new types of Kramdown extensions by implementing a handler:
-  #  def handle_tagname_extension(name, opts, body, type, line)
+  #  def handle_name_extension(opts, body, type, line)
 
   def handle_extension(name, opts, body, type, line = nil)
     handler = "handle_#{name}_extension"

diff --git a/lib/kramdown/parser/extensions/blog.rb b/lib/kramdown/parser/extensions/blog.rb
@@ -0,0 +1,13 @@
+module CustomParserExtensions
+  def handle_blogs_extension(opts, body, type, line)
+    post_count = opts["count"] || 3
+    content = BlogHeadlinesBlock.new(post_count).parse(body)
+
+    @tree.children << Kramdown::Element.new(
+      :raw,
+      content,
+      category: :block,
+      location: line
+    )
+  end
+end