Skip to content

S
shower-presentation
Commit 5e1037df authored by Vadim Makeev's avatar Vadim Makeev
Browse files
Options

Update to Gulp 4, Ribbon 3, etc.

parent 72b71465
Hide whitespace changes
Inline Side-by-side
Showing with 2403 additions and 1189 deletions
README.md
View file @ 5e1037df
......@@ -7,9 +7,8 @@
1. Built on HTML, CSS and vanilla JavaScript
2. Works in all modern browsers
3. Themes are separated from engine
4. Modular and extensible
5. Fully keyboard accessible
6. Printable to PDF
4. Fully keyboard accessible
5. Printable to PDF
[See it in action](http://shwr.me/). Includes [Ribbon](https://github.com/shower/ribbon/) and [Material](https://github.com/shower/material/) themes, and [core](https://github.com/shower/core/) with plugins.
......@@ -26,7 +25,7 @@ By clicking the button below you can fork this repo and deploy it to Netlify.
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/shower/shower)
By doing this you would get a GitHub repo linked with Netlify in a way any change to the repo would trigger a shower rebuild and deploy to Netlify servers, which allows for a really easy way to create and share Shower presentation without the need to install anything locally.
By doing this you would get a GitHub repo linked with Netlify in a way any change to the repo would trigger a shower rebuild and deploy to Netlify servers, which allows for a really easy way to create and share Shower presentation without the need to install anything locally.
## Advanced
......
gulpfile.js
View file @ 5e1037df
......@@ -4,7 +4,6 @@ const merge = require('merge-stream');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const rsync = require('gulp-rsync');
const sequence = require('run-sequence');
const zip = require('gulp-zip');
const pages = require('gh-pages');
const browserSync = require('browser-sync').create();
......@@ -70,6 +69,10 @@ gulp.task('prepare', () => {
});
gulp.task('clean', () => {
return del('prepared/**');
});
gulp.task('zip', () => {
return gulp.src('prepared/**')
.pipe(zip('archive.zip'))
......@@ -80,25 +83,17 @@ gulp.task('upload', () => {
return pages.publish('prepared')
});
gulp.task('archive', (callback) => {
sequence(
'prepare',
'zip',
'clean', callback
)
});
gulp.task('archive', gulp.series(
'prepare',
'zip',
'clean'
));
gulp.task('publish', (callback) => {
sequence(
'prepare',
'upload',
'clean', callback
)
});
gulp.task('clean', () => {
return del('prepared/**');
});
gulp.task('publish', gulp.series(
'prepare',
'upload',
'clean'
));
gulp.task('serve', () => {
browserSync.init({
......@@ -113,5 +108,3 @@ gulp.task('serve', () => {
browserSync.reload();
});
});
gulp.task('default', ['serve']);
index.html
View file @ 5e1037df
......@@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/shower-ribbon/styles/screen-16x10.css">
<link rel="stylesheet" href="node_modules/shower-ribbon/styles/styles.css">
</head>
<body class="shower list">
......@@ -19,37 +19,38 @@
<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
<figure>
<img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park">
<figcaption class="white">
<figcaption class="copyright right white">
<a href="http://fiftyfootshadows.net/">© John Carey</a>
</figcaption>
</figure>
<style>
#cover h2 {
margin:30px 0 0;
color:#FFF;
text-align:center;
font-size:70px;
}
margin: 30px 0 0;
color: white;
text-align: center;
font-size: 70px;
}
#cover p {
margin:10px 0 0;
text-align:center;
color:#FFF;
font-style:italic;
font-size:20px;
}
#cover p a {
color:#FFF;
}
margin: 10px 0 0;
text-align: center;
color: white;
font-style: italic;
font-size: 20px;
}
#cover p a {
color: white;
}
</style>
</section>
<section class="slide">
<h2>Shower key features</h2>
<ol>
<li>Built on HTML, CSS and vanilla JavaScript</li>
<li>Built on HTML, CSS and JavaScript</li>
<li>Works in all modern browsers</li>
<li>Themes are separated from engine</li>
<li>Modular and extensible</li>
<li>Fully keyboard accessible</li>
<li>Printable to PDF</li>
</ol>
......@@ -63,7 +64,10 @@
<section class="slide">
<h2>Two columns if you like</h2>
<p class="double">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
<div class="columns two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
</div>
</section>
<section class="slide">
......@@ -146,14 +150,14 @@
<h2>Pictures</h2>
<figure>
<img class="cover" src="pictures/picture.jpg" alt="Orange typewriter on a wooden table close-up">
<figcaption class="white">
<figcaption class="copyright right white">
<a href="http://fiftyfootshadows.net/">© John Carey</a>
</figcaption>
</figure>
<style>
#picture h2 {
color:#FFF;
}
color: white;
}
</style>
</section>
......@@ -172,10 +176,6 @@
</ol>
</section>
<section class="slide grid">
<h2>All nicely aligned to grid</h2>
</section>
<section class="slide" id="see-more">
<h2 class="shout">
<img src="pictures/logo.svg" alt="Shower logo">
......@@ -183,12 +183,13 @@
</h2>
<style>
#see-more h2 {
font-size:100px
}
font-size: 100px
}
#see-more img {
width:0.72em;
height:0.72em;
}
width: 0.72em;
height: 0.72em;
}
</style>
</section>
......
package-lock.json
View file @ 5e1037df
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 5e1037df
......@@ -29,23 +29,22 @@
"dependencies": {
"shower-core": "^2.1.0",
"shower-material": "^1.1.0",
"shower-ribbon": "^2.1.0"
"shower-ribbon": "^3.0.1"
},
"devDependencies": {
"browser-sync": "^2.18.12",
"del": "^3.0.0",
"gh-pages": "^1.1.0",
"gulp": "^3.9.1",
"gh-pages": "^1.2.0",
"gulp": "^4.0.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^1.0.0",
"gulp-rsync": "0.0.8",
"gulp-zip": "^4.0.0",
"merge-stream": "^1.0.0",
"path-exists-cli": "^1.0.0",
"run-sequence": "^2.1.0"
"path-exists-cli": "^1.0.0"
},
"scripts": {
"start": "gulp",
"start": "gulp serve",
"prepare": "gulp prepare",
"archive": "gulp archive",
"publish": "gulp publish",
......
pictures/cover.jpg
View replaced file @ 72b71465 View file @ 5e1037df
pictures/cover.jpg

181 KB | W: | H:

pictures/cover.jpg

168 KB | W: | H:

pictures/cover.jpg
pictures/cover.jpg
pictures/cover.jpg
pictures/cover.jpg
  • 2-up
  • Swipe
  • Onion skin
pictures/picture.jpg
View replaced file @ 72b71465 View file @ 5e1037df
pictures/picture.jpg

140 KB | W: | H:

pictures/picture.jpg

94.5 KB | W: | H:

pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment