Merge pull request #20 from solo-io/banner

Add a banner

assets/docs/scss/custom/components/_banner.scss

@@ -0,0 +1,108 @@
+:root {
+    --alert-border-color: #dee2e6;
+
+    // Default
+    --alert-default-color: 225.9, 68%, 95.1%;
+    --alert-default-bg: hsl(var(--alert-default-color));
+    --alert-default-border-color: var(--alert-border-color);
+
+    // Primary
+    --alert-primary-color: var(--primary-50-hsl);
+    --alert-primary-bg: hsl(var(--alert-primary-color),0.5);
+    --alert-primary-border-color: var(--alert-border-color);
+
+    // Info
+    --alert-info-color: 204, 45.5%, 97.8%;
+    --alert-info-bg: hsl(var(--alert-info-color));
+    --alert-info-border-color: var(--alert-border-color);
+
+    // Success
+    --alert-success-color: var(--emerald-50-hsl);
+    --alert-success-bg: hsl(var(--alert-success-color),0.4);
+    --alert-success-border-color: var(--alert-border-color);
+
+    // Danger
+    --alert-danger-color: var(--cardinal-50-hsl);
+    --alert-danger-bg: hsl(var(--alert-danger-color),0.5);
+    --alert-danger-border-color: var(--alert-border-color);
+
+    // Warning
+    --alert-warning-color: var(--yellow-50-hsl);
+    --alert-warning-bg: hsl(var(--alert-warning-color),0.5);
+    --alert-warning-border-color: var(--alert-border-color);
+
+    // Light
+    --alert-light-bg: var(--gray-200);
+    --alert-light-border-color: var(--alert-border-color);
+
+    // Dark
+    --alert-dark-bg: var(--gray-800);
+    --alert-dark-border-color: var(--alert-border-color);
+
+}
+
+[data-dark-mode] {
+    --alert-border-color: var(--gray-800);
+
+    // Default
+    --alert-default-bg: hsl(var(--alert-default-color),0.05);
+    --alert-default-border-color: var(--alert-border-color);
+
+    // Primary
+    --alert-primary-bg: hsl(var(--primary-hsl),0.1);
+    --alert-primary-icon-color: var(--primary-200);
+    --alert-primary-border-color: var(--primary-800);
+
+    // Info
+    --alert-info-bg: hsl(var(--blue-500-hsl),0.1);
+    --alert-info-icon-color: var(--blue-200);
+    --alert-info-border-color: var(--blue-800);
+
+    // Success
+    --alert-success-bg: hsl(var(--emerald-500-hsl),0.1);
+    --alert-success-icon-color: var(--emerald-200);
+    --alert-success-border-color: var(--emerald-800);
+
+    // Danger
+    --alert-danger-bg: hsl(var(--cardinal-500-hsl),0.1);
+    --alert-danger-icon-color: var(--cardinal-200);
+    --alert-danger-border-color: var(--cardinal-800);
+
+    // Warning
+    --alert-warning-bg: hsl(var(--yellow-500-hsl),0.1);
+    --alert-warning-icon-color: var(--yellow-200);
+    --alert-warning-border-color: var(--yellow-800);
+
+    // Light
+    --alert-light-bg: var(--gray-900);
+    --alert-light-icon-color: var(--gray-200);
+    --alert-light-border-color: var(--gray-800);
+
+    // Dark
+    --alert-dark-bg: var(--gray-400);
+    --alert-dark-icon-color: var(--gray-800);
+    --alert-dark-border-color: var(--gray-200);
+}
+
+.alert {
+
+    background-color: var(--alert-info-bg);
+    border-color: var(--alert-success-border-color);
+    color: var(--text-default);
+    border-radius: 4px;
+    font-size: var(--font-size-sm);
+    margin-top: 0.2rem;
+
+   // padding: 5px;
+    text-align: left;
+    font-size: 1.0em;
+    display: flex !important;
+    box-sizing: border-box;
+    //border-bottom: 1px solid #ddd;
+    //background-color: var(--emerald-50-hsl)
+
+  p {
+    margin: 0;
+  }
+
+}

assets/docs/scss/style.scss

@@ -40,6 +40,7 @@ $code-block-padding-top: {{ if eq .Site.Params.docs.prism true -}}0{{ else }}1.2
 // Components
 @import "custom/components/buttons";
 @import "custom/components/breadcrumb";
+@import "custom/components/banner";
 @import "custom/components/badge";
 @import "custom/components/backgrounds";
 @import "custom/components/dropdown";
@@ -62,4 +63,4 @@ $code-block-padding-top: {{ if eq .Site.Params.docs.prism true -}}0{{ else }}1.2
 {{ if or (not (isset .Site.Params.flexsearch "enabled")) (eq .Site.Params.flexsearch.enabled true) -}}@import "custom/plugins/flexsearch/flexsearch";{{ end }}
 
 // Feedback Widget
-{{ if .Site.Params.feedback.enabled | default false -}}@import "custom/plugins/feedback/feedback";{{ end}}
+{{ if .Site.Params.feedback.enabled | default false -}}@import "custom/plugins/feedback/feedback";{{ end}}

layouts/docs/baseof.html

@@ -47,6 +47,11 @@
                                         </div>
                                         {{ end -}}
                                         <div class="docs-content col-12 {{ if .IsNode }}{{ else }}{{ if site.Params.docs.toc | default true }}{{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}col-xl-9{{else}}{{end}}{{ else }}{{ end }}{{ end }} mt-0">
+                                            {{ if site.Params.banner | default false }}
+                                            <div class="banner">
+                                            {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "banner.html") . -}}
+                                            </div>
+                                            {{ end }}
                                             <div class="mb-0 d-flex">
                                                 {{ if site.Params.docs.titleIcon | default false }}
                                                 <i class="material-icons title-icon me-2">{{- .Params.icon | default "article" }}</i>

layouts/partials/docs/banner.html

@@ -0,0 +1,5 @@
+<div class="alert alert-info d-flex">
+   <div class="w-100">
+    <p>{{ .Site.Params.BannerText | markdownify }}</p>
+   </div>
+</div>