This repository has been archived by the owner on Jul 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
166 lines (163 loc) · 9.17 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<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="description" content="Vorlon.JS is an open source tool for remotely debugging and testing JavaScript.">
<meta name="keywords" content="JavaScript, debugging, testing, remote debugging, console, dom inspector, modernizr, plugins, Vorlon.JS, Vorlon, open source, mobile testing">
<meta name="author" content="Microsoft">
<title>Vorlon.JS
</title>
<link href="http://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300|Roboto:400,300" rel="stylesheet">
<link rel="icon" type="image/png" href="/images/favicon.png">
<link rel="stylesheet" href="/css/main.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-63925808-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="home">
<div class="content-wrapper">
<nav class="nav-main">
<div class="container cf">
<h1 class="home"><a href="/" class="logo">Vorlon.JS</a></h1>
<label for="reveal-nav" class="nav-item filled reveal-nav-btn">Menu</label>
<input type="checkbox" id="reveal-nav" role="button" class="reveal-nav-input">
<div class="nav-main-list"><a href="/#demo" class="nav-item">See Demo</a><a href="/#getting-started" class="nav-item">Get Started</a><a href="/#vorlon-desktop" class="nav-item">Desktop app</a><a href="/plugins" class="nav-item">Plugins</a><a href="/documentation" class="nav-item">Documentation</a><a href="/community" class="nav-item">Community</a><a href="https://github.com/MicrosoftDX/Vorlonjs/" class="nav-item filled">GitHub</a></div>
</div>
</nav>
<header class="site-header">
<div class="container">
<div class="logo">Vorlon.JS
<div class="spaceship">
<div class="exhaust"></div>
</div>
</div>
<div class="tube tube-left">
<div class="data"></div>
</div>
<div class="tube tube-top">
<div class="data"></div>
</div>
<div class="tube tube-right">
<div class="data"></div>
</div>
<div class="planets"></div>
</div>
<div class="satellite"></div>
</header>
<section class="centered">
<div class="container narrow">
<h1>Introducing Vorlon.JS</h1>
<p class="centered"><a href="https://npmjs.org/package/vorlon" class="npm-shield"></a><img src="https://badge.fury.io/js/vorlon.svg"></p><span> </span>
<p>An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io.</p>
</div>
</section>
<section class="features">
<div class="container cf">
<div class="feature">
<h2>Easy setup</h2>
<p>Install Vorlon.JS and add a single line of JavaScript to your web app. Run your server and start the Vorlon.JS dashboard.</p><a href="/#getting-started" class="btn btn-secondary">Get Started</a>
</div>
<div class="feature">
<h2>Multi-device</h2>
<p>Remotely connect up to 50 devices simultaneously. Run your code on each or all of them with a single click.</p><a href="/#demo" class="btn btn-secondary">View Demo</a>
</div>
<div class="feature">
<h2>Extensible</h2>
<p>Debug JavaScript on nearly any platform with a web environment. Plugins allow you to add new features and resources.</p><a href="/plugins" class="btn btn-secondary">View Plugins</a>
</div>
</div>
</section>
<section id="demo">
<div class="container cf">
<h2>See a Vorlon.JS Demo</h2>
<div class="video">
<div class="video-embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/akmiqohFOM0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container cf"></div>
<h2>Remote debug a Tesla!</h2>
<div class="video">
<div class="video-embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/r7nDvWS3n1o" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<hr>
<section id="getting-started">
<div class="container cf">
<h2>Learn more about Vorlon.js in this 10 minutes video</h2>
<div class="video">
<div class="video-embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/77u73mD9MKE?t=2812" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<hr>
<section id="getting-started">
<div class="container narrow">
<h2>Getting Started</h2>
<p><strong>Prerequisites:</strong> please note that Vorlon.js doesn't work for now with Node v18, please use v16 until we fix it.</p>
<p>Learn everything you need to about Vorlon.js 0.1.0 in <a href='https://channel9.msdn.com/Shows/codechat/046' target="_blank">this video</a></p>
<p>Install and run the Vorlon.JS server from npm:</p>
<pre><code>$ npm i -g vorlon
$ vorlon </code></pre>
<p>If you are on a mac</p>
<pre><code>$ sudo npm i -g vorlon
$ sudo vorlon</code></pre>
<p style="color:red">You may receive an error from npm during installation about Python, node-gyp and socket.io. You can ignore this error as it is related to an optional module. Socket.io team is already aware of this issue.</p>
<p>Once Vorlon.JS is done installing, you can now run the server:</p>
<pre><code>$ vorlon
The Vorlon server is running</code></pre>
<p>With the server is running, open <code>http://localhost:1337</code> in your browser to see the Vorlon.JS dashboard.</p>
<p>The last step is to enable Vorlon.JS by adding this script tag to your app:
<pre><code><script src="http://localhost:1337/vorlon.js"></script></code></pre>
</p>
<p>Now when you open your app you should see your client appear on the dashboard.</p>
<p class="centered"><a href="documentation/" class="btn btn-primary">Read the Docs</a></p>
</div>
</section>
<hr>
<section id="vorlon-desktop">
<div class="container narrow">
<h2>Use Vorlon as a desktop application</h2>
<p>(See this as another way to install the Vorlon.js server)</p><img src="images/vorlon-desktop.png" class="img-desktop">
<p>You could also download the desktop version of Vorlon. It is a standalone executable working on Windows and MacOS (Linux version is coming soon).</p>
<p>Vorlon desktop is built using the awesome<a href="http://electron.atom.io/"> Github Electron</a>.</p>
<h3>Install Windows version</h3>
<ul>
<li>Download zip file by clicking the button bellow. </li>
<li>Unzip content in a temp folder and run the installer</li>
</ul>
<p class="centered"><a href="./desktop/vorlon-desktop.zip" class="btn btn-primary">Download Windows version</a></p>
<h3>Install MacOSX version</h3>
<ul>
<li>Download dmg file by clicking the button bellow. </li>
<li>Double-click the .DMG file to mount it. </li>
<li>A new Finder window showing its contents should appear. </li>
<li>If the window also contains a shortcut icon to 'Applications', drag and drop the app onto the shortcut. </li>
<li>If not, double-click the mounted volume on your desktop and drag the app icon from there to the 'Applications' icon in the Finder sidebar.</li>
</ul>
<p class="centered"><a href="./desktop/vorlon-desktop_0.1.0.dmg" class="btn btn-primary">Download Mac OSX version</a></p>
</div>
</section>
<footer class="site-footer">
<div class="container">
<nav class="nav-footer cf"><a href="/#demo" class="nav-item">See Demo</a><a href="/#getting-started" class="nav-item">Get Started</a><a href="/#vorlon-desktop" class="nav-item">Desktop app</a><a href="/plugins" class="nav-item">Plugins</a><a href="/documentation" class="nav-item">Documentation</a><a href="/community" class="nav-item">Community</a><a href="https://github.com/MicrosoftDX/Vorlonjs/" class="nav-item">GitHub</a><a href="https://github.com/MicrosoftDX/Vorlonjs/blob/master/LICENSE" class="nav-item">MIT License</a></nav>
<h4 class="home"><a href="/" class="footer-logo">Vorlon.JS</a></h4>
</div>
</footer>
</div>
<script src="/js/scripts.js"></script>
</body>
</html>