Skip to content

Commit

Permalink
[chore] Make this look like Google documentation. (#18)
Browse files Browse the repository at this point in the history 
* [chore] Set up for local development.

* [chore] Try to conform to standards.google.
  • Loading branch information
@lukesneeringer @timburks
lukesneeringer authored and timburks committed Mar 18, 2019
1 parent 7b22d22 commit ca1d449
Show file tree
Hide file tree
Showing 6 changed files with 354 additions and 2 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Google APIs
## Google APIs

The [googleapis](https://github.com/googleapis) organization hosts tools,
technical articles, and issues related to Google API design and practice.
Expand Down
4 changes: 3 additions & 1 deletion _config.yml
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
theme: jekyll-theme-primer
---
markdown: kramdown
url: https://github.com/googleapis/googleapis.github.io
124 changes: 124 additions & 0 deletions _includes/svgs.html
View file

Large diffs are not rendered by default.

79 changes: 79 additions & 0 deletions _includes/toc.html
View file
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 %}{% 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 }}
119 changes: 119 additions & 0 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="{{ site.lang | default: 'en-US' }}" class="glue-flexbox">
<head>
<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="//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Google+Sans:400,500|Product+Sans:400&amp;lang=en" rel="stylesheet"></link>
<link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<script src="//www.gstatic.com/glue/latest/glue-detect.min.js"></script>
{% seo %}
</head>
<body class="h-c-page">
{% include svgs.html %}
<div class="hercules-header h-c-header h-c-header--product-marketing-one-tier">
<div class="h-c-header__bar">
<div class="h-c-header__hamburger h-c-header__hamburger--first-tier">
<div class="h-c-header__hamburger-wrapper">
<button type="button"
data-g-event="home"
data-g-action="mobile: open global nav"
data-g-label="global nav"
class="h-js-header__hamburger-link h-c-header__hamburger-link"
aria-controls="h-js-header__drawer"
aria-expanded="false"
aria-label="Open the navigation drawer">
<svg role="img" class="h-c-header__hamburger-img
h-c-header__hamburger-img--standard">
<use xlink:href="#h-burger"></use>
</svg>

<svg role="img" class="h-c-header__hamburger-img
h-c-header__hamburger-img--reversed">
<use xlink:href="#h-burger"></use>
</svg>
</button>
</div>
</div>

<div class="h-c-header__lockup">
<div class="h-c-header__company-logo">
<a data-g-event="home"
data-g-action="logo"
data-g-label="global nav"
href="/"
class="h-c-header__company-logo-link" title="Google">
<svg role="img" class="h-c-header__company-logo-img
h-c-header__company-logo-img--standard">
<use xlink:href="#h-color-google-logo"></use>
</svg>

<svg role="img" class="h-c-header__company-logo-img
h-c-header__company-logo-img--reversed">
<use xlink:href="#h-white-google-logo"></use>
</svg>
</a>
</div>

<div class="h-c-header__product-logo">
<a data-g-event="home"
data-g-action="logo"
data-g-label="global nav"
href="/"
class="h-c-header__product-logo-link">
<span class="h-c-header__product-logo-text gmp-logo-text">APIs</span>
</a>
</div>
<a href="#jump-content" class="h-c-header__jump-to-content"
data-glue-jump-link="#jump-content" data-cached-tabindex="auto"
tabindex="-1">
<span class="h-c-header__jump-to-content-text">Skip to Content</span>
</a>
</div>

<div class="h-c-header__hamburger h-c-header__hamburger--second-tier">
<div class="h-c-header__hamburger-wrapper">
<button type="button" class="h-js-header__hamburger-link h-c-header__hamburger-link"
aria-controls="h-js-header__drawer" aria-expanded="false"
aria-label="Open the navigation drawer" tabindex="-1">
<svg role="img" class="h-c-header__hamburger-img h-c-header__hamburger-img--standard">
<use xlink:href="#h-burger"></use>
</svg>
<svg role="img" class="h-c-header__hamburger-img h-c-header__hamburger-img--reversed">
<use xlink:href="#h-burger"></use>
</svg>
</button>
</div>
</div>

<nav class="h-c-header__nav">
<ul class="h-c-header__nav-list">
<li class="h-c-header__nav-li" aria-level="1">
<a href="/" class="h-c-header__nav-li-link" tabindex="-1">Home</a>
</li>
<!--
<li class="h-c-header__nav-li" aria-level="1">
<a href="/usage/" class="h-c-header__nav-li-link" tabindex="-1">Usage</a>
</li>
-->
</ul>
</nav>
</div>
</div>

<div class="h-c-grid">
<div class="h-c-grid__col h-c-grid__col--9" role="main" id="jump-content">
{{ content }}
</div>
<div class="h-c-grid__col h-c-grid__col--3" style="margin-top: 40px;">
{% include toc.html html=content %}
</div>
</div>
</div>

<!-- Closing scripts -->
<script src="https://www.gstatic.com/external_hosted/hammerjs/v2_0_2/hammer.min.js"></script>
<script src="//www.gstatic.com/glue/v18_0/glue-vanilla.min.js"></script>
<script src="//www.gstatic.com/glue/v18_0/hercules.min.js"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions assets/css/style.scss
View file

Large diffs are not rendered by default.

0 comments on commit ca1d449

Please sign in to comment.