lot of stuff. new layout, home page, preparing to join librehosters, etc.

Amolith created

Change summary

_config.yml                      |   3 
_includes/externals/styling.html |   7 
_includes/header.html            |  10 -
_includes/meta_tags/sharing.html |   7 -
_includes/page/explore.html      |   4 
_layouts/default.html            |   2 
_sass/_default.scss              | 116 ++++++++++++-------
assets/music/sappheiros.mp3      |   0 
blog/index.html                  |  27 ++++
contact.html                     |   1 
index.html                       |  23 +--
librehost.json                   |  19 +++
logo.png                         |   0 
playlist.js                      | 199 ++++++++++++++++++++++++++++++++++
14 files changed, 341 insertions(+), 77 deletions(-)

Detailed changes

_config.yml 🔗

@@ -1,7 +1,6 @@
 # Site settings
 title: NixNet
-description: >
-    Ramblings from a random GNU/Linux user, sysadmin, and professional multi-instrumentalist
+description: "Ramblings from a random GNU/Linux user, sysadmin, and professional multi-instrumentalist"
 baseurl: "" # the subpath of your site, e.g. /blog/
 url: "https://nixnet.xyz" # the base hostname & protocol for your site
 permalink: /:title/

_includes/externals/styling.html 🔗

@@ -1,10 +1,7 @@
 <link rel="stylesheet" href="{{ "/assets/vendor/normalize-css/normalize.css" | prepend: site.baseurl }}">
 <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
-{% if site.styles contains site.highlightstyle %}
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/vendor/highlight/styles/{{ site.highlightstyle }}.css">
-{% else %}
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/vendor/highlight/styles/solarized_dark.css">
-{% endif %}
+{% if site.styles contains site.highlightstyle %}<link rel="stylesheet" href="{{ site.baseurl }}/assets/vendor/highlight/styles/{{ site.highlightstyle }}.css">{% else %}
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/vendor/highlight/styles/solarized_dark.css">{% endif %}
 <link rel="stylesheet" href="{{ "/assets/vendor/font-awesome/css/fork-awesome.min.css" | prepend: site.baseurl }}">
 
 <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png">

_includes/header.html 🔗

@@ -1,39 +1,37 @@
 <header class="header">
     <div class="navigation">
         <a href="/" class="logo">{{ site.title }}</a>
-
         <ul class="menu">
             <li class="menu__entry"><a href="{{ '/' | prepend: site.baseurl }}">Home</a></li>
+            <li class="menu__entry"><a href="{{ '/blog' | prepend: site.baseurl }}">Blog</a></li>
             <li class="menu__entry"><a href="{{ '/about' | prepend: site.baseurl }}">About</a></li>
             <li class="menu__entry"><a href="{{ '/contact' | prepend: site.baseurl }}">Contact</a></li>
             <li class="menu__entry"><a href="{{ '/feed.xml' | prepend: site.baseurl }}">RSS</a></li>
         </ul>
     </div>
-
+    <audio autoplay loop>
+        <source src="https://nixnet.xyz/assets/music/sappheiros.mp3" type="audio/mpeg" />
+    </audio>
     <ul class="social-links">
         {% if site.author.mastodon %}
         <a rel="me" href="https://fosstodon.org/@{{ site.author.mastodon }}" class="social-links__entry" target="_blank">
             <i class="fa fa-mastodon"></i>
         </a>
         {% endif %}
-
         {% if site.author.gnusocial %}
         <a rel="me" href="https://quitter.im/{{ site.author.gnusocial }}" class="social-links__entry" target="_blank">
             <i class="fa fa-gnu-social"></i>
         </a>
         {% endif %}
-
         {% if site.author.telegram %}
         <a href="https://t.me/{{ site.author.telegram }}" class="social-links__entry" target="_blank">
             <i class="fa fa-telegram"></i>
         </a>
         {% endif %}
-
         {% if site.author.email %}
         <a href="mailto:{{ site.author.email }}" class="social-links__entry" target="_blank">
             <i class="fa fa-envelope"></i>
         </a>
         {% endif %}
-
     </ul>
 </header>

_includes/meta_tags/sharing.html 🔗

@@ -1,14 +1,9 @@
-{% if page.title %} {% assign title = page.title ~ ' - ' ~ page.subtitle %} {% else %} {% assign title = site.title %} {% endif %}
-{% if page.description %} {% assign description = page.description %} {% else %} {% assign description = site.description %} {% endif %}
-{% if page.keywords %} {% assign keywords = page.keywords %} {% else %} {% assign keywords = site.keywords %} {% endif %}
-{% if page.cover %} {% assign cover = page.cover %} {% else %} {% assign cover = site.cover %} {% endif %}
-
+{% if page.title %} {% assign title = page.title ~ ' - ' ~ page.subtitle %} {% else %} {% assign title = site.title %} {% endif %}{% if page.description %} {% assign description = page.description %} {% else %} {% assign description = site.description %} {% endif %}{% if page.keywords %} {% assign keywords = page.keywords %} {% else %} {% assign keywords = site.keywords %} {% endif %}{% if page.cover %} {% assign cover = page.cover %} {% else %} {% assign cover = site.cover %} {% endif %}
 <!-- Twitter Cards -->
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:title" content="{{ title }}" />
 <meta name="twitter:description" content="{{ description }}" />
 <meta name="twitter:image" content="{{ site.url }}{{ cover }}" />
-
 <!-- Open Graph -->
 <meta property="og:locale" content="{{ site.lang }}">
 <meta property="og:type" content="article">

_includes/page/explore.html 🔗

@@ -3,9 +3,9 @@
     <div class="explore__label">Explore the different categories</div>
     <ul class="categories">
         {% for category in site.data.categories %}
-            <li class="categories__item"><a href="{{ '/categories/' | append: category.slug | prepend: site.baseurl }}">{{ category.name }}</a></li>
+        <li class="categories__item"><a href="{{ '/categories/' | append: category.slug | prepend: site.baseurl }}">{{ category.name }}</a></li>
         {% endfor %}
-		<li class="categories__item"><a href="{{ '/' | prepend: site.baseurl }}">All</a></li>
+        <li class="categories__item"><a href="{{ '/' | prepend: site.baseurl }}">All</a></li>
     </ul>
     <div class="explore__label">All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC-BY 4.0</a> license.</div>
 </div>

_layouts/default.html 🔗

@@ -17,4 +17,4 @@
         {% include externals/scripting.html %}
         {% include externals/google_analytics.html %}
     </body>
-</html>
+</html>

_sass/_default.scss 🔗

@@ -1,50 +1,50 @@
 @font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: url('assets/fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Light'), local('OpenSans-Light'),
-       url('/assets/fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/assets/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/assets/fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
-       url('/assets/fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/assets/fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url('assets/fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
+    src: local('Open Sans Light'), local('OpenSans-Light'),
+    url('/assets/fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('/assets/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+    url('/assets/fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
+    url('/assets/fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('/assets/fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
 @font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 300;
-  src: url('/assets/fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
-       url('/assets/fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/assets/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/assets/fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
-       url('/assets/fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/assets/fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 300;
+    src: url('/assets/fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
+    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
+    url('/assets/fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('/assets/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
+    url('/assets/fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
+    url('/assets/fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('/assets/fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
 @font-face {
-  font-family: 'Inconsolata';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/assets/fonts/inconsolata-v16-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
-       url('/assets/fonts/inconsolata-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/assets/fonts/inconsolata-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/assets/fonts/inconsolata-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('/assets/fonts/inconsolata-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/assets/fonts/inconsolata-v16-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
+    url('/assets/fonts/inconsolata-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('/assets/fonts/inconsolata-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    url('/assets/fonts/inconsolata-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
+    url('/assets/fonts/inconsolata-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('/assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
 }
 @font-face {
-  font-family: 'Inconsolata';
-  font-style: normal;
-  font-weight: 700;
-  src: url('/assets/fonts/inconsolata-v16-latin-700.eot'); /* IE9 Compat Modes */
-  src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
-       url('/assets/fonts/inconsolata-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/assets/fonts/inconsolata-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/assets/fonts/inconsolata-v16-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('/assets/fonts/inconsolata-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/assets/fonts/inconsolata-v16-latin-700.svg#Inconsolata') format('svg'); /* Legacy iOS */
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/assets/fonts/inconsolata-v16-latin-700.eot'); /* IE9 Compat Modes */
+    src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
+    url('/assets/fonts/inconsolata-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('/assets/fonts/inconsolata-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+    url('/assets/fonts/inconsolata-v16-latin-700.woff') format('woff'), /* Modern Browsers */
+    url('/assets/fonts/inconsolata-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('/assets/fonts/inconsolata-v16-latin-700.svg#Inconsolata') format('svg'); /* Legacy iOS */
 }
 
 /* =Base */
@@ -82,8 +82,8 @@ p {
 }
 
 p.center {
-  text-align: center;
-  }
+    text-align: center;
+}
 
 ul {
     font-size: 17px;
@@ -100,7 +100,37 @@ img {
     display: block;
     max-width: 100%;
 }
-
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    border-radius: 5px;
+    width: 30%;
+    background: grey;
+    font-size: 1em;
+    padding: 15px;
+}
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+.button {
+    border-radius: 8px;
+    border: 0px;
+    background-color: white;
+    color: #333333;
+    padding: 16px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+.button:hover {
+    background-color: #6E827D;
+    color: #FFFFFF;
+}
 blockquote {
     letter-spacing: 1px;
     margin:0px;

blog/index.html 🔗

@@ -0,0 +1,27 @@
+---
+layout: page
+title: "~/"
+subtitle: "You are, quite obviously, home."
+sitemap:
+  priority: 0.9
+---
+<script type="text/javascript">
+  var BFTN_WIDGET_OPTIONS = {
+    org: dp, // @type {string}
+    cookieExpirationDays: 2, // @type {number}
+    disableGoogleAnalytics: true, // @type {boolean}
+    disableDonations: false, // @type {boolean}
+    alwaysShow: false, // @type {boolean}
+  };
+</script>
+<script src="https://july23.battleforthenet.com/widget.js" async></script>
+<ul class="list-posts">
+    {% for post in site.posts %}
+        <li class="post-teaser">
+            <a href="{{ post.url | prepend: site.baseurl }}">
+                <span class="post-teaser__title">{{ post.title }}</span>
+                <span class="post-teaser__date">{{ post.date | date: "%d %B %Y" }}</span>
+            </a>
+        </li>
+    {% endfor %}
+</ul>

contact.html 🔗

@@ -13,6 +13,7 @@ These are some of my more public accounts; feel free to contact me at any of the
     <a title="Telegram" href="https://t.me/amolith/" target="_blank"><i class="fa fa-telegram"></i></a>
     <a title="Mastodon" ref="me" href="https://fosstodon.org/@amolith" target="_blank"><i class="fa fa-mastodon"></i></a>
     <a title="GNU/Social" href="https://quitter.im/amolith" target="_blank"><i class="fa fa-gnu-social"></i></a>
+    <a title="Rocket.Chat" ref="me" href="http://chat.nixnet.xyz" target="_blank"><i class="fa fa-rocket"></i></a>
     <a title="Email" href="mailto:{{ site.author.email }}" target="_blank"><i class="fa fa-envelope"></i></a>
 </div>
 <hr />

index.html 🔗

@@ -3,16 +3,15 @@ layout: page
 title: "~/"
 subtitle: "You are, quite obviously, home."
 sitemap:
-  priority: 0.9
+priority: 0.9
 ---
-
-<ul class="list-posts">
-    {% for post in site.posts %}
-        <li class="post-teaser">
-            <a href="{{ post.url | prepend: site.baseurl }}">
-                <span class="post-teaser__title">{{ post.title }}</span>
-                <span class="post-teaser__date">{{ post.date | date: "%d %B %Y" }}</span>
-            </a>
-        </li>
-    {% endfor %}
-</ul>
+<style>
+</style>
+<center><p>I host a variety of services that are available for anyone to use for free. Below is a list of with descriptions of each.</p></center>
+<div class="card">
+  <div class="container">
+    <h1><b>Seafile</b></h1> 
+    <p>Seafile is a file syncronisation service. Users upload their files to a central server and they are synced back to their mobile phone or desktop.</p> 
+    <center><a href="https://sea.nixnet.xyz" target="_blank"><button class="button">Upload now</button></a></center>
+  </div>
+</div>

librehost.json 🔗

@@ -0,0 +1,19 @@
+{
+    "@context" : "http://schema.org",
+    "@type" : "Organization",
+    "organizationType" : "Informal collective",
+    "name" : "NixNet",
+    "tagLine" : "Just some random services",
+    "homeUrl" : "https://nixnet.xyz",
+    "logo" : "https://nixnet.xyz/logo.png",
+    "description": "Some random services Amolith hosts for himself that are open for anyone to use.",
+    "communicationLanguages": "en",
+    "contactUrl": "https://nixnet.xyz/contact",
+    "privacyPolicyUrl" : "-",
+    "termsOfServiceUrl" : "-",
+    "isServiceProvider" : true,
+    "foundingDate": "2018",
+    "version": "0.0.1",
+    "dateCreated": "2018-12-28T18:29:54Z",
+    "dateModified": "2018-12-28T18:29:54Z"
+}

playlist.js 🔗

@@ -0,0 +1,199 @@
+(function(){
+    var hasFrame = window.parent!=window,
+        scripts = document.getElementsByTagName('script'),
+        current = scripts[scripts.length-1],
+        config = current.getAttribute('data-config'),
+        head = document.getElementsByTagName("head")[0],
+        dest = location.href.replace(/scmplayer\=true/g, 'scmplayer=false'),
+        destHost = dest.substr(0,dest.indexOf('/',10)),
+        scm = current.getAttribute('src').replace(/script\.js.*/g,'scm.html?16102012')+'#'+dest,
+        scmHost = scm.substr(0,scm.indexOf('/',10)),
+        isOutside = !hasFrame || location.href.indexOf("scmplayer=true")>0,
+        postMessage = function(msg){
+            return window.top.document.getElementById('scmframe')
+                .contentWindow.postMessage(msg,scmHost);
+        },
+        postFactory = function(obj,keys){
+            var keys = keys.split(','),
+                post = function(key){
+                    return function(arg){
+                        var argStr = '';
+                        if(typeof(arg)!='undefined')
+                            argStr = (key.match(/(play|queue)/) ? 'new Song(':'(') +
+                                JSON.stringify(arg)+')';
+                        postMessage('SCM.'+key+'('+argStr+')');
+                    }
+                };
+            for(var i=0;i<keys.length;i++){
+                var key = keys[i];
+                obj[key] = post(key);
+            }
+        },
+        postConfig = function(config){
+            if(!isOutside)
+                postMessage('SCM.config('+config+')');
+        },
+
+        addEvent = function(elm, evType, fn) {
+            if(elm.addEventListener) 
+                elm.addEventListener(evType, fn);
+            else if (elm.attachEvent) 
+                elm.attachEvent('on' + evType, fn);
+            else
+                elm['on' + evType] = fn;
+        },
+        isIE = (function(){
+            var undef,v = 3,div = document.createElement('div'),
+                all = div.getElementsByTagName('i');
+            while (
+                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
+                all[0] );
+            return v > 4 ? v : undef;
+        })(),
+        isMobile = navigator.userAgent.match(/iPad|iPhone|Android|Blackberry/i),
+
+        init = function(){
+            if(!document.body){ 
+                setTimeout(init,10); 
+                return;
+            }
+            if(isOutside) outside(); else inside();
+        },
+
+        outside = function(){
+            var css = 'html,body{overflow:hidden;} body{margin:0;padding:0;border:0;} img,a,embed,object,div,address,table,iframe,p,span,form,header,section,footer{ display:none;border:0;margin:0;padding:0; } #scmframe{display:block; background-color:transparent; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:1667;} ';
+            var style = document.createElement('style');
+            style.type = 'text/css';
+            style.id = 'scmcss';
+
+            if(style.styleSheet) style.styleSheet.cssText = css;
+            else style.appendChild(document.createTextNode(css));
+
+            head.appendChild(style);
+            /*
+      while(head.firstChild.id!="scmcss")
+        head.removeChild(head.firstChild);
+        */
+
+            var scmframe = document.createElement('iframe');
+            scmframe.frameBorder = 0;
+            scmframe.id = "scmframe";
+            scmframe.allowTransparency = true;
+            scmframe.src = scm;
+
+            document.body.insertBefore(scmframe,document.body.firstChild);
+
+            addEvent(window,'load',function() {
+                setTimeout(function(){
+                    while(document.body.firstChild!=scmframe)
+                        document.body.removeChild(document.body.firstChild);
+                    while(document.body.lastChild!=scmframe)
+                        document.body.removeChild(document.body.lastChild);
+                },0);
+            });
+
+            //fix frame height in IE
+            addEvent(window,'resize',function(){
+                scmframe.style.height = (function(){
+                    if( typeof( window.innerHeight ) == 'number' )
+                        return window.innerHeight; 
+                    else if( document.documentElement && document.documentElement.clientHeight ) 
+                        return document.documentElement.clientHeight; 
+                    else if( document.body && document.body.clientHeight ) 
+                        return document.body.clientHeight; 
+                })();
+            });
+            //pushState and hash change detection
+            var getPath = function(){
+                return location.href.replace(/#.*/,'');
+            },
+                path = getPath(),
+                hash = location.hash;
+            setInterval(function(){
+                if(getPath()!=path){
+                    path = getPath();
+                    window.scminside.location.replace(path);
+                }
+                if(location.hash != hash){
+                    hash = location.hash;
+                    window.scminside.location.hash = hash;
+                }
+            },100);
+        },
+        inside = function(){
+            //change title
+            window.top.document.title = document.title;
+            //fix links
+            var filter = function(host){
+                host = host.replace(/blogspot.[a-z.]*/i,'blogspot.com');
+                host = host.replace(/^(http(s)?:\/\/)?(www.)?/i,'');
+                return host;
+            };
+            addEvent(document.body,'click',function(e){
+                var tar = e.target;
+                while(!tar.tagName.match(/^(a|area)$/i) && tar!=document.body) 
+                    tar = tar.parentNode;
+                if(tar.tagName.match(/^(a|area)$/i) && 
+                    !tar.href.match(/.(jpg|png)$/i) && //ignore picture link
+                    !tar.href.match(/^javascript:/) //ignore javascript link
+                ){ 
+                    if(tar.href.indexOf('#')==0){
+                        //hash
+                        if(tar.href != "#"){
+                            window.top.scminside = window;
+                            window.top.location.hash = location.hash;
+                            e.preventDefault();
+                        }
+                    }else if(tar.title.match(/^(SCM:|\[SCM\])/i)){
+                        //SCM Play link
+                        var title = tar.title.replace(/^(SCM:|\[SCM\])( )?/i,'');
+                        var url = tar.href;
+                        SCM.play({title:title,url:url});
+                        e.preventDefault();
+                    }else if(tar.href.match(/\.css$/)){
+                        //auto add skin
+                        window.open('http://playlist.me/w/#skin='+tar.href,'_blank');
+                        window.focus();
+                        e.preventDefault();
+                    }else if(filter(tar.href).indexOf(filter(location.host))==-1 ){
+                        if(tar.href.match(/^http(s)?/)){
+                            //external links
+                            window.open(tar.href,'_blank');
+                            window.focus();
+                            e.preventDefault();
+                        }
+                    }else if(history.pushState){
+                        //internal link & has pushState
+                        //change address bar href
+                        var url = filter(tar.href).replace(filter(destHost),'');
+                        window.top.scminside = window;
+                        window.top.history.pushState(null,null,url);
+                        e.preventDefault();
+                    }
+                }
+            });
+
+            addEvent(window,'load',function() {
+            });
+
+        };
+
+    //SCM interface
+    var SCM = {};
+
+    postFactory(SCM,
+        'queue,play,remove,pause,next,previous,volume,skin,placement,'+
+        'loadPlaylist,repeatMode,isShuffle,showPlaylist,'+
+        'togglePlaylist,toggleShuffle,changeRepeatMode');
+
+    if(window.SCM && window.SCMMusicPlayer) return;
+
+    if(!isMobile) init();
+
+    //send config
+    if(config) postConfig(config);
+    SCM.init = postConfig;
+
+    window.SCMMusicPlayer = window.SCMMusicPlayer || SCM;
+    window.SCM = window.SCM || SCM;
+})();