Content changes

Signed-off-by: Travis Beckham <[email protected]>
linkerd · Nov 1, 2024 · 47cf7dd · 47cf7dd
1 parent c507962
commit 47cf7dd
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 110 deletions.
diff --git a/linkerd.io/assets/scss/app/_adopters.scss b/linkerd.io/assets/scss/app/_adopters.scss
@@ -4,7 +4,7 @@
 
 .adopters {
   .page__container {
-    @include make-stack(6);
+    @include make-stack(7);
   }
   .adopters__case-studies {
     display: grid;

diff --git a/linkerd.io/assets/scss/app/_ambassadors-apply.scss b/linkerd.io/assets/scss/app/_ambassadors-apply.scss
@@ -11,8 +11,11 @@
     @include make-stack(7);
   }
   @media (min-width: breakpoint-min-width("md")) {
+    section {
+      padding-left: spacer(6);
+      padding-right: spacer(6);
+    }
     .card {
-      gap: spacer(6);
       padding: spacer(6);
     }
   }

diff --git a/linkerd.io/assets/scss/app/_enterprise.scss b/linkerd.io/assets/scss/app/_enterprise.scss
@@ -8,7 +8,7 @@
     font-size: $font-size-h1;
   }
   .page__container {
-    @include make-stack(6);
+    @include make-stack(7);
   }
   .enterprise__section {
     @include make-stack(5);

diff --git a/linkerd.io/assets/scss/components/_accordion.scss b/linkerd.io/assets/scss/components/_accordion.scss
@@ -0,0 +1,40 @@
+/*
+@markup
+<div class="accordion">
+  <details>
+    <summary>Title</summary>
+    Content
+  </details>
+  ...
+</div>
+*/
+
+.accordion {
+  border-top: solid 1px $border-color;
+
+  details {
+    padding-top: spacer(3);
+    padding-bottom: spacer(3);
+    border-bottom: solid 1px $border-color;
+
+    summary {
+      padding-right: spacer(5);
+      list-style-type: none;
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" fill="%238399ac" /></svg>');
+      background-repeat: no-repeat;
+      background-position: right center;
+      background-size: spacer(4) spacer(4);
+      cursor: pointer;
+      transition: color .2s ease;
+
+      &:hover {
+        color: $link-color;
+      }
+    }
+    &[open] summary {
+      margin-bottom: spacer(3);
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" fill="%238399ac" /></svg>');
+    }
+  }
+}
+
diff --git a/linkerd.io/assets/scss/components/_card.scss b/linkerd.io/assets/scss/components/_card.scss
@@ -107,18 +107,6 @@
     //  align-items: center;
     //}
   }
-
-  // Remove background color and shadow
-  &.card--clear {
-    background-color: transparent;
-    box-shadow: none;
-  }
-  &.card--clear,
-  &.card--clear.card--inset-media {
-    // Keep side padding so the content aligns with all other cards
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 }
 
 /*

diff --git a/linkerd.io/assets/scss/components/_prose.scss b/linkerd.io/assets/scss/components/_prose.scss
@@ -11,7 +11,12 @@ Apply to containers that contain rendered markdown.
   // Add extra space above h2
   h2 {
     padding-top: spacer(3);
+
+    &:first-child {
+      padding-top: 0;
+    }
   }
+
   // Add bottom margin to alerts
   .alert {
     margin-bottom: spacer(3);

diff --git a/linkerd.io/assets/scss/main.scss b/linkerd.io/assets/scss/main.scss
@@ -15,6 +15,7 @@
 @import "base";
 
 // Components
+@import "components/accordion";
 @import "components/alert";
 @import "components/anchor";
 @import "components/avatar";

diff --git a/linkerd.io/content/community/ambassadors-apply/_index.md b/linkerd.io/content/community/ambassadors-apply/_index.md
@@ -30,94 +30,82 @@ params:
         day—this is the program for you.
     - title: What are Linkerd Ambassadors?
       content: |-
+        Linkerd Ambassadors educate the Kubernetes community about Linkerd.
+        They spread its message of simplicity far and wide,  and they represent
+        the voice of the community back to the Linkerd maintainers. Every
+        ambassador works in their own way. While some create content, others may
+        prefer to be Community Leaders.
+        
         Ambassador activities typically include one or more of the following:
 
-        - **Educate:**  
-          Share their knowledge through talks, blog posts, videos, meetups, and
-          helping others on the Linkerd Slack.
-        - **Foster collaboration:**  
-          Build strong relationships within the Linkerd community and encourage
-          collaboration.
-        - **Grow the community:**  
-          Attract and onboard new users to the Linkerd ecosystem.
-        - **Provide feedback:**  
-          Share insights, suggestions, and community feedback with Linkerd
-          maintainers to help improve the project.
-        - **Promote Linkerd globally:**  
-          Spread the word about Linkerd and its benefits to a wider audience.
-    - title: Linkerd Ambassador Perks
-      useCard: true
-      card:
-        image: images/ambassador-logo.svg
-      content: |-
-        Linkerd Ambassadors get some amazing perks and benefits, including:
-
-        - **Swag!**  
-          Enjoy exclusive Linkerd Ambassador-branded swag just for Ambassadors.
-        - **Events!**  
-          Join us at Kubecon for special Ambassador events.
-        - **Exclusive Recognition!**
-          - LinkedIn Linkerd Ambassador badges,
-          - Your name in the Linkerd Ambassador page and the AMBASSADORS.md
-            file.
-          - Your blog post published on the linkerd.io in the "Ambassador
-            Highlight" section 
-        - **Resources and support!**  
-          Get funding, training, and support for hosting workshops, speaking,
-          creating content, or mentoring others.
-        - **Networking:**
-          - Join regular meetings where Ambassadors can present to each other
-          - Connect with other cloud native experts and build valuable
-            relationships throughout the community.
-    - title: How to become a Linkerd Ambassador
-      useCard: true
-      card:
-        buttons:
-          - text: Apply now
-            href: https://docs.google.com/forms/d/e/1FAIpQLScBC-RWSPMbYFbuqPgmetKLyhjb1ih9TcDqI6szek8ElsYHPw/viewform?usp=sf_link
-            variant: primary
-      content: |-
-        1. **Meet the requirements:**  
-          Demonstrate expertise in Linkerd and a commitment to community
-          engagement (see below).
-        2. **Submit your application:**  
-          Apply through our official application process.
-        3. **Fulfill your responsibilities:**  
-          Actively participate in educational activities and community building.
-
-        There are only a limited number of ambassador spots each year, so make
-        your best case to secure your spot.
-    - title: Linkerd Ambassador Emeritus
-      content: |-
-        Linkerd Ambassadors who opt to step down or are unable to meet
-        responsibilities will be moved to Emeritus status. Emeritus Ambassadors
-        are always welcome to reapply.
-
-        Join the Linkerd Ambassador Program and make your mark on the cloud
-        native community!
-    - title: Program Requirements
-      useCard: true
-      card:
-        buttons:
-          - text: Apply now
-            href: https://docs.google.com/forms/d/e/1FAIpQLScBC-RWSPMbYFbuqPgmetKLyhjb1ih9TcDqI6szek8ElsYHPw/viewform?usp=sf_link
-            variant: primary
-      content: |-
-        How Linkerd Ambassadors help educate the community will depend on their
-        preferences and strengths. Typically, they must do at least two of the
-        following: 
+        - **Educate:** Share their knowledge through talks, blog posts, videos,
+          meetups, and helping others on the Linkerd Slack.
+        - **Foster collaboration:** Build strong relationships within the
+          Linkerd community and encourage collaboration.
+        - **Grow the community:** Attract and onboard new users to the Linkerd
+          ecosystem.
+        - **Provide feedback:** Share insights, suggestions, and community
+          feedback with Linkerd maintainers to help improve the project.
+        - **Promote Linkerd globally:** Spread the word about Linkerd and its
+          benefits to a wider audience.
+  perks:
+    title: Linkerd Ambassador Perks
+    image: images/ambassador-logo.svg
+    content: |-
+      Linkerd Ambassadors get some amazing perks and benefits, including:
 
-        1. Presenting a Linkerd-related talk at a conference or local meetup,
-        2. Create Linkerd-related content (e.g., blog post, video),
-        3. Regularly answer questions on Slack (i.e. on a monthly basis),
-        4. Contribute code, documentation, or otherwise participate in the
-          Linkerd open source project
+      - **Swag!** Enjoy exclusive Linkerd Ambassador-branded swag just for
+        Ambassadors.
+      - **Events!** Join us at Kubecon for special Ambassador events.
+      - **Exclusive Recognition!**
+        - LinkedIn Linkerd Ambassador badges,
+        - Your name in the Linkerd Ambassador page and the AMBASSADORS.md
+          file.
+        - Your blog post published on the linkerd.io in the "Ambassador
+          Highlight" section 
+      - **Resources and support!** Get funding, training, and support for
+        hosting workshops, speaking, creating content, or mentoring others.
+      - **Networking:**
+        - Join regular meetings where Ambassadors can present to each other
+        - Connect with other cloud native experts and build valuable
+          relationships throughout the community.
+  faqs:
+    title: Frequently asked questions
+    content:
+      - title: How do I become a Linkerd Ambassador?
+        content: |-
+          1. **Meet the requirements:** Demonstrate expertise in Linkerd and a
+            commitment to community engagement (see below).
+          2. **Submit your application:** Apply through our official application
+            process.
+          3. **Fulfill your responsibilities:** Actively participate in
+            educational activities and community building.
 
-        Other creative ideas not listed here are also possible, as long as they
-        achieve the goal of educating users about Linkerd. Let us know how you
-        are achieving it in your application.
+          There are only a limited number of ambassador spots each year, so make
+          your best case to secure your spot.
+      - title: What are the program requirements?
+        content: |-
+          How Linkerd Ambassadors help educate the community will depend on their
+          preferences and strengths. Typically, they must do at least **two** of
+          the following:
 
-        Finally, Ambassadors active on social media are encouraged to help
-        amplify Linkerd content on social or other media and engage in
-        conversation about Linkerd (e.g., Reddit, LinkedIn, etc.).
+          1. Presenting a Linkerd-related talk at a conference or local meetup,
+          2. Create Linkerd-related content (e.g., blog post, video),
+          3. Regularly answer questions on Slack (i.e. on a monthly basis),
+          4. Contribute code, documentation, or otherwise participate in the
+            Linkerd open source project
+          
+          Other creative ideas not listed here are also possible, as long as they
+          achieve the goal of educating users about Linkerd. Let us know how you
+          are achieving it in your application. 
+          
+          Finally, Ambassadors active on social media are encouraged to help
+          amplify Linkerd content on social or other media and engage in
+          conversation about Linkerd (e.g., Reddit, LinkedIn, etc.). 
+      - title: What if Linkerd Ambassadors can't fulfill their responsibilities
+          anymore?
+        content: |-
+          Linkerd Ambassadors who opt to step down or are unable to meet
+          responsibilities will be moved to Emeritus status. Emeritus Ambassadors
+          are always welcome to reapply.
 ---
diff --git a/linkerd.io/content/tests/components.html b/linkerd.io/content/tests/components.html
@@ -148,6 +148,18 @@ <h4>Header</h4>
     </div>
   </div>
 
+  <div class="card card--inset-media">
+    <div class="card__media">
+      <img src="../image.png" class="img img--fill img--cover img--h196 img--rounded">
+    </div>
+    <div class="card__body">
+      <div class="card__content">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </div>
+    </div>
+  </div>
+
   <div class="card card--md-horz card--inset-media card--md-reverse card--center">
     <div class="card__media">
       <img src="../image.png" class="img img--128 img--cover img--round">

diff --git a/linkerd.io/layouts/community/ambassadors-apply.html b/linkerd.io/layouts/community/ambassadors-apply.html
@@ -2,10 +2,20 @@
   <div class="ambassadors-apply">
     {{ partial "components/hero" . }}
     <div class="page">
-      <div class="page__container container">
+      <div class="page__container container-xl">
+        {{/* Sections */}}
         {{ range .Params.sections }}
-          <div class="card card--md-horz card--md-reverse card--inset-media{{ if not (eq .useCard true) }} card--clear{{ end }}">
-            {{ with .card.image }}
+          <section>
+            <h2>
+              {{ .title }}
+            </h2>
+            {{ .content | $.Page.RenderString (dict "display" "block") }}
+          </section>
+        {{ end }}
+        {{/* Perks */}}
+        {{ with .Params.perks }}
+          <div class="card card--md-horz card--md-reverse card--inset-media">
+            {{ with .image }}
               <div class="card__media">
                 {{ with $.Resources.Get . }}
                   <img src="{{ .RelPermalink }}" alt="{{ path.BaseName . | humanize }}" class="img img--w128 img--center">
@@ -21,16 +31,25 @@ <h2>
               <div class="card__content">
                 {{ .content | $.Page.RenderString (dict "display" "block") }}
               </div>
-              {{ with .card.buttons }}
-                <div class="card__footer">
-                  {{ range $k, $v := . }}
-                    {{ partial "components/button" (dict "href" .href "text" .text "variant" .variant) }}
-                  {{ end }}
-                </div>
-              {{ end }}
             </div>
           </div>
         {{ end }}
+        {{/* FAQs */}}
+        {{ with .Params.faqs }}
+          <section>
+            <h2>
+              {{ .title }}
+            </h2>
+            <div class="accordion">
+              {{ range .content }}
+                <details>
+                  <summary>{{ .title }}</summary>
+                  {{ .content | $.Page.RenderString (dict "display" "block") }}
+                </details>
+              {{ end }}
+            </div>
+          </section>
+        {{ end }}
       </div>
     </div>
   </div>