Merge pull request #1 from toolkitchen/master

update to latest toolkitchen
Polymer · Apr 15, 2013 · 9d3f7d3 · 9d3f7d3
2 parents 2e68756 + 8752832
commit 9d3f7d3
Show file tree

Hide file tree

Showing 127 changed files with 3,224 additions and 11,768 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+_site
+.DS_Store
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "toolkit"]
+	path = toolkit
+	url = [email protected]:toolkitchen/toolkit.git
diff --git a/ComponentWriterCheatsheet.md b/ComponentWriterCheatsheet.md
@@ -18,7 +18,7 @@
 		<html>
 		  <head>
 		    <script src="../platform/platform.js"></script>
-			<link rel="components" href="my-element.html">
+			<link rel="import" href="my-element.html">
 		  </head>
 		  <body>
 			<my-element></my-element>
@@ -76,7 +76,7 @@
 		<html>
 		  <head>
 		    <script src="../platform/platform.js"></script>
-			<link rel="components" href="tk-element.html">
+			<link rel="import" href="tk-element.html">
 		  </head>
 		  <body>
 			<tk-element owner="Yvonne"></tk-element>
@@ -133,7 +133,7 @@
 		<html>
 		  <head>
 		    <script src="../platform/platform.js"></script>
-			<link rel="components" href="tk-element.html">
+			<link rel="import" href="tk-element.html">
 		  </head>
 		  <body>
 			<tk-element owner="Yvonne"></tk-element>

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,57 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+
+    pkg: grunt.file.readJSON('package.json'),
+    jekyllConfig: grunt.file.readYAML('_config.yml'),
+
+    jekyll: {
+      server : {
+        server: true,
+        server_port: '<%= jekyllConfig.server_port %>',
+        auto: true
+      },
+      dev: {
+        server: false,
+        safe: false
+      },
+      prod: {
+        auto: false,
+        server: false
+      }
+    },
+
+    watch: { // for development run 'grunt watch'
+      jekyll: {
+        files: ['./*.html'],
+        tasks: ['jekyll:dev']
+      }
+    },
+
+    copy: {
+      main: {
+        files: [{
+          expand: true,
+          cwd: '_site/', // set base for src matches.
+          src: ['**'], // includes files and subdirs of cwd.
+          dest: '<%= jekyllConfig.destination %>'
+        }]
+      }
+    }
+
+  });
+
+  // Plugin and grunt tasks.
+  grunt.loadNpmTasks('grunt-jekyll');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+
+  // Default task. Run standard jekyll server.
+  grunt.registerTask('default', ['jekyll:server']);
+
+  // Task to build docs.
+  grunt.registerTask('docs', ['jekyll:prod']);
+
+  // Task to build and copy docs over to publishing repo.
+  grunt.registerTask('publish', ['jekyll:prod', 'copy:main']);
+};
diff --git a/README.md b/README.md
@@ -1,12 +1,47 @@
-Toolkitchen docs are mostly in Markdown with some HTML. [Jekyll][1] generates the HTML site from the source, which is then pushed (manually, for now) to the "gh-pages" branch. To publish a change to the live site, you would follow this basic process:
+Toolkitchen docs are mostly in Markdown with some HTML. [Jekyll][jekyll] is used to generate the static HTML for the site. The output is copied to
+`/toolkitchen/toolkitchen.github.com` for serving.
 
-1. Checkout master and make desired changes.
-2. Build docs locally with Jekyll, and verify changes. The generated site is placed in a folder named "_site".
-3. Push the generated site (the contents of the _site folder) to the "gh-pages" branch. 
-4. Push the source file changes to "master".
+Our documentation source files (located in this repo) and the rendered HTML (located in `/toolkitchen/toolkitchen.github.com`)
+are in separate repos in order to take advantage of Jekyll `_plugins`, special build scripts, and have full control
+over doc generation.
 
-I've checked in my _config.yml file, which causes Jekyll to serve the generated site from http://localhost:4000. It also watches for changes to the source files and rebuilds the site, so you can just hit reload a few seconds after saving your changes.
+## Install the requirements
 
-Eventually, the process will be much simpler: The doc source files will be in the gh-pages branch, you will push your changes there, and the site will be rebuilt immediately by Github. At the moment, the Jekyll process on GitHub is failing to build the site, presumably because it doesn't like something about the source files. For now, however, it's a bit of a manual process.
+We use [Grunt][grunt] to generate the documentation. You'll need to install the requirements before working on the docs:
 
-[1]: https://github.com/mojombo/jekyll
+    npm install
+
+## Making edits and previewing changes
+
+This repo (`toolkitchen/docs`) is where the documentation source files live. To make a change, follow this basic process:
+
+1. Checkout this repo and make desired changes.
+- To build the docs locally, run `grunt` or ``. This starts a web server at
+[http://localhost:4000](http://localhost:4000) where you can preview your edits. This also watches and rebuilds on changes.
+
+The generated site is placed in a folder named `_site`. Alternatively, if you just want to
+build the docs and not run a webserver, run:
+
+    grunt jekyll:server
+
+Once your changes look good, `git commit` them and push.
+
+## Building and pushing the docs
+
+First, checkout `toolkitchen/toolkitchen.github.com`. This repo is where the generated docs live
+and are served from using [Github Pages](https://help.github.com/categories/20/articles).
+
+Next, run the `publish` task:
+
+    grunt publish
+
+This generates the docs in `_site/` and copies its contents into your checked out version
+of `toolkitchen/toolkitchen.github.com`.
+
+The last step is to commit and push those changes live. To do that, just make the commit:
+
+    git commit -am 'Updating live docs'
+    git push
+
+[jekyll]: https://github.com/mojombo/jekyll
+[grunt]: http://gruntjs.com/
diff --git a/ShadowDOMShim.md b/ShadowDOMShim.md
diff --git a/ToolkitUserCheatsheet.md b/ToolkitUserCheatsheet.md
@@ -3,14 +3,14 @@
 #### Basics
 
 1. Load *platform.js* to shim missing platform features
-2. Load components with `<link rel="components" href="<path to component file>.html">`
+2. Load components with `<link rel="import" href="<path to component file>.html">`
 3. Use component tags in HTML.
 
 		<!DOCTYPE html>
 		<html>
 		  <head>
-		    <script src="../platform/platform.js"></script>
-			<link rel="components" href="../components/g-menu-item.html">
+		    <script src="toolkit/platform/platform.js"></script>
+" href="toolkit/components/g-menu-item.html">
 		  </head>
 		  <body>
 			<g-menu-item src="images/email.svg">Email Link</g-menu-item>
@@ -19,28 +19,28 @@
 
 #### Component Links
 
-Links (`<link rel="components" href="<path to component file>.html">`) can be used to collate dependencies, including additional component files, styles, and javascript.
+Links (`<link rel="import" href="<path to component file>.html">`) can be used to collate dependencies, including additional component files, styles, and javascript.
 
 For example:
 
 *app-components.html*
 
-	<!-- load some components -->
-    <link rel="components" href="../toolkit/components/g-toolbar.html">
-    <link rel="components" href="../toolkit/components/g-menu-button.html">
-    <link rel="components" href="../toolkit/components/g-menu-item.html">
+    <!-- load some components -->
+    <link rel="import" href="toolkit/components/g-toolbar.html">
+    <link rel="import" href="toolkit/components/g-menu-button.html">
+    <link rel="import" href="toolkit/components/g-menu-item.html">
 
-	<!-- can load stylesheets and scripts here also -->
-	<link rel="stylesheet" href="my-app-styles.css">
-	<script src="my-app.js"></script>
+		<!-- can load stylesheets and scripts here also -->
+		<link rel="stylesheet" href="my-app-styles.css">
+		<script src="my-app.js"></script>
 
 *index.html*
 
-	<!DOCTYPE html>
-	<html>
-	  <head>
-	    <script src="../platform/platform.js"></script>
-		<link rel="components" href="app-components.html">
-	  </head>
-	...
-	</html>
+		<!DOCTYPE html>
+		<html>
+		  <head>
+		    <script src="toolkit/platform/platform.js"></script>
+			<link rel="import" href="app-components.html">
+		  </head>
+		...
+		</html>
diff --git a/_config.yml b/_config.yml
@@ -1,8 +1,20 @@
+# Server defaults.
+server: false
+server_port: 4000
 auto: true
-server: true
-pygments: true
+
+# Project defaults.
 markdown: redcarpet
-# # safe: true
-# # lsi: false
-# # destination: docs/
-# # url: http://localhost:4000/docs
+pygments: false
+lsi: false
+safe: false
+
+exclude: "node_modules/, README.md"
+
+# Be sure to checkout the toolkitchen.github.com repo.
+# This is where the generated docs will be output.
+destination: ../toolkitchen.github.com
+
+# Site globals used throughout docs.
+load_platform: true
+project_title: Toolkitchen
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,26 @@
+<script src="/js/prettify/prettify.js"></script>
+<script src="/js/jquery.min.js"></script>
+<script src="/bootstrap/js/bootstrap.min.js"></script>
+<script src="/js/bootstrap-scrollspy.js"></script>
+<script>
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-39334307-1']);
+_gaq.push(['_trackPageview']);
+
+(function() {
+  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+
+// Change "active" style on selected left-hand navigation menu item.
+$(document).ready(function () {
+  var path = location.pathname;
+  $('ul.nav > li > a[href="' + path + '"]').parent().addClass('active');
+
+  // TODO: Use kramdown {:.prettyprint .linenums .lang-ruby} to add the
+  // <pre class="prettyprint"> instead of doing this client-side.
+  $('pre').addClass('prettyprint');
+  window.prettyPrint && prettyPrint();
+});
+</script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,32 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>
+  {% if page.title %}
+    {{page.title}} - 
+  {% else %}
+    Welcome - 
+  {% endif %} {{site.project_title}} Project
+</title>
+<link rel="shortcut icon" href="images/logos/webcomponents.png">
+<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,800|Source+Code+Pro" rel="stylesheet" type="text/css">
+<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+<link href="/css/prettify/sunburst.css" rel="stylesheet" type="text/css">
+<!-- <link href="/css/pygments/default.css" rel="stylesheet" type="text/css"> -->
+<link href="/css/site.css?{{'now' | date: "%Y%m%d"}}" rel="stylesheet" type="text/css">
+
+{% if site.load_platform %}
+  <!-- Toolkit platform code -->
+  <script src="/toolkit/platform/platform.js?{{'now' | date: "%Y%m%d"}}"></script>
+  <script src="/toolkit/toolkit.js?{{'now' | date: "%Y%m%d"}}"></script>
+  <!--<script src="http://toolkitchen.github.io/toolkit/toolkit.min.js"></script>-->
+  <!-- TODO toolkit.min.js throws <Symbol> has no method 'shimStyling' error-->
+
+  {% for item in page.components %}
+    <link rel="import" src="{{ item }}">
+  {% endfor %}
+
+  {% for item in page.stylesheets %}
+    <link rel="stylesheet" src="{{ item }}">
+  {% endfor %}
+{% endif %}