[chore] Make this look like Google documentation. (#18)

* [chore] Set up for local development.

* [chore] Try to conform to standards.google.

README.md

@@ -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.

_config.yml

@@ -1 +1,3 @@
-theme: jekyll-theme-primer
+---
+markdown: kramdown
+url: https://github.com/googleapis/googleapis.github.io

_includes/toc.html

@@ -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 }}

_layouts/default.html

@@ -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>