Allow for mutliple blog authors, and add boxout component for Singapo…

…re blog

src/_data/blogs.js

@@ -19,15 +19,12 @@ module.exports = () => {
     }).then((response) => {
 
         let blogs = response.items.map((blog) => {
+
             return {
                 title: blog.fields.title,
                 summaryShort: blog.fields.summary,
                 summaryLong: blog.fields.summaryBlogPage,
-                author: {
-                    name: blog.fields.author.fields.name,
-                    jobTitle: blog.fields.author.fields.jobTitle,
-                    image: blog.fields.author.fields.picture?.fields
-                },
+                authors: blog.fields.authors.map((author) => author.fields),
                 date: blog.fields.date,
                 coverImage: blog.fields.coverImage?.fields,
                 content: blog.fields.content,

src/_includes/blog-author.njk

@@ -1,7 +1,7 @@
 {% macro blogAuthor (author, size="small") %}
     <div class="iai-blog-author">
-        {% if author.image %}
-            <img class="iai-blog-author__image iai-blog-author__image--{{size}}" src="{{ author.image.file.url }}?w=96" alt=""/>
+        {% if author.picture %}
+            <img class="iai-blog-author__image iai-blog-author__image--{{size}}" src="{{ author.picture.fields.file.url }}?w=96" alt="" loading="lazy"/>
         {% endif %}
         <div>
             <span class="iai-blog-author__name">{{ author.name }}</span>

src/_includes/blog-components/box-out.njk

@@ -0,0 +1,22 @@
+{% macro boxOut (content, borderColour) %}
+
+  <style>
+    .box-out {
+      border: 3px solid var(--iai-pink);
+      border-radius: 8px;
+      margin: 3rem 0;
+      padding: 2rem;
+    }
+    .box-out h2, .box-out h2 img {
+      margin-top: 0;
+    }
+    .box-out img {
+      margin-bottom: 1.5rem;
+    }
+  </style>
+
+  <div class="box-out" {% if borderColour %}style="border-color: {{ borderColour }}"{% endif %}>
+    {{ content | safe }}
+  </div>
+
+{% endmacro %}

src/blog.njk

@@ -18,9 +18,11 @@ permalink: "blogs/{{ blog.title | slugify }}/"
 <div class="iai-blog-title container">
     <h2 class="iai-blog-title__title">{{ blog.title }}</h2>
     <p class="iai-blog-title__date">{{ blog.date | dateFormat }}</p>
-    {% if blog.author %}
-        {{ blogAuthor (blog.author, "large") }}
-    {% endif %}
+    <div class="d-md-flex gap-5">
+        {% for author in blog.authors %}
+            {{ blogAuthor (author, "large") }}
+        {% endfor %}
+    </div>
     {% if blog.summaryLong %}
         <p class="iai-blog-title__summary">{{ blog.summaryLong }}</p>
     {% endif %}
@@ -56,6 +58,12 @@ permalink: "blogs/{{ blog.title | slugify }}/"
             {{ lexSlide() }}
         </div>
     {% endif %}
+    {% if blog.title == "Singapore" %}
+        {% from "./_includes/blog-components/box-out.njk" import boxOut %}
+        {{ boxOut(
+            '<h2><img src="/img/launchpad_logo.png" alt="Launchpad" loading="lazy" width="220"/></h2><p>The Launchpad operates within GovTech, fostering innovation through ideathons and engaging with various government agencies. Over 500 ideas have been collected, with four agencies currently engaged and more in the pipeline.Target audience includes transformation teams and public officers, with a six-month timeline comprising a launch, sprints, and a final release. A web page facilitates idea submissions, leveraging LLMs for detail expansion, community upvoting, and direct links to prototypes.</p>'
+        ) }}
+    {% endif %}
 
     {% if blog.contentPart2 %}
         <div class="iai-blog-content__inner-container">