Skip to content
This repository was archived by the owner on May 25, 2019. It is now read-only.

Refacto more grunt #8

Merged
merged 2 commits into from
Jul 29, 2013
Merged

Refacto more grunt #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec25681
[M] Refacto full grunt
douglasduteil Jul 29, 2013
3d2da2b
[M] Update README
douglasduteil Jul 29, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 108 additions & 104 deletions .tmpl/index.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,118 +6,122 @@
<title>Angular UI ~ <%= meta.view.humaName %> Doc</title>

<!-- Le css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/cssLoading.css">
<link rel="stylesheet" href="assets/css/prettify.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/style.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/prettify.css"/>

<%
var cssFiles = grunt.config('meta.view.css') || [];;

for(var i = 0, len = cssFiles.length; i < len; i++) {
print(' <link rel="stylesheet" type="text/css" href="' + cssFiles[i] + '"/>\n');
}
%>

</head>

<body>

<!-- Le navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="dropdown pull-left">
<a class="brand dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<%= meta.view.humaName %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="https://github.com/angular-ui/"><strong>Related Projects:</strong></a></li>
<li class="divider"></li>
<li><a href="http://angular-ui.github.io/">AngularUI</a></li>
<li><a href="http://angular-ui.github.io/bootstrap/">UI Bootstrap</a></li>
<li><a href="http://angular-ui.github.io/ng-grid/">Grid</a></li>
<li><a href="https://github.com/angular-ui/AngularJs.tmbundle">AngularJS.tmbundle</a></li>
<li><a href="http://angular-ui.github.io/ui-router/sample/">Router <span class="label label-success">New!</span></a></li>
</ul>
</div>
<div class="nav-collapse pull-right">
<ul class="nav">
<li class="dropdown" ng-show="!isLoading" style="display: none">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Modules <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-repeat="s in sections"><a href="#{{s.id}}"> {{s.name}} </a></li>
</ul>
</li>

</ul>
</div>
</div>
</div>
</div>
<div style="margin: 32px;"></div>

<!-- Le header
================================================== -->
<header class="hero-unit" id="overview">
<div class="container">

<h1><%= meta.view.humaName %></h1>

<p><%= pkg.description %></p>

<p class="btn-group">
<a class="btn" href="https://github.com/angular-ui/<%= meta.view.repoName %>"><i class="icon-github"></i> Code on Github</a>
<a class="btn btn-primary" href="https://github.com/angular-ui/<%= meta.view.repoName %>/tree/gh-pages/build">
<i class="icon-download-alt icon-white"></i> Download <small>(<%= pkg.version %>)</small>
</a>
</p>
</div>
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
<li>
<iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&amp;repo=<%= meta.view.repoName %>&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</li>
<li>
<iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&amp;repo=<%= meta.view.repoName %>&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</li>
<li>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</li>
</ul>
</div>
</div>
</header>

<!-- Le main
================================================== -->
<div class="container main ng-cloak" ng-controller="MainCtrl" ng-cloak>
<div ng-include src="'demos.html'" onload="makeNav()"></div>
</div>

<!-- Le loading
================================================== -->

<div class="loadingAnimation" ng-show="isLoading">
<div class="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
<!-- Le navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="dropdown pull-left">
<a class="brand dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<%= meta.view.humaName %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="https://github.com/angular-ui/"><strong>Related Projects:</strong></a></li>
<li class="divider"></li>
<li><a href="http://angular-ui.github.io/">AngularUI</a></li>
<li><a href="http://angular-ui.github.io/bootstrap/">UI Bootstrap</a></li>
<li><a href="http://angular-ui.github.io/ng-grid/">Grid</a></li>
<li><a href="https://github.com/angular-ui/AngularJs.tmbundle">AngularJS.tmbundle</a></li>
<li><a href="http://angular-ui.github.io/ui-router/sample/">Router <span class="label label-success">New!</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin: 32px;"></div>

<!-- Le header
================================================== -->
<header class="hero-unit" id="overview">
<div class="container">

<h1><%= meta.view.humaName %></h1>

<p><%= pkg.description %></p>

<p class="btn-group">
<a class="btn" href="https://github.com/angular-ui/<%= meta.view.repoName %>"><i class="icon-github"></i> Code on Github</a>
<a class="btn btn-primary" href="https://github.com/angular-ui/<%= meta.view.repoName %>/tree/gh-pages/build">
<i class="icon-download-alt icon-white"></i> Download <small>(<%= pkg.version %>)</small>
</a>
</p>
</div>
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
<li>
<iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&amp;repo=<%= meta.view.repoName %>&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</li>
<li>
<iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&amp;repo=<%= meta.view.repoName %>&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</li>
<li>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</li>
</ul>
</div>
</div>
</header>

<!-- Le main
================================================== -->
<div class="container">

<%= meta.view.demoHTML %>

</div>

<!-- Le javascript
================================================== -->

<script src="assets/vendor/jquery.min.js"></script>
<script src="assets/vendor/bootstrap.min.js"></script>

<script src="assets/vendor/prettify.js"></script>

<script src="assets/vendor/angular.min.js"></script>
<script src="core/prettifyDirective.js"></script>

<%
var jsFiles = grunt.config('meta.view.js') || [];

<!-- Le javascript
================================================== -->
<script data-main="core/main.js" src="assets/vendor/require.min.js"></script>
for(var i = 0, len = jsFiles.length; i < len; i++) {
print(' <script src="' + jsFiles[i] + '"></script>\n');
}
%>
<script>
<%= meta.view.demoJS %>
</script>

</body>

Expand Down
2 changes: 1 addition & 1 deletion .travis/after_success.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ echo -e "\n>>> Current Repo:$REPO --- Travis Branch:$TRAVIS_BRANCH\n"

echo -e ">>> Grunt the doc.\n"
grunt build-doc
cp -R components/angular-ui-docs $HOME/out
cp -R bower_components/angular-ui-docs $HOME/out


echo -e ">>> Clone the gh-pages branch.\n"
Expand Down
2 changes: 1 addition & 1 deletion .travis/before_script.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ base64 --decode --ignore-garbage ~/.ssh/travis_rsa_64 > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa

echo -e ">>> Copy config"
mv -fv components/angular-ui-docs/.travis/ssh-config ~/.ssh/config
mv -fv bower_components/angular-ui-docs/.travis/ssh-config ~/.ssh/config

echo -e ">>> Hi github.com !"
ssh -T [email protected]
Expand Down
59 changes: 37 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,16 @@ This generator use Grunt, AngularJS, RequireJS and jQuery.

## How to add it !

Add it as a submodule of your module.
Add it as a bower component.

```sh
git submodule add git://github.com/angular-ui/angular-ui-docs.git out
bower install git://github.com/angular-ui/angular-ui-docs.git
```
or add to your `bower.json`
```Javascript
"devDependencies": {
"angular-ui-docs": "angular-ui/angular-ui-docs"
}
```

**It's working with ssh deploy key !**
Expand All @@ -25,7 +31,7 @@ env:

Then add the scripts and limit the build-able branches.

```
```yaml
before_script: out/.travis/before_script.sh
after_success: out/.travis/after_success.sh
branches:
Expand All @@ -45,10 +51,18 @@ First you need to generate the `index.html` using [grunt-contrib-copy](https://g
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
meta: {
view : {
humaName : "UI <repo>",
repoName : "<the github repo name>"
}
view : {
humaName : "UI <repo>",
repoName : "<the github repo name>",
demoHTML : grunt.file.read("demo/demo.html"),
demoJS : grunt.file.read("demo/demo.js"),
css : [
'<any required css files>'
],
js : [
'<any required script files>'
]
}
},
copy: {
template : {
Expand All @@ -67,22 +81,23 @@ This will generate `index.html` using :
- the `meta.view.humaName` as title of the demo site,
- the `meta.view.repoName` in the github links,

Then, like `index.html` automatically include a `demo.html` file, you will have to copy yours.

```Javascript
grunt.initConfig({
copy: {
main: {
files: [
{src: ['demo/demo.html'], dest: 'out/demos.html', filter: 'isFile'}
]
}
}
});
```
## See it working locally !
Actually the demo must be built !
We are using _bower_ and _grunt_ for this.

In this file you can use RequireJS, AngularJS and jQuery.
I added a `requireCSS` as a HACK 'cause it's home made...
First in you UI project run
```sh
npm install && bower install
grunt build-doc
```

In bonus, the id of each section tag in the page are drawn into a _Module_ menu at the top right of the page.
Then run a localhost on `bower_components/angular-ui-docs`
```sh
cd bower_components/angular-ui-docs
python -m SimpleHTTPServer
or
php -S localhost:8000
```

and you'll have the generated website on http://localhost:8000/
Loading