From 240d58b686edcb564bbb36e9877f0780d1ea7591 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 8 Dec 2025 21:30:13 -0600
Subject: [PATCH] Website: Update article template (#36924)

Closes: #35379

Changes:
- Added "Last updated on" to the publish date on article pages and
updated the layout of the article details section on mobile devices
(<575px screen width).
---
 .../styles/pages/articles/basic-article.less       | 10 ++++++++++
 website/views/pages/articles/basic-article.ejs     | 14 ++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less
index e6a9bef62a..734a01b97d 100644
--- a/website/assets/styles/pages/articles/basic-article.less
+++ b/website/assets/styles/pages/articles/basic-article.less
@@ -425,6 +425,7 @@
   [purpose='article-details'] {
     font-size: 14px;
     line-height: 20px;
+    flex-direction: row;
     span {
       color: @core-fleet-black-50;
     }
@@ -901,6 +902,15 @@
         margin-bottom: 32px;
       }
     }
+    [purpose='article-details'] {
+      flex-direction: column;
+      [purpose='divider'] {
+        display: none;
+      }
+      [purpose='article-author'] {
+        margin-top: 8px;
+      }
+    }
   }
 
   @media (max-width: 375px) {
diff --git a/website/views/pages/articles/basic-article.ejs b/website/views/pages/articles/basic-article.ejs
index 753eaee78c..efab284a31 100644
--- a/website/views/pages/articles/basic-article.ejs
+++ b/website/views/pages/articles/basic-article.ejs
@@ -33,11 +33,13 @@
           <h2 v-if="articleHasSubtitle && articleSubtitle !== undefined">{{articleSubtitle}}</h2>
         </div>
         <div class="d-flex flex-sm-row flex-column justify-content-between align-items-sm-center">
-          <div purpose="article-details" class="d-flex flex-row align-items-center">
-            <span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
-            <span class="px-2">|</span>
-            <img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
-            <p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
+          <div purpose="article-details" class="d-flex align-items-sm-center">
+            <span>Last updated on <js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
+            <span  purpose="divider" class="px-2">|</span>
+            <div purpose="article-author" class="d-flex flex-row align-items-center">
+              <img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
+              <p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
+            </div>
           </div>
 
         </div>
@@ -110,7 +112,7 @@
           </div>
           <div class="d-flex flex-sm-row flex-column justify-content-between align-items-sm-center">
             <div purpose="article-details" class="d-flex flex-row align-items-center">
-              <span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
+              <span>Last updated on <js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
               <span class="px-2">|</span>
               <img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
               <p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>