customized jekyll plugin to generate package versions for documentation based on the bower and npm files so the docs can't get out of date with the distribution.

This commit is contained in:
Kevin Ross 2015-12-02 15:02:51 -06:00
parent ca9406d97a
commit 80fb3a75be
16 changed files with 9463 additions and 3998 deletions

View File

@ -423,7 +423,9 @@ module.exports = function (grunt) {
},
pages: {
options: {
remote: 'git@github.com:twbs/derpstrap.git',
// FIXME: change this when we are ready!!!
//remote: 'git@github.com:FezVrasta/bootstrap-material-design.git',
remote: 'git@github.com:rosskevin/bootstrap-material-design.git',
branch: 'gh-pages'
}
}

View File

@ -30,12 +30,10 @@ gems:
- jekyll-sitemap
# Custom vars
current_version: 4.0.0-alpha
#current_version: 4.0.0-alpha
repo: https://github.com/fezvrasta/bootstrap-material-design
download:
source: https://github.com/fezvrasta/bootstrap-material-design/archive/v0.4.1.zip
dist: https://github.com/fezvrasta/bootstrap-material-design/releases/download/v0.4.1/bootstrap-0.4.1-dist.zip
# other variables generated in
#blog: http://blog.getbootstrap.com
#expo: http://expo.getbootstrap.com
@ -48,4 +46,11 @@ cdn:
# css_hash: "sha384-XXXXXXXX"
js: https://cdn.rawgit.com/fezvrasta/bootstrap-material-design/v4-dev/dist/js/bootstrap-material-design.js
# js_hash: "sha384-XXXXXXXX"
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
# fonts
font_roboto: http://fonts.googleapis.com/css?family=Roboto:300,400,500,700
font_icons: https://fonts.googleapis.com/icon?family=Material+Icons
# VERSION is substituted in variables.rb and these are made available as site.data.cdn.*
jquery: https://ajax.googleapis.com/ajax/libs/jquery/VERSION/jquery.min.js
bootstrap: https://cdn.rawgit.com/twbs/bootstrap/VERSION/dist/js/bootstrap.js

View File

@ -2,29 +2,31 @@
<div class="container">
<ul class="bd-footer-links">
<li><a href="{{ site.repo }}">GitHub</a></li>
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
<li><a href="{{ site.baseurl }}/examples/">Examples</a></li>
<li><a href="{{ site.baseurl }}/about/history/">About</a></li>
</ul>
<p>
Designed and built
by Federico Zivolo <a href="https://github.com/FezVrasta" target="_blank">@FezVrasta</a>
and Kevin Ross <a href="https://github.com/rosskevin" target="_blank">@rosskevin</a>.
by Federico Zivolo <span class="text-muted">(<a href="https://github.com/FezVrasta" target="_blank">@FezVrasta</a>)</span>
and Kevin Ross <span class="text-muted">(<a href="https://github.com/rosskevin" target="_blank">@rosskevin</a>)</span>.
Maintained by our core team with the help of <a href="https://github.com/FezVrasta/bootstrap-material-design/graphs/contributors">our contributors</a>.
</p>
<p>Currently v{{ site.current_version }}. Code licensed <a rel="license" href="https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<p>Code licensed <a rel="license" href="https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
<p>Currently v{{ site.data.version }}, a customization of <a href="http://getbootstrap.com" target="_other">Bootstrap v{{ site.data.bootstrap_version }}</a>. </p>
</div>
</footer>
<script src="{{ site.cdn.jquery }}"></script>
<script src="{{ site.data.cdn.jquery }}"></script>
<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{{ site.data.cdn.bootstrap }}"></script>
<script src="{{ site.baseurl }}/assets/js/vendor/tether.min.js"></script>
{% if site.github %}
<script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
<script src="{{ site.baseurl }}/dist/js/{{ site.data.name }}.min.js"></script>
{% else %}
<script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
<script src="{{ site.baseurl }}/dist/js/{{ site.data.name }}.js"></script>
{% endif %}
{% if site.github %}
@ -57,7 +59,11 @@ SimpleJekyllSearch.init({
Holder.addTheme('gray', {
background: '#777',
foreground: 'rgba(255,255,255,.75)',
font: 'Helvetica',
font: 'Roboto',
fontweight: 'normal'
})
</script>
<script>
$.bootstrapMaterialDesign()
</script>

View File

@ -13,8 +13,8 @@
{% endif %}
</title>
<!-- Bootstrap core CSS -->
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap CSS (includes a compiled/customized version of Bootstrap) -->
<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">

View File

@ -3,7 +3,7 @@
<nav class="nav navbar-nav pull-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
v{{ site.data.version }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item" href="#">v4.0.0-alpha</a>

View File

@ -1,10 +1,11 @@
require 'json'
require 'yaml'
module Bridge
class Generator < Jekyll::Generator
def generate(site)
path = File.join(site.source, "../grunt/configBridge.json")
site.data["configBridge"] = YAML.load_file(path)
config_bridge_json = File.join(site.source, '../grunt/configBridge.json')
site.data['configBridge'] = YAML.load_file(config_bridge_json)
end
end
end

View File

@ -0,0 +1,53 @@
require 'json'
require 'yaml'
module Variables
class Generator < Jekyll::Generator
safe true
def generate(site)
metadata_files = {
'bower' => '../bower.json',
'package' => '../package.json',
'bower_jquery' => '../bower_components/jquery/bower.json'
}
metadata_files.each do |metadata, path|
contents = JSON.parse(File.read(File.join(site.source, path)))
site.data[metadata] = contents
end
# some quick access to common variables (instead of diving into package and bower)
name = site.data['package']['name']
version = site.data['package']['version']
bootstrap_version = site.data['bower']['dependencies']['bootstrap']
jquery_version = site.data['bower_jquery']['version']
site.data['name'] = name
site.data['version'] = version
site.data['bootstrap_version'] = bootstrap_version
site.data['jquery_version'] = jquery_version
# fabricate the archive and release links based on the site.repo and version
jekyll_config = Jekyll.configuration({})
repo = jekyll_config['repo']
site.data['download'] = {
'source' => "#{repo}/archive/v#{version}.zip",
'dist' => "#{repo}/releases/download/v#{version}/#{name}-#{version}-dist.zip"
}
site.data['cdn'] = {
'jquery' => jekyll_config['cdn']['jquery'].gsub(/VERSION/, jquery_version),
'bootstrap' => jekyll_config['cdn']['bootstrap'].gsub(/VERSION/, bootstrap_version)
}
#
puts "\n---------------------"
# puts site.data[:package]['version']
# puts site.data.to_yaml
puts repo
puts version
end
end
end

View File

@ -3,7 +3,7 @@ layout: simple
title: Examples
---
[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
[Download the Bootstrap source code]({{ site.data.download.source }}) to snag these examples.
## Framework

View File

@ -4,7 +4,7 @@ title: Download
group: getting-started
---
**Material Design for Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
**Material Design for Bootstrap v{{ site.data.version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
<div class="row m-t-md">
<div class="col-sm-6">
@ -13,7 +13,7 @@ group: getting-started
Download just the compiled and minified CSS and JavaScript. Doesn't include any documentation or original source files.
{% comment %}
<a href="{{ site.download.dist }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Material Design for Bootstrap</a>
<a href="{{ site.data.download.dist }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Material Design for Bootstrap</a>
{% endcomment %}
<span class="text-muted">Coming soon!</span>
{% endmarkdown %}
@ -23,7 +23,7 @@ Download just the compiled and minified CSS and JavaScript. Doesn't include any
### Source files
Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).**
<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
<a href="{{ site.data.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
{% endmarkdown %}
</div>
</div>
@ -40,13 +40,13 @@ Pull in Material Design for Bootstrap's **source files** into nearly any project
Install and manage Material Design for Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
{% highlight bash %}$ bower install bootstrap-material-design#v{{ site.current_version }}{% endhighlight %}
{% highlight bash %}$ bower install bootstrap-material-design#v{{ site.data.version }}{% endhighlight %}
### npm
Install Material Design for Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
{% highlight bash %}$ npm install bootstrap@{{ site.current_version }}{% endhighlight %}
{% highlight bash %}$ npm install bootstrap@{{ site.data.version }}{% endhighlight %}
`require('bootstrap-material-design')` will load all of Material Design for Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Material Design for Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
@ -58,7 +58,7 @@ Material Design for Material Design for Bootstrap's `package.json` contains some
### Meteor
{% highlight bash %}
$ meteor add FezVrasta/bootstrap-material-design@={{ site.current_version }}
$ meteor add FezVrasta/bootstrap-material-design@={{ site.data.version }}
{% endhighlight %}
### Composer

View File

@ -21,17 +21,26 @@ Looking to quickly add Material Design for Bootstrap to your project? Use the Ma
provided for free by the folks at MaxCDN. Using a package manager or need to download the source files?
[Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
Copy-paste the font and stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
{% highlight html %}
<!-- Material Design fonts -->
<link rel="stylesheet" href="{{ site.cdn.font_roboto }}">
<link rel="stylesheet" href="{{ site.cdn.font_icons }}">
<!-- Material Design for Bootstrap -->
<link rel="stylesheet" href="{{ site.cdn.css }}">
{% endhighlight %}
Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
Add jQuery, Bootstrap, and our Javascript plugins near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
{% highlight html %}
<script src="{{ site.cdn.jquery }}"></script>
<script src="{{ site.data.cdn.jquery }}"></script>
<script src="{{ site.data.cdn.bootstrap }}"></script>
<script src="{{ site.cdn.js }}"></script>
<script>
$.bootstrapMaterialDesign()
</script>
{% endhighlight %}
And that's it—you're on your way to a fully Material Design for Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
@ -56,18 +65,22 @@ Put it all together and your pages should look like this:
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Material Design for Bootstrap CSS -->
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
<link rel="stylesheet" href="{{ site.cdn.font_roboto }}">
<link rel="stylesheet" href="{{ site.cdn.font_icons }}">
<!-- Material Design for Bootstrap -->
<link rel="stylesheet" href="{{ site.cdn.css }}">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Material Design for Bootstrap JS. -->
<script src="{{ site.cdn.jquery }}"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
<!-- jQuery first, then Bootstrap and Material Design for Bootstrap JS. -->
<script src="{{ site.data.cdn.jquery }}"></script>
<script src="{{ site.data.cdn.bootstrap }}"></script>
<script src="{{ site.cdn.js }}"></script>
<script>
$.bootstrapMaterialDesign()
</script>
</body>
</html>
{% endhighlight %}

View File

@ -17,7 +17,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files)
## Dependencies
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.data.version }}/bower.json) to see which versions of jQuery are supported.
## Data attributes
@ -86,7 +86,7 @@ $('#myModal').on('show.bs.modal', function (e) {
The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
{% highlight js %}
$.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
$.fn.tooltip.Constructor.VERSION // => "{{ site.data.version }}"
{% endhighlight %}
## No special fallbacks when JavaScript is disabled

View File

@ -5,12 +5,12 @@ title: Material Design for Bootstrap, the world's most popular mobile-first and
<main class="bd-masthead" id="content" role="main">
<div class="container">
<span class="bd-booticon outline">BMD</span>
<span class="bd-booticon outline">MDB</span>
<p class="lead">Material Design for Bootstrap, the world's most popular mobile-first and responsive front-end framework.</p>
<p class="lead">
<a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
<a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.data.version }}');">Download</a>
</p>
<p class="version">Currently v{{ site.current_version }}</p>
<p class="version">Currently v{{ site.data.version }}</p>
{% include ads.html %}
</div>
</main>

View File

@ -4,7 +4,8 @@ title: Migrating to v4
group: migration
---
Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.
Material Design for Bootstrap 4 is a major rewrite of almost the entire project.
The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.
{% callout info %}
**Heads up!** This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we'd love pull requests to help keep it up to date.
@ -12,7 +13,7 @@ Bootstrap 4 is a major rewrite of almost the entire project. The most notable ch
## Summary
Here are the big ticket items you'll want to be aware of when moving from v3 to v4.
Here are the big ticket items you'll want to be aware of when moving from MDB v3 to v4.
### Browser support
@ -39,7 +40,7 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
- Refactored nearly all components to use more unnested classes instead of children selectors.
### Misc
- Non-responsive usage of Bootstrap is no longer supported.
- Non-responsive usage of Material Design for Bootstrap is no longer supported.
- Dropped the online Customizer in favor of more extensive setup documentation and customized builds.
## By component
@ -48,7 +49,7 @@ This list highlights key changes by component between v3.x.x and v4.0.0.
### Reboot
New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border` change, moving from `rem` to `em` units on many elements, link styles, and many form element resets.
New to Material Design for Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border` change, moving from `rem` to `em` units on many elements, link styles, and many form element resets.
### Typography
@ -137,7 +138,7 @@ Our documentation received an upgrade across the board as well. Here's the low d
- `callout.rb` is a similar fork of that, but designed for our special docs callouts.
- All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
- Pages have been reorganized for simpler content and a more approachable hierarchy.
- We moved from regular CSS to SCSS to take full advantage of Bootstrap's variables, mixins, and more.
- We moved from regular CSS to SCSS to take full advantage of Material Design for Bootstrap's variables, mixins, and more.
## What's new

13260
grunt/npm-shrinkwrap.json generated

File diff suppressed because it is too large Load Diff

View File

@ -304,17 +304,17 @@
// });
// }
//};
/**
* Create the jquery plugin function
*/
$.fn.ripples = function(options) {
return this.each(function() {
if(!$.data(this, "plugin_" + ripples)) {
$.data(this, "plugin_" + ripples, new Ripples(this, options));
}
});
};
//
//
///**
// * Create the jquery plugin function
// */
//$.fn.ripples = function(options) {
// return this.each(function() {
// if(!$.data(this, "plugin_" + ripples)) {
// $.data(this, "plugin_" + ripples, new Ripples(this, options));
// }
// });
//};
})(jQuery, window, document);

View File

@ -102,5 +102,3 @@
}
}
}