Add multi-stage builds and fix safari scrollbar

Dockerfile

@@ -12,8 +12,15 @@ RUN go get -v -d ./...
 
 RUN CGO_ENABLED=0 go build -a -installsuffix nocgo -o /go/bin/play-with-docker .
 
-# Set the workdir to be /go/bin which is where the binaries are built
-WORKDIR /go/bin
+FROM alpine
 
-# Export the WORKDIR as a tar stream
-CMD tar -cf - .
+RUN apk --update add ca-certificates
+RUN mkdir -p /app/pwd
+
+COPY --from=0 /go/bin/play-with-docker /app/play-with-docker
+COPY ./www /app/www
+
+WORKDIR /app
+CMD ["./play-with-docker"]
+
+EXPOSE 3000

Dockerfile.dind

@@ -1,14 +1,8 @@
-ARG VERSION=17.05.0-ce-dind
-FROM docker:${VERSION}
+ARG VERSION=docker:17.05.0-ce-dind
+FROM ${VERSION}
 
 RUN apk add --no-cache git tmux py2-pip apache2-utils vim build-base gettext-dev curl bash-completion bash util-linux jq
 
-ENV COMPOSE_VERSION=1.13.0
-ENV MACHINE_VERSION=v0.11.0
-# Install Compose and Machine
-RUN pip install docker-compose==${COMPOSE_VERSION}
-RUN curl -L https://github.com/docker/machine/releases/download/${MACHINE_VERSION}/docker-machine-Linux-x86_64 \
-    -o /usr/bin/docker-machine && chmod +x /usr/bin/docker-machine
 
 # Compile and install httping
 # (used in orchestration workshop, and very useful anyway)
@@ -18,6 +12,13 @@ RUN mkdir -p /opt && cd /opt && \
     ./configure && make install LDFLAGS=-lintl && \
     rm -rf httping-2.5
 
+ENV COMPOSE_VERSION=1.13.0
+ENV MACHINE_VERSION=v0.11.0
+# Install Compose and Machine
+RUN pip install docker-compose==${COMPOSE_VERSION}
+RUN curl -L https://github.com/docker/machine/releases/download/${MACHINE_VERSION}/docker-machine-Linux-x86_64 \
+    -o /usr/bin/docker-machine && chmod +x /usr/bin/docker-machine
+
 # Add bash completion
 RUN mkdir /etc/bash_completion.d && curl https://raw.githubusercontent.com/docker/docker/master/contrib/completion/bash/docker -o /etc/bash_completion.d/docker
 

build.sh

@@ -1,3 +0,0 @@
-#!/bin/bash
-
-docker build -t builder .&& docker run --rm builder | docker build -t franela/play-with-docker:latest -

www/assets/style.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Rationale');
 
 .selected button {
-	background-color: rgba(158,158,158,0.2);
+    background-color: rgba(158,158,158,0.2);
 }
 
 md-card-content.terminal-container {
@@ -49,3 +49,13 @@ md-input-container .md-errors-spacer {
 .stats {
     min-height: 230px;
 }
+
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}