docs: updating dev server header to match live site (#2424)

brianferry · zeroedin · eyevana · web-flow · commit cfc5913c6391 · 2023-03-17T07:08:35.000+02:00
* feat: adding header to the dev server, adding css and logoUrl

* feat(tools): multiple repo host icons

* chore(tools): add changeset

* fix(tools): use blank string instead of null

* Update tools/pfe-tools/dev-server/demo.css

Co-authored-by: Ivana Rodriguez &lt;55894965+eyevana@users.noreply.github.com&gt;

* Update tools/pfe-tools/dev-server/index.html

Co-authored-by: Ivana Rodriguez &lt;55894965+eyevana@users.noreply.github.com&gt;

* fix: removing repoHost from config, pulling value from sourceControlURLPrefix

---------

Co-authored-by: Steven Spriggs &lt;steven.spriggs@gmail.com&gt;
Co-authored-by: Ivana Rodriguez &lt;55894965+eyevana@users.noreply.github.com&gt;
diff --git a/.changeset/weak-planes-grab.md b/.changeset/weak-planes-grab.md
@@ -0,0 +1,7 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+`pfe-tools`:
+- Updated dev server header styles to match look and feel of 11ty documentation site
+- Added `repoHost` to `PfeConfig` which enables customizing the dev server repository host name and icon
diff --git a/tools/pfe-tools/config.ts b/tools/pfe-tools/config.ts
@@ -34,10 +34,10 @@ export interface PfeConfig {
 
 const SITE_DEFAULTS: Required<SiteOptions> = {
   description: 'PatternFly Elements: A set of community-created web components based on PatternFly design.',
-  favicon: '/brand/logo/svg/pfe-icon-blue.svg',
-  logoUrl: '/brand/logo/svg/pfe-icon-white-shaded.svg',
+  favicon: '/docs/images/logo/pfe-icon-blue.svg',
+  logoUrl: '/docs/images/pfe-logo-inverse-white.svg',
   stylesheets: [],
-  title: 'PatternFly Elements',
+  title: 'PatternFly Elements'
 };
 
 const DEFAULT_CONFIG: PfeConfig = {
diff --git a/tools/pfe-tools/dev-server/demo.css b/tools/pfe-tools/dev-server/demo.css
@@ -30,7 +30,7 @@ html, body {
 body {
   min-height: 100%;
   display: grid;
-  grid-template-rows: var(--pf-demo-header-height, 60px) auto;
+  grid-template-rows: var(--pf-demo-header-height, 4.375rem) auto;
   grid-template-columns: 100vw;
   grid-template-areas:
     'head'
@@ -44,6 +44,64 @@ body.menu-open {
     'menu body';
 }
 
+#main-header {
+  grid-area: head;
+  display: block;
+}
+
+.logo-bar {
+  display: flex;
+  height: var(--pf-demo-header-height, 4.375rem);
+  align-items: center;
+  gap: 1rem;
+  padding-inline-start: var(--pf-c-masthead--PaddingLeft, var(--pf-c-masthead--inset, 24px));
+  padding-inline-end: var(--pf-c-masthead--PaddingRight, var(--pf-c-masthead--inset, 24px));
+  padding-block: 8px;
+  color: white;
+  background: var(--pf-theme--color--accent, #0066cc);
+}
+
+.logo-bar > a {
+  display: flex;
+  align-items: center;
+  color: white;
+  text-decoration: none;
+  font-size: 1.25rem;
+  font-weight: bold;
+  height: 100%;
+}
+
+.logo-bar > a img {
+  height: 100%;
+}
+
+.logo-bar svg {
+  height: 100%;
+}
+
+.logo-bar #hamburger {
+  --pf-c-button--m-plain--Color: #fff;
+  --pf-c-button--m-plain--active--Color: #fff;
+  --pf-c-button--m-plain--focus--Color: #fff;
+  --pf-c-button--m-plain--hover--Color: #fff;
+}
+
+#source-control {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  margin-inline-start: auto;
+}
+
+#source-control:hover {
+  text-decoration: underline;
+}
+
+#source-control svg {
+  height: var(	--pf-global--icon--FontSize--lg, 1.5rem);
+}
+
 #components {
   display: grid;
   padding: 1em;
@@ -77,60 +135,24 @@ body.menu-open {
     grid-template-columns: 100vw 0;
   }
 
+  #source-control span {
+    /* Hide the text on small screens */
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   #sidebar {
     width: 100%;
   }
 }
 
-#main-header {
-  --pf-navigation--Height--actual: 60px;
-  grid-area: head;
-  background: var(--pf-theme--color--surface--accent, #004080);
-  color: white;
-  padding: 1em;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  height: 3.75rem;
-  padding: var(--pf-theme--container-spacer, 16px);
-  color: white;
-  background: var(--pf-theme--color--surface--accent, #004080);
-  z-index: 200;
-}
-
-#main-header a {
-  display: flex;
-  align-items: center;
-  color: white;
-  text-decoration: none;
-  font-size: 1.25rem;
-  font-weight: bold;
-  /* margin-left: calc(1.5rem + 16px); */
-}
-
-#main-header a:visited {
-  color: white;
-  text-decoration: none;
-}
-
-#main-header #hamburger + a {
-  margin-inline-end: auto;
-}
-
-#main-header a img {
-  display: none;
-}
-
-#main-header svg {
-  height: 40px;
-}
-
 #sidebar {
   grid-area: menu;
 }
@@ -141,11 +163,12 @@ body.menu-open {
 
 #nav {
   width: 100%;
-  height: calc(100vh - 3.75rem);
+  height: calc(100vh - var(--pf-demo-header-height, 4.375rem));
   overflow-y: auto;
   color: #151515;
   background: #fff;
   border-right: .0625rem solid #d2d2d2;
+  padding-block-start: 1rem;
 }
 
 #nav ul {
@@ -226,7 +249,7 @@ body.menu-open {
     grid-area: body;
     position: fixed;
     min-width: 50vw;
-    top: 64px;
+    top: var(--pf-demo-header-height, 4.375rem);
     z-index: 2;
   }
 
@@ -575,16 +598,4 @@ footer ul {
     position: relative;
     top: 2rem;
   }
-
-  #main-header a {
-    margin-left: 16px;
-  }
-
-  #main-header a img {
-    display: inline-block;
-    height: 3.75rem;
-    position: relative;
-    left: -1rem;
-    margin-right: -1rem;
-  }
 }
diff --git a/tools/pfe-tools/dev-server/index.html b/tools/pfe-tools/dev-server/index.html
@@ -4,6 +4,18 @@
 {% else %}
   {% set title = options.site.title %}
 {% endif %}
+
+{% if options.sourceControlURLPrefix %}
+  {% if options.sourceControlURLPrefix.toLowerCase().includes('github') %}
+    {% set repoHost = 'GitHub' %}
+  {% elseif options.sourceControlURLPrefix.toLowerCase().includes('bitbucket') %}
+    {% set repoHost = 'BitBucket' %}
+  {% elseif options.sourceControlURLPrefix.toLowerCase().includes('gitlab') %}
+    {% set repoHost = 'GitLab' %}
+  {% else %}
+    {% set repoHost = '' %}
+  {% endif %}
+{% endif %}
 <!DOCTYPE html>
 <html lang="en" dir="ltr" unresolved>
 
@@ -24,28 +36,54 @@
     import 'element-internals-polyfill';
     import '@patternfly/elements/pf-button/pf-button.js';
     import '@patternfly/elements/pf-card/pf-card.js';
+    import '@patternfly/elements/pf-icon/pf-icon.js';
     import '@patternfly/pfe-tools/dev-server/demo.js';
   </script>
 </head>
 
 <body class="menu-open">
   <header id="main-header">
-    <pf-button id="hamburger"
-                plain
-                aria-controls="sidebar"
-                style="--pf-c-button--m-plain--Color:white"
-                label="Expand Main Navigation">
-        <pf-icon icon="bars"></pf-icon>
+    <div class="logo-bar">
+      <pf-button
+        id="hamburger"
+        plain
+        aria-controls="sidebar"
+        label="Expand Main Navigation">
+        <pf-icon icon="bars" size="lg"></pf-icon>
       </pf-button>
-    <a href="/"><img src="{{ options.site.logoUrl }}" alt="">{{ title }}</a>
-    <a id="github-link" href="{{ options.sourceControlURLPrefix.replace('tree/main/', '') }}{{ ('tree/main' + manifest.path.replace(context.cwd, '').replace('/custom-elements.json', '/')) if manifest else ''}}">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-        <title>GitHub</title>
-        <!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
-        <path fill="currentColor"
-          d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-      </svg>
-    </a>
+      <a href="/" aria-label="{{title}} Home">
+        <img src="{{ options.site.logoUrl }}" alt="{{title}}">
+      </a>
+      <a href="{{ options.sourceControlURLPrefix.replace('tree/main/', '') }}{{ ('tree/main' + manifest.path.replace(context.cwd, '').replace('/custom-elements.json', '/')) if manifest else ''}}" id="source-control">
+        
+        {% if options.sourceControlURLPrefix %}<span>Contribute on {{ repoHost }}</span>{% endif %}
+        {% if repoHost === 'GitHub' %}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+          <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+          <title>GitHub</title>
+          <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
+        </svg>
+        {% elseif repoHost === 'GitLab' %}
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <title>GitLab</title>
+            <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path fill="currentColor" d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/>
+          </svg>
+        {% elseif repoHost === 'BitBucket' %}
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <title>BitBucket</title>
+            <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path fill="currentColor" d="M22.2 32A16 16 0 0 0 6 47.8a26.35 26.35 0 0 0 .2 2.8l67.9 412.1a21.77 21.77 0 0 0 21.3 18.2h325.7a16 16 0 0 0 16-13.4L505 50.7a16 16 0 0 0-13.2-18.3 24.58 24.58 0 0 0-2.8-.2L22.2 32zm285.9 297.8h-104l-28.1-147h157.3l-25.2 147z"/>
+          </svg>
+        {% elseif repoHost | trim === '' %}
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <title>Git Repository</title>
+            !--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path fill="currentColor" d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/>
+          </svg>
+        {% endif %}
+      </a>
+    </div>
   </header>
   <aside id="sidebar" aria-expanded="true">
     <nav id="nav" aria-label="Main Navigation">
