Prepare 0.2.3 release

Update drawer.html // Styling version number

CHANGELOG

@@ -1,3 +1,24 @@
+mkdocs-material-0.2.3 (2016-05-16)
+
+  * Fixed #25: Highlight inline fenced blocks
+  * Fixed #26: Better highlighting for keystrokes
+  * Fixed #30: Suboptimal syntax highlighting for PHP
+
+mkdocs-material-0.2.2 (2016-03-20)
+
+  * Fixed #15: Document pygments dependency for codehilite
+  * Fixed #16: Favicon could not be set through mkdocs.yml
+  * Fixed #17: Put version into own container for styling
+  * Fixed #20: Fix rounded borders for tables
+
+mkdocs-material-0.2.1 (2016-03-12)
+
+  * Fixed #10: Invisible header after closing search bar with ESC key
+  * Fixed #13: Table cells don't wrap
+  * Fixed empty list in table of contents when no headline is defined
+  * Corrected wrong path for static asset monitoring in Gulpfile.js
+  * Set up tracking of site search for Google Analytics
+
 mkdocs-material-0.2.0 (2016-02-24)
 
   * Fixed #6: Include multiple color palettes via mkdocs.yml

Gulpfile.js

@@ -254,7 +254,7 @@ gulp.task('assets:watch', function() {
 
   /* Copy static assets */
   gulp.watch([
-    'assets/assets/{fonts,images}/*'
+    'src/assets/{fonts,images}/*'
   ], ['assets:static']);
 
   /* Minify views */

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "A material design theme for MkDocs",
   "homepage": "http://squidfunk.github.io/mkdocs-material/",
   "authors": [

docs/getting-started.md

@@ -179,6 +179,19 @@ extra:
     twitter: 'my-twitter-handle'
 ```
 
+### Google Analytics integration
+
+Material makes it easy to integrate site tracking with Google Analytics.
+Besides basic tracking, clicks on all outgoing links can be tracked, clicks on
+the download and star button, as well as how site search is used. Tracking can
+be activated in your project's `mkdocs.yml`:
+
+``` yaml
+google_analytics:
+  - 'UA-XXXXXXXX-X'
+  - 'auto'
+```
+
 ### More advanced customization
 
 If you want to change the general appearance of the Material theme, see
@@ -192,8 +205,9 @@ have to switch them on explicitly.
 
 ### CodeHilite (recommended)
 
-This extensions adds code highlighting to fenced code blocks. It might not be
-the best code highlighter, but it works without JavaScript and on the server:
+This extensions uses [Pygments][] (install with `pip install pygments`) to add
+code highlighting to fenced code blocks. It might not be the best code
+highlighter, but it works without JavaScript and on the server:
 
 ``` yaml
 markdown_extensions:
@@ -207,12 +221,12 @@ further instructions
 ### Permalinks
 
 In order to add [permalinks][] to the headers of your article, set the
-`markdown_extensions.toc.permalink` variable to a symbol, e.g. `¶`:
+`markdown_extensions.toc.permalink` variable to a symbol, e.g. `#`:
 
 ``` yaml
 markdown_extensions:
   - toc:
-    permalink: '¶'
+    permalink: '#'
 ```
 
 The symbol can be chosen freely, it can even be a WebFont icon.
@@ -294,12 +308,17 @@ extra:
     github: 'my-github-handle'
     twitter: 'my-twitter-handle'
 
+# Google Analytics
+google_analytics:
+  - 'UA-XXXXXXXX-X'
+  - 'auto'
+
 # Extensions
 markdown_extensions:
   - codehilite(css_class=code)
   - admonition
   - toc:
-      permalink: '¶'
+      permalink: '#'
 ```
 
 [MkDocs]: http://www.mkdocs.org
@@ -308,6 +327,7 @@ markdown_extensions:
 [Google Fonts]: https://www.google.com/fonts
 [Roboto font]: https://www.google.com/fonts/specimen/Roboto
 [Markdown extensions]: http://www.mkdocs.org/user-guide/writing-your-docs/#markdown-extensions
+[Pygments]: http://pygments.org
 [highlight.js]: https://highlightjs.org
 [extra]: http://www.mkdocs.org/user-guide/styling-your-docs/#customising-a-theme
 [permalinks]: https://en.wikipedia.org/wiki/Permalink

docs/index.md

@@ -41,8 +41,8 @@ theme: 'material'
   the screen is too small and well-defined print styles.
 
 - Extra configuration options like a [project logo][], links to the authors
-  [GitHub and Twitter accounts][] and display of the amount of stars the
-  project has on GitHub.
+  [GitHub and Twitter accounts][], display of the amount of stars the
+  project has on GitHub and [Google Analytics integration][].
 
 - Easily [extendable and customizable][] due to a well-designed asset pipeline
   built on-top of [Gulp][] with `npm` and `bower` and modular and abstracted
@@ -60,6 +60,7 @@ it up and running.
 [project logo]: getting-started.md#adding-a-logo
 [easily customizable color palette]: getting-started.md#changing-the-color-palette
 [GitHub and Twitter accounts]: getting-started.md#adding-a-github-and-twitter-account
+[Google Analytics integration]: getting-started.md#google-analytics-integration
 [extendable and customizable]: customization.md
 [Gulp]: http://gulpjs.com
 [SASS]: http://sass-lang.com

material/base.html

@@ -34,9 +34,9 @@
     {% if config.extra.logo %}
       <link rel="apple-touch-icon" href="{{ base_url }}/{{ config.extra.logo }}">
     {% endif %}
-    {% set icon = icon | default("assets/images/favicon-e565ddfa3b.ico") %}
-    <link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
-    <link rel="icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
+    {% set favicon = favicon | default("assets/images/favicon-e565ddfa3b.ico") %}
+    <link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}/{{ favicon }}">
+    <link rel="icon" type="image/x-icon" href="{{ base_url }}/{{ favicon }}">
     <style>
       @font-face {
       	font-family: 'Icon';
@@ -53,7 +53,7 @@
       	font-style: normal;
       }
     </style>
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-b64b728552.css">
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0dac3e5884.css">
     {% if config.extra.palette %}
       <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/palettes-05ab2406df.css">
     {% endif %}
@@ -124,7 +124,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </div></article>
+        </div>
+      </article>
       <div class="results" role="status" aria-live="polite">
         <div class="scrollable">
           <div class="wrapper">
@@ -138,7 +139,7 @@
       var base_url = '{{ base_url }}';
       var repo_id  = '{{ repo_id }}';
     </script>
-    <script src="{{ base_url }}/assets/javascripts/application-a10a824a49.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application-997097ee0c.js"></script>
     {% for path in extra_javascript %}
       <script src="{{ path }}"></script>
     {% endfor %}
@@ -158,13 +159,21 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>

material/drawer.html

@@ -8,7 +8,12 @@
         </div>
       {% endif %}
       <div class="name">
-        <strong>{{ site_name }} {{ config.extra.version }}</strong>
+        <strong>
+          {{ site_name }}
+          <span class="version">
+            {{ config.extra.version }}
+          </span>
+        </strong>
         {% if repo_id %}
           <br>
           {{ repo_id }}

material/manifest.json

@@ -1,7 +1,7 @@
 {
   "assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
-  "assets/javascripts/application.js": "assets/javascripts/application-a10a824a49.js",
+  "assets/javascripts/application.js": "assets/javascripts/application-997097ee0c.js",
   "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js",
-  "assets/stylesheets/application.css": "assets/stylesheets/application-b64b728552.css",
+  "assets/stylesheets/application.css": "assets/stylesheets/application-0dac3e5884.css",
   "assets/stylesheets/palettes.css": "assets/stylesheets/palettes-05ab2406df.css"
 }

material/nav.html

@@ -16,7 +16,7 @@
       {% if h1 %}
         {% set toc = (toc | first).children %}
       {% endif %}
-      {% if toc %}
+      {% if toc and (toc | first) %}
         <ul>
           {% for toc_item in toc %}
             <li class="anchor">

mkdocs.yml

@@ -36,7 +36,7 @@ theme_dir: material
 
 # Options
 extra:
-  version: 0.2.0
+  version: 0.2.3
   logo: images/logo.png
   author:
     github: squidfunk

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "A material design theme for MkDocs",
   "homepage": "http://squidfunk.github.io/mkdocs-material/",
   "authors": [

setup.py

@@ -23,7 +23,7 @@ from setuptools import setup, find_packages
 # Package description
 setup(
     name = 'mkdocs-material',
-    version = '0.2.0',
+    version = '0.2.3',
     url = 'http://squidfunk.github.io/mkdocs-material/',
     license = 'MIT',
     description = 'A material design theme for MkDocs',

src/assets/javascripts/application.js

@@ -253,7 +253,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             /* Close search and jump to anchor when on same page */
             var parts = link.href.split('#');
-            if (parts[0] == window.location.href.split('#')[0]) {
+            if (parts[0] == document.location.href.split('#')[0]) {
               link.addEventListener('click', function(e) {
                 document.body.classList.remove('toggle-search');
                 document.body.classList.remove('locked');
@@ -373,6 +373,9 @@ document.addEventListener('DOMContentLoaded', function() {
   window.addEventListener('keyup', function(e) {
     var code = e.keyCode || e.which;
     if (code == 27) {
+      query.blur();
+
+      /* Exit locked state */
       document.body.classList.remove('toggle-search');
       document.body.classList.remove('locked');
       toggle.checked = false;

src/assets/stylesheets/_highlight.scss

@@ -55,10 +55,24 @@ pre {
 /*
  * Types and functions
  */
-.kt, .kd, .n.f {
+.kt, .kd {
   color: #0086B3;
 }
 
+/*
+ * Function definition
+ */
+.nf, .n.f {
+  color: #795da3;
+}
+
+/*
+ * Classes
+ */
+.nx {
+  color: #0086b3;
+}
+
 /*
  * Strings
  */

src/assets/stylesheets/modules/article/_appearance.scss

@@ -46,10 +46,29 @@
   /*
    * Headlines, chapters, links and inline code
    */
-  h1, h2, a, code {
+  h1, h2, a {
     color: $primary;
   }
 
+  /*
+   * Inline code
+   */
+  code {
+    background: #eee;
+  }
+
+  /*
+   * Keyboard tags
+   */
+  kbd {
+    color: #555;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
+  }
+
   /*
    * Lower border for main headline
    */
@@ -93,20 +112,6 @@
     th {
       background: mix($primary, $white, 75%);
       color: $white;
-
-      /*
-       * Round upper left border
-       */
-      &:first-child {
-        border-top-left-radius: 3px;
-      }
-
-      /*
-       * Round upper right border
-       */
-      &:last-child {
-        border-top-right-radius: 3px;
-      }
     }
 
     /*

src/assets/stylesheets/modules/article/_layout.scss

@@ -190,6 +190,16 @@
    */
   p > code {
     white-space: nowrap;
+    padding: 2px 4px;
+  }
+
+  /*
+   * Keyboard tags
+   */
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    line-height: 10px;
   }
 
   /*
@@ -223,6 +233,7 @@
   table {
     margin: 3.0em 0 1.5em;
     font-size: 13px;
+    overflow: hidden;
 
     /*
      * The semi-cool solution, in case javascript is not available
@@ -242,7 +253,7 @@
       padding: 12px 16px;
       font-size: 12px;
       text-align: left;
-      white-space: nowrap;
+      vertical-align: top;
     }
 
     /*
@@ -250,7 +261,7 @@
      */
     td {
       padding: 12px 16px;
-      white-space: nowrap;
+      vertical-align: top;
     }
   }
 

src/assets/stylesheets/modules/base/_typography.scss

@@ -46,7 +46,7 @@ body, input {
 /*
  * Proportional fonts
  */
-pre, code {
+pre, code, kbd {
   font-family: 'Courier New', 'Courier', monospace;
 
   /*

src/base.html

@@ -58,11 +58,11 @@
     {% endif %}
 
     <!-- Favicon -->
-    {% set icon = icon | default("assets/images/favicon.ico") %}
+    {% set favicon = favicon | default("assets/images/favicon.ico") %}
     <link rel="shortcut icon" type="image/x-icon"
-      href="{{ base_url }}/{{ icon }}" />
+      href="{{ base_url }}/{{ favicon }}" />
     <link rel="icon" type="image/x-icon"
-      href="{{ base_url }}/{{ icon }}" />
+      href="{{ base_url }}/{{ favicon }}" />
 
     <!-- Configure icons (placed here to omit issues with subdirectories) -->
     <style>
@@ -208,8 +208,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </article>
-      </div>
+        </div>
+      </article>
 
       <!-- Search results -->
       <div class="results" role="status" aria-live="polite">
@@ -251,13 +251,22 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>

src/drawer.html

@@ -17,7 +17,12 @@
 
       <!-- Project name and verison -->
       <div class="name">
-        <strong>{{ site_name }} {{ config.extra.version }}</strong>
+        <strong>
+          {{ site_name }}
+          <span class="version">
+            {{ config.extra.version }}
+          </span>
+        </strong>
 
         <!-- Project repository name -->
         {% if repo_id %}

src/nav.html

@@ -33,7 +33,7 @@
       {% endif %}
 
       <!-- Render anchors of active page -->
-      {% if toc %}
+      {% if toc and (toc | first) %}
         <ul>
           {% for toc_item in toc %}