basic slides

.editorconfig

@@ -0,0 +1,24 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# It's recommended to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.pug]
+trim_trailing_whitespace = false
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,79 @@
+/.idea/
+/bespoke-theme-*/
+/dist/
+/node_modules/
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+

README.adoc

@@ -0,0 +1,58 @@
+= Medieval Inc
+:uri-bespoke: http://markdalgleish.com/projects/bespoke.js
+:uri-bundler: http://bundler.io
+:uri-generator-bespoke: https://github.com/bespokejs/generator-bespoke
+:uri-gulp: https://gulpjs.com
+:uri-node: https://nodejs.org
+:uri-nvm: https://github.com/creationix/nvm
+:uri-ruby: https://www.ruby-lang.org
+:uri-rvm: http://rvm.io
+
+[quote]
+A {uri-bespoke}[Bespoke.js] presentation generated by {uri-generator-bespoke}[generator-bespoke].
+
+== View slides locally
+
+First, ensure you have the following installed:
+
+. {uri-node}[Node.js] >= 4.2 footnote:[We strongly recommend using {uri-nvm}[nvm] to manage Node.]
+. {uri-gulp}[Gulp] (command line interface only)
+
+ $ npm install -g gulp-cli
+
+
+Next, install dependencies (if you ran the generator with the `--skip-install` switch):
+
+ $ npm install
+
+Finally, build and serve the presentation!
+
+ $ gulp serve
+
+You can view the presentation in your browser at the URL displayed in the console.
+
+By default, the preview server runs on port 8080.
+To change this default, you can assign a different number to the PORT environment variable:
+
+ $ PORT=8888 gulp serve
+
+To build the presentation without starting the preview server, use:
+
+ $ gulp
+
+In both cases, the files are built into the [.path]_dist_ directory.
+You can view the slides outside of the local preview server by navigating to [.path]_dist/index.html_ in your browser.
+
+== Publish to GitHub Pages
+
+The Gulp build includes a task to publish your presentation to GitHub Pages.
+
+First, make sure you have initialized the project as a git repository and linked it to a GitHub project.
+The task assumes that the git remote named `origin` points to the repository on GitHub.
+
+Now you can build the presentation and publish it to GitHub Pages using:
+
+ $ gulp publish
+
+The files in the [.path]_dist_ directory end up in the `gh-pages` branch in the repository on GitHub.
+From there, they can be viewed in a browser from anywhere on the web.

gulpfile.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var pkg = require('./package.json'),
+  autoprefixer = require('gulp-autoprefixer'),
+  browserify = require('browserify'),
+  buffer = require('vinyl-buffer'),
+  connect = require('gulp-connect'),
+  csso = require('gulp-csso'),
+  del = require('del'),
+  ghpages = require('gh-pages'),
+  gulp = require('gulp'),
+  gutil = require('gulp-util'),
+  path = require('path'),
+  plumber = require('gulp-plumber'),
+  pug = require('gulp-pug'),
+  rename = require('gulp-rename'),
+  source = require('vinyl-source-stream'),
+  stylus = require('gulp-stylus'),
+  through = require('through'),
+  uglify = require('gulp-uglify'),
+  isDist = process.argv.indexOf('serve') === -1,
+  // browserifyPlumber fills the role of plumber() when working with browserify
+  browserifyPlumber = function(e) {
+    if (isDist) throw e;
+    gutil.log(e.stack);
+    this.emit('end');
+  };
+
+gulp.task('js', ['clean:js'], function() {
+  // see https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623
+  return browserify('src/scripts/main.js').bundle()
+    .on('error', browserifyPlumber)
+    .pipe(source('src/scripts/main.js'))
+    .pipe(buffer())
+    .pipe(isDist ? uglify() : through())
+    .pipe(rename('build.js'))
+    .pipe(gulp.dest('dist/build'))
+    .pipe(connect.reload());
+});
+
+gulp.task('html', ['clean:html'], function() {
+  return gulp.src('src/index.pug')
+    .pipe(isDist ? through() : plumber())
+    .pipe(pug({ pretty: '  ' }))
+    .pipe(rename('index.html'))
+    .pipe(gulp.dest('dist'))
+    .pipe(connect.reload());
+});
+
+gulp.task('css', ['clean:css'], function() {
+  return gulp.src('src/styles/main.styl')
+    .pipe(isDist ? through() : plumber())
+    .pipe(stylus({ 'include css': true, paths: ['./node_modules'] }))
+    .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false }))
+    .pipe(isDist ? csso() : through())
+    .pipe(rename('build.css'))
+    .pipe(gulp.dest('dist/build'))
+    .pipe(connect.reload());
+});
+
+gulp.task('images', ['clean:images'], function() {
+  return gulp.src('src/images/**/*')
+    .pipe(gulp.dest('dist/images'))
+    .pipe(connect.reload());
+});
+
+gulp.task('fonts', ['clean:fonts'], function() {
+  return gulp.src('src/fonts/*')
+    .pipe(gulp.dest('dist/fonts'))
+    .pipe(connect.reload());
+});
+
+gulp.task('clean', function() {
+  return del.sync('dist');
+});
+
+gulp.task('clean:html', function() {
+  return del('dist/index.html');
+});
+
+gulp.task('clean:js', function() {
+  return del('dist/build/build.js');
+});
+
+gulp.task('clean:css', function() {
+  return del('dist/build/build.css');
+});
+
+gulp.task('clean:images', function() {
+  return del('dist/images');
+});
+
+gulp.task('clean:fonts', function() {
+  return del('dist/fonts');
+});
+
+gulp.task('connect', ['build'], function() {
+  connect.server({ root: 'dist', port: process.env.PORT || 8080, livereload: true });
+});
+
+gulp.task('watch', function() {
+  gulp.watch('src/**/*.pug', ['html']);
+  gulp.watch('src/scripts/**/*.js', ['js']);
+  gulp.watch('src/styles/**/*.styl', ['css']);
+  gulp.watch('src/images/**/*', ['images']);
+  gulp.watch('src/fonts/*', ['fonts']);
+});
+
+gulp.task('publish', ['clean', 'build'], function(done) {
+  ghpages.publish(path.join(__dirname, 'dist'), { logger: gutil.log }, done);
+});
+
+// old alias for publishing on gh-pages
+gulp.task('deploy', ['publish']);
+
+gulp.task('build', ['js', 'html', 'css', 'images', 'fonts']);
+
+gulp.task('serve', ['connect', 'watch']);
+
+gulp.task('default', ['build']);

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "presentation-medieval-inc",
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "bespoke": "^1.1.0",
+    "bespoke-bullets": "^1.1.0",
+    "bespoke-classes": "^1.0.0",
+    "bespoke-extern": "^1.0.0",
+    "bespoke-hash": "^1.0.2",
+    "bespoke-nav": "^1.0.2",
+    "bespoke-prism": "^1.0.1",
+    "bespoke-scale": "^1.0.1",
+    "browserify": "^14.4.0",
+    "del": "^3.0.0",
+    "gh-pages": "^1.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-connect": "^5.0.0",
+    "gulp-csso": "^3.0.0",
+    "gulp-plumber": "^1.1.0",
+    "gulp-pug": "^3.0.3",
+    "gulp-rename": "^1.2.2",
+    "gulp-stylus": "^2.6.0",
+    "gulp-uglify": "^3.0.0",
+    "gulp-util": "^3.0.8",
+    "normalizecss": "^3.0.0",
+    "through": "^2.3.8",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
+  },
+  "engines": {
+    "node": ">=4.2.0"
+  },
+  "dependencies": {
+    "bespoke-math": "^1.2.0"
+  }
+}

src/index.pug

@@ -0,0 +1,113 @@
+doctype html
+html
+  head
+    meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
+    title Medieval Inc
+
+    link(rel='stylesheet', type='text/css', href='build/build.css')
+
+  body
+
+    article.deck
+
+      section
+        h1 Pour apprendre
+        h2 Il faut faire :D
+
+      section
+        h2 Bienvenu à Flatland
+        img(src="images/mario.jpg" width=480)
+
+      section
+        img(src="images/medieval.png" width=280)
+
+      section
+        h2 Demande du client
+        p
+          | Bonjour Medieval Inc,
+          br
+          br
+          | Nous sommes à la recherche d'une entreprise ayant le savoir-faire pour améliorer un de nos produit, il s'agit d'un trébuchet de précision.
+          br
+          br
+          | Nous souhaiterions lui ajouter quelques améliorations modernes dont une aide à la visée, nous voudrions que le ballistère soit averti lorsque la hausse de la machine est correct et qu'il touchera au but.
+
+      section
+        h2 Cahier des charges
+        ul.build.build-items
+          li Concevoir le système la partie informatique de l'aide à la visée
+          li
+            | Le système devra s'interfacer avec une librairie développée par le client
+            ul
+              li PHP >= 7.2
+              li Composer
+
+      section
+        h2 Un peu de physique
+        div(class="math") y(t) = \frac{-g}{2\times{v_0}^2\times{cos(\alpha)}^2}x(t)+tan(\alpha)x(t)+h_0
+        p où:
+        ul
+          li g : accélération gravitationnelle en <span class="math">m.s^{-2}</span>
+          li <span class="math">\alpha</span> : angle de visée par rapport à l'horizontale en degrés de 0° à 90°
+          li <span class="math">v_0</span> : vitesse initiale au moment du lancé en <span class="math">m.s^{-1}</span>
+          li <span class="math">h_0</span> : hauteur initiale du lancé en <span class="math">m</span>
+      section
+        h2 Les acteurs
+        ul.build.build-items
+          li Possèdent un rôle plus ou moins important dans la suite de la réflexion et donc du développement.
+          li Il est nécessaire de les lister avant tout travail de réflexion.
+          li Dans notre cas:
+            ul.build.build-items
+              li La bibliothèque fournie par le client
+              li L'engin de siège
+
+      section
+        h2 La règle des 5W
+        ul.build.build-items
+          li Qui/ Par Qui : Il y a-t-il des limitations d'ordre personnelle
+          li Quoi : Qu'est ce que cet acteur représente
+          li Quand : Est ce que cet acteur a une portée limité dans le temps
+          li Comment : Comment va-t-il influencer la réflexion
+          li Pourquoi : La réflexion est modifié
+
+      section
+        h2 La bibliothèque du client
+        ul.build.build-items
+          li Qui/ Par Qui : Elle est fournie par le client et imposée
+          li
+            | Quoi :
+            br
+            | - La bibliothèque est une lib composer PHP >= 7.2
+            br
+            | - Une documentation est disponible
+            br
+            | - Donne toutes les informations nécessaires aux calculs:
+            ul
+              li la position de la cible
+              li la position de l'engin de siège
+          li Quand : Sera utilisé avant le calcul
+          li Comment : Appel à une instance et via des méthodes
+          li Pourquoi : Permettre le calcul
+
+
+      section
+        h2 L'engin de siège
+        ul.build.build-items
+          li Qui/ Par Qui : Appartient au client
+          li
+            | Quoi :
+            br
+            | - Il existe plusieurs modèle
+            br
+            | - Chacun de ces modèles possèdent des caractéristiques physique propre (vitesse de lancé)
+            br
+            | - Donne toutes les informations nécessaires aux calculs
+          li Quand : ( pas important dans la réflexion )
+          li Comment : ( pas important dans la réflexion )
+          li Pourquoi : ( pas important dans la réflexion )
+
+      section
+        iframe(src="https://www.geogebra.org/classic/q5qxr9j7" width=600 height=400)
+
+    script(src='build/build.js')

src/scripts/main.js

@@ -0,0 +1,22 @@
+// Require Node modules in the browser thanks to Browserify: http://browserify.org
+var bespoke = require('bespoke');
+var classes = require('bespoke-classes');
+var nav = require('bespoke-nav');
+var scale = require('bespoke-scale');
+var bullets = require('bespoke-bullets');
+var hash = require('bespoke-hash');
+var prism = require('bespoke-prism');
+var extern = require('bespoke-extern');
+var math = require('bespoke-math');
+
+// Bespoke.js
+bespoke.from({parent: 'article.deck', slides: 'section'}, [
+    classes(),
+    nav(),
+    scale(),
+    bullets('.build, .build-items > *:not(.build-items)'),
+    hash(),
+    prism(),
+    extern(bespoke),
+    math()
+]);

src/styles/base.styl

@@ -0,0 +1,83 @@
+// Base styles for a Bespoke presentation
+
+*, ::before, ::after
+  box-sizing inherit
+
+html
+  box-sizing border-box
+
+p, li
+  line-height 1.6
+
+p
+  margin 0 0 1rem 0
+
+ul, ol
+  padding 0 0 0 20px
+
+figure
+  margin 0
+
+img, video
+  vertical-align middle
+
+.deck
+  overflow hidden
+  font-feature-settings "kern" 1
+  text-rendering optimizeLegibility
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  // NOTE hide deck and slide content until Bespoke.js classes have been added
+  &:not(.bespoke-parent), section:not(.bespoke-slide)
+    display none
+
+.bespoke-parent, .bespoke-scale-parent
+  position absolute
+  top 0
+  right 0
+  bottom 0
+  left 0
+
+.bespoke-scale-parent, .bespoke-slide
+  pointer-events none
+
+.bespoke-slide
+  overflow hidden
+  // NOTE force opacity to start at 0 to avoid transition on load when using bespoke-scale
+  opacity 0
+  background-color #fff
+  position absolute
+  top 50%
+  left 50%
+  width 640px
+  margin-left -(@width / 2)
+  height 480px
+  margin-top -(@height / 2)
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  transition opacity 200ms ease-in-out 150ms
+
+.bespoke-active
+  pointer-events auto
+  opacity 1
+  // NOTE Webkit requires z-index to be 1 for elements to receive focus (may no longer apply)
+  z-index 1
+
+.bespoke-inactive
+  transition-delay 0
+
+.bespoke-bullet
+  transition opacity 200ms ease-in-out
+  &-inactive
+    visibility hidden
+
+.emphatic
+  background-color #222
+
+.emphatic-text
+  color #fff
+
+aside[role=note], aside[role=notes]
+  display none

src/styles/main.styl

@@ -0,0 +1,3 @@
+@require "normalizecss/normalize.css"
+@require "./base"
+@require "./user"

src/styles/user.styl

@@ -0,0 +1,9 @@
+// Put your custom styles here!
+
+// New to Stylus? Check out http://learnboost.github.io/stylus
+// You can use modern CSS thanks to Autoprefixer: https://github.com/ai/autoprefixer
+body
+  background-color #4a90e2
+
+  .bespoke-slide
+    background-color #4a90e2