Cosmetics.

CHANGELOG.md

@@ -0,0 +1,2 @@
+### 1.0.0
+* Initial project release.

README.md

@@ -2,6 +2,8 @@
 
 ##### PHP project skeleton.
 
+![Intro](intro.gif)
+
 Vagrant box featuring:
 - Debian Jessie
 - Apache
@@ -25,6 +27,7 @@ Vagrant box featuring:
     mailhog: `http://localhost:8025`
 4. enjoy.
 
+
 ## Requirements
 
 - [Vagrant](https://github.com/hashicorp/vagrant)
@@ -74,10 +77,17 @@ Site configurations can be adjusted as needed, see [VM/roles/dev-setup/files/dev
 
 Ports can be adjusted via [VM/roles/dev-setup/files/ports.conf](VM/roles/dev-setup/files/ports.conf).
 
+
 ## Credits
 
 [Jeff Geerling](https://github.com/geerlingguy) for his awesome Ansible roles.
 
 [Ansible](https://github.com/ansible) for their awesome configuration management tool.
 
 [Hashicorp](https://github.com/hashicorp) for their awesome virtualization managment tool.
+
+##
+
+
+#### [CHANGELOG](CHANGELOG.md)
+#### [LICENSE](LICENSE)

VM/site.retry

@@ -1 +1 @@
-default
+vm-php

VM/site.yml

@@ -2,7 +2,7 @@
 ---
 
 - name: vm-php
-  hosts: default
+  hosts: vm-php
   become: yes
   roles:
     - role: dotdeb-php7

Vagrantfile

@@ -1,82 +1,24 @@
 # -*- mode: ruby -*-
 # vi: set ft=ruby :
 
-# All Vagrant configuration is done below. The "2" in Vagrant.configure
-# configures the configuration version (we support older styles for
-# backwards compatibility). Please don't change it unless you know what
-# you're doing.
-Vagrant.configure("2") do |config|
-  # The most common configuration options are documented and commented below.
-  # For a complete reference, please see the online documentation at
-  # https://docs.vagrantup.com.
+vmname = "vm-php"
 
-  # Every Vagrant development environment requires a box. You can search for
-  # boxes at https://atlas.hashicorp.com/search.
+Vagrant.configure("2") do |config|
+  config.vm.define vmname
   config.vm.box = "speedlight/jessie-vbguest"
+  config.vm.provider "virtualbox" do |virtualbox|
+    virtualbox.name = vmname
+  end
 
-  # Disable automatic box update checking. If you disable this, then
-  # boxes will only be checked for updates when the user runs
-  # `vagrant box outdated`. This is not recommended.
-  # config.vm.box_check_update = false
-
-  # Create a forwarded port mapping which allows access to a specific port
-  # within the machine from a port on the host machine. In the example below,
-  # accessing "localhost:8080" will access port 80 on the guest machine.
-  #
   # DEV
   config.vm.network "forwarded_port", guest: 80, host: 8080
-  # DIST
+  # QA
   config.vm.network "forwarded_port", guest: 8081, host: 8081
   # MAILHOG
   config.vm.network "forwarded_port", guest: 8025, host: 8025
-  config.vm.post_up_message = "dev: http://localhost:8080\nqa: http://localhost:8081\nmailhog: http://localhost:8025"
-
-  # Create a private network, which allows host-only access to the machine
-  # using a specific IP.
-  # config.vm.network "private_network", ip: "192.168.33.10"
-
-  # Create a public network, which generally matched to bridged network.
-  # Bridged networks make the machine appear as another physical device on
-  # your network.
-  # config.vm.network "public_network"
-
-  # Share an additional folder to the guest VM. The first argument is
-  # the path on the host to the actual folder. The second argument is
-  # the path on the guest to mount the folder. And the optional third
-  # argument is a set of non-required options.
-  # config.vm.synced_folder ".", "/vagrant", :mount_options => ['dmode=777,fmode=666']
-
-  # Provider-specific configuration so you can fine-tune various
-  # backing providers for Vagrant. These expose provider-specific options.
-  # Example for VirtualBox:
-  #
-  # config.vm.provider "virtualbox" do |vb|
-  #   # Display the VirtualBox GUI when booting the machine
-  #   vb.gui = true
-  #
-  #   # Customize the amount of memory on the VM:
-  #   vb.memory = "1024"
-  # end
-  #
-  # View the documentation for the provider you are using for more
-  # information on available options.
 
-  # Define a Vagrant Push strategy for pushing to Atlas. Other push strategies
-  # such as FTP and Heroku are also available. See the documentation at
-  # https://docs.vagrantup.com/v2/push/atlas.html for more information.
-  # config.push.define "atlas" do |push|
-  #   push.app = "YOUR_ATLAS_USERNAME/YOUR_APPLICATION_NAME"
-  # end
+  config.vm.post_up_message = "dev:\thttp://localhost:8080\nqa:\t\thttp://localhost:8081\nmailhog:\thttp://localhost:8025"
 
-  # Enable provisioning with a shell script. Additional provisioners such as
-  # Puppet, Chef, Ansible, Salt, and Docker are also available. Please see the
-  # documentation for more information about their specific syntax and use.
-  # config.vm.provision "shell", inline: <<-SHELL
-  #   apt-get update
-  #   apt-get install -y apache2
-  # SHELL
-
-  # Provision via Ansible
   config.vm.provision "ansible" do |ansible|
     ansible.playbook = "VM/site.yml"
     ansible.ask_sudo_pass = "true"

app/dist/index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Your new web project | qa</title>
+    <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      font-family: monospace;
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    header {
+      margin-top: 10%;
+    }
+
+    footer {
+      bottom: 0;
+      width: 100%;
+      position: fixed;
+      text-align: center;
+      display: none;
+    }
+
+    #environments {
+      flex-wrap: wrap;
+      margin-top: 2rem;
+      margin: 2rem 0 0 -7rem;
+      display: none;
+    }
+
+    dt, dd {
+      width: 50%;
+      margin: 0 0 1rem 0;
+    }
+
+    dt {
+      text-align: right;
+    }
+
+    dd {
+      text-align: left;
+      padding-left: 1rem;
+    }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1 id="heading"></h1>
+    </header>
+    <main>
+      <p id="message"></p>
+      <dl id="environments">
+        <dt>Source</dt>
+        <dd><a href="http://localhost:8080">http://localhost:8080</a></dd>
+        <dt>QA</dt>
+        <dd><a href="http://localhost:8081">http://localhost:8081</a></dd>
+        <dt>Mailhog</dt>
+        <dd><a href="http://localhost:8025">http://localhost:8025</a></dd>
+      </dl>
+    </main>
+    <footer id="footer">2017 | <a href="https://github.com/haensl/vm-php">https://github.com/haensl/vm-php</a></footer>
+  </body>
+  <script>
+    (() => {
+      const appendCharsToElement = (text, element, msPerChar) =>
+        new Promise((resolve) => {
+          if (text.length) {
+            element.innerHTML = `${element.innerHTML}${text.slice(0, 1)}`;
+            const remaining = text.slice(1);
+            if (remaining.length) {
+              window.setTimeout(() => {
+                appendCharsToElement(remaining, element, msPerChar)
+                  .then(() => resolve());
+              }, msPerChar);
+            } else {
+              resolve();
+            }
+          }
+        });
+
+      window.setTimeout(() => {
+        const footer = document.getElementById('footer');
+        const currentYear = (new Date).getFullYear();
+        if (parseInt(footer.innerHTML.slice(0, 4), 10) !==  currentYear) {
+          footer.innerHTML = `${currentYear}${footer.innerHTML.slice(4)}`;
+        }
+
+        footer.setAttribute('style', 'display:block');
+        appendCharsToElement('Welcome to your new web project.', document.getElementById('heading'), 75)
+          .then(() => appendCharsToElement('You have successfully reached the qa environment of your project.', document.getElementById('message'), 50))
+          .then(() => {
+            document.getElementById('environments')
+              .setAttribute('style', 'display:flex');
+          });
+      });
+    })();
+  </script>
+</html>

app/src/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Your new web project | src</title>
+    <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      font-family: monospace;
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    header {
+      margin-top: 10%;
+    }
+
+    footer {
+      bottom: 0;
+      width: 100%;
+      position: fixed;
+      text-align: center;
+      display: none;
+    }
+
+    #environments {
+      flex-wrap: wrap;
+      margin-top: 2rem;
+      margin: 2rem 0 0 -7rem;
+      display: none;
+    }
+
+    dt, dd {
+      width: 50%;
+      margin: 0 0 1rem 0;
+    }
+
+    dt {
+      text-align: right;
+    }
+
+    dd {
+      text-align: left;
+      padding-left: 1rem;
+    }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1 id="heading"></h1>
+    </header>
+    <main>
+      <p id="message"></p>
+      <dl id="environments">
+        <dt>Source</dt>
+        <dd><a href="http://localhost:8080">http://localhost:8080</a></dd>
+        <dt>QA</dt>
+        <dd><a href="http://localhost:8081">http://localhost:8081</a></dd>
+        <dt>Mailhog</dt>
+        <dd><a href="http://localhost:8025">http://localhost:8025</a></dd>
+      </dl>
+    </main>
+    <footer id="footer">2017 | <a href="https://github.com/haensl/vm-php">https://github.com/haensl/vm-php</a></footer>
+  </body>
+  <script>
+    (() => {
+      const appendCharsToElement = (text, element, msPerChar) =>
+        new Promise((resolve) => {
+          if (text.length) {
+            element.innerHTML = `${element.innerHTML}${text.slice(0, 1)}`;
+            const remaining = text.slice(1);
+            if (remaining.length) {
+              window.setTimeout(() => {
+                appendCharsToElement(remaining, element, msPerChar)
+                  .then(() => resolve());
+              }, msPerChar);
+            } else {
+              resolve();
+            }
+          }
+        });
+
+      window.setTimeout(() => {
+        const footer = document.getElementById('footer');
+        const currentYear = (new Date).getFullYear();
+        if (parseInt(footer.innerHTML.slice(0, 4), 10) !==  currentYear) {
+          footer.innerHTML = `${currentYear}${footer.innerHTML.slice(4)}`;
+        }
+
+        footer.setAttribute('style', 'display:block');
+
+        appendCharsToElement('Welcome to your new web project.', document.getElementById('heading'), 75)
+          .then(() => appendCharsToElement('You have successfully reached the source of your project.', document.getElementById('message'), 50))
+          .then(() => {
+            document.getElementById('environments')
+              .setAttribute('style', 'display:flex');
+          });
+      });
+    })();
+  </script>
+</html>