Here, we will add Segment support to Syteup.

Segment is “a customer data hub”. It makes it easy to integrate third-party tools (analytics, advertising,…) to your application throw an all-in-one single library.

To add Segment plugin support to Syteup, we need just 3 simple steps:

1- create plugins/segment.js plugin code file that will export the plugin module to the window object:

(function (window) {
    "use strict";
    function setupSegment(settings) {
        window.analytics = window.analytics || [];
        window.analytics.methods = [
            "identify",
            "group",
            "track",
            "page",
            "pageview",
            "alias",
            "ready",
            "on",
            "once",
            "off",
            "trackLink",
            "trackForm",
            "trackClick",
            "trackSubmit"
        ];
        window.analytics.factory = function (method) {
            return function () {
                var args = Array.prototype.slice.call(arguments);
                args.unshift(method);
                window.analytics.push(args);
                return window.analytics;
            };
        };
        for (var i = 0; i < window.analytics.methods.length; i++) {
            var key = window.analytics.methods[i];
            window.analytics[key] = window.analytics.factory(key);
        }
        window.analytics.load = function (key) {
            if (document.getElementById("analytics-js"))
                return;
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.id = "analytics-js";
            script.async = true;
            script.src = ("https:" === document.location.protocol ? "https://" : "http://") + "cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";
            var first = document.getElementsByTagName("script")[0];
            first.parentNode.insertBefore(script, first);
        };
        // Add a version to keep track of what's in the wild.
        window.analytics.SNIPPET_VERSION = "2.0.9";
        // Load Analytics.js with your key, which will automatically
        // load the tools you've enabled for your account. Boosh!
        window.analytics.load(settings["write_key"]);
        // Make the first page call to load the integrations. If
        // you'd like to manually name or tag the page, edit or
        // move this call however you'd like.
        window.analytics.page({ title: "Syteup" });
    }
    window.segmentPlugin = { setup: setupSegment };
}(window));

what we did is to add segment code (copied from segment tutorial) into the setupSegment function, then we export it as setup item on the plugin module which should be named segmentPlugin. As you note, the user depending write_key is read from the settings object of the plugin which will be added on the third step.

2- we add a script tag to the index.html file that will load the plugin code.

the script tag should be included in the plugins section just before js/plugins.js tag and it should be loaded on defer mode

<script defer src="plugins/segment.js"></script>

3- Finally, we add the plugin settings to the configuration file config.json

option to turn on/off the plugin inside the plugins option:

"plugins": {
    "segment": true
}

the plugin settings object that includes all user depending settings (here we will need the user’s write_key) on the plugins_settings option:

"plugins_settings": {
    "segment": {
        "write_key": "?????????"
    }
}

All Done! we are ready to test our plugin.

Don’t be lazy, and send me a pull request with your plugins code and other patches to https://github.com/lejenome/syteup !

Syteup (a complete rewrite of Syte) is a really simple but powerful packaged personal site that has social integrations like GitHub, Dribbble, Instagram, Tumblr, Wordpress, Linkedin, Last.fm, SoundCloud, Bitbucket, StackOverflow, Flickr.

Demo

You can see Syteup in action on here.

Blog

Syteup use Tumblr, Wordpress.com or Blogger for blogging and your blog will be the primary page of the site.

Syteyp Wordpress

Suteup currently support many different social services:

Github

Syteyp Github

Flickr

Syteyp Flickr

SoundCloud

Syteyp SoundCloud

Last.fm

Syteyp Last.fm

StackOverflow

Syteyp StackOverflow

Bitbucket

Syteyp Bitbucket

Dribbble

Syteyp Dribbble

Instagram

Syteyp Instagram

Youtube

Syteyp Youtube

LinkedIn

Facebook

Google+

Syteyp Google+

Some other services integration is planed. For more up to date list of currently supported services and planed services isavailable on TODO.md file.

NOTE: Some services can not be supported as accessing them from client side will give crackers full access to your account (e.g: Twitter, Foursquare) or the service provider does not support server side requirements (e.g: neither SOP nor jsonp are supported by Steam,…), if you want them to be implemented, ask the service provider to supported limited permission access tokens or other needed requirements.

Installation

Syteup dose not require any specific server side future as it is server-less moder HTML5 webapp.

First, you need to setup Syteup requirements by runnig the following commands:

npm install
bower update

then, you needs to rename src/config.json.sample file to config.json and customize it for your needs as explained on the flowing section then run

npm run dist

which will update the dist/ folder with your new settings. Then copy the contents of dist/ folder to you server and then everything is ready.

You can also use make command for custom src and dist folder and config file too.

make -j1 SRC=~/syteup/src DIST=/srv/website/www CONF=~/my_config.json

Setup

IN PROGRESS

General Setup

Change all avatars images on src/imgs folder (pic.png, favicon.ico, apple-touch-icon*.png) by your avatar images with same sizes.

Setup the options of fields object on config.json file

"fields": {
  "username": String, // the pseudonym (nickname) you mostly known by
  "realname": String, // your complete real name
  "description": String, // a very short 'About Me' line
  "url": String, // the url of your website
  "contact": {
    "email": String, // your email
    "mobile": String, // [optional] your phone number e.g: (216) 00000000
    "tel": String, // [optional] your telephone number e.g: (216) 00000000
    "fax": String, // [optional] your fax number e.g: (216) 1111111
    "address": String, // [optional] just a short address e.g: Texas, USA
    "pgp_url": String, // [optional] url of your public pgp key file on your site e.g: /pubkey.asc
    "fingerprint": String, // [optional] your pgp key fingerprint e.g: 3A1D ADDD 332D 2EFB F816  21C3 84D8 5721 7365 9C9D
    "ssh_url": String // [optional] your ssh public certificate file url on your site e.g: /id_rsa.pub
  }

Blog Setup

Set blog_platform to the bloggin platform that you will use, availbale platforms are “tumblr” and “blogger” and “wordpress”.

Next, you need to setup the options of the choosen platform on the blogs_settings.<platform_name> object as follow:

Wordpress

"wordpress": {
  "blog_url": String, // the url of your wordpress.com blog
  "tag_slug": String // [optional] tags of posts to import (space separated)
}

Blogger

"blogger": {
  "blog_url": String, // your blog url
  "blog_id": String, // your blog id number (you can use https://developers.google.com/apis-explorer/#p/blogger/v3/blogger.blogs.getByUrl)
  "api_key": String, // your api key (See Below)
  "tag_slug": String // [optional] tags of posts to import (comma separated)
}

Steps to get your api_key are explained on the youtube section below.

Tumblr

"tumblr": {
  "blog_url": String, // your blog url
  "api_key": String, // your api key (See Below)
  "tag_slug": String // [optional] tag of posts to import (just one tag)
}

To get your api_key, register a new app here with any name and your website url as the default callback url. The “OAuth Consumer Key” of the application is your api_key.

Services Setup

For every service you would to enable, you should set services.<service_name> on config.json file to true and setup it options object services_settings.<service_name> on same file.

Disabled services can safely removed from booth services and services_settings objects on the config file.

Github

enable services.github and configure services_settings.github as follow:

"github": {
  "username": String // your username
}

StackOverflow

enable services.stackoverflow and configure services_settings.stackoverflow as follow:

"stackoverflow": {
  "username": String, // your username
  "user_id": String // your user id number
}

Flickr

enable services.flickr and configure services_settings.flickr as follow:

"flickr": {
  "username": String, // your username
  "user_id": String // your user id (you can get it from http://idgettr.com/)
}

Bitbucket

enable services.bitbucket and configure services_settings.bitbucket as follow:

"bitbucket": {
  "username": String, // your username
  "show_forks": Boolean // show number of forks (It require a http request for every repository
}

SoundCloud

enable services.soundcloud and configure services_settings.soundcloud as follow:

"soundcloud": {
  "username": String, // your username
  "client_id": String, // your client_id (See Below)
  "show_artwork": Boolean, // show tracks artworks
  "player_color": String // color of tracks player
}

To get an client_id, register an app here with any name you want, after you accept their Developer Policies, you get your Client ID.

Last.fm

enable services.lastfm and configure services_settings.lastfm as follow:

"lastfm": {
  "username": String, // your username
  "api_key": String // your api key (See Below)
}

To get an api_key, register a non comercial account here with any name and a small description, then you will get your API Key.

Dribbble

enable services.dribbble and configure services_settings.dribbble as follow:

"dribbble": {
  "username": String // your username
}

Youtube

enable services.youtube and configure services_settings.youtube as follow:

"youtube": {
  "username": String, // your username
  "api_key": String // your api key (See Below)
}

To get an api_key, create a project here with any name then click “Enable an API” and enable the API you need (“YouTube Data API v3” for YouTube, “Blogger API v3” for Blogger, “Google+ API” for Google+). Then on “Cendentials” tab, click “Create a new Key” then “Browser Key” and enter your website url then “Create” to get your API KEY.

Google+

enable services.gplus and configure services_settings.gplus as follow:

"gplus": {
  "user_id": String, // your user id number
  "api_key": String // your api key (See Below)
}

Steps to get your api_key are explained on the youtube section above.

Facebook

enable services.facebook and configure services_settings.facebook as follow:

"facebook": {
  "username": String, // your username
  "access_token": String // your access token key (See Below)
}

to get you read only access_token, create a web application here. Then, choose it from “Application” menu from this page and click “Get Access Token” and select booth “user_activities”, “user_about_me” and “user_status”. After confirming, you will get your final access_token on the Access Token field.

Instagram

enable services.instagram and configure services_settings.instagram as follow:

"instagram": {
  "username": String, // your username
  "access_token": String, // your access token key (TODO: NEED MORE DOCUMENTATION)
  "user_id": String // your user id number
}

enable services.linkedin and configure services_settings.linkedin as follow:

"linkedin": {
  "username": String, // your username
  "access_token": String // your access token key (See Below)
}

To get your read only access_token, register a new app here. Select “r_basicprofile” and “r_fullprofile” as your default scopes and add http://lejenome.me/tests/syteup-settings/linkedin.html?client_id=<YOUR_API_KEY>&client_secret=<YOUR_SECRET_API> to “OAuth 2.0 Redirect URLs” after replacing the two parameters with your API Key and your Secret Key. Then use this link to request your access token.

Plugins setup

Enabling a plugin depend on the type of plugin, either it’s a generic plugin or a blog plugin. For generic plugins, set plugins.<plugin_name> to true. and for blogs plugins, set blogs_settings.plugins.<plugin_name> to true.

Settings of every plugin are availbale on the plugins_settings.<plugin_name> object on config.json file as follow:

Disqus

This plugin will enable disqus comments on every post. Just enable blogs_settings.plugins.disqus and configure plugins_settings.disqus as follow:

"disqus": {
  "url": String, // [optional] your disqus profile url
  "shortname": String, // your username
  "just_count": Boolean // [optional] just show the number of comments instead of the 'Show Comments' buttons
}

This plugin will add ShareThis widget to every post. Just enable blogs_settings.plugins.sharethis and configure plugins_settings.sharethis as follow:

"sharethis": {
  "publisher_key": String // your key
}

RSS

This plugin will add RSS entry that any browser can subscribe to. Just enable plugins.rss and configure plugins_settings.rss as follow:

"rss": {
  "url": String // the url of your rss feed file or an external rss feed from your blog platform
}

Google Analytics

This plugin will enable Google Analytics tracking. Just enable plugins.google_analytics and configure plugins_settings.google_analytics as follow:

"google_analytics": {
  "tracking_id": String // your tracking id e.g: UA-XXXXXXX-2
}

Woopra

This plugin will enable Woopra tracking. Just enable plugins.woopra and configure plugins_settings.woopra as follow:

"woopra": {
  "tracking_domain": String, // TODO
  "idle_timeout": Number, // TODO
  "include_query": Boolean // TODO
}

Segment

This plugin will enable Segment services. Just enable plugins.segment and configure plugins_settings.segment as follow:

"segment": {
  "write_key": String // your write key
}

This plugin will add Gratupay widget bollow the navigation menu. Just enable plugins.gratipay_widget and configure plugins_settings.gratipay_widget as follow:

"gratipay_widget": {
  "username": String // your gratipay username
}

(FSSOTC) Python Training – Get Ready

Feb 09, 2016 - edit - share

Tools

For Windows Users

For Linux (Ubuntu) Users

Other (We will keep it for Saturday)

Requirements

Learning Sources

Python 3

Django

Git

HTML5 & CSS3

JavaScript

(Syteup) creating a basic plugin, segment as an example

Nov 04, 2014 - edit - share

Syteup Introduction

Nov 01, 2014 - edit - share