Adding a navigational structure based on aip.dev #1253
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| name: Google Best Practices for Java Libraries | ||
| title: Google Best Practices for Java Libraries | ||
| google_analytics: UA-43239122-3 | ||
| github: | ||
| repository_url: https://github.com/GoogleCloudPlatform/cloud-opensource-java |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <!-- Includes to make Glue work, per https://glue-docs.appspot.com/get-started/cdn/ --> | ||
| <script src="//www.gstatic.com/external_hosted/hammerjs/v2_0_2/hammer.min.js"></script> | ||
| <script src="//www.gstatic.com/glue/v22_1/glue-vanilla.min.js"></script> | ||
| <!-- Necessary to make the header bar work on mobile --> | ||
| <script type="text/javascript"> | ||
| const headerElement = document.querySelector('.glue-header'); | ||
| if (headerElement) { | ||
| new window.glue.ui.header.Header(headerElement); | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <!-- prettier-ignore --> | ||
| <footer> | ||
| {% if site.google_analytics %} | ||
| <p>This site uses cookies from Google to deliver its services and to analyze traffic. (<a href='https://policies.google.com/technologies/cookies'>learn more</a>)</p> | ||
| <p><a href='https://policies.google.com/privacy'>Privacy</a></p> | ||
| {% endif %} | ||
| <p>Copyright 2019 Google LLC</p> | ||
| </footer> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <head> | ||
| <title> | ||
| {%- if page.jlbp %}[{{ page.jlbp.id }}]: {% endif %}{{ page.title -}} | ||
| </title> | ||
| <meta charset='UTF-8'> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width,maximum-scale=2"> | ||
| <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Google+Sans:400,500|Product+Sans:400&lang=en" rel="stylesheet"></link> | ||
| <link rel="stylesheet" type="text/css" media="screen" href="https://www.gstatic.com/glue/v22_1/glue.min.css"> | ||
| <link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}"> | ||
| {% for stylesheet in page.css -%} | ||
| <link rel="stylesheet" type="text/css" media="screen" href="{{ stylesheet | relative_url }}?v={{ site.github.build_revision }}"> | ||
| {% endfor -%} | ||
| <link rel="stylesheet" type="text/css" media="print" href="{{ '/assets/css/print.css?v=' | append: site.github.build_revision | relative_url }}"> | ||
| <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> | ||
| <script type="text/javascript" src="https://www.gstatic.com/glue/latest/glue-detect.min.js"></script> | ||
| <script type="text/javascript"> | ||
| $('html').css('visibility', 'hidden'); | ||
| $.when($.ready).then(() => { | ||
| $('html').css('visibility', 'visible'); | ||
| }); | ||
| </script> | ||
| <script type="text/javascript" src="{{ '/assets/js/global.js?v=' | append: site.github.build_revision | relative_url }}"></script> | ||
| {% for js_script in page.js -%} | ||
| <script type="text/javascript" src="{{ js_script | relative_url }}?v={{ site.github.build_revision }}"></script> | ||
| {% endfor -%} | ||
| {% seo %} | ||
| <link rel="shortcut icon" type="image/png" href="favicon.png"> | ||
| {% if site.google_analytics and jekyll.environment == 'production' %} | ||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
| ga('create', '{{ site.google_analytics }}', 'auto'); | ||
| ga('send', 'pageview'); | ||
| </script> | ||
| {% endif %} | ||
| </head> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <!-- prettier-ignore --> | ||
| <header class="glue-header glue-header--single"> | ||
| <div class="glue-header__bar glue-header__bar--desktop glue-header__drawer"> | ||
| <div class="glue-header__tier"> | ||
| <!-- LOCK up--> | ||
| <div class="glue-header__container"> | ||
| <div class="glue-header__lock-up"> | ||
| <div class="glue-header__logo"> | ||
| <a class="glue-header__logo-link" href="{{ '/' | relative_url }}" title="Google"> | ||
| <div class="glue-header__logo-container"> | ||
| <div class="cloud-logo"> | ||
| <img src="/assets/images/Cloud_Logo_Nav.svg" alt="Google Cloud"> | ||
| </div> | ||
| </div> | ||
| <p class="glue-header__logo--product">JLBPs</p> | ||
| </a> | ||
| </div> | ||
| <a href="#page-content" class="glue-header__skip-content"> | ||
|
There was a problem hiding this comment. "Error Interactive elements must be labeled. Learn more" There was a problem hiding this comment. This is taken straight from the Glue sample: https://glue-docs.appspot.com/docs/components/raw/header#HTML There was a problem hiding this comment. I guess I don't trust Glue as much as you do. When Firefox scans aip.dev it finds a number of problems I know are real issues, so I'm inclined to give it the benefit of the doubt on the ones I don't immediately understand. If you like, we can dig into these further, though in general I'm more comfortable building up from small pieces of code I understand than trying to cut out the large pieces I don't. There was a problem hiding this comment. If there are problems with Glue, I think we should get them fixed at the source instead of 1) trying hack fixes on top of Glue or 2) forging our own path. I would argue that fixing problems at the source should not be in the scope of this PR and shouldn't block it, given the value-add nature of the PR. Are you going to set a bar of perfection in order to approve the PR? We are not a front-end team; we are a team trying to help people solve diamond dependency conflicts. I would guess that the accessibility issues on aip.dev that have been fixed on jlbp.dev are likely local choices and not issues with Glue. |
||
| <p class="glue-header__skip-content-text">Jump to Content</p> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <!-- LINK BAR--> | ||
| <div class="glue-header__container glue-header__container--flex-auto"> | ||
| <nav class="glue-header__link-bar"> | ||
| </nav> | ||
| </div> | ||
| <!-- CTA--> | ||
| <div class="glue-header__container glue-header__container--cta"> | ||
| <div class="glue-header__cta"> | ||
| <a href={{ site.github.repository_url }} class="glue-button glue-button--high-emphasis"> | ||
| <img src={{ '/assets/images/github.png' | relative_url }} class="github-logo"> | ||
| View on GitHub | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- Mobile header placeholder --> | ||
| <div class="glue-header__bar glue-header__bar--mobile"> | ||
| <div class="glue-header__tier"> | ||
| <!-- LOCK up--> | ||
| <div class="glue-header__container"> | ||
| <div class="glue-header__lock-up"> | ||
| <div class="glue-header__hamburger glue-header__hamburger--first-tier"> | ||
|
There was a problem hiding this comment. This doesn't seem to show up and it issues an accessibility warning: Can we delete it? There was a problem hiding this comment. This is taken straight from the Glue sample: https://glue-docs.appspot.com/docs/components/raw/header#HTML Also it only appears on mobile mode. Shrink the window down to see it appear. |
||
| <div class="glue-header__hamburger-wrapper"> | ||
| <button type="button" class="glue-header__drawer-toggle-btn" | ||
|
There was a problem hiding this comment. "Warning Focusable elements should have interactive semantics." There was a problem hiding this comment. This is taken straight from the Glue sample: https://glue-docs.appspot.com/docs/components/raw/header#HTML |
||
| aria-controls="drawer" aria-expanded="false" aria-label="Open the navigation drawer"> | ||
| <svg role="img" class="glue-icon glue-icon--24px"><use xlink:href="/assets/images/glue-icons.svg#menu"></use></svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="glue-header__logo"> | ||
| <a class="glue-header__logo-link" href="{{ '/' | relative_url }}" title="Google"> | ||
| <div class="glue-header__logo-container"> | ||
| <img src="/assets/images/Cloud_Logo_Nav.svg" alt="Google Cloud"> | ||
| </div> | ||
| <p class="glue-header__logo--product">JLBPs</p> | ||
| </a> | ||
| </div> | ||
| <!-- SKIP --> | ||
| <a href="#page-content" class="glue-header__skip-content"> | ||
| <p class="glue-header__skip-content-text">Jump to Content</p> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <!-- CTA --> | ||
| <div class="glue-header__container"> | ||
| <div class="glue-header__cta"> | ||
| <a href={{ site.github.repository_url }} class="glue-button glue-button--high-emphasis"> | ||
| <img src={{ '/assets/images/github.png' | relative_url }} class="github-logo"> | ||
| View on GitHub | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="glue-header__drawer-backdrop"></div> | ||
| </header> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <nav id="jlbp-nav" class="docs-component-nav"> | ||
| <ul class="nav-list"> | ||
| <li class="nav-item nav-item-header">Best Practices</li> | ||
| {% for p in site.pages %}{% if p.jlbp -%} | ||
| <li class="nav-item{% if p.url == page.url %} nav-item-active{% endif %}"> | ||
| <a href="{{ p.url | relative_url }}"> | ||
| <span class="jlbp-number">{{ p.jlbp.id }}</span> {{ p.title }} | ||
| </a> | ||
| </li> | ||
| {% endif %}{% endfor -%} | ||
| <li class="nav-item nav-item-header">Concepts</li> | ||
| {% for p in site.pages %}{% if p.concepts -%} | ||
| <li class="nav-item{% if p.url == page.url %} nav-item-active{% endif %}"> | ||
| <a href="{{ p.url | relative_url }}"> | ||
| {{ p.title }} | ||
| </a> | ||
| </li> | ||
| {% endif %}{% endfor -%} | ||
| <li class="nav-item nav-item-header">Reference</li> | ||
| <li class="nav-item{% if page.url == '/glossary' %} nav-item-active{% endif %}"> | ||
| <a href="/glossary">Glossary</a> | ||
| </li> | ||
| </ul> | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| {% comment %} | ||
| Taken from https://github.com/allejo/jekyll-toc | ||
| Original file is Copyright © 2017, Vladimir Jimenez | ||
| (Dual-licensed BSD / MIT) | ||
| {% endcomment %} | ||
| {% capture tocWorkspace %} | ||
| {% comment %} | ||
| Version 1.0.6 | ||
| https://github.com/allejo/jekyll-toc | ||
|
|
||
| "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe | ||
|
|
||
| Usage: | ||
| {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %} | ||
|
|
||
| Parameters: | ||
| * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll | ||
|
|
||
| Optional Parameters: | ||
| * sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC | ||
| * class (string) : '' - a CSS class assigned to the TOC | ||
| * id (string) : '' - an ID to assigned to the TOC | ||
| * h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored | ||
| * h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored | ||
| * ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list | ||
| * item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level | ||
| * baseurl (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content | ||
| * anchor_class (string) : '' - add custom class(es) for each anchor element | ||
|
|
||
| Output: | ||
| An ordered or unordered list representing the table of contents of a markdown block. This snippet will only | ||
| generate the table of contents and will NOT output the markdown given to it | ||
| {% endcomment %} | ||
|
|
||
| {% capture my_toc %}- {:.toc-header} Contents{% endcapture %} | ||
| {% assign orderedList = include.ordered | default: false %} | ||
| {% assign minHeader = include.h_min | default: 1 %} | ||
| {% assign maxHeader = include.h_max | default: 6 %} | ||
| {% assign nodes = include.html | split: '<h' %} | ||
| {% assign firstHeader = true %} | ||
| {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %} | ||
| {% for node in nodes %} | ||
| {% if node == "" %} | ||
| {% continue %} | ||
| {% endif %} | ||
| {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %} | ||
| {% if headerLevel < minHeader or headerLevel > maxHeader %} | ||
| {% continue %} | ||
| {% endif %} | ||
| {% if firstHeader %} | ||
| {% assign firstHeader = false %} | ||
| {% assign minHeader = headerLevel %} | ||
| {% endif %} | ||
| {% assign indentAmount = headerLevel | minus: minHeader | add: 1 %} | ||
| {% assign _workspace = node | split: '</h' %} | ||
| {% assign _idWorkspace = _workspace[0] | split: 'id="' %} | ||
| {% assign _idWorkspace = _idWorkspace[1] | split: '"' %} | ||
| {% assign html_id = _idWorkspace[0] %} | ||
| {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %} | ||
| {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} | ||
| {% assign space = '' %} | ||
| {% for i in (1..indentAmount) %} | ||
| {% assign space = space | prepend: ' ' %} | ||
| {% endfor %} | ||
| {% unless include.item_class == blank %} | ||
| {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %} | ||
| {% endunless %} | ||
| {% capture my_toc %}{{ my_toc }} | ||
| {{ space }}{{ listModifier }} {{ listItemClass }} [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %} | ||
| {% endfor %} | ||
| {% if include.class %} | ||
| {% capture my_toc %}{:.{{ include.class }}} | ||
| {{ my_toc | lstrip }}{% endcapture %} | ||
| {% endif %} | ||
| {% if include.id %} | ||
| {% capture my_toc %}{: #{{ include.id }}} | ||
| {{ my_toc | lstrip }}{% endcapture %} | ||
| {% endif %} | ||
| {% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-US" class="glue-flexbox"> | ||
| {% include jlbp-head-tag.html %} | ||
| <!-- prettier-ignore --> | ||
| <body> | ||
| {% include jlbp-header.html %} | ||
| <div class="glue-page"> | ||
| {% if page.bare %} | ||
| {{ content }} | ||
| {% else %} | ||
| {% include jlbp-nav.html %} | ||
| <main role="main" id="page-content"> | ||
| <section id="jump-content"> | ||
|
There was a problem hiding this comment. I need to run the site again, but it looks like there's more navigation inside main, e..g jump-content? Maybe that's the rightand sidebar? Main is for the content only. This is important for accessibility and rendering on non-desktop screens. |
||
| <aside id="jlbp-sidebar" class="docs-component-sidebar"> | ||
| <section id="jlbp-toc" class="docs-component-sidebar-toc"> | ||
| {% include toc.html html=content h_min=2 h_max=3 %} | ||
| </section> | ||
| <section class="docs-component-sidebar-actions"> | ||
| <ul> | ||
| <li><a href="{{ site.github.repository_url }}/issues/">File Bug</a></li> | ||
| <li><a href="{{ site.github.repository_url }}/blob/master/docs/{{ page.path }}">View source</a></li> | ||
| <li><a href="{{ site.github.repository_url }}/edit/master/docs/{{ page.path }}">Edit this page</a></li> | ||
| </ul> | ||
| </section> | ||
| </aside> | ||
| <section id="jlbp-main" class="docs-component-main"> | ||
| <!-- For some unknown reason, the page content ends up covered by | ||
| the header if the following element is not present. --> | ||
| <li class="glue-breadcrumbs__item"></li> | ||
| {% if page.jlbp %} | ||
| <h4 class="jlbp-number">[{{ page.jlbp.id }}]</h4> | ||
| {% endif %} | ||
| {{ content }} | ||
| {% include jlbp-footer.html %} | ||
| </section> | ||
| </section> | ||
| </main> | ||
| {% endif %} | ||
| </div> | ||
| {% include jlbp-closing-scripts.html %} | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
learn --> Learn
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok