Website configuration.

Introduction article.

11 files changed, 249 insertions, 38 deletions

diff --git a/.gitignore b/.gitignore
index ed907305..84e71830 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
+.idea
 _site
 Gemfile.lock
diff --git a/Gemfile b/Gemfile
index fe5ec71a..17589d46 100644
--- a/Gemfile
+++ b/Gemfile
@@ -11,7 +11,7 @@ source "https://rubygems.org"
 #gem "jekyll", "~> 3.6.2"
 
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
-gem "minima", "~> 2.0"
+gem "minima", "~> 2.1.1"
 
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.
@@ -20,8 +20,10 @@ gem "github-pages", group: :jekyll_plugins
 # If you have any plugins, put them here!
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.6"
+  gem 'jekyll-livereload'
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+gem 'jekyll-seo-tag'
 
diff --git a/_config.yml b/_config.yml
index b5bc9dfc..6221e077 100644
--- a/_config.yml
+++ b/_config.yml
@@ -27,6 +27,7 @@ markdown: kramdown
 theme: minima
 plugins:
   - jekyll-feed
+  - jekyll-seo-tag
 
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 00000000..bf707fa4
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,19 @@
+<footer class="site-footer">
+
+  <div class="wrapper">
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <ul class="contact-list">
+          <li>
+            Author: <a href="mailto:rjaros@treksoft.pl">Robert Jaros</a>
+          </li>
+          <li>
+            {% include icon-github.html username=site.github_username %}
+	  </li>
+        </ul>
+      </div>
+    </div>
+
+  </div>
+
+</footer>
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 00000000..ceeee0c9
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,34 @@
+<header class="site-header" role="banner">
+
+  <div class="wrapper">
+    {% assign default_paths = site.pages | map: "path" %}
+    {% assign page_paths = site.header_pages | default: default_paths %}
+    <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+    {% if page_paths %}
+      <nav class="site-nav">
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
+              <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
+              <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+
+        <div class="trigger">
+          {% for path in page_paths %}
+            {% assign my_page = site.pages | where: "path", path | first %}
+            {% if my_page.title %}
+            <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+            {% endif %}
+          {% endfor %}
+        </div>
+      </nav>
+    {% endif %}
+      <div style="clear: both;">
+        <p>{{ site.description | escape }}</p>
+      </div>
+  </div>
+</header>
diff --git a/_includes/icon-github.html b/_includes/icon-github.html
new file mode 100644
index 00000000..7f2ac935
--- /dev/null
+++ b/_includes/icon-github.html
@@ -0,0 +1 @@
+<a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">KVision on GitHub</span></a>
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 00000000..6441149f
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,24 @@
+---
+layout: default
+---
+
+<div class="home">
+  
+  {{ content }}
+
+  <ul class="post-list">
+    {% for post in site.posts %}
+      <li>
+        {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
+        <span class="post-meta">{{ post.date | date: date_format }}</span>
+
+        <h2>
+          <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
+        </h2>
+      </li>
+    {% endfor %}
+  </ul>
+
+  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
+
+</div>
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100644
index 00000000..0063b356
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,25 @@
+---
+layout: default
+---
+<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
+    <p class="post-meta">
+      <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
+        {{ page.date | date: date_format }}
+      </time>
+      {% if page.author %}
+        • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
+      {% endif %}</p>
+  </header>
+
+  <div class="post-content" itemprop="articleBody" style="text-align: justify;">
+    {{ content }}
+  </div>
+
+  {% if site.disqus.shortname %}
+    {% include disqus_comments.html %}
+  {% endif %}
+</article>
diff --git a/_posts/2018-03-01-getting-started.markdown b/_posts/2018-03-01-getting-started.markdown
deleted file mode 100644
index d609b368..00000000
--- a/_posts/2018-03-01-getting-started.markdown
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title:  "Getting started"
-date:   2018-03-01 14:50:53 +0100
-categories: kvision kotlin
----
-
-#### Development
-
-1. Download [KVision examples](https://github.com/rjaros/kvision-examples) from GitHub:
-
-        git clone https://github.com/rjaros/kvision-examples.git
-        
-2. Enter one of the examples directory:
-
-        cd kvision-examples/showcase                        (on Linux)
-        cd kvision-examples\showcase                        (on Windows)
-
-3. Run Gradle incremental build with:
-
-        ./gradlew -t run                                    (on Linux)
-        gradlew.bat -t run                                  (on Windows)
-        
-4. Open [http://localhost:8088/](http://localhost:8088/) in your browser.
-
-5. Play with the code and see your changes immediately in the browser.
-
-#### Production
-
-To build complete application optimized for production run:
-
-        ./gradlew -Pprod=true distZip                       (on Linux)
-        gradlew.bat -Pprod=true distZip                     (on Windows)
-        
-Application package will be saved as build/distributions/showcase.zip.
diff --git a/_posts/2018-03-01-introduction.markdown b/_posts/2018-03-01-introduction.markdown
new file mode 100644
index 00000000..4497a023
--- /dev/null
+++ b/_posts/2018-03-01-introduction.markdown
@@ -0,0 +1,141 @@
+---
+layout: post
+title:  "Introduction"
+author: Robert Jaros
+date:   2018-03-01 14:50:53 +0100
+categories: kvision kotlin
+---
+
+This is my first article about [KVision](https://github.com/rjaros/kvision) -  a new open source Web UI framework written in Kotlin language.
+I plan to write a series of them - describing what KVision is and how to use it. I will try to explain the design, focus on the 
+unique features and demonstrate the usage examples.
+
+### Why new framework?
+
+There are of course many different front-end frameworks on the market. A lot of them share many similarities, others offer some special and unique features. 
+Probably most of them are plain JavaScript frameworks, but there are other languages and technologies in play as well. 
+Just look at [TodoMVC](http://todomvc.com) website to find them and learn about them.
+
+I've been working with different technologies and frameworks for many years. I've used them in many commercial and non-commercial projects of different size and complexity.
+Most of the time I was more then satisfied with the tools I've been using. But I've never found a solution, I could just call perfect. There was always something missing 
+and something was not fully correct.
+
+I don't really like to go with the mainstream. I like to explore and learn new possibilities. I try to make things easier and more productive. I like to reuse and integrate good stuff, 
+made by other people available in open source. I had many thoughts and conclusions about features, a perfect framework should have.
+And finally I've decided to make my own framework. I plan to make it a perfect solution for me - it's quite easy when you know the expectations ;-) 
+But I hope it can be a good solutions for a few other developers as well.
+
+### Main features
+
+#### Compiled and strongly typed programming language
+
+When you work on a small project, dynamic and loosely typed programming language (like JavaScript) is more then OK.
+But when the project becomes big and complex, and more developers are working with it, you just need to have more control over the code. You have to be able
+to find bugs as soon as possible. You have to be able to refactor a large portions of code. It is possible only with compiled languages.
+There are a few such languages in use for web development today - e.g. TypeScript or Scala. And Kotlin is just at the beginning of its way in this
+direction. In fact, KVision project started as "SVision" written with [Scala.js](https://www.scala-js.org/), but soon I've decided to change the language to Kotlin,
+because of much better IDE support, simpler design and better compilation time.
+
+#### Object oriented, imperative design
+
+Unlike most of the popular web frameworks (AngularJS, React, Vue.js and others),
+KVision is not declarative - it is not designed to mix HTML code (or pseudo code) with a typical
+programming language. You can write KVision application without any knowledge of HTML or CSS, 
+but at the same time you are able to use this knowledge if you wish.
+
+In KVision everything is just written in Kotlin. Your whole application is designed as type-safe and compiled. 
+KVision gives you a hierarchy of consistent components, which you can just use in your project or which you can extend to 
+modify their default behavior. You reuse you code by well known OOP design patterns - composition and inheritance.
+
+This design is well known in the UI programming world. In fact, it's probably used everywhere but in the web environment.
+Swing, JavaFX, QT and WinForms are clear and solid examples of object oriented UI libraries and KVision goes the same way.
+
+#### Ready to use components
+
+Many frameworks give you well designed architecture but lack ready to use components. You have to
+search the Internet to find ways to use rich text editor, advanced select box, date picker or even 
+a simple tab panel. 
+
+KVision contains:
+
+- sophisticated containers (tabs, stack, dock, grid, horizontal, vertical, flexbox, responsive),
+- a bunch of text input components including rich text editor
+- buttons, checboxes and radios
+- date and time picker
+- spinner
+- advanced select box with ajax support
+- data binding components
+- modals
+- floating, resizable windows
+
+All of them with modern, [Bootstrap](https://getbootstrap.com/) based look & feel, and a consistent behavior.
+
+#### Forms support
+
+Almost all non trivial applications use some kind of forms. But implementing form support in not only about
+showing form controls on the screen. Form items are bound to some data model, and this model should be type-safe.
+You would like your text inputs to be "Strings", but you would also like your date values to be of "Date" type, 
+your spinner value to be "Number" and your checkbox state to be "Boolean". KVision lets you do it in an easy
+and consistent way. And additionally it allows you to define and test validation for single fields or for the complete forms.
+
+#### Suitable for any application
+
+KVision was designed to be open and flexible. By default it gives you [Bootstrap](https://getbootstrap.com/) based look & feel, 
+but it can be disabled if you wish. Then you can design your application appearance from the scratch, and you are limited only
+by your own knowledge of CSS.
+
+Ability to implement a fully compatible [TodoMVC](http://todomvc.com) 
+application, which you can find in the [KVision-examples](https://github.com/rjaros/kvision-examples) repository, 
+proves that KVision is suitable for any kind of projects, including responsive, mobile web applications or even a simple, plain websites.
+
+#### Last but not least
+
+Other KVision features:
+
+- Type safe DSL builders
+- [Font awesome](https://fontawesome.com/) icons support
+- Drag & drop support
+- Integrated JS router
+- [Karma](https://karma-runner.github.io/) testing framework support
+- Full IDE support with IntelliJ IDEA Community Edition
+
+make this framework a complete solution ready for many different use cases. I will go into details of these features
+in the following articles.
+
+### Get started
+
+1. Download [KVision examples](https://github.com/rjaros/kvision-examples) from GitHub:
+
+        git clone https://github.com/rjaros/kvision-examples.git
+        
+2. Enter "template" example directory:
+
+        cd kvision-examples/template                        (on Linux)
+        cd kvision-examples\template                        (on Windows)
+
+3. Run Gradle incremental build with:
+
+        ./gradlew -t run                                    (on Linux)
+        gradlew.bat -t run                                  (on Windows)
+        
+4. Open [http://localhost:8088/](http://localhost:8088/) in your browser.
+
+5. Import "template" project in IntelliJ IDEA and open src/main/kotlin/com/example/App.kt file. 
+You can of course use your favourite text editor.
+
+6. Add some code inside the **start** function:
+
+        override fun start(state: Map<String, Any>) {
+            Root("kvapp") {
+                label("Hello world!")
+            }
+        }
+
+7. See your changes immediately in the browser.
+
+### Learn more
+
+- Explore all [KVision examples](https://github.com/rjaros/kvision-examples)
+- Read other articles at [KVision website](https://rjaros.github.io/kvision/)
+- Check [API Documentation](https://rjaros.github.io/kvision/api/)
+- Fork and play with the [source code](https://github.com/rjaros/kvision)
diff --git a/about.md b/about.md
index 01d9d6d2..0f190223 100644
--- a/about.md
+++ b/about.md
@@ -4,8 +4,6 @@ title: About
 permalink: /about/
 ---
 
-Object oriented Web UI framework for Kotlin/JS.
-
 KVision allows you to build user interface of modern web applications with the [Kotlin](https://kotlinlang.org) language.
 It's designed to be object oriented in the "most classical" sense - it gives you a hierarchy of many different components,
 which are used to build application UI.