Refactored hero

Signed-off-by: Travis Beckham <[email protected]>
linkerd · Oct 30, 2024 · 5d5967f · 5d5967f
1 parent 85cf6b7
commit 5d5967f
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 93 deletions.
diff --git a/linkerd.io/assets/scss/app/_ambassadors-apply.scss b/linkerd.io/assets/scss/app/_ambassadors-apply.scss
@@ -16,28 +16,4 @@
       padding: spacer(6);
     }
   }
-  @media (min-width: breakpoint-min-width("lg")) {
-    .hero__container {
-      background-image: url("/community/ambassadors-apply/images/bkgd.svg");
-      background-repeat: no-repeat;
-      background-size: auto 300px;
-      background-position: right center;
-    }
-    .hero__body {
-      max-width: 700px;
-    }
-  }
-  @media (min-width: breakpoint-min-width("xl")) {
-    .hero__container {
-      background-size: auto 400px;
-    }
-  }
-  @media (min-width: breakpoint-min-width("xxl")) {
-    .hero__container {
-      background-size: auto 500px;
-    }
-    .hero__body {
-      max-width: 800px;
-    }
-  }
 }
diff --git a/linkerd.io/assets/scss/app/_enterprise.scss b/linkerd.io/assets/scss/app/_enterprise.scss
@@ -19,28 +19,4 @@
       padding: spacer(6);
     }
   }
-  @media (min-width: breakpoint-min-width("lg")) {
-    .hero__container {
-      background-image: url("/enterprise/images/bkgd.svg");
-      background-repeat: no-repeat;
-      background-size: auto 300px;
-      background-position: right center;
-    }
-    .hero__body {
-      max-width: 700px;
-    }
-  }
-  @media (min-width: breakpoint-min-width("xl")) {
-    .hero__container {
-      background-size: auto 400px;
-    }
-  }
-  @media (min-width: breakpoint-min-width("xxl")) {
-    .hero__container {
-      background-size: auto 500px;
-    }
-    .hero__body {
-      max-width: 800px;
-    }
-  }
 }
diff --git a/linkerd.io/assets/scss/components/_hero.scss b/linkerd.io/assets/scss/components/_hero.scss
@@ -1,4 +1,30 @@
 /*
+
+If the `hero--has-background-image` class is applied, the `background-image` rule needs to
+be set on the `hero__container` element using an inline style or by appling the
+rule through a parent component. For example:
+
+Using an inline style:
+
+```html
+<div class="hero hero--has-background-image">
+  <div class="hero__container" style="background-image:url('bkgd.png')">
+```
+
+Using a parent component:
+
+```css
+.my-page .hero__container {
+  background-image:url('bkgd.png');
+}
+```
+
+```html
+<div class="my-page">
+  <div class="hero hero--has-background-image">
+    <div class="hero__container">
+```
+
 @markup
 <div class="hero">
   <div class="hero__container">
@@ -68,4 +94,35 @@
       }
     }
   }
+
+  // @options
+
+  &.hero--has-background-image {
+    .hero__container {
+      background-size: 0 0;// Hide background image
+    }
+    @media (min-width: breakpoint-min-width("lg")) {
+      .hero__container {
+        background-repeat: no-repeat;
+        background-size: auto 300px;
+        background-position: right center;
+      }
+      .hero__body {
+        max-width: 700px;
+      }
+    }
+    @media (min-width: breakpoint-min-width("xl")) {
+      .hero__container {
+        background-size: auto 400px;
+      }
+    }
+    @media (min-width: breakpoint-min-width("xxl")) {
+      .hero__container {
+        background-size: auto 500px;
+      }
+      .hero__body {
+        max-width: 800px;
+      }
+    }
+  }
 }
diff --git a/linkerd.io/content/community/ambassadors-apply/_index.md b/linkerd.io/content/community/ambassadors-apply/_index.md
@@ -6,6 +6,7 @@ description: |-
 layout: ambassadors-apply
 params:
   hero:
+    background: images/bkgd.svg
     content: |-
       Are you passionate about keeping software simple? Do you reject the idea
       that Kubernetes must be complex? Are you willing to stand up and fight

diff --git a/linkerd.io/content/enterprise/_index.md b/linkerd.io/content/enterprise/_index.md
@@ -5,6 +5,7 @@ description: |-
   for Linkerd.
 params:
   hero:
+    background: images/bkgd.svg
     title: Enterprise Support and Training
     content: |-
       Linkerd was created by Buoyant and contributed to the Cloud Native

diff --git a/linkerd.io/layouts/community/_hero.html b/linkerd.io/layouts/community/_hero.html
diff --git a/linkerd.io/layouts/community/adopters.html b/linkerd.io/layouts/community/adopters.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class="adopters">
-    {{ .Render "_hero" }}
+    {{ partial "components/hero" . }}
     <div class="page">
       <div class="page__container container">
         <div class="adopters__case-studies">

diff --git a/linkerd.io/layouts/community/ambassadors-apply.html b/linkerd.io/layouts/community/ambassadors-apply.html
@@ -1,10 +1,9 @@
 {{ define "main" }}
   <div class="ambassadors-apply">
-    {{ .Render "_hero" }}
+    {{ partial "components/hero" . }}
     <div class="page">
       <div class="page__container container">
         {{ 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 }}
               <div class="card__media">
@@ -31,7 +30,6 @@ <h2>
               {{ end }}
             </div>
           </div>
-
         {{ end }}
       </div>
     </div>

diff --git a/linkerd.io/layouts/community/ambassadors.html b/linkerd.io/layouts/community/ambassadors.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class="ambassadors">
-    {{ .Render "_hero" }}
+    {{ partial "components/hero" . }}
     <div class="page">
       <div class="page__container container">
         {{ range .Params.ambassadors }}

diff --git a/linkerd.io/layouts/community/get-involved.html b/linkerd.io/layouts/community/get-involved.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class="get-involved">
-    {{ .Render "_hero" }}
+    {{ partial "components/hero" . }}
     <div class="page">
       <div class="page__container container">
         {{ range .Params.items }}

diff --git a/linkerd.io/layouts/community/heroes.html b/linkerd.io/layouts/community/heroes.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class="heroes">
-    {{ .Render "_hero" }}
+    {{ partial "components/hero" . }}
     <div class="page">
       <div class="page__container container">
         {{ range .Params.heroes }}

diff --git a/linkerd.io/layouts/enterprise/list.html b/linkerd.io/layouts/enterprise/list.html
@@ -1,21 +1,6 @@
 {{ define "main" }}
   <div class="enterprise">
-    {{ with .Params.hero }}
-      <div class="hero">
-        <div class="hero__container container">
-          <div class="hero__body">
-            <div class="hero__header">
-              <h1>
-                {{ .title }}
-              </h1>
-            </div>
-            <div class="hero__content">
-              {{ .content | $.Page.RenderString (dict "display" "block") }}
-            </div>
-          </div>
-        </div>
-      </div>
-    {{ end }}
+    {{ partial "components/hero" . }}
     <div class="page">
       <div class="page__container container">
         {{ range .Params.sections }}

diff --git a/linkerd.io/layouts/partials/components/hero.html b/linkerd.io/layouts/partials/components/hero.html
@@ -0,0 +1,44 @@
+{{- /*
+@param {page} Page context
+
+Frontmatter params of page resource:
+---
+params:
+  hero:
+    background: [image]
+    title: [text]
+    content: [markdown]
+    buttons:
+      - text: [text]
+        href: [url]
+        variant: [text]
+---
+
+@example {{ partial "components/hero" . }}
+*/}}
+{{- with .Params.hero.background }}
+  {{- with $.Resources.Get . }}
+    {{- $.Scratch.Set "heroBackgroundImage" (printf `style="background-image:url('%s')"` .RelPermalink) }}
+  {{- end }}
+{{- end }}
+<div class="hero{{ if .Params.hero.background }} hero--has-background-image{{ end }}">
+  <div class="hero__container container" {{ $.Scratch.Get "heroBackgroundImage" | safeHTMLAttr }}>
+    <div class="hero__body">
+      <div class="hero__header">
+        <h1>
+          {{ default .Title .Params.hero.title }}
+        </h1>
+      </div>
+      <div class="hero__content">
+        {{ default .Description .Params.hero.content | $.Page.RenderString (dict "display" "block") }}
+      </div>
+      {{- with .Params.hero.buttons }}
+        <div class="hero__footer">
+          {{- range . }}
+            {{ partial "components/button" (dict "href" .href "text" .text "variant" .variant) }}
+          {{- end }}
+        </div>
+      {{- end }}
+    </div>
+  </div>
+</div>
diff --git a/linkerd.io/layouts/partials/components/paginator.html b/linkerd.io/layouts/partials/components/paginator.html
@@ -3,7 +3,6 @@
 
 @example {{ partial "components/paginator" . }}
 */}}
-
 {{- with .Paginator }}
   {{- if gt .TotalPages 1 }}
     <nav class="paginator">