Merge pull request #1 from Voog/dummy_base

Implement Wellington design (#1)

.gitignore

@@ -0,0 +1,9 @@
+# Hidden files
+.DS_Store
+.sass-cache
+.voog
+.voog-node
+.voog-ruby
+
+# Folders
+node_modules/

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": false,
+  "bracketSpacing": false,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

README.md

@@ -1 +1,22 @@
-# design-wellington
+# The Wellington design template for <a href="https://www.voog.com">Voog</a>
+
+## Set up the development environment
+
+To modify this template, <a href="https://www.npmjs.org/">Node Package Manager</a> (or <a href="https://nodejs.org/en">NodeJS</a>) must be installed.
+
+To set up local development environment, clone this repository and install dependencies:
+```bash
+npm install
+```
+
+To sync template with your Voog sites, set up the <a href="https://www.voog.com/developers/kit">Voog Developer Toolkit</a>.
+
+## Development
+
+To build and minify CSS and JS files, run `npm run prod`
+
+To watch for changes and build and minify CSS and JS files while developing, run `npm run dev`
+
+To also sync files with your Voog site (requires Voog Developer Toolkit and a configuration file set up), run `npm run dev:kit`
+
+All commands described above will also minify images and other assets.

components/bg-picker-scripts.tpl

@@ -0,0 +1,35 @@
+<script type="text/javascript">
+  $(function() {
+    $('.bg-picker-area').each(function(index, pickerArea) {
+      var $picker = $(pickerArea).find('.bg-picker');
+
+      if (!$picker.length) {
+        return;
+      }
+
+      var pickerOpts = $picker.data();
+
+      var bgPicker = new Edicy.BgPicker($picker, {
+        picture: pickerOpts.type_picture,
+        color: pickerOpts.type_color,
+        showAlpha: true,
+        target_width: pickerOpts.width,
+        preview: function(data) {
+          site.bgPickerPreview(
+            pickerArea,
+            data,
+            bgPicker
+          );
+        },
+        commit: function(data) {
+          site.bgPickerCommit(
+            pickerOpts.bg_key,
+            data,
+            bgPicker,
+            pickerOpts.entity
+          );
+        }
+      });
+    });
+  })
+</script>

components/header.tpl

@@ -0,0 +1,11 @@
+<div class="header">
+  {% include "menu-main" %}
+
+  <div class="header-right">
+    {% include "menu-lang" %}
+
+    {%- if site.search.enabled %}
+      {% include "search" %}
+    {%- endif %}
+  </div>
+</div>

components/html-head.tpl

@@ -0,0 +1,46 @@
+{%- comment -%}IE SETTINGS{%- endcomment -%}
+<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
+
+{%- comment -%}BASIC META INFO{%- endcomment -%}
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<meta name="format-detection" content="telephone=no">
+
+{%- comment -%}FAV ICON{%- endcomment -%}
+{% if site.has_favicon? %}
+  <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="shortcut icon" href="/favicon.ico" type="image/ico">
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+{% endif %}
+
+{%- comment -%}STYLESHEETS{%- endcomment -%}
+<link
+  href="{{ stylesheets_path }}/main.min.css?v={{ template_settings.version }}"
+  media="screen"
+  rel="stylesheet"
+  type="text/css"
+/>
+
+{% if editmode -%}
+  {% stylesheet_link "libs/edicy-tools/latest/edicy-tools.css" static_host="true" %}
+{%- endif %}
+
+{% if site.search.enabled -%}
+  {% stylesheet_link "libs/edicy-search/latest/edicy-search.css" static_host="true" %}
+{%- endif %}
+
+{%- comment -%}SITE TITLE{%- endcomment -%}
+<title>{% title %}</title>
+
+{%- comment -%}MISC{%- endcomment -%}
+{% include "template-meta" %}
+
+{%- comment -%}BREADCRUMBS{%- endcomment -%}
+{%- capture breadcrumbsScript -%}
+  {%- sd_breadcrumbs -%}
+{%- endcapture -%}
+
+{% sd_breadcrumbs %}
+
+{% if blog %}{{ blog.rss_link }}{% endif %}
+{{ site.stats_header }}

components/javascripts.tpl

@@ -0,0 +1,36 @@
+{% comment %}SITE WIDE JAVASCRIPTS{% endcomment %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+<script src="{{ javascripts_path }}/application.min.js?v={{ template_settings.version }}"></script>
+{% if editmode -%}
+  <script src="{{ javascripts_path }}/editmode.min.js?v={{ template_settings.version }}"></script>
+{%- endif %}
+
+{% sitejs_include %}
+
+{% comment %}Site search related javascript components.{% endcomment %}
+{% if site.search.enabled -%}
+  <script src="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.js"></script>
+  <script>site.bindSiteSearch($('.js-search-form').get(0), '{{ page.language_code }}', {{ "search_noresults" | lc | json }});</script>
+{%- endif %}
+
+{% comment %}SITE ANALYTICS INITIATION{% endcomment %}
+{% unless editmode %}{{ site.analytics }}{% endunless %}
+
+{%- if editmode %}
+  {% editorjsblock %}
+    <script src="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js"></script>
+
+    <script>
+      var siteData = new Edicy.CustomData({
+        type: 'site'
+      });
+
+      var pageData = new Edicy.CustomData({
+        type: 'page',
+        id: '{{ page.id }}'
+      });
+
+    </script>
+    {%- include "bg-picker-scripts" -%}
+  {% endeditorjsblock %}
+{%- endif %}

components/menu-lang.tpl

@@ -0,0 +1,13 @@
+<div class="menu-lang">
+  {% for language in site.languages -%}
+    <span>
+      <a class="lang-flag lang-flag-{{ language.code }}{% if language.selected? %} active{% endif %}" href="{{ language.url }}" data-lang-code="{{ language.locale }}">{{ language.title }}</a>
+    </span>
+  {%- endfor %}
+
+  {% if editmode -%}
+    <span class="edit-btn">
+      {% languageadd %}
+    </span>
+  {%- endif %}
+</div>

components/menu-main.tpl

@@ -0,0 +1,37 @@
+<nav class="menu-main">
+  <ul class="menu">
+    {% unless site.root_item.hidden? -%}
+      {% menulink site.root_item wrapper-tag="li" %}
+    {%- endunless %}
+
+    {% for item in site.visible_menuitems %}
+      {%- menulink item wrapper-tag="li" %}
+      {%- if item.selected? %}
+        {%- if item.children? %}
+          <ul>
+            {%- for child in item.visible_children %}
+              {% menulink child wrapper-tag="li" %}
+            {%- endfor %}
+          </ul>
+        {%- endif -%}
+        {%- if editmode %}
+          <ul>
+            {%- if item.hidden_children.size > 0 %}
+              <li>{% menubtn item.hidden_children %}</li>
+            {%- endif %}
+            <li>{% menuadd parent=item %}</li>
+          </ul>
+        {% endif %}
+      {%- endif -%}
+    {%- endfor -%}
+  </ul>
+  {% if editmode -%}
+    <ul class="menu">
+      {%- if site.hidden_menuitems.size > 0 -%}
+        <li>{% menubtn site.hidden_menuitems %}</li>
+      {%- endif %}
+
+      <li>{% menuadd %}</li>
+    </ul>
+  {% endif -%}
+</nav>

components/search.tpl

@@ -0,0 +1,12 @@
+<div class="search js-search js-modal-overlay">
+  <div class="search-inner js-modal">
+    <form id="search" class="search-form js-search-form" method="get" action="#">
+      <div class="search-left">
+        <input id="onpage_search" class="search-input js-search-input js-input-dynamic" type="text" name="" placeholder="{{ "search" | lc | escape_once }}">
+      </div>
+      <div class="search-right">
+        <input class="search-submit js-search-submit" type="submit" value="{{ "search" | lc | escape_once }}" name="">
+      </div>
+    </form>
+  </div>
+</div>

components/template-meta.tpl

@@ -0,0 +1,47 @@
+{%- comment -%}TEMPLATE META DATA{%- endcomment -%}
+{%- comment -%}https://developers.facebook.com/tools/debug - Debug after each modification{%- endcomment -%}
+{%- if site.data.fb_admin -%}
+  <meta property="fb:admins" content="{{ site.data.fb_admin }}">
+{%- endif -%}
+
+{%- if article -%}
+  {%- assign og_obj = article -%}
+{%- elsif product -%}
+  {%- assign og_obj = product -%}
+{%- else -%}
+  {%- assign og_obj = page -%}
+{%- endif -%}
+
+<meta property="og:type" content="{%- if article -%}article{%- else -%}website{%- endif -%}">
+<meta property="og:url" content="{{ site.url }}{{ og_obj.url | remove_first: "/" }}">
+<meta property="og:title" content="{%- title -%}">
+<meta property="og:site_name" content="{{ page.site_title | escape_once }}">
+
+{%- comment -%}Open Graph image{%- endcomment -%}
+{%- if og_obj.og_image? -%}
+  {%- assign og_image = og_obj.og_image.for-width-1200 -%}
+{%- endif -%}
+
+{%- if og_image %}
+  {% if og_image.url %}<meta property="og:image" content="{{ og_image.url }}">{% endif %}
+  {% if og_image.content_type %}<meta property="og:image:type" content="{{ og_image.content_type }}">{% endif %}
+  {% if og_image.width %}<meta property="og:image:width" content="{{ og_image.width }}">{% endif %}
+  {% if og_image.height %}<meta property="og:image:height" content="{{ og_image.height }}">{% endif %}
+{%- endif %}
+
+{%- comment -%}Open Graph description{%- endcomment -%}
+{%- if og_obj.description != blank -%}
+  <meta property="og:description" content="{{ og_obj.description | strip_html | escape_once }}">
+  <meta name="description" content="{{ og_obj.description | strip_html | escape_once }}">
+{%- endif -%}
+
+{%- comment -%}SEO pagination for blog articles.{%- endcomment -%}
+{%- if article -%}
+  {%- if article.older -%}
+    <link rel="prev" href="{{ article.older.url }}">
+  {%- endif -%}
+
+  {%- if article.newer -%}
+    <link rel="next" href="{{ article.newer.url }}">
+  {%- endif -%}
+{%- endif -%}

components/template-settings-json.tpl

@@ -0,0 +1,9 @@
+{
+  "page": {
+    "body_bg": {
+      "key": "PREFIX_body_bg",
+      "value": {}
+    }
+  },
+  "version": "wellington-1.0.0"
+}

components/template-settings.tpl

@@ -0,0 +1,5 @@
+{%- capture template_settings_json -%}
+  {% include 'template-settings-json' %}
+{%- endcapture -%}
+
+{%- assign template_settings = template_settings_json | replace: 'PREFIX', 'wellington' | json_parse -%}

components/template-styles.tpl

@@ -0,0 +1,12 @@
+{% comment %}Body background styles{% endcomment %}
+<style>
+  .body-bg-color {
+    background-color: {{ body_bg_color }};
+  }
+
+  .body-bg-image {
+    {% if body_bg_image != blank %}background-image: url("{{ body_bg_image }}");{% endif %}
+    background-position: center;
+    background-size: cover;
+  }
+</style>

components/template-variables.tpl

@@ -0,0 +1,44 @@
+{% capture dont_render %}
+  {%- assign body_bg_key = template_settings.page.body_bg.key -%}
+  {%- assign body_bg = page.data[body_bg_key] -%}
+
+  {% assign body_bg_color = body_bg.color %}
+  {% assign body_bg_image = body_bg.image %}
+  {% assign body_bg_image_sizes = body_bg.imageSizes %}
+
+  {%- if body_bg_color == blank -%}
+    {%- assign body_bg_color = "none" -%}
+  {%- endif -%}
+
+  {% if body_bg_image_sizes == nil %}
+    {% assign body_bg_image_sizes_str = "" %}
+  {% else %}
+    {% assign body_bg_image_sizes_str = body_bg_image_sizes | json %}
+  {% endif %}
+
+  {% assign body_bg_color_data = body_bg.colorData %}
+  {% assign body_bg_combined_lightness = body_bg.combinedLightness %}
+
+  {% if body_bg %}
+    {% if body_bg_combined_lightness %}
+      {% if body_bg_combined_lightness > 0.6 %}
+        {% assign body_bg_type = "light-background" %}
+      {% else %}
+        {% assign body_bg_type = "dark-background" %}
+      {% endif %}
+    {% else %}
+      {% if body_bg_color_data.a >= 0.6 %}
+        {% if body_bg_color_data.lightness >= 0.6 %}
+          {% assign body_bg_type = "light-background" %}
+        {% else %}
+          {% assign body_bg_type = "dark-background" %}
+        {% endif %}
+      {% else %}
+        {% assign body_bg_type = "light-background" %}
+      {% endif %}
+    {% endif %}
+  {% else %}
+    {% assign body_bg_type = "light-background" %}
+  {% endif %}
+
+{% endcapture %}