Add slides sub-directories for Reveal.js
This commit is contained in:
parent
c79d949569
commit
76674130d4
395 changed files with 0 additions and 0 deletions
622
goodbye-drush-make-hello-composer/2017-11-17-drupal-bristol/slides/index.html
Executable file
622
goodbye-drush-make-hello-composer/2017-11-17-drupal-bristol/slides/index.html
Executable file
|
|
@ -0,0 +1,622 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Goodbye Drush Make. Hello Composer!</title>
|
||||
|
||||
<meta name="description" content="Goodbye Drush Make. Hello Composer!">
|
||||
<meta name="author" content="Oliver Davies">
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<link rel="stylesheet" href="css/reveal.css">
|
||||
<link rel="stylesheet" href="css/theme/opdavies.css" id="theme">
|
||||
<link rel="stylesheet" href="css/tomorrow-night-bright.css">
|
||||
|
||||
<!-- Printing and PDF exports -->
|
||||
<script>
|
||||
var link = document.createElement( 'link' );
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
|
||||
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
||||
</script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="lib/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>
|
||||
<h1 class="is-big">
|
||||
Goodbye Drush Make. Hello Composer!
|
||||
</h1>
|
||||
|
||||
<img
|
||||
src="images/composer.png"
|
||||
alt=""
|
||||
class="no-border no-shadow"
|
||||
style="max-height: 300px">
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img src="images/drush-make-talk.png" alt="">
|
||||
</section>
|
||||
|
||||
<section data-background-transition="none">
|
||||
<section>
|
||||
<h2>Oliver Davies</h2>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<ul class="bullets medium">
|
||||
<li>Senior Drupal/PHP Developer</li>
|
||||
<li>Appnovation Technologies</li>
|
||||
<li>@opdavies</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="column is-3">
|
||||
<img class="no-border no-shadow" src="images/me_thumb.jpg">
|
||||
<img class="no-border no-shadow" src="images/appnovation.png">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Also...</h2>
|
||||
|
||||
<ul class="bullets medium">
|
||||
<li>Former Drupal Association employee</li>
|
||||
<li>Drupal 7 and 8 core contributor and mentor</li>
|
||||
<li>Co-organiser of Drupal Bristol, SWDUG and PHPSW</li>
|
||||
<li>Co-founder and co-organiser of DrupalCamp Bristol</li>
|
||||
<li>Symfony/Silex/Laravel hobbyist</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-background-transition="none">
|
||||
<section
|
||||
data-background="#0076C2"
|
||||
data-background-transition="none">
|
||||
<h2 class="is-white">
|
||||
The "Old" Ways
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>
|
||||
Monolith repository
|
||||
</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>Everything in one repository</li>
|
||||
<li>Easiest to set up, most difficult to maintain</li>
|
||||
<li>Core, contrib code in your repository</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section data-background-transition="none">
|
||||
<h2>
|
||||
Drush Make
|
||||
</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>Define your site as code</li>
|
||||
<li>Automated updates, patching</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>
|
||||
Drush Make
|
||||
</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>Drupal specific</li>
|
||||
<li>Multiple repositories</li>
|
||||
<li>Can't update an existing build</li>
|
||||
<li>Need to "compile"</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
drupalbristol.make
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="is-medium">
|
||||
api = 2
|
||||
core = 7.x
|
||||
|
||||
projects[drupal][type] = "core"
|
||||
projects[drupal][version] = "7.51"
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
drupalbristol.make
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="is-medium">
|
||||
api = 2
|
||||
core = 7.x
|
||||
|
||||
projects[drupal][type] = "core"
|
||||
projects[drupal][version] = "7.51"
|
||||
|
||||
projects[pathauto] = "1.3"
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
drupalbristol.make
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="is-medium">
|
||||
api = 2
|
||||
core = 7.x
|
||||
|
||||
projects[drupal][type] = "core"
|
||||
projects[drupal][version] = "7.51"
|
||||
|
||||
projects[pathauto][version] = "1.3"
|
||||
projects[pathauto][subdir] = "contrib"
|
||||
projects[pathauto][patch][] = "..."
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Building
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="bash is-medium">
|
||||
$ drush make drupalbristol.make some-dir
|
||||
|
||||
Beginning to build drupalbristol.make.
|
||||
drupal-7.51 downloaded.
|
||||
pathauto-7.x-1.3 downloaded.
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Building
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="bash is-medium">
|
||||
$ drush make drupalbristol.make some-dir
|
||||
|
||||
Base path some-dir already exists.
|
||||
exit 1
|
||||
</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-background-transition="none">
|
||||
<section
|
||||
data-background="#0076C2"
|
||||
data-background-transition="none">
|
||||
<h2 class="is-white">
|
||||
Composer
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Composer</h2>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<ul class="bullets">
|
||||
<li>Dependency manager for PHP</li>
|
||||
<li>Downloads packages into a <code>vendor</code> directory</li>
|
||||
<li>Downloads packages from one or more repositories</li>
|
||||
<li>Generates <code>composer.json</code> and <code>composer.lock</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="column is-3">
|
||||
<img src="images/composer.png" alt="" class="no-border no-shadow">
|
||||
</div>
|
||||
|
||||
<aside class="notes">
|
||||
vendor directory is usually removed from your version control repo.
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Adding Packages
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="bash is-medium">
|
||||
$ composer require silex/silex
|
||||
|
||||
...
|
||||
|
||||
- Installing pimple/pimple (v3.0.2)
|
||||
Downloading: 100%
|
||||
|
||||
- Installing silex/silex (v2.0.4)
|
||||
Downloading: 100%
|
||||
|
||||
Writing lock file
|
||||
Generating autoload files
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
composer.json
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="json is-big">
|
||||
"require": {
|
||||
"silex/silex": "^2.0"
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Composer in Drupal</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>Dependency management and autoloading in Drupal 8 (no included <code>vendor</code> directory since 8.1.x)</li>
|
||||
<li>Not included with Drupal 7 (Composer Manager and xautoload in contrib)</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-background-transition="none">
|
||||
<section
|
||||
data-background="#0076C2"
|
||||
data-background-transition="none">
|
||||
<h2 class="is-white">
|
||||
Building Drupal with Composer
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Building Drupal with Composer</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>Use <code>drupal/drupal</code> from Packagist</li>
|
||||
<li>Use the <code>drupal-composer/drupal-project</code> template</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<pre><code data-trim class="bash is-big">
|
||||
$ composer create-project \
|
||||
drupal/drupal \
|
||||
my_site_name ^8.2 --no-dev
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<pre><code data-trim class="bash is-medium">
|
||||
$ composer create-project \
|
||||
drupal-composer/drupal-project:8.x-dev \
|
||||
my_site_name-dir --stability dev \
|
||||
--no-interaction
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Comparison</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li><code>drupal/drupal</code> is a minimum setup, no extras, uses the repo root as the docroot</li>
|
||||
<li><code>drupal-composer/drupal-project</code> includes installer paths, scaffold files, Drush, Drupal Console</li>
|
||||
<li><code>drupal-composer/drupal-project</code> available for Drupal 7 and Drupal 8</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-background-transition="none">
|
||||
<section
|
||||
data-background="#0076C2"
|
||||
data-background-transition="none">
|
||||
<h2 class="is-white">
|
||||
Managing contrib dependencies
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Add Drupal.org as a repository
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="json is-big">
|
||||
$ composer config \
|
||||
repositories.drupal composer \
|
||||
https://packages.drupal.org/8
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
composer.json
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="json is-medium">
|
||||
"repositories": {
|
||||
"drupal": {
|
||||
"type": "composer",
|
||||
"url": "https://packages.drupal.org/8"
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Configuring paths
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="json is-small">
|
||||
"extra": {
|
||||
"installer-paths": {
|
||||
"modules/contrib/{$name}": ["type:drupal-module"],
|
||||
"modules/custom/{$name}": ["type:drupal-custom-module"],
|
||||
"profiles/contrib/{$name}": ["type:drupal-profile"],
|
||||
"themes/contrib/{$name}": ["type:drupal-theme"],
|
||||
"themes/custom/{$name}": ["type:drupal-custom-theme"]
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<aside class="notes">
|
||||
Uses the composer/installers plugin
|
||||
Allows for adding packages into directories other than "vendor".
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Adding modules
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="bash is-small">
|
||||
$ composer require drupal/pathauto:^1.0
|
||||
|
||||
...
|
||||
|
||||
- Installing drupal/token (1.0.0-beta2)
|
||||
Downloading: 100%
|
||||
|
||||
- Installing drupal/ctools (3.0.0-alpha27)
|
||||
Downloading: 100%
|
||||
|
||||
- Installing drupal/pathauto (1.0.0-beta1)
|
||||
Downloading: 100%
|
||||
</code></pre>
|
||||
|
||||
<aside class="notes">
|
||||
Also downloads token and ctools as they are dependencies.
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Adding modules with dependencies
|
||||
</h2>
|
||||
|
||||
<pre><code data-trim class="bash is-small">
|
||||
$ composer require drupal/address:^1.0
|
||||
|
||||
...
|
||||
|
||||
- Installing commerceguys/addressing (v1.0.0-beta1)
|
||||
Downloading: 100%
|
||||
|
||||
...
|
||||
|
||||
- Installing drupal/address (1.0.0-rc3)
|
||||
Downloading: 100%
|
||||
</code></pre>
|
||||
|
||||
<aside class="notes">
|
||||
Also downloads the commerceguys/addressing library as it’s added as a dependency within the modules’s composer.json.
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Adding themes
|
||||
</h2>
|
||||
|
||||
<pre><code class="bash is-medium">
|
||||
$ composer require drupal/omega:^5.0
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Patching
|
||||
</h2>
|
||||
|
||||
<pre><code class="bash is-medium">
|
||||
$ composer require cweagans/composer-patches
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Patching
|
||||
</h2>
|
||||
|
||||
<pre><code class="json is-small">
|
||||
"extra": {
|
||||
"patches": {
|
||||
"drupal/drupal": {
|
||||
"Add startup configuration for PHP server":
|
||||
"https://www.drupal.org/files/issues/1543858-30.patch"
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-background-transition="none">
|
||||
<section
|
||||
data-background="#0076C2"
|
||||
data-background-transition="none">
|
||||
<h2 class="is-white">
|
||||
Updating
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>composer install vs update</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>"install" updates local code with versions defined in <code>composer.lock</code></li>
|
||||
<li>"update" updates <code>composer.lock</code> with the latest available versions</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#000"
|
||||
data-background-transition="none">
|
||||
|
||||
<h2 class="is-white">
|
||||
Updating
|
||||
</h2>
|
||||
|
||||
<pre><code class="bash is-big">
|
||||
$ composer update \
|
||||
--with-dependencies
|
||||
|
||||
$ composer install --no-dev \
|
||||
--optimize-autoloader
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Updating</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>Update the versions in composer.lock</li>
|
||||
<li>Deploy new version to the server</li>
|
||||
<li>Update local versions with <code>composer install</code></li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>A real example</h2>
|
||||
|
||||
<img
|
||||
src="images/drupal-bristol-github.png"
|
||||
alt=""
|
||||
class="no-border no-shadow">
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Resources</h2>
|
||||
|
||||
<ul class="bullets">
|
||||
<li>https://getcomposer.org</li>
|
||||
<li>https://www.drupal.org/docs/develop/using-composer/using-composer-to-manage-drupal-site-dependencies</li>
|
||||
<li>https://github.com/drupal-composer/drupal-project</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-background="#0076C2"
|
||||
data-background-transition="none">
|
||||
<h2 class="is-white">Questions?</h2>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="lib/js/head.min.js"></script>
|
||||
<script src="js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
// More info https://github.com/hakimel/reveal.js#configuration
|
||||
Reveal.initialize({
|
||||
controls: false,
|
||||
progress: false,
|
||||
history: true,
|
||||
center: true,
|
||||
transition: 'none', // none/fade/slide/convex/concave/zoom
|
||||
|
||||
// More info https://github.com/hakimel/reveal.js#dependencies
|
||||
dependencies: [
|
||||
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||
{ src: 'plugin/zoom-js/zoom.js', async: true },
|
||||
{ src: 'plugin/notes/notes.js', async: true }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue