This repository has been archived by the owner on Jun 21, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
ambra_demo.html
180 lines (126 loc) · 9.18 KB
/
ambra_demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!-- Remove the comments to compress html
---
layout: compress
---
-->
<!DOCTYPE html>
<html>
<head>
<title>Ambra Demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Ambra Demo" />
<meta name="twitter:description" content="Learn docker through online trainings in training.play-with-docker.com" />
<meta name="twitter:image" content="http://birthday.play-with-docker.com/images/simple-logo.jpg" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>
html,body{height:100%}img{max-width:100%}.mt50{margin-top:50px}.mt20{margin-top:20px}.mt10{margin-top:10px}.mb10{margin-bottom:10px}body{display:flex;flex-direction:column}body>*{flex:none}.navbar{border-radius:0px;margin-bottom:0px}.navbar.navbar-inverse{background-color:#1488C6;border-color:#1488C6}.navbar.navbar-inverse a,.navbar.navbar-inverse .navbar-nav li a{color:white}.navbar.navbar-inverse a:hover,.navbar.navbar-inverse .navbar-nav li a:hover{text-decoration:underline}.navbar-brand{font-weight:900}@media screen and (max-width: 600px){.navbar-brand{font-size:1.5em}}.post-meta{color:#828282}div.post-content{max-width:1200px}.panel{border:none;box-shadow:0px 0px 1px #828282}.panel:hover{box-shadow:0px 0px 6px #828282}footer{border-top:1px solid #e8e8e8}.social-share{margin-top:10px;margin-bottom:15px;text-align:center}.social{list-style:none;display:inline;margin-left:10px;padding:5px 8px}.social:hover{opacity:0.7}.social img{width:20px}.quora img{width:17px}.facebook img{width:16px}.recent ul{list-style:none;padding:0;text-align:justify}.recent li{margin:20px}.recent img{display:block;margin:auto}.recent{padding:10px;border:1px solid #e8e8e8}.post-img img{width:100%}.announce{margin-top:10px;margin-bottom:60px;text-align:center}.pack{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap}.banner{display:block;margin:auto}.panel-container{display:flex;flex-direction:row;overflow:hidden;height:100%;flex:1 1 auto;xtouch-action:none}.terminal{font-size:15px}.panel-left{flex:0 0 auto;width:50%;min-width:150px}.content{padding:0 15px;overflow-y:auto}.content{padding:0 15px}.panel-singular{margin:0 auto;max-width:1200}.splitter{flex:0 0 auto;width:18px;background:url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #2fa8c3;min-height:200px;cursor:col-resize}.panel-right{display:flex;flex-direction:column;flex:1 1 auto;width:100%;background:#565656}.panel-right>div{flex:1 1 auto;margin-bottom:15px;overflow-y:auto}.panel-right>div:last-of-type{margin-bottom:0px}.panel-right>div.initialized{background-color:black}.getting-started ul{list-style-type:none;font-size:36px}.card{float:none}code[class*="."]{cursor:pointer}.post-tag{display:inline-block;background:rgba(42,122,226,0.15);padding:0 .5rem;margin-right:.5rem;border-radius:4px;color:#2a7ae2;font-family:"Open Sans",serif;font-size:90%}.post-tag:before{content:"\f02b";font-family:FontAwesome;padding-right:.5em}.post-tag:hover{text-decoration:none;background:#2a7ae2;color:#fff}small .post-tag{background:#eee;color:#000}small .post-tag:before{content:none}small .post-tag:hover{text-decoration:none;background:#000;color:#fff;cursor:default}.tags-expo :target:before{content:"";display:block;height:72px;margin:-72px 0 0}@media (min-width: 38em){.tags-expo .tags-expo-list{font-size:2.9rem}.tags-expo .tags-expo-list .post-tag{margin:.2em .3em}}.tags-expo .tags-expo-section{font-family:"Open Sans",serif}.tags-expo .tags-expo-section ul{list-style-type:circle;list-style-position:inside;padding:0}.tags-expo .tags-expo-section ul li{padding:0 1rem}.tags-expo .tags-expo-section ul li:hover{list-style-type:disc}.tags-expo .tags-expo-section a{font-size:20px}.tags-expo .tags-expo-section .post-date{display:inline-block;font-size:80%;color:#000;margin:0;padding:0}
</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="Play with Docker classroom" href="http://0.0.0.0:4000/feed.xml">
<link rel="stylesheet" href="/css/quiz.css">
</head>
<body>
<div class="panel-container">
<div class="panel-left content">
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">Ambra Demo</h1>
<p class="post-meta"><time datetime="2017-01-31T00:00:00-06:00" itemprop="datePublished">Jan 31, 2017</time> • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">jonocodes</span></span></p>
</header>
<div class="post-content" itemprop="articleBody">
<h2 id="how-to-use-this-demo">How to use this demo</h2>
<p>Please, validate the Google capcha to activate the shell on the right. Then, you can either copy the commands yourself, or simply click on the grey boxes to automatically copy commands into the terminal. If the terminals look weird, try moving the vertical bar around.</p>
<pre><code class="language-.term1">echo 'hello world'
</code></pre>
<h2 id="fetch-the-sample-themes-and-set-up-the-stack">Fetch the sample themes and bring up the stack</h2>
<pre><code class="language-.term1">git clone https://github.com/PLOS/Dockerfiles.git
cd Dockerfiles
themes/fetch.sh minimal
./nv stack ambra_minimal
</code></pre>
<h2 id="see-the-services-running">See the services running</h2>
<pre><code class="language-.term2">ssh -o StrictHostKeyChecking=no node1
cd Dockerfiles
</code></pre>
<pre><code class="language-.term2">docker ps --format "table {{.Names}}\t{{.Ports}}\t{{.Status}}"
</code></pre>
<p>Ping the content repo to see if its up</p>
<pre><code class="language-.term2">curl -I node1:8085/docs/
</code></pre>
<p>Wait a minute until you see the logs ending with messages from wombat_1.
Ping the wombat to see if its up.</p>
<pre><code class="language-.term2">curl node1:8015 | grep Wombat
</code></pre>
<h2 id="visit-a-running-service">Visit one of the running services</h2>
<ul>
<li><a href="/docs/" data-term=".term1" data-port="8085">Content Repo</a></li>
<li><a href="/" data-term=".term1" data-port="8006">Rhino</a></li>
<li><a href="/" data-term=".term1" data-port="8015">Wombat</a></li>
</ul>
<h2 id="ingest-an-article-in-rhino">Ingest an article in rhino</h2>
<pre><code class="language-.term2">curl -X POST --form "archive=@tests/test_data/demo/pone.0153419.zip" localhost:8006/articles
curl -X POST localhost:8006/articles/10.1371++journal.pone.0153419/revisions?ingestion=1
curl -I localhost:8015/article?id=10.1371/journal.pone.0153419
</code></pre>
<h2>See the article rendered in wombat</h2>
<p>Note: This link does not work yet</p>
<p><a href="/article?id=10.1371/journal.pone.0153419" data-term=".term1" data-port="8015">Article 0153419</a></p>
<h2 id="todo">TODO</h2>
<ul>
<li>get article link to work</li>
<li><a href="/?b=c" data-term=".term1" data-port="8015">test 1</a></li>
<li><a href="/a?b=c" data-term=".term1" data-port="8015">test 2</a></li>
<li><a href="/a?b" data-term=".term1" data-port="8015">test 3</a></li>
<li><a href="/a?b" data-term=".term1" data-port="8090">test 4</a></li>
</ul>
</div>
</article>
</div>
<div class="splitter">
</div>
<div class="panel-right">
<div class="term1"></div>
<div class="term2"></div>
</div>
</div>
<script>
(function() {
var font3 = document.createElement('link');
font3.type = 'text/css';
font3.rel = 'stylesheet';
font3.href = '/css/syntax-highlighting.css';
var q = document.getElementsByTagName('link')[0];
q.parentNode.insertBefore(font3, q);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/dist/jquery-resizable.min.js"></script>
<script src="https://rawgit.com/play-with-docker/sdk/master/dist/pwd.js"></script>
<script src="/js/quiz.js"></script>
<script>
pwd.newSession([{selector: '.term1'}, {selector: '.term2'}, {selector: '.term3'}], {ImageName: ''
});
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false,
onDragEnd: pwd.resize.bind(pwd)
});
</script>
<script async>
(function() {
var font = document.createElement('link');
font.type = 'text/css';
font.rel = 'stylesheet';
font.href = '//fonts.googleapis.com/css?family=Raleway:400,700';
var s = document.getElementsByTagName('link')[0];
s.parentNode.insertBefore(font, s);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>