Install Ruby Slate NodeJS on CentOS 7

Slate is Beautiful static documentation for your API

Slate

Required

– Linux or OS X or Windows
– Ruby version 2.3.1 or newer
– NodeJS
– Bundler β€” gem install bundler

# cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)

Install Ruby 2.4 – CentOS 7

# yum update
# yum groupinstall “Development Tools”
# yum install epel-release

# yum install readline-devel zlib-devel libffi-devel libyaml-devel openssl-devel sqlite-devel

RVM (Ruby Version Manager) Allow you to install and manage multiple ruby environments.

# curl -sSL https://rvm.io/mpapis.asc | gpg --import -
# curl -L get.rvm.io | bash -s stable

# source /etc/profile.d/rvm.sh
# rvm reload

# rvm requirements run

Show available ruby versions
# rvm list known

Install Ruby 2.4

# rvm install 2.4
# rvm use 2.4 --default

Install Ruby Bundler

# gem install bundler

Install NodeJS for JavaScript Run-time Environment

# yum install nodejs npm

# cd /home/centos

Fork / Clone repository

# git clone https://github.com/svnlabs/slate.git

# cd slate

Allow / Open firewall port 4567 for Slate

# systemctl status firewalld

Like firewall-cmd –add-port=[YOUR PORT]/tcp

# firewall-cmd --permanent --add-port=4567/tcp

# systemctl restart firewalld

Run Slate locally

# bundle install
# bundle exec middleman server

Open URL in Browser http://server-ip-address:4567/#introduction

Now edit source files here “/home/centos/slate” as you need πŸ˜‰

Top 10 Tutorials for your Drupal Website

Drupal is one of the most popular and powerful content management systems. Creating your website with Drupal will allow you endless options for design and function. Use these 10 Drupal tutorials to easily give your website features and options you may have never thought possible.

1. Tutorial For Site Setup

Every Drupal website owner should begin with a basic site-building tutorial. The first thing to do, after getting Drupal-compatible web hosting, is to review such a tutorial to create your site’s key elements. This site-setup tutorial will walk you through building your website’s administration menu, site editor, pages, menus, and slideshows.

2. Update Drupal Using Minor Updates and Patches

There are a few types of updates you will come across as a Drupal website owner including, minor, major and patch updates. This tutorial will show you how to keep your installation current to avoid bugs and errors, and maintain the latest module compatibility. Patch updates are often aimed at fixing bugs or security issues and may be released at any time. Minor updates fix site functions errors, and are released less often.

3. Autoloading Awesomeness

This tutorial will show you how to take advantage of autoloading in your visitors web browsers. This is helpful when you want to display video or other media without the user having to click ‘Play.’ Use the Auto-loading Awesomeness tutorial to follow in the steps of major media and social companies who know rely on the feature, such as Facebook and Instagram.

4. Preparing Your Site for Drupal 8

The latest release of Drupal, as of 2017, is Drupal 8. This tutorial will help you get prepared for a major update to any outdated Drupal sites. IT discusses manual site audits, security updates and audit modules. While your updated your Drupal and installing Drupal 8, you should check that you have Drupal optimized web hosting, so that you can make the most of your Drupal installation.

5. Installing and Editing Drupal Themes

This tutorial is perhaps among the most important for any Drupal user. It shows you how to install and modify themes for your Drupal site by giving you the basics on how themes work. After reviewing this tutorial, even a beginner will be able to choose and install a Drupal theme that’s right for their site. Those with just a few minutes on their hands can learn how to change colors, module positions and add or remove elements.

6. Drupal SEO Tutorial

If you’re focused on marketing and Search Engine Optimization, then this is the Drupal tutorial for you. It will teach you how to create SEO-friendly posts, tags, and headers. Beginning with a focus on mobile Drupal templates and themes, this handy guide will ensure your site doesn’t get buried in the search results.

7. Drupal Modules Tutorial

This tutorial is invaluable for those who want to begin developing Drupal modules and backend coding. It will show you how to use Object-Oriented PHP to create Drupal modules with function in the backend of your site and interactive features for your website’s frontend. Some PHP knowledge is required for this tutorial. Object-Oriented PHP will keep your Drupal site coding from being redundant, and save you time behind the keyboard.

8. Use Node.js with Drupal

Many web developers are used to node.js and want full javascript integration on their Drupal based website. This tutorial will teach you to seamlessly integrate the popular node.js package with Drupal to use them inherently together. Using Node.js on your Drupal site will allow you to build web applications that are as scalable as you need them to be. This would work great for any new social media site or mobile application.

9. Create a Custom Slideshow

Slideshows have many purposes on websites, including rotating content to keep the site fresh, and ensuring certain content has a front-page standing. This tutorial will show you how to easily create a slideshow on your Drupal site using theme libraries and the Slick module. It involves some simple HTML markup and Java which you can copy and paste or make modifications to. Your finished product will look great on any business website, and will rotate three or more images or embedded media modules at your desired speed.

10. Loop Over Objects

This tutorial is among the more advanced on the list, but should appeal to anyone with even a little coding background. It will show you how to loop over objects using the built-in tag IteratorAggregate. If you’re looking to get started practicing your PHP skills on a live site, this tutorial is a great choice and will provide convenient, functional results.

Drupal can be used for personal websites, business and corporate sites, and even blogs. It’s a diverse CMS that allows countless customizations. By following these tutorials you will gain a better understanding of your Drupal interfaces, and be able to add creative elements to your website.

Create Website Thumbnails using PhantomJS

Hope you read my old article “Create WebThumb using LAMP”, it used for creating web thumbnails from Xvfb virtual framebuffer that is more time and resource consuming.

Shell Script with Xvfb try to open web browsers in real remote server to capture web-thumbs…

That whole setup might take a full day and image quality is very bad….

Thanks to PhantomJS

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Simple Javascript example

console.log(‘Loading a web page’);
var page = require(‘webpage’).create();
var url = ‘https://www.svnlabs.com/’;
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});

Features:

– Headless Website Testing
– Screen Capture
– Page Automation
– Network Monitoring

Fork on Github https://github.com/ariya/phantomjs

PhantomJS is using WebKit for a real layout and rendering engine, it can be used to capture web page as screenshot or PDF files. PhantomJS can render anything on the web page, it can be used to convert contents in HTML/CSS, SVG and Canvas.

URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
// Thumbnail of Webpage using webthumb.js

var page = require('webpage').create(),
    system = require('system'),
    weblink,
    fname;

if (system.args.length !== 3) {
    console.log('Usage: webthumb.js webURL filename');
    console.log('Usage: webthumb.js https://www.svnlabs.com svnlabs.png');
    phantom.exit(1);
} else {
    weblink = system.args[1];
    fname = system.args[2];    
    page.viewportSize = { width: 320, height: 480 };
    page.open(weblink, function (status) {
    if (status !== 'success') {
        console.log('Unable to open webpage!');
    } else {
        page.render(fname);
    }
    window.setTimeout(function () {
      phantom.exit();
    }, 3000);
    });
}

Download webthumb.js

# phantomjs webthumb.js https://www.svnlabs.com svnlabs.png
# phantomjs webthumb.js https://www.svnlabs.com svnlabs.pdf

You can even capture webpage as good quality PDF file πŸ˜‰

Output:

svnlabs.png
svnlabs.pdf

You can also use examples/rasterize.js for same sort of functions πŸ˜‰

# phantomjs examples/rasterize.js https://www.svnlabs.com/ svnlabs.png
# phantomjs examples/rasterize.js ‘https://www.svnlabs.com/’ svnlabs.pdf

rasterize.js – rasterizes a web page to image or PDF
render_multi_url.js – renders multiple web pages to images
technews.js – captures Google News as a PNG image