From 8ca5267a40ffa973161da9a336d587c07db357ca Mon Sep 17 00:00:00 2001 From: gleborgne Date: Fri, 9 Oct 2015 11:47:15 +0200 Subject: [PATCH] update documentation to add info for "best practices" plugin and Vorlon proxy --- css/main.css | 2 +- data/documentation.json | 2 +- documentation/contributing.md | 2 +- documentation/core-plugins.md | 4 +++ documentation/index.html | 66 +++++++++++++++++++++++++---------- documentation/webproxy.md | 26 ++++++++++++++ 6 files changed, 80 insertions(+), 22 deletions(-) create mode 100644 documentation/webproxy.md diff --git a/css/main.css b/css/main.css index ef48620..928ec8a 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*,*:after,*:before{box-sizing:border-box}html{font-size:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}body{background:#1d0c3d;text-rendering:optimizeLegibility;font-smoothing:antialiased;font-family:'Roboto',Helvetica,Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.4}section{padding:40px 15px}.container{max-width:1000px;margin:0 auto;position:relative;}.container.narrow{max-width:500px}h1,h2,h3{text-align:center;color:#1d0c3d;font-family:'Oswald',Helvetica,Arial,sans-serif;font-weight:400;}h1 a,h2 a,h3 a{cursor:pointer}h1{font-size:30px;margin-bottom:20px;text-transform:uppercase}h2{margin-bottom:20px;font-size:24px}h3{font-size:18px;margin-bottom:10px}hr{width:80%;max-width:400px;margin:0 auto 20px;border:none;border-bottom:3px solid rgba(0,0,0,0.07)}p,pre,ul,ol{margin:0 auto 20px;display:block;max-width:500px;}p strong,pre strong,ul strong,ol strong{font-weight:400}img,img.illustration{max-width:400px}img.illustration{width:100%}a{font-weight:400;text-decoration:none;color:#00b7c7;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;}a:hover{color:#00929f}code{background:#f7f7f7;border-radius:3px;font-family:'Menlo','Consolas','Lucida Console',Courier,monospace;font-size:14px;color:#555}p code{padding:3px 5px;display:inline-block}pre code{padding:15px;display:block;border:1px solid #ccc;word-wrap:normal;overflow-x:auto}.centered{margin-left:auto;margin-right:auto;text-align:center}.content-wrapper{background-color:white}.cf:before,.cf:after{content:' ';display:table}.cf:after{clear:both}.no-gap{margin-bottom:0}.btn{margin:10px;display:inline-block;border-radius:3px;font-weight:400;}.btn.btn-primary{padding:12px 20px;background:#00b7c7;color:white;}.btn.btn-primary:hover{background:#00a5b3}.btn.btn-secondary{margin-top:0;padding:8px 15px;background:#6b2d81;color:white;}.btn.btn-secondary:hover{background:#5b266e}.nav-main{position:relative;z-index:11;background:#6b2d81;font-size:16px;text-align:right;}.nav-main .container{position:relative}.nav-main .nav-item{padding:10px;display:inline-block;color:white;}.nav-main .nav-item:hover{background:rgba(255,255,255,0.1)}.nav-main .nav-item.home,.nav-main .nav-item.filled{padding-left:15px;padding-right:15px}.nav-main .nav-item.filled{background:rgba(255,255,255,0.2)}.nav-main h1.home{float:left;margin-bottom:0;z-index:10;font-size:100%;padding-left:10px;}.nav-main h1.home a.logo{width:100px;height:auto;padding:10px;display:inline-block;background-image:url("../images/vorlon-pixel-logo-xsmall-white.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:90%;text-indent:-999rem}.nav-main .reveal-nav-btn,.nav-main .reveal-nav-input{display:none}@media screen and (max-width:700px){.nav-main .nav-main-list{width:100%;display:none;position:absolute;top:100%;left:0;background:#411748;}.nav-main .nav-main-list .nav-item{margin-left:0;padding:8px 15px;display:block;text-align:left;}.nav-main .nav-main-list .nav-item:not(:last-child){border-bottom:1px solid #6b2d81}.nav-main .nav-main-list .nav-item.filled{background:transparent}.nav-main .nav-main-list .nav-item:hover{background:rgba(255,255,255,0.1)}.nav-main .reveal-nav-btn{display:inline-block;}.nav-main .reveal-nav-btn:hover{cursor:pointer}.nav-main .reveal-nav-input{display:block;position:absolute;visibility:hidden}.nav-main .reveal-nav-input:checked + .nav-main-list{display:block}}.icon{width:40px;height:40px;margin:0 auto 5px;display:inline-block;background:#a2c13b no-repeat center center;border-radius:50%;text-align:center;text-indent:-999rem;}.icon:hover{background-color:#899c3a}.icon.icon-secondary{background-color:#ccc;}.icon.icon-secondary:hover{background-color:#444}.icon + .icon{margin-left:5px;margin-right:5px}.icon.icon-github{background-image:url("../images/icon-github.svg");background-size:50%}.icon.icon-create{background-image:url("../images/icon-plus.svg");background-size:45%}.icon.icon-lightbulb{background-image:url("../images/icon-lightbulb.svg");background-size:30%}.icon.icon-twitter{background-image:url("../images/icon-twitter.svg");background-size:48%}@-webkit-keyframes spaceship{0%{left:5%;top:-55px}20%{top:-50px}40%{top:-55px}60%{top:-47px}80%{top:-51px}100%{left:67%;top:-55px}}@keyframes spaceship{0%{left:5%;top:-55px}20%{top:-50px}40%{top:-55px}60%{top:-47px}80%{top:-51px}100%{left:67%;top:-55px}}@-webkit-keyframes exhaust{0%{opacity:0}5%{opacity:0}20%{opacity:1;margin-right:0;margin-top:0}27%{opacity:1}65%{opacity:0;margin-right:20px;margin-top:5px}75%{opacity:0;margin-right:0;margin-top:0}100%{opacity:1}}@keyframes exhaust{0%{opacity:0}5%{opacity:0}20%{opacity:1;margin-right:0;margin-top:0}27%{opacity:1}65%{opacity:0;margin-right:20px;margin-top:5px}75%{opacity:0;margin-right:0;margin-top:0}100%{opacity:1}}@-webkit-keyframes data1{0%{top:-20px;left:8px}15%{top:120px;left:8px}30%{top:265px;left:75px}45%{top:400px;left:75px}100%{top:400px;left:10px}}@keyframes data1{0%{top:-20px;left:8px}15%{top:120px;left:8px}30%{top:265px;left:75px}45%{top:400px;left:75px}100%{top:400px;left:10px}}@-webkit-keyframes data2{0%{top:-28px;left:8px}3.0578118439665722%{top:-8px;left:8px}6.1156236879331445%{top:12px;left:8px}8.86765434750306%{top:30px;left:8px}11.723886320011895%{top:48px;left:13px}14.057659923338075%{top:61px;left:21px}16.43607936284551%{top:72px;left:32px}19.587999666830232%{top:77px;left:52px}21.90165415677704%{top:80px;left:67px}42.08379144967832%{top:80px;left:199px}46.01459638426888%{top:74px;left:224px}48.61822935052951%{top:63px;left:237px}50.66947189418348%{top:51px;left:243px}53.062588195113115%{top:37px;left:250px}55.35594707808804%{top:22px;left:250px}59.94266484403791%{top:-8px;left:250px}63.00047668800448%{top:-28px;left:250px}100%{top:-28px;left:8px}}@keyframes data2{0%{top:-28px;left:8px}3.0578118439665722%{top:-8px;left:8px}6.1156236879331445%{top:12px;left:8px}8.86765434750306%{top:30px;left:8px}11.723886320011895%{top:48px;left:13px}14.057659923338075%{top:61px;left:21px}16.43607936284551%{top:72px;left:32px}19.587999666830232%{top:77px;left:52px}21.90165415677704%{top:80px;left:67px}42.08379144967832%{top:80px;left:199px}46.01459638426888%{top:74px;left:224px}48.61822935052951%{top:63px;left:237px}50.66947189418348%{top:51px;left:243px}53.062588195113115%{top:37px;left:250px}55.35594707808804%{top:22px;left:250px}59.94266484403791%{top:-8px;left:250px}63.00047668800448%{top:-28px;left:250px}100%{top:-28px;left:8px}}@-webkit-keyframes data3{0%{top:-20px;right:10px}50%{top:400px;right:10px}100%{top:400px;right:10px}}@keyframes data3{0%{top:-20px;right:10px}50%{top:400px;right:10px}100%{top:400px;right:10px}}.video{max-width:800px;margin:30px auto;}.video .video-embed{width:100%;padding:0;padding-bottom:56.25%;position:relative;}.video .video-embed iframe,.video .video-embed object,.video .video-embed embed,.video .video-embed video{width:100%;height:100%;position:absolute;top:0;left:0}.site-header{height:400px;position:relative;overflow:hidden;background:#1f1c28;background-image:url("../images/header-stars.png"),url("../images/header-stars-distant.png");background-repeat:repeat;background-position:center center;background-size:auto 400px;color:white;}.site-header .container{height:100%;background-image:url("../images/header-planet-large.png"),url("../images/header-planet-medium.png"),url("../images/header-planet-small.png");background-repeat:no-repeat;background-size:180px auto,90px auto,66px auto;background-position:right 120%,80% 10%,20% 30%}.site-header .tube{position:absolute;top:0;background-repeat:no-repeat;z-index:4;}.site-header .tube .data{width:20px;height:20px;background:url("../images/header-tube-data.png");background-size:contain;border-radius:50%;position:absolute;top:-20px;opacity:.5}.site-header .tube-left{width:150px;height:400px;left:10%;background-image:url("../images/header-tube-3.png");background-size:auto 400px;}.site-header .tube-left .data{-webkit-animation:data1 8s 2s linear infinite;animation:data1 8s 2s linear infinite}.site-header .tube-top{width:280px;height:200px;left:26%;background-image:url("../images/header-tube-2.png");background-size:280px auto;background-position:left -8%;}.site-header .tube-top .data{-webkit-animation:data2 8s 6s linear infinite;animation:data2 8s 6s linear infinite}.site-header .tube-right{width:400px;height:400px;right:5%;background-image:url("../images/header-tube-1.png");background-size:auto 400px;background-position:right center;}.site-header .tube-right .data{-webkit-animation:data3 8s 4s linear infinite;animation:data3 8s 4s linear infinite}.site-header .satellite{width:92px;height:92px;position:absolute;left:10%;bottom:10%;background:url("../images/header-satellite.png") no-repeat center center;background-size:contain;z-index:3}.site-header .logo{width:395px;height:110px;margin:0 auto;position:absolute;top:37%;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:10;background:url("../images/header-pixel-logo-text.svg") no-repeat center center;background-size:contain;text-indent:-9999em;}.site-header .logo .spaceship,.site-header .logo .exhaust{position:absolute;background-repeat:no-repeat;background-size:contain;background-position:center center}.site-header .logo .spaceship{width:86px;height:46px;left:67%;top:-55px;background-image:url("../images/header-pixel-logo-spaceship.svg");-webkit-animation:spaceship 4s ease-out;animation:spaceship 4s ease-out}.site-header .logo .exhaust{width:64px;height:34px;right:64px;top:6px;background-image:url("../images/header-pixel-logo-exhaust.svg");-webkit-animation:exhaust 4s ease;animation:exhaust 4s ease}@media screen and (max-width:900px){.site-header{height:350px;}.site-header .tube-left{left:5%}.site-header .tube-top{top:-5%;left:15%}.site-header .tube-right{right:-75px}.site-header .satellite{display:none}.site-header .logo{height:140px;top:28%;background-image:url("../images/vorlon-pixel-logo-large.svg");}.site-header .logo .spaceship{display:none}}@media screen and (max-width:600px){.site-header{height:250px;}.site-header .container{background-position:120% 140%,85% -10px,10% 10%}.site-header .tube{top:-35%}.site-header .tube-left{left:2%}.site-header .tube-top{display:none}.site-header .logo{height:120px;top:16%}}@media screen and (max-width:480px){.site-header{height:200px;}.site-header .container{background-position:120% 400%,85% -50px,-5% 5%}.site-header .tube{display:none}.site-header .logo{height:100px}}.features{background:#f7f7f7;text-align:center;}.features .feature{width:33.33%;padding:0 20px;float:left}@media screen and (max-width:650px){.features .feature{width:100%;margin-bottom:30px}}.site-footer{background:#1d0c3d;color:white;text-align:center;}.site-footer .container{padding:30px 15px}.site-footer a:hover{opacity:.7}.site-footer .nav-footer .nav-item{margin:5px 7px;display:inline-block;color:white;font-size:14px}.site-footer h4.home{margin-bottom:0;padding-left:10px;z-index:10;font-size:100%;}.site-footer h4.home a.footer-logo{width:100px;height:auto;padding:10px;display:inline-block;background-image:url("../images/vorlon-pixel-logo-xsmall-white.svg");background-repeat:no-repeat;background-position:50% 50%;background-size:90%;text-indent:-999rem}.docs-page h1,.docs-page h2,.docs-page h3{text-align:left}.docs-page h3{margin-bottom:15px}.docs-page p,.docs-page code,.docs-page ul,.docs-page ol,.docs-page pre{margin-left:0;max-width:700px}.docs-page section{margin:0 50px;padding:40px 0;border-bottom:3px solid rgba(0,0,0,0.07)}.left-col{width:250px;position:fixed;top:0;z-index:1}.right-col{min-height:1000px;margin-left:250px;position:relative}.head-bar{width:100%;position:relative;background-color:#6b2d81;}.head-bar:before{width:500px;height:40px;position:absolute;top:0;left:-500px;z-index:5;content:'';background-color:#6b2d81}.head-bar h1.home{margin-bottom:0;padding-left:10px;z-index:5;font-size:100%;}.head-bar h1.home a.logo{width:100px;height:auto;padding:0;display:inline-block;background-image:url("../images/vorlon-pixel-logo-xsmall-white.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:90%;font-size:16px;line-height:40px;text-indent:-999rem}.head-bar .back-to-top{width:40px;height:40px;display:block;position:absolute;top:0;right:0;z-index:11;background-color:#411748;background-image:url("../images/icon-up-arrow.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:30%;text-indent:-999rem}nav.documentation-nav{width:250px;padding-left:15px;padding-top:25px;padding-bottom:20px;position:fixed;top:40px;bottom:0;overflow-y:auto;}nav.documentation-nav a{font-weight:300;color:#444;}nav.documentation-nav a:hover{opacity:.6}nav.documentation-nav a.active{color:#00b7c7;font-weight:400}nav.documentation-nav ul{margin-bottom:0;}nav.documentation-nav ul li{padding:3px 0}nav.documentation-nav ul .depth-1{padding:10px 0 5px;}nav.documentation-nav ul .depth-1 > a{font-weight:400}nav.documentation-nav ul .depth-2{margin-left:10px}nav.documentation-nav ul .depth-3{margin-left:20px}.docs-intro{padding-top:40px}.docs-page .site-footer{max-width:1000px;margin:0 auto;position:relative;z-index:0;background-color:transparent;}.docs-page .site-footer .container{margin-left:250px}.docs-page .site-footer .nav-footer .nav-item{color:#6b2d81}.docs-page .site-footer h4.home a.footer-logo{background-image:url("../images/vorlon-pixel-logo-xsmall-purple.svg")}@media screen and (max-width:900px){.left-col,nav.documentation-nav{width:160px}.right-col{margin-left:160px}.docs-page .site-footer .container{margin-left:160px}}@media screen and (max-width:600px){.left-col{display:none}.right-col{margin-left:0}.docs-page section{margin:0 20px}.docs-page .site-footer .container{margin-left:0}}.plugin-container{width:33.33%;margin:10px 0;float:left;}.plugin-container:nth-child(3n+1){clear:left}.plugin{min-height:175px;margin:0 4% 30px;padding:20px;border:3px solid rgba(0,0,0,0.07);}.plugin h3{max-width:500px;margin:0 auto 20px;display:block;text-align:left;}.plugin h3 a{padding:5px 0;color:#1d0c3d;}.plugin h3 a:hover{color:#411748}.features .plugin{margin-bottom:0;border:3px solid rgba(0,0,0,0.04);text-align:left;}.features .plugin h3{margin-bottom:10px}.contribute{padding-top:30px;position:relative;border:3px solid rgba(107,45,129,0.3);text-align:center;}.contribute p{margin-bottom:15px}.contribute hr{margin-bottom:10px}.contribute h3{margin-bottom:10px;text-align:center}p.meta{margin-bottom:10px;font-size:15px}p.tags{padding-left:20px;display:relative;position:relative;font-size:13px;color:#ccc;}p.tags:before{width:13px;height:13px;position:absolute;top:4px;left:0;content:'';background-image:url("../images/icon-tag.svg");background-repeat:no-repeat}.description{min-height:130px}.form-group{max-width:500px;margin:15px auto 0 auto;position:relative}.search-form{width:100%;height:34px;padding:6px 12px;display:block;vertical-align:middle;border:none;border-bottom:3px solid rgba(107,45,129,0.3);font-size:14px;line-height:1.5;color:#555;-webkit-transition:border-color ease-in-out .15s;transition:border-color ease-in-out .15s}.search-form:focus{border-color:#6b2d81;outline:0}.search-form:focus,.clear:focus{outline:0}.clear{width:10px;height:12px;position:absolute;top:50%;right:10px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:url("../images/icon-x-close.svg") no-repeat;background-size:cover;border:none;cursor:pointer}@media screen and (max-width:900px){.plugin-container{width:50%;}.plugin-container:nth-child(3n+1){clear:none}.plugin-container:nth-child(2n+1){clear:left}.description{min-height:10px}p.tags{margin-bottom:0}}@media screen and (max-width:600px){.plugin-container{width:100%}.plugin{min-height:0}}.community-features.features h2{margin-bottom:30px}.avatars{max-width:700px;margin:40px auto 0;text-align:center;}.avatars .avatar{width:15%;margin-bottom:30px;padding:0 10px;display:inline-block;}.avatars .avatar img{width:100%;border-radius:3px}.avatars.core-team{max-width:600px;}.avatars.core-team .avatar{width:24%;}.avatars.core-team .avatar .icon{margin-top:5px}@media screen and (max-width:600px){.avatars .avatar{width:20%}.avatars.core-team .avatar{width:40%}}.avatars.core-team{position:relative}.easter-egg-question,.easter-egg-answer{visibility:hidden;font-family:Courier New,monospace;background:#1d0c3d;font-size:12px;padding:3px;color:white;display:inline-block;position:absolute}.four-o-four-page section{padding-top:60px;padding-bottom:60px}.four-o-four-page .site-header{height:350px;}.four-o-four-page .site-header:after{width:256px;height:294px;content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background:url("../images/404.png") no-repeat center center;background-size:contain}@media screen and (max-width:600px){.four-o-four-page .site-header{height:200px;}.four-o-four-page .site-header:after{width:148px;height:170px}} \ No newline at end of file +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*,*:after,*:before{box-sizing:border-box}html{font-size:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}body{background:#1d0c3d;text-rendering:optimizeLegibility;font-smoothing:antialiased;font-family:'Roboto',Helvetica,Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.4}section{padding:40px 15px}.container{max-width:1000px;margin:0 auto;position:relative;}.container.narrow{max-width:500px}h1,h2,h3{text-align:center;color:#1d0c3d;font-family:'Oswald',Helvetica,Arial,sans-serif;font-weight:400;}h1 a,h2 a,h3 a{cursor:pointer}h1{font-size:30px;margin-bottom:20px;text-transform:uppercase}h2{margin-bottom:20px;font-size:24px}h3{font-size:18px;margin-bottom:10px}hr{width:80%;max-width:400px;margin:0 auto 20px;border:none;border-bottom:3px solid rgba(0,0,0,0.07)}p,pre,ul,ol{margin:0 auto 20px;display:block;max-width:500px;}p strong,pre strong,ul strong,ol strong{font-weight:400}img,img.illustration{max-width:400px}img.illustration{width:100%}a{font-weight:400;text-decoration:none;color:#00b7c7;transition:all .2s ease-in;}a:hover{color:#00929f}code{background:#f7f7f7;border-radius:3px;font-family:'Menlo','Consolas','Lucida Console',Courier,monospace;font-size:14px;color:#555}p code{padding:3px 5px;display:inline-block}pre code{padding:15px;display:block;border:1px solid #ccc;word-wrap:normal;overflow-x:auto}.centered{margin-left:auto;margin-right:auto;text-align:center}.content-wrapper{background-color:white}.cf:before,.cf:after{content:' ';display:table}.cf:after{clear:both}.no-gap{margin-bottom:0}.btn{margin:10px;display:inline-block;border-radius:3px;font-weight:400;}.btn.btn-primary{padding:12px 20px;background:#00b7c7;color:white;}.btn.btn-primary:hover{background:#00a5b3}.btn.btn-secondary{margin-top:0;padding:8px 15px;background:#6b2d81;color:white;}.btn.btn-secondary:hover{background:#5b266e}.nav-main{position:relative;z-index:11;background:#6b2d81;font-size:16px;text-align:right;}.nav-main .container{position:relative}.nav-main .nav-item{padding:10px;display:inline-block;color:white;}.nav-main .nav-item:hover{background:rgba(255,255,255,0.1)}.nav-main .nav-item.home,.nav-main .nav-item.filled{padding-left:15px;padding-right:15px}.nav-main .nav-item.filled{background:rgba(255,255,255,0.2)}.nav-main h1.home{float:left;margin-bottom:0;z-index:10;font-size:100%;padding-left:10px;}.nav-main h1.home a.logo{width:100px;height:auto;padding:10px;display:inline-block;background-image:url("../images/vorlon-pixel-logo-xsmall-white.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:90%;text-indent:-999rem}.nav-main .reveal-nav-btn,.nav-main .reveal-nav-input{display:none}@media screen and (max-width:700px){.nav-main .nav-main-list{width:100%;display:none;position:absolute;top:100%;left:0;background:#411748;}.nav-main .nav-main-list .nav-item{margin-left:0;padding:8px 15px;display:block;text-align:left;}.nav-main .nav-main-list .nav-item:not(:last-child){border-bottom:1px solid #6b2d81}.nav-main .nav-main-list .nav-item.filled{background:transparent}.nav-main .nav-main-list .nav-item:hover{background:rgba(255,255,255,0.1)}.nav-main .reveal-nav-btn{display:inline-block;}.nav-main .reveal-nav-btn:hover{cursor:pointer}.nav-main .reveal-nav-input{display:block;position:absolute;visibility:hidden}.nav-main .reveal-nav-input:checked + .nav-main-list{display:block}}.icon{width:40px;height:40px;margin:0 auto 5px;display:inline-block;background:#a2c13b no-repeat center center;border-radius:50%;text-align:center;text-indent:-999rem;}.icon:hover{background-color:#899c3a}.icon.icon-secondary{background-color:#ccc;}.icon.icon-secondary:hover{background-color:#444}.icon + .icon{margin-left:5px;margin-right:5px}.icon.icon-github{background-image:url("../images/icon-github.svg");background-size:50%}.icon.icon-create{background-image:url("../images/icon-plus.svg");background-size:45%}.icon.icon-lightbulb{background-image:url("../images/icon-lightbulb.svg");background-size:30%}.icon.icon-twitter{background-image:url("../images/icon-twitter.svg");background-size:48%}@-webkit-keyframes spaceship{0%{left:5%;top:-55px}20%{top:-50px}40%{top:-55px}60%{top:-47px}80%{top:-51px}100%{left:67%;top:-55px}}@keyframes spaceship{0%{left:5%;top:-55px}20%{top:-50px}40%{top:-55px}60%{top:-47px}80%{top:-51px}100%{left:67%;top:-55px}}@-webkit-keyframes exhaust{0%{opacity:0}5%{opacity:0}20%{opacity:1;margin-right:0;margin-top:0}27%{opacity:1}65%{opacity:0;margin-right:20px;margin-top:5px}75%{opacity:0;margin-right:0;margin-top:0}100%{opacity:1}}@keyframes exhaust{0%{opacity:0}5%{opacity:0}20%{opacity:1;margin-right:0;margin-top:0}27%{opacity:1}65%{opacity:0;margin-right:20px;margin-top:5px}75%{opacity:0;margin-right:0;margin-top:0}100%{opacity:1}}@-webkit-keyframes data1{0%{top:-20px;left:8px}15%{top:120px;left:8px}30%{top:265px;left:75px}45%{top:400px;left:75px}100%{top:400px;left:10px}}@keyframes data1{0%{top:-20px;left:8px}15%{top:120px;left:8px}30%{top:265px;left:75px}45%{top:400px;left:75px}100%{top:400px;left:10px}}@-webkit-keyframes data2{0%{top:-28px;left:8px}3.0578118439665722%{top:-8px;left:8px}6.1156236879331445%{top:12px;left:8px}8.86765434750306%{top:30px;left:8px}11.723886320011895%{top:48px;left:13px}14.057659923338075%{top:61px;left:21px}16.43607936284551%{top:72px;left:32px}19.587999666830232%{top:77px;left:52px}21.90165415677704%{top:80px;left:67px}42.08379144967832%{top:80px;left:199px}46.01459638426888%{top:74px;left:224px}48.61822935052951%{top:63px;left:237px}50.66947189418348%{top:51px;left:243px}53.062588195113115%{top:37px;left:250px}55.35594707808804%{top:22px;left:250px}59.94266484403791%{top:-8px;left:250px}63.00047668800448%{top:-28px;left:250px}100%{top:-28px;left:8px}}@keyframes data2{0%{top:-28px;left:8px}3.0578118439665722%{top:-8px;left:8px}6.1156236879331445%{top:12px;left:8px}8.86765434750306%{top:30px;left:8px}11.723886320011895%{top:48px;left:13px}14.057659923338075%{top:61px;left:21px}16.43607936284551%{top:72px;left:32px}19.587999666830232%{top:77px;left:52px}21.90165415677704%{top:80px;left:67px}42.08379144967832%{top:80px;left:199px}46.01459638426888%{top:74px;left:224px}48.61822935052951%{top:63px;left:237px}50.66947189418348%{top:51px;left:243px}53.062588195113115%{top:37px;left:250px}55.35594707808804%{top:22px;left:250px}59.94266484403791%{top:-8px;left:250px}63.00047668800448%{top:-28px;left:250px}100%{top:-28px;left:8px}}@-webkit-keyframes data3{0%{top:-20px;right:10px}50%{top:400px;right:10px}100%{top:400px;right:10px}}@keyframes data3{0%{top:-20px;right:10px}50%{top:400px;right:10px}100%{top:400px;right:10px}}.video{max-width:800px;margin:30px auto;}.video .video-embed{width:100%;padding:0;padding-bottom:56.25%;position:relative;}.video .video-embed iframe,.video .video-embed object,.video .video-embed embed,.video .video-embed video{width:100%;height:100%;position:absolute;top:0;left:0}.site-header{height:400px;position:relative;overflow:hidden;background:#1f1c28;background-image:url("../images/header-stars.png"),url("../images/header-stars-distant.png");background-repeat:repeat;background-position:center center;background-size:auto 400px;color:white;}.site-header .container{height:100%;background-image:url("../images/header-planet-large.png"),url("../images/header-planet-medium.png"),url("../images/header-planet-small.png");background-repeat:no-repeat;background-size:180px auto,90px auto,66px auto;background-position:right 120%,80% 10%,20% 30%}.site-header .tube{position:absolute;top:0;background-repeat:no-repeat;z-index:4;}.site-header .tube .data{width:20px;height:20px;background:url("../images/header-tube-data.png");background-size:contain;border-radius:50%;position:absolute;top:-20px;opacity:.5}.site-header .tube-left{width:150px;height:400px;left:10%;background-image:url("../images/header-tube-3.png");background-size:auto 400px;}.site-header .tube-left .data{-webkit-animation:data1 8s 2s linear infinite;animation:data1 8s 2s linear infinite}.site-header .tube-top{width:280px;height:200px;left:26%;background-image:url("../images/header-tube-2.png");background-size:280px auto;background-position:left -8%;}.site-header .tube-top .data{-webkit-animation:data2 8s 6s linear infinite;animation:data2 8s 6s linear infinite}.site-header .tube-right{width:400px;height:400px;right:5%;background-image:url("../images/header-tube-1.png");background-size:auto 400px;background-position:right center;}.site-header .tube-right .data{-webkit-animation:data3 8s 4s linear infinite;animation:data3 8s 4s linear infinite}.site-header .satellite{width:92px;height:92px;position:absolute;left:10%;bottom:10%;background:url("../images/header-satellite.png") no-repeat center center;background-size:contain;z-index:3}.site-header .logo{width:395px;height:110px;margin:0 auto;position:absolute;top:37%;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:10;background:url("../images/header-pixel-logo-text.svg") no-repeat center center;background-size:contain;text-indent:-9999em;}.site-header .logo .spaceship,.site-header .logo .exhaust{position:absolute;background-repeat:no-repeat;background-size:contain;background-position:center center}.site-header .logo .spaceship{width:86px;height:46px;left:67%;top:-55px;background-image:url("../images/header-pixel-logo-spaceship.svg");-webkit-animation:spaceship 4s ease-out;animation:spaceship 4s ease-out}.site-header .logo .exhaust{width:64px;height:34px;right:64px;top:6px;background-image:url("../images/header-pixel-logo-exhaust.svg");-webkit-animation:exhaust 4s ease;animation:exhaust 4s ease}@media screen and (max-width:900px){.site-header{height:350px;}.site-header .tube-left{left:5%}.site-header .tube-top{top:-5%;left:15%}.site-header .tube-right{right:-75px}.site-header .satellite{display:none}.site-header .logo{height:140px;top:28%;background-image:url("../images/vorlon-pixel-logo-large.svg");}.site-header .logo .spaceship{display:none}}@media screen and (max-width:600px){.site-header{height:250px;}.site-header .container{background-position:120% 140%,85% -10px,10% 10%}.site-header .tube{top:-35%}.site-header .tube-left{left:2%}.site-header .tube-top{display:none}.site-header .logo{height:120px;top:16%}}@media screen and (max-width:480px){.site-header{height:200px;}.site-header .container{background-position:120% 400%,85% -50px,-5% 5%}.site-header .tube{display:none}.site-header .logo{height:100px}}.features{background:#f7f7f7;text-align:center;}.features .feature{width:33.33%;padding:0 20px;float:left}@media screen and (max-width:650px){.features .feature{width:100%;margin-bottom:30px}}.site-footer{background:#1d0c3d;color:white;text-align:center;}.site-footer .container{padding:30px 15px}.site-footer a:hover{opacity:.7}.site-footer .nav-footer .nav-item{margin:5px 7px;display:inline-block;color:white;font-size:14px}.site-footer h4.home{margin-bottom:0;padding-left:10px;z-index:10;font-size:100%;}.site-footer h4.home a.footer-logo{width:100px;height:auto;padding:10px;display:inline-block;background-image:url("../images/vorlon-pixel-logo-xsmall-white.svg");background-repeat:no-repeat;background-position:50% 50%;background-size:90%;text-indent:-999rem}.docs-page h1,.docs-page h2,.docs-page h3{text-align:left}.docs-page h3{margin-bottom:15px}.docs-page p,.docs-page code,.docs-page ul,.docs-page ol,.docs-page pre{margin-left:0;max-width:700px}.docs-page section{margin:0 50px;padding:40px 0;border-bottom:3px solid rgba(0,0,0,0.07)}.left-col{width:250px;position:fixed;top:0;z-index:1}.right-col{min-height:1000px;margin-left:250px;position:relative}.head-bar{width:100%;position:relative;background-color:#6b2d81;}.head-bar:before{width:500px;height:40px;position:absolute;top:0;left:-500px;z-index:5;content:'';background-color:#6b2d81}.head-bar h1.home{margin-bottom:0;padding-left:10px;z-index:5;font-size:100%;}.head-bar h1.home a.logo{width:100px;height:auto;padding:0;display:inline-block;background-image:url("../images/vorlon-pixel-logo-xsmall-white.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:90%;font-size:16px;line-height:40px;text-indent:-999rem}.head-bar .back-to-top{width:40px;height:40px;display:block;position:absolute;top:0;right:0;z-index:11;background-color:#411748;background-image:url("../images/icon-up-arrow.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:30%;text-indent:-999rem}nav.documentation-nav{width:250px;padding-left:15px;padding-top:25px;padding-bottom:20px;position:fixed;top:40px;bottom:0;overflow-y:auto;}nav.documentation-nav a{font-weight:300;color:#444;}nav.documentation-nav a:hover{opacity:.6}nav.documentation-nav a.active{color:#00b7c7;font-weight:400}nav.documentation-nav ul{margin-bottom:0;}nav.documentation-nav ul li{padding:3px 0}nav.documentation-nav ul .depth-1{padding:10px 0 5px;}nav.documentation-nav ul .depth-1 > a{font-weight:400}nav.documentation-nav ul .depth-2{margin-left:10px}nav.documentation-nav ul .depth-3{margin-left:20px}.docs-intro{padding-top:40px}.docs-page .site-footer{max-width:1000px;margin:0 auto;position:relative;z-index:0;background-color:transparent;}.docs-page .site-footer .container{margin-left:250px}.docs-page .site-footer .nav-footer .nav-item{color:#6b2d81}.docs-page .site-footer h4.home a.footer-logo{background-image:url("../images/vorlon-pixel-logo-xsmall-purple.svg")}@media screen and (max-width:900px){.left-col,nav.documentation-nav{width:160px}.right-col{margin-left:160px}.docs-page .site-footer .container{margin-left:160px}}@media screen and (max-width:600px){.left-col{display:none}.right-col{margin-left:0}.docs-page section{margin:0 20px}.docs-page .site-footer .container{margin-left:0}}.plugin-container{width:33.33%;margin:10px 0;float:left;}.plugin-container:nth-child(3n+1){clear:left}.plugin{min-height:175px;margin:0 4% 30px;padding:20px;border:3px solid rgba(0,0,0,0.07);}.plugin h3{max-width:500px;margin:0 auto 20px;display:block;text-align:left;}.plugin h3 a{padding:5px 0;color:#1d0c3d;}.plugin h3 a:hover{color:#411748}.features .plugin{margin-bottom:0;border:3px solid rgba(0,0,0,0.04);text-align:left;}.features .plugin h3{margin-bottom:10px}.contribute{padding-top:30px;position:relative;border:3px solid rgba(107,45,129,0.3);text-align:center;}.contribute p{margin-bottom:15px}.contribute hr{margin-bottom:10px}.contribute h3{margin-bottom:10px;text-align:center}p.meta{margin-bottom:10px;font-size:15px}p.tags{padding-left:20px;display:relative;position:relative;font-size:13px;color:#ccc;}p.tags:before{width:13px;height:13px;position:absolute;top:4px;left:0;content:'';background-image:url("../images/icon-tag.svg");background-repeat:no-repeat}.description{min-height:130px}.form-group{max-width:500px;margin:15px auto 0 auto;position:relative}.search-form{width:100%;height:34px;padding:6px 12px;display:block;vertical-align:middle;border:none;border-bottom:3px solid rgba(107,45,129,0.3);font-size:14px;line-height:1.5;color:#555;transition:border-color ease-in-out .15s}.search-form:focus{border-color:#6b2d81;outline:0}.search-form:focus,.clear:focus{outline:0}.clear{width:10px;height:12px;position:absolute;top:50%;right:10px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:url("../images/icon-x-close.svg") no-repeat;background-size:cover;border:none;cursor:pointer}@media screen and (max-width:900px){.plugin-container{width:50%;}.plugin-container:nth-child(3n+1){clear:none}.plugin-container:nth-child(2n+1){clear:left}.description{min-height:10px}p.tags{margin-bottom:0}}@media screen and (max-width:600px){.plugin-container{width:100%}.plugin{min-height:0}}.community-features.features h2{margin-bottom:30px}.avatars{max-width:700px;margin:40px auto 0;text-align:center;}.avatars .avatar{width:15%;margin-bottom:30px;padding:0 10px;display:inline-block;}.avatars .avatar img{width:100%;border-radius:3px}.avatars.core-team{max-width:600px;}.avatars.core-team .avatar{width:24%;}.avatars.core-team .avatar .icon{margin-top:5px}@media screen and (max-width:600px){.avatars .avatar{width:20%}.avatars.core-team .avatar{width:40%}}.avatars.core-team{position:relative}.easter-egg-question,.easter-egg-answer{visibility:hidden;font-family:Courier New,monospace;background:#1d0c3d;font-size:12px;padding:3px;color:white;display:inline-block;position:absolute}.four-o-four-page section{padding-top:60px;padding-bottom:60px}.four-o-four-page .site-header{height:350px;}.four-o-four-page .site-header:after{width:256px;height:294px;content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background:url("../images/404.png") no-repeat center center;background-size:contain}@media screen and (max-width:600px){.four-o-four-page .site-header{height:200px;}.four-o-four-page .site-header:after{width:148px;height:170px}} \ No newline at end of file diff --git a/data/documentation.json b/data/documentation.json index 282865c..f3b680f 100644 --- a/data/documentation.json +++ b/data/documentation.json @@ -1 +1 @@ -[{"meta":{"section":"introduction","title":"Introduction","sequence":0},"html":"

Introduction

\n

Vorlon.JS is a remote debugging and testing tool for JavaScript. It helps you remotely load inspect, test and debug JavaScript code running on any device with a web browser: whether it's a games console, mobile device or fridge.

\n

Vorlon.JS itself is a small web server you can run from your local machine, or install on a server for your team to access, that serves the Vorlon.JS dashboard and communicates with your remote devices. Installing the Vorlon.JS client in your web site or application is as easy as adding a single script tag.

\n

Vorlon.JS can be extended with plugins which may add features to both the client and the dashboard, for example: feature detection, logging, and exception tracking.

\n","headers":[{"depth":"1","title":"Introduction","slug":"introduction"}]},{"meta":{"section":"installation","title":"Installing Vorlon.JS","sequence":1},"html":"

Installing Vorlon.JS

\n

Vorlon.JS Server

\n

To get started using Vorlon.JS you will need to install it from npm:

\n
$ npm i -g vorlon\n

Once Vorlon.JS is done installing, you can now run the server:

\n
$ vorlon\nThe Vorlon server is running\n

With the server running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard.

\n

Vorlon.JS Client

\n

Before you can start debugging your app you have to enable it to communicate to the Vorlon.JS Server by adding this script tag to your application’s html:

\n
<script src=\"http://localhost:1337/vorlon.js\"></script>\n

You can also open the sample page to test that your dashboard is working. You should see the client appear in your dashboard when you open that page.

\n

Vorlon.JS Client advanced topics

\n

If you want to get an unminified version of the plugins on your web page, you can use the following script tag:

\n
<script src=\"http://localhost:1337/vorlon.max.js\"></script>\n

You can have more control on the moment the client side part is starting by using the autostartdisabled version:

\n
<script src=\"http://localhost:1337/vorlon.autostartdisabled.js\"></script>\n

which also exist with the unminified version of the code:

\n
<script src=\"http://localhost:1337/vorlon.max.autostartdisabled.js\"></script>\n

Once this is done, you can start the vorlon client and connect it to the dashbard of you choice using the session id you want:

\n
VORLON.Core.StartClientSide(\"http://localhost:1337\", \"default\");\n

Vorlon.JS Server advanced topics

\n

If you do not want to use a specific plugin in your dashboard and disable it also on the client part, you can use the config.json file on the server.\nTo be able to do this, you need to use Vorlon.js downloaded and installed from the GitHub repository. You can also modify the package downloaded from npm but this is not recommended.

\n

The file is located on the following folder :

\n
Server/config.json\n

By default, it looks like this :

\n
{\n    \"includeSocketIO\": true,\n    \"useSSL\": true,\n    \"SSLkey\": \"cert/server.key\",\n    \"SSLcert\": \"cert/server.crt\",\n    \"plugins\": [\n        { \"id\": \"CONSOLE\", \"name\": \"Interactive Console\", \"panel\": \"bottom\", \"foldername\" : \"interactiveConsole\", \"enabled\": true},\n        { \"id\": \"DOM\", \"name\": \"Dom Explorer\", \"panel\": \"top\", \"foldername\" : \"domExplorer\", \"enabled\": true },\n        { \"id\": \"MODERNIZR\", \"name\": \"Modernizr\",\"panel\": \"bottom\", \"foldername\" : \"modernizrReport\", \"enabled\": true },\n        { \"id\" : \"OBJEXPLORER\", \"name\" : \"Obj. Explorer\",\"panel\": \"top\", \"foldername\" : \"objectExplorer\", \"enabled\": true },\n        { \"id\" : \"XHRPANEL\", \"name\" : \"XHR\",\"panel\": \"top\", \"foldername\" : \"xhrPanel\", \"enabled\": true  },\n        { \"id\" : \"NGINSPECTOR\", \"name\" : \"ngInspector\",\"panel\": \"top\", \"foldername\" : \"ngInspector\", \"enabled\": false  }\n    ]\n}\n

It is obviously using the JSON (JavaScript Simple Object Notation) format and is easy to understand: each line in the \"plugins\" array represents a plugin.

\n

For instance, you can change the folder where the plugin is installed. This folder has to be located under:

\n
Server/public/vorlon/plugins\n

By convention, this name needs to be the same as the JavaScript file for the plugin for either the max file:

\n
{FOLDERNAME}.js\n

and the min version:

\n
{FOLDERNAME}.min.js\n

You can also choose in which panel the plugin should be displayed using the \"panel\" property. It can be either \"bottom\" or \"top\".

\n

You can add and remove plugins here. \nIt will impact the dashbard by not displaying a removed plugin and also the client JavaScript file which is sent to the client website.

\n

We also added the option to NOT automatically include socket.io in the script returned to the client. You can disable socket.io embedding by setting:

\n
\"includeSocketIO\": false\n

If you want to support SSL and HTTPS, you just have to set \"useSSL\" to true and then define SSLKey and SSLcert files.

\n

Configure base URL

\n

You can change the base URL path in config.json.

\n
\"baseURL\": \"/your/directory\"\n

Configure authentication

\n

You can activate a basic authentication on the Vorlon.js dashboard by adding 3 values to the config.json file.

\n
\"activateAuth\": true,\n\"username\": \"CHANGEHERE\",\n\"password\": \"CHANGEHERE\"\n

If the \"activateAuth\" is set to true, you will be redirected to the login page on the first navigation on the dashboard.\nYou then need to give the information set on the \"username\" et \"password\" settings value.

\n

This allows you to configure a remote Vorlon.js dashboard without risking everyone to access it.

\n

Configure Vorlon behind a Nginx proxy

\n

Edit your nginx.conf, find server { and use this (don't forget to change the paths below to your own paths).

\n
server {\n        listen       80;\n        server_name  YOURSERVERNAME;                                                                                                                                                      \n\n        root /PATH/TO/Vorlonjs/Server/public;\n\n        location ~* ^.+.(jpg|jpeg|gif|css|png|ico|xml)$ {\n                expires          1d;\n        }\n\n        location /YOURSUBDIRECTORY/ {\n                proxy_pass       http://localhost:1337;\n                proxy_set_header Host      $host;\n                proxy_set_header X-Real-IP $remote_addr;\n        }\n\n        location /socket.io/ {\n                proxy_pass http://localhost:1337;\n                proxy_http_version 1.1;\n                proxy_set_header Upgrade $http_upgrade;\n                proxy_set_header Connection \"upgrade\";\n                proxy_set_header Host $host;\n        }\n}\n
","headers":[{"depth":"1","title":"Installing Vorlon.JS","slug":"installing-vorlonjs"},{"depth":"2","title":"Vorlon.JS Server","slug":"vorlonjs-server"},{"depth":"2","title":"Vorlon.JS Client","slug":"vorlonjs-client"},{"depth":"2","title":"Vorlon.JS Client advanced topics","slug":"vorlonjs-client-advanced-topics"},{"depth":"2","title":"Vorlon.JS Server advanced topics","slug":"vorlonjs-server-advanced-topics"},{"depth":"2","title":"Configure base URL","slug":"configure-base-url"},{"depth":"2","title":"Configure authentication","slug":"configure-authentication"},{"depth":"2","title":"Configure Vorlon behind a Nginx proxy","slug":"configure-vorlon-behind-a-nginx-proxy"}]},{"meta":{"section":"dashboard","title":"Vorlon.JS Dashboard","sequence":2},"html":"

Vorlon.JS Dashboard

\n

The Vorlon.JS dashboard is designed to help debug and test remote JavaScript applications and the UI is geared towards that goal. The dashboard has two major sections, the client summary view and the plugin view.

\n

The client summary view shows what the current session and client id are currently active and a list of available clients that you can work with. The Identify a client button quickly allows you to see which remote client browser tab or window you are currently working with.

\n

The plugin view is where all the action is! The console is the only plugin that has a fixed location at the bottom of the dashboard and all other plugins will present themselves across the top as tabs.

\n","headers":[{"depth":"1","title":"Vorlon.JS Dashboard","slug":"vorlonjs-dashboard"}]},{"meta":{"section":"core-plugins","title":"Core Plugins","sequence":3},"html":"

Core Plugins

\n

Console

\n

Logging

\n

The console tab will stream console messages from the client to the dashboard that you can use for debugging. Anything logged with console.log(), console.warn() or console.error() will appear in the dashboard.

\n

Interactivity

\n

You can also interact with the remote webpage by typing code into the input. Code entered will be evaluated in the context of the page.

\n

DOM Explorer

\n

The DOM explorer shows you the dom of the remote webpage. You can inspect the DOM, clicking on nodes will highlight them in the host webpage, and if you select one you can also view and modify its css properties.

\n

Modernizr

\n

The Modernizr tab will show you the supported browser features as reported by Modernizr. You can use this to determine what features are actually available. This might be particularly useful on unusual mobile devices, or things like games consoles. You can use the search filter to select only specific features.

\n

Object Explorer

\n

The Object explorer tab will show you all JavaScript variable living on the remote page. You can click on object to see inner properties.

\n

XHR panel

\n

The XHR panel will help you analyze XHR calls sent by your devices. You can track status code and others useful information.

\n

ngInspector

\n

The ngInspector tab is a tool that will display your Angular.js scopes. You can see inner scopes and even ngRepeat constructs.

\n

Network Monitor

\n

The Network Monitor brings the ability to see all network exchanges done between the browser and the web server. It provides the resource name, the server domain, the type of request, the duration in milliseconds and a nice visual timeline.

\n

Resources Explorer

\n

The Resources Explorer provides information about what is locally stored on the client instance such as sessions, cookies, and local storage. This can be really useful when you want to debug local cache or login / persistent user data issues.

\n","headers":[{"depth":"1","title":"Core Plugins","slug":"core-plugins"},{"depth":"2","title":"Console","slug":"console"},{"depth":"3","title":"Logging","slug":"logging"},{"depth":"3","title":"Interactivity","slug":"interactivity"},{"depth":"2","title":"DOM Explorer","slug":"dom-explorer"},{"depth":"2","title":"Modernizr","slug":"modernizr"},{"depth":"2","title":"Object Explorer","slug":"object-explorer"},{"depth":"2","title":"XHR panel","slug":"xhr-panel"},{"depth":"2","title":"ngInspector","slug":"nginspector"},{"depth":"2","title":"Network Monitor","slug":"network-monitor"},{"depth":"2","title":"Resources Explorer","slug":"resources-explorer"}]},{"meta":{"section":"creating-plugins","title":"Creating Plugins","sequence":4},"html":"

Creating Plugins

\n

Vorlon.JS has been designed so that you can extend the dashboard and client application easily by writing or installing additional plugins. These can add extra panes to the dashboard which can communicate bi-directionally with the client application. The console, dom inspector and modernizr panes that come bundled with Vorlon.JS are all plugins themselves.

\n

Writing Plugins

\n

Running Vorlon.JS from source

\n

To write plugins, you currently need to clone and run Vorlon.JS from source.

\n

These commands will clone the repo, install dependencies, and run the VorlonJS server from source:

\n
git clone https://github.com/MicrosoftDX/Vorlonjs.git\ncd Vorlonjs\nnpm install\nnpm start\n

For further documentation on developing on Vorlon.JS, check the full readme in the repo.

\n

Sample Plugin

\n

A Vorlon.JS plugin is based on two Typescript classes, that will be loaded in both the client and dashboard. They have to extend from the Vorlon.ClientPlugin class and the Vorlon.DashboardPlugin class. It may also load html and css into the dashboard to define a panel. You can then write code for both the dashboard and client that can communicate bidirectionally to create whatever features you need.

\n

To make it easy to get started, we’ve created a sample plugin. This adds an input field to the dashboard, that, when you type something and hit return, sends the message to your client browser, which will reverse the string and send it back, to be rendered in the dashboard. It’s just a simple example to show you how to create and communicate in a plugin. You should check the sample plugin’s readme for information about how to enable it, and then read the sample client plugin’s code and the sample dashboard plugin's code to see how you might modify it for your own needs.

\n

Installing Plugins

\n

We are still working on making it easy to install and run third-party plugins for Vorlon.JS. At the moment, you will need to write and compile plugins in a checked out version of vorlon as above, but we want to make it really easy for you to publish and use plugins with Vorlon.JS. If you have ideas on how we can improve this file an issue on github.

\n

In the meantime, if you've developed a plugin that you think could go in Vorlon.JS core, submit a pull request.

\n

Useful reading

\n

How to create a plugin by Etienne Margraff

\n","headers":[{"depth":"1","title":"Creating Plugins","slug":"creating-plugins"},{"depth":"2","title":"Writing Plugins","slug":"writing-plugins"},{"depth":"3","title":"Running Vorlon.JS from source","slug":"running-vorlonjs-from-source"},{"depth":"3","title":"Sample Plugin","slug":"sample-plugin"},{"depth":"2","title":"Installing Plugins","slug":"installing-plugins"},{"depth":"2","title":"Useful reading","slug":"useful-reading"}]},{"meta":{"section":"contributing","title":"Contributing","sequence":5},"html":"

Contributing

\n

Vorlon.JS is a fully open source project. It is licensed with the MIT License.

\n

For information on how to develop on the Vorlon.JS server/client itself, and how to contribute, please read the README and CONTRIBUTING files over at the github repo.

\n","headers":[{"depth":"1","title":"Contributing","slug":"contributing"}]}] \ No newline at end of file +[{"meta":{"section":"introduction","title":"Introduction","sequence":0},"html":"

Introduction

\n

Vorlon.JS is a remote debugging and testing tool for JavaScript. It helps you remotely load inspect, test and debug JavaScript code running on any device with a web browser: whether it's a games console, mobile device or fridge.

\n

Vorlon.JS itself is a small web server you can run from your local machine, or install on a server for your team to access, that serves the Vorlon.JS dashboard and communicates with your remote devices. Installing the Vorlon.JS client in your web site or application is as easy as adding a single script tag.

\n

Vorlon.JS can be extended with plugins which may add features to both the client and the dashboard, for example: feature detection, logging, and exception tracking.

\n","headers":[{"depth":"1","title":"Introduction","slug":"introduction"}]},{"meta":{"section":"installation","title":"Installing Vorlon.JS","sequence":1},"html":"

Installing Vorlon.JS

\n

Vorlon.JS Server

\n

To get started using Vorlon.JS you will need to install it from npm:

\n
$ npm i -g vorlon\n

Once Vorlon.JS is done installing, you can now run the server:

\n
$ vorlon\nThe Vorlon server is running\n

With the server running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard.

\n

Vorlon.JS Client

\n

Before you can start debugging your app you have to enable it to communicate to the Vorlon.JS Server by adding this script tag to your application’s html:

\n
<script src=\"http://localhost:1337/vorlon.js\"></script>\n

You can also open the sample page to test that your dashboard is working. You should see the client appear in your dashboard when you open that page.

\n

Vorlon.JS Client advanced topics

\n

If you want to get an unminified version of the plugins on your web page, you can use the following script tag:

\n
<script src=\"http://localhost:1337/vorlon.max.js\"></script>\n

You can have more control on the moment the client side part is starting by using the autostartdisabled version:

\n
<script src=\"http://localhost:1337/vorlon.autostartdisabled.js\"></script>\n

which also exist with the unminified version of the code:

\n
<script src=\"http://localhost:1337/vorlon.max.autostartdisabled.js\"></script>\n

Once this is done, you can start the vorlon client and connect it to the dashbard of you choice using the session id you want:

\n
VORLON.Core.StartClientSide(\"http://localhost:1337\", \"default\");\n

Vorlon.JS Server advanced topics

\n

If you do not want to use a specific plugin in your dashboard and disable it also on the client part, you can use the config.json file on the server.\nTo be able to do this, you need to use Vorlon.js downloaded and installed from the GitHub repository. You can also modify the package downloaded from npm but this is not recommended.

\n

The file is located on the following folder :

\n
Server/config.json\n

By default, it looks like this :

\n
{\n    \"includeSocketIO\": true,\n    \"useSSL\": true,\n    \"SSLkey\": \"cert/server.key\",\n    \"SSLcert\": \"cert/server.crt\",\n    \"plugins\": [\n        { \"id\": \"CONSOLE\", \"name\": \"Interactive Console\", \"panel\": \"bottom\", \"foldername\" : \"interactiveConsole\", \"enabled\": true},\n        { \"id\": \"DOM\", \"name\": \"Dom Explorer\", \"panel\": \"top\", \"foldername\" : \"domExplorer\", \"enabled\": true },\n        { \"id\": \"MODERNIZR\", \"name\": \"Modernizr\",\"panel\": \"bottom\", \"foldername\" : \"modernizrReport\", \"enabled\": true },\n        { \"id\" : \"OBJEXPLORER\", \"name\" : \"Obj. Explorer\",\"panel\": \"top\", \"foldername\" : \"objectExplorer\", \"enabled\": true },\n        { \"id\" : \"XHRPANEL\", \"name\" : \"XHR\",\"panel\": \"top\", \"foldername\" : \"xhrPanel\", \"enabled\": true  },\n        { \"id\" : \"NGINSPECTOR\", \"name\" : \"ngInspector\",\"panel\": \"top\", \"foldername\" : \"ngInspector\", \"enabled\": false  }\n    ]\n}\n

It is obviously using the JSON (JavaScript Simple Object Notation) format and is easy to understand: each line in the \"plugins\" array represents a plugin.

\n

For instance, you can change the folder where the plugin is installed. This folder has to be located under:

\n
Server/public/vorlon/plugins\n

By convention, this name needs to be the same as the JavaScript file for the plugin for either the max file:

\n
{FOLDERNAME}.js\n

and the min version:

\n
{FOLDERNAME}.min.js\n

You can also choose in which panel the plugin should be displayed using the \"panel\" property. It can be either \"bottom\" or \"top\".

\n

You can add and remove plugins here. \nIt will impact the dashbard by not displaying a removed plugin and also the client JavaScript file which is sent to the client website.

\n

We also added the option to NOT automatically include socket.io in the script returned to the client. You can disable socket.io embedding by setting:

\n
\"includeSocketIO\": false\n

If you want to support SSL and HTTPS, you just have to set \"useSSL\" to true and then define SSLKey and SSLcert files.

\n

Configure base URL

\n

You can change the base URL path in config.json.

\n
\"baseURL\": \"/your/directory\"\n

Configure authentication

\n

You can activate a basic authentication on the Vorlon.js dashboard by adding 3 values to the config.json file.

\n
\"activateAuth\": true,\n\"username\": \"CHANGEHERE\",\n\"password\": \"CHANGEHERE\"\n

If the \"activateAuth\" is set to true, you will be redirected to the login page on the first navigation on the dashboard.\nYou then need to give the information set on the \"username\" et \"password\" settings value.

\n

This allows you to configure a remote Vorlon.js dashboard without risking everyone to access it.

\n

Configure Vorlon behind a Nginx proxy

\n

Edit your nginx.conf, find server { and use this (don't forget to change the paths below to your own paths).

\n
server {\n\n    server_name  vorlon;\n\n    location ~ ^/(fonts/|images/|javascripts/|stylesheets/|vorlon/|vorlon.dashboardManager.js|robots.txt|humans.txt|favicon.ico) {\n             root /PATH/TO/Vorlonjs/Server/public;\n             access_log off;\n             expires 24h;\n    }\n\n    location /test {\n             proxy_set_header Upgrade $http_upgrade;\n             proxy_set_header Connection \"upgrade\";\n             proxy_http_version 1.1;\n             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n             proxy_set_header Host      $host;\n             proxy_pass http://localhost:1337;\n    }\n\n    location /socket.io {\n             proxy_set_header Upgrade $http_upgrade;\n             proxy_set_header Connection \"upgrade\";\n             proxy_http_version 1.1;\n             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n             proxy_set_header Host      $host;\n             proxy_pass http://localhost:1337;\n    }\n
","headers":[{"depth":"1","title":"Installing Vorlon.JS","slug":"installing-vorlonjs"},{"depth":"2","title":"Vorlon.JS Server","slug":"vorlonjs-server"},{"depth":"2","title":"Vorlon.JS Client","slug":"vorlonjs-client"},{"depth":"2","title":"Vorlon.JS Client advanced topics","slug":"vorlonjs-client-advanced-topics"},{"depth":"2","title":"Vorlon.JS Server advanced topics","slug":"vorlonjs-server-advanced-topics"},{"depth":"2","title":"Configure base URL","slug":"configure-base-url"},{"depth":"2","title":"Configure authentication","slug":"configure-authentication"},{"depth":"2","title":"Configure Vorlon behind a Nginx proxy","slug":"configure-vorlon-behind-a-nginx-proxy"}]},{"meta":{"section":"dashboard","title":"Vorlon.JS Dashboard","sequence":2},"html":"

Vorlon.JS Dashboard

\n

The Vorlon.JS dashboard is designed to help debug and test remote JavaScript applications and the UI is geared towards that goal. The dashboard has two major sections, the client summary view and the plugin view.

\n

The client summary view shows what the current session and client id are currently active and a list of available clients that you can work with. The Identify a client button quickly allows you to see which remote client browser tab or window you are currently working with.

\n

The plugin view is where all the action is! The console is the only plugin that has a fixed location at the bottom of the dashboard and all other plugins will present themselves across the top as tabs.

\n","headers":[{"depth":"1","title":"Vorlon.JS Dashboard","slug":"vorlonjs-dashboard"}]},{"meta":{"section":"core-plugins","title":"Core Plugins","sequence":3},"html":"

Core Plugins

\n

Console

\n

Logging

\n

The console tab will stream console messages from the client to the dashboard that you can use for debugging. Anything logged with console.log(), console.warn() or console.error() will appear in the dashboard.

\n

Interactivity

\n

You can also interact with the remote webpage by typing code into the input. Code entered will be evaluated in the context of the page.

\n

DOM Explorer

\n

The DOM explorer shows you the dom of the remote webpage. You can inspect the DOM, clicking on nodes will highlight them in the host webpage, and if you select one you can also view and modify its css properties.

\n

Modernizr

\n

The Modernizr tab will show you the supported browser features as reported by Modernizr. You can use this to determine what features are actually available. This might be particularly useful on unusual mobile devices, or things like games consoles. You can use the search filter to select only specific features.

\n

Object Explorer

\n

The Object explorer tab will show you all JavaScript variable living on the remote page. You can click on object to see inner properties.

\n

XHR panel

\n

The XHR panel will help you analyze XHR calls sent by your devices. You can track status code and others useful information.

\n

ngInspector

\n

The ngInspector tab is a tool that will display your Angular.js scopes. You can see inner scopes and even ngRepeat constructs.

\n

Network Monitor

\n

The Network Monitor brings the ability to see all network exchanges done between the browser and the web server. It provides the resource name, the server domain, the type of request, the duration in milliseconds and a nice visual timeline.

\n

Resources Explorer

\n

The Resources Explorer provides information about what is locally stored on the client instance such as sessions, cookies, and local storage. This can be really useful when you want to debug local cache or login / persistent user data issues.

\n

Best practices

\n

This plugins checks for many rules related to best practices and web standards for your website. It can be usefull to detect various implementation details like accessibility, css checks like prefixes, ... The rules system and extensible. It means that you could contribute additionnal rules, or build rules for yourself based on your own needs.

\n","headers":[{"depth":"1","title":"Core Plugins","slug":"core-plugins"},{"depth":"2","title":"Console","slug":"console"},{"depth":"3","title":"Logging","slug":"logging"},{"depth":"3","title":"Interactivity","slug":"interactivity"},{"depth":"2","title":"DOM Explorer","slug":"dom-explorer"},{"depth":"2","title":"Modernizr","slug":"modernizr"},{"depth":"2","title":"Object Explorer","slug":"object-explorer"},{"depth":"2","title":"XHR panel","slug":"xhr-panel"},{"depth":"2","title":"ngInspector","slug":"nginspector"},{"depth":"2","title":"Network Monitor","slug":"network-monitor"},{"depth":"2","title":"Resources Explorer","slug":"resources-explorer"},{"depth":"2","title":"Best practices","slug":"best-practices"}]},{"meta":{"section":"creating-plugins","title":"Creating Plugins","sequence":4},"html":"

Creating Plugins

\n

Vorlon.JS has been designed so that you can extend the dashboard and client application easily by writing or installing additional plugins. These can add extra panes to the dashboard which can communicate bi-directionally with the client application. The console, dom inspector and modernizr panes that come bundled with Vorlon.JS are all plugins themselves.

\n

Writing Plugins

\n

Running Vorlon.JS from source

\n

To write plugins, you currently need to clone and run Vorlon.JS from source.

\n

These commands will clone the repo, install dependencies, and run the VorlonJS server from source:

\n
git clone https://github.com/MicrosoftDX/Vorlonjs.git\ncd Vorlonjs\nnpm install\nnpm start\n

For further documentation on developing on Vorlon.JS, check the full readme in the repo.

\n

Sample Plugin

\n

A Vorlon.JS plugin is based on two Typescript classes, that will be loaded in both the client and dashboard. They have to extend from the Vorlon.ClientPlugin class and the Vorlon.DashboardPlugin class. It may also load html and css into the dashboard to define a panel. You can then write code for both the dashboard and client that can communicate bidirectionally to create whatever features you need.

\n

To make it easy to get started, we’ve created a sample plugin. This adds an input field to the dashboard, that, when you type something and hit return, sends the message to your client browser, which will reverse the string and send it back, to be rendered in the dashboard. It’s just a simple example to show you how to create and communicate in a plugin. You should check the sample plugin’s readme for information about how to enable it, and then read the sample client plugin’s code and the sample dashboard plugin's code to see how you might modify it for your own needs.

\n

Installing Plugins

\n

We are still working on making it easy to install and run third-party plugins for Vorlon.JS. At the moment, you will need to write and compile plugins in a checked out version of vorlon as above, but we want to make it really easy for you to publish and use plugins with Vorlon.JS. If you have ideas on how we can improve this file an issue on github.

\n

In the meantime, if you've developed a plugin that you think could go in Vorlon.JS core, submit a pull request.

\n

Useful reading

\n

How to create a plugin by Etienne Margraff

\n","headers":[{"depth":"1","title":"Creating Plugins","slug":"creating-plugins"},{"depth":"2","title":"Writing Plugins","slug":"writing-plugins"},{"depth":"3","title":"Running Vorlon.JS from source","slug":"running-vorlonjs-from-source"},{"depth":"3","title":"Sample Plugin","slug":"sample-plugin"},{"depth":"2","title":"Installing Plugins","slug":"installing-plugins"},{"depth":"2","title":"Useful reading","slug":"useful-reading"}]},{"meta":{"section":"vorlonproxy","title":"Vorlon proxy","sequence":5},"html":"

Vorlon proxy

\n

Sometimes you must audit, test, or debug a website in production and you don't have Vorlon script injected in your pages. \nFor all such cases, you could now use Vorlon \"proxy\" feature to open your site.

\n

How does it work ?

\n

The proxy is a tool built with node.js, running server side on a separate process (and therefore a separate port or domain if you must deploy it). When the proxy is called with a target url, it will forward this http call (and all subsequent calls) to the target. The proxy will injects Vorlon's client script in the page for you in the meantime. To manage subsequent calls for resources from the website (like css, scripts, images, ...), the proxy create a cookie on first call with the target url. The (necessary) use of a cookie means that it is unadvised to run multiple Vorlon inspection using proxy with the same browser instance (because this cookie will be shared among browser tabs).

\n

Running proxy locally

\n

First you must check that the proxy has been enabled. Open config.json and verify that \"enableWebproxy\" is set to true, and start your Vorlon server (using \"npm start\" for example). That's the only thing you must have to do. If you run the proxy locally, you could go to http://localhost:1337/httpproxy to open a helper page. The proxy itself will listen on port 5050 (by default). In case of trouble, look at the console for your server. At the very beginning you must have a trace indicating that the server and the proxy have started, and which port they are running on.

\n

hosting the proxy

\n

Vorlon server and proxy resides on different processes and could be deployed separately. To work properly, the proxy must be listening at the root of a http domain. The proxy cannot work if it's set on a path like \"http://vorlonjs.com/documentation/\". This is due to the fact that inspected web pages may have url relative to the httpdomain (url starting with \"/\"). If the proxy is not listening at the root, it won't be able to catch those calls.

\n

If you want to host a Vorlon instance with the proxy feature, their are a few configurations that you may find usefull :\n\"vorlonServerURL\" is used by the proxy to build the url of Vorlon client script\n\"vorlonProxyURL\" is used by the Vorlon server to send requests to the proxy

\n

if empty, \"vorlonServerURL\" and \"vorlonProxyURL\" default to localhost with the proper port.

\n","headers":[{"depth":"1","title":"Vorlon proxy","slug":"vorlon-proxy"},{"depth":"2","title":"How does it work ?","slug":"how-does-it-work"},{"depth":"2","title":"Running proxy locally","slug":"running-proxy-locally"},{"depth":"2","title":"hosting the proxy","slug":"hosting-the-proxy"}]},{"meta":{"section":"contributing","title":"Contributing","sequence":6},"html":"

Contributing

\n

Vorlon.JS is a fully open source project. It is licensed with the MIT License.

\n

For information on how to develop on the Vorlon.JS server/client itself, and how to contribute, please read the README and CONTRIBUTING files over at the github repo.

\n","headers":[{"depth":"1","title":"Contributing","slug":"contributing"}]}] \ No newline at end of file diff --git a/documentation/contributing.md b/documentation/contributing.md index 68f3daa..ed7e9ef 100644 --- a/documentation/contributing.md +++ b/documentation/contributing.md @@ -1,7 +1,7 @@ --- section: contributing title: Contributing -sequence: 05 +sequence: 06 --- Vorlon.JS is a fully open source project. It is licensed with the [MIT License](https://github.com/MicrosoftDX/Vorlonjs/blob/master/LICENSE). diff --git a/documentation/core-plugins.md b/documentation/core-plugins.md index 18bee06..7124454 100644 --- a/documentation/core-plugins.md +++ b/documentation/core-plugins.md @@ -41,3 +41,7 @@ The Network Monitor brings the ability to see all network exchanges done between ## Resources Explorer The Resources Explorer provides information about what is locally stored on the client instance such as sessions, cookies, and local storage. This can be really useful when you want to debug local cache or login / persistent user data issues. + +## Best practices + +This plugins checks for many rules related to best practices and web standards for your website. It can be usefull to detect various implementation details like accessibility, css checks like prefixes, ... The rules system and extensible. It means that you could contribute additionnal rules, or build rules for yourself based on your own needs. \ No newline at end of file diff --git a/documentation/index.html b/documentation/index.html index ed3bdab..a68ae70 100644 --- a/documentation/index.html +++ b/documentation/index.html @@ -68,6 +68,7 @@

Documentation

  • ngInspector
  • Network Monitor
  • Resources Explorer
    • +
  • Best practices
  • Creating Plugins @@ -79,6 +80,13 @@

    Documentation

  • Useful reading
    • +
  • Vorlon proxy + +
  • Contributing
    • @@ -159,29 +167,32 @@

    Documentation

    Configure Vorlon behind a Nginx proxy

    Edit your nginx.conf, find server { and use this (don't forget to change the paths below to your own paths).

    server {
-        listen       80;
-        server_name  YOURSERVERNAME;                                                                                                                                                      
 
-        root /PATH/TO/Vorlonjs/Server/public;
+    server_name  vorlon;
 
-        location ~* ^.+.(jpg|jpeg|gif|css|png|ico|xml)$ {
-                expires          1d;
-        }
+    location ~ ^/(fonts/|images/|javascripts/|stylesheets/|vorlon/|vorlon.dashboardManager.js|robots.txt|humans.txt|favicon.ico) {
+             root /PATH/TO/Vorlonjs/Server/public;
+             access_log off;
+             expires 24h;
+    }
 
-        location /YOURSUBDIRECTORY/ {
-                proxy_pass       http://localhost:1337;
-                proxy_set_header Host      $host;
-                proxy_set_header X-Real-IP $remote_addr;
-        }
+    location /test {
+             proxy_set_header Upgrade $http_upgrade;
+             proxy_set_header Connection "upgrade";
+             proxy_http_version 1.1;
+             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+             proxy_set_header Host      $host;
+             proxy_pass http://localhost:1337;
+    }
 
-        location /socket.io/ {
-                proxy_pass http://localhost:1337;
-                proxy_http_version 1.1;
-                proxy_set_header Upgrade $http_upgrade;
-                proxy_set_header Connection "upgrade";
-                proxy_set_header Host $host;
-        }
-}
+    location /socket.io {
+             proxy_set_header Upgrade $http_upgrade;
+             proxy_set_header Connection "upgrade";
+             proxy_http_version 1.1;
+             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+             proxy_set_header Host      $host;
+             proxy_pass http://localhost:1337;
+    }

    Vorlon.JS Dashboard

    @@ -210,6 +221,8 @@

    Documentation

    The Network Monitor brings the ability to see all network exchanges done between the browser and the web server. It provides the resource name, the server domain, the type of request, the duration in milliseconds and a nice visual timeline.

    Resources Explorer

    The Resources Explorer provides information about what is locally stored on the client instance such as sessions, cookies, and local storage. This can be really useful when you want to debug local cache or login / persistent user data issues.

    +

    Best practices

    +

    This plugins checks for many rules related to best practices and web standards for your website. It can be usefull to detect various implementation details like accessibility, css checks like prefixes, ... The rules system and extensible. It means that you could contribute additionnal rules, or build rules for yourself based on your own needs.

    Creating Plugins

    @@ -232,6 +245,21 @@

    Documentation

    Useful reading

    How to create a plugin by Etienne Margraff

    +
    +

    Vorlon proxy

    +

    Sometimes you must audit, test, or debug a website in production and you don't have Vorlon script injected in your pages. +For all such cases, you could now use Vorlon "proxy" feature to open your site.

    +

    How does it work ?

    +

    The proxy is a tool built with node.js, running server side on a separate process (and therefore a separate port or domain if you must deploy it). When the proxy is called with a target url, it will forward this http call (and all subsequent calls) to the target. The proxy will injects Vorlon's client script in the page for you in the meantime. To manage subsequent calls for resources from the website (like css, scripts, images, ...), the proxy create a cookie on first call with the target url. The (necessary) use of a cookie means that it is unadvised to run multiple Vorlon inspection using proxy with the same browser instance (because this cookie will be shared among browser tabs).

    +

    Running proxy locally

    +

    First you must check that the proxy has been enabled. Open config.json and verify that "enableWebproxy" is set to true, and start your Vorlon server (using "npm start" for example). That's the only thing you must have to do. If you run the proxy locally, you could go to http://localhost:1337/httpproxy to open a helper page. The proxy itself will listen on port 5050 (by default). In case of trouble, look at the console for your server. At the very beginning you must have a trace indicating that the server and the proxy have started, and which port they are running on.

    +

    hosting the proxy

    +

    Vorlon server and proxy resides on different processes and could be deployed separately. To work properly, the proxy must be listening at the root of a http domain. The proxy cannot work if it's set on a path like "http://vorlonjs.com/documentation/". This is due to the fact that inspected web pages may have url relative to the httpdomain (url starting with "/"). If the proxy is not listening at the root, it won't be able to catch those calls.

    +

    If you want to host a Vorlon instance with the proxy feature, their are a few configurations that you may find usefull : +"vorlonServerURL" is used by the proxy to build the url of Vorlon client script +"vorlonProxyURL" is used by the Vorlon server to send requests to the proxy

    +

    if empty, "vorlonServerURL" and "vorlonProxyURL" default to localhost with the proper port.

    +

    Contributing

    Vorlon.JS is a fully open source project. It is licensed with the MIT License.

    diff --git a/documentation/webproxy.md b/documentation/webproxy.md new file mode 100644 index 0000000..4ce7f07 --- /dev/null +++ b/documentation/webproxy.md @@ -0,0 +1,26 @@ +--- +section: vorlonproxy +title: Vorlon proxy +sequence: 05 +--- + +Sometimes you must audit, test, or debug a website in production and you don't have Vorlon script injected in your pages. +For all such cases, you could now use Vorlon "proxy" feature to open your site. + +## How does it work ? + +The proxy is a tool built with node.js, running server side on a separate process (and therefore a separate port or domain if you must deploy it). When the proxy is called with a target url, it will forward this http call (and all subsequent calls) to the target. The proxy will injects Vorlon's client script in the page for you in the meantime. To manage subsequent calls for resources from the website (like css, scripts, images, ...), the proxy create a cookie on first call with the target url. The (necessary) use of a cookie means that it is unadvised to run multiple Vorlon inspection using proxy with the same browser instance (because this cookie will be shared among browser tabs). + +## Running proxy locally + +First you must check that the proxy has been enabled. Open config.json and verify that "enableWebproxy" is set to true, and start your Vorlon server (using "npm start" for example). That's the only thing you must have to do. If you run the proxy locally, you could go to http://localhost:1337/httpproxy to open a helper page. The proxy itself will listen on port 5050 (by default). In case of trouble, look at the console for your server. At the very beginning you must have a trace indicating that the server and the proxy have started, and which port they are running on. + +## hosting the proxy + +Vorlon server and proxy resides on different processes and could be deployed separately. To work properly, the proxy must be listening at the root of a http domain. The proxy cannot work if it's set on a path like "http://vorlonjs.com/documentation/". This is due to the fact that inspected web pages may have url relative to the httpdomain (url starting with "/"). If the proxy is not listening at the root, it won't be able to catch those calls. + +If you want to host a Vorlon instance with the proxy feature, their are a few configurations that you may find usefull : +"vorlonServerURL" is used by the proxy to build the url of Vorlon client script +"vorlonProxyURL" is used by the Vorlon server to send requests to the proxy + +if empty, "vorlonServerURL" and "vorlonProxyURL" default to localhost with the proper port. \ No newline at end of file