Hello Website

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

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

lektor-cheatsheet

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

webpack

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

how-to

get latest post with alt language selection

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

external js libs

list carousel

image carousel slick

slide

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

blog

boiler plate with complex flow

dgplug

piktor

https://shrike.me/

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.

flex

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>
</div>

images

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 %}
</div>

cover entire viewport

cover

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

flex center

flex

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

.uk-flex-auto
class="uk-flex-stretch"
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

slidenav

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

external libs

css hover