eleventy test

8 files changed, 85 insertions, 43 deletions

diff --git a/.eleventy.js b/.eleventy.js
index aa0771dc..0024463e 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,24 +1,67 @@
-module.exports = function(config) {
+const sass = require("sass");
+const path = require("path");
 
-  config.addLiquidFilter('group_by', () => {})
 
-  config.addCollection('icons', collection =>
-      collection.getFilteredByGlob('icons/*.svg')
-      .sort((a, b) => {
-        console.log('a', a);
-        
-        return b.date - a.date
-      })
-  )
+module.exports = function(eleventyConfig) {
+
+  eleventyConfig.addShortcode("icon", function(name) {
+    return name
+  });
+
+
+  eleventyConfig.addLiquidFilter('group_by', () => {
+  })
+
+  eleventyConfig.addLiquidFilter('inspect', (i) => {
+    console.log('i', i);
+  })
+
+  eleventyConfig.addTemplateFormats("scss");
+  eleventyConfig.addExtension("scss", {
+    outputFileExtension: 'css',
+    compile: async function(inputContent) {
+      let result = sass.compileString(inputContent);
+
+      return async () => {
+        return result.css;
+      };
+    }
+  });
+
+  eleventyConfig.addTemplateFormats("svg");
+  eleventyConfig.addExtension("svg", {
+    outputFileExtension: 'svg',
+    compileOptions: {
+      permalink: function(contents, inputPath) {
+        const basename = path.basename(inputPath);
+        return `icons/${basename}`;
+      }
+    },
+    compile: async (inputContent, inputPath) => {
+
+      return async () => {
+        const basename = path.basename(inputPath, '.svg');
+
+        return inputContent.replace('<svg>', `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-${basename}" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">\n  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>`);
+      };
+    }
+  });
+
+  eleventyConfig.addCollection('icons', collection => {
+    return collection.getFilteredByGlob('./src/icons/*.svg').sort((a, b) => {
+      return b.name - a.name
+    })
+  })
 
   return {
+    dynamicPartials: false,
     dir: {
-      input: "src",
+      input: 'src',
 
-      includes: "_includes",
-      layouts: "_layouts",
-      data: "_data",
+      includes: '_includes',
+      layouts: '_layouts',
+      data: '_data'
     }
   }
 
-};
+}
diff --git a/src/_data/icons.js b/src/_data/icons.js
deleted file mode 100644
index 83aebbcb..00000000
--- a/src/_data/icons.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = function() {
-  return [
-      1, 2, 3, 4
-  ];
-};
diff --git a/src/_includes/icon.html b/src/_includes/icon.html
index 89bd3c60..ced25557 100644
--- a/src/_includes/icon.html
+++ b/src/_includes/icon.html
@@ -1,2 +1,8 @@
 {% assign stroke = include.stroke | default: 2 %}{% assign width = 24 %}{% assign name = include.name %}{% assign icon = site.icons | where: "slug", name | first %}{% capture replace-to %}<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-{{ name }}" width="{{ width }}" height="{{ width }}" viewBox="0 0 24 24" stroke-width="{{ stroke }}" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"/>{% endcapture %}{% assign content = icon.content | replace: '<svg>', replace-to %}{{ content }}
+{{ name }}
+{{ params.name }}
+{{ include.name }}
+{{ includes.name }}
+{{ include.stroke }}
+{{ params.stroke }}
diff --git a/src/bg.svg b/src/bg.svg
index 0a184c59..c38f5578 100644
--- a/src/bg.svg
+++ b/src/bg.svg
@@ -1,5 +1,5 @@
 ---
-tags: []
+permaling: bg.svg
 ---
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <g fill="none" fill-rule="evenodd" stroke="#206bc4" stroke-width=".025" opacity=".5">
diff --git a/src/icons/gas-station.svg b/src/icons/gas-station.svg
index e8bc6df6..43e81e65 100644
--- a/src/icons/gas-station.svg
+++ b/src/icons/gas-station.svg
@@ -1,7 +1,6 @@
 ---
 category: Map
 tags: [fuel, oil, cars, vehicles, shop, distributor]
-category: Vehicles
 version: "1.14"
 unicode: "ec7d"
 ---
diff --git a/src/index.html b/src/index.html
index f8fc5f9f..91ed1b90 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,10 +5,10 @@ layout: default
 	<div class="box">
 		<div class="mb">
 			<div class="icons-list">
-				{% for icon in site.icons %}
-				{% assign name = icon.slug %}
-				<div class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}">
-					{% include icon.html name=name %}
+				{% for icon in collections.icons %}
+				{% assign name = icon.fileSlug %}
+				<div class="icons-list-icon js-icon" title="{{ name }}" data-icon="{{ name }}">
+					{% icon name %}
 				</div>
 				{% endfor %}
 			</div>
@@ -17,10 +17,10 @@ layout: default
 	<div class="box">
 		<div class="mb">
 			<div class="icons-list">
-				{% for icon in site.icons %}
-				{% assign name = icon.slug %}
-				<div class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}">
-					{% include icon.html name=name stroke=1.25 %}
+				{% for icon in collections.icons %}
+				{% assign name = icon.fileSlug %}
+				<div class="icons-list-icon js-icon" title="{{ name }}" data-icon="{{ name }}">
+					{% include "icon.html", name="name", stroke="1.25" %}
 				</div>
 				{% endfor %}
 			</div>
diff --git a/src/style.scss b/src/style.scss
index 4886546d..6f32ef6d 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -318,14 +318,14 @@ Components
     width: 1.25rem;
     height: 1.25rem;
     position: absolute;
-    top: ($btn-form-height - 1.25rem) / 2;
-    right: ($btn-form-height - 1.25rem) / 2;
+    top: ($btn-form-height - 1.25rem) * .5;
+    right: ($btn-form-height - 1.25rem) * .5;
     stroke-width: 1.75;
   }
 
   &.icon-left {
     .icon {
-      left: ($btn-form-height - 1.25rem) / 2;
+      left: ($btn-form-height - 1.25rem) * .5;
       right: auto;
     }
 
diff --git a/src/tags.html b/src/tags.html
index 517fc27a..854c2664 100644
--- a/src/tags.html
+++ b/src/tags.html
@@ -5,20 +5,19 @@ permalink: tags.html
 
 <div class="container">
 	<div class="box">
-		{{ collections }}
-
 		{% assign i = 0 %}
 		<table class="table mb">
-			{% for icon in icons %}
+			{% for icon in collections.icons %}
 			<tr>
-				<td class="td-1">{% include "icon.html" name=icon.slug %}</td>
-				<th>{{ icon.slug }}</th>
-				<td>{{ icon.tags | join: ', ' }}</td>
-				<td>{{ icon.category }}</td>
-				<td>{{ icon.version }}</td>
-				<td>{{ icon.unicode }}</td>
+				<td class="td-1">{% include "icon.html", name=icon.slug %}</td>
+				<th>{{ icon.fileSlug }}</th>
+				<td>{{ icon.data.tags | join: ', ' }}</td>
+				<td>{{ icon.data.category }}</td>
+				<td>{{ icon.data.version }}</td>
+				<td>{{ icon.data.unicode }}</td>
 			</tr>
-			{% if icon.tags.size == 0 %}
+			{% assign tags-count = icon.data.tags | size %}
+			{% if tags-count == 0 %}
 			{% assign i = i | plus: 1 %}
 			{% endif %}
 			{% endfor %}