Simplify template by treating package.json as master

This means data entry should be done on package.json. Not in _config.yml like before.
bebraw · Mar 24, 2013 · 29ade4f · 29ade4f
1 parent ccecb2b
commit 29ade4f
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 132 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# libtemplate.js - Template for JS libraries designed to work with GitHub Pages and Jekyll
+# libtemplate - Template for JS libraries designed to work with GitHub Pages and Jekyll
 
-libtemplate.js makes it easier to start writing JavaScript libraries. It has been
+libtemplate makes it easier to start writing JavaScript libraries. It has been
 designed to be used with GitHub (and GitHub pages). In addition it uses Grunt
 as a build system.
 
@@ -24,15 +24,9 @@ Now that everything should be set up, invoke `grunt`. You should have a nice,
 interactive development server running. Surf to `localhost:4000` at your browser.
 If you have [set up LiveReload 
 extension](http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-)
-the changes you make to the project `_meta` data should cause the browser
-window to refresh automatically. This allows you to prototype your project
-README.md and site in a quick manner.
-
-As you can see modifying `_meta/_README.md` causes the changes to propagate to
-the project index. The same goes for modifications made to `_config.yml`. These
-changes propagate to README.md, project index and package information. This
-eases project development somewhat as you have the project metadata in a single
-place and you don't have to worry about keeping separate files up to date.
+the changes you make to the project `_meta` data or `package.json` should cause
+the browser window to refresh automatically. This allows you to prototype your
+project `README.md` and site in a quick manner.
 
 ## Other Features
 
@@ -47,26 +41,6 @@ want to make some quick change.
 the contents of the master branch to gh-pages so the index shows up properly at
 GitHub Pages. It also pushes your tags to GitHub.
 
-## \_config.yml Fields
-
-As there are quite a few fields at `_config.yml`, I've listed their
-descriptions below. You can easily add custom fields to the file and refer to
-them at `_meta`. Simply do this using `field_name` syntax. These fields
-are also available at Jekyll. There you can access them via `site.field_name`.
-
-* `project_base` refers to the project name without a possible suffix (such as .js)
-* `project` is meant to contain that
-* `description` contains a brief (80-100) description of your project. This is
-something you would use as your GitHub project description.
-* `nick` is the nickname you use at GitHub (github.com/&lt;nick&gt;)
-* `author` is your full name as an author. You may alternatively use multiple
-authors if you want to.
-* `license` is the license of your project. You may alternatively use multiple
-if you want to.
-* `version` refers to the version number of your library.
-* `jquery` refers to version of jQuery to load. If it is empty, it won't
-be loaded at all in the demo.
-
 ## Code Example
 
 This bit is here just to illustrate how Pygments works. The example will render
@@ -82,4 +56,4 @@ function add(a, b) {
 
 ## License
 
-libtemplate.js is available under MIT. See LICENSE for more details.
+libtemplate is available under MIT. See LICENSE for more details.
diff --git a/_config.yml b/_config.yml
@@ -1,6 +1,6 @@
 exclude: ['node_modules']
-project_base: libtemplate
-project: libtemplate.js
+name: libtemplate
+name_base: libtemplate
 description: Template for JS libraries designed to work with GitHub Pages and Jekyll
 nick: bebraw
 author: Juho Vepsalainen

diff --git a/_layouts/project.html b/_layouts/project.html
@@ -3,14 +3,14 @@
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
-<title>{{ site.project }} by {{ site.author }}</title>
+<title>{{ site.name }} by {{ site.author }}</title>
 
 <link rel="stylesheet" href="css/vendor/styles.css">
 <link rel="stylesheet" href="css/vendor/pygment_trac.css">
 <link rel="stylesheet" href="css/custom/demo.css">
 <script src="js/vendor/scale.fix.js"></script>
 {% if site.jquery %}<script src="//ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery }}/jquery.min.js" type="text/javascript"></script>{% endif %}
-<script src="dist/{{ site.project_base }}.js"></script>
+<script src="dist/{{ site.name_base }}.js"></script>
 <script src="js/custom/demo.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
@@ -22,13 +22,13 @@
 <body>
 <div class="wrapper">
     <header>
-        <h1>{{ site.project }} {{ site.version }}</h1>
+        <h1>{{ site.name }} {{ site.version }}</h1>
         <p>{{ site.description }}</p>
-        <p class="view"><a href="https://github.com/{{ site.nick }}/{{ site.project }}">View the Project on GitHub <small>{{ site.nick }}/{{ site.project }}</small></a></p>
+        <p class="view"><a href="https://github.com/{{ site.nick }}/{{ site.name }}">View the Project on GitHub <small>{{ site.nick }}/{{ site.name }}</small></a></p>
         <ul>
-            <li><a href="https://github.com/{{ site.nick }}/{{ site.project }}/zipball/master">Download <strong>ZIP File</strong></a></li>
-            <li><a href="https://github.com/{{ site.nick }}/{{ site.project }}/tarball/master">Download <strong>TAR Ball</strong></a></li>
-            <li><a href="https://github.com/{{ site.nick }}/{{ site.project }}">View On <strong>GitHub</strong></a></li>
+            <li><a href="https://github.com/{{ site.nick }}/{{ site.name }}/zipball/master">Download <strong>ZIP File</strong></a></li>
+            <li><a href="https://github.com/{{ site.nick }}/{{ site.name }}/tarball/master">Download <strong>TAR Ball</strong></a></li>
+            <li><a href="https://github.com/{{ site.nick }}/{{ site.name }}">View On <strong>GitHub</strong></a></li>
         </ul>
     </header>
     <section>{{ content }}</section>

diff --git a/_meta/README.md b/_meta/README.md
@@ -1,6 +1,6 @@
-# {{ project }} - {{ description }}
+# {{ name }} - {{ description }}
 
-{{ project }} makes it easier to start writing JavaScript libraries. It has been
+{{ name }} makes it easier to start writing JavaScript libraries. It has been
 designed to be used with GitHub (and GitHub pages). In addition it uses Grunt
 as a build system.
 
@@ -24,15 +24,9 @@ Now that everything should be set up, invoke `grunt`. You should have a nice,
 interactive development server running. Surf to `localhost:4000` at your browser.
 If you have [set up LiveReload 
 extension](http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-)
-the changes you make to the project `_meta` data should cause the browser
-window to refresh automatically. This allows you to prototype your project
-README.md and site in a quick manner.
-
-As you can see modifying `_meta/_README.md` causes the changes to propagate to
-the project index. The same goes for modifications made to `_config.yml`. These
-changes propagate to README.md, project index and package information. This
-eases project development somewhat as you have the project metadata in a single
-place and you don't have to worry about keeping separate files up to date.
+the changes you make to the project `_meta` data or `package.json` should cause
+the browser window to refresh automatically. This allows you to prototype your
+project `README.md` and site in a quick manner.
 
 ## Other Features
 
@@ -47,26 +41,6 @@ want to make some quick change.
 the contents of the master branch to gh-pages so the index shows up properly at
 GitHub Pages. It also pushes your tags to GitHub.
 
-## \_config.yml Fields
-
-As there are quite a few fields at `_config.yml`, I've listed their
-descriptions below. You can easily add custom fields to the file and refer to
-them at `_meta`. Simply do this using `field_name` syntax. These fields
-are also available at Jekyll. There you can access them via `site.field_name`.
-
-* `project_base` refers to the project name without a possible suffix (such as .js)
-* `project` is meant to contain that
-* `description` contains a brief (80-100) description of your project. This is
-something you would use as your GitHub project description.
-* `nick` is the nickname you use at GitHub (github.com/&lt;nick&gt;)
-* `author` is your full name as an author. You may alternatively use multiple
-authors if you want to.
-* `license` is the license of your project. You may alternatively use multiple
-if you want to.
-* `version` refers to the version number of your library.
-* `jquery` refers to version of jQuery to load. If it is empty, it won't
-be loaded at all in the demo.
-
 ## Code Example
 
 This bit is here just to illustrate how Pygments works. The example will render
@@ -82,4 +56,4 @@ function add(a, b) {
 
 ## License
 
-{{ project }} is available under {{ license }}. See LICENSE for more details.
+{{ name }} is available under {{ license }}. See LICENSE for more details.
diff --git a/_meta/_config.yml b/_meta/_config.yml
@@ -0,0 +1,9 @@
+exclude: ['node_modules']
+name: {{ name }}
+name_base: {{ name_base }}
+description: {{ description }}
+nick: bebraw
+author: {{ author }}
+license: {{ license }}
+version: {{ version }}
+jquery: ''
diff --git a/_meta/component.json b/_meta/component.json
@@ -1,7 +1,7 @@
 {
-  "name": "{{ project }}",
+  "name": "{{ name }}",
   "version": "{{ version }}",
-  "main": "dist/{{ project_base }}.min.js",
+  "main": "dist/{{ name_base }}.min.js",
   "ignore": [
     "Gruntfile.js",
     "_config.yml",

diff --git a/_meta/package.json b/_meta/package.json
diff --git a/component.json b/component.json
@@ -1,5 +1,5 @@
 {
-  "name": "libtemplate.js",
+  "name": "libtemplate",
   "version": "0.2.4",
   "main": "dist/libtemplate.min.js",
   "ignore": [

diff --git a/dist/libtemplate.js b/dist/libtemplate.js
@@ -1,5 +1,5 @@
 /*! libtemplate - v0.2.4 - Juho Vepsalainen - MIT
- - 2013-03-21 */
+ - 2013-03-24 */
 // TODO: replace this with your library
 function foo() {
     return 'bar';

diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 ---
 layout: project
 ---
-<h1>libtemplate.js - Template for JS libraries designed to work with GitHub Pages and Jekyll</h1>
-<p>libtemplate.js makes it easier to start writing JavaScript libraries. It has been
+<h1>libtemplate - Template for JS libraries designed to work with GitHub Pages and Jekyll</h1>
+<p>libtemplate makes it easier to start writing JavaScript libraries. It has been
 designed to be used with GitHub (and GitHub pages). In addition it uses Grunt
 as a build system.</p>
 <h2>Getting Started</h2>
@@ -23,14 +23,9 @@ <h2>Getting Started</h2>
 interactive development server running. Surf to <code>localhost:4000</code> at your browser.
 If you have <a href="http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-">set up LiveReload 
 extension</a>
-the changes you make to the project <code>_meta</code> data should cause the browser
-window to refresh automatically. This allows you to prototype your project
-README.md and site in a quick manner.</p>
-<p>As you can see modifying <code>_meta/_README.md</code> causes the changes to propagate to
-the project index. The same goes for modifications made to <code>_config.yml</code>. These
-changes propagate to README.md, project index and package information. This
-eases project development somewhat as you have the project metadata in a single
-place and you don&#39;t have to worry about keeping separate files up to date.</p>
+the changes you make to the project <code>_meta</code> data or <code>package.json</code> should cause
+the browser window to refresh automatically. This allows you to prototype your
+project <code>README.md</code> and site in a quick manner.</p>
 <h2>Other Features</h2>
 <p>Besides the basic <code>grunt</code> functionality, there are various helpers around. I&#39;ve
 listed these in the following list:</p>
@@ -43,25 +38,6 @@ <h2>Other Features</h2>
 the contents of the master branch to gh-pages so the index shows up properly at
 GitHub Pages. It also pushes your tags to GitHub.</li>
 </ul>
-<h2>_config.yml Fields</h2>
-<p>As there are quite a few fields at <code>_config.yml</code>, I&#39;ve listed their
-descriptions below. You can easily add custom fields to the file and refer to
-them at <code>_meta</code>. Simply do this using <code>field_name</code> syntax. These fields
-are also available at Jekyll. There you can access them via <code>site.field_name</code>.</p>
-<ul>
-<li><code>project_base</code> refers to the project name without a possible suffix (such as .js)</li>
-<li><code>project</code> is meant to contain that</li>
-<li><code>description</code> contains a brief (80-100) description of your project. This is
-something you would use as your GitHub project description.</li>
-<li><code>nick</code> is the nickname you use at GitHub (github.com/&lt;nick&gt;)</li>
-<li><code>author</code> is your full name as an author. You may alternatively use multiple
-authors if you want to.</li>
-<li><code>license</code> is the license of your project. You may alternatively use multiple
-if you want to.</li>
-<li><code>version</code> refers to the version number of your library.</li>
-<li><code>jquery</code> refers to version of jQuery to load. If it is empty, it won&#39;t
-be loaded at all in the demo.</li>
-</ul>
 <h2>Code Example</h2>
 <p>This bit is here just to illustrate how Pygments works. The example will render
 with syntax highlighting on both README.md and GitHub Pages index.</p>
@@ -73,4 +49,4 @@ <h2>Code Example</h2>
 }
 {% endhighlight %}
 <h2>License</h2>
-<p>libtemplate.js is available under MIT. See LICENSE for more details.</p>
+<p>libtemplate is available under MIT. See LICENSE for more details.</p>
diff --git a/scripts/generate.js b/scripts/generate.js
@@ -13,9 +13,9 @@ function main() {
     var targets = {
         'all': generateAll,
         'bower': generator('component.json'),
+        'config': generator('_config.yml'),
         'readme': generator('README.md'),
-        'index': generateIndex,
-        'package': generator('package.json')
+        'index': generateIndex
     };
     var target = process.argv[2];
 
@@ -68,5 +68,11 @@ function generateIndex() {
 }
 
 function generate(source, target, transformer) {
-    utils.write(target, transformer(utils.read(source), require('../_config.yml')));
+    utils.write(target, transformer(utils.read(source), addProjectBase(require('../package.json'))));
+}
+
+function addProjectBase(conf) {
+    conf.name_base = _s.rtrim(conf.name, '.js');
+
+    return conf;
 }