Hello Website

written by Eli,,, on 2017-03-26

This is an example blog post. Not much here but that's not the point :)


written by Eli,,, on 2017-03-26


npm install --save-dev webpack babel-core babel-loader css-loader url-loader style-loader file-loader extract-text-webpack-plugin less less-loader node-sass sass-loader eventualy

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var options = {
  entry: {
    'app': './js/main.js',
    'styles': './scss/main.scss'
  output: {
    path: path.dirname(__dirname) + '/assets/static/gen',
    filename: '[name].js'
  devtool: '#cheap-module-source-map',
  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js']
  module: {
    loaders: [
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g\|\.gif$/,
        loader: 'file'
  plugins: [
    new ExtractTextPlugin('styles.css', {
      allChunks: true
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.DedupePlugin()

module.exports = options;

to run the server and auto-generate

lektor server -f webpack


get latest post with alt language selection

{% set pages = site.query('./blog', alt=alt).all() %}
{% for page in pages[0:5] %}
  <a href="./blog/{{ page._id }}"> {{ page.title }}</a>
  {% endif %}
{% endfor %}

external js libs

list carousel

image carousel slick


svg to canvas

svg to canvas

svg edit

svg free library

canvas hit detection

not listed plugins

json source for pages

embed youtube and twitter

google drive

static search

algolia search

not listed external apps

django hosted admin panel

websites made with lektor


boiler plate with complex flow




external services API

messaging and VoIP riot

notes taken on lektor

writing plugins

notes on code

general notes

migrating to lektor

uikit3 notes

written by on

Some notes on using uikit3

This notes is taken while uikit 3 is still in beta so things may change.


Align a content center vertically and horizontally

<div class="uk-panel uk-flex uk-flex-center uk-flex-middle">
    <p class="uk-h4">Cover</p>


cover entire containing div

<div class="header_top uk-cover-container">
    <img src="" uk-cover>
    {% if image %}
      <img src="{{ image|url }}" alt="" uk-cover>
    {% endif %}

cover entire viewport


<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>

flex center


<div class="uk-flex uk-flex-center">

uk-flex uk-flex-center uk-flex-middle

fixed background

<div class="uk-background-fixed uk-background-center-center uk-height-medium uk-width-large" style="background-image: url(../docs/images/dark.jpg);"></div>

<div class="uk-height-medium {% if image %}uk-background-fixed uk-background-center-center{% endif %}"
  {% if image %}style="background-repeat: no-repeat;
  background-image: url({{ image|url }}); background-size: cover; background-position: center bottom; "{% endif %} >

add a caption

<div class="uk-inline">
  <div class="uk-overlay uk-dark uk-overlay-primary uk-position-bottom">

prev and next nav


<a href="#" class="uk-slidenav-large" uk-slidenav-previous></a>
<a href="#" class="uk-slidenav-large" uk-slidenav-next></a>

external libs

css hover