From 7ceb5bcac4d13b96df6da95bf92fd7977087164e Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 9 Jan 2025 10:25:46 -0600
Subject: [PATCH] Website: add contributor information to policy details page.
 (#25275)

Closes: #24454


Changes:
- Updated the policy details page to include the policy's contributor
---
 website/assets/styles/pages/query-detail.less | 27 +++++++++++++++++++
 website/views/pages/query-detail.ejs          |  5 ++++
 2 files changed, 32 insertions(+)

diff --git a/website/assets/styles/pages/query-detail.less b/website/assets/styles/pages/query-detail.less
index 8026d382f4..3e56e7d5ad 100644
--- a/website/assets/styles/pages/query-detail.less
+++ b/website/assets/styles/pages/query-detail.less
@@ -155,6 +155,33 @@
     line-height: 150%;
     margin-bottom: 0px;
     padding: 16px 0px 32px 0px;
+  }
+  [purpose='policy-attribution'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-top: 8px;
+    padding-bottom: 16px;
+    [purpose='contributor-profile-picture'] {
+      width: 28.8px;
+      height: 28.8px;
+      margin-right: 8px;
+      border-radius: 50%;
+    }
+    [purpose='contributor-profile-name'] {
+      font-size: 14px;
+      line-height: 150%;
+    }
+    [purpose='policy-link'] {
+      color: unset;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+
   }
   [purpose='policy-details'] {
     padding-right: 64px;
diff --git a/website/views/pages/query-detail.ejs b/website/views/pages/query-detail.ejs
index d4cccec5bb..86d3d053d8 100644
--- a/website/views/pages/query-detail.ejs
+++ b/website/views/pages/query-detail.ejs
@@ -30,6 +30,11 @@
       <div purpose="policy-details-and-sidebar" class="d-flex flex-lg-row flex-column">
         <div purpose="policy-details" class="d-flex flex-column">
           <h2 purpose="policy-name"><%- query.name %></h2>
+          <div purpose="policy-attribution">
+            <img alt="Contributor's GitHub profile picture" purpose="contributor-profile-picture" src="https://github.com/<%- query.contributors[0].handle %>.png?size=200">
+            <a purpose="policy-link" href="https://github.com/<%- query.contributors[0].handle %>" class="d-flex align-items-center">
+            <p purpose="contributor-profile-name" class="mb-0"><%= query.contributors[0].name %></p></a>
+          </div>
           <p purpose="policy-description"><%- query.description %></p>
 <!--           <div purpose="policy-control" v-if="query.control">
             <h3>Control</h3>