Update: Add banner (eslint#735)

savidgepower · Jun 6, 2020 · 645036d · 645036d
1 parent a2d66e0
commit 645036d
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 6 deletions.
diff --git a/_data/site.js b/_data/site.js
@@ -17,6 +17,11 @@ function calculateUrl() {
 module.exports = {
     title: "ESLint - Pluggable JavaScript linter",
     description: "A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.",
+    banner: {
+        text: null,
+        foregroundColor: "#ffffff",
+        backgroundColor: "#000000"
+    },
     url: calculateUrl(),
     links: {
         chat: "/chat",

diff --git a/_includes/menu.liquid b/_includes/menu.liquid
@@ -1,5 +1,10 @@
 <input type="checkbox" id="eslint-toggle-search" class="eslint-toggle-search-checkbox" />
 <header class="navbar navbar-default navbar-demo navbar-fixed-top eslint-nav" id="top" role="banner">
+  {% if site.banner.text %}
+    <div class="eslint-banner" style="color: {{ site.banner.foregroundColor }}; background-color: {{ site.banner.backgroundColor }}">
+      <p>{{ site.banner.text }}</p>
+    </div>
+  {% endif %}
   <div class="container">
     <a href="/" class="navbar-brand"><img alt="ESLint" src="/assets/img/logo.svg" itemprop="image">ESLint</a>
     <div class="eslint-navbar-toggles">

diff --git a/_layouts/default.liquid b/_layouts/default.liquid
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
 {% include head %}
-<body>
+{% if site.banner.text %}
+  <body class="banner-displayed">
+{% else %}
+  <body>
+{% endif %}
     <div itemscope itemtype="http://schema.org/SoftwareApplication">
     {% include menu %}
         {% include jumbotron %}

diff --git a/_layouts/demo.liquid b/_layouts/demo.liquid
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
 {% include head %}
-<body>
+{% if site.banner.text %}
+  <body class="banner-displayed">
+{% else %}
+  <body>
+{% endif %}
     {% include menu %}
     <main class="container">
         {{ content }}

diff --git a/_layouts/doc.liquid b/_layouts/doc.liquid
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
 {% include head %}
-<body>
+{% if site.banner.text %}
+  <body class="banner-displayed">
+{% else %}
+  <body>
+{% endif %}
   {% include menu %}
   <main class="doc">
     <article class="container">

diff --git a/_layouts/post.liquid b/_layouts/post.liquid
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
 {% include head %}
-<body>
+{% if site.banner.text %}
+  <body class="banner-displayed">
+{% else %}
+  <body>
+{% endif %}
   {% include menu %}
   <div class="container">
     <div class="row">

diff --git a/_layouts/rule.liquid b/_layouts/rule.liquid
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
 {% include head %}
-<body>
+{% if site.banner.text %}
+  <body class="banner-displayed">
+{% else %}
+  <body>
+{% endif %}
   {% include menu %}
   <main class="rule doc">
     <article class="container">

diff --git a/_layouts/rules.liquid b/_layouts/rules.liquid
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
 {% include head %}
-<body>
+{% if site.banner.text %}
+  <body class="banner-displayed">
+{% else %}
+  <body>
+{% endif %}
   {% include menu %}
   <main class="rules doc">
     <article class="container">

diff --git a/src/styles/lib/banner.less b/src/styles/lib/banner.less
@@ -0,0 +1,21 @@
+body.banner-displayed {
+  padding-top: 160px;
+}
+
+.eslint-banner {
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+  margin: 0 auto;
+  background-color: #000000;
+  color: #ffffff;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
diff --git a/src/styles/lib/overrides.less b/src/styles/lib/overrides.less
@@ -33,6 +33,7 @@
 body {
   padding-top: 80px;
 }
+
 /* Allow anchors to not be hidden by the fixed header */
 :target:before {
   content: "";

diff --git a/src/styles/main.less b/src/styles/main.less
@@ -6,3 +6,4 @@
 @import "lib/syntax_highlighting.less";
 @import "lib/rules_index.less";
 @import "lib/404.less";
+@import "lib/banner.less";