Version 1.4.0

cache/readme.md

@@ -1 +0,0 @@
-Please make this folder writable

content/00-welcome/03-markdown-test.md

@@ -117,6 +117,7 @@ Easily created for example with three dashes like this:
 ````
 This is an ordinary [Link](http://typemill.net).
 Links can also be [relative](/info).
+You can link to anchors like this [anchor](#images)
 You can also add a [title](http://typemill.net "typemill").
 You can even add [ids or classes](http://typemill.net){#myid .myclass}.
 Or you can use a shortcut like http://typemill.net.
@@ -127,6 +128,8 @@ This is an ordinary [Link](http://typemill.net).
 
 Links can also be [relative](/info).
 
+You can link to anchors like this [anchor](#images)
+
 You can also add a [title](http://typemill.net "typemill").
 
 You can even add [ids or classes](http://typemill.net){#myid .myclass}.

content/01-cyanine-theme/04-mdfixes.md

@@ -0,0 +1,11 @@
+# mdfixes
+
+Content and some more.
+## This is headline second order
+This is a little bit of text that we need to have nothing
+
+Some more text.
+
+# And a headline first order
+
+With some more text below.

content/01-cyanine-theme/04-mdfixes.txt

@@ -0,0 +1 @@
+["# mdfixes","Content and some more. Danke","## This is headline second order","This is a little bit of text that we need to have nothing","Some more text.","# And a headline first order","With some more text below."]

content/01-cyanine-theme/04-mdfixes.yaml

@@ -0,0 +1,9 @@
+meta:
+    title: mdfixes
+    description: "Content and some more. This is headline second order\nThis is a little bit of text that we need to have."
+    owner: trendschau
+    author: 'Sebastian Schürmanns'
+    created: '2020-10-01'
+    time: 20-40-00
+    navtitle: mdfixes
+    modified: '2020-10-01'

plugins/blurbbox/blurbbox.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Plugins\blurbbox;
+
+use \Typemill\Plugin;
+
+class blurbbox extends plugin
+{	
+    public static function getSubscribedEvents()
+    {
+		return array(
+			'onPageReady'			=> 'onPageReady',
+		);
+	}
+	
+	public function onPageReady($page)
+	{
+		$pageData = $page->getData($page);
+
+		$pageData['widgets']['blurbbox'] = '<div><p>Notes on (mostly) daily perceptions and experiences by Joseph Zitt, an American immigrant to Israel.</p>' .
+											'<p><a href="http://www.josephzitt.com/home/books/as-if-in-dreams-notes-following-aliyah/">Buy the book.</a></p>' .
+											'<p><a href="https://buttondown.email/josephzitt">Subscribe to the weekly newsletter.</a></p></div>'; 
+
+ 		$page->setData($pageData);
+	}
+}

plugins/blurbbox/blurbbox.yaml

@@ -0,0 +1,8 @@
+name: Blurbbox
+version: 1.0.0
+description: Add a search to your website with lunr.js.
+author: Trendschau
+homepage: https://typemill.net
+licence: MIT
+paypal: https://paypal.me/typemill
+amount: 10

plugins/blurbbox/index.php

@@ -0,0 +1,87 @@
+<?php
+
+namespace Plugins\search;
+
+use \Typemill\Plugin;
+use \Typemill\Models\Write;
+use \Typemill\Models\WriteCache;
+
+class Index extends Plugin
+{
+    public static function getSubscribedEvents(){}	
+
+    public function index()
+    {
+		$write = new Write();
+
+		$index = $write->getFile('cache', 'index.json');
+		if(!$index)
+		{
+			$this->createIndex();
+			$index = $write->getFile('cache', 'index.json');
+		}
+	
+		return $this->returnJson($index);
+    }
+
+    private function createIndex()
+    {
+    	$write = new WriteCache();
+
+    	# get content structure
+    	$structure = $write->getCache('cache', 'structure.txt');
+
+    	# get data for search-index
+    	$index = $this->getAllContent($structure, $write);
+
+    	# store the index file here
+    	$write->writeFile('cache', 'index.json', json_encode($index, JSON_UNESCAPED_SLASHES));
+    }
+
+    private function getAllContent($structure, $write, $index = NULL)
+    {
+    	foreach($structure as $item)
+    	{
+    		if($item->elementType == "folder")
+    		{
+    			if($item->fileType == 'md')
+    			{
+ 		   			$page = $write->getFileWithPath('content' . $item->path . DIRECTORY_SEPARATOR . 'index.md');
+ 		   			$pageArray = $this->getPageContentArray($page, $item->urlAbs); 
+    				$index[$pageArray['url']] = $pageArray;
+    			}
+
+	    		$index = $this->getAllContent($item->folderContent, $write, $index);
+    		}
+    		else
+    		{
+    			$page = $write->getFileWithPath('content' . $item->path);
+ 		   		$pageArray = $this->getPageContentArray($page, $item->urlAbs); 
+    			$index[$pageArray['url']] = $pageArray;
+    		}
+    	}
+    	return $index;
+    }
+
+    private function getPageContentArray($page, $url)
+    {
+    	$parts = explode("\n", $page, 2);
+
+	    # get the title / headline
+    	$title = trim($parts[0], '# ');
+    	$title = str_replace(["\r\n", "\n", "\r"],' ', $title);
+
+    	# get and cleanup the content
+    	$content = $parts[1];
+    	$content = strip_tags($content);
+    	$content = str_replace(["\r\n", "\n", "\r"],' ', $content);
+
+    	$pageContent = [
+    		'title' 	=> $title,
+    		'content' 	=> $content,
+    		'url'		=> $url
+    	];
+
+    	return $pageContent;
+    }
+}

plugins/blurbbox/public/lunr-licence.md

@@ -0,0 +1,19 @@
+Copyright (C) 2013 by Oliver Nightingale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

plugins/blurbbox/public/search.css

@@ -0,0 +1,64 @@
+.searchContainer{
+  overflow: hidden;
+  width: 100%;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.searchContainer input{
+	width: 100%;
+	height: 50px;
+	border: 1px solid #ddd;
+	font-size: 1rem;
+	float: left;
+	padding-left: 15px;
+ 	border-radius: 2px;
+  	box-sizing:border-box;	
+}
+.searchContainer button{
+	border-top-right-radius: 2px;
+	border-bottom-right-radius: 2px;
+	border: none;
+	background: #232833;
+	height: 50px;
+	width: 50px;
+	color: #fff;
+	font-size: 10pt;
+	margin-left: -50px;
+}
+.searchContainer button:hover,.searchContainer button:focus, .searchContainer button:active{
+	cursor: pointer;
+}
+
+#searchresult{
+}
+.resultwrapper{
+}
+button#closeSearchResult{
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	margin: 10px;
+	border: none;
+	border-radius: 2px;
+	font-size: 1rem;
+	color: #fff;
+	background: #000;
+	padding: 15px;
+}
+button#closeSearchResult:hover,#closeSearchResult:focus{
+	cursor: pointer;
+}
+.resultlist{
+	margin: 0px;
+	padding: 0px;
+	list-style:none;
+}
+.resultitem{
+
+}
+.resultheader{
+
+}
+.resultsnippet{
+
+}

plugins/blurbbox/public/search.js

@@ -0,0 +1,115 @@
+var searchField = document.getElementById("searchField");
+var searchButton = document.getElementById("searchButton");
+
+if(searchField && searchButton)
+{
+	var searchIndex = false;
+	var documents = false;
+	var holdcontent = false;
+	var contentwrapper = false;
+
+	searchField.addEventListener("focus", function(event){
+
+		if(!searchIndex)
+		{			
+	        myaxios.get('/indexrs51gfe2o2')
+	        .then(function (response) {
+
+	            documents = JSON.parse(response.data);
+
+				searchIndex = lunr(function() {
+				    this.ref("id");
+				    this.field("title", { boost: 10 });
+				    this.field("content");
+				    for (var key in documents){
+				        this.add({
+				            "id": documents[key].url,
+				            "title": documents[key].title,
+				            "content": documents[key].content
+				        });
+				    }
+				});
+
+	        })
+	        .catch(function (error) {});			
+		}
+	});
+
+	searchButton.addEventListener("click", function(event){
+		event.preventDefault();
+
+		var term = document.getElementById('searchField').value;
+		var results = searchIndex.search(term);
+
+		var resultPages = results.map(function (match) {
+			return documents[match.ref];
+		});
+
+		resultsString = "<div class='resultwrapper'><h1>Result for " + term + "</h1>";
+		resultsString += "<button id='closeSearchResult'>close</button>";
+		resultsString += "<ul class='resultlist'>";
+		resultPages.forEach(function (r) {
+		    resultsString += "<li class='resultitem'>";
+		    resultsString +=   "<a class='resultheader' href='" + r.url + "?q=" + term + "'><h3>" + r.title + "</h3></a>";
+		    resultsString +=   "<div class='resultsnippet'>" + r.content.substring(0, 200) + " ...</div>";
+		    resultsString += "</li>"
+		});
+		resultsString += "</ul></div>";
+
+		if(!holdcontent)
+		{
+			contentwrapper = document.getElementById("searchresult").parentNode;
+			holdcontent = contentwrapper.innerHTML;
+		}
+
+		contentwrapper.innerHTML = resultsString;
+
+		document.getElementById("closeSearchResult").addEventListener("click", function(event){
+			contentwrapper.innerHTML = holdcontent;
+		});
+
+	}, false);
+}
+
+/*
+var searchIndex = lunr(function() {
+    this.ref("id");
+    this.field("title", { boost: 10 });
+    this.field("content");
+    for (var key in window.pages) {
+        this.add({
+            "id": key,
+            "title": pages[key].title,
+            "content": pages[key].content
+        });
+    }
+});
+
+function getQueryVariable(variable) {
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+  for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split("=");
+      if (pair[0] === variable) {
+          return decodeURIComponent(pair[1].replace(/\+/g, "%20"));
+      }
+  }
+}
+
+var searchTerm = getQueryVariable("q");
+// creation of searchIndex from earlier example
+var results = searchIndex.search(searchTerm);
+var resultPages = results.map(function (match) {
+  return pages[match.ref];
+});
+
+// resultPages from previous example
+resultsString = "";
+resultPages.forEach(function (r) {
+    resultsString += "<li>";
+    resultsString +=   "<a class='result' href='" + r.url + "?q=" + searchTerm + "'><h3>" + r.title + "</h3></a>";
+    resultsString +=   "<div class='snippet'>" + r.content.substring(0, 200) + "</div>";
+    resultsString += "</li>"
+});
+document.querySelector("#search-results").innerHTML = resultsString;
+*/

plugins/search/index.php

@@ -0,0 +1,87 @@
+<?php
+
+namespace Plugins\search;
+
+use \Typemill\Plugin;
+use \Typemill\Models\Write;
+use \Typemill\Models\WriteCache;
+
+class Index extends Plugin
+{
+    public static function getSubscribedEvents(){}	
+
+    public function index()
+    {
+		$write = new Write();
+
+		$index = $write->getFile('cache', 'index.json');
+		if(!$index)
+		{
+			$this->createIndex();
+			$index = $write->getFile('cache', 'index.json');
+		}
+	
+		return $this->returnJson($index);
+    }
+
+    private function createIndex()
+    {
+    	$write = new WriteCache();
+
+    	# get content structure
+    	$structure = $write->getCache('cache', 'structure.txt');
+
+    	# get data for search-index
+    	$index = $this->getAllContent($structure, $write);
+
+    	# store the index file here
+    	$write->writeFile('cache', 'index.json', json_encode($index, JSON_UNESCAPED_SLASHES));
+    }
+
+    private function getAllContent($structure, $write, $index = NULL)
+    {
+    	foreach($structure as $item)
+    	{
+    		if($item->elementType == "folder")
+    		{
+    			if($item->fileType == 'md')
+    			{
+ 		   			$page = $write->getFileWithPath('content' . $item->path . DIRECTORY_SEPARATOR . 'index.md');
+ 		   			$pageArray = $this->getPageContentArray($page, $item->urlAbs); 
+    				$index[$pageArray['url']] = $pageArray;
+    			}
+
+	    		$index = $this->getAllContent($item->folderContent, $write, $index);
+    		}
+    		else
+    		{
+    			$page = $write->getFileWithPath('content' . $item->path);
+ 		   		$pageArray = $this->getPageContentArray($page, $item->urlAbs); 
+    			$index[$pageArray['url']] = $pageArray;
+    		}
+    	}
+    	return $index;
+    }
+
+    private function getPageContentArray($page, $url)
+    {
+    	$parts = explode("\n", $page, 2);
+
+	    # get the title / headline
+    	$title = trim($parts[0], '# ');
+    	$title = str_replace(["\r\n", "\n", "\r"],' ', $title);
+
+    	# get and cleanup the content
+    	$content = $parts[1];
+    	$content = strip_tags($content);
+    	$content = str_replace(["\r\n", "\n", "\r"],' ', $content);
+
+    	$pageContent = [
+    		'title' 	=> $title,
+    		'content' 	=> $content,
+    		'url'		=> $url
+    	];
+
+    	return $pageContent;
+    }
+}

plugins/search/public/lunr-licence.md

@@ -0,0 +1,19 @@
+Copyright (C) 2013 by Oliver Nightingale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

plugins/search/public/search.css

@@ -0,0 +1,64 @@
+.searchContainer{
+  overflow: hidden;
+  width: 100%;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.searchContainer input{
+	width: 100%;
+	height: 50px;
+	border: 1px solid #ddd;
+	font-size: 1rem;
+	float: left;
+	padding-left: 15px;
+ 	border-radius: 2px;
+  	box-sizing:border-box;	
+}
+.searchContainer button{
+	border-top-right-radius: 2px;
+	border-bottom-right-radius: 2px;
+	border: none;
+	background: #232833;
+	height: 50px;
+	width: 50px;
+	color: #fff;
+	font-size: 10pt;
+	margin-left: -50px;
+}
+.searchContainer button:hover,.searchContainer button:focus, .searchContainer button:active{
+	cursor: pointer;
+}
+
+#searchresult{
+}
+.resultwrapper{
+}
+button#closeSearchResult{
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	margin: 10px;
+	border: none;
+	border-radius: 2px;
+	font-size: 1rem;
+	color: #fff;
+	background: #000;
+	padding: 15px;
+}
+button#closeSearchResult:hover,#closeSearchResult:focus{
+	cursor: pointer;
+}
+.resultlist{
+	margin: 0px;
+	padding: 0px;
+	list-style:none;
+}
+.resultitem{
+
+}
+.resultheader{
+
+}
+.resultsnippet{
+
+}

plugins/search/public/search.js

@@ -0,0 +1,115 @@
+var searchField = document.getElementById("searchField");
+var searchButton = document.getElementById("searchButton");
+
+if(searchField && searchButton)
+{
+	var searchIndex = false;
+	var documents = false;
+	var holdcontent = false;
+	var contentwrapper = false;
+
+	searchField.addEventListener("focus", function(event){
+
+		if(!searchIndex)
+		{			
+	        myaxios.get('/indexrs51gfe2o2')
+	        .then(function (response) {
+
+	            documents = JSON.parse(response.data);
+
+				searchIndex = lunr(function() {
+				    this.ref("id");
+				    this.field("title", { boost: 10 });
+				    this.field("content");
+				    for (var key in documents){
+				        this.add({
+				            "id": documents[key].url,
+				            "title": documents[key].title,
+				            "content": documents[key].content
+				        });
+				    }
+				});
+
+	        })
+	        .catch(function (error) {});			
+		}
+	});
+
+	searchButton.addEventListener("click", function(event){
+		event.preventDefault();
+
+		var term = document.getElementById('searchField').value;
+		var results = searchIndex.search(term);
+
+		var resultPages = results.map(function (match) {
+			return documents[match.ref];
+		});
+
+		resultsString = "<div class='resultwrapper'><h1>Result for " + term + "</h1>";
+		resultsString += "<button id='closeSearchResult'>close</button>";
+		resultsString += "<ul class='resultlist'>";
+		resultPages.forEach(function (r) {
+		    resultsString += "<li class='resultitem'>";
+		    resultsString +=   "<a class='resultheader' href='" + r.url + "?q=" + term + "'><h3>" + r.title + "</h3></a>";
+		    resultsString +=   "<div class='resultsnippet'>" + r.content.substring(0, 200) + " ...</div>";
+		    resultsString += "</li>"
+		});
+		resultsString += "</ul></div>";
+
+		if(!holdcontent)
+		{
+			contentwrapper = document.getElementById("searchresult").parentNode;
+			holdcontent = contentwrapper.innerHTML;
+		}
+
+		contentwrapper.innerHTML = resultsString;
+
+		document.getElementById("closeSearchResult").addEventListener("click", function(event){
+			contentwrapper.innerHTML = holdcontent;
+		});
+
+	}, false);
+}
+
+/*
+var searchIndex = lunr(function() {
+    this.ref("id");
+    this.field("title", { boost: 10 });
+    this.field("content");
+    for (var key in window.pages) {
+        this.add({
+            "id": key,
+            "title": pages[key].title,
+            "content": pages[key].content
+        });
+    }
+});
+
+function getQueryVariable(variable) {
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+  for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split("=");
+      if (pair[0] === variable) {
+          return decodeURIComponent(pair[1].replace(/\+/g, "%20"));
+      }
+  }
+}
+
+var searchTerm = getQueryVariable("q");
+// creation of searchIndex from earlier example
+var results = searchIndex.search(searchTerm);
+var resultPages = results.map(function (match) {
+  return pages[match.ref];
+});
+
+// resultPages from previous example
+resultsString = "";
+resultPages.forEach(function (r) {
+    resultsString += "<li>";
+    resultsString +=   "<a class='result' href='" + r.url + "?q=" + searchTerm + "'><h3>" + r.title + "</h3></a>";
+    resultsString +=   "<div class='snippet'>" + r.content.substring(0, 200) + "</div>";
+    resultsString += "</li>"
+});
+document.querySelector("#search-results").innerHTML = resultsString;
+*/

plugins/search/search.php

@@ -0,0 +1,128 @@
+<?php
+
+namespace Plugins\search;
+
+use \Typemill\Plugin;
+use \Typemill\Models\Write;
+
+class Search extends index
+{
+	protected $item;
+	
+    public static function getSubscribedEvents()
+    {
+		return array(
+			'onSettingsLoaded' 		=> 'onsettingsLoaded',
+			'onContentArrayLoaded' 	=> 'onContentArrayLoaded',			
+			'onPageReady'			=> 'onPageReady',
+			'onPagePublished'		=> 'onPagePublished',
+			'onPageUnpublished'		=> 'onPageUnpublished',
+			'onPageSorted'			=> 'onPageSorted',
+			'onPageDeleted'			=> 'onPageDeleted',			
+		);
+	}
+	
+	# get search.json with route
+	# update search.json on publish
+
+	public static function addNewRoutes()
+	{
+		# the route for the api calls
+		return array(
+			array(
+				'httpMethod'    => 'get', 
+				'route'         => '/indexrs51gfe2o2',
+				'class'         => 'Plugins\search\index:index'
+			),
+		);
+	}
+
+	public function onSettingsLoaded($settings)
+	{
+		$this->settings = $settings->getData();
+	}
+
+	# at any of theses events, delete the old search index
+	public function onPagePublished($item)
+	{
+		$this->deleteSearchIndex();
+	}
+	public function onPageUnpublished($item)
+	{
+		$this->deleteSearchIndex();
+	}
+	public function onPageSorted($inputParams)
+	{
+		$this->deleteSearchIndex();
+	}
+	public function onPageDeleted($item)
+	{
+		$this->deleteSearchIndex();
+	}
+
+	private function deleteSearchIndex()
+	{
+    	$write = new Write();
+
+    	# store the index file here
+    	$write->deleteFileWithPath('cache' . DIRECTORY_SEPARATOR . 'index.json');		
+	}
+	
+	public function onContentArrayLoaded($contentArray)
+	{
+		# get content array
+		$content 	= $contentArray->getData();
+		$settings 	= $this->getPluginSettings('search');
+		$salt 		= "asPx9Derf2";
+
+		# activate axios and vue in frontend
+		$this->activateAxios();
+		$this->activateVue();
+
+		# add the css and vue application
+		$this->addCSS('/search/public/search.css');
+		$this->addJS('/search/public/lunr.min.js');	
+		$this->addJS('/search/public/search.js');
+
+		# simple security for first request
+		$secret = time();
+		$secret = substr($secret,0,-1);
+		$secret = md5($secret . $salt);
+
+		# simple csrf protection with a session for long following requests
+		if (session_status() == PHP_SESSION_NONE) {
+		    session_start();
+		}
+
+		$length 					= 32;
+		$token 						= substr(base_convert(sha1(uniqid(mt_rand())), 16, 36), 0, $length);
+		$_SESSION['search'] 		= $token; 
+		$_SESSION['search-expire'] 	= time() + 1300; # 60 seconds * 30 minutes
+
+		# create div for vue app
+		$search 	= '<div data-access="' . $secret . '" data-token="' . $token . '" id="searchresult"></div>';
+
+		# create content type
+		$search = Array
+		(
+			'rawHtml' => $search,
+			'allowRawHtmlInSafeMode' => true,
+			'autobreak' => 1
+		);
+
+		$content[] = $search;
+
+		$contentArray->setData($content);
+	}
+
+	public function onPageReady($page)
+	{
+		$pageData = $page->getData($page);
+
+		$pageData['widgets']['search'] = '<div class="searchContainer" id="searchForm">'.
+	        									'<input id="searchField" type="text" placeholder="search ..." />'.
+	        									'<button id="searchButton" type="button">GO</button>'.
+    									'</div>';
+ 		$page->setData($pageData);
+	}
+}

plugins/search/search.yaml

@@ -0,0 +1,8 @@
+name: Search
+version: 1.0.0
+description: Add a search to your website with lunr.js.
+author: Trendschau
+homepage: https://typemill.net
+licence: MIT
+paypal: https://paypal.me/typemill
+amount: 10

system/Assets.php

@@ -38,7 +38,7 @@ class Assets
 
 		$resize = '-';
 
-		if(ctype_digit($width) && $width < 10000)
+		if(is_int($width) && $width < 10000)
 		{
 			$resize .= $width;
 			$desiredSizes['custom']['width'] = $width;
@@ -46,7 +46,7 @@ class Assets
 
 		$resize .= 'x';
 
-		if(ctype_digit($height) && $height < 10000)
+		if(is_int($height) && $height < 10000)
 		{
 			$resize .= $height;
 			$desiredSizes['custom']['height'] = $height;
@@ -125,7 +125,7 @@ class Assets
 
 	public function src()
 	{
-		return $this->imageUrl;
+		return $this->baseUrl . '/' . $this->imageUrl;
 	}
 
 	public function addCSS($CSS)

system/Controllers/ArticleApiController.php

@@ -977,7 +977,7 @@ class ArticleApiController extends ContentController
 			}
 
 			# parse markdown-content-array to content-string
-			$content[$key]	= ['id' => $key, 'html' => $parsedown->markup($contentArray, $relurl)];
+			$content[$key]	= ['id' => $key, 'html' => $parsedown->markup($contentArray)];
 		}
 
 		if($toc)

system/Controllers/AuthController.php

@@ -116,6 +116,13 @@ class AuthController extends Controller
 
 			if($userdata && password_verify($params['password'], $userdata['password']))
 			{
+				# check if user has confirmed the account 
+				if(isset($userdata['optintoken']) && $userdata['optintoken'])
+				{
+					$this->c->flash->addMessage('error', 'Your registration is not confirmed yet. Please check your e-mails and use the confirmation link.');
+					return $response->withRedirect($this->c->router->pathFor('auth.show'));				
+				}
+
 				$user->login($userdata['username']);
 
 				/* clear the user login attemps */

system/Controllers/BlockApiController.php

@@ -143,7 +143,7 @@ class BlockApiController extends ContentController
 		else
 		{
 			# parse markdown-content-array to content-string
-			$blockHTML = $parsedown->markup($blockArray, $relurl);
+			$blockHTML = $parsedown->markup($blockArray);
 			
 			# if it is a headline
 			if($blockMarkdown[0] == '#')
@@ -195,7 +195,7 @@ class BlockApiController extends ContentController
 			}
 
 			# parse markdown-content-array to content-string
-			$content[$key]	= ['id' => $key, 'html' => $parsedown->markup($contentArray, $relurl)];
+			$content[$key]	= ['id' => $key, 'html' => $parsedown->markup($contentArray)];
 		}
 
 		# if page has a table of content
@@ -353,7 +353,7 @@ class BlockApiController extends ContentController
 		else
 		{
 			# parse markdown-content-array to content-string
-			$blockHTML = $parsedown->markup($blockArray, $relurl);
+			$blockHTML = $parsedown->markup($blockArray);
 			
 			# if it is a headline
 			if($blockMarkdown[0] == '#')

system/Controllers/ContentBackendController.php

@@ -157,7 +157,7 @@ class ContentBackendController extends ContentController
 			$contentArray 	= $parsedown->text($block);
 
 			/* parse markdown-content-array to content-string */
-			$content[$key]	= $parsedown->markup($contentArray, $relurl);
+			$content[$key]	= $parsedown->markup($contentArray);
 		}
 
 		# extract title and delete from content array, array will start at 1 after that.

system/Controllers/PageController.php

@@ -206,15 +206,15 @@ class PageController extends Controller
 		$parsedown->setSafeMode(true);
 
 		/* parse markdown-file to content-array */
-		$contentArray 	= $parsedown->text($contentMD, $itemUrl);
+		$contentArray 	= $parsedown->text($contentMD);
 		$contentArray 	= $this->c->dispatcher->dispatch('onContentArrayLoaded', new OnContentArrayLoaded($contentArray))->getData();
 				
 		/* parse markdown-content-array to content-string */
-		$contentHTML	= $parsedown->markup($contentArray, $itemUrl);
+		$contentHTML	= $parsedown->markup($contentArray);
 		$contentHTML 	= $this->c->dispatcher->dispatch('onHtmlLoaded', new OnHtmlLoaded($contentHTML))->getData();
 		
 		/* extract the h1 headline*/
-		$contentParts	= explode("</h1>", $contentHTML);
+		$contentParts	= explode("</h1>", $contentHTML, 2);
 		$title			= isset($contentParts[0]) ? strip_tags($contentParts[0]) : $settings['title'];
 		
 		$contentHTML	= isset($contentParts[1]) ? $contentParts[1] : $contentHTML;
@@ -240,9 +240,19 @@ class PageController extends Controller
 					$img_alt = isset($img_alt_result[1]) ? $img_alt_result[1] : false;
 				}
 			}
+			elseif($logo)
+			{
+				$img_url = $logo;
+				$pathinfo = pathinfo($settings['logo']);
+				$img_alt = $pathinfo['filename'];
+			}
 		}
 		
-		$firstImage = array('img_url' => $base_url . '/' . $img_url, 'img_alt' => $img_alt);
+		$firstImage = false;
+		if($img_url)
+		{
+			$firstImage = array('img_url' => $base_url . '/' . $img_url, 'img_alt' => $img_alt);
+		}
 		
 		$route = empty($args) && isset($settings['themes'][$theme]['cover']) ? '/cover.twig' : '/index.twig';
 

system/Controllers/SettingsController.php

@@ -65,7 +65,7 @@ class SettingsController extends Controller
 			'locale' 		=> $locale, 
 			'formats' 		=> $defaultSettings['formats'],
 			'access'		=> $options,
-			'route' 		=> $route->getName() 
+			'route' 		=> $route->getName()
 		));
 	}
 	
@@ -83,18 +83,24 @@ class SettingsController extends Controller
 
 			if($newSettings)
 			{
-				/* make sure only allowed fields are stored */
+				# check for image settings
+				$imgwidth = isset($newSettings['images']['live']['width']) ? $newSettings['images']['live']['width'] : false;
+				$imgheight = isset($newSettings['images']['live']['height']) ? $newSettings['images']['live']['height'] : false;
+
+				# make sure only allowed fields are stored
 				$newSettings = array(
-					'title' 			=> $newSettings['title'],
-					'author' 			=> $newSettings['author'],
-					'copyright' 		=> $newSettings['copyright'],
-					'year'				=> $newSettings['year'],
-					'language'			=> $newSettings['language'],
-					'langattr'			=> $newSettings['langattr'],
-					'editor' 			=> $newSettings['editor'],
-					'access'			=> $newSettings['access'], 
-					'formats'			=> $newSettings['formats'],
-					'headlineanchors'	=> isset($newSettings['headlineanchors']) ? $newSettings['headlineanchors'] : null,
+					'title' 				=> $newSettings['title'],
+					'author' 				=> $newSettings['author'],
+					'copyright' 			=> $newSettings['copyright'],
+					'year'					=> $newSettings['year'],
+					'language'				=> $newSettings['language'],
+					'langattr'				=> $newSettings['langattr'],
+					'editor' 				=> $newSettings['editor'],
+					'access'				=> $newSettings['access'], 
+					'formats'				=> $newSettings['formats'],
+					'headlineanchors'		=> isset($newSettings['headlineanchors']) ? $newSettings['headlineanchors'] : null,
+					'displayErrorDetails'	=> isset($newSettings['displayErrorDetails']) ? true : null,
+					'twigcache'				=> isset($newSettings['twigcache']) ? true : null
 				);
 
 				# https://www.slimframework.com/docs/v3/cookbook/uploading-files.html; 
@@ -102,6 +108,17 @@ class SettingsController extends Controller
 				$copyright 			= $this->getCopyright();
 
 				$validate->settings($newSettings, $copyright, $defaultSettings['formats'], 'settings');
+			
+				# use custom image settings
+				if( $imgwidth  && ctype_digit($imgwidth) && (strlen($imgwidth) < 5) )
+				{
+					$newSettings['images']['live']['width'] = $imgwidth;
+				}
+				if( $imgheight  && ctype_digit($imgheight) && (strlen($imgheight) < 5) )
+				{
+					$newSettings['images']['live']['height'] = $imgheight;
+				}
+
 			}
 			else
 			{
@@ -733,7 +750,9 @@ class SettingsController extends Controller
 					{
 						# set image size
 						$settings = $this->c->get('settings');
-						$settings->replace(['images' => ['live' => ['width' => 500, 'height' => 500]]]);
+						$imageSizes = $settings['images'];
+						$imageSizes['live'] = ['width' => 500, 'height' => 500];
+						$settings->replace(['images' => $imageSizes]);
 						$imageresult = $this->saveImages($imageFields, $userdata, $settings, $images['user']);
 		
 						if(isset($_SESSION['slimFlash']['error']))
@@ -818,6 +837,42 @@ class SettingsController extends Controller
 		}
 	}
 
+	public function clearCache($request, $response, $args)
+	{
+		$settings 	= $this->c->get('settings');
+		$dir 		= $settings['basePath'] . 'cache';
+		$iterator 	= new \RecursiveDirectoryIterator($dir, \RecursiveDirectoryIterator::SKIP_DOTS);
+		$files 		= new \RecursiveIteratorIterator($iterator, \RecursiveIteratorIterator::CHILD_FIRST);
+		
+		$error = false;
+
+		foreach($files as $file)
+		{
+		    if ($file->isDir())
+		    {
+		    	if(!rmdir($file->getRealPath()))
+		    	{
+		    		$error = 'Could not delete some folders.';
+		    	}
+		    }
+		    elseif($file->getExtension() !== 'css')
+		    {
+				if(!unlink($file->getRealPath()) )
+				{
+					$error = 'Could not delete some files.';
+				}
+		    }
+		}
+
+		if($error)
+		{
+			return $response->withJson(['errors' => $error], 500);
+		}
+
+		return $response->withJson(array('errors' => false));
+
+	}
+
 	private function getUserFields($role)
 	{
 		$fields = [];
@@ -996,7 +1051,6 @@ class SettingsController extends Controller
 
 	protected function saveImages($imageFields, $userInput, $userSettings, $files)
 	{
-
 		# initiate image processor with standard image sizes
 		$processImages = new ProcessImage($userSettings['images']);
 
@@ -1029,5 +1083,6 @@ class SettingsController extends Controller
 			}
 		}
 		return $userInput;
-	}	
-}
+	}
+
+}

system/Extensions/ParsedownExtension.php

@@ -6,13 +6,16 @@ use \URLify;
 
 class ParsedownExtension extends \ParsedownExtra
 {
-    function __construct($showAnchor = NULL)
+    function __construct($showAnchor = NULL, $skipAbsoluteUrls = NULL)
     {
         parent::__construct();
 
         # show anchor next to headline? 
         $this->showAnchor = $showAnchor;
 
+        # base url is needed for media/images and relative links (e.g. if www.mydomain.com/mywebsite)
+        $this->baseUrl = $skipAbsoluteUrls ? '' : TM_BASE_URL;
+
         # math support
         $this->BlockTypes['\\'][] = 'Math';
         $this->BlockTypes['$'][] = 'Math';
@@ -38,18 +41,18 @@ class ParsedownExtension extends \ParsedownExtra
 
     public function text($text, $relurl = null)
     {
-        $this->relurl = $relurl ? $relurl : '';
+ #       $this->relurl = $relurl ? $relurl : '';
 
         $Elements = $this->textElements($text);
         
         return $Elements;
     }
     
-    public function markup($Elements, $relurl)
+    public function markup($Elements)
     {
 
         # make relurl available for other functions
-        $this->relurl = $relurl;
+#        $this->relurl = $relurl;
         
         # convert to markup
         $markup = $this->elements($Elements);
@@ -75,7 +78,6 @@ class ParsedownExtension extends \ParsedownExtra
             
             $markup .= "\n" . $this->element($Element);
         }
-        
         return $markup;
     }
     
@@ -352,7 +354,7 @@ class ParsedownExtension extends \ParsedownExtra
                     'text' => $text,
                     'handler' => 'line',
                     'attributes' => array(
-                        'id' => "$headline"
+                        'id' => "h-$headline"
                     )
                 )
             );
@@ -363,8 +365,9 @@ class ParsedownExtension extends \ParsedownExtra
                             array(
                                 'name' => 'a',
                                 'attributes' => array(
-                                    'href' => $this->relurl . "#" . $headline,
-                                    'class' => 'tm-heading-anchor',
+#                                    'href' => $this->relurl . "#" . $headline,
+                                    'href'     =>  "#h-" . $headline,
+                                    'class'    => 'tm-heading-anchor',
                                 ),
                                 'text' => '#',
                             ),
@@ -391,15 +394,16 @@ class ParsedownExtension extends \ParsedownExtra
             $thisLevel = $headline['level'];
             $prevLevel = $key > 0 ? $headlines[$key-1]['level'] : 1;
             $nextLevel = isset($headlines[$key+1]) ? $headlines[$key+1]['level'] : 0;
-            
+
             if($thisLevel > $prevLevel)
             {
                 $markup .= '<ul>';
             }
             
-            $markup .= '<li class="' . $headline['name'] . '"><a href="' . $this->relurl . '#' . $headline['attribute'] . '">' . $headline['text'] . '</a>';
+#            $markup .= '<li class="' . $headline['name'] . '"><a href="' . $this->relurl . '#' . $headline['attribute'] . '">' . $headline['text'] . '</a>';
+            $markup .= '<li class="' . $headline['name'] . '"><a href="#' . $headline['attribute'] . '">' . $headline['text'] . '</a>';
             
-            if($thisLevel == $nextLevel)
+            if($thisLevel == $nextLevel )
             {
                 $markup .= '</li>';
             }
@@ -410,11 +414,14 @@ class ParsedownExtension extends \ParsedownExtra
                     $markup .= '</li></ul>';
                     $thisLevel--;
                 }
+
+                if($thisLevel > 0)
+                {
+                    $markup .= '</li>';
+                }
             }
         }
         
-        $markup .= '</ul>';
-        
         return $markup;
     }
 
@@ -434,7 +441,8 @@ class ParsedownExtension extends \ParsedownExtra
    
         $href = $element['element']['element']['attributes']['href'];
 
-        $element['element']['element']['attributes']['href'] = $this->relurl . $href;
+#        $element['element']['element']['attributes']['href'] = $this->relurl . $href;
+        $element['element']['element']['attributes']['href'] = $href;
 
         return $element;
     }
@@ -487,8 +495,9 @@ class ParsedownExtension extends \ParsedownExtra
                 $backLinkElements[] = array(
                     'name' => 'a',
                     'attributes' => array(
-                        'href' => $this->relurl . "#fnref$number:$definitionId",
-                        'rev' => 'footnote',
+#                        'href' => $this->relurl . "#fnref$number:$definitionId",
+                        'href'  => "#fnref$number:$definitionId",
+                        'rev'   => 'footnote',
                         'class' => 'footnote-backref',
                     ),
                     'rawHtml' => '&#8617;',
@@ -704,98 +713,188 @@ class ParsedownExtension extends \ParsedownExtra
 
     protected $regexAttribute = '(?:[#.][-\w:\\\]+[ ]*|[-\w:\\\]+(?:=(?:["\'][^\n]*?["\']|[^\s]+)?)?[ ]*)';
 
-    # turn markdown into an array of markdown blocks for typemill edit mode 
-    function markdownToArrayBlocks($markdown)
+
+
+    # manipulated method linesElements, returns array of markdown blocks
+    public function markdownToArrayBlocks($markdown)
     {
+
+        # make sure no definitions are set
+        $this->DefinitionData = array();
+
         # standardize line breaks
-        $markdown = str_replace(array("\r\n", "\r"), "\n", $markdown);
+        $text = str_replace(array("\r\n", "\r"), "\n", $markdown);
 
         # remove surrounding line breaks
-        $markdown = trim($markdown, "\n");
+        $text = trim($text, "\n");
 
-        # trim to maximum two linebreaks
-        
-        # split text into blocks
-        $blocks = explode("\n\n", $markdown);
-        
-        # clean up code blocks
-        $cleanBlocks = array();
-        
-        # holds the content of codeblocks
-        $codeBlock = '';
-        
-        # flag if codeblock is on or off.
-        $codeBlockOn = false;
-        
-        # holds the content of a definition list
-        $definitionList = "";
+        # split text into lines
+        $lines = explode("\n", $text);
 
-        # flag if definition-list is on or off.
-        $definitionListOn = false;
+        # manipulated method linesElements
 
-        foreach($blocks as $block)
+        $Elements = array();
+        $CurrentBlock = null;
+/*new*/ $mdElements = array();
+
+        foreach ($lines as $line)
         {
-            # remove empty lines
-            if (chop($block) === '') continue;
-            
-            # if the block starts with a fenced code
-            if(substr($block,0,2) == '``')
+            if (chop($line) === '')
             {
-                # and if we are in an open code-block
-                if($codeBlockOn)
+                if (isset($CurrentBlock))
                 {
-                    # it must be the end of the codeblock, so add it to the codeblock
-                    $block = $codeBlock . "\n" . $block;
-                    
-                    # reset codeblock-value and close the codeblock.
-                    $codeBlock = '';
-                    $codeBlockOn = false;
+                    $CurrentBlock['interrupted'] = (isset($CurrentBlock['interrupted'])
+                        ? $CurrentBlock['interrupted'] + 1 : 1
+                    );
                 }
-                else
-                {
-                    # it must be the start of the codeblock.
-                    $codeBlockOn = true;
-                }
-            }
-            if($codeBlockOn)
-            {
-                # if the codeblock is complete
-                if($this->isComplete($block))
-                {
-                    $block = $codeBlock . "\n" . $block;
 
-                    # reset codeblock-value and close the codeblock.
-                    $codeBlock = '';
-                    $codeBlockOn = false;
-                }
-                else
+                continue;
+            }
+
+            while (($beforeTab = strstr($line, "\t", true)) !== false)
+            {
+                $shortage = 4 - mb_strlen($beforeTab, 'utf-8') % 4;
+
+                $line = $beforeTab
+                    . str_repeat(' ', $shortage)
+                    . substr($line, strlen($beforeTab) + 1)
+                ;
+            }
+
+            $indent = strspn($line, ' ');
+
+            $text = $indent > 0 ? substr($line, $indent) : $line;
+
+            # ~
+
+            $Line = array('body' => $line, 'indent' => $indent, 'text' => $text);
+
+            # ~
+
+            # if we are in a multiline block element
+            if (isset($CurrentBlock['continuable']))
+            {
+                $methodName = 'block' . $CurrentBlock['type'] . 'Continue';
+                $Block = $this->$methodName($Line, $CurrentBlock);
+                
+                # if this line still belongs to the current multiline block
+                if (isset($Block))
                 {
-                    $codeBlock .= "\n" . $block;
+                    $CurrentBlock = $Block;
+/*new*/             $mdCurrentBlock = $mdCurrentBlock . "\n" . $line;
                     continue;
                 }
+                # if this line does not belong to the current multiline block
+                else
+                {
+                    # if multiline block element is finished
+                    if ($this->isBlockCompletable($CurrentBlock['type']))
+                    {
+                        $methodName = 'block' . $CurrentBlock['type'] . 'Complete';
+                        $CurrentBlock = $this->$methodName($CurrentBlock);
+/*new*/                 $mdCurrentBlock = $mdCurrentBlock;
+                    }
+                }
             }
-            
-            # handle definition lists
-            $checkDL = preg_split('/\r\n|\r|\n/',$block);
-            if(isset($checkDL[1]) && substr($checkDL[1],0,2) == ': ')
+
+            # ~
+
+            $marker = $text[0];
+
+            # ~
+
+            $blockTypes = $this->unmarkedBlockTypes;
+
+            if (isset($this->BlockTypes[$marker]))
             {
-                $definitionList .= $block . "\n\n";
-                $definitionListOn = true;
-                continue; 
+                foreach ($this->BlockTypes[$marker] as $blockType)
+                {
+                    $blockTypes []= $blockType;
+                }
             }
-            elseif($definitionListOn)
+
+            #
+            # ~
+
+            foreach ($blockTypes as $blockType)
             {
-                $cleanBlocks[] = $definitionList;
-                $definitionList = "";
-                $definitionListOn = false;
+                $Block = $this->{"block$blockType"}($Line, $CurrentBlock);
+/*new*/         $mdBlock = $line;
+                if (isset($Block))
+                {
+                    $Block['type'] = $blockType;
+                    if ( ! isset($Block['identified']))
+                    {
+                        if (isset($CurrentBlock))
+                        {
+                            $Elements[] = $this->extractElement($CurrentBlock);
+/*new*/                     $mdElements[] = $mdCurrentBlock;
+                        }
+
+                        $Block['identified'] = true;
+                    }
+
+                    if ($this->isBlockContinuable($blockType))
+                    {
+                        $Block['continuable'] = true;
+                    }
+
+                    $CurrentBlock = $Block;
+/*new*/             $mdCurrentBlock = $mdBlock;
+                    continue 2;
+                }
             }
-            
-            $block = trim($block, "\n");
-                        
-            $cleanBlocks[] = $block;
+
+            # ~
+
+            if (isset($CurrentBlock) and $CurrentBlock['type'] === 'Paragraph')
+            {
+                $Block = $this->paragraphContinue($Line, $CurrentBlock);
+/*new*/         $mdBlock = $mdCurrentBlock . "\n" . $line;
+            }
+
+            if (isset($Block))
+            {
+                $CurrentBlock = $Block;
+/*new*/         $mdCurrentBlock = $mdBlock;
+            }
+            else
+            {
+                if (isset($CurrentBlock))
+                {
+                    $Elements[] = $this->extractElement($CurrentBlock);
+/*new*/             $mdElements[] = $mdCurrentBlock;
+                }
+
+                $CurrentBlock = $this->paragraph($Line);
+/*new*/         $mdCurrentBlock = $line;
+                $CurrentBlock['identified'] = true;
+            }
+
         }
-        return $cleanBlocks;
+
+        # ~
+
+        if (isset($CurrentBlock['continuable']) and $this->isBlockCompletable($CurrentBlock['type']))
+        {
+            $methodName = 'block' . $CurrentBlock['type'] . 'Complete';
+            $CurrentBlock = $this->$methodName($CurrentBlock);
+/*new*/     $mdCurrentBlock = $mdCurrentBlock;
+        }
+
+        # ~
+
+        if (isset($CurrentBlock))
+        {
+            $Elements[] = $this->extractElement($CurrentBlock);
+/*new*/     $mdElements[] = $mdCurrentBlock;
+        }
+
+        # ~
+/*new*/ return $mdElements;
+#        return $Elements;
     }
+
     
     public function arrayBlocksToMarkdown(array $arrayBlocks)
     {   
@@ -823,4 +922,106 @@ class ParsedownExtension extends \ParsedownExtra
         }
         return false;
     }
+
+
+    protected function inlineLink($Excerpt)
+    {
+        $Element = array(
+            'name' => 'a',
+            'handler' => array(
+                'function' => 'lineElements',
+                'argument' => null,
+                'destination' => 'elements',
+            ),
+            'nonNestables' => array('Url', 'Link'),
+            'attributes' => array(
+                'href' => null,
+                'title' => null,
+            ),
+        );
+
+        $extent = 0;
+
+        $remainder = $Excerpt['text'];
+
+        if (preg_match('/\[((?:[^][]++|(?R))*+)\]/', $remainder, $matches))
+        {
+            $Element['handler']['argument'] = $matches[1];
+
+            $extent += strlen($matches[0]);
+
+            $remainder = substr($remainder, $extent);
+        }
+        else
+        {
+            return;
+        }
+
+        if (preg_match('/^[(]\s*+((?:[^ ()]++|[(][^ )]+[)])++)(?:[ ]+("[^"]*+"|\'[^\']*+\'))?\s*+[)]/', $remainder, $matches))
+        {
+            # start typemill: if relative link or media-link
+            $href = $matches[1];
+            if($href[0] == '/')
+            {
+                $href = $this->baseUrl . $href;
+            }
+            elseif(substr( $href, 0, 6 ) === "media/")
+            {
+                $href = $this->baseUrl . '/' . $href;
+            }
+            # end typemill
+            
+            $Element['attributes']['href'] = $href;
+
+            if (isset($matches[2]))
+            {
+                $Element['attributes']['title'] = substr($matches[2], 1, - 1);
+            }
+
+            $extent += strlen($matches[0]);
+        }
+        else
+        {
+            if (preg_match('/^\s*\[(.*?)\]/', $remainder, $matches))
+            {
+                $definition = strlen($matches[1]) ? $matches[1] : $Element['handler']['argument'];
+                $definition = strtolower($definition);
+
+                $extent += strlen($matches[0]);
+            }
+            else
+            {
+                $definition = strtolower($Element['handler']['argument']);
+            }
+
+            if ( ! isset($this->DefinitionData['Reference'][$definition]))
+            {
+                return;
+            }
+
+            $Definition = $this->DefinitionData['Reference'][$definition];
+
+            $Element['attributes']['href'] = $Definition['url'];
+            $Element['attributes']['title'] = $Definition['title'];
+        }
+
+        $Link = array(
+            'extent' => $extent,
+            'element' => $Element,
+        );
+
+        # Parsedown Extra
+        $remainder = $Link !== null ? substr($Excerpt['text'], $Link['extent']) : '';
+
+        if (preg_match('/^[ ]*{('.$this->regexAttribute.'+)}/', $remainder, $matches))
+        {
+            $Link['element']['attributes'] += $this->parseAttributeData($matches[1]);
+
+            $Link['extent'] += strlen($matches[0]);
+        }
+
+        return $Link;
+
+    }
+
 }

system/Extensions/TwigMarkdownExtension.php

@@ -19,6 +19,6 @@ class TwigMarkdownExtension extends \Twig_Extension
 		
 		$markdownArray = $parsedown->text($markdown);
 		
-		return $parsedown->markup($markdownArray, false);
+		return $parsedown->markup($markdownArray);
 	}
 }

system/Models/ProcessAssets.php

@@ -249,5 +249,5 @@ class ProcessAssets
         }
 
         return $bytes;
-	}	
+	}
 }

system/Models/ProcessImage.php

@@ -177,7 +177,7 @@ class ProcessImage extends ProcessAssets
 			$new = imagecreatetruecolor($desired['width'], $desired['height']);
 
 		  	// preserve transparency
-		  	if($imageType == "gif" or $imageType == "png")
+		  	if($imageType == "gif" or $imageType == "png" or $imageType == "webp")
 		  	{
 		    	imagecolortransparent($new, imagecolorallocatealpha($new, 0, 0, 0, 127));
 		    	imagealphablending($new, false);
@@ -214,6 +214,10 @@ class ProcessImage extends ProcessAssets
 		{
 			$result = imagegif( $image, $folder . $name . '.gif' );
 		}
+		elseif($type == "webp")
+		{
+			$result = imagewebp( $image, $folder . $name . '.webp', 100);
+		}
 		elseif($type == "jpg" OR $type == "jpeg")
 		{
 			$result = imagejpeg( $image, $folder . $name . '.' . $type );
@@ -400,6 +404,7 @@ class ProcessImage extends ProcessAssets
 			case 'jpg' :
 			case 'jpeg': $image = imagecreatefromjpeg($imagePath); break;
 			case 'png': $image = imagecreatefrompng($imagePath); break;
+			case 'webp': $image = imagecreatefromwebp($imagePath); break;
 			default: return 'image type not supported';
 		}
 		

system/Models/User.php

@@ -38,26 +38,12 @@ class User extends WriteYaml
 	}
 	
 	public function createUser($params)
-	{		
-		$userdata = array(
-						'username' 	=> $params['username'],
-						'email'		=> $params['email'],
-						'password'	=> $this->generatePassword($params['password']),
-						'userrole' 	=> $params['userrole']
-					);
-
-		if(isset($params['firstname']))
-		{
-			$userdata['firstname'] = $params['firstname'];
-		}
-		if(isset($params['lastname']))
-		{
-			$userdata['lastname'] = $params['lastname'];
-		}
+	{
+		$params['password'] = $this->generatePassword($params['password']);
 	
-		if($this->updateYaml('settings/users', $userdata['username'] . '.yaml', $userdata))
+		if($this->updateYaml('settings/users', $params['username'] . '.yaml', $params))
 		{
-			return $userdata['username'];
+			return $params['username'];
 		}
 		return false;
 	}
@@ -81,11 +67,14 @@ class User extends WriteYaml
 		}
 		
 		$update = array_merge($userdata, $params);
+
+		# cleanup data here
+		
 		
 		$this->updateYaml('settings/users', $userdata['username'] . '.yaml', $update);
 
 		# if user updated his own profile, update session data
-		if($_SESSION['user'] == $params['username'])
+		if(isset($_SESSION['user']) && $_SESSION['user'] == $params['username'])
 		{
 			$_SESSION['role'] 	= $update['userrole'];
 

system/Models/Validation.php

@@ -29,12 +29,12 @@ class Validation
 
 		Validator::addRule('image_types', function($field, $value, array $params, array $fields) use ($user)
 		{
-    		$allowed 	= ['jpg', 'jpeg', 'png'];
+    		$allowed 	= ['jpg', 'jpeg', 'png', 'webp'];
 			$pathinfo	= pathinfo($value);
 			$extension 	= strtolower($pathinfo['extension']);
-			if(array_search($extension, $allowed)){ return true; }
+			if(in_array($extension, $allowed)){ return true; }
 			return false;
-		}, 'only jpg, jpeg, png allowed');
+		}, 'only jpg, jpeg, png, webp, allowed');
 
 		Validator::addRule('userAvailable', function($field, $value, array $params, array $fields) use ($user)
 		{

system/Models/WriteCache.php

@@ -46,11 +46,16 @@ class WriteCache extends Write
 	public function updateCache($folderName, $cacheFileName, $requestFileName, $cacheData)
 	{
 		$sCacheData = serialize($cacheData);
-		$this->writeFile($folderName, $cacheFileName, $sCacheData);
-		if($requestFileName)
+		if($this->writeFile($folderName, $cacheFileName, $sCacheData))
 		{
-			$this->writeFile($folderName, $requestFileName, time());
+			if($requestFileName)
+			{
+				$this->writeFile($folderName, $requestFileName, time());
+			}
+
+			return true;
 		}
+		return false;
 	}
 
 	/**

system/Plugin.php

@@ -153,7 +153,7 @@ abstract class Plugin implements EventSubscriberInterface
 		$parsedown 		= new ParsedownExtension();
 		
 		$contentArray 	= $parsedown->text($markdown);
-		$html			= $parsedown->markup($contentArray,false);
+		$html			= $parsedown->markup($contentArray);
 		
 		return $html;
 	}

system/Plugins.php

@@ -77,8 +77,7 @@ class Plugins
 		if( 
 			isset($route['httpMethod']) AND in_array($route['httpMethod'], array('get','post','put','delete','head','patch','options'))
 			AND isset($route['route']) AND is_string($route['route'])
-			AND isset($route['class']) AND is_string($route['class'])
-			AND !$this->in_array_r(strtolower($route['route']),$routes))
+			AND isset($route['class']) AND is_string($route['class']))
 		{
 			return true;
 		}

system/Routes/Api.php

@@ -10,6 +10,7 @@ use Typemill\Controllers\MetaApiController;
 use Typemill\Middleware\RestrictApiAccess;
 
 $app->get('/api/v1/themes', SettingsController::class . ':getThemeSettings')->setName('api.themes')->add(new RestrictApiAccess($container['router']));
+$app->delete('/api/v1/clearcache', SettingsController::class . ':clearCache')->setName('api.clearcache')->add(new RestrictApiAccess($container['router']));
 
 $app->post('/api/v1/article/markdown', ArticleApiController::class . ':getArticleMarkdown')->setName('api.article.markdown')->add(new RestrictApiAccess($container['router']));
 $app->post('/api/v1/article/html', ArticleApiController::class . ':getArticleHtml')->setName('api.article.html')->add(new RestrictApiAccess($container['router']));

system/Settings.php

@@ -20,8 +20,11 @@ class Settings
 			$settings 			= array_merge($defaultSettings, $userSettings);
 		}
 
-		# no individual image sizes are allowed sind 1.3.4
-		$settings['images']	= $defaultSettings['images'];
+		# no individual image sizes are allowed since 1.3.4
+		# $settings['images']	= $defaultSettings['images'];
+		# make sure that thumb sizes are still there.
+		$images = array_merge($defaultSettings['images'], $settings['images']);
+		$settings['images'] = $images;
 
 		# we have to check if the theme has been deleted
 		$themefolder = $settings['rootPath'] . $settings['themeFolder'] . DIRECTORY_SEPARATOR;
@@ -60,10 +63,9 @@ class Settings
 	public static function getDefaultSettings()
 	{
 		$rootPath = __DIR__ . DIRECTORY_SEPARATOR .  '..' . DIRECTORY_SEPARATOR;
-		
+
 		return [
 			'determineRouteBeforeAppMiddleware' 	=> true,
-			'displayErrorDetails' 					=> false,
 			'title'									=> 'TYPEMILL',
 			'author'								=> 'Unknown',
 			'copyright'								=> 'Copyright',
@@ -80,8 +82,6 @@ class Settings
 			'editor'								=> 'visual',
 			'formats'								=> ['markdown', 'headline', 'ulist', 'olist', 'table', 'quote', 'notice', 'image', 'video', 'file', 'toc', 'hr', 'definition', 'code'],
 			'contentFolder'							=> 'content',
-			'cache'									=> true,
-			'cachePath'								=> $rootPath . 'cache',
 			'version'								=> '1.3.8',
 			'setup'									=> true,
 			'welcome'								=> true,
@@ -166,11 +166,15 @@ class Settings
 									'setup' => true,
 									'welcome' => true,
 									'images' => true,
+									'live' => true,
+									'width' => true,
+									'height' => true,
 									'plugins' => true,
 									'themes' => true,
 									'latestVersion' => true,
 									'logo' => true,
-									'favicon' => true 
+									'favicon' => true,
+									'twigcache' => true
 								];
 
 			# cleanup the existing usersettings

system/Translations.php

@@ -62,7 +62,9 @@ class Translations
                 }
               }
               foreach($plugin_labels as $key => $value) {
-                $plugins_labels = array_merge($plugins_labels, $value);
+                if(is_array($value)){
+                  $plugins_labels = array_merge($plugins_labels, $value);
+                }
               }
             }
           }

system/author/css/style.css

@@ -185,6 +185,7 @@ body,input,select,textarea{
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;	
 }
+
 header, nav, h1, h2, h3, h4, h5, h6{
 	font-family: arial, sans-serif;
 }
@@ -593,9 +594,6 @@ footer{
 	margin-left: auto;
 	margin-right: auto;
 }
-.setupWrapper label{
-	font-weight: 700;
-}
 .setupWrapper input[type="submit"]
 {
 	border-radius: 0px;
@@ -607,7 +605,7 @@ footer{
 	border: 2px solid #f9f8f6;
 }
 .setupWrapper .formElement{
-	margin: 0 0 20px 0;
+	margin: 0 0 30px 0;
 }
 
 /************************
@@ -899,6 +897,9 @@ form .hidden{
 .large img{
 	width: 100%;
 }
+.large.img-component img, .large .img-upload img{
+	width: auto;
+}
 fieldset{
 	display: block;
 	position: relative;
@@ -911,20 +912,19 @@ fieldset{
 label,.label{
 	display: inline-block;
 	width: 100%;
-	font-size: 0.75em;
+	font-size: 0.9em;
 	font-weight: 300;
 	padding: 0px;
 	line-height: 1.5em;
-	text-transform: uppercase;
 }
-input, select, textarea{	
+input, select, textarea{
 	display: inline-block;
 	box-shadow: none;
 	width: 100%;
 	font-size: 1em;
 	box-sizing: border-box;
 	min-height: 42px;
-	border: 1px solid #f9f8f6; 
+	border: 1px solid #eee; 
 	background: #f9f8f6;	
 }
 input:focus, select:focus, textarea:focus{
@@ -1150,11 +1150,15 @@ ul.cardInfo{
 	overflow: hidden;
 	border: 1px;
 }
+.description{
+	font-size: .8em;
+	font-style: italic;
+}
 .cardFields .cardField:first-child{
 	margin-top: 50px;
 }
 .cardFields input, .cardFields select, .cardFields textarea, .cardFields .onoffswitch{
-	margin-bottom: 12px;
+	margin-bottom: 6px;
 }
 .cardFields label{
 	margin-top: 12px;
@@ -1168,7 +1172,7 @@ ul.cardInfo{
 	position: relative;
 	width: 100%;
 	display: inline-block;
-	margin: 10px 0;
+	margin: 26px 0 0;
 }
 .cardField.full{
 	width: 100%;
@@ -1660,8 +1664,8 @@ label .help, .label .help{
 	background:#e0474c;
 	color: #fff;
 }
-.editor button:disabled,
-.editor button[disabled]{
+button:disabled,
+button[disabled]{
 	border: 1px solid #eee;
 	background: #eee;
 	color: #444;

system/author/editor/editor-blox.twig

@@ -51,7 +51,7 @@
 				<content-block class="title" :body="false">
 					<div class="blox title" @click.prevent="setData( $event )" data-id="0" id="blox-0" v-if="title" v-html="title.html"></div>
 				</content-block>
-				
+
 				<div id="sortblox" v-cloak>
 					<draggable v-model="html" @start="onStart" @end="moveBlock" :disabled="sortdisabled" :animation="150">
 						<content-block :body="true" v-for="(block, index) in html" v-if="index !== 0">

system/author/js/author.js

@@ -297,8 +297,39 @@
 				visiblefilename.value = '';
 			}
 
-		}());	
+		}());
 	}
+
+	/*************************************
+	**			Clear Cache				**
+	*************************************/
+
+	var cachebutton = document.getElementById("clearcache");
+
+	if(cachebutton)
+	{
+
+		cachebutton.addEventListener("click", function(event){
+			
+			event.preventDefault();
+			
+	        myaxios.delete('/api/v1/clearcache',{
+	        	data: {
+					'csrf_name': 	document.getElementById("csrf_name").value,
+					'csrf_value':	document.getElementById("csrf_value").value,
+	        	}
+			})			
+	        .then(function (response) {
+	        	cachebutton.disabled = true;
+	        	document.getElementById("cacheresult").innerHTML = "<span class='green f6'>Done!</span>";
+	        })
+	        .catch(function (error)
+	        {
+	        	document.getElementById("cacheresult").innerHTML = "<span class='red f6'>" + error.response.data.errors + "</span>";
+	        });
+		});
+	}
+
 	
 	/*************************************
 	**			COLOR PICKER			**

system/author/js/vue-blox.js

@@ -16,7 +16,7 @@ const contentComponent = Vue.component('content-block', {
 				   '</transition>' +
 				   '<div class="blox-buttons" v-if="edit">' + 
 				    '<button class="edit" :disabled="disabled" @click.prevent="saveBlock">{{ \'save\'|translate }}</button>' +
-				    '<button class="cancel" :disabled="disabled" @click.prevent="switchToPreviewMode">{{ \'cancel\'|translate }}</button>' +
+				    '<button class="cancel" :disabled="disabled" @click.prevent="cancel">{{ \'cancel\'|translate }}</button>' +
 				   '</div>' +
 				  '</div>' +
 				  '<div :class="preview" ref="preview"><slot><format-component></format-component></slot></div>' +
@@ -79,6 +79,10 @@ const contentComponent = Vue.component('content-block', {
 		},
 		updateMarkdown: function($event)
 		{
+			eventBus.$emit('markdownChanged');
+			self.$root.$data.unsafed = true;
+			this.edit = true;
+			this.unsafed = true;
 			this.compmarkdown = $event;
 			this.setComponentSize();
 		},
@@ -105,10 +109,19 @@ const contentComponent = Vue.component('content-block', {
 		switchToEditMode: function()
 		{
 			if(this.edit){ return; }
+
+			if(this.$root.$data.unsafed)
+			{
+				publishController.errors.message = "Please save or cancel your changes.";
+				return;
+			}
+
 			eventBus.$emit('closeComponents');
+
 			self = this;
+
 			self.$root.$data.freeze = true; 						/* freeze the data */
-		  	self.$root.$data.sortdisabled = true;			/* disable sorting */
+		  	self.$root.$data.sortdisabled = true;					/* disable sorting */
 			this.preview = 'hidden'; 								/* hide the html-preview */
 			this.edit = true;										/* show the edit-mode */
 			this.compmarkdown = self.$root.$data.blockMarkdown;		/* get markdown data */
@@ -125,19 +138,25 @@ const contentComponent = Vue.component('content-block', {
 				this.$refs.preview.style.minHeight = "auto";
 			}
 		},
+		cancel: function()
+		{
+			self = this;
+			self.$root.$data.unsafed = false;
+			this.switchToPreviewMode();
+		},
 		switchToPreviewMode: function()
 		{
 			self = this;
-			self.$root.$data.freeze = false;						/* activate the data again */
-			self.$root.sortdisabled = false;			/* activate sorting again */
-			this.preview = 'visible';								/* show the html-preview */
-			this.edit = false;										/* hide the edit mode */
-			this.compmarkdown = '';									/* clear markdown content */
-			this.componentType = false;								/* delete the component type */
+			self.$root.$data.freeze = false;				/* activate the data again */
+			self.$root.sortdisabled = false;				/* activate sorting again */
+			this.preview = 'visible';						/* show the html-preview */
+			this.edit = false;								/* hide the edit mode */
+			this.compmarkdown = '';							/* clear markdown content */
+			this.componentType = false;						/* delete the component type */
 			self.$root.$data.blockType = false;
 			self.$root.$data.blockMarkdown = false;
 			self.$root.$data.file = false;
-			publishController.errors.message = false;				/* delete all error messages */
+			publishController.errors.message = false;		/* delete all error messages */
 			this.$refs.preview.style.minHeight = "auto";
 		},
 		freezePage: function()
@@ -216,7 +235,8 @@ const contentComponent = Vue.component('content-block', {
 		{
 			if(this.compmarkdown == undefined || this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"") == '')
 			{
-				this.switchToPreviewMode();	
+				this.$root.$data.unsafed = false;
+				this.switchToPreviewMode();
 			}
 			else
 			{
@@ -263,6 +283,7 @@ const contentComponent = Vue.component('content-block', {
 						var oldVideoID = this.$root.$data.blockMarkdown.match(/#.*? /);
 						if(this.compmarkdown.indexOf(oldVideoID[0].substring(1).trim()) !== -1)
 						{
+							this.$root.$data.unsafed = false;
 							this.activatePage();
 							this.switchToPreviewMode();	
 							return;
@@ -294,6 +315,7 @@ const contentComponent = Vue.component('content-block', {
 				{
 					if(httpStatus == 400)
 					{
+						this.$root.$data.unsafed = false;
 						self.activatePage();
 						publishController.errors.message = "Looks like you are logged out. Please login and try again.";
 					}
@@ -305,12 +327,14 @@ const contentComponent = Vue.component('content-block', {
 									
 						if(result.errors)
 						{
+							self.$root.$data.unsafed = false;
 							publishController.errors.message = result.errors.message;
 						}
 						else
 						{
 							var thisBlockType = self.$root.$data.blockType;
-
+							
+							self.$root.$data.unsafed = false;
 							self.switchToPreviewMode();
 							
 							if(self.$root.$data.blockId == 99999)
@@ -374,6 +398,7 @@ const contentComponent = Vue.component('content-block', {
 					}
 					else if(httpStatus != 200)
 					{
+						self.$root.$data.unsafed = false;
 						self.activatePage();
 						publishController.errors.message = "Sorry, something went wrong. Please refresh the page and try again.";
 					}	
@@ -405,11 +430,13 @@ const contentComponent = Vue.component('content-block', {
 			{
 				if(httpStatus == 400)
 				{
+					self.$root.$data.unsafed = false;
 					self.activatePage();
 					publishController.errors.message = "Looks like you are logged out. Please login and try again.";
 				}
 				if(response)
 				{
+					self.$root.$data.unsafed = false;
 					self.activatePage();
 					
 					var result = JSON.parse(response);
@@ -798,8 +825,9 @@ const noticeComponent = Vue.component('notice-component', {
 			this.prefix = this.getNoticePrefix(this.compmarkdown);
 
 			var lines = this.compmarkdown.match(/^.*([\n\r]+|$)/gm);
-			for (var i = 0; i < lines.length; i++) {
-			    lines[i] = lines[i].replace(/(^[\! ]+)/mg, '');
+			for (var i = 0; i < lines.length; i++)
+			{
+			    lines[i] = lines[i].replace(/(^[\! ]+(?!\[))/mg, '');
 			}
 
 			this.notice = lines.join('');
@@ -1432,11 +1460,11 @@ const imageComponent = Vue.component('image-component', {
 				}
 			}
 
-			var imgpreview = imgmarkdown.match(/\(.*?\)/);
-			if(imgpreview)
+			var imgfile = imgmarkdown.match(/\(.*?\)/);
+			if(imgfile)
 			{
-				this.imgpreview = imgpreview[0].slice(1,-1);
-				this.imgfile = this.imgpreview;
+				this.imgfile = imgfile[0].slice(1,-1);
+				this.imgpreview = this.$root.$data.root + '/' + this.imgfile;
 			}
 		}
 	},
@@ -1822,500 +1850,6 @@ const fileComponent = Vue.component('file-component', {
 	}
 })
 
-const medialib = Vue.component('medialib', {
-	props: ['parentcomponent'],
-	template: '<div class="medialib">' +
-				'<div class="mt3">' +
-					'<div class="w-30 dib v-top ph4 pv3">' +
-						'<button class="f6 link br0 ba ph3 pv2 mb2 w-100 dim white bn bg-tm-red" @click.prevent="closemedialib()">{{ \'close library\'|translate }}</button>' +	
-	                    '<div class="w-100 relative">' + 
-	                    	'<div><input v-model="search" class="w-100 border-box pa2 mb3 br0 ba b--light-silver"><svg class="icon icon-search absolute top-1 right-1 pa1 gray"><use xlink:href="#icon-search"></use></svg></div>' +
-	                    '</div>' + 
-						'<button @click.prevent="showImages()" class="link br0 ba ph3 pv2 mv2 mr1" :class="isImagesActive()">{{ \'Images\'|translate }}</button>' +
-						'<button @click.prevent="showFiles()" class="link br0 ba ph3 pv2 mv2 ml1" :class="isFilesActive()">{{ \'Files\'|translate }}</button>' +
-					'</div>' +
-					'<div class="w-70 dib v-top center">' +
-						'<div v-if="errors" class="w-95 mv3 white bg-tm-red tc f5 lh-copy pa3">{{errors}}</div>' +
-						'<transition-group name="list">' +
-							'<div class="w-29 ma3 dib v-top bg-white shadow-tm overflow-hidden" v-for="(image, index) in filteredImages" :key="image.name" v-if="showimages">' +
-								'<a href="#" @click.prevent="selectImage(image)" :style="getBackgroundImage(image)" class="link mw5 dt hide-child cover bg-center">' +
-	  								'<span class="white dtc v-mid center w-100 h-100 child bg-black-80 pa5"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> click to select</span>' +
-								'</a>' + 
-								'<div>' + 
-									'<div class="w-70 dib v-top pl3 pv3 f6 truncate"><strong>{{ image.name }}</strong></div>' + 
-									'<button @click.prevent="showImageDetails(image,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-green hover-white"><svg class="icon icon-info baseline"><use xlink:href="#icon-info"></use></svg></button>' +
-									'<button @click.prevent="deleteImage(image,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg></button>' +
-								'</div>' +
-							'</div>' +
-						'</transition-group>' +
-						'<div class="w-95 dib v-top bg-white mv3 relative" v-if="showimagedetails">' +
-							'<div class="flex flex-wrap item-start">' +
-								'<div class="w-50">' +
-									'<div class="w6 h6 bg-black-40 dtc v-mid bg-chess">' +
-										'<img :src="imagedetaildata.src_live" class="mw6 max-h6 dt center">' +
-									'</div>' +
-								'</div>' +
-								'<div class="w-50 pa3 lh-copy f7 relative">' +
-									'<div class="black-30 mt3 mb1">Name</div><div class="b">{{ imagedetaildata.name}}</div>' +
-									'<div class="black-30 mt3 mb1">URL</div><div class="b">{{ imagedetaildata.src_live}}</div>' +
-									'<div class="flex flex-wrap item-start">' + 
-										'<div class="w-50">' +
-											'<div class="black-30 mt3 mb1">Size</div><div class="b">{{ getSize(imagedetaildata.bytes) }}</div>' +
-										'</div>' +
-										'<div class="w-50">' +
-											'<div class="black-30 mt3 mb1">Dimensions</div><div class="b">{{ imagedetaildata.width }}x{{ imagedetaildata.height }} px</div>' +
-										'</div>' +
-										'<div class="w-50">' +
-											'<div class="black-30 mt3 mb1">Type</div><div class="b">{{ imagedetaildata.type }}</div>' +
-										'</div>' +
-										'<div class="w-50">' +
-											'<div class="black-30 mt3 mb1">Date</div><div class="b">{{ getDate(imagedetaildata.timestamp) }}</div>' +
-										'</div>' +
-									'</div>' +
-									'<div class="absolute w-90 bottom-0 flex justify-between">' +
-										'<button @click.prevent="selectImage(imagedetaildata)" class="w-50 mr1 pa2 link bn bg-light-gray hover-bg-tm-green hover-white"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> select</button>' +
-										'<button @click.prevent="deleteImage(imagedetaildata, detailindex)" class="w-50 ml1 pa2 link bn bg-light-gray hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg> delete</button>' +									 
-									'</div>' +
-								'</div>' +
-							'</div>' +
-							'<button class="f7 link br0 ba ph3 pv2 dim white bn bg-tm-red absolute top-0 right-0" @click.prevent="showImages()">close details</button>' +
-							'<div class="pa3">' +
-								'<h4>Image used in:</h4>' +
-								'<ul class="ma0 pa0" v-if="imagedetaildata.pages && imagedetaildata.pages.length > 0">' + 
-									'<li class="list pa1" v-for="page in imagedetaildata.pages">' + 
-										'<a class="link tm-red" :href="baseurl + page">{{ page }}</a>' + 
-									'</li>' + 
-								'</ul>' +
-								'<div v-else>No pages found.</div>'+
-							'</div>' +
-						'</div>' +
-						'<transition-group name="list">' +
-							'<div class="w-29 ma3 dib v-top bg-white shadow-tm overflow-hidden" v-for="(file, index) in filteredFiles" :key="file.name" v-if="showfiles">' +
-								'<a href="#" @click.prevent="selectFile(file)" class="w-100 link cover bg-tm-green bg-center relative dt">' +
-	  								'<div class="absolute w-100 tc white f1 top-3 h0 ttu" v-html="file.info.extension"></div>' +
-	  								'<div class="link dt hide-child w-100">' +
-	  									'<span class="white dtc v-top center w-100 h-100 child pt6 pb3 tc"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> click to select</span>' +
-									'</div>' +
-								'</a>' + 
-								'<div>' + 
-									'<div class="w-70 dib v-top pl3 pv3 f6 truncate"><strong>{{ file.name }}</strong></div>' + 
-									'<button @click.prevent="showFileDetails(file,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-green hover-white"><svg class="icon icon-info baseline"><use xlink:href="#icon-info"></use></svg></button>' +
-									'<button @click.prevent="deleteFile(file,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg></button>' +
-								'</div>' +
-							'</div>' +
-						'</transition-group>' +
-						'<div class="w-95 dib v-top bg-white mv3 relative" v-if="showfiledetails">' +
-							'<div class="flex flex-wrap item-start">' +
-								'<div class="w-50">' +
-									'<div class="w6 h6 bg-black-40 dtc v-mid bg-tm-green tc">' +
-										'<div class="w-100 dt center white f1 ttu">{{ filedetaildata.info.extension }}</div>' +
-									'</div>' +
-								'</div>' +
-								'<div class="w-50 pa3 lh-copy f7 relative">' +
-									'<div class="black-30 mt3 mb1">Name</div><div class="b">{{ filedetaildata.name}}</div>' +
-									'<div class="black-30 mt3 mb1">URL</div><div class="b">{{ filedetaildata.url}}</div>' +
-									'<div class="flex flex-wrap item-start">' + 
-										'<div class="w-50">' +
-											'<div class="black-30 mt3 mb1">Size</div><div class="b">{{ getSize(filedetaildata.bytes) }}</div>' +
-										'</div>' +
-										'<div class="w-50">' +
-											'<div class="black-30 mt3 mb1">Type</div><div class="b">{{ filedetaildata.info.extension }}</div>' +
-										'</div>' +
-										'<div class="w-50">' +
-											'<div class="black-30 mt3 mb1">Date</div><div class="b">{{ getDate(filedetaildata.timestamp) }}</div>' +
-										'</div>' +
-									'</div>' +
-									'<div class="absolute w-90 bottom-0 flex justify-between">' +
-										'<button @click.prevent="selectFile(filedetaildata)" class="w-50 mr1 pa2 link bn bg-light-gray hover-bg-tm-green hover-white"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> select</button>' +
-										'<button @click.prevent="deleteFile(filedetaildata, detailindex)" class="w-50 ml1 pa2 link bn bg-light-gray hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg> delete</button>' +
-									'</div>' +
-								'</div>' +
-							'</div>' +
-							'<button class="f7 link br0 ba ph3 pv2 dim white bn bg-tm-red absolute top-0 right-0" @click.prevent="showFiles()">close details</button>' +
-							'<div class="pa3">' +
-								'<h4>File used in:</h4>' +
-								'<ul class="ma0 pa0" v-if="filedetaildata.pages && filedetaildata.pages.length > 0">' + 
-									'<li class="list pa1" v-for="page in filedetaildata.pages">' + 
-										'<a class="link tm-red" :href="baseurl + page">{{ page }}</a>' + 
-									'</li>' + 
-								'</ul>' +
-								'<div v-else>No pages found.</div>'+
-							'</div>' +
-						'</div>' +
-					'</div>' +
-				  '</div>' +
-			  '</div>',
-	data: function(){
-		return {
-			imagedata: false,
-			showimages: true,
-			imagedetaildata: false,
-			showimagedetails: false,
-			filedata: false,
-			showfiles: false,
-			filedetaildata: false,
-			showfiledetails: false,
-			detailindex: false,
-			load: false,
-			baseurl: false,
-			search: '',
-			errors: false,
-		}
-	},
-	mounted: function(){
-		
-		if(this.parentcomponent == 'files')
-		{
-			this.showFiles();
-		}
-
-		this.errors = false;
-		var self = this;
-
-        myaxios.get('/api/v1/medialib/images',{
-        	params: {
-				'url':			document.getElementById("path").value,
-				'csrf_name': 	document.getElementById("csrf_name").value,
-				'csrf_value':	document.getElementById("csrf_value").value,
-        	}
-		})
-        .then(function (response)
-        {
-       		self.imagedata = response.data.images;
-        })
-        .catch(function (error)
-        {
-           	if(error.response)
-            {
-            	self.errors = error.response.data.errors;
-            }
-        });
-	},
-    computed: {
-        filteredImages() {
-
-			var searchimages = this.search;
-            var filteredImages = {};
-            var images = this.imagedata;
-            if(images)
-            {
-	            Object.keys(images).forEach(function(key) {
-	                var searchindex = key + ' ' + images[key].name;
-	                if(searchindex.toLowerCase().indexOf(searchimages.toLowerCase()) !== -1)
-	                {
-	                    filteredImages[key] = images[key];
-	                }
-	            });
-            }
-            return filteredImages;
-        },
-        filteredFiles() {
-
-			var searchfiles = this.search;
-            var filteredFiles = {};
-            var files = this.filedata;
-            if(files)
-            {
-	            Object.keys(files).forEach(function(key) {
-	                var searchindex = key + ' ' + files[key].name;
-	                if(searchindex.toLowerCase().indexOf(searchfiles.toLowerCase()) !== -1)
-	                {
-	                    filteredFiles[key] = files[key];
-	                }
-	            });
-            }
-            return filteredFiles;
-        }        
-    },	
-	methods: {
-		isImagesActive: function()
-		{
-			if(this.showimages)
-			{
-				return 'bg-tm-green white';
-			}
-			return 'bg-light-gray black';
-		},
-		isFilesActive: function()
-		{
-			if(this.showfiles)
-			{
-				return 'bg-tm-green white';
-			}
-			return 'bg-light-gray black';
-		},
-		closemedialib: function()
-		{
-			this.$parent.showmedialib = false;
-		},
-		getBackgroundImage: function(image)
-		{
-			return 'background-image: url(' + image.src_thumb + ');width:250px';
-		},
-		showImages: function()
-		{
-			this.errors = false;
-			this.showimages = true;
-			this.showfiles = false;
-			this.showimagedetails = false;
-			this.showfiledetails = false;
-			this.imagedetaildata = false;
-			this.detailindex = false;
-		},
-		showFiles: function()
-		{
-			this.showimages = false;
-			this.showfiles = true;
-			this.showimagedetails = false;
-			this.showfiledetails = false;
-			this.imagedetaildata = false;
-			this.filedetaildata = false;
-			this.detailindex = false;
-
-			if(!this.files)
-			{
-				this.errors = false;
-				var filesself = this;
-
-		        myaxios.get('/api/v1/medialib/files',{
-		        	params: {
-						'url':			document.getElementById("path").value,
-						'csrf_name': 	document.getElementById("csrf_name").value,
-						'csrf_value':	document.getElementById("csrf_value").value,
-		        	}
-				})
-		        .then(function (response)
-		        {
-		       		filesself.filedata = response.data.files;
-		        })
-		        .catch(function (error)
-		        {
-		           	if(error.response)
-		            {
-		            	filesself.errors = error.response.data.errors;
-		            }
-		        });
-			}
-		},
-		showImageDetails: function(image,index)
-		{
-			this.errors = false;
-			this.showimages = false;
-			this.showfiles = false;
-			this.showimagedetails = true;
-			this.detailindex = index;
-			this.baseurl = myaxios.defaults.baseURL + '/tm/content/visual';
-
-			var imageself = this;
-
-	        myaxios.get('/api/v1/image',{
-	        	params: {
-					'url':			document.getElementById("path").value,
-					'name': 		image.name,
-					'csrf_name': 	document.getElementById("csrf_name").value,
-					'csrf_value':	document.getElementById("csrf_value").value,
-	        	}
-			})
-	        .then(function (response)
-	        {
-	       		imageself.imagedetaildata = response.data.image;
-	        })
-	        .catch(function (error)
-	        {
-	           	if(error.response)
-	            {
-		            imageself.errors = error.response.data.errors;
-	            }
-	        });
-		},
-		showFileDetails: function(file,index)
-		{
-			this.errors = false;
-			this.showimages = false;
-			this.showfiles = false;
-			this.showimagedetails = false;
-			this.showfiledetails = true;
-			this.detailindex = index;
-			
-			this.baseurl = myaxios.defaults.baseURL + '/tm/content/visual';
-
-			var fileself = this;
-
-	        myaxios.get('/api/v1/file',{
-	        	params: {
-					'url':			document.getElementById("path").value,
-					'name': 		file.name,
-					'csrf_name': 	document.getElementById("csrf_name").value,
-					'csrf_value':	document.getElementById("csrf_value").value,
-	        	}
-			})
-	        .then(function (response)
-	        {
-	       		fileself.filedetaildata = response.data.file;
-	        })
-	        .catch(function (error)
-	        {
-	           	if(error.response)
-	            {
-		            fileself.errors = error.response.data.errors;
-	            }
-	        });
-		},
-		selectImage: function(image)
-		{
-			this.showImages();
-
-			if(this.parentcomponent == 'images')
-			{
-				var imgmarkdown = {target: {value: '![alt]('+ image.src_live +')' }};
-
-				this.$parent.imgfile = image.src_live;
-				this.$parent.imgpreview = image.src_live;
-				this.$parent.imgmeta = true;
-
-				this.$parent.showmedialib = false;
-
-				this.$parent.createmarkdown(image.src_live);
-/*				this.$parent.updatemarkdown(imgmarkdown, image.src_live); */
-			}
-			if(this.parentcomponent == 'files')
-			{
-				var filemarkdown = {target: {value: '[' + image.name + '](' + image.src_live +'){.tm-download}' }};
-
-				this.$parent.filemeta = true;
-				this.$parent.filetitle = image.name;
-
-				this.$parent.showmedialib = false;
-
-				this.$parent.updatemarkdown(filemarkdown, image.src_live);
-			}
-		},
-		selectFile: function(file)
-		{
-			/* if image component is open */
-			if(this.parentcomponent == 'images')
-			{
-				var imgextensions = ['png','jpg', 'jpeg', 'gif', 'svg'];
-				if(imgextensions.indexOf(file.info.extension) == -1)
-				{
-					this.errors = "you cannot insert a file into an image component";
-					return;
-				}
-				var imgmarkdown = {target: {value: '![alt]('+ file.url +')' }};
-
-				this.$parent.imgfile = file.url;
-				this.$parent.imgpreview = file.url;
-				this.$parent.imgmeta = true;
-
-				this.$parent.showmedialib = false;
-
-				this.$parent.createmarkdown(file.url);
-/*				this.$parent.updatemarkdown(imgmarkdown, file.url);*/
-			}
-			if(this.parentcomponent == 'files')
-			{
-				var filemarkdown = {target: {value: '['+ file.name +']('+ file.url +'){.tm-download file-' + file.info.extension + '}' }};
-
-				this.$parent.showmedialib = false;
-
-				this.$parent.filemeta = true;
-				this.$parent.filetitle = file.info.filename + ' (' + file.info.extension.toUpperCase() + ')';
-
-				this.$parent.updatemarkdown(filemarkdown, file.url);
-			}
-			this.showFiles();
-		},		
-		removeImage: function(index)
-		{
-			this.imagedata.splice(index,1);
-		},
-		removeFile: function(index)
-		{
-			this.filedata.splice(index,1);
-		},
-		deleteImage: function(image, index)
-		{
-			imageself = this;
-
-	        myaxios.delete('/api/v1/image',{
-	        	data: {
-					'url':			document.getElementById("path").value,
-					'name': 		image.name,
-					'index': 		index,
-					'csrf_name': 	document.getElementById("csrf_name").value,
-					'csrf_value':	document.getElementById("csrf_value").value,
-	        	}
-			})
-	        .then(function (response)
-	        {
-				imageself.showImages();
-	        	imageself.removeImage(index);
-	        })
-	        .catch(function (error)
-	        {
-	           	if(error.response)
-	            {
-		            imageself.errors = error.response.data.errors;
-	            }
-	        });
-		},
-		deleteFile: function(file, index)
-		{
-			fileself = this;
-
-	        myaxios.delete('/api/v1/file',{
-	        	data: {
-					'url':			document.getElementById("path").value,
-					'name': 		file.name,
-					'index': 		index,
-					'csrf_name': 	document.getElementById("csrf_name").value,
-					'csrf_value':	document.getElementById("csrf_value").value,
-	        	}
-			})
-	        .then(function (response)
-	        {
-		       	fileself.showFiles();
-	        	fileself.removeFile(index);
-	        })
-	        .catch(function (error)
-	        {
-	           	if(error.response)
-	            {
-		            fileself.errors = error.response.data.errors;
-	            }
-	        });
-		},
-		getDate(timestamp)
-		{
-			date = new Date(timestamp * 1000);
-			
-			datevalues = {
-			   'year': date.getFullYear(),
-			   'month': date.getMonth()+1,
-			   'day': date.getDate(),
-			   'hour': date.getHours(),
-			   'minute': date.getMinutes(),
-			   'second': date.getSeconds(),
-			};
-			return datevalues.year + '-' + datevalues.month + '-' + datevalues.day; 
-		},
-		getSize(bytes)
-		{
-		    var i = Math.floor(Math.log(bytes) / Math.log(1024)),
-		    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-		    return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
-		},
-		isChecked: function(classname)
-		{
-			if(this.imgclass == classname)
-			{
-				return ' checked';
-			}
-		},
-	},
-})
-
 
 let activeFormats = [];
 
@@ -2342,6 +1876,7 @@ let editor = new Vue({
 		blockMarkdown: false,
 		file: false,
 		freeze: false,
+		unsafed: false,
 		newBlocks: [],
 		addblock: false,
 		draftDisabled: true,
@@ -2495,7 +2030,8 @@ let editor = new Vue({
 		},
 		setData: function(event, blocktype, body)
 		{
-			// change this, not needed anymore.
+			if(this.unsafed){ return; }
+			
 			this.blockId = event.currentTarget.dataset.id;
 			this.blockMarkdown = this.markdown[this.blockId];
 			if(blocktype)

system/author/js/vue-shared.js

@@ -1,6 +1,6 @@
 Vue.component('component-image', {
 	props: ['class', 'id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
-	template: '<div class="large">' +
+	template: '<div class="large img-component">' +
 				'<label>{{ label|translate }}</label>' +
 				'<div class="flex flex-wrap item-start">' +
 					'<div class="w-50">' +
@@ -52,7 +52,7 @@ Vue.component('component-image', {
 		}
 	},
 	mounted: function(){
-		this.imgpreview = this.value;
+		this.imgpreview = myaxios.defaults.baseURL + '/' + this.value;
 	},
 	methods: {
 		update: function(value)
@@ -138,4 +138,503 @@ Vue.component('component-image', {
 			}
 		}
 	},
-})
+})
+
+const medialib = Vue.component('medialib', {
+	props: ['parentcomponent'],
+	template: '<div class="medialib">' +
+				'<div class="mt3">' +
+					'<div class="w-30 dib v-top ph4 pv3">' +
+						'<button class="f6 link br0 ba ph3 pv2 mb2 w-100 dim white bn bg-tm-red" @click.prevent="closemedialib()">{{ \'close library\'|translate }}</button>' +	
+	                    '<div class="w-100 relative">' + 
+	                    	'<div><input v-model="search" class="w-100 border-box pa2 mb3 br0 ba b--light-silver"><svg class="icon icon-search absolute top-1 right-1 pa1 gray"><use xlink:href="#icon-search"></use></svg></div>' +
+	                    '</div>' + 
+						'<button @click.prevent="showImages()" class="link br0 ba ph3 pv2 mv2 mr1" :class="isImagesActive()">{{ \'Images\'|translate }}</button>' +
+						'<button @click.prevent="showFiles()" class="link br0 ba ph3 pv2 mv2 ml1" :class="isFilesActive()">{{ \'Files\'|translate }}</button>' +
+					'</div>' +
+					'<div class="w-70 dib v-top center">' +
+						'<div v-if="errors" class="w-95 mv3 white bg-tm-red tc f5 lh-copy pa3">{{errors}}</div>' +
+						'<transition-group name="list">' +
+							'<div class="w-29 ma3 dib v-top bg-white shadow-tm overflow-hidden" v-for="(image, index) in filteredImages" :key="image.name" v-if="showimages">' +
+								'<a href="#" @click.prevent="selectImage(image)" :style="getBackgroundImage(image)" class="link mw5 dt hide-child cover bg-center">' +
+	  								'<span class="white dtc v-mid center w-100 h-100 child bg-black-80 pa5"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> click to select</span>' +
+								'</a>' + 
+								'<div>' + 
+									'<div class="w-70 dib v-top pl3 pv3 f6 truncate"><strong>{{ image.name }}</strong></div>' + 
+									'<button @click.prevent="showImageDetails(image,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-green hover-white"><svg class="icon icon-info baseline"><use xlink:href="#icon-info"></use></svg></button>' +
+									'<button @click.prevent="deleteImage(image,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg></button>' +
+								'</div>' +
+							'</div>' +
+						'</transition-group>' +
+						'<div class="w-95 dib v-top bg-white mv3 relative" v-if="showimagedetails">' +
+							'<div class="flex flex-wrap item-start">' +
+								'<div class="w-50">' +
+									'<div class="w6 h6 bg-black-40 dtc v-mid bg-chess">' +
+										'<img :src="getImageUrl(imagedetaildata.src_live)" class="mw6 max-h6 dt center">' +
+									'</div>' +
+								'</div>' +
+								'<div class="w-50 pa3 lh-copy f7 relative">' +
+									'<div class="black-30 mt3 mb1">Name</div><div class="b">{{ imagedetaildata.name}}</div>' +
+									'<div class="black-30 mt3 mb1">URL</div><div class="b">{{ getImageUrl(imagedetaildata.src_live)}}</div>' +
+									'<div class="flex flex-wrap item-start">' + 
+										'<div class="w-50">' +
+											'<div class="black-30 mt3 mb1">Size</div><div class="b">{{ getSize(imagedetaildata.bytes) }}</div>' +
+										'</div>' +
+										'<div class="w-50">' +
+											'<div class="black-30 mt3 mb1">Dimensions</div><div class="b">{{ imagedetaildata.width }}x{{ imagedetaildata.height }} px</div>' +
+										'</div>' +
+										'<div class="w-50">' +
+											'<div class="black-30 mt3 mb1">Type</div><div class="b">{{ imagedetaildata.type }}</div>' +
+										'</div>' +
+										'<div class="w-50">' +
+											'<div class="black-30 mt3 mb1">Date</div><div class="b">{{ getDate(imagedetaildata.timestamp) }}</div>' +
+										'</div>' +
+									'</div>' +
+									'<div class="absolute w-90 bottom-0 flex justify-between">' +
+										'<button @click.prevent="selectImage(imagedetaildata)" class="w-50 mr1 pa2 link bn bg-light-gray hover-bg-tm-green hover-white"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> select</button>' +
+										'<button @click.prevent="deleteImage(imagedetaildata, detailindex)" class="w-50 ml1 pa2 link bn bg-light-gray hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg> delete</button>' +									 
+									'</div>' +
+								'</div>' +
+							'</div>' +
+							'<button class="f7 link br0 ba ph3 pv2 dim white bn bg-tm-red absolute top-0 right-0" @click.prevent="showImages()">close details</button>' +
+							'<div class="pa3">' +
+								'<h4>Image used in:</h4>' +
+								'<ul class="ma0 pa0" v-if="imagedetaildata.pages && imagedetaildata.pages.length > 0">' + 
+									'<li class="list pa1" v-for="page in imagedetaildata.pages">' + 
+										'<a class="link tm-red" :href="adminurl + page">{{ page }}</a>' + 
+									'</li>' + 
+								'</ul>' +
+								'<div v-else>No pages found.</div>'+
+							'</div>' +
+						'</div>' +
+						'<transition-group name="list">' +
+							'<div class="w-29 ma3 dib v-top bg-white shadow-tm overflow-hidden" v-for="(file, index) in filteredFiles" :key="file.name" v-if="showfiles">' +
+								'<a href="#" @click.prevent="selectFile(file)" class="w-100 link cover bg-tm-green bg-center relative dt">' +
+	  								'<div class="absolute w-100 tc white f1 top-3 h0 ttu" v-html="file.info.extension"></div>' +
+	  								'<div class="link dt hide-child w-100">' +
+	  									'<span class="white dtc v-top center w-100 h-100 child pt6 pb3 tc"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> click to select</span>' +
+									'</div>' +
+								'</a>' + 
+								'<div>' + 
+									'<div class="w-70 dib v-top pl3 pv3 f6 truncate"><strong>{{ file.name }}</strong></div>' + 
+									'<button @click.prevent="showFileDetails(file,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-green hover-white"><svg class="icon icon-info baseline"><use xlink:href="#icon-info"></use></svg></button>' +
+									'<button @click.prevent="deleteFile(file,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg></button>' +
+								'</div>' +
+							'</div>' +
+						'</transition-group>' +
+						'<div class="w-95 dib v-top bg-white mv3 relative" v-if="showfiledetails">' +
+							'<div class="flex flex-wrap item-start">' +
+								'<div class="w-50">' +
+									'<div class="w6 h6 bg-black-40 dtc v-mid bg-tm-green tc">' +
+										'<div class="w-100 dt center white f1 ttu">{{ filedetaildata.info.extension }}</div>' +
+									'</div>' +
+								'</div>' +
+								'<div class="w-50 pa3 lh-copy f7 relative">' +
+									'<div class="black-30 mt3 mb1">Name</div><div class="b">{{ filedetaildata.name}}</div>' +
+									'<div class="black-30 mt3 mb1">URL</div><div class="b">{{ filedetaildata.url}}</div>' +
+									'<div class="flex flex-wrap item-start">' + 
+										'<div class="w-50">' +
+											'<div class="black-30 mt3 mb1">Size</div><div class="b">{{ getSize(filedetaildata.bytes) }}</div>' +
+										'</div>' +
+										'<div class="w-50">' +
+											'<div class="black-30 mt3 mb1">Type</div><div class="b">{{ filedetaildata.info.extension }}</div>' +
+										'</div>' +
+										'<div class="w-50">' +
+											'<div class="black-30 mt3 mb1">Date</div><div class="b">{{ getDate(filedetaildata.timestamp) }}</div>' +
+										'</div>' +
+									'</div>' +
+									'<div class="absolute w-90 bottom-0 flex justify-between">' +
+										'<button @click.prevent="selectFile(filedetaildata)" class="w-50 mr1 pa2 link bn bg-light-gray hover-bg-tm-green hover-white"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> select</button>' +
+										'<button @click.prevent="deleteFile(filedetaildata, detailindex)" class="w-50 ml1 pa2 link bn bg-light-gray hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg> delete</button>' +
+									'</div>' +
+								'</div>' +
+							'</div>' +
+							'<button class="f7 link br0 ba ph3 pv2 dim white bn bg-tm-red absolute top-0 right-0" @click.prevent="showFiles()">close details</button>' +
+							'<div class="pa3">' +
+								'<h4>File used in:</h4>' +
+								'<ul class="ma0 pa0" v-if="filedetaildata.pages && filedetaildata.pages.length > 0">' + 
+									'<li class="list pa1" v-for="page in filedetaildata.pages">' + 
+										'<a class="link tm-red" :href="adminurl + page">{{ page }}</a>' + 
+									'</li>' + 
+								'</ul>' +
+								'<div v-else>No pages found.</div>'+
+							'</div>' +
+						'</div>' +
+					'</div>' +
+				  '</div>' +
+			  '</div>',
+	data: function(){
+		return {
+			imagedata: false,
+			showimages: true,
+			imagedetaildata: false,
+			showimagedetails: false,
+			filedata: false,
+			showfiles: false,
+			filedetaildata: false,
+			showfiledetails: false,
+			detailindex: false,
+			load: false,
+			baseurl: myaxios.defaults.baseURL,
+			adminurl: false,
+			search: '',
+			errors: false,
+		}
+	},
+	mounted: function(){
+		
+		if(this.parentcomponent == 'files')
+		{
+			this.showFiles();
+		}
+
+		this.errors = false;
+		var self = this;
+
+        myaxios.get('/api/v1/medialib/images',{
+        	params: {
+				'url':			document.getElementById("path").value,
+				'csrf_name': 	document.getElementById("csrf_name").value,
+				'csrf_value':	document.getElementById("csrf_value").value,
+        	}
+		})
+        .then(function (response)
+        {
+       		self.imagedata = response.data.images;
+        })
+        .catch(function (error)
+        {
+           	if(error.response)
+            {
+            	self.errors = error.response.data.errors;
+            }
+        });
+	},
+    computed: {
+        filteredImages() {
+
+			var searchimages = this.search;
+            var filteredImages = {};
+            var images = this.imagedata;
+            if(images)
+            {
+	            Object.keys(images).forEach(function(key) {
+	                var searchindex = key + ' ' + images[key].name;
+	                if(searchindex.toLowerCase().indexOf(searchimages.toLowerCase()) !== -1)
+	                {
+	                    filteredImages[key] = images[key];
+	                }
+	            });
+            }
+            return filteredImages;
+        },
+        filteredFiles() {
+
+			var searchfiles = this.search;
+            var filteredFiles = {};
+            var files = this.filedata;
+            if(files)
+            {
+	            Object.keys(files).forEach(function(key) {
+	                var searchindex = key + ' ' + files[key].name;
+	                if(searchindex.toLowerCase().indexOf(searchfiles.toLowerCase()) !== -1)
+	                {
+	                    filteredFiles[key] = files[key];
+	                }
+	            });
+            }
+            return filteredFiles;
+        }        
+    },	
+	methods: {
+		isImagesActive: function()
+		{
+			if(this.showimages)
+			{
+				return 'bg-tm-green white';
+			}
+			return 'bg-light-gray black';
+		},
+		isFilesActive: function()
+		{
+			if(this.showfiles)
+			{
+				return 'bg-tm-green white';
+			}
+			return 'bg-light-gray black';
+		},
+		closemedialib: function()
+		{
+			this.$parent.showmedialib = false;
+		},
+		getBackgroundImage: function(image)
+		{
+			return 'background-image: url(' + this.baseurl + '/' + image.src_thumb + ');width:250px';
+		},
+		getImageUrl(relativeUrl)
+		{
+			return this.baseurl + '/' + relativeUrl;
+		},
+		showImages: function()
+		{
+			this.errors = false;
+			this.showimages = true;
+			this.showfiles = false;
+			this.showimagedetails = false;
+			this.showfiledetails = false;
+			this.imagedetaildata = false;
+			this.detailindex = false;
+		},
+		showFiles: function()
+		{
+			this.showimages = false;
+			this.showfiles = true;
+			this.showimagedetails = false;
+			this.showfiledetails = false;
+			this.imagedetaildata = false;
+			this.filedetaildata = false;
+			this.detailindex = false;
+
+			if(!this.files)
+			{
+				this.errors = false;
+				var filesself = this;
+
+		        myaxios.get('/api/v1/medialib/files',{
+		        	params: {
+						'url':			document.getElementById("path").value,
+						'csrf_name': 	document.getElementById("csrf_name").value,
+						'csrf_value':	document.getElementById("csrf_value").value,
+		        	}
+				})
+		        .then(function (response)
+		        {
+		       		filesself.filedata = response.data.files;
+		        })
+		        .catch(function (error)
+		        {
+		           	if(error.response)
+		            {
+		            	filesself.errors = error.response.data.errors;
+		            }
+		        });
+			}
+		},
+		showImageDetails: function(image,index)
+		{
+			this.errors = false;
+			this.showimages = false;
+			this.showfiles = false;
+			this.showimagedetails = true;
+			this.detailindex = index;
+			this.adminurl = myaxios.defaults.baseURL + '/tm/content/visual';
+
+			var imageself = this;
+
+	        myaxios.get('/api/v1/image',{
+	        	params: {
+					'url':			document.getElementById("path").value,
+					'name': 		image.name,
+					'csrf_name': 	document.getElementById("csrf_name").value,
+					'csrf_value':	document.getElementById("csrf_value").value,
+	        	}
+			})
+	        .then(function (response)
+	        {
+	       		imageself.imagedetaildata = response.data.image;
+	        })
+	        .catch(function (error)
+	        {
+	           	if(error.response)
+	            {
+		            imageself.errors = error.response.data.errors;
+	            }
+	        });
+		},
+		showFileDetails: function(file,index)
+		{
+			this.errors = false;
+			this.showimages = false;
+			this.showfiles = false;
+			this.showimagedetails = false;
+			this.showfiledetails = true;
+			this.detailindex = index;
+			
+			this.adminurl = myaxios.defaults.baseURL + '/tm/content/visual';
+
+			var fileself = this;
+
+	        myaxios.get('/api/v1/file',{
+	        	params: {
+					'url':			document.getElementById("path").value,
+					'name': 		file.name,
+					'csrf_name': 	document.getElementById("csrf_name").value,
+					'csrf_value':	document.getElementById("csrf_value").value,
+	        	}
+			})
+	        .then(function (response)
+	        {
+	       		fileself.filedetaildata = response.data.file;
+	        })
+	        .catch(function (error)
+	        {
+	           	if(error.response)
+	            {
+		            fileself.errors = error.response.data.errors;
+	            }
+	        });
+		},
+		selectImage: function(image)
+		{
+			this.showImages();
+
+			if(this.parentcomponent == 'images')
+			{
+				var imgmarkdown = {target: {value: '![alt]('+ image.src_live +')' }};
+
+				this.$parent.imgfile = image.src_live;
+				this.$parent.imgpreview = this.baseurl + '/' + image.src_live;
+				this.$parent.imgmeta = true;
+
+				this.$parent.showmedialib = false;
+
+				this.$parent.createmarkdown(image.src_live);
+/*				this.$parent.updatemarkdown(imgmarkdown, image.src_live); */
+			}
+			if(this.parentcomponent == 'files')
+			{
+				var filemarkdown = {target: {value: '[' + image.name + '](' + image.src_live +'){.tm-download}' }};
+
+				this.$parent.filemeta = true;
+				this.$parent.filetitle = image.name;
+
+				this.$parent.showmedialib = false;
+
+				this.$parent.updatemarkdown(filemarkdown, image.src_live);
+			}
+		},
+		selectFile: function(file)
+		{
+			/* if image component is open */
+			if(this.parentcomponent == 'images')
+			{
+				var imgextensions = ['png','jpg', 'jpeg', 'gif', 'svg', 'webp'];
+				if(imgextensions.indexOf(file.info.extension) == -1)
+				{
+					this.errors = "you cannot insert a file into an image component";
+					return;
+				}
+				var imgmarkdown = {target: {value: '![alt]('+ file.url +')' }};
+
+				this.$parent.imgfile = file.url;
+				this.$parent.imgpreview = file.url;
+				this.$parent.imgmeta = true;
+
+				this.$parent.showmedialib = false;
+
+				this.$parent.createmarkdown(file.url);
+/*				this.$parent.updatemarkdown(imgmarkdown, file.url);*/
+			}
+			if(this.parentcomponent == 'files')
+			{
+				var filemarkdown = {target: {value: '['+ file.name +']('+ file.url +'){.tm-download file-' + file.info.extension + '}' }};
+
+				this.$parent.showmedialib = false;
+
+				this.$parent.filemeta = true;
+				this.$parent.filetitle = file.info.filename + ' (' + file.info.extension.toUpperCase() + ')';
+
+				this.$parent.updatemarkdown(filemarkdown, file.url);
+			}
+			this.showFiles();
+		},		
+		removeImage: function(index)
+		{
+			this.imagedata.splice(index,1);
+		},
+		removeFile: function(index)
+		{
+			this.filedata.splice(index,1);
+		},
+		deleteImage: function(image, index)
+		{
+			imageself = this;
+
+	        myaxios.delete('/api/v1/image',{
+	        	data: {
+					'url':			document.getElementById("path").value,
+					'name': 		image.name,
+					'index': 		index,
+					'csrf_name': 	document.getElementById("csrf_name").value,
+					'csrf_value':	document.getElementById("csrf_value").value,
+	        	}
+			})
+	        .then(function (response)
+	        {
+				imageself.showImages();
+	        	imageself.removeImage(index);
+	        })
+	        .catch(function (error)
+	        {
+	           	if(error.response)
+	            {
+		            imageself.errors = error.response.data.errors;
+	            }
+	        });
+		},
+		deleteFile: function(file, index)
+		{
+			fileself = this;
+
+	        myaxios.delete('/api/v1/file',{
+	        	data: {
+					'url':			document.getElementById("path").value,
+					'name': 		file.name,
+					'index': 		index,
+					'csrf_name': 	document.getElementById("csrf_name").value,
+					'csrf_value':	document.getElementById("csrf_value").value,
+	        	}
+			})
+	        .then(function (response)
+	        {
+		       	fileself.showFiles();
+	        	fileself.removeFile(index);
+	        })
+	        .catch(function (error)
+	        {
+	           	if(error.response)
+	            {
+		            fileself.errors = error.response.data.errors;
+	            }
+	        });
+		},
+		getDate(timestamp)
+		{
+			date = new Date(timestamp * 1000);
+			
+			datevalues = {
+			   'year': date.getFullYear(),
+			   'month': date.getMonth()+1,
+			   'day': date.getDate(),
+			   'hour': date.getHours(),
+			   'minute': date.getMinutes(),
+			   'second': date.getSeconds(),
+			};
+			return datevalues.year + '-' + datevalues.month + '-' + datevalues.day; 
+		},
+		getSize(bytes)
+		{
+		    var i = Math.floor(Math.log(bytes) / Math.log(1024)),
+		    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+		    return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
+		},
+		isChecked: function(classname)
+		{
+			if(this.imgclass == classname)
+			{
+				return ' checked';
+			}
+		},
+	},
+})

system/author/layouts/layout.twig

@@ -7,8 +7,6 @@
 
 		<meta name="description" content="Configure your TYPEMILL website"/>
 
-		<base href="{{ base_url }}/">
-
 		<meta name="msapplication-TileColor" content="#F9F8F6" />
 		<meta name="msapplication-TileImage" content="{{ base_url }}/system/author/img/favicon-144.png" />
 		<link rel="icon" type="image/png" href="{{ base_url }}/system/author/img/favicon-16.png" sizes="16x16" />
@@ -21,44 +19,13 @@
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/normalize.css" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/tachyons.min.css?20200716" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/style.css?20200716" />
+
+		{{ assets.renderCSS() }}
+		
 	</head>
 	<body>
-		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-			<defs>
-				<symbol id="icon-external-link" viewBox="0 0 28 28">
-					<title>external-link</title>
-					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
-				</symbol>
-				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
-					<title>text-file</title>
-					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
-				</symbol>
-				<symbol id="icon-cog" viewBox="0 0 24 28">
-					<title>cog</title>
-					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
-				</symbol>
-				<symbol id="icon-power-off" viewBox="0 0 24 28">
-					<title>power-off</title>
-					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
-				</symbol>
-				<symbol id="icon-user" viewBox="0 0 20 28">
-					<path d="M20 21.859c0 2.281-1.5 4.141-3.328 4.141h-13.344c-1.828 0-3.328-1.859-3.328-4.141 0-4.109 1.016-8.859 5.109-8.859 1.266 1.234 2.984 2 4.891 2s3.625-0.766 4.891-2c4.094 0 5.109 4.75 5.109 8.859zM16 8c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6z"></path>
-				</symbol>
-				<symbol id="icon-group" viewBox="0 0 30 28">
-					<path d="M9.266 14c-1.625 0.047-3.094 0.75-4.141 2h-2.094c-1.563 0-3.031-0.75-3.031-2.484 0-1.266-0.047-5.516 1.937-5.516 0.328 0 1.953 1.328 4.062 1.328 0.719 0 1.406-0.125 2.078-0.359-0.047 0.344-0.078 0.688-0.078 1.031 0 1.422 0.453 2.828 1.266 4zM26 23.953c0 2.531-1.672 4.047-4.172 4.047h-13.656c-2.5 0-4.172-1.516-4.172-4.047 0-3.531 0.828-8.953 5.406-8.953 0.531 0 2.469 2.172 5.594 2.172s5.063-2.172 5.594-2.172c4.578 0 5.406 5.422 5.406 8.953zM10 4c0 2.203-1.797 4-4 4s-4-1.797-4-4 1.797-4 4-4 4 1.797 4 4zM21 10c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6zM30 13.516c0 1.734-1.469 2.484-3.031 2.484h-2.094c-1.047-1.25-2.516-1.953-4.141-2 0.812-1.172 1.266-2.578 1.266-4 0-0.344-0.031-0.688-0.078-1.031 0.672 0.234 1.359 0.359 2.078 0.359 2.109 0 3.734-1.328 4.062-1.328 1.984 0 1.937 4.25 1.937 5.516zM28 4c0 2.203-1.797 4-4 4s-4-1.797-4-4 1.797-4 4-4 4 1.797 4 4z"></path>
-				</symbol>
-				<symbol id="icon-wrench" viewBox="0 0 26 28">
-					<path d="M6 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM16.063 16.438l-10.656 10.656c-0.359 0.359-0.875 0.578-1.406 0.578s-1.047-0.219-1.422-0.578l-1.656-1.687c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.641-10.641c0.812 2.047 2.453 3.687 4.5 4.5zM25.969 9.641c0 0.516-0.187 1.156-0.359 1.656-0.984 2.781-3.656 4.703-6.609 4.703-3.859 0-7-3.141-7-7s3.141-7 7-7c1.141 0 2.625 0.344 3.578 0.984 0.156 0.109 0.25 0.25 0.25 0.438 0 0.172-0.109 0.344-0.25 0.438l-4.578 2.641v3.5l3.016 1.672c0.516-0.297 4.141-2.578 4.453-2.578s0.5 0.234 0.5 0.547z"></path>
-				</symbol>
-				<symbol id="icon-plug" viewBox="0 0 28 28">
-					<path d="M27.422 7.078c0.766 0.781 0.766 2.047 0 2.828l-6.266 6.25 2.344 2.344-2.5 2.5c-3.422 3.422-8.641 3.906-12.516 1.344l-5.656 5.656h-2.828v-2.828l5.656-5.656c-2.562-3.875-2.078-9.094 1.344-12.516l2.5-2.5 2.344 2.344 6.25-6.266c0.781-0.766 2.047-0.766 2.828 0 0.781 0.781 0.781 2.063 0 2.828l-6.25 6.266 3.656 3.656 6.266-6.25c0.781-0.781 2.047-0.781 2.828 0z"></path>
-				</symbol>
-				<symbol id="icon-paint-brush" viewBox="0 0 28 28">
-					<path d="M25.234 0c1.422 0 2.734 1.062 2.734 2.547 0 0.828-0.328 1.625-0.703 2.359-1.219 2.312-5.313 9.953-7.266 11.75-0.953 0.891-2.078 1.422-3.406 1.422-2.641 0-4.797-2.25-4.797-4.875 0-1.25 0.516-2.469 1.437-3.313l9.969-9.047c0.547-0.5 1.266-0.844 2.031-0.844zM11.031 16.156c0.812 1.578 2.297 2.766 4.016 3.219l0.016 1.109c0.094 4.453-3 7.516-7.469 7.516-5.297 0-7.594-4.219-7.594-9.016 0.578 0.391 2.594 2 3.25 2 0.391 0 0.719-0.219 0.859-0.578 1.328-3.469 3.406-4.094 6.922-4.25z"></path>
-				</symbol>
-				{{ assets.renderSvg() }}
-			</defs>
-		</svg>
+
+		{% include 'partials/symbols.twig' %}
 		
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}
@@ -79,11 +46,16 @@
 			const myaxios = axios.create();
 			myaxios.defaults.baseURL =  "{{ base_url }}";
 		</script>
+		<script src="{{ base_url }}/system/author/js/autosize.min.js?20200716"></script>
 		<script src="{{ base_url }}/system/author/js/vue.min.js?20200716"></script>
+		<script src="{{ base_url }}/system/author/js/vue-shared.js?20200716"></script>		
 		<script src="{{ base_url }}/system/author/js/author.js?20200716"></script>
 		<script src="{{ base_url }}/system/author/js/typemillutils.js?20200716"></script>
 		<script>
 			typemillUtilities.start()
 		</script>
+
+		{{ assets.renderJS() }}		
+	
 	</body>
 </html>

system/author/layouts/layoutAuth.twig

@@ -7,8 +7,6 @@
 
 		<meta name="description" content="Welcome to your new TYPEMILL website" />
 		<meta name="robots" content="noindex" />
-
-		<base href="{{ base_url }}/">		
 		
 		<meta name="msapplication-TileColor" content="#F9F8F6" />
 		<meta name="msapplication-TileImage" content="{{ base_url }}/system/author/img/favicon-144.png" />
@@ -21,34 +19,12 @@
 				
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/normalize.css" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/style.css?20200716" />
-		<link rel="stylesheet" href="{{ base_url }}/system/author/css/color-picker.min.css" />
+
+		{{ assets.renderCSS() }}
+		
 	</head>
 	<body>
-		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-			<defs>
-				<symbol id="icon-external-link" viewBox="0 0 28 28">
-					<title>external-link</title>
-					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
-				</symbol>
-				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
-					<title>text-file</title>
-					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
-				</symbol>
-				<symbol id="icon-cog" viewBox="0 0 24 28">
-					<title>cog</title>
-					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
-				</symbol>
-				<symbol id="icon-power-off" viewBox="0 0 24 28">
-					<title>power-off</title>
-					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
-				</symbol>
-				<symbol id="icon-bookmark-o" viewBox="0 0 20 28">
-					<title>bookmark-o</title>
-					<path d="M18 4h-16v19.406l8-7.672 1.391 1.328 6.609 6.344v-19.406zM18.188 2c0.234 0 0.469 0.047 0.688 0.141 0.688 0.266 1.125 0.906 1.125 1.609v20.141c0 0.703-0.438 1.344-1.125 1.609-0.219 0.094-0.453 0.125-0.688 0.125-0.484 0-0.938-0.172-1.297-0.5l-6.891-6.625-6.891 6.625c-0.359 0.328-0.812 0.516-1.297 0.516-0.234 0-0.469-0.047-0.688-0.141-0.688-0.266-1.125-0.906-1.125-1.609v-20.141c0-0.703 0.438-1.344 1.125-1.609 0.219-0.094 0.453-0.141 0.688-0.141h16.375z"></path>
-				</symbol>				
-			</defs>
-		</svg>
-
+		{% include 'partials/symbols.twig' %}
 
 		{% include 'partials/flash.twig' %}
 		<div class="main">

system/author/layouts/layoutBlank.twig

@@ -6,9 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 		<meta name="description" content="Configure your TYPEMILL website"/>
-		
-		<base href="{{ base_url }}/">
-				
+						
 		<meta name="msapplication-TileColor" content="#F9F8F6" />
 		<meta name="msapplication-TileImage" content="{{ base_url }}/system/author/img/favicon-144.png" />
 		<link rel="icon" type="image/png" href="{{ base_url }}/system/author/img/favicon-16.png" sizes="16x16" />
@@ -20,28 +18,11 @@
 
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/normalize.css" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/style.css?20200716" />
+
 	</head>
 	<body>
-		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-			<defs>
-				<symbol id="icon-external-link" viewBox="0 0 28 28">
-					<title>external-link</title>
-					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
-				</symbol>
-				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
-					<title>text-file</title>
-					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
-				</symbol>
-				<symbol id="icon-cog" viewBox="0 0 24 28">
-					<title>cog</title>
-					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
-				</symbol>
-				<symbol id="icon-power-off" viewBox="0 0 24 28">
-					<title>power-off</title>
-					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
-				</symbol>
-			</defs>
-		</svg>
+
+		{% include 'partials/symbols.twig' %}
 		
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}
@@ -54,5 +35,6 @@
 			</article>
 			<footer></footer>
 		</div>
+			
 	</body>
 </html>

system/author/layouts/layoutBlox.twig

@@ -6,9 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 		<meta name="description" content="Edit your TYPEMILL website" />
-		
-		<base href="{{ base_url }}/">
-		
+				
 		<meta name="msapplication-TileColor" content="#F9F8F6" />
 		<meta name="msapplication-TileImage" content="{{ base_url }}/system/author/img/favicon-144.png" />
 		<link rel="icon" type="image/png" href="{{ base_url }}/system/author/img/favicon-16.png" sizes="16x16" />
@@ -27,162 +25,8 @@
 
 	</head>
 	<body>
-		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-			<defs>
-
-				<symbol id="icon-external-link" viewBox="0 0 28 28">
-					<title>{{ __('EXTERNAL_LINK') }}</title>
-					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
-				</symbol>
-				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
-					<title>{{ __('TEXT_FILE') }}</title>
-					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
-				</symbol>
-				<symbol id="icon-cog" viewBox="0 0 24 28">
-					<title>{{ __('COG') }}</title>
-					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
-				</symbol>
-				<symbol id="icon-power-off" viewBox="0 0 24 28">
-					<title>{{ __('POWER_OFF') }}</title>
-					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
-				</symbol>
-				
-				<symbol id="icon-minus" viewBox="0 0 22 28">
-					<title>{{ __('DELETE') }}</title>
-					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-19c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h19c0.828 0 1.5 0.672 1.5 1.5z"></path>
-				</symbol>
-				<symbol id="icon-plus" viewBox="0 0 22 28">
-					<title>{{ __('ADD') }}</title>
-					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
-				</symbol>
-				<symbol id="icon-close" viewBox="0 0 22 28">
-					<title>{{ __('DELETE_CLOSE') }}</title>
-					<path d="M20.281 20.656c0 0.391-0.156 0.781-0.438 1.062l-2.125 2.125c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-4.594-4.594-4.594 4.594c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-2.125-2.125c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l4.594-4.594-4.594-4.594c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l2.125-2.125c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l4.594 4.594 4.594-4.594c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l2.125 2.125c0.281 0.281 0.438 0.672 0.438 1.062s-0.156 0.781-0.438 1.062l-4.594 4.594 4.594 4.594c0.281 0.281 0.438 0.672 0.438 1.062z"></path>
-				</symbol>
-				<symbol id="icon-home" viewBox="0 0 26 28">
-					<title>{{ __('HOME') }}</title>
-					<path d="M22 15.5v7.5c0 0.547-0.453 1-1 1h-6v-6h-4v6h-6c-0.547 0-1-0.453-1-1v-7.5c0-0.031 0.016-0.063 0.016-0.094l8.984-7.406 8.984 7.406c0.016 0.031 0.016 0.063 0.016 0.094zM25.484 14.422l-0.969 1.156c-0.078 0.094-0.203 0.156-0.328 0.172h-0.047c-0.125 0-0.234-0.031-0.328-0.109l-10.813-9.016-10.813 9.016c-0.109 0.078-0.234 0.125-0.375 0.109-0.125-0.016-0.25-0.078-0.328-0.172l-0.969-1.156c-0.172-0.203-0.141-0.531 0.063-0.703l11.234-9.359c0.656-0.547 1.719-0.547 2.375 0l3.813 3.187v-3.047c0-0.281 0.219-0.5 0.5-0.5h3c0.281 0 0.5 0.219 0.5 0.5v6.375l3.422 2.844c0.203 0.172 0.234 0.5 0.063 0.703z"></path>
-				</symbol>
-				<symbol id="icon-arrows-v" viewBox="0 0 12 28">
-					<title>{{ __('MOVE_VERTICAL') }}</title>
-					<path d="M11 5c0 0.547-0.453 1-1 1h-2v16h2c0.547 0 1 0.453 1 1 0 0.266-0.109 0.516-0.297 0.703l-4 4c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-4-4c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h2v-16h-2c-0.547 0-1-0.453-1-1 0-0.266 0.109-0.516 0.297-0.703l4-4c0.187-0.187 0.438-0.297 0.703-0.297s0.516 0.109 0.703 0.297l4 4c0.187 0.187 0.297 0.438 0.297 0.703z"></path>
-				</symbol>
-				<symbol id="icon-folder-o" viewBox="0 0 26 28">
-					<title>{{ __('FOLDER') }}</title>
-					<path d="M24 20.5v-11c0-0.828-0.672-1.5-1.5-1.5h-11c-0.828 0-1.5-0.672-1.5-1.5v-1c0-0.828-0.672-1.5-1.5-1.5h-5c-0.828 0-1.5 0.672-1.5 1.5v15c0 0.828 0.672 1.5 1.5 1.5h19c0.828 0 1.5-0.672 1.5-1.5zM26 9.5v11c0 1.922-1.578 3.5-3.5 3.5h-19c-1.922 0-3.5-1.578-3.5-3.5v-15c0-1.922 1.578-3.5 3.5-3.5h5c1.922 0 3.5 1.578 3.5 3.5v0.5h10.5c1.922 0 3.5 1.578 3.5 3.5z"></path>
-				</symbol>
-				<symbol id="icon-upload" viewBox="0 0 26 28">
-					<title>{{ __('UPLOAD') }}</title>
-					<path d="M20 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM24 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM26 19.5v5c0 0.828-0.672 1.5-1.5 1.5h-23c-0.828 0-1.5-0.672-1.5-1.5v-5c0-0.828 0.672-1.5 1.5-1.5h6.672c0.422 1.156 1.531 2 2.828 2h4c1.297 0 2.406-0.844 2.828-2h6.672c0.828 0 1.5 0.672 1.5 1.5zM20.922 9.375c-0.156 0.375-0.516 0.625-0.922 0.625h-4v7c0 0.547-0.453 1-1 1h-4c-0.547 0-1-0.453-1-1v-7h-4c-0.406 0-0.766-0.25-0.922-0.625-0.156-0.359-0.078-0.797 0.219-1.078l7-7c0.187-0.203 0.453-0.297 0.703-0.297s0.516 0.094 0.703 0.297l7 7c0.297 0.281 0.375 0.719 0.219 1.078z"></path>
-				</symbol>				
-				<symbol id="icon-image" viewBox="0 0 32 32">
-					<title>{{ __('IMAGE') }}</title>
-					<path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
-					<path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
-					<path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
-				</symbol>
-				<symbol id="icon-exclamation-circle" viewBox="0 0 24 28">
-					<title>{{ __('NOTICE') }}</title>
-					<path d="M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z"></path>
-				</symbol>
-				<symbol id="icon-paperclip" viewBox="0 0 22 28">
-					<title>{{ __('PAPERCLIP') }}</title>
-					<path d="M21.938 21.641c0 2.438-1.859 4.297-4.297 4.297-1.375 0-2.703-0.594-3.672-1.563l-12.141-12.125c-1.109-1.125-1.766-2.656-1.766-4.234 0-3.313 2.609-5.953 5.922-5.953 1.594 0 3.125 0.641 4.266 1.766l9.453 9.469c0.094 0.094 0.156 0.219 0.156 0.344 0 0.328-0.875 1.203-1.203 1.203-0.141 0-0.266-0.063-0.359-0.156l-9.469-9.484c-0.75-0.734-1.766-1.203-2.828-1.203-2.219 0-3.938 1.797-3.938 4 0 1.062 0.438 2.078 1.188 2.828l12.125 12.141c0.594 0.594 1.422 0.984 2.266 0.984 1.328 0 2.312-0.984 2.312-2.312 0-0.859-0.391-1.672-0.984-2.266l-9.078-9.078c-0.25-0.234-0.594-0.375-0.938-0.375-0.594 0-1.047 0.438-1.047 1.047 0 0.344 0.156 0.672 0.391 0.922l6.406 6.406c0.094 0.094 0.156 0.219 0.156 0.344 0 0.328-0.891 1.219-1.219 1.219-0.125 0-0.25-0.063-0.344-0.156l-6.406-6.406c-0.625-0.609-0.984-1.469-0.984-2.328 0-1.719 1.344-3.062 3.063-3.062 0.875 0 1.719 0.359 2.328 0.984l9.078 9.078c0.984 0.969 1.563 2.297 1.563 3.672z"></path>
-				</symbol>
-				<symbol id="icon-play" viewBox="0 0 32 32">
-					<title>{{ __('VIDEO') }}</title>
-					<path d="M30.662 5.003c-4.488-0.645-9.448-1.003-14.662-1.003s-10.174 0.358-14.662 1.003c-0.86 3.366-1.338 7.086-1.338 10.997s0.477 7.63 1.338 10.997c4.489 0.645 9.448 1.003 14.662 1.003s10.174-0.358 14.662-1.003c0.86-3.366 1.338-7.086 1.338-10.997s-0.477-7.63-1.338-10.997zM12 22v-12l10 6-10 6z"></path>
-				</symbol>
-				<symbol id="icon-quotes-left" viewBox="0 0 32 32">
-					<title>{{ __('QUOTES') }}</title>
-					<path d="M7.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.357-0.056 0.724-0.086 1.097-0.086zM25.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.358-0.056 0.724-0.086 1.097-0.086z"></path>
-				</symbol>
-				<symbol id="icon-list-numbered" viewBox="0 0 32 32">
-					<title>{{ __('NUMBERED_LIST') }}</title>
-					<path d="M12 26h20v4h-20zM12 14h20v4h-20zM12 2h20v4h-20zM6 0v8h-2v-6h-2v-2zM4 16.438v1.563h4v2h-6v-4.563l4-1.875v-1.563h-4v-2h6v4.563zM8 22v10h-6v-2h4v-2h-4v-2h4v-2h-4v-2z"></path>
-				</symbol>
-				<symbol id="icon-list2" viewBox="0 0 32 32">
-					<title>{{ __('BULLET_LIST') }}</title>
-					<path d="M12 2h20v4h-20v-4zM12 14h20v4h-20v-4zM12 26h20v4h-20v-4zM0 4c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 16c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 28c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4z"></path>
-				</symbol>
-				<symbol id="icon-link" viewBox="0 0 32 32">
-					<title>{{ ('LINK') }}</title>
-					<path d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"></path>
-					<path d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"></path>
-				</symbol>
-				<symbol id="icon-bold" viewBox="0 0 32 32">
-					<title>{{ __('BOLD') }}</title>
-					<path d="M22.121 15.145c1.172-1.392 1.879-3.188 1.879-5.145 0-4.411-3.589-8-8-8h-10v28h12c4.411 0 8-3.589 8-8 0-2.905-1.556-5.453-3.879-6.855zM12 6h3.172c1.749 0 3.172 1.794 3.172 4s-1.423 4-3.172 4h-3.172v-8zM16.969 26h-4.969v-8h4.969c1.827 0 3.313 1.794 3.313 4s-1.486 4-3.313 4z"></path>
-				</symbol>
-				<symbol id="icon-italic" viewBox="0 0 32 32">
-					<title>{{ __('ITALIC') }}</title>
-					<path d="M28 2v2h-4l-10 24h4v2h-14v-2h4l10-24h-4v-2z"></path>
-				</symbol>
-				<symbol id="icon-pagebreak" viewBox="0 0 32 32">
-					<title>{{ __('HORIZONTAL_LINE') }}</title>
-					<path d="M8 12v-12h24v12h-2v-10h-20v10zM32 18v14h-24v-14h2v12h20v-12zM16 14h4v2h-4zM10 14h4v2h-4zM22 14h4v2h-4zM28 14h4v2h-4zM0 9l6 6-6 6z"></path>
-				</symbol>
-				<symbol id="icon-table2" viewBox="0 0 32 32">
-					<title>{{ __('TABLE') }}</title>
-					<path d="M0 2v28h32v-28h-32zM12 20v-6h8v6h-8zM20 22v6h-8v-6h8zM20 6v6h-8v-6h8zM10 6v6h-8v-6h8zM2 14h8v6h-8v-6zM22 14h8v6h-8v-6zM22 12v-6h8v6h-8zM2 22h8v6h-8v-6zM22 28v-6h8v6h-8z"></path>
-				</symbol>
-				<symbol id="icon-pilcrow" viewBox="0 0 32 32">
-					<title>{{ __('PARAGRAPH') }}</title>
-					<path d="M12 0h16v4h-4v28h-4v-28h-4v28h-4v-16c-4.418 0-8-3.582-8-8s3.582-8 8-8z"></path>
-				</symbol>
-				<symbol id="icon-embed" viewBox="0 0 32 32">
-					<title>{{ __('CODE') }}</title>
-					<path d="M18 23l3 3 10-10-10-10-3 3 7 7z"></path>
-					<path d="M14 9l-3-3-10 10 10 10 3-3-7-7z"></path>
-				</symbol>
-				<symbol id="icon-header" viewBox="0 0 28 28">
-					<title>{{ __('HEADLINE') }}</title>
-					<path d="M26.281 26c-1.375 0-2.766-0.109-4.156-0.109-1.375 0-2.75 0.109-4.125 0.109-0.531 0-0.781-0.578-0.781-1.031 0-1.391 1.563-0.797 2.375-1.328 0.516-0.328 0.516-1.641 0.516-2.188l-0.016-6.109c0-0.172 0-0.328-0.016-0.484-0.25-0.078-0.531-0.063-0.781-0.063h-10.547c-0.266 0-0.547-0.016-0.797 0.063-0.016 0.156-0.016 0.313-0.016 0.484l-0.016 5.797c0 0.594 0 2.219 0.578 2.562 0.812 0.5 2.656-0.203 2.656 1.203 0 0.469-0.219 1.094-0.766 1.094-1.453 0-2.906-0.109-4.344-0.109-1.328 0-2.656 0.109-3.984 0.109-0.516 0-0.75-0.594-0.75-1.031 0-1.359 1.437-0.797 2.203-1.328 0.5-0.344 0.516-1.687 0.516-2.234l-0.016-0.891v-12.703c0-0.75 0.109-3.156-0.594-3.578-0.781-0.484-2.453 0.266-2.453-1.141 0-0.453 0.203-1.094 0.75-1.094 1.437 0 2.891 0.109 4.328 0.109 1.313 0 2.641-0.109 3.953-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.344-1.547 0.688-2.312 1.172-0.547 0.328-0.547 1.937-0.547 2.5l0.016 5c0 0.172 0 0.328 0.016 0.5 0.203 0.047 0.406 0.047 0.609 0.047h10.922c0.187 0 0.391 0 0.594-0.047 0.016-0.172 0.016-0.328 0.016-0.5l0.016-5c0-0.578 0-2.172-0.547-2.5-0.781-0.469-2.344 0.156-2.344-1.172 0-0.469 0.219-1.094 0.781-1.094 1.375 0 2.75 0.109 4.125 0.109 1.344 0 2.688-0.109 4.031-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.359-1.609 0.672-2.391 1.156-0.531 0.344-0.547 1.953-0.547 2.516l0.016 14.734c0 0.516 0.031 1.875 0.531 2.188 0.797 0.5 2.484-0.141 2.484 1.219 0 0.453-0.203 1.094-0.75 1.094z"></path>
-				</symbol>
-				<symbol id="icon-list-alt" viewBox="0 0 28 28">
-					<title>{{ __('TABLE_OF_CONTENTS') }}</title>
-					<path d="M6 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM24 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM26 21.5v-13c0-0.266-0.234-0.5-0.5-0.5h-23c-0.266 0-0.5 0.234-0.5 0.5v13c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM28 4.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"></path>
-				</symbol>
-				<symbol id="icon-dots-two-vertical" viewBox="0 0 20 20">
-					<title>{{ __('DEFINITION') }}</title>
-					<path d="M10.001 8.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2zM10.001 11.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z"></path>
-				</symbol>
-				<symbol id="icon-check" viewBox="0 0 20 20">
-					<title>{{ __('CHECK') }}</title>
-					<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
-				</symbol>
-				<symbol id="icon-cross" viewBox="0 0 20 20">
-					<title>{{ __('CROSS') }}</title>
-					<path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
-				</symbol>
-				<symbol id="icon-trash-o" viewBox="0 0 22 28">
-					<title>{{ __('TRASH') }}</title>
-					<path d="M8 11.5v9c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-9c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM12 11.5v9c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-9c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM16 11.5v9c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-9c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM18 22.813v-14.812h-14v14.812c0 0.75 0.422 1.188 0.5 1.188h13c0.078 0 0.5-0.438 0.5-1.188zM7.5 6h7l-0.75-1.828c-0.047-0.063-0.187-0.156-0.266-0.172h-4.953c-0.094 0.016-0.219 0.109-0.266 0.172zM22 6.5v1c0 0.281-0.219 0.5-0.5 0.5h-1.5v14.812c0 1.719-1.125 3.187-2.5 3.187h-13c-1.375 0-2.5-1.406-2.5-3.125v-14.875h-1.5c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h4.828l1.094-2.609c0.313-0.766 1.25-1.391 2.078-1.391h5c0.828 0 1.766 0.625 2.078 1.391l1.094 2.609h4.828c0.281 0 0.5 0.219 0.5 0.5z"></path>
-				</symbol>
-				<symbol id="icon-info" viewBox="0 0 32 32">
-					<title>{{ __('INFO') }}</title>
-					<path d="M14 9.5c0-0.825 0.675-1.5 1.5-1.5h1c0.825 0 1.5 0.675 1.5 1.5v1c0 0.825-0.675 1.5-1.5 1.5h-1c-0.825 0-1.5-0.675-1.5-1.5v-1z"></path>
-					<path d="M20 24h-8v-2h2v-6h-2v-2h6v8h2z"></path>
-					<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
-				</symbol>				
-				<symbol id="icon-eye-blocked" viewBox="0 0 32 32">
-					<title>{{ __('EYE_BLOCKED') }}</title>
-					<path d="M29.561 0.439c-0.586-0.586-1.535-0.586-2.121 0l-6.318 6.318c-1.623-0.492-3.342-0.757-5.122-0.757-6.979 0-13.028 4.064-16 10 1.285 2.566 3.145 4.782 5.407 6.472l-4.968 4.968c-0.586 0.586-0.586 1.535 0 2.121 0.293 0.293 0.677 0.439 1.061 0.439s0.768-0.146 1.061-0.439l27-27c0.586-0.586 0.586-1.536 0-2.121zM13 10c1.32 0 2.44 0.853 2.841 2.037l-3.804 3.804c-1.184-0.401-2.037-1.521-2.037-2.841 0-1.657 1.343-3 3-3zM3.441 16c1.197-1.891 2.79-3.498 4.67-4.697 0.122-0.078 0.246-0.154 0.371-0.228-0.311 0.854-0.482 1.776-0.482 2.737 0 1.715 0.54 3.304 1.459 4.607l-1.904 1.904c-1.639-1.151-3.038-2.621-4.114-4.323z"></path>
-					<path d="M24 13.813c0-0.849-0.133-1.667-0.378-2.434l-10.056 10.056c0.768 0.245 1.586 0.378 2.435 0.378 4.418 0 8-3.582 8-8z"></path>
-					<path d="M25.938 9.062l-2.168 2.168c0.040 0.025 0.079 0.049 0.118 0.074 1.88 1.199 3.473 2.805 4.67 4.697-1.197 1.891-2.79 3.498-4.67 4.697-2.362 1.507-5.090 2.303-7.889 2.303-1.208 0-2.403-0.149-3.561-0.439l-2.403 2.403c1.866 0.671 3.873 1.036 5.964 1.036 6.978 0 13.027-4.064 16-10-1.407-2.81-3.504-5.2-6.062-6.938z"></path>
-				</symbol>
-				<symbol id="icon-search" viewBox="0 0 26 28">
-					<title>{{ __('SEARCH') }}</title>
-					<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z"></path>
-				</symbol>
-				<symbol id="icon-cancel-circle" viewBox="0 0 32 32">
-					<title>{{ __('CANCEL') }}</title>
-					<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
-					<path d="M21 8l-5 5-5-5-3 3 5 5-5 5 3 3 5-5 5 5 3-3-5-5 5-5z"></path>
-				</symbol>			
-				{{ assets.renderSvg() }}
-			</defs>
-		</svg>
+		
+		{% include 'partials/symbols.twig' %}
 
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}

system/author/layouts/layoutEditor.twig

@@ -7,8 +7,6 @@
 
 		<meta name="description" content="Edit your TYPEMILL website" />
 		
-		<base href="{{ base_url }}/">
-		
 		<meta name="msapplication-TileColor" content="#F9F8F6" />
 		<meta name="msapplication-TileImage" content="{{ base_url }}/system/author/img/favicon-144.png" />
 		<link rel="icon" type="image/png" href="{{ base_url }}/system/author/img/favicon-16.png" sizes="16x16" />
@@ -25,50 +23,8 @@
 
 	</head>
 	<body>
-		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-			<defs>
-				<symbol id="icon-external-link" viewBox="0 0 28 28">
-					<title>{{ __('EXTERNAL_LINK') }}</title>
-					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
-				</symbol>
-				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
-					<title>{{ __('TEXT_FILE') }}</title>
-					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
-				</symbol>
-				<symbol id="icon-minus" viewBox="0 0 22 28">
-					<title>{{ __('DELETE') }}</title>
-					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-19c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h19c0.828 0 1.5 0.672 1.5 1.5z"></path>
-				</symbol>
-				<symbol id="icon-plus" viewBox="0 0 22 28">
-					<title>{{ __('ADD') }}</title>
-					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
-				</symbol>
-				<symbol id="icon-close" viewBox="0 0 22 28">
-					<title>{{ __('DELETE_CLOSE') }}</title>
-					<path d="M20.281 20.656c0 0.391-0.156 0.781-0.438 1.062l-2.125 2.125c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-4.594-4.594-4.594 4.594c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-2.125-2.125c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l4.594-4.594-4.594-4.594c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l2.125-2.125c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l4.594 4.594 4.594-4.594c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l2.125 2.125c0.281 0.281 0.438 0.672 0.438 1.062s-0.156 0.781-0.438 1.062l-4.594 4.594 4.594 4.594c0.281 0.281 0.438 0.672 0.438 1.062z"></path>
-				</symbol>
-				<symbol id="icon-home" viewBox="0 0 26 28">
-					<title>{{ __('HOME') }}</title>
-					<path d="M22 15.5v7.5c0 0.547-0.453 1-1 1h-6v-6h-4v6h-6c-0.547 0-1-0.453-1-1v-7.5c0-0.031 0.016-0.063 0.016-0.094l8.984-7.406 8.984 7.406c0.016 0.031 0.016 0.063 0.016 0.094zM25.484 14.422l-0.969 1.156c-0.078 0.094-0.203 0.156-0.328 0.172h-0.047c-0.125 0-0.234-0.031-0.328-0.109l-10.813-9.016-10.813 9.016c-0.109 0.078-0.234 0.125-0.375 0.109-0.125-0.016-0.25-0.078-0.328-0.172l-0.969-1.156c-0.172-0.203-0.141-0.531 0.063-0.703l11.234-9.359c0.656-0.547 1.719-0.547 2.375 0l3.813 3.187v-3.047c0-0.281 0.219-0.5 0.5-0.5h3c0.281 0 0.5 0.219 0.5 0.5v6.375l3.422 2.844c0.203 0.172 0.234 0.5 0.063 0.703z"></path>
-				</symbol>
-				<symbol id="icon-arrows-v" viewBox="0 0 12 28">
-					<title>{{ __('MOVE_VERTICAL') }}</title>
-					<path d="M11 5c0 0.547-0.453 1-1 1h-2v16h2c0.547 0 1 0.453 1 1 0 0.266-0.109 0.516-0.297 0.703l-4 4c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-4-4c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h2v-16h-2c-0.547 0-1-0.453-1-1 0-0.266 0.109-0.516 0.297-0.703l4-4c0.187-0.187 0.438-0.297 0.703-0.297s0.516 0.109 0.703 0.297l4 4c0.187 0.187 0.297 0.438 0.297 0.703z"></path>
-				</symbol>
-				<symbol id="icon-folder-o" viewBox="0 0 26 28">
-					<title>{{ __('FOLDER') }}</title>
-					<path d="M24 20.5v-11c0-0.828-0.672-1.5-1.5-1.5h-11c-0.828 0-1.5-0.672-1.5-1.5v-1c0-0.828-0.672-1.5-1.5-1.5h-5c-0.828 0-1.5 0.672-1.5 1.5v15c0 0.828 0.672 1.5 1.5 1.5h19c0.828 0 1.5-0.672 1.5-1.5zM26 9.5v11c0 1.922-1.578 3.5-3.5 3.5h-19c-1.922 0-3.5-1.578-3.5-3.5v-15c0-1.922 1.578-3.5 3.5-3.5h5c1.922 0 3.5 1.578 3.5 3.5v0.5h10.5c1.922 0 3.5 1.578 3.5 3.5z"></path>
-				</symbol>
-				<symbol id="icon-cog" viewBox="0 0 24 28">
-					<title>{{ __('COG') }}</title>
-					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
-				</symbol>
-				<symbol id="icon-power-off" viewBox="0 0 24 28">
-					<title>{{ __('POWER_OFF') }}</title>
-					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
-				</symbol>
-			</defs>
-		</svg>
+
+		{% include 'partials/symbols.twig' %}
 
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}

system/author/partials/fields.twig

@@ -9,7 +9,7 @@
 		<div class="img-upload flex flex-wrap item-start">
 			<div class="w-50">
 				<div class="w6 h6 bg-black-40 dtc v-mid bg-chess">
-					<img src="{{ settings[object][itemName][field.name] }}" class="function-img-src mw6 max-h6 dt center">
+					<img src="{{ base_url }}/{{ settings[object][itemName][field.name] }}" class="function-img-src mw6 max-h6 dt center">
 				</div>
 			</div>
 			<div class="w-50 ph3 lh-copy f6 relative">

system/author/partials/navi.twig

@@ -10,9 +10,9 @@
 				<a href="{{ base_url }}/tm/content/{{ settings.editor }}"{{ content ? ' class="active"' : '' }}><svg class="icon baseline icon-file-text-o"><use xlink:href="#icon-file-text-o"></use></svg><span class="nav-label"> {{ __('Content') }}</span></a></li><li>
 			{% endif %}
 			{% if acl.isAllowed(get_role(), 'system', 'view') %}
-				<a href="{{ path_for('settings.show') }}"{{ content ? '' : 'class="active"' }}><svg class="icon baseline icon-cog"><use xlink:href="#icon-cog"></use></svg><span class="nav-label"> {{ __('Settings') }}</span></a></li><li>
+				<a href="{{ path_for('settings.show') }}"{{ content ? '' : ' class="active"' }}><svg class="icon baseline icon-cog"><use xlink:href="#icon-cog"></use></svg><span class="nav-label"> {{ __('Settings') }}</span></a></li><li>
 			{% else %}
-				<a href="{{ path_for('user.account') }}"{{ content ? '' : 'class="active"' }}><svg class="icon icon-cog baseline"><use xlink:href="#icon-cog"></use></svg><span class="nav-label">  {{ __('Settings') }}</span></a></li><li>			
+				<a href="{{ path_for('user.account') }}"{{ content ? '' : ' class="active"' }}><svg class="icon icon-cog baseline"><use xlink:href="#icon-cog"></use></svg><span class="nav-label">  {{ __('Settings') }}</span></a></li><li>			
 			{% endif %}
 			<a href="{{ base_url }}"><svg class="icon baseline icon-external-link"><use xlink:href="#icon-external-link"></use></svg><span class="nav-label"> {{ __('View Site') }}</span></a></li><li>
 			<a href="{{ path_for('auth.logout') }}"><svg class="icon baseline icon-power-off"><use xlink:href="#icon-power-off"></use></svg><span class="nav-label">  {{ __('Logout') }}</span></a></li>

system/author/partials/symbols.twig

@@ -0,0 +1,173 @@
+		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+			<defs>
+				<symbol id="icon-external-link" viewBox="0 0 28 28">
+					<title>{{ __('EXTERNAL_LINK') }}</title>
+					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
+				</symbol>
+				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
+					<title>{{ __('TEXT_FILE') }}</title>
+					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
+				</symbol>
+				<symbol id="icon-cog" viewBox="0 0 24 28">
+					<title>{{ __('COG') }}</title>
+					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
+				</symbol>
+				<symbol id="icon-power-off" viewBox="0 0 24 28">
+					<title>{{ __('POWER_OFF') }}</title>
+					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
+				</symbol>
+				<symbol id="icon-minus" viewBox="0 0 22 28">
+					<title>{{ __('DELETE') }}</title>
+					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-19c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h19c0.828 0 1.5 0.672 1.5 1.5z"></path>
+				</symbol>
+				<symbol id="icon-plus" viewBox="0 0 22 28">
+					<title>{{ __('ADD') }}</title>
+					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
+				</symbol>
+				<symbol id="icon-close" viewBox="0 0 22 28">
+					<title>{{ __('DELETE_CLOSE') }}</title>
+					<path d="M20.281 20.656c0 0.391-0.156 0.781-0.438 1.062l-2.125 2.125c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-4.594-4.594-4.594 4.594c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-2.125-2.125c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l4.594-4.594-4.594-4.594c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l2.125-2.125c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l4.594 4.594 4.594-4.594c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l2.125 2.125c0.281 0.281 0.438 0.672 0.438 1.062s-0.156 0.781-0.438 1.062l-4.594 4.594 4.594 4.594c0.281 0.281 0.438 0.672 0.438 1.062z"></path>
+				</symbol>
+				<symbol id="icon-home" viewBox="0 0 26 28">
+					<title>{{ __('HOME') }}</title>
+					<path d="M22 15.5v7.5c0 0.547-0.453 1-1 1h-6v-6h-4v6h-6c-0.547 0-1-0.453-1-1v-7.5c0-0.031 0.016-0.063 0.016-0.094l8.984-7.406 8.984 7.406c0.016 0.031 0.016 0.063 0.016 0.094zM25.484 14.422l-0.969 1.156c-0.078 0.094-0.203 0.156-0.328 0.172h-0.047c-0.125 0-0.234-0.031-0.328-0.109l-10.813-9.016-10.813 9.016c-0.109 0.078-0.234 0.125-0.375 0.109-0.125-0.016-0.25-0.078-0.328-0.172l-0.969-1.156c-0.172-0.203-0.141-0.531 0.063-0.703l11.234-9.359c0.656-0.547 1.719-0.547 2.375 0l3.813 3.187v-3.047c0-0.281 0.219-0.5 0.5-0.5h3c0.281 0 0.5 0.219 0.5 0.5v6.375l3.422 2.844c0.203 0.172 0.234 0.5 0.063 0.703z"></path>
+				</symbol>
+				<symbol id="icon-arrows-v" viewBox="0 0 12 28">
+					<title>{{ __('MOVE_VERTICAL') }}</title>
+					<path d="M11 5c0 0.547-0.453 1-1 1h-2v16h2c0.547 0 1 0.453 1 1 0 0.266-0.109 0.516-0.297 0.703l-4 4c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-4-4c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h2v-16h-2c-0.547 0-1-0.453-1-1 0-0.266 0.109-0.516 0.297-0.703l4-4c0.187-0.187 0.438-0.297 0.703-0.297s0.516 0.109 0.703 0.297l4 4c0.187 0.187 0.297 0.438 0.297 0.703z"></path>
+				</symbol>
+				<symbol id="icon-folder-o" viewBox="0 0 26 28">
+					<title>{{ __('FOLDER') }}</title>
+					<path d="M24 20.5v-11c0-0.828-0.672-1.5-1.5-1.5h-11c-0.828 0-1.5-0.672-1.5-1.5v-1c0-0.828-0.672-1.5-1.5-1.5h-5c-0.828 0-1.5 0.672-1.5 1.5v15c0 0.828 0.672 1.5 1.5 1.5h19c0.828 0 1.5-0.672 1.5-1.5zM26 9.5v11c0 1.922-1.578 3.5-3.5 3.5h-19c-1.922 0-3.5-1.578-3.5-3.5v-15c0-1.922 1.578-3.5 3.5-3.5h5c1.922 0 3.5 1.578 3.5 3.5v0.5h10.5c1.922 0 3.5 1.578 3.5 3.5z"></path>
+				</symbol>
+				<symbol id="icon-upload" viewBox="0 0 26 28">
+					<title>{{ __('UPLOAD') }}</title>
+					<path d="M20 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM24 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM26 19.5v5c0 0.828-0.672 1.5-1.5 1.5h-23c-0.828 0-1.5-0.672-1.5-1.5v-5c0-0.828 0.672-1.5 1.5-1.5h6.672c0.422 1.156 1.531 2 2.828 2h4c1.297 0 2.406-0.844 2.828-2h6.672c0.828 0 1.5 0.672 1.5 1.5zM20.922 9.375c-0.156 0.375-0.516 0.625-0.922 0.625h-4v7c0 0.547-0.453 1-1 1h-4c-0.547 0-1-0.453-1-1v-7h-4c-0.406 0-0.766-0.25-0.922-0.625-0.156-0.359-0.078-0.797 0.219-1.078l7-7c0.187-0.203 0.453-0.297 0.703-0.297s0.516 0.094 0.703 0.297l7 7c0.297 0.281 0.375 0.719 0.219 1.078z"></path>
+				</symbol>				
+				<symbol id="icon-image" viewBox="0 0 32 32">
+					<title>{{ __('IMAGE') }}</title>
+					<path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
+					<path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
+					<path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
+				</symbol>
+				<symbol id="icon-exclamation-circle" viewBox="0 0 24 28">
+					<title>{{ __('NOTICE') }}</title>
+					<path d="M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z"></path>
+				</symbol>
+				<symbol id="icon-paperclip" viewBox="0 0 22 28">
+					<title>{{ __('PAPERCLIP') }}</title>
+					<path d="M21.938 21.641c0 2.438-1.859 4.297-4.297 4.297-1.375 0-2.703-0.594-3.672-1.563l-12.141-12.125c-1.109-1.125-1.766-2.656-1.766-4.234 0-3.313 2.609-5.953 5.922-5.953 1.594 0 3.125 0.641 4.266 1.766l9.453 9.469c0.094 0.094 0.156 0.219 0.156 0.344 0 0.328-0.875 1.203-1.203 1.203-0.141 0-0.266-0.063-0.359-0.156l-9.469-9.484c-0.75-0.734-1.766-1.203-2.828-1.203-2.219 0-3.938 1.797-3.938 4 0 1.062 0.438 2.078 1.188 2.828l12.125 12.141c0.594 0.594 1.422 0.984 2.266 0.984 1.328 0 2.312-0.984 2.312-2.312 0-0.859-0.391-1.672-0.984-2.266l-9.078-9.078c-0.25-0.234-0.594-0.375-0.938-0.375-0.594 0-1.047 0.438-1.047 1.047 0 0.344 0.156 0.672 0.391 0.922l6.406 6.406c0.094 0.094 0.156 0.219 0.156 0.344 0 0.328-0.891 1.219-1.219 1.219-0.125 0-0.25-0.063-0.344-0.156l-6.406-6.406c-0.625-0.609-0.984-1.469-0.984-2.328 0-1.719 1.344-3.062 3.063-3.062 0.875 0 1.719 0.359 2.328 0.984l9.078 9.078c0.984 0.969 1.563 2.297 1.563 3.672z"></path>
+				</symbol>
+				<symbol id="icon-play" viewBox="0 0 32 32">
+					<title>{{ __('VIDEO') }}</title>
+					<path d="M30.662 5.003c-4.488-0.645-9.448-1.003-14.662-1.003s-10.174 0.358-14.662 1.003c-0.86 3.366-1.338 7.086-1.338 10.997s0.477 7.63 1.338 10.997c4.489 0.645 9.448 1.003 14.662 1.003s10.174-0.358 14.662-1.003c0.86-3.366 1.338-7.086 1.338-10.997s-0.477-7.63-1.338-10.997zM12 22v-12l10 6-10 6z"></path>
+				</symbol>
+				<symbol id="icon-quotes-left" viewBox="0 0 32 32">
+					<title>{{ __('QUOTES') }}</title>
+					<path d="M7.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.357-0.056 0.724-0.086 1.097-0.086zM25.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.358-0.056 0.724-0.086 1.097-0.086z"></path>
+				</symbol>
+				<symbol id="icon-list-numbered" viewBox="0 0 32 32">
+					<title>{{ __('NUMBERED_LIST') }}</title>
+					<path d="M12 26h20v4h-20zM12 14h20v4h-20zM12 2h20v4h-20zM6 0v8h-2v-6h-2v-2zM4 16.438v1.563h4v2h-6v-4.563l4-1.875v-1.563h-4v-2h6v4.563zM8 22v10h-6v-2h4v-2h-4v-2h4v-2h-4v-2z"></path>
+				</symbol>
+				<symbol id="icon-list2" viewBox="0 0 32 32">
+					<title>{{ __('BULLET_LIST') }}</title>
+					<path d="M12 2h20v4h-20v-4zM12 14h20v4h-20v-4zM12 26h20v4h-20v-4zM0 4c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 16c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 28c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4z"></path>
+				</symbol>
+				<symbol id="icon-link" viewBox="0 0 32 32">
+					<title>{{ ('LINK') }}</title>
+					<path d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"></path>
+					<path d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"></path>
+				</symbol>
+				<symbol id="icon-bold" viewBox="0 0 32 32">
+					<title>{{ __('BOLD') }}</title>
+					<path d="M22.121 15.145c1.172-1.392 1.879-3.188 1.879-5.145 0-4.411-3.589-8-8-8h-10v28h12c4.411 0 8-3.589 8-8 0-2.905-1.556-5.453-3.879-6.855zM12 6h3.172c1.749 0 3.172 1.794 3.172 4s-1.423 4-3.172 4h-3.172v-8zM16.969 26h-4.969v-8h4.969c1.827 0 3.313 1.794 3.313 4s-1.486 4-3.313 4z"></path>
+				</symbol>
+				<symbol id="icon-italic" viewBox="0 0 32 32">
+					<title>{{ __('ITALIC') }}</title>
+					<path d="M28 2v2h-4l-10 24h4v2h-14v-2h4l10-24h-4v-2z"></path>
+				</symbol>
+				<symbol id="icon-pagebreak" viewBox="0 0 32 32">
+					<title>{{ __('HORIZONTAL_LINE') }}</title>
+					<path d="M8 12v-12h24v12h-2v-10h-20v10zM32 18v14h-24v-14h2v12h20v-12zM16 14h4v2h-4zM10 14h4v2h-4zM22 14h4v2h-4zM28 14h4v2h-4zM0 9l6 6-6 6z"></path>
+				</symbol>
+				<symbol id="icon-table2" viewBox="0 0 32 32">
+					<title>{{ __('TABLE') }}</title>
+					<path d="M0 2v28h32v-28h-32zM12 20v-6h8v6h-8zM20 22v6h-8v-6h8zM20 6v6h-8v-6h8zM10 6v6h-8v-6h8zM2 14h8v6h-8v-6zM22 14h8v6h-8v-6zM22 12v-6h8v6h-8zM2 22h8v6h-8v-6zM22 28v-6h8v6h-8z"></path>
+				</symbol>
+				<symbol id="icon-pilcrow" viewBox="0 0 32 32">
+					<title>{{ __('PARAGRAPH') }}</title>
+					<path d="M12 0h16v4h-4v28h-4v-28h-4v28h-4v-16c-4.418 0-8-3.582-8-8s3.582-8 8-8z"></path>
+				</symbol>
+				<symbol id="icon-embed" viewBox="0 0 32 32">
+					<title>{{ __('CODE') }}</title>
+					<path d="M18 23l3 3 10-10-10-10-3 3 7 7z"></path>
+					<path d="M14 9l-3-3-10 10 10 10 3-3-7-7z"></path>
+				</symbol>
+				<symbol id="icon-header" viewBox="0 0 28 28">
+					<title>{{ __('HEADLINE') }}</title>
+					<path d="M26.281 26c-1.375 0-2.766-0.109-4.156-0.109-1.375 0-2.75 0.109-4.125 0.109-0.531 0-0.781-0.578-0.781-1.031 0-1.391 1.563-0.797 2.375-1.328 0.516-0.328 0.516-1.641 0.516-2.188l-0.016-6.109c0-0.172 0-0.328-0.016-0.484-0.25-0.078-0.531-0.063-0.781-0.063h-10.547c-0.266 0-0.547-0.016-0.797 0.063-0.016 0.156-0.016 0.313-0.016 0.484l-0.016 5.797c0 0.594 0 2.219 0.578 2.562 0.812 0.5 2.656-0.203 2.656 1.203 0 0.469-0.219 1.094-0.766 1.094-1.453 0-2.906-0.109-4.344-0.109-1.328 0-2.656 0.109-3.984 0.109-0.516 0-0.75-0.594-0.75-1.031 0-1.359 1.437-0.797 2.203-1.328 0.5-0.344 0.516-1.687 0.516-2.234l-0.016-0.891v-12.703c0-0.75 0.109-3.156-0.594-3.578-0.781-0.484-2.453 0.266-2.453-1.141 0-0.453 0.203-1.094 0.75-1.094 1.437 0 2.891 0.109 4.328 0.109 1.313 0 2.641-0.109 3.953-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.344-1.547 0.688-2.312 1.172-0.547 0.328-0.547 1.937-0.547 2.5l0.016 5c0 0.172 0 0.328 0.016 0.5 0.203 0.047 0.406 0.047 0.609 0.047h10.922c0.187 0 0.391 0 0.594-0.047 0.016-0.172 0.016-0.328 0.016-0.5l0.016-5c0-0.578 0-2.172-0.547-2.5-0.781-0.469-2.344 0.156-2.344-1.172 0-0.469 0.219-1.094 0.781-1.094 1.375 0 2.75 0.109 4.125 0.109 1.344 0 2.688-0.109 4.031-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.359-1.609 0.672-2.391 1.156-0.531 0.344-0.547 1.953-0.547 2.516l0.016 14.734c0 0.516 0.031 1.875 0.531 2.188 0.797 0.5 2.484-0.141 2.484 1.219 0 0.453-0.203 1.094-0.75 1.094z"></path>
+				</symbol>
+				<symbol id="icon-list-alt" viewBox="0 0 28 28">
+					<title>{{ __('TABLE_OF_CONTENTS') }}</title>
+					<path d="M6 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM24 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM26 21.5v-13c0-0.266-0.234-0.5-0.5-0.5h-23c-0.266 0-0.5 0.234-0.5 0.5v13c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM28 4.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"></path>
+				</symbol>
+				<symbol id="icon-dots-two-vertical" viewBox="0 0 20 20">
+					<title>{{ __('DEFINITION') }}</title>
+					<path d="M10.001 8.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2zM10.001 11.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z"></path>
+				</symbol>
+				<symbol id="icon-check" viewBox="0 0 20 20">
+					<title>{{ __('CHECK') }}</title>
+					<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
+				</symbol>
+				<symbol id="icon-cross" viewBox="0 0 20 20">
+					<title>{{ __('CROSS') }}</title>
+					<path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
+				</symbol>
+				<symbol id="icon-trash-o" viewBox="0 0 22 28">
+					<title>{{ __('TRASH') }}</title>
+					<path d="M8 11.5v9c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-9c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM12 11.5v9c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-9c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM16 11.5v9c0 0.281-0.219 0.5-0.5 0.5h-1c-0.281 0-0.5-0.219-0.5-0.5v-9c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM18 22.813v-14.812h-14v14.812c0 0.75 0.422 1.188 0.5 1.188h13c0.078 0 0.5-0.438 0.5-1.188zM7.5 6h7l-0.75-1.828c-0.047-0.063-0.187-0.156-0.266-0.172h-4.953c-0.094 0.016-0.219 0.109-0.266 0.172zM22 6.5v1c0 0.281-0.219 0.5-0.5 0.5h-1.5v14.812c0 1.719-1.125 3.187-2.5 3.187h-13c-1.375 0-2.5-1.406-2.5-3.125v-14.875h-1.5c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h4.828l1.094-2.609c0.313-0.766 1.25-1.391 2.078-1.391h5c0.828 0 1.766 0.625 2.078 1.391l1.094 2.609h4.828c0.281 0 0.5 0.219 0.5 0.5z"></path>
+				</symbol>
+				<symbol id="icon-info" viewBox="0 0 32 32">
+					<title>{{ __('INFO') }}</title>
+					<path d="M14 9.5c0-0.825 0.675-1.5 1.5-1.5h1c0.825 0 1.5 0.675 1.5 1.5v1c0 0.825-0.675 1.5-1.5 1.5h-1c-0.825 0-1.5-0.675-1.5-1.5v-1z"></path>
+					<path d="M20 24h-8v-2h2v-6h-2v-2h6v8h2z"></path>
+					<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
+				</symbol>				
+				<symbol id="icon-eye-blocked" viewBox="0 0 32 32">
+					<title>{{ __('EYE_BLOCKED') }}</title>
+					<path d="M29.561 0.439c-0.586-0.586-1.535-0.586-2.121 0l-6.318 6.318c-1.623-0.492-3.342-0.757-5.122-0.757-6.979 0-13.028 4.064-16 10 1.285 2.566 3.145 4.782 5.407 6.472l-4.968 4.968c-0.586 0.586-0.586 1.535 0 2.121 0.293 0.293 0.677 0.439 1.061 0.439s0.768-0.146 1.061-0.439l27-27c0.586-0.586 0.586-1.536 0-2.121zM13 10c1.32 0 2.44 0.853 2.841 2.037l-3.804 3.804c-1.184-0.401-2.037-1.521-2.037-2.841 0-1.657 1.343-3 3-3zM3.441 16c1.197-1.891 2.79-3.498 4.67-4.697 0.122-0.078 0.246-0.154 0.371-0.228-0.311 0.854-0.482 1.776-0.482 2.737 0 1.715 0.54 3.304 1.459 4.607l-1.904 1.904c-1.639-1.151-3.038-2.621-4.114-4.323z"></path>
+					<path d="M24 13.813c0-0.849-0.133-1.667-0.378-2.434l-10.056 10.056c0.768 0.245 1.586 0.378 2.435 0.378 4.418 0 8-3.582 8-8z"></path>
+					<path d="M25.938 9.062l-2.168 2.168c0.040 0.025 0.079 0.049 0.118 0.074 1.88 1.199 3.473 2.805 4.67 4.697-1.197 1.891-2.79 3.498-4.67 4.697-2.362 1.507-5.090 2.303-7.889 2.303-1.208 0-2.403-0.149-3.561-0.439l-2.403 2.403c1.866 0.671 3.873 1.036 5.964 1.036 6.978 0 13.027-4.064 16-10-1.407-2.81-3.504-5.2-6.062-6.938z"></path>
+				</symbol>
+				<symbol id="icon-search" viewBox="0 0 26 28">
+					<title>{{ __('SEARCH') }}</title>
+					<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z"></path>
+				</symbol>
+				<symbol id="icon-cancel-circle" viewBox="0 0 32 32">
+					<title>{{ __('CANCEL') }}</title>
+					<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
+					<path d="M21 8l-5 5-5-5-3 3 5 5-5 5 3 3 5-5 5 5 3-3-5-5 5-5z"></path>
+				</symbol>
+				<symbol id="icon-bookmark-o" viewBox="0 0 20 28">
+					<title>bookmark-o</title>
+					<path d="M18 4h-16v19.406l8-7.672 1.391 1.328 6.609 6.344v-19.406zM18.188 2c0.234 0 0.469 0.047 0.688 0.141 0.688 0.266 1.125 0.906 1.125 1.609v20.141c0 0.703-0.438 1.344-1.125 1.609-0.219 0.094-0.453 0.125-0.688 0.125-0.484 0-0.938-0.172-1.297-0.5l-6.891-6.625-6.891 6.625c-0.359 0.328-0.812 0.516-1.297 0.516-0.234 0-0.469-0.047-0.688-0.141-0.688-0.266-1.125-0.906-1.125-1.609v-20.141c0-0.703 0.438-1.344 1.125-1.609 0.219-0.094 0.453-0.141 0.688-0.141h16.375z"></path>
+				</symbol>
+				<symbol id="icon-user" viewBox="0 0 20 28">
+					<path d="M20 21.859c0 2.281-1.5 4.141-3.328 4.141h-13.344c-1.828 0-3.328-1.859-3.328-4.141 0-4.109 1.016-8.859 5.109-8.859 1.266 1.234 2.984 2 4.891 2s3.625-0.766 4.891-2c4.094 0 5.109 4.75 5.109 8.859zM16 8c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6z"></path>
+				</symbol>
+				<symbol id="icon-group" viewBox="0 0 30 28">
+					<path d="M9.266 14c-1.625 0.047-3.094 0.75-4.141 2h-2.094c-1.563 0-3.031-0.75-3.031-2.484 0-1.266-0.047-5.516 1.937-5.516 0.328 0 1.953 1.328 4.062 1.328 0.719 0 1.406-0.125 2.078-0.359-0.047 0.344-0.078 0.688-0.078 1.031 0 1.422 0.453 2.828 1.266 4zM26 23.953c0 2.531-1.672 4.047-4.172 4.047h-13.656c-2.5 0-4.172-1.516-4.172-4.047 0-3.531 0.828-8.953 5.406-8.953 0.531 0 2.469 2.172 5.594 2.172s5.063-2.172 5.594-2.172c4.578 0 5.406 5.422 5.406 8.953zM10 4c0 2.203-1.797 4-4 4s-4-1.797-4-4 1.797-4 4-4 4 1.797 4 4zM21 10c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6zM30 13.516c0 1.734-1.469 2.484-3.031 2.484h-2.094c-1.047-1.25-2.516-1.953-4.141-2 0.812-1.172 1.266-2.578 1.266-4 0-0.344-0.031-0.688-0.078-1.031 0.672 0.234 1.359 0.359 2.078 0.359 2.109 0 3.734-1.328 4.062-1.328 1.984 0 1.937 4.25 1.937 5.516zM28 4c0 2.203-1.797 4-4 4s-4-1.797-4-4 1.797-4 4-4 4 1.797 4 4z"></path>
+				</symbol>
+				<symbol id="icon-wrench" viewBox="0 0 26 28">
+					<path d="M6 23c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM16.063 16.438l-10.656 10.656c-0.359 0.359-0.875 0.578-1.406 0.578s-1.047-0.219-1.422-0.578l-1.656-1.687c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.641-10.641c0.812 2.047 2.453 3.687 4.5 4.5zM25.969 9.641c0 0.516-0.187 1.156-0.359 1.656-0.984 2.781-3.656 4.703-6.609 4.703-3.859 0-7-3.141-7-7s3.141-7 7-7c1.141 0 2.625 0.344 3.578 0.984 0.156 0.109 0.25 0.25 0.25 0.438 0 0.172-0.109 0.344-0.25 0.438l-4.578 2.641v3.5l3.016 1.672c0.516-0.297 4.141-2.578 4.453-2.578s0.5 0.234 0.5 0.547z"></path>
+				</symbol>
+				<symbol id="icon-plug" viewBox="0 0 28 28">
+					<path d="M27.422 7.078c0.766 0.781 0.766 2.047 0 2.828l-6.266 6.25 2.344 2.344-2.5 2.5c-3.422 3.422-8.641 3.906-12.516 1.344l-5.656 5.656h-2.828v-2.828l5.656-5.656c-2.562-3.875-2.078-9.094 1.344-12.516l2.5-2.5 2.344 2.344 6.25-6.266c0.781-0.766 2.047-0.766 2.828 0 0.781 0.781 0.781 2.063 0 2.828l-6.25 6.266 3.656 3.656 6.266-6.25c0.781-0.781 2.047-0.781 2.828 0z"></path>
+				</symbol>
+				<symbol id="icon-paint-brush" viewBox="0 0 28 28">
+					<path d="M25.234 0c1.422 0 2.734 1.062 2.734 2.547 0 0.828-0.328 1.625-0.703 2.359-1.219 2.312-5.313 9.953-7.266 11.75-0.953 0.891-2.078 1.422-3.406 1.422-2.641 0-4.797-2.25-4.797-4.875 0-1.25 0.516-2.469 1.437-3.313l9.969-9.047c0.547-0.5 1.266-0.844 2.031-0.844zM11.031 16.156c0.812 1.578 2.297 2.766 4.016 3.219l0.016 1.109c0.094 4.453-3 7.516-7.469 7.516-5.297 0-7.594-4.219-7.594-9.016 0.578 0.391 2.594 2 3.25 2 0.391 0 0.719-0.219 0.859-0.578 1.328-3.469 3.406-4.094 6.922-4.25z"></path>
+				</symbol>							
+				{{ assets.renderSvg() }}
+			</defs>
+		</svg>

system/author/settings/blank.twig

@@ -8,7 +8,10 @@
 		<section class="settings">
 			{{ content }}
 		</section>
-	
+
+		<input id="path" type="hidden" value="{{ item.urlRel }}" required readonly />
+		{{ csrf_field() | raw }}
+
 	</div>
 
 {% endblock %}

system/author/settings/system.twig

@@ -147,7 +147,46 @@
 							</label>
 
 						{% endfor %}
-					</div>					
+					</div>
+					<hr>
+					<header class="headline">
+						<h2>{{ __('Developer') }}</h2>
+						<p>The following options are only for developers and experienced administrators. Only change the options if you really understand them. For example: Never activate the error reporting for a live website, use this option only for bug-fixing.</p>
+					</header>
+					<div class="large{{ errors.settings.displayErrorDetails ? ' error' : '' }}">
+						<label for="settings[displayErrorDetails]">{{ __('Error Reporting') }}</label>
+						<label class="control-group">{{ __('Display Application Errors') }}
+							<input name="settings[displayErrorDetails]" type="checkbox" {% if (settings.displayErrorDetails or old.settings.displayErrorDetails) %} checked {% endif %}>
+							<span class="checkmark"></span>
+						</label>
+					</div>
+					<div class="medium{{ errors.settings.twigcache ? ' error' : '' }}">
+						<label for="settings[twigcache]">{{ __('Twig Cache') }}</label>
+						<label class="control-group">{{ __('Activate Cache for Twig Templates') }}
+							<input name="settings[twigcache]" type="checkbox" {% if (settings.twigcache or old.settings.twigcache) %} checked {% endif %}>
+							<span class="checkmark"></span>
+						</label>
+					</div>
+					<div class="medium">
+						<div class="label">{{ __('Delete all cache files') }}</div>
+						<button id="clearcache" class="link bg-tm-green white dim bn br1 ph3 pv2 f6">Clear Cache</button><div id="cacheresult" class="dib ph3 pv2"></div>
+					</div>
+					<div class="medium{{ errors.settings.images.live.width ? ' error' : '' }}">
+						<label for="imagewidth">{{ __('Standard width for images') }}</label>
+						<input type="text" name="settings[images][live][width]" id="imagewidth" value="{{ old.settings.images.live.width ? old.settings.images.live.width : settings.images.live.width }}" title="{{ __('Use a valid number') }}" />
+						<div class="description">This applies only for future images in the content area.</div>
+						{% if errors.settings.images.live.width %}
+							<span class="error">{{ errors.settings.images.live.width | first }}</span>
+						{% endif %}
+					</div>
+					<div class="medium{{ errors.settings.images.live.height ? ' error' : '' }}">
+						<label for="imageheight">{{ __('Standard height for images') }}</label>
+						<input type="text" name="settings[images][live][height]" id="imageheight" value="{{ old.settings.images.live.height ? old.settings.images.live.height : settings.images.live.height }}" title="{{ __('Use a valid number') }}" />
+						<div class="description">If you add a value for the height, then the image will be cropped.</div>
+						{% if errors.settings.images.live.height %}
+							<span class="error">{{ errors.settings.images.live.height | first }}</span>
+						{% endif %}
+					</div>
 				</fieldset>
 			</section>
 			<input type="submit" value="{{ __('Save All Settings') }}" />

system/system.php

@@ -149,6 +149,8 @@ $container['dispatcher'] = function($container) use ($dispatcher)
 # delete username and password from uri
 $uri = $container['request']->getUri()->withUserInfo('');
 
+define("TM_BASE_URL", $uri->getBaseUrl());
+
 /********************************
 * ADD ASSET-FUNCTION FOR TWIG	*
 ********************************/
@@ -224,8 +226,10 @@ $container['view'] = function ($container) use ($uri)
 {
 	$path = array($container->get('settings')['themePath'], $container->get('settings')['authorPath']);
 	
+	$cache = ( isset($container->get('settings')['twigcache']) && $container->get('settings')['twigcache'] ) ? $container->get('settings')['rootPath'] . '/cache/twig' : false;
+
     $view = new \Slim\Views\Twig( $path, [
-		'cache' => false,
+		'cache' => $cache,
 		'autoescape' => false,
 		'debug' => true
     ]);

themes/cyanine/404.twig

@@ -4,18 +4,18 @@
 
 {% block content %}
 
-<section class="bg-secondary w-100 dib tc bt bl br bb b--primary">
+<section class="w-100 dib tc bt bl br bb">
 
 	<div class="mw7 pb7 ph3 center">
 		<header class="mt6">
-			<h1 class="f-large f-headline-ns lh-title mv2 pt5-ns {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">Not Found</h1>
+			<h1 class="f-large f-headline-ns lh-title mv2 pt5-ns">Not Found</h1>
 		</header>
 
 		<div class="f5 f4-ns fw3 lh-copy">
 			<p>Sorry, but we did not find the page that you are looking for.</p>
 		</div>
 
-		<a class="link bg-primary white dim ph4 pv3 mt3 dib" href="{{ base_url }}">Home</a>
+		<a class="button link dim ph4 pv3 mt3 dib" href="{{ base_url }}">Home</a>
 
 	</div>
 

themes/cyanine/css/style.css

@@ -76,7 +76,10 @@ article h6{	font-size: 1em; font-style: italic; font-weight:300; margin: 1em 0 0
 article .h1, article .h2, article .h3, article .h4, article .h5, article .h6{
 	height: auto; /* fix for tachyons */
 }
-hr{}
+hr{
+	border: none;
+	border-top: 1px solid;
+}
 ol{}
 footer ul{ padding-left:1em; }
 li{}
@@ -114,7 +117,10 @@ a, a:link, a:visited, a:focus, a:hover, a:active, button{
 	transition: all .15s ease!important;
 	transition-property: color, background-color, text-shadow, border;
 }
-
+article a:hover, article a:focus, article a:active,
+footer a:hover, footer a:focus, footer a:active{ 
+	text-decoration: none;
+}
 /* Fix background for hightlight plugin */
 code.hljs{ background: transparent; }
 
@@ -180,12 +186,12 @@ ul.TOC,.TOC ul{
 	text-decoration: none;
 	display: inline-block;
 	width: 100%;
-	border-bottom: 1px dashed lightseagreen;
+	border-bottom: 1px dashed;
 	line-height: 1em;
 	margin: .3em 0;
 }
 .TOC li a:hover,.TOC li a:focus,.TOC li a:active{
-	border-bottom: 1px solid lightseagreen;
+	border-bottom: 1px solid;
 }
 .TOC li a:after{
 	content: '\203A'; 
@@ -199,14 +205,10 @@ ul.TOC,.TOC ul{
 .notice1 {
     margin: 1em 0;
     padding: 10px 1em;
-    background-color: #ffded4;
-    border-left: 4px solid #f65a3c;	
 }
 .notice2 {
     margin: 1em 0;
     padding: 10px 1em;
-    background-color: #fff3d4;
-    border-left: 4px solid #f6b73c;
 }
 .notice3,
 .notice4,
@@ -310,6 +312,15 @@ button.play-video::after {
 	content: ' ';
 }
 
+.landingpageinfo h2{
+	font-size: 2.25rem;
+}
+.landingpageinfo h3{
+	font-size: 1.5rem;
+}
+.landingpageinfo h4{
+	font-size: 1.25rem;
+}
 
 /************************************
 * 		TACHYONS ADDITIONS 			*

themes/cyanine/cyanine.yaml

@@ -18,6 +18,14 @@ settings:
 forms:
   fields:
 
+    layoutsize:
+      type: select
+      label: Layout Size
+      options:
+        standard: Standard
+        large: Large
+        full: Full Width
+
     landingpage:
       type: checkbox
       checkboxlabel: Activate a landingpage
@@ -30,6 +38,15 @@ forms:
           type: number
           label: Position of Intro Segment
           description: Use 0 to disable the section
+        introTitle:
+          type: text
+          label: Title for your landingpage intro
+          placeholder: Typemill
+          description: Leave empty to use the title of your base content page.
+        introMarkdown:
+          type: textarea
+          label: Text for your landingpage intro (use markdown)
+          description: Leave empty to use the content of your base content page.
         introButtonLink:
           type: text
           label: Link for startbutton
@@ -247,76 +264,137 @@ forms:
       fields:
         font:
           type: select
-          label: Basic font-family
-          description: All fonts are system fonts with (fallbacks) if the font is not installed
-          options: 
-            serif: serif
-            sans-serif-tm: sans-serif
-            courier: courier (sans-serif)
-            helvetica: helvetica (sans-serif)
-            avenir: avenir (sans-serif)
-            athelas: athelas (serif) 
-            georgia: georgia (serif)
-            times: times (serif)
-            bodoni: bodoni (serif)
-            calisto: calisto (serif)
-            garamond: garamond (serif)
-            baskerville: baskerville (serif)
+          label: General font-family
+          description: All fonts are system fonts with fallbacks
+          options:
+            BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif: sans-serif
+            georgia,times,serif: serif
+            courier,sans-serif: courier (sans-serif)
+            helvetica,sans-serif: helvetica (sans-serif)
+            avenir,sans-serif: avenir (sans-serif)
+            athelas,serif: athelas (serif) 
+            georgia,serif: georgia (serif)
+            times,serif: times (serif)
+            bodoni,serif: bodoni (serif)
+            calisto,serif: calisto (serif)
+            garamond,serif: garamond (serif)
+            baskerville,serif: baskerville (serif)
         fontheadline:
           type: select
           label: Font-family for headlines
-          description: All fonts are system fonts with (fallbacks) if the font is not installed
-          options: 
-            serif: serif
-            sans-serif-tm: sans-serif
+          description: All fonts are system fonts with fallbacks
+          options:
+            BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif: sans-serif
+            georgia,times,serif: serif
+            courier,sans-serif: courier (sans-serif)
+            helvetica,sans-serif: helvetica (sans-serif)
+            avenir,sans-serif: avenir (sans-serif)
+            athelas,serif: athelas (serif) 
+            georgia,serif: georgia (serif)
+            times,serif: times (serif)
+            bodoni,serif: bodoni (serif)
+            calisto,serif: calisto (serif)
+            garamond,serif: garamond (serif)
+            baskerville,serif: baskerville (serif)
         fontnavi:
           type: select
           label: Font-family for navigations
-          description: All fonts are system fonts with (fallbacks) if the font is not installed
-          options: 
-            serif: serif
-            sans-serif-tm: sans-serif
-            courier: courier (sans-serif)
-            helvetica: helvetica (sans-serif)
-            avenir: avenir (sans-serif)
-            athelas: athelas (serif) 
-            georgia: georgia (serif)
-            times: times (serif)
-            bodoni: bodoni (serif)
-            calisto: calisto (serif)
-            garamond: garamond (serif)
-            baskerville: baskerville (serif)
+          description: All fonts are system fonts with fallbacks
+          options:
+            BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif: sans-serif
+            georgia,times,serif: serif
+            courier,sans-serif: courier (sans-serif)
+            helvetica,sans-serif: helvetica (sans-serif)
+            avenir,sans-serif: avenir (sans-serif)
+            athelas,serif: athelas (serif) 
+            georgia,serif: georgia (serif)
+            times,serif: times (serif)
+            bodoni,serif: bodoni (serif)
+            calisto,serif: calisto (serif)
+            garamond,serif: garamond (serif)
+            baskerville,serif: baskerville (serif)
     fieldsetColors:
       type: fieldset
       legend: Colors
       fields:
         brandcolorprimary:
           type: text
-          label: Primary brand color
+          label: Background color for body
           placeholder: 'leightseagreen'
-          description: Used for the body background and borders
-        brandcolorsecondary:
-          type: text
-          label: Secondary brand color
-          placeholder: '#f7f7f7'
-          description: Used for content background, font-colors on hover and more
+          fieldsize: half
         fontcolorprimary:
           type: text
-          label: Primary font color
-          placeholder: 'lightseagreen'
-          description: Used for text
-        fontcolorsecondary:
+          label: Font color for body
+          placeholder: 'white'
+          fieldsize: half
+        newsbackground:
           type: text
-          label: Secondary font color
+          label: Background color for news-box
+          placeholder: 'white'
+          fieldsize: half
+        newscolor:
+          type: text
+          label: Font color for news-box
+          placeholder: '#333'
+          fieldsize: half
+        brandcolortertiary:
+          type: text
+          label: Background color for buttons
+          placeholder: 'lightseagreen'
+          fieldsize: half
+        fontcolortertiary:
+          type: text
+          label: Font color for buttons
           placeholder: '#F7F7F7'
-          description: Used as contrary color for hovers in navigation and buttons
+          fieldsize: half
+        bordercolortertiary:
+          type: text
+          label: Border color for buttons
+          placeholder: '#F7F7F7'
+          fieldsize: half
         fontcolorlink:
           type: text
-          label: text-links
+          label: Font color for content links
           placeholder: '#007F7F'
-          description: Used for links, check contrast for a11y.        
+          fieldsize: half
+        brandcolorsecondary:
+          type: text
+          label: Background color for content
+          placeholder: '#f7f7f7'
+          fieldsize: half
+        fontcolorsecondary:
+          type: text
+          label: Font color for content
+          placeholder: '#333'
+          fieldsize: half
+        codebackground:
+          type: text
+          label: Background color for code
+          placeholder: '#ddd'
+          fieldsize: half
+        codecolor:
+          type: text
+          label: Font color for code
+          placeholder: '#333'
+          fieldsize: half
+        contentnavihoverbackground:
+          type: text
+          label: Background color for hover of content navigation
+          placeholder: 'lightseagreen'
+          fieldsize: half
+        contentnavihovercolor:
+          type: text
+          label: Font color for hover of content navigation
+          placeholder: 'white'
+          fieldsize: half
         thinbordercolor:
           type: text
           label: Thin border color
           placeholder: 'lightgray'
-          description: Used for thin borders in navigations and tables
+          description: Used for content navigation, table and horizontal line
+          fieldsize: half
+        noticecolors:
+          type: checkbox
+          label: Color for notices
+          checkboxlabel: Use grayscale color schema for notices
+          fieldsize: half

themes/cyanine/home/landingpageContrast.twig

@@ -1,9 +1,9 @@
-	<section class="bg-primary white w-100 dib tc bl br bb b--primary">
+	<section class="landingpagecontrast w-100 dib tc bl br bb">
 
 		<div class="mw7 pv6 ph3 center">
-			<h2 class="f2 {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ settings.themes.cyanine.contrastTitle }}</h2>
+			<h2 class="f2">{{ settings.themes.cyanine.contrastTitle }}</h2>
 			<p class="f5 f4-ns fw3 lh-copy">{{ settings.themes.cyanine.contrastText }}</p>
-			<a class="link ba b--white bg-primary white dim ph4 pv3 mt3 dib {{ settings.themes.cyanine.fontnavi|default('tm-sans-serif') }}" href="{{ settings.themes.cyanine.contrastLink }}">{{ settings.themes.cyanine.contrastLabel }}</a>
+			<a class="button link ba dim ph4 pv3 mt3 dib" href="{{ settings.themes.cyanine.contrastLink }}">{{ settings.themes.cyanine.contrastLabel }}</a>
 		</div>
 
 	</section>

themes/cyanine/home/landingpageInfo.twig

@@ -1,6 +1,6 @@
-	<section class="bg-secondary w-100 dib tc bl br bb b--primary">
+	<section class="landingpageinfo w-100 dib tc bl br bb">
 		
-		<div class="mw7 pv6 ph3 center">
+		<div class="f5 f4-ns mw7 pv6 ph3 center">
 			
 			{{ markdown(settings.themes.cyanine.infoMarkdown) }}
 

themes/cyanine/home/landingpageIntro.twig

@@ -1,17 +1,25 @@
-	<section class="bg-secondary w-100 dib tc bt bl br bb b--primary">
+	<section class="landingpageintro w-100 dib tc bt bl br bb">
 
 		<div class="mw7 pb7 ph3 center">
 			<header class="mt6">
-				<h1 class="f-large f-headline-ns lh-title mv2 pt5-ns {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ title }}</h1>
+				{% if settings.themes.cyanine.introTitle %}
+					<h1 class="f-large f-headline-ns lh-title mv2 pt5-ns">{{ settings.themes.cyanine.introTitle }}</h1>
+				{% else %}
+					<h1 class="f-large f-headline-ns lh-title mv2 pt5-ns">{{ title }}</h1>
+				{% endif %}
 			</header>
 
 			<div class="f5 f4-ns fw3 lh-copy">
-				{{ content }}
+				{% if settings.themes.cyanine.introMarkdown %}
+					{{ markdown(settings.themes.cyanine.introMarkdown) }}
+				{% else %}
+					{{ content }}
+				{% endif %}
 			</div>
 
 			{% if settings.themes.cyanine.introButtonLink %}
 
-				<a class="link bg-primary white dim ph4 pv3 mt3 dib {{ settings.themes.cyanine.fontnavi|default('tm-sans-serif') }}" href="{{ settings.themes.cyanine.introButtonLink }}">{{ settings.themes.cyanine.introButtonLabel }}</a>
+				<a class="button link dim ph4 pv3 mt3 ba dib" href="{{ settings.themes.cyanine.introButtonLink }}">{{ settings.themes.cyanine.introButtonLabel }}</a>
 
 			{% endif %}
 

themes/cyanine/home/landingpageNavi.twig

@@ -1,9 +1,9 @@
-	<section class="bg-secondary w-100 dib tc bl br bb b--primary">
+	<section class="landingpagenavi w-100 dib tc bl br bb">
 		
 		<div class="mw7 pv6 ph3 center">
 
-			<h2 class="f2 {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ settings.themes.cyanine.naviTitle }}</h2>
-			<nav class="cy-nav f5 f4-l fw3">
+			<h2 class="f2">{{ settings.themes.cyanine.naviTitle }}</h2>
+			<nav class="navigation f5 f4-l fw3">
 				{% include 'partials/navigationFlat.twig' with {'flatnavi': navigation, 'navidepth': settings.themes.cyanine.naviDepth } %}
 			</nav>
 

themes/cyanine/home/landingpageNews.twig

@@ -1,8 +1,8 @@
-	<section class="bg-secondary w-100 dib tc bl br bb b--primary">
+	<section class="landingpagenews w-100 dib tc bl br bb">
 		
 		<div class="mw8 pv6 ph3 center">
 
-			<h2 class="f2 {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ settings.themes.cyanine.newsHeadline }}</h2>
+			<h2 class="f2">{{ settings.themes.cyanine.newsHeadline }}</h2>
 
 			{% set pagelist = getPageList(navigation, settings.themes.cyanine.newsFolder, base_url) %}
 
@@ -14,13 +14,13 @@
 
 						{% set page = getPageMeta(settings, element) %}
 
-						<li class="db list tl pa0 w-100 mh0 mv2 mh2-l bg-white">
-							<a class="link dark-gray mv4" href="{{ element.urlAbs }}">
+						<li class="db list tl pa0 w-100 mh0 mv2 mh2-l shadow-2-hover">
+							<a class="link mv4 dim" href="{{ element.urlAbs }}">
 								<div class="db h4-5 overflow-hidden">
 									<img class="db w-100" src="{{ page.meta.heroimage }}" alt="{{ page.meta.heroimagealt }}">
 								</div>
 								<div class="pa2 ph3-ns pb3-ns">
-									<h3 class="{{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ page.meta.title }}</h3>
+									<h3>{{ page.meta.title }}</h3>
 									<p class="f5 lh-copy">{{ page.meta.description|length > 80 ? page.meta.description|slice(0, 81)|split(' ')|slice(0, -1)|join(' ') ~ '…' : page.meta.description }}</p>
 								</div>
 							</a>
@@ -39,15 +39,15 @@
 						{% set post = getPageMeta(settings, element) %}
 						{% set date = element.order[0:4] ~ '-' ~ element.order[4:2] ~ '-' ~ element.order[6:2] %}
 
-						<li class="db list tl pa0 w-100 mh0 mv2 mh2-l bg-white shadow-2-hover">
+						<li class="db list tl pa0 w-100 mh0 mv2 mh2-l shadow-2-hover">
 
-							<a class="link dark-gray mv4" href="{{ element.urlAbs }}">
+							<a class="link mv4 dim" href="{{ element.urlAbs }}">
 								<div class="db h4-5 overflow-hidden">
 									<img class="db w-100" src="{{ post.meta.heroimage }}" alt="{{ post.meta.heroimagealt }}">
 								</div>
 								<div class="pa2 ph3-ns pb3-ns">
-									<h3 class="{{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ post.meta.title }}</h3>
-									<small class="f6 gray"><time datetime="{{date}}">{{ date | date("d.m.Y") }}</time> | {{ post.meta.author }}</small>
+									<h3>{{ post.meta.title }}</h3>
+									<small class="f6"><time datetime="{{date}}">{{ date | date("d.m.Y") }}</time> | {{ post.meta.author }}</small>
 									<p class="f5 lh-copy">{{ post.meta.description|length > 80 ? post.meta.description|slice(0, 81)|split(' ')|slice(0, -1)|join(' ') ~ '…' : post.meta.description }}</p>
 								</div>
 							</a>
@@ -59,7 +59,7 @@
 
 			{% endif %}	
 			
-			<a href="{{ settings.themes.cyanine.newsFolder }}" class="dib link pa3 ma1 dark-gray hover-white hover-bg-dark-gray ba b--dark-gray">{{ settings.themes.cyanine.newsLabel }}</a>
+			<a href="{{ settings.themes.cyanine.newsFolder }}" class="button link dim dib pa3 ma1 ba">{{ settings.themes.cyanine.newsLabel }}</a>
 
 		</div>
 

themes/cyanine/home/landingpageTeaser.twig

@@ -1,15 +1,15 @@
-	<section class="bg-secondary w-100 dib tc bl br bb b--primary">
+	<section class="landingpageteaser w-100 dib tc bl br bb">
 		
 		<div class="mw7 pv6 ph3 center flex-m flex-l justify-between">
 			<div class="mw5 center ml0-l mr0-l mv4 dib">
-				<h2 class="f2 {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ settings.themes.cyanine.teaser1title }}</h2>
+				<h2 class="f2">{{ settings.themes.cyanine.teaser1title }}</h2>
 				<p class="f5 f4-ns fw3 lh-copy">{{ settings.themes.cyanine.teaser1text }}</p>
-				<a href="{{ settings.themes.cyanine.teaser1link }}" class="w-100 dib link pa3 ma1 dark-gray hover-white hover-bg-dark-gray ba b--dark-gray {{ settings.themes.cyanine.fontnavi|default('tm-sans-serif') }}">{{ settings.themes.cyanine.teaser1label }}</a>
+				<a href="{{ settings.themes.cyanine.teaser1link }}" class="button link dim w-100 dib pa3 ma1 ba">{{ settings.themes.cyanine.teaser1label }}</a>
 			</div>
 			<div class="mw5 center ml0-l mr0-l mv4 dib">
-				<h2 class="f2 {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}">{{ settings.themes.cyanine.teaser2title }}</h2>
+				<h2 class="f2">{{ settings.themes.cyanine.teaser2title }}</h2>
 				<p class="f5 f4-ns fw3 lh-copy">{{ settings.themes.cyanine.teaser2text }}</p>
-				<a href="{{ settings.themes.cyanine.teaser2link }}" class="w-100 dib link pa3 ma1 dark-gray hover-white hover-bg-dark-gray ba b--dark-gray {{ settings.themes.cyanine.fontnavi|default('tm-sans-serif') }}">{{ settings.themes.cyanine.teaser2label }}</a>
+				<a href="{{ settings.themes.cyanine.teaser2link }}" class="button link dim w-100 dib pa3 ma1 ba">{{ settings.themes.cyanine.teaser2label }}</a>
 			</div>
 		</div>
 

themes/cyanine/layout.twig

@@ -9,8 +9,6 @@
 		<meta name="author" content="{{ metatabs.meta.author }}" />
 		<meta name="generator" content="TYPEMILL" />
 		<meta name="msapplication-TileColor" content="#F9F8F6" />
-
-		<base href="{{ base_url }}/">
 		
 		{% if favicon %}
 			<meta name="msapplication-TileColor" content="#F9F8F6" />
@@ -23,15 +21,17 @@
 			<link rel="apple-touch-icon" sizes="180x180" href="{{ base_url }}/media/files/favicon-180.png" />
 		{% endif %}
 		
-		<link rel="canonical" href="{{ base_url }}{{ item.urlAbs }}" />
+		<link rel="canonical" href="{{ item.urlAbs }}" />
 		
 		<meta property="og:site_name" content="{{ settings.title }}">
 		<meta property="og:title" content="{{ title }}">
 		<meta property="og:description" content="{{ metatabs.meta.description }}">
 		<meta property="og:type" content="article">
 		<meta property="og:url" content="{{ item.urlAbs }}">
-		<meta property="og:image" content="{{ image.img_url }}">
-		<meta name="twitter:image:alt" content="{{ image.img_alt }}">
+		{% if image.img_url %}
+			<meta property="og:image" content="{{ image.img_url }}">
+			<meta name="twitter:image:alt" content="{{ image.img_alt }}">
+		{% endif %}
 		<meta name="twitter:card" content="summary_large_image">		
 
 		{% block stylesheets %}
@@ -39,69 +39,174 @@
 			<link rel="stylesheet" href="{{ base_url }}/themes/cyanine/css/style.css" />
 			
 			<style>
-				.f-link,a.tm-download::before, 
-				article a, article a:link, article a:visited,
-				footer a, footer a:link, footer a:visited{ 
-					color: {{ settings.themes.cyanine.fontcolorlink|default('#007F7F') }};
+
+				/*******************
+				**  LAYOUT SIZES  **
+				*******************/
+			
+				{% if settings.themes.cyanine.layoutsize == 'large' %}
+					@media screen and (min-width: 50em){
+						.grid-container{
+							max-width: 82rem;
+							grid-template-columns: 25% 75%;
+						}
+						.grid-main{
+							max-width: 56rem;
+							margin: auto;
+						}
+					}
+				{% elseif settings.themes.cyanine.layoutsize == 'full' %}
+					@media screen and (min-width: 70em){
+						.grid-container{
+							max-width: 100%;
+							grid-template-columns: 20% 80%;
+						}
+						.grid-main{
+							padding-left: 4rem;
+							padding-right: 4rem;
+							margin: auto;
+						}
+					}
+				{% else %}
+					@media screen and (min-width: 50em){
+						.grid-container{
+							max-width: 64rem;
+							grid-template-columns: 30% 70%;
+						}
+					}
+				{% endif %}
+
+
+
+				/*******************
+				**  FONT FAMILIES **
+				*******************/
+
+				body,.landingpagecontrast{
+					font-family: {{ settings.themes.cyanine.font|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
 				}
-				article a:hover, article a:focus, article a:active,
-				footer a:hover, footer a:focus, footer a:active{ 
-					text-decoration: none;
+				h1,h2,h3,h4,h5,h6,.logo{
+					font-family: {{ settings.themes.cyanine.fontheadline|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
 				}
-				table{
-					background: #fff;
+				.navigation, button, .button, .mainnavigation{
+					font-family: {{ settings.themes.cyanine.fontnavi|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
 				}
-				thead{
-					color: {{ settings.themes.cyanine.fontcolorsecondary|default('#F7F7F7') }};
-					background-color: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
+
+				/*******************
+				**      COLORS    **
+				*******************/
+
+				body,.landingpagecontrast{
+					background: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
 				}
-				tr{
-					border-color: {{ settings.themes.cyanine.thinbordercolor|default('lightgray') }};
+				main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagecontrast, .landingpagenews{
+					border-color: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
 				}
-				article pre, article code{ 
-					background-color: #ddd;
+				.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited{
+					background: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
+				}
+				body,.landingpagecontrast, a,
+				.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited{
+					color: {{ settings.themes.cyanine.fontcolorprimary|default('#F7F7F7') }};
+				}
+				.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited{
+					border-color: {{ settings.themes.cyanine.fontcolorprimary|default('#F7F7F7') }};					
+				}
+
+				main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews,button.expander{
+					background: {{ settings.themes.cyanine.brandcolorsecondary|default('#f7f7f7') }};
+				}
+				main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews, .logo a, button.expander{
+					color: {{ settings.themes.cyanine.fontcolorsecondary|default('#333') }};					
+				}
+				button.expander{
+					border-color: {{ settings.themes.cyanine.fontcolorsecondary|default('#333') }};
+				}
+
+				main a, footer a, .landingpageintro p a, .landingpageinfo p a, .landingpageteaser p a, .landingpagenavi p a{
+					color: {{ settings.themes.cyanine.fontcolorlink|default('#007474') }};
+			  	}
+				.TOC li a, .TOC li a:hover,.TOC li a:focus,.TOC li a:active{
+					border-color: {{ settings.themes.cyanine.fontcolorlink|default('#007474') }};
+				}
+
+				.navigation, button, .button,thead{
+					background: {{ settings.themes.cyanine.brandcolortertiary|default('lightseagreen') }};
+				}
+				.navigation, button, .button{
+					border-color: {{ settings.themes.cyanine.bordercolortertiary|default('lightseagreen') }};
+				}
+				.navigation, button, .button,thead,
+				.navigation a,.navigation a:hover,.navigation a:focus, .navigation a:active{
+					color: {{ settings.themes.cyanine.fontcolortertiary|default('#F7F7F7') }};
 				}
 				article pre{
-					border-left: 4px solid {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
+					border-left: 4px solid {{ settings.themes.cyanine.brandcolortertiary|default('lightseagreen') }};
+				}
+				article pre, article code{
+					background: {{ settings.themes.cyanine.codebackground|default('#ddd') }};
+					color: {{ settings.themes.cyanine.codecolor|default('#333') }};
+				}
+
+				.mainnavigation a:hover,.mainnavigation a:focus,.mainnavigation a:active, .mainnavigation .active > a:first-child{
+					background: {{ settings.themes.cyanine.contentnavihoverbackground|default('lightseagreen') }};
+					color: {{ settings.themes.cyanine.contentnavihovercolor|default('white') }};
+				}
+				.landingpagenews li{
+					background: {{ settings.themes.cyanine.newsbackground|default('white') }};
+				}
+				.landingpagenews li a{
+					color: {{ settings.themes.cyanine.newscolor|default('#333') }};
+				}
+				.mainnavigation li, tr, hr{
+					border-color: {{ settings.themes.cyanine.thinbordercolor|default('lightgray') }};
 				}
 				a.tm-download::before{
 					border: 1px solid {{ settings.themes.cyanine.fontcolorlink|default('#007F7F') }};
+					color: {{ settings.themes.cyanine.fontcolorlink|default('#007F7F') }};
 				}
 				a.tm-download:hover::before{
-					color: {{ settings.themes.cyanine.fontcolorsecondary|default('#f7f7f7') }};
+					color: {{ settings.themes.cyanine.contentnavihovercolor|default('#f7f7f7') }};
 					background: {{ settings.themes.cyanine.fontcolorlink|default('#007F7F') }};
 				}
-				.f-primary{
-					color: {{ settings.themes.cyanine.fontcolorprimary|default('#333') }};
+
+				.notice1{
+				    background-color: #ffded4;
+				    border-left: 4px solid #f65a3c;
 				}
-				.f-secondary,
-				.hover-f-secondary:hover,.hover-f-secondary:focus,.hover-f-secondary:active, .active > a:first-child.hover-f-secondary{
-					color: {{ settings.themes.cyanine.fontcolorsecondary|default('#f7f7f7') }};
+				.notice2{
+					background-color: #fff3d4;
+					border-left: 4px solid #f6b73c;
 				}
-				.bg-primary,
-				.hover-bg-primary:hover,.hover-bg-primary:focus,.hover-bg-primary:active, .active > a:first-child.hover-bg-primary{
-					background-color: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
-				}
-				.bg-secondary{
-					background-color: {{ settings.themes.cyanine.brandcolorsecondary|default('#f7f7f7') }};
-				}
-				.b--primary{
-					border-color: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
-				}
-				.b--secondary{
-					border-color: {{ settings.themes.cyanine.brandcolorsecondary|default('#f7f7f7') }};
-				}
-				.b--tertiary{
-					border-color: {{ settings.themes.cyanine.thinbordercolor|default('lightgray') }};
-				}
-				h1, h2, h3, h4, h5, h6{
-					{% if settings.themes.cyanine.fontheadline == 'serif' %}
-						font-family: georgia, times, serif;
-					{% elseif settings.themes.cyanine.fontheadline == 'sans-serif-tm' %}
-						font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 
-					{% endif %}
+				.notice3,
+				.notice4,
+				.notice5,
+				.notice6 {
+				    background-color: #d4e0ff;
+				    border-left: 4px solid #3c7bf6;	
 				}
 
+				{% if settings.themes.cyanine.noticecolors %}
+					.notice1 {
+						background-color: #fafafa;
+						border-left: 10px solid #000;
+						color: #333;
+					}
+					.notice2 {
+						background-color: #eee;
+						border-left: 10px solid #999;
+						color: #333;
+					}
+					.notice3,
+					.notice4,
+					.notice5,
+					.notice6 {
+						background-color: #444;
+						border-left: 10px solid #ccc;
+						color: #fff;
+					}
+				{% endif %}
+
 			</style>
 
 			{{ assets.activateTachyons() }}
@@ -109,7 +214,7 @@
 			
 		{% endblock %}
 	</head>
-	<body class="{{ settings.themes.cyanine.font|default('tm-sans-serif') }} optimize-text pa2 bg-primary dark-gray">
+	<body class="optimize-text pa2">
 		
 		{% block content %}{% endblock %}
 			

themes/cyanine/page.twig

@@ -1,8 +1,8 @@
 {% set published = metatabs.meta.manualdate ? metatabs.meta.manualdate : metatabs.meta.modified %}
 
-<main class="{{ item.elementType }} w-100 bg-secondary pb5 bl br bb b--primary">
+<main class="{{ item.elementType }} w-100 pb5 bl br bb">
 
-	<div class="w-100 mw8 center grid-container">
+	<div class="w-100 center grid-container">
 
 		<aside class="grid-header ph3 pv3">
 
@@ -10,9 +10,9 @@
 						
 				<div class="logo">
 					<p class="pa0 ma0">
-						<a class="link f1 fw9 f-primary {{ settings.themes.cyanine.fontheadline|default('tm-sans-serif') }}" href="{{ base_url }}" title="My Title">						
+						<a class="link f1 fw9" href="{{ base_url }}" title="My Title">						
 							{% if logo %}
-								<img src="{{ logo }}" class="logo-image"/>
+								<img src="{{ base_url }}/{{ logo }}" class="logo-image"/>
 							{% else %}
 								{{ settings.title }}
 							{% endif %}
@@ -25,7 +25,7 @@
 			{% if widgets %}
 				{% for index,widget in widgets %}
 					<div id="{{ index }}" class="mt4-l mt3">
-						{{ widget }}					
+						{{ widget }}
 					</div>
 				{% endfor %}
 			{% endif %}
@@ -41,7 +41,7 @@
 			<article>
 				<header>
 				
-					<h1 class="{{ settings.themes.cyanine.fontheadline|default('tm-sans-serif')  }}">{{ title }}</h1>
+					<h1>{{ title }}</h1>
 	
 					{% if (settings.themes.cyanine.datePosition.top or settings.themes.cyanine.authorPosition.top or settings.themes.cyanine.gitPosition.top) %}	
 						<div class="f5 pv1 flex justify-between">
@@ -86,10 +86,10 @@
 
 					<div class="f5 pv5 flex justify-between {{ settings.themes.cyanine.fontnavi|default('tm-sans-serif') }}">
 						{% if item.prevItem %}
-							<a class="link pv2 ph3 bg-primary white dim" href="{{ item.prevItem.urlRel }}">&lsaquo;&nbsp; {{ item.prevItem.name }}</a>
+							<a class="navigation link pv2 ph3 ba dim" href="{{ item.prevItem.urlRel }}">&lsaquo;&nbsp; {{ item.prevItem.name }}</a>
 						{% endif %}
 						{% if item.nextItem %}
-							<a class="link pv2 ph3 bg-primary white dim" href="{{ item.nextItem.urlRel }}">{{ item.nextItem.name }} &nbsp;&rsaquo;</a>
+							<a class="navigation link pv2 ph3 ba dim" href="{{ item.nextItem.urlRel }}">{{ item.nextItem.name }} &nbsp;&rsaquo;</a>
 						{% endif %}
 					</div>
 

themes/cyanine/partials/breadcrumb.twig

@@ -1,6 +1,6 @@
-<div class="f6 pv3 w-100 flex-l justify-between {{ settings.themes.cyanine.fontnavi}}">
+<div class="f6 pv3 w-100 flex-l justify-between">
 
-	<div>
+	<div class="mw6">
 		<a class="link f-link underline-hover" href="{{ base_url }}">{{ settings.title|title }}</a>
 
 		{% for crumb in breadcrumb %}

themes/cyanine/partials/footer.twig

@@ -1,6 +1,6 @@
 {% set nowYear = "now"|date("Y") %}
 
-<footer class="w-100 bg-secondary bl br bb b--primary lh-copy">
+<footer class="w-100 bl br bb lh-copy">
 	<div class="mw8 center pv3 flex-l">
 		{% for column,key in settings.themes.cyanine.footercolumns %}
 			{% if settings.themes.cyanine[column] %}
@@ -19,6 +19,6 @@
 	</div>
 </footer>
 
-<div class="w-100 center f6 f-secondary">
+<div class="w-100 center f6">
 	<p class="f6">{{ settings.copyright }} {{ __('by') }} {{ settings.author }}, {{ copyrightYears }}. {{ __('All Rights Reserved') }}. {{ __('Built with') }} <a class="link underline f-secondary" href="https://typemill.net">Typemill</a>.</p>
 </div>

themes/cyanine/partials/navigation.twig

@@ -7,22 +7,22 @@
 		{% set depth = element.keyPathArray|length %}
 
         {% if element.activeParent %}
-			<li class="bt bb b--tertiary margin-bottom-1 {{ element.elementType }} level-{{ depth }} activeParent">
+			<li class="bt bb margin-bottom-1 {{ element.elementType }} level-{{ depth }} activeParent">
 		{% elseif element.active %}
-			<li class="bt bb b--tertiary margin-bottom-1 {{ element.elementType }} level-{{ depth }} active">
+			<li class="bt bb margin-bottom-1 {{ element.elementType }} level-{{ depth }} active">
 		{% else %}
-			<li class="bt bb b--tertiary margin-bottom-1 {{ element.elementType }} level-{{ depth }}">
+			<li class="bt bb margin-bottom-1 {{ element.elementType }} level-{{ depth }}">
 		{% endif %}
         
         {% if (element.elementType == 'folder') %}
-				<a class="link dib w-100 relative fw7 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after hover-bg-primary f-primary hover-f-secondary" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }}. {% endif %}{{ element.name }}</a>
+				<a class="link dib w-100 relative fw7 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }}. {% endif %}{{ element.name }}</a>
 		{% if (element.folderContent|length > 0) and (element.contains == 'pages') %}	
                 <ul class="list pa0">
                     {{ macros.loop_over(element.folderContent, chapnum) }}
                 </ul>
 		{% endif %}
             {% else %}
-				<a class="link dib w-100 relative fw3 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after hover-bg-primary f-primary hover-f-secondary" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }} {% endif %}{{ element.name }}</a>
+				<a class="link dib w-100 relative fw3 pv2 pr2 indent-l-{{depth}} margin-bottom-1 arrow-after" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }} {% endif %}{{ element.name }}</a>
             {% endif %}
         </li>
     {% endfor %}
@@ -31,9 +31,9 @@
 {% import _self as macros %}
 
 {% if settings.themes.cyanine.collapseNav %}
-    <button id="expander" class=" dn db-l link pointer w-100 bg-secondary ba b--tertiary pa2 mb1 f7">expand navigation</button>
+    <button id="expander" class="expander dim dn db-l link pointer w-100 ba pa2 mb3 f6">expand navigation</button>
 {% endif %}
 
-<ul class="list pa0 menu {{ settings.themes.cyanine.fontnavi }}">
+<ul class="mainnavigation list pa0 menu">
     {{ macros.loop_over(navigation, settings.themes.cyanine.chapnum ) }}
 </ul>

themes/cyanine/partials/navigationFlat.twig

@@ -5,16 +5,16 @@
     {% import _self as macros %}
 
     {% for element in navigation %}
-		<li class="{% if level == 1 %}w-100 w-50-l ba bb bg-primary f-secondary b--secondary pa4{% endif %} {{ element.elementType }}">
+		<li class="{% if level == 1 %}w-100 w-50-l ba bb pa4{% endif %} {{ element.elementType }}">
         {% if element.elementType == 'folder' and level < maxdepth %}
-			<a class="link relative f-secondary dib bb bt-0 br-0 bl-0 b--dashed b--solid-hover b--light-gray w-100 ma2 arrow-after-transition" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }}. {% endif %}{{ element.name }}</a>		
+			<a class="link relative dib bb bt-0 br-0 bl-0 b--dashed b--solid-hover w-100 ma2 arrow-after-transition" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }}. {% endif %}{{ element.name }}</a>		
             {% if element.contains == 'pages'  %}
                 <ul class="list">
                     {{ macros.loop_over(element.folderContent,level+1, maxdepth, chapnum) }}
                 </ul>
             {% endif %}
         {% else %}
-			<a class="link relative f-secondary dib bb bt-0 br-0 bl-0 b--dashed b--solid-hover b--light-gray w-100 ma2 arrow-after-transition" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }} {% endif %}{{ element.name }}</a>
+			<a class="link relative dib bb bt-0 br-0 bl-0 b--dashed b--solid-hover w-100 ma2 arrow-after-transition" href="{{ element.urlAbs }}">{% if chapnum %}{{ element.chapter }} {% endif %}{{ element.name }}</a>
         {% endif %}
         </li>
     {% endfor %}
@@ -22,6 +22,6 @@
 
 {% import _self as macros %}
 
-<ul class="list pa0 flex-m flex-l flex-wrap tl justify-between {{ settings.themes.cyanine.fontnavi}}">
+<ul class="navigation list pa0 flex-m flex-l flex-wrap tl justify-between">
     {{ macros.loop_over(flatnavi, 1, maxdepth, settings.themes.cyanine.chapnum) }}
 </ul>

themes/cyanine/partials/posts.twig

@@ -7,7 +7,7 @@
 
 		<li class="post-entry">
 			<header>
-				<a class="link f-link underline-hover" href="{{ element.urlAbs }}"><h2 class="mt4 mb2 {{ settings.themes.cyanine.fontheadline}}">{{ post.meta.title }}</h2></a>
+				<a class="link f-link underline-hover" href="{{ element.urlAbs }}"><h2 class="mt4 mb2">{{ post.meta.title }}</h2></a>
 				<div class="mt3"><small><time datetime="{{date}}">{{ date | date("d.m.Y") }}</time> | {{ post.meta.author }}</small></div>
 			</header>
 			<p>{{ post.meta.description }}</p>