From 6a646707862b8e5058048bd5300beb9a63c55d25 Mon Sep 17 00:00:00 2001
From: lxsang <xsang.le@gmail.com>
Date: Fri, 18 Sep 2020 13:17:43 +0200
Subject: [PATCH] use afx in blog

---
 blog/assets/main.js          | 249 ++++++++++++------------
 blog/assets/style.css        | 361 ++++++++++++++---------------------
 blog/views/default/layout.ls |   4 +-
 ci/scripts/antos.sh          |  13 +-
 grs/sendto.html              |  65 ++++---
 grs/subscribe.html           |  60 +++---
 6 files changed, 357 insertions(+), 395 deletions(-)

diff --git a/blog/assets/main.js b/blog/assets/main.js
index f499551..c0ec929 100644
--- a/blog/assets/main.js
+++ b/blog/assets/main.js
@@ -1,126 +1,135 @@
 var scheme = undefined;
-String.prototype.__ = function()
-{
-    return this
-}
-function subscribe(prefix)
-{
-    if(scheme) return;
+OS.GUI.workspace = undefined;
+String.prototype.__ = function () {
+    return this;
+};
+function subscribe(prefix) {
+    if (!OS.GUI.workspace) OS.GUI.workspace = $("body");
+    if (scheme) return;
     // get scheme
-    $.get(prefix+"/rst/subscribe.html")
-    .done(function(d) {
-        scheme = $.parseHTML(d)
-        var obs = riot.observable()
-        $(scheme).css("visibility","hidden")
-        $("#desktop" ).append(scheme)
-        obs.on("exit", function(){
-            $(scheme).remove()
-            scheme = undefined
+    $.get(prefix + "/rst/subscribe.html")
+        .done(function (d) {
+            scheme = $.parseHTML(d);
+            var obs = new OS.API.Announcer();
+            $(scheme).css("visibility", "hidden");
+            $("body").append(scheme);
+            obs.on("exit", function () {
+                $(scheme).remove();
+                scheme = undefined;
+            });
+            obs.on("rendered", function (d) {
+                console.log("rednered");
+                $(".afx-window-title", scheme).html("Subscribe");
+                $("[data-id='send']", scheme).click(function () {
+                    var status = $("[data-id='status']", scheme);
+                    status.html("");
+                    var els = $("[data-class='data']", scheme);
+                    var data = {};
+
+                    for (var i = 0; i < els.length; i++)
+                        data[els[i].name] = $(els[i]).val();
+                    if (
+                        data.email == "" ||
+                        data.subject == "" ||
+                        data.content == "" ||
+                        data.name == ""
+                    )
+                        return status.html("Please enter all the fields");
+                    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                    if (!re.test(String(data.email).toLowerCase()))
+                        return status.html("Email is not correct");
+
+                    $.ajax({
+                        type: "POST",
+                        url: prefix + "/service/subscribe",
+                        contentType: "application/json",
+                        data: JSON.stringify(data),
+                        dataType: "json",
+                        success: null,
+                    })
+                        .done(function (r) {
+                            if (r.error) {
+                                console.log(r.error);
+                                alert(r.error);
+                            } else {
+                                obs.trigger("exit");
+                                alert("You have been subscribed. Thanks");
+                            }
+                        })
+                        .fail(function (e, s) {
+                            console.log(e);
+                            alert("Error: " + e);
+                        });
+                });
+                $(scheme).css("visibility", "visible");
+            });
+            scheme[0].uify(obs, true);
         })
-        obs.on("rendered", function(d){
-            $(".afx-window-title", scheme).html("Subscribe")
-            $("[data-id='send']", scheme).click(function(){
-                var status = $("[data-id='status']", scheme)
-                status.html("");
-                var els = $("[data-class='data']", scheme)
-                var data = {}
-                
-                for(var i = 0; i < els.length; i++)
-                    data[els[i].name] = $(els[i]).val()
-                if(data.email == "" || data.subject == "" || data.content == "" || data.name == "")
-                    return status.html("Please enter all the fields");
-                var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-                if(!re.test(String(data.email).toLowerCase()))
-                    return status.html("Email is not correct");
-                
-                $.ajax({
-                    type: 'POST',
-                    url: prefix + "/service/subscribe",
-                    contentType: 'application/json',
-                    data: JSON.stringify(data),
-                    dataType: 'json',
-                    success: null
-                }).done(function(r){
-                    if(r.error)
-                    {
-                        console.log(r.error)
-                        alert(r.error)
-                    }
-                    else
-                    {
-                        obs.trigger("exit")
-                        alert("You have been subscribed. Thanks")
-                    }
-                }).fail(function(e, s){
-                    console.log(e)
-                    alert("Error: " + e)
-                })
-            })
-            $(scheme).css("visibility","visible")
-        })
-        riot.mount(scheme, {observable:obs})
-    })
-    .fail(function() {
-        alert( "Cannot get the form" );
-    })
+        .fail(function () {
+            alert("Cannot get the form");
+        });
 }
-function mailtoMe(prefix)
-{
-    if(scheme) return;
+function mailtoMe(prefix) {
+    if (!OS.GUI.workspace) OS.GUI.workspace = $("body");
+    if (scheme) return;
     // get scheme
-    $.get(prefix+"/rst/sendto.html")
-    .done(function(d) {
-        scheme = $.parseHTML(d)
-        var obs = riot.observable()
-        $(scheme).css("visibility","hidden")
-        $("#desktop" ).append(scheme)
-        obs.on("exit", function(){
-            $(scheme).remove()
-            scheme = undefined
+    $.get(prefix + "/rst/sendto.html")
+        .done(function (d) {
+            scheme = $.parseHTML(d);
+            var obs = new OS.API.Announcer();
+            $(scheme).css("visibility", "hidden");
+            $("body").append(scheme);
+            obs.on("exit", function () {
+                $(scheme).remove();
+                scheme = undefined;
+            });
+            obs.on("rendered", function (d) {
+                $(".afx-window-title", scheme).html("Send me an email");
+                $("[data-id='send']", scheme).click(function () {
+                    var status = $("[data-id='status']", scheme);
+                    status.html("");
+                    var els = $("[data-class='data']", scheme);
+                    var data = {};
+
+                    for (var i = 0; i < els.length; i++)
+                        data[els[i].name] = $(els[i]).val();
+                    if (
+                        data.email == "" ||
+                        data.subject == "" ||
+                        data.content == "" ||
+                        data.name == ""
+                    )
+                        return status.html("Please enter all the fields");
+                    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                    if (!re.test(String(data.email).toLowerCase()))
+                        return status.html("Email is not correct");
+
+                    $.ajax({
+                        type: "POST",
+                        url: prefix + "/service/sendmail",
+                        contentType: "application/json",
+                        data: JSON.stringify(data),
+                        dataType: "json",
+                        success: null,
+                    })
+                        .done(function (r) {
+                            if (r.error) {
+                                console.log(r.error);
+                                alert(r.error);
+                            } else {
+                                obs.trigger("exit");
+                                alert("Email sent. Thank");
+                            }
+                        })
+                        .fail(function () {
+                            alert("Service unavailable at the moment");
+                        });
+                });
+                $(scheme).css("visibility", "visible");
+            });
+            scheme[0].uify(obs, true);
         })
-        obs.on("rendered", function(d){
-            $(".afx-window-title", scheme).html("Send me an email")
-            $("[data-id='send']", scheme).click(function(){
-                var status = $("[data-id='status']", scheme)
-                status.html("");
-                var els = $("[data-class='data']", scheme)
-                var data = {}
-                
-                for(var i = 0; i < els.length; i++)
-                    data[els[i].name] = $(els[i]).val()
-                if(data.email == "" || data.subject == "" || data.content == "" || data.name == "")
-                    return status.html("Please enter all the fields");
-                var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-                if(!re.test(String(data.email).toLowerCase()))
-                    return status.html("Email is not correct");
-                
-                $.ajax({
-                    type: 'POST',
-                    url: prefix + "/service/sendmail",
-                    contentType: 'application/json',
-                    data: JSON.stringify(data),
-                    dataType: 'json',
-                    success: null
-                }).done(function(r){
-                    if(r.error)
-                    {
-                        console.log(r.error)
-                        alert(r.error)
-                    }
-                        else
-                    {
-                        obs.trigger("exit")
-                        alert("Email sent. Thank")
-                    }
-                }).fail(function(){
-                    alert("Service unavailable at the moment")
-                })
-            })
-            $(scheme).css("visibility","visible")
-        })
-        riot.mount(scheme, {observable:obs})
-    })
-    .fail(function() {
-        alert( "Cannot get the form" );
-    })
-}
\ No newline at end of file
+        .fail(function () {
+            alert("Cannot get the form");
+        });
+}
diff --git a/blog/assets/style.css b/blog/assets/style.css
index c808ba6..6172486 100644
--- a/blog/assets/style.css
+++ b/blog/assets/style.css
@@ -1,4 +1,5 @@
-html,body{
+html,
+body {
     margin: 0;
     padding: 0;
     font-family: "Ubuntu";
@@ -8,7 +9,7 @@ html,body{
     height: 100%;
     overflow: hidden;
 }
-#desktop{
+#desktop {
     /*width:100%;
     min-height:100%; 
     overflow:hidden;
@@ -18,7 +19,7 @@ html,body{
     color: #414339;*/
 }
 
-#top{
+#top {
     background-color: #2c2c2c;
     color: white;
     font-weight: bold;
@@ -26,67 +27,67 @@ html,body{
     text-align: center;
     height: 50px;
 }
-#top ul{
-    padding:0;
+#top ul {
+    padding: 0;
     margin: 0;
     padding-top: 16px;
     list-style: none;
 }
-#top ul li{
+#top ul li {
     float: left;
-    padding-left:10px;
+    padding-left: 10px;
     padding-right: 10px;
 }
-#top ul li i{
+#top ul li i {
     margin-right: 3px;
 }
-#top ul li a{
+#top ul li a {
     text-decoration: none;
     color: white;
 }
-#top ul li a:hover{
+#top ul li a:hover {
     border-bottom: 1px dashed white;
 }
-#bottom{
+#bottom {
     position: fixed;
     bottom: 0;
     height: 20px;
     text-align: center;
-    color:#878887;
+    color: #878887;
     background-color: white;
     font-size: 13px;
     width: 100%;
-    padding:5px;
+    padding: 5px;
     border-top: 1px solid #878887;
 }
-#desktop{
+#desktop {
     height: calc(100% - 80px);
     overflow-y: auto;
     padding-left: 15px;
     padding-right: 15px;
 }
-#navbar{
-    margin:0 auto;
+#navbar {
+    margin: 0 auto;
     max-width: 960px;
     display: flex;
-    justify-content:flex-end;
+    justify-content: flex-end;
     flex-direction: row;
 }
-#navbar.navmobile{
-    margin:0 auto;
+#navbar.navmobile {
+    margin: 0 auto;
     max-width: 960px;
     display: flex;
-    justify-content:flex-start;
+    justify-content: flex-start;
     flex-direction: row;
     font-size: 14px;
 }
-#container{
-    margin:0 auto;
+#container {
+    margin: 0 auto;
     max-width: 960px;
     text-align: justify;
 }
 
-textarea{
+textarea {
     margin-left: 10px;
     margin-right: 10px;
     border: 0;
@@ -101,85 +102,85 @@ input {
     padding: 0;
     height: 17px;
 }
-div.label{
+div.label {
     color: #899aae;
 }
-button{
+button {
     outline: none;
     background-color: #5fa6cf;
     font-weight: bold;
     color: white;
     border: 0;
     border-radius: 5px;
-    padding:5px;
+    padding: 5px;
     margin-right: 10px;
-    box-shadow: 1px 1px 1px #9f9F9F;
+    box-shadow: 1px 1px 1px #9f9f9f;
 }
-#container .card{
+#container .card {
     display: flex;
     flex-direction: row;
-
 }
 #container .mobile {
     display: flex;
     flex-direction: column;
 }
-#container .card .side{
-    padding-top:28px;
+#container .card .side {
+    padding-top: 28px;
     padding-bottom: 0;
     margin: 0;
     display: block;
     margin-right: 10px;
     width: 120px;
     flex: 1 0 auto;
-    color:#3170B2;
+    color: #3170b2;
     text-align: right;
 }
-#container .card .side .fb-like{
+#container .card .side .fb-like {
     border-right: 1px solid #cccccc;
     display: block;
     padding: 5px;
     padding-bottom: 0;
 }
-#container .card .side .twitter-share-button{
+#container .card .side .twitter-share-button {
     display: inline;
-    padding:5px;
+    padding: 5px;
     padding-bottom: 0;
     border-right: 1px solid #cccccc;
 }
-#container .mobile .side{
+#container .mobile .side {
     width: 100%;
     text-align: left;
 }
-#container .mobile .side .fb-like, #container .mobile .side .twitter-share-button {
-    border:0;
+#container .mobile .side .fb-like,
+#container .mobile .side .twitter-share-button {
+    border: 0;
 }
-#container .card .side .date{
+#container .card .side .date {
     display: inline-block;
     color: #662702;
     padding-right: 5px;
     padding-bottom: 7px;
     border-right: 1px solid #cccccc;
 }
-#container .mobile .side .date{
+#container .mobile .side .date {
     border: 0;
 }
-#container .card .side .tags{
+#container .card .side .tags {
     display: block;
     padding-right: 5px;
     line-height: 1.1;
     font-size: 13px;
-    color:#878887;
+    color: #878887;
     border-right: 1px solid #cccccc;
 }
-#container .mobile .side .tags{
+#container .mobile .side .tags {
     border: 0;
 }
-#container .card .side .tags a{
-    color:#878887;
+#container .card .side .tags a {
+    color: #878887;
     text-decoration: none;
 }
-#container .card .side .tags a:hover{
+#container .card .side .tags a:hover {
     text-decoration: underline;
     text-decoration-color: #cccccc;
 }
@@ -190,8 +191,8 @@ button{
     padding-right: 3px;
     color: #cccccc; 
 }*/
-#container .blogentry{
-    padding-top:20px;
+#container .blogentry {
+    padding-top: 20px;
     /*border-bottom: 1px solid #cccccc;
     padding-bottom: 20px;*/
 }
@@ -199,40 +200,41 @@ button{
     margin: 0;
     margin-bottom: 20px;
 }
-#container .blogentry img{
+#container .blogentry img {
     margin-bottom: 20px;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 #container .blogentry pre {
-    white-space: pre-wrap;       /* Since CSS 2.1 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    white-space: pre-wrap; /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
-#container .blogentry a{
+#container .blogentry a {
     text-decoration: none;
-    color:#3170B2;
+    color: #3170b2;
 }
-#container .blogentry hr{
+#container .blogentry hr {
     display: block;
     height: 1px;
     border: 0;
     border-top: 1px solid #878887;
-    padding: 0; 
+    padding: 0;
 }
-#container .blogentry table{
+#container .blogentry table {
     margin-bottom: 20px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     border-collapse: collapse;
 }
-#container .blogentry table th,#container .blogentry table td{
+#container .blogentry table th,
+#container .blogentry table td {
     border: 1px solid #878787;
-    padding:3px;
+    padding: 3px;
     padding-left: 10px;
     padding-right: 10px;
 }
@@ -240,9 +242,10 @@ button{
     margin: 0;
     text-align: left;
 }
-#container .blogentry pre table td, #container .blogentry pre table td{
-    border:0;
-    padding:0;
+#container .blogentry pre table td,
+#container .blogentry pre table td {
+    border: 0;
+    padding: 0;
 }
 /*
 #
@@ -254,37 +257,37 @@ button{
     background-color: #878787;
     padding:3px;
 }*/
-#container .blogentry h1{
+#container .blogentry h1 {
     font-size: 20px;
-    padding:0;
+    padding: 0;
     margin: 0;
     padding-bottom: 5px;
     text-align: left;
 }
 #container .blogentry .title_link {
-    color:#2c2c2c;
+    color: #2c2c2c;
 }
-#container .blogentry h2{
+#container .blogentry h2 {
     font-size: 18px;
     text-align: left;
 }
-#container .blogentry h3{
+#container .blogentry h3 {
     font-size: 16px;
     text-align: left;
 }
-#container .blogentry h4{
+#container .blogentry h4 {
     font-size: 15px;
     text-align: left;
 }
-#container .blogentry .embeded-video{
+#container .blogentry .embeded-video {
     display: block;
     margin: 0 auto;
 }
-input.search-box{
-    flex:1;
-    padding:0;
-    margin:0;
-    padding-top:13px;
+input.search-box {
+    flex: 1;
+    padding: 0;
+    margin: 0;
+    padding-top: 13px;
     height: 25px;
     background-color: transparent;
     border-bottom: 1px solid #878887;
@@ -293,36 +296,36 @@ input.search-box{
     line-height: 0.5;
     color: #878887;
 }
-div.search-icon:before{
-    padding-top:13px;
+div.search-icon:before {
+    padding-top: 13px;
     content: "\f002";
-    color:#878887;
+    color: #878887;
     display: block;
-    width:20px;
+    width: 20px;
     height: 25px;
     font-family: "FontAwesome";
     font-size: 18px;
     border-bottom: 1px solid #878887;
 }
-div.logo{
+div.logo {
     display: block;
     width: 122px;
-    height:50px;
+    height: 50px;
     background-image: url(mrsang.min.png);
     background-repeat: no-repeat;
-    background-position: right; 
+    background-position: right;
     background-size: 34% 85%;
 }
 #navbar.navmobile div.logo {
     display: block;
     width: 50px;
-    height:50px;
+    height: 50px;
     background-image: url(mrsang.min.png);
     background-repeat: no-repeat;
-    background-position: right; 
+    background-position: right;
     background-size: 85% 85%;
 }
-div.logo a{
+div.logo a {
     display: block;
     text-decoration: none;
     width: 100%;
@@ -331,18 +334,18 @@ div.logo a{
 div.detail {
     display: flex;
     flex-direction: row;
-    margin-top:20px;
+    margin-top: 20px;
 }
-div.detail span{
+div.detail span {
     display: block;
     height: 16px;
     border-bottom: 1px solid #cccccc;
-    flex:1;
+    flex: 1;
 }
-div.detail a{
+div.detail a {
     width: 32px;
     display: block;
-    
+
     height: 32px;
     border: 1px solid #878887;
     text-decoration: none;
@@ -350,82 +353,82 @@ div.detail a{
     margin-left: 10px;
     margin-right: 10px;
 }
-div.detail a:before{
-    font-size:16px;
-    content:"\f039";
+div.detail a:before {
+    font-size: 16px;
+    content: "\f039";
     font-family: "FontAwesome";
-    line-height: 2.0;
-    padding-left:8px;
+    line-height: 2;
+    padding-left: 8px;
     color: #878887;
 }
 div.notfound {
     max-width: 400px;
     margin: 0 auto;
 }
-div.notfound p{
+div.notfound p {
     margin: 0;
-    margin-top:20px;
+    margin-top: 20px;
     color: #662702;
     font-weight: bold;
-    padding:0;
+    padding: 0;
     border-radius: 10px;
 }
-div.notfound p:before{
-    font-size:16px;
-    content:"\f06a";
+div.notfound p:before {
+    font-size: 16px;
+    content: "\f06a";
     font-family: "FontAwesome";
-    line-height: 2.0;
-    padding-right:8px;
+    line-height: 2;
+    padding-right: 8px;
 }
-div.notfound blockquote{
+div.notfound blockquote {
     margin: 0;
 }
-div.notfound blockquote span{
+div.notfound blockquote span {
     display: block;
     text-align: right;
     font-style: italic;
 }
 td.hljs-ln-numbers {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
-	text-align: center;
-	color: #ccc;
-	vertical-align: top;
+    text-align: center;
+    color: #ccc;
+    vertical-align: top;
     font-size: 14;
-	/* your custom style here */
+    /* your custom style here */
 }
 
 /* for block of code */
 #container .blogentry .hljs-ln td.hljs-ln-code {
-	padding-left: 10px;
+    padding-left: 10px;
 }
-div.commentform .inputbox{
-    display:flex;
+div.commentform .inputbox {
+    display: flex;
     flex-direction: row;
     border-bottom: 1px solid #ccc;
 }
-div.commentform .inputbox input{
-    margin-top:3px;
-    flex:1;
+div.commentform .inputbox input {
+    margin-top: 3px;
+    flex: 1;
 }
-div.commentform .inputbox .label{
+div.commentform .inputbox .label {
     padding-right: 5px;
 }
-div.commentform .inputboxbt{
+div.commentform .inputboxbt {
     display: flex;
     flex-direction: row-reverse;
 }
-div.commentform textarea{
+div.commentform textarea {
     min-height: 120px;
-    flex:1;
-    margin:0;
-    margin-top:7px;
-    width: calc( 100% - 20px );
+    flex: 1;
+    margin: 0;
+    margin-top: 7px;
+    width: calc(100% - 20px);
 }
 div.commentform {
     margin: 0 auto;
@@ -435,14 +438,14 @@ div.commentform {
     margin-bottom: 20px;
 }
 
-#container h1.commentsec{
+#container h1.commentsec {
     text-align: center;
-    border-top:  1px dashed #3170B2;
-    color:#3170B2;
+    border-top: 1px dashed #3170b2;
+    color: #3170b2;
     padding-top: 10px;
     padding-bottom: 10px;
 }
-div.time-travel{
+div.time-travel {
     margin-top: 10px;
     display: flex;
     flex-direction: row;
@@ -450,93 +453,21 @@ div.time-travel{
     margin-bottom: 10px;
 }
 
-div.time-travel a{
+div.time-travel a {
     font-weight: bold;
     font-size: 16px;
     text-decoration: none;
-    flex:1;
-    color:#3170B2;
+    flex: 1;
+    color: #3170b2;
 }
-afx-app-window div.afx-window-wrapper{
-    border:1px solid #a6a6a6;
-    /*box-shadow: 1px 1px 1px #cbcbcb;*/
-    box-shadow: 1px 1px 1px #9f9F9F;
-    border-radius: 5px;
-    background-color:#dfdfdf;
-    padding:0;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
+div[data-id="status"] {
+    padding-left: 10px;
+    padding-top: 5px;
+    color: #724841;
 }
-afx-app-window.unactive > div.afx-window-wrapper{
-    background-color: #f6f6f6;
+img {
+    max-width: 100%;
 }
-
-afx-app-window ul.afx-window-top{
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    padding:0;
-    height: 20px;
-    border-bottom: 1px solid #a6a6a6;
-}
-afx-app-window ul.afx-window-top li{
-    list-style: none;
-    margin-left: 3px;
-    margin-top:4px;
-    
-}
-afx-app-window ul.afx-window-top .afx-window-close,.afx-window-minimize,.afx-window-maximize{
-    width: 11px;
-    height: 11px;
-    border-radius: 10px;
-}
-afx-app-window ul li.afx-window-close{
-    background-color: #Fc605b;
-     float:left;
-}
-afx-app-window ul li.afx-window-minimize{
-    background-color: #fec041;
-     float:left;
-}
-afx-app-window ul li.afx-window-maximize{
-    background-color: #35cc4b;
-     float:left;
-}
-
-afx-app-window ul li.afx-window-title{
-    margin-top:1px;
-    float:none;
-    overflow: hidden;
-    padding-left: 5px;
-    padding-right: 5px;
-    text-align: center;
-}
-
-afx-app-window div.afx-window-content
-{
-    overflow: hidden;
-    width: 100%;
-    background-color: white;
-    flex-grow: 1;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
-
-afx-app-window div.afx-window-grip{
-    height: 10px;
-    width: 10px;
-    background-color: transparent;
-}
-afx-hbox.inputbox{
-    margin-left: 10px;
-    margin-right: 10px;
+afx-hbox.inputbox {
     border-bottom: 1px solid #e5e5e5;
 }
-div[data-id="status"]{
-    padding-left: 10px;
-    padding-top:5px;
-    color:#724841;
-}
-img {max-width:100%}
diff --git a/blog/views/default/layout.ls b/blog/views/default/layout.ls
index 35ac596..cce6170 100644
--- a/blog/views/default/layout.ls
+++ b/blog/views/default/layout.ls
@@ -19,9 +19,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" type="text/css" href="<?=HTTP_ROOT?>/rst/ubuntu-regular.css" />
         <link rel="stylesheet" type="text/css" href="<?=HTTP_ROOT?>/rst/font-awesome.css" />
+        <link rel="stylesheet" type="text/css" href="<?=HTTP_ROOT?>/rst/afx.css" />
         <link rel="stylesheet" type="text/css" href="<?=HTTP_ROOT?>/assets/style.css" />
-        <script src="<?=HTTP_ROOT?>/rst/gscripts/riot.min.js"> </script>
-        <script src="<?=HTTP_ROOT?>/rst/resources/antos_tags.js"></script>
+        <script src="<?=HTTP_ROOT?>/rst/afx.js"> </script>
         <script src="<?=HTTP_ROOT?>/rst/gscripts/jquery-3.2.1.min.js"> </script>
         <script src="<?=HTTP_ROOT?>/assets/main.js"></script>
         <meta property="og:image" content="" />
diff --git a/ci/scripts/antos.sh b/ci/scripts/antos.sh
index 882eb40..5341cdf 100644
--- a/ci/scripts/antos.sh
+++ b/ci/scripts/antos.sh
@@ -1,11 +1,10 @@
 #! /bin/bash
 BRANCH="ci"
 PRJ="antos"
-DEST="/opt/www/htdocs/os"
-# /opt/www/htdocs 
+DEST="/opt/www/htdocs/"
+# /opt/www/htdocs
 REPO="https://github.com/lxsang/$PRJ.git"
 
-
 if [ ! -z $1 ]; then
     BRANCH="$1"
 fi
@@ -14,7 +13,7 @@ fi
     echo "Building $PRJ using branch $BRANCH..."
     if [ -d "/tmp/ci/$PRJ" ]; then
         echo "Clean up /tmp/ci/$PRJ"
-        rm  -rf /tmp/ci/$PRJ
+        rm -rf /tmp/ci/$PRJ
     else
         echo "Creating /tmp/ci/"
         mkdir -p "/tmp/ci"
@@ -24,9 +23,9 @@ fi
     git clone -b "$BRANCH" --single-branch --depth=1 "$REPO"
     cd "$PRJ" || (echo "Unable to change directory to source code folder" && exit 1)
     npm i @types/jquery
-    mkdir -p "$DEST"
+    mkdir -p "$DEST/os"
     BUILDDIR="$DEST" make release
+    mkdir -p "$DEST/grs"
+    BUILDDIR="$DEST" make standalone_tags
     echo "Done!"
 } 2>&1 | tee "/opt/www/htdocs/ci/log/${PRJ}_${BRANCH}.txt"
-
-
diff --git a/grs/sendto.html b/grs/sendto.html
index 7137c5f..457587e 100644
--- a/grs/sendto.html
+++ b/grs/sendto.html
@@ -1,27 +1,38 @@
-<afx-app-window apptitle="Send me an email" minimizable="false" resizable = "false" width="450" height="350">
-    <afx-vbox >
-        <div data-height="5"></div>
-        <afx-hbox data-height="20" class = "inputbox">
-            <div data-width = "47" class = "label">Name:</div>
-            <input data-class = "data" type = "text" name = "name" />
-        </afx-hbox>
-        <div data-height="5"></div>
-        <afx-hbox data-height="20" class = "inputbox">
-            <div data-width = "45" class = "label">From:</div>
-            <input data-class = "data" type = "text" name = "email" />
-        </afx-hbox>
-        <div data-height="5"></div>
-        <afx-hbox data-height="20" class = "inputbox">
-            <div data-width = "60" class = "label">Subject:</div>
-            <input data-class = "data" type = "text" name = "subject" />
-        </afx-hbox>
-        <div data-height="5"></div>
-        <textarea data-class = "data"  name = "content"></textarea>
-        <div data-height="5"></div> 
-        <afx-hbox data-height="30">
-            <div data-id="status"></div>
-            <button data-id = "send" data-width = "60" >Send</button>
-        </afx-hbox>
-        <div data-height="5"></div>
-    </afx-vbox>
-</afx-app-window>
\ No newline at end of file
+<afx-app-window
+    apptitle="Send me an email"
+    minimizable="false"
+    resizable="false"
+    width="450"
+    height="350"
+>
+    <afx-hbox>
+        <div data-width="10"></div>
+
+        <afx-vbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="20" class="inputbox">
+                <div data-width="47" class="label">Name:</div>
+                <input data-class="data" type="text" name="name" />
+            </afx-hbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="20" class="inputbox">
+                <div data-width="45" class="label">From:</div>
+                <input data-class="data" type="text" name="email" />
+            </afx-hbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="20" class="inputbox">
+                <div data-width="60" class="label">Subject:</div>
+                <input data-class="data" type="text" name="subject" />
+            </afx-hbox>
+            <div data-height="5"></div>
+            <textarea data-class="data" name="content"></textarea>
+            <div data-height="5"></div>
+            <afx-hbox data-height="30">
+                <div data-id="status"></div>
+                <button data-id="send" data-width="60">Send</button>
+            </afx-hbox>
+            <div data-height="5"></div>
+        </afx-vbox>
+        <div data-width="10"></div>
+    </afx-hbox>
+</afx-app-window>
diff --git a/grs/subscribe.html b/grs/subscribe.html
index e59f414..746618f 100644
--- a/grs/subscribe.html
+++ b/grs/subscribe.html
@@ -1,24 +1,36 @@
-<afx-app-window apptitle="Subscribe" minimizable="false" resizable = "false" width="350" height="170">
-    <afx-vbox >
-        <div data-height="5"></div>
-        <afx-hbox data-height="50" class = "inputbox">
-            <div styple="padding-left:5px;padding-right:5px;">Subscribe to receive an email when new post is published</div>
-        </afx-hbox>
-        <div data-height="5"></div> 
-        <afx-hbox data-height="20" class = "inputbox">
-            <div data-width = "47" class = "label">Name:</div>
-            <input data-class = "data" type = "text" name = "name" />
-        </afx-hbox>
-        <div data-height="5"></div>
-        <afx-hbox data-height="20" class = "inputbox">
-            <div data-width = "45" class = "label">Email:</div>
-            <input data-class = "data" type = "text" name = "email" />
-        </afx-hbox>
-        <div data-height="5"></div>
-        <afx-hbox data-height="30">
-            <div data-id="status"></div>
-            <button data-id = "send" data-width = "60" >Send</button>
-        </afx-hbox>
-        <div data-height="5"></div>
-    </afx-vbox>
-</afx-app-window>
\ No newline at end of file
+<afx-app-window
+    apptitle="Subscribe"
+    minimizable="false"
+    resizable="false"
+    width="350"
+    height="170"
+>
+    <afx-hbox>
+        <div data-width="10"></div>
+        <afx-vbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="50" class="inputbox">
+                <div styple="padding-left:5px;padding-right:5px;">
+                    Subscribe to receive an email when new post is published
+                </div>
+            </afx-hbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="20" class="inputbox">
+                <div data-width="47" class="label">Name:</div>
+                <input data-class="data" type="text" name="name" />
+            </afx-hbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="20" class="inputbox">
+                <div data-width="45" class="label">Email:</div>
+                <input data-class="data" type="text" name="email" />
+            </afx-hbox>
+            <div data-height="5"></div>
+            <afx-hbox data-height="30">
+                <div data-id="status"></div>
+                <button data-id="send" data-width="60">Send</button>
+            </afx-hbox>
+            <div data-height="5"></div>
+        </afx-vbox>
+        <div data-width="10"></div>
+    </afx-hbox>
+</afx-app-window>