diff --git a/linkerd.io/assets/scss/app/_adopters.scss b/linkerd.io/assets/scss/app/_adopters.scss index d337160365..544aafef36 100644 --- 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 new file mode 100644 index 0000000000..d063348b17 --- /dev/null +++ b/linkerd.io/assets/scss/app/_ambassadors-apply.scss @@ -0,0 +1,24 @@ +/* +@markup See: layouts/community/ambassadors-apply.html +*/ + +.ambassadors-apply { + // Override all h2s on the page + h2 { + font-size: $font-size-h1; + } + .page__container { + @include make-stack(7); + } + @media (min-width: breakpoint-min-width("lg")) { + section { + padding-left: spacer(6); + padding-right: spacer(6); + } + .card { + @include make-card--horz; + @include make-card--reverse; + padding: spacer(6); + } + } +} diff --git a/linkerd.io/assets/scss/app/_enterprise.scss b/linkerd.io/assets/scss/app/_enterprise.scss index b336cc8f73..1f559e40d3 100644 --- a/linkerd.io/assets/scss/app/_enterprise.scss +++ b/linkerd.io/assets/scss/app/_enterprise.scss @@ -3,12 +3,12 @@ */ .enterprise { - // Override all h2s on the enterprise page + // Override all h2s on the page h2 { font-size: $font-size-h1; } .page__container { - @include make-stack(6); + @include make-stack(7); } .enterprise__section { @include make-stack(5); @@ -20,19 +20,5 @@ gap: spacer(6); padding: spacer(6); } - .hero__container { - background-image: url("/enterprise/images/bkgd.svg"); - background-repeat: no-repeat; - background-size: 500px auto; - background-position: right; - } - .hero__body { - max-width: 700px; - } - } - @media (min-width: breakpoint-min-width("xl")) { - .hero__container { - background-size: auto 100%; - } } } diff --git a/linkerd.io/assets/scss/components/_accordion.scss b/linkerd.io/assets/scss/components/_accordion.scss new file mode 100644 index 0000000000..a9878decc4 --- /dev/null +++ b/linkerd.io/assets/scss/components/_accordion.scss @@ -0,0 +1,43 @@ +/* +@markup +
+
+ Title + Content +
+ ... +
+*/ + +.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,'); + background-repeat: no-repeat; + background-position: right center; + background-size: spacer(4) spacer(4); + cursor: pointer; + transition: color .2s ease; + + &:hover { + color: $link-color; + } + > * { + margin-bottom: 0; + } + } + &[open] summary { + margin-bottom: spacer(4); + background-image: url('data:image/svg+xml;utf8,'); + } + } +} + diff --git a/linkerd.io/assets/scss/components/_hero.scss b/linkerd.io/assets/scss/components/_hero.scss index 5c093aa387..fbd971d475 100644 --- 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 +
+
+``` + +Using a parent component: + +```css +.my-page .hero__container { + background-image:url('bkgd.png'); +} +``` + +```html +
+
+
+``` + @markup
@@ -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/assets/scss/components/_prose.scss b/linkerd.io/assets/scss/components/_prose.scss index ec97799dc5..cb28d49031 100644 --- 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 index f6347ba983..c1b70b1e0f 100644 --- a/linkerd.io/assets/scss/main.scss +++ b/linkerd.io/assets/scss/main.scss @@ -16,6 +16,7 @@ @import "base"; // Components +@import "components/accordion"; @import "components/alert"; @import "components/anchor"; @import "components/avatar"; @@ -39,6 +40,7 @@ // Application @import "app/adopters"; +@import "app/ambassadors-apply"; @import "app/ambassadors"; @import "app/blog"; @import "app/docs"; diff --git a/linkerd.io/content/community/ambassadors-apply/_index.md b/linkerd.io/content/community/ambassadors-apply/_index.md new file mode 100644 index 0000000000..33963b3459 --- /dev/null +++ b/linkerd.io/content/community/ambassadors-apply/_index.md @@ -0,0 +1,102 @@ +--- +title: Become a Linkerd Ambassador +description: |- + Join the Linkerd Ambassador Program and help us deliver simplicity as a value + for Kubernetes platforms everywhere. +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 + against the status quo? + + Join the Linkerd Ambassador Program and help us deliver simplicity as a + core value for Kubernetes platforms everywhere. **Spots are limited!** + buttons: + - text: Apply now! + href: https://docs.google.com/forms/d/e/1FAIpQLScBC-RWSPMbYFbuqPgmetKLyhjb1ih9TcDqI6szek8ElsYHPw/viewform?usp=sf_link + variant: primary + overview: + 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. + perks: + title: Linkerd Ambassador Perks + 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. + 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. + + 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: + + 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/community/ambassadors-apply/images/ambassador-logo.svg b/linkerd.io/content/community/ambassadors-apply/images/ambassador-logo.svg new file mode 100644 index 0000000000..8eca81f52e --- /dev/null +++ b/linkerd.io/content/community/ambassadors-apply/images/ambassador-logo.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/linkerd.io/content/community/ambassadors-apply/images/bkgd.svg b/linkerd.io/content/community/ambassadors-apply/images/bkgd.svg new file mode 100644 index 0000000000..19a8ecf83d --- /dev/null +++ b/linkerd.io/content/community/ambassadors-apply/images/bkgd.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/linkerd.io/content/enterprise/_index.md b/linkerd.io/content/enterprise/_index.md index 55c959b804..a51d33e4d1 100644 --- 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/content/enterprise/images/bkgd.svg b/linkerd.io/content/enterprise/images/bkgd.svg index d3962a2095..6e5ec5b20f 100644 --- a/linkerd.io/content/enterprise/images/bkgd.svg +++ b/linkerd.io/content/enterprise/images/bkgd.svg @@ -1,150 +1,155 @@ - - - - - + + + + + + - - - - - - - - - - - + + + + + + + + + + + - - + + - - + + - - + + - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - + - + - + - + - + - + - + - + - + + + + diff --git a/linkerd.io/content/tests/components.html b/linkerd.io/content/tests/components.html index e9dc80fec1..5fc220303a 100644 --- a/linkerd.io/content/tests/components.html +++ b/linkerd.io/content/tests/components.html @@ -275,4 +275,3 @@

Search Input

- diff --git a/linkerd.io/layouts/community/_hero.html b/linkerd.io/layouts/community/_hero.html deleted file mode 100644 index b6adf30c4d..0000000000 --- a/linkerd.io/layouts/community/_hero.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
-
-
-

- {{ default .Title .Params.hero.title }} -

-
-
- {{ default .Description .Params.hero.content | $.Page.RenderString (dict "display" "block") }} -
-
-
-
diff --git a/linkerd.io/layouts/community/adopters.html b/linkerd.io/layouts/community/adopters.html index 1babe61114..63b9eeb60c 100644 --- a/linkerd.io/layouts/community/adopters.html +++ b/linkerd.io/layouts/community/adopters.html @@ -1,6 +1,6 @@ {{ define "main" }}
- {{ .Render "_hero" }} + {{ partial "components/hero" . }}
diff --git a/linkerd.io/layouts/community/ambassadors-apply.html b/linkerd.io/layouts/community/ambassadors-apply.html new file mode 100644 index 0000000000..0322822447 --- /dev/null +++ b/linkerd.io/layouts/community/ambassadors-apply.html @@ -0,0 +1,60 @@ +{{ define "main" }} +
+ {{ partial "components/hero" . }} +
+
+ {{/* Overview */}} + {{ with .Params.overview }} +
+

+ {{ .title }} +

+ {{ .content | $.Page.RenderString (dict "display" "block") }} +
+ {{ end }} + {{/* Perks */}} + {{ with .Params.perks }} +
+ {{ with .image }} +
+ {{ with $.Resources.Get . }} + {{ path.BaseName . | humanize }} + {{ end }} +
+ {{ end }} +
+
+

+ {{ .title }} +

+
+
+ {{ .content | $.Page.RenderString (dict "display" "block") }} +
+
+
+ {{ end }} + {{/* FAQs */}} + {{ with .Params.faqs }} +
+

+ {{ .title }} +

+
+ {{ range .content }} +
+ +

+ {{ .title }} +

+ + {{ .content | $.Page.RenderString (dict "display" "block") }} +
+ {{ end }} +
+
+ {{ end }} +
+
+
+{{ end }} diff --git a/linkerd.io/layouts/community/ambassadors.html b/linkerd.io/layouts/community/ambassadors.html index d2351ba3cf..03fb0726f6 100644 --- a/linkerd.io/layouts/community/ambassadors.html +++ b/linkerd.io/layouts/community/ambassadors.html @@ -1,6 +1,6 @@ {{ define "main" }}
- {{ .Render "_hero" }} + {{ partial "components/hero" . }}
{{ range .Params.ambassadors }} diff --git a/linkerd.io/layouts/community/get-involved.html b/linkerd.io/layouts/community/get-involved.html index c98ce701d0..a81b319733 100644 --- a/linkerd.io/layouts/community/get-involved.html +++ b/linkerd.io/layouts/community/get-involved.html @@ -1,6 +1,6 @@ {{ define "main" }}
- {{ .Render "_hero" }} + {{ partial "components/hero" . }}
{{ range .Params.items }} diff --git a/linkerd.io/layouts/community/heroes.html b/linkerd.io/layouts/community/heroes.html index ea5432c68f..57e67daeed 100644 --- a/linkerd.io/layouts/community/heroes.html +++ b/linkerd.io/layouts/community/heroes.html @@ -1,6 +1,6 @@ {{ define "main" }}
- {{ .Render "_hero" }} + {{ partial "components/hero" . }}
{{ range .Params.heroes }} diff --git a/linkerd.io/layouts/enterprise/list.html b/linkerd.io/layouts/enterprise/list.html index 6bdfcbb9cb..9ec2dce3cb 100644 --- a/linkerd.io/layouts/enterprise/list.html +++ b/linkerd.io/layouts/enterprise/list.html @@ -1,21 +1,6 @@ {{ define "main" }}
- {{ with .Params.hero }} -
-
-
-
-

- {{ .title }} -

-
-
- {{ .content | $.Page.RenderString (dict "display" "block") }} -
-
-
-
- {{ end }} + {{ partial "components/hero" . }}
{{ range .Params.sections }} diff --git a/linkerd.io/layouts/partials/components/hero.html b/linkerd.io/layouts/partials/components/hero.html new file mode 100644 index 0000000000..e3410aac4b --- /dev/null +++ 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 }} +
+
+
+
+

+ {{ default .Title .Params.hero.title }} +

+
+
+ {{ default .Description .Params.hero.content | $.Page.RenderString (dict "display" "block") }} +
+ {{- with .Params.hero.buttons }} +
+ {{- range . }} + {{ partial "components/button" (dict "href" .href "text" .text "variant" .variant) }} + {{- end }} +
+ {{- end }} +
+
+
diff --git a/linkerd.io/layouts/partials/components/paginator.html b/linkerd.io/layouts/partials/components/paginator.html index 1bb47d513a..402a5b4e69 100644 --- 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 }}