How does it work slides

aixigo · Feb 20, 2019 · 389dd5e · 389dd5e
1 parent 41d9f37
commit 389dd5e
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 0 deletions.
diff --git a/presentation/css/highlight.js/idea.css b/presentation/css/highlight.js/idea.css
@@ -0,0 +1,97 @@
+/*
+
+Intellij Idea-like styling (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #000;
+  background: #fff;
+}
+
+.hljs-subst,
+.hljs-title {
+  font-weight: normal;
+  color: #000;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #808080;
+  font-style: italic;
+}
+
+.hljs-meta {
+  color: #808000;
+}
+
+.hljs-tag {
+  background: #efefef;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-literal,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type,
+.hljs-selector-id,
+.hljs-selector-class {
+  font-weight: bold;
+  color: #000080;
+}
+
+.hljs-attribute,
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  font-weight: bold;
+  color: #0000ff;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  font-weight: normal;
+}
+
+.hljs-string {
+  color: #008000;
+  font-weight: bold;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-formula {
+  color: #000;
+  background: #d0eded;
+  font-style: italic;
+}
+
+.hljs-doctag {
+  text-decoration: underline;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #660e7a;
+}
+
+.hljs-addition {
+  background: #baeeba;
+}
+
+.hljs-deletion {
+  background: #ffc8bd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/presentation/css/prevent.css b/presentation/css/prevent.css
@@ -99,3 +99,12 @@ img {
 .footnote {
    color: #999;
 }
+
+
+.hljs, .hljs-subst {
+   font-size: 18px;
+}
+
+.hljs-symbol, .hljs-bullet, .hljs-formula {
+   background: none !important;
+}
diff --git a/presentation/index.html b/presentation/index.html
@@ -13,6 +13,9 @@
     <link href="css/font-awesome.all.min.css" rel="stylesheet"/>
     <link href="css/impress-demo.css" rel="stylesheet"/>
     <link href="css/prevent.css" rel="stylesheet"/>
+
+    <link href="css/highlight.js/idea.css" rel="stylesheet">
+    <script src="js/highlight.pack.js"></script>
 </head>
 
 <body class="impress-not-supported"
@@ -73,6 +76,8 @@ <h2>Why do we use Microservices?</h2>
             <li>Superior quality</li>
             <li>Greater flexibility</li>
         </ul>
+
+        <p class="footnote">At aixigo we are in the migration phase.</p>
     </div>
 
     <div id="preview" class="step" data-x="0" data-y="4440" data-z="1000" data-scale="1">
@@ -121,6 +126,72 @@ <h2>Demo</h2>
         </p>
     </div>
 
+    <div data-section="How does it work" id="work-1" class="step" data-x="0" data-y="21000" data-z="-2000" data-scale="1"
+         data-rotate-x="-90" data-rotate-y="-90">
+        <h2>How does it work?</h2>
+
+        <ul>
+            <li>Provides a RESTful API to abstract microservice deployment</li>
+            <li>Services of multiple repository are combined into one application</li>
+            <li>Replication from master</li>
+            <li>Companions for infrastructure services</li>
+        </ul>
+    </div>
+
+    <div id="work-2" class="step" data-x="0" data-y="21000" data-z="-4000" data-scale="1"
+         data-rotate-x="-90" data-rotate-y="-90">
+
+        <h2>It is just a Docker setup</h2>
+
+        <pre><code class="yaml">
+version: "3"
+services:
+  prevant:
+    image: aixigo/prevant
+    labels:
+      traefik.frontend.rule: 'PathPrefix:/,/index.html,/init.css,/app.js,/openapi.yaml,/api'
+      traefik.frontend.priority: -100
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ./PREvant-config.toml:/app/config.toml
+
+  traefik:
+    image: traefik:alpine
+    command: --api --docker
+    network_mode: "bridge"
+    ports:
+      - "80:80"
+      - "8080:8080"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+        </code></pre>
+    </div>
+
+
+    <div id="work-3" class="step" data-x="0" data-y="21000" data-z="-6000" data-scale="1"
+         data-rotate-x="-90" data-rotate-y="-90">
+
+        <h2>Companions</h2>
+
+        <pre><code class="ini">
+[[companions]]
+# A database for each service
+[companions.mariadb]
+type = 'service'
+image = 'mariadb:10.3'
+serviceName = '{{service.name}}-db'
+env = [ 'MYSQL_DATABASE={{service.name}}', 'MYSQL_ALLOW_EMPTY_PASSWORD=yes'
+
+# A OpenID provide for the application
+[companions.openid]
+type = 'application'
+image = 'registry.example.com/org/openid-provider:latest'
+serviceName = 'openid'
+        </code></pre>
+
+        <p class="footnote">Handlebars templates to configure companions</p>
+    </div>
+
 
     <div data-section="Q&A" id="qa" class="step" data-x="0" data-y="21000" data-z="2000" data-scale="0.2"
          data-rotate-x="-90" data-rotate-y="-90">
@@ -184,6 +255,8 @@ <h2>Thank you for your attention.</h2>
     });
 
     impress().init();
+
+    hljs.initHighlightingOnLoad();
 </script>
 </body>
 </html>
diff --git a/presentation/js/highlight.pack.js b/presentation/js/highlight.pack.js