Reapply @karr9's PR #1791 work (#1796)

* styles and code are added to highlight an ambassador Signed-off-by: Karina Rodriguez <[email protected]> * A new property was added to highlight an ambassador Signed-off-by: Karina Rodriguez <[email protected]> --------- Signed-off-by: Karina Rodriguez <[email protected]> Co-authored-by: Karina Rodriguez <[email protected]> Co-authored-by: Flynn <[email protected]> (cherry picked from commit 55bc952) Co-authored-by: Karina <[email protected]>
linkerd · Jun 27, 2024 · d92417e · d92417e
1 parent 03706da
commit d92417e
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 24 deletions.
diff --git a/linkerd.io/assets/scss/styles.scss b/linkerd.io/assets/scss/styles.scss
@@ -289,6 +289,27 @@
 
 .community-card {
   height: 100%;
+  position: relative;
+  &.highlight {
+    background-color: #EAF3FA;
+  }
+}
+.emeritus{
+  position: absolute;
+  right: 1rem;
+  padding: 0 0.8rem;
+  top: 1rem;
+  width: auto;
+  background-color: #64f9bf;
+  border-radius: 25px;
+  font-size: 0.9rem;
+  @media (max-width: 912px) {
+    right: 0;
+    top: 0;
+    padding: 0 0.7rem;
+    font-size: 0.7rem;
+    border-radius: 0px;
+  }
 }
 
 .adopters-case-studies__quote {

diff --git a/linkerd.io/content/community/ambassadors/_index.md b/linkerd.io/content/community/ambassadors/_index.md
@@ -17,65 +17,75 @@ ambassadors:
     job_title: Field Engineer
     image: /images/ambassadors/profile/charles-pretzer.png
     flag: 🇺🇸
+    highlight: false
     github: https://github.com/cpretzer
     linkedin: https://www.linkedin.com/in/charlespretzer/
   - name: Chris Campbell
     job_title: Cloud Software Engineer
     image: /images/ambassadors/profile/chris-campbell.png
     flag: 🇺🇸
+    highlight: false
     github: https://github.com/campbel
     twitter: https://twitter.com/ChrsCmpbl
     linkedin: https://www.linkedin.com/in/chris-campbell-28410839/
   - name: Christian Hüning
     job_title: Director of Cloud Technologies
     image: /images/ambassadors/profile/christian-huning.png
     flag: 🇩🇪
+    highlight: false
     github: https://github.com/christianhuening
     twitter: https://twitter.com/chrishuen
     linkedin: https://www.linkedin.com/in/christian-h%C3%BCning-964191a3/
   - name: Dominik Táskai
     job_title: Junior DevOps Engineer
     image: /images/ambassadors/profile/dominik-taskai.jpg
     flag: 🇭🇺
+    highlight: false
     github: https://github.com/dtaskai
     linkedin: https://www.linkedin.com/in/dtaskai/
   - name: Eli Goldberg
     job_title: Platform Team Lead
     image: /images/ambassadors/profile/eli-goldberg.jpeg
     flag: 🇮🇱
+    highlight: false
     github: https://github.com/Eli-Goldberg
     twitter: https://twitter.com/EliG0ldberg
     linkedin: https://www.linkedin.com/in/eli-go/
   - name: Fredrik Klingenberg
     job_title: Developer
     image: /images/ambassadors/profile/fredrik-klingenberg.png
     flag: 🇳🇴
+    highlight: false
     github: https://github.com/fredrkl
     twitter: https://twitter.com/fredrkl
     linkedin: https://www.linkedin.com/in/fredrikklingenberg/
-  - name: Kasper Nissen
-    job_title: Lead Platform Architect
-    image: /images/ambassadors/profile/kasper-nissen.png
-    flag: 🇩🇰
-    github: https://github.com/kaspernissen
-    twitter: https://twitter.com/phennex
-    linkedin: https://www.linkedin.com/in/kaspernissen/
   - name: María Teresa Rojas
     job_title: SRE
     image: /images/ambassadors/profile/maria-rojas.png
     flag: 🇵🇹
+    highlight: false
     github: https://github.com/mtrojas
     linkedin: https://www.linkedin.com/in/mtrojas/
   - name: Sergio Méndez
     job_title: DevOps Engineer
     image: /images/ambassadors/profile/sergio-mendez.png
     flag: 🇬🇹
+    highlight: false
     github: https://github.com/sergioarmgpl
     twitter: https://twitter.com/sergioarmgpl
     linkedin: https://www.linkedin.com/in/sergioarmgpl/
   - name: Steve Gray
     job_title: Founder & CEO
     image: '/images/ambassadors/profile/steve-gray.png'
     flag: 🇦🇺
+    highlight: false
     linkedin: https://www.linkedin.com/in/eventualconsistency/
+  - name: Kasper Nissen
+    job_title: Lead Platform Architect
+    image: /images/ambassadors/profile/kasper-nissen.png
+    flag: 🇩🇰
+    highlight: true
+    github: https://github.com/kaspernissen
+    twitter: https://twitter.com/phennex
+    linkedin: https://www.linkedin.com/in/kaspernissen/
 ---
diff --git a/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html b/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html
@@ -3,32 +3,67 @@
     <div class="columns column is-multiline">
         {{ range . }}
         <div class="column is-6">
+
+          {{ if .highlight }}
+          <div class="box is-flex is-justify-content-flex-start is-align-items-center px-5 py-5 community-card highlight">
+            <figure class="image is-128x128 mr-4 is-flex-shrink-0">
+              <img class="is-rounded" src="{{ .image }}" alt="{{ .name }}" />
+            </figure>
+            <div>
+              <h3 class="is-size-5 has-text-weight-bold">{{ .name }} {{ .flag }}</h3>
+              <p class="has-text-weight-light mb-2">{{ .job_title }}</p>
+
+                  <div class="is-flex">
+                    {{ with .github }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">       
+                          <img class="image is-32x32" src="/images/ambassadors/github-icon-navy.svg" alt="github icon">
+                      </a>
+                    {{ end }}
+                    {{ with .twitter }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/twitter-icon-navy.svg" alt="twitter icon">
+                      </a>
+                    {{ end }}
+                    {{ with .linkedin }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/linkedin-icon-navy.svg" alt="linkedin icon">
+                      </a>
+                    {{ end }}
+                  </div>
+            </div>
+
+            <div class="emeritus">Emeritus</div>
+
+          </div>
+          {{ else }}
           <div class="box is-flex is-justify-content-flex-start is-align-items-center px-5 py-5 community-card">
             <figure class="image is-128x128 mr-4 is-flex-shrink-0">
               <img class="is-rounded" src="{{ .image }}" alt="{{ .name }}" />
             </figure>
             <div>
               <h3 class="is-size-5 has-text-weight-bold">{{ .name }} {{ .flag }}</h3>
               <p class="has-text-weight-light mb-2">{{ .job_title }}</p>
-              <div class="is-flex">
-                {{ with .github }}
-                  <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
-                    <img class="image is-32x32" src="/images/ambassadors/github-icon.svg" alt="github icon">
-                  </a>
-                {{ end }}
-                {{ with .twitter }}
-                  <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
-                    <img class="image is-32x32" src="/images/ambassadors/twitter-icon.svg" alt="twitter icon">
-                  </a>
-                {{ end }}
-                {{ with .linkedin }}
-                  <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
-                    <img class="image is-32x32" src="/images/ambassadors/linkedin-icon.svg" alt="linkedin icon">
-                  </a>
-                {{ end }}
-              </div>
+
+                  <div class="is-flex">
+                    {{ with .github }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">       
+                          <img class="image is-32x32" src="/images/ambassadors/github-icon.svg" alt="github icon">
+                      </a>
+                    {{ end }}
+                    {{ with .twitter }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/twitter-icon.svg" alt="twitter icon">
+                      </a>
+                    {{ end }}
+                    {{ with .linkedin }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/linkedin-icon.svg" alt="linkedin icon">
+                      </a>
+                    {{ end }}
+                  </div>           
             </div>
           </div>
+          {{ end }}
         </div>
         {{ end }}
     </div>

diff --git a/linkerd.io/static/images/ambassadors/github-icon-navy.svg b/linkerd.io/static/images/ambassadors/github-icon-navy.svg
diff --git a/linkerd.io/static/images/ambassadors/linkedin-icon-navy.svg b/linkerd.io/static/images/ambassadors/linkedin-icon-navy.svg
diff --git a/linkerd.io/static/images/ambassadors/twitter-icon-navy.svg b/linkerd.io/static/images/ambassadors/twitter-icon-navy.svg
diff --git a/linkerd.io/themes/buoyant/assets/bulma/sass/grid/columns.sass b/linkerd.io/themes/buoyant/assets/bulma/sass/grid/columns.sass
@@ -503,3 +503,4 @@ $column-gap: 0.75rem !default
       +fullhd
         &.is-#{$i}-fullhd
           --columnGap: #{$i * 0.25rem}
+