-
+ {% include jlbp-header.html %}
+
+ {% if page.bare %}
+ {{ content }}
+ {% else %}
+
+ {% include jlbp-nav.html %}
+ {% include jlbp-sidebar.html %}
+
+ {% if page.jlbp %}
+ [{{ page.jlbp.id }}]
+ {% endif %}
+ {{ content }}
+ {% include jlbp-footer.html %}
+
+
+ {% endif %}
- {% if page.jlbp %}
-
[{{ page.jlbp.id }}]
- {% endif %}
- {{ content }}
-
-
-
-
+ {% include jlbp-closing-scripts.html %}
diff --git a/docs/_sass/colors.scss b/docs/_sass/colors.scss
new file mode 100644
index 0000000000..62bc3aa0e2
--- /dev/null
+++ b/docs/_sass/colors.scss
@@ -0,0 +1,144 @@
+// Please don't edit this file since it would create a maintenance
+// burden for people trying to keep it up to date with Glue.
+// This is forked from an internal file that is used to generate Glue.
+// These variables don't appear in the generated Glue css, which is why
+// this copy is needed.
+// Maintainers: The authoritative file can be found at go/bs_glue_colors_scss
+$glue-greys: (
+ 0: #fff,
+ 25: #f1f1f1,
+ 50: #f8f9fa,
+ 100: #f1f3f4,
+ 200: #e8eaed,
+ 300: #dadce0,
+ 400: #bdc1c6,
+ 500: #9aa0a6,
+ 600: #80868b,
+ 700: #5f6368,
+ 800: #3c4043,
+ 900: #202124
+);
+$glue-blues: (
+ 50: #e8f0fe,
+ 100: #d2e3fc,
+ 200: #aecbfa,
+ 300: #8ab4f8,
+ 400: #669df6,
+ 500: #4285f4,
+ 600: #1a73e8,
+ 700: #1967d2,
+ 800: #185abc,
+ 900: #174ea6
+);
+$glue-greens: (
+ 50: #e6f4ea,
+ 100: #ceead6,
+ 200: #a8dab5,
+ 300: #81c995,
+ 400: #5bb974,
+ 500: #34a853,
+ 600: #1e8e3e,
+ 700: #188038,
+ 800: #137333,
+ 900: #0d652d
+);
+$glue-reds: (
+ 50: #fce8e6,
+ 100: #fad2cf,
+ 200: #f6aea9,
+ 300: #f28b82,
+ 400: #ee675c,
+ 500: #ea4335,
+ 600: #d93025,
+ 700: #c5221f,
+ 800: #b31412,
+ 900: #a50e0e
+);
+$glue-yellows: (
+ 50: #fef7e0,
+ 100: #feefc3,
+ 200: #fde293,
+ 300: #fdd663,
+ 400: #fcc934,
+ 500: #fbbc04,
+ 600: #f9ab00,
+ 700: #f29900,
+ 800: #ea8600,
+ 900: #e37400
+);
+$glue-purples: (
+ 900: #681da8,
+);
+// mws color spec 2.0
+$glue-grey-0: map-get($glue-greys, 0);
+$glue-grey-25: map-get($glue-greys, 25);
+$glue-grey-50: map-get($glue-greys, 50);
+$glue-grey-100: map-get($glue-greys, 100);
+$glue-grey-200: map-get($glue-greys, 200);
+$glue-grey-300: map-get($glue-greys, 300);
+$glue-grey-400: map-get($glue-greys, 400);
+$glue-grey-500: map-get($glue-greys, 500);
+$glue-grey-600: map-get($glue-greys, 600);
+$glue-grey-700: map-get($glue-greys, 700);
+$glue-grey-800: map-get($glue-greys, 800);
+$glue-grey-900: map-get($glue-greys, 900);
+$glue-blue-50: map-get($glue-blues, 50);
+$glue-blue-100: map-get($glue-blues, 100);
+$glue-blue-200: map-get($glue-blues, 200);
+$glue-blue-300: map-get($glue-blues, 300);
+$glue-blue-400: map-get($glue-blues, 400);
+$glue-blue-500: map-get($glue-blues, 500);
+$glue-blue-600: map-get($glue-blues, 600);
+$glue-blue-700: map-get($glue-blues, 700);
+$glue-blue-800: map-get($glue-blues, 800);
+$glue-blue-900: map-get($glue-blues, 900);
+$glue-green-50: map-get($glue-greens, 50);
+$glue-green-100: map-get($glue-greens, 100);
+$glue-green-200: map-get($glue-greens, 200);
+$glue-green-300: map-get($glue-greens, 300);
+$glue-green-400: map-get($glue-greens, 400);
+$glue-green-500: map-get($glue-greens, 500);
+$glue-green-600: map-get($glue-greens, 600);
+$glue-green-700: map-get($glue-greens, 700);
+$glue-green-800: map-get($glue-greens, 800);
+$glue-green-900: map-get($glue-greens, 900);
+$glue-red-50: map-get($glue-reds, 50);
+$glue-red-100: map-get($glue-reds, 100);
+$glue-red-200: map-get($glue-reds, 200);
+$glue-red-300: map-get($glue-reds, 300);
+$glue-red-400: map-get($glue-reds, 400);;
+$glue-red-500: map-get($glue-reds, 500);
+$glue-red-600: map-get($glue-reds, 600);
+$glue-red-700: map-get($glue-reds, 700);
+$glue-red-800: map-get($glue-reds, 800);
+$glue-red-900: map-get($glue-reds, 900);;
+$glue-yellow-50: map-get($glue-yellows, 50);
+$glue-yellow-100: map-get($glue-yellows, 100);
+$glue-yellow-200: map-get($glue-yellows, 200);
+$glue-yellow-300: map-get($glue-yellows, 300);
+$glue-yellow-400: map-get($glue-yellows, 400);
+$glue-yellow-500: map-get($glue-yellows, 500);
+$glue-yellow-600: map-get($glue-yellows, 600);
+$glue-yellow-700: map-get($glue-yellows, 700);
+$glue-yellow-800: map-get($glue-yellows, 800);
+$glue-yellow-900: map-get($glue-yellows, 900);
+// extended color palette
+$glue-purple-900: map-get($glue-purples, 900);
+$glue-color-name-to-palette: (
+ 'grey': $glue-greys,
+ 'blue': $glue-blues,
+ 'green': $glue-greens,
+ 'red': $glue-reds,
+ 'yellow': $glue-yellows,
+ 'purple': $glue-purples
+);
+// Generic color variables - common colors for components.
+$glue-color-primary-black: $glue-grey-900 !default;
+$glue-color-border: $glue-grey-300 !default;
+$glue-color-focus-background: $glue-grey-100 !default;
+$glue-color-link-resting: $glue-blue-600 !default;
+$glue-color-link-active: $glue-blue-900 !default;
+$glue-color-link-visited: $glue-purple-900 !default;
+$glue-color-focus-background-rgba: rgba($glue-grey-900, .06) !default;
+$glue-white: $glue-grey-0 !default;
+$glue-black: #000 !default;
diff --git a/docs/_sass/footer.scss b/docs/_sass/footer.scss
new file mode 100644
index 0000000000..689448399d
--- /dev/null
+++ b/docs/_sass/footer.scss
@@ -0,0 +1,10 @@
+@import 'colors';
+
+footer {
+ border-top: 1px solid $glue-grey-300;
+ font-size: 13px;
+ font-style: italic;
+ margin-bottom: 10px;
+ margin-top: 25px;
+ padding-top: 10px;
+}
diff --git a/docs/_sass/jlbp-dev.scss b/docs/_sass/jlbp-dev.scss
new file mode 100644
index 0000000000..4d9656ba11
--- /dev/null
+++ b/docs/_sass/jlbp-dev.scss
@@ -0,0 +1,258 @@
+@import 'colors';
+
+@media (max-width: 1200px) {
+ .glue-header .h-c-header__bar .h-c-header__hamburger:first-child {
+ display: table !important;
+ }
+}
+
+body .glue-header.glue-header--single .glue-header__bar {
+ box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
+ 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+
+ @media (min-width: 1024px) {
+ transform: none !important;
+ }
+
+ @media (max-width: 599px) {
+ &.glue-header__bar--mobile {
+ height: 64px;
+ min-height: 64px;
+ }
+ }
+}
+
+nav.docs-component-nav {
+ display: none;
+}
+
+@media (min-width: 1200px) {
+ .docs-component-main {
+ padding-left: 320px;
+ }
+
+ nav.docs-component-nav {
+ background-color: $glue-grey-50;
+ display: block;
+ float: left;
+ margin-right: 40px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ padding: 16px 12px;
+ position: fixed;
+ width: 280px;
+
+ &::-webkit-scrollbar {
+ height: 4px;
+ width: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.25);
+ }
+
+ ul.nav-list {
+ margin-left: 0px;
+ margin-bottom: 0px;
+
+ li.nav-item {
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 16px;
+ list-style: none;
+ margin-top: 8px;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ text-overflow: ellipsis;
+
+ &:first-child {
+ margin-top: 0px;
+ }
+
+ a {
+ color: $glue-grey-900;
+ text-decoration: none;
+
+ &:hover {
+ color: $glue-blue-600;
+ }
+ }
+
+ svg {
+ color: $glue-grey-500;
+ height: 1.25em;
+ vertical-align: middle;
+ width: 1.25em;
+ }
+
+ &.nav-item-active a {
+ color: $glue-blue-700;
+ }
+
+ &.nav-item-header {
+ color: $glue-grey-700;
+ font-size: 14px;
+ font-weight: 500;
+
+ &:not(:first-child) {
+ border-top: 1px solid #cfd8dc;
+ margin: 15px -16px 0px -16px;
+ padding: 15px 16px 0px 16px;
+ }
+ }
+ }
+ }
+ }
+}
+
+#jlbp-nav {
+ top: 80px;
+
+ .nav-item {
+ span.jlbp-number {
+ display: inline-block;
+ min-width: 26px;
+ text-align: right;
+
+ &:before {
+ content: '[';
+ }
+ &:after {
+ content: '] ';
+ }
+ }
+ }
+}
+
+// TOC Sidebar
+.docs-component-sidebar {
+ display: none;
+}
+
+@media (min-width: 1024px) {
+ .docs-component-main {
+ padding-right: 250px;
+ }
+
+ .docs-component-sidebar {
+ -webkit-position: sticky;
+ display: block;
+ float: right;
+ position: sticky;
+ right: 20px;
+ top: 80px;
+ width: 230px;
+
+ .docs-component-sidebar-toc > ul {
+ border-left: 3px solid $glue-blue-700;
+ padding-left: 20px;
+
+ li.toc-header {
+ font-weight: 700;
+ text-transform: uppercase;
+
+ &:only-child {
+ display: none;
+ }
+ }
+
+ li {
+ font-size: 14px;
+ list-style: none;
+ margin-top: 12px;
+
+ a {
+ color: $glue-grey-900;
+ font-weight: 300;
+ text-decoration: none;
+ }
+ }
+ }
+
+ .docs-component-sidebar-actions > ul li {
+ font-weight: 700;
+ font-size: 16px;
+ list-style: none;
+ margin-top: 12px;
+ text-transform: uppercase;
+
+ a,
+ a:visited {
+ color: $glue-blue-700;
+ text-decoration: none;
+ }
+
+ a:hover,
+ a:active,
+ a:focus {
+ color: $glue-blue-500;
+ }
+ }
+ }
+}
+
+code {
+ font-size: 90% !important;
+}
+
+.docs-component-main {
+ blockquote {
+ border-left: 4px solid $glue-grey-500;
+ margin: 20px;
+ padding-left: 20px;
+ }
+
+ code {
+ font-size: 0.9em;
+ }
+
+ pre {
+ font-size: 14px;
+ margin: 20px;
+ padding: 9px 14px;
+
+ code {
+ color: $glue-grey-900;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4 {
+ // This creates a "fake block" above the header that does not show up
+ // anywhere but tricks the browser into thinking that the anchor is 80px
+ // higher than it actually is.
+ &::before {
+ display: block;
+ content: ' ';
+ height: 80px;
+ margin-top: -80px;
+ pointer-events: none;
+ visibility: hidden;
+ }
+ }
+ h4 {
+ &.jlbp-number {
+ line-height: 1em;
+
+ & + h1 {
+ margin-top: 0px;
+ margin-left: -2px;
+ }
+ }
+ }
+
+ ul {
+ margin-top: 20px;
+ padding-left: 20px;
+
+ > li > ul {
+ margin-top: 0px;
+ }
+ }
+}
+
+div#page-content {
+ margin-top: 16px;
+}
diff --git a/docs/_sass/syntax.scss b/docs/_sass/syntax.scss
new file mode 100644
index 0000000000..fa71d23dac
--- /dev/null
+++ b/docs/_sass/syntax.scss
@@ -0,0 +1,224 @@
+@import 'colors';
+
+// Highlighting for code blocks (generated using triple backticks in markdown)
+
+.highlighter-rouge {
+ background: transparent;
+ color: inherit;
+ padding: 0px;
+}
+
+.highlight {
+ .hll {
+ background-color: #ffffcc;
+ }
+
+ // --------------------------------------------
+ // Common things (comments, keywords, literals)
+ // --------------------------------------------
+
+ // Built-in: Pseudo (.bp)
+ .bp {
+ color: #03a9f4;
+ }
+
+ // Comment (.c)
+ // Single-line comment (.c1)
+ // Multi-line comment (.cm)
+ .c,
+ .c1,
+ .cm {
+ color: $glue-green-700;
+ font-style: italic;
+ }
+
+ // Keyword (.k)
+ // Keyword: Constant (.kc)
+ // Keyword: Declaration (.kd)
+ // Keyword: Namespace (.kn)
+ // Keyword: Pseudo (.kp)
+ // Keyword: Reserved (.kr)
+ .k,
+ .kc,
+ .kd,
+ .kn,
+ .kp,
+ .kr {
+ color: $glue-blue-900;
+ font-weight: bold;
+ }
+
+ // Keyword: Type (.kt)
+ .kt {
+ color: #ef6c00;
+ }
+
+ // Name: Attribute
+ .na {
+ color: #ad1457;
+ }
+
+ // Name: Built-in (.nb)
+ .nb {
+ @extend .kt;
+ }
+
+ // Name: Class (.nc)
+ .nc {
+ color: #fb8c00;
+ }
+
+ // Name: Key (.nk)
+ .nk {
+ color: #6a1b9a;
+ }
+
+ // Literal: Number (.m)
+ // Literal: Float (.mf)
+ // Literal: Hex (.mh)
+ // Literal: Integer (.mi)
+ // Literal: Octal (.mo)
+ // Literal: Long (.il)
+ .m,
+ .mf,
+ .mh,
+ .mi,
+ .mo,
+ .il {
+ color: #03a9f4;
+ }
+
+ // String (.s)
+ // Backtick string (.sb)
+ // Docstring (.sd)
+ // Double-quoted string (.s2)
+ // Heredoc (.sh)
+ // Single-quoted string (.s1)
+ // String interpolation (.si)
+ // String: Other (.sx)
+ .s,
+ .sb,
+ .sd,
+ .sh,
+ .si,
+ .sx,
+ .s1,
+ .s2 {
+ color: $glue-blue-500;
+ }
+
+ // Operator: Symbol
+ .o {
+ font-weight: bold;
+ }
+
+ // Operator: Word
+ .ow {
+ @extend .k;
+ }
+
+ // --------
+ // Generics
+ // --------
+
+ // Generic: Deleted
+ .gd {
+ color: black;
+ background-color: $glue-red-50;
+ }
+
+ // Generic: Emphasis
+ .ge {
+ font-style: italic;
+ }
+
+ // Generic: Error (.gr)
+ // Generic: Traceback (.gt)
+ .gr,
+ .gt {
+ color: $glue-red-900;
+ }
+
+ // Generic: Heading
+ .gh {
+ color: $glue-grey-500;
+ }
+
+ // Generic: Inserted
+ .gi {
+ color: black;
+ background-color: $glue-green-50;
+ }
+
+ // Generic: Output
+ .go {
+ color: $glue-grey-600;
+ }
+
+ // Generic: Prompt
+ .gp {
+ color: $glue-grey-800;
+ }
+
+ // Generic: Strong
+ .gs {
+ font-weight: bold;
+ }
+
+ // Generic: Subheading
+ .gu {
+ color: $glue-grey-400;
+ }
+
+ // ---------------
+ // Uncommon things
+ // ---------------
+
+ // Preprocessor comment
+ .cp {
+ color: #008080;
+ }
+
+ // Special comment
+ .cs {
+ @extend .c;
+ font-style: normal;
+ font-weight: bold;
+ }
+
+ // Error
+ .err {
+ color: $glue-red-700;
+ background-color: $glue-red-100;
+ }
+
+ // Name: Tag
+ .nt {
+ @extend .k;
+ }
+
+ // Text: Whitespace
+ .w {
+ color: $glue-grey-400;
+ }
+
+ // Literal: Char
+ .sc {
+ @extend .m;
+ }
+
+ // String: Escape sequence
+ .se {
+ color: #03a9f4;
+ }
+
+ // String: Regex
+ .sr {
+ color: $glue-blue-600;
+ }
+
+ // Literal: Symbol
+ .ss {
+ @extend .m;
+ }
+}
diff --git a/docs/assets/css/print.scss b/docs/assets/css/print.scss
new file mode 100644
index 0000000000..99330ea4a9
--- /dev/null
+++ b/docs/assets/css/print.scss
@@ -0,0 +1,72 @@
+---
+permalink: /assets/css/print.css
+---
+
+@import 'colors.scss';
+@import 'footer.scss';
+
+.jlbp-breadcrumbs,
+#jlbp-nav,
+#jlbp-sidebar,
+.glue-header,
+.glue-page svg:first-child,
+.no-print {
+ display: none;
+}
+
+h1,
+h2,
+h3,
+h4 {
+ font-family: 'Google Sans', 'Roboto', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ margin: 0.5em 0em 0em 0em;
+ padding: 0px;
+}
+
+h1 {
+ font-size: 2.5em;
+}
+
+h4 + h1 {
+ margin-top: 0in;
+}
+
+html {
+ font-family: sans-serif;
+}
+
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+body {
+ font-family: 'Roboto', Arial, Helvetica, sans-serif;
+ font-size: 1em;
+ font-style: normal;
+ font-weight: 300;
+ line-height: 1.444;
+}
+
+code {
+ font-family: 'Consolas', 'Monaco', 'Roboto Mono', 'Bitstream Vera Sans Mono',
+ 'Courier New', Courier, monospace;
+ font-weight: 300;
+}
+
+div.highlighter-rouge {
+ background: $glue-grey-100;
+ border: 1px solid $glue-grey-300;
+ margin-left: 0.5in;
+ margin-right: 0.5in;
+ padding-left: 0.2in;
+ padding-right: 0.2in;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
deleted file mode 100644
index bde06b231d..0000000000
--- a/docs/assets/css/style.css
+++ /dev/null
@@ -1,38 +0,0 @@
-body {
- font-family: Roboto, sans-serif;
- line-height: 1.15;
- font-size: 16;
-}
-
-h1 {
- font-family: Roboto, sans-serif;
- font-weight: light;
- font-size: 96;
- margin-bottom: 1ex;
-}
-
-div.cloud-logo {
- height: 22px;
- margin-top: 20px;
- margin-bottom: 10px;
-}
-
-p, li {
- width: 40em;
- max-width: 90%;
-}
-
-footer p {
- margin: 0.15ex;
-}
-
-li {
- margin-top: 0.5ex;
- margin-bottom: 0.5ex;
-}
-
-@media only screen and (min-device-width : 1024px) {
- body {
- margin-left: 8em;
- }
-}
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
new file mode 100644
index 0000000000..76cb3d783e
--- /dev/null
+++ b/docs/assets/css/style.scss
@@ -0,0 +1,7 @@
+---
+---
+
+@import 'jlbp-dev';
+@import 'colors';
+@import 'syntax';
+@import 'footer';
diff --git a/docs/assets/images/github.png b/docs/assets/images/github.png
new file mode 100644
index 0000000000..192846a120
Binary files /dev/null and b/docs/assets/images/github.png differ
diff --git a/docs/assets/images/glue-icons.svg b/docs/assets/images/glue-icons.svg
new file mode 100644
index 0000000000..c6400ba2f3
--- /dev/null
+++ b/docs/assets/images/glue-icons.svg
@@ -0,0 +1,42 @@
+
diff --git a/docs/assets/js/global.js b/docs/assets/js/global.js
new file mode 100644
index 0000000000..e460ac678d
--- /dev/null
+++ b/docs/assets/js/global.js
@@ -0,0 +1,36 @@
+// Copyright 2019 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// This file contains JavaScript-applied rules that can be applied
+// to documentation sites using this Jekyll theme generally.
+$.when($.ready).then(() => {
+ // Control the maximum height of the nav sidebar.
+ $(window)
+ .on('resize', () => {
+ $('nav.docs-component-nav').css({
+ maxHeight: `${$(window).height() - 110}px`,
+ });
+ })
+ .resize();
+
+ $('h1').addClass('glue-headline').addClass('glue-has-top-margin');
+ $('h2').addClass('glue-headline').addClass('glue-has-top-margin');
+ $('h3').addClass('glue-headline').addClass('glue-has-top-margin');
+ $('h4').addClass('glue-headline').addClass('glue-has-top-margin');
+
+ $('h1').addClass('glue-headline--headline-2').addClass('glue-has-bottom-margin');
+ $('h2').addClass('glue-headline--headline-3').addClass('glue-has-bottom-margin');
+ $('h3').addClass('glue-headline--headline-4').addClass('glue-has-bottom-margin');
+ $('h4').addClass('glue-headline--headline-5');
+});