From ef1fc06b60ada61cb7b8da8c16bbbdbea114f968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Max=20B=C3=B6ck?= <hello@mxb.at>
Date: Mon, 15 Apr 2019 14:49:09 +0200
Subject: [PATCH] draw map through eleventy

---
 .eleventy.js                               | 17 ++++++++++++++++-
 _tasks/scripts.js                          | 19 -------------------
 _tasks/watch.js                            |  1 -
 src/assets/styles/base/_layout.scss        |  1 +
 src/assets/styles/components/_webring.scss |  7 ++++++-
 src/includes/map.njk                       |  4 ++--
 src/includes/webring.njk                   |  2 +-
 7 files changed, 26 insertions(+), 25 deletions(-)
 delete mode 100644 _tasks/scripts.js

diff --git a/.eleventy.js b/.eleventy.js
index b7abe3c5..8936d546 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -7,7 +7,20 @@ module.exports = function(config) {
     config.addLayoutAlias('base', 'base.njk')
     config.addLayoutAlias('page', 'page.njk')
 
-    config.addPassthroughCopy('src/assets/images')
+    config.addFilter('mapNodes', function(nodes, radius, width, height) {
+        return nodes.map((node, index) => {
+            const angle = (index / (nodes.length / 2)) * Math.PI
+            const x = radius * Math.cos(angle) + width / 2
+            const y = radius * Math.sin(angle) + height / 2
+
+            return {
+                title: node.title,
+                url: node.url,
+                x,
+                y
+            }
+        })
+    })
 
     config.addTransform('htmlmin', function(content, outputPath) {
         if (outputPath.endsWith('.html')) {
@@ -20,6 +33,8 @@ module.exports = function(config) {
         return content
     })
 
+    config.addPassthroughCopy('src/assets/images')
+
     return {
         dir: {
             input: 'src',
diff --git a/_tasks/scripts.js b/_tasks/scripts.js
deleted file mode 100644
index c99f9e64..00000000
--- a/_tasks/scripts.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const gulp = require('gulp')
-const webpack = require('webpack-stream')
-
-const webpackConfig = {
-    mode: 'production',
-    entry: {
-        map: './src/assets/scripts/map.js'
-    },
-    output: {
-        filename: '[name].js'
-    }
-}
-
-gulp.task('scripts', function() {
-    return gulp
-        .src('src/assets/scripts/map.js')
-        .pipe(webpack(webpackConfig))
-        .pipe(gulp.dest('dist/assets/scripts'))
-})
diff --git a/_tasks/watch.js b/_tasks/watch.js
index be10795d..be0492f0 100644
--- a/_tasks/watch.js
+++ b/_tasks/watch.js
@@ -4,5 +4,4 @@ const gulp = require('gulp')
 */
 gulp.task('watch', function() {
     gulp.watch('src/assets/styles/**/*.scss', gulp.series('styles'))
-    gulp.watch('src/assets/scripts/**/*.js', gulp.series('scripts'))
 })
diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss
index aa41d0eb..07eb1a81 100644
--- a/src/assets/styles/base/_layout.scss
+++ b/src/assets/styles/base/_layout.scss
@@ -10,6 +10,7 @@ body {
     color: $body-color;
     text-align: left;
     background-color: $body-bg;
+    padding-bottom: 3rem;
 }
 
 .container {
diff --git a/src/assets/styles/components/_webring.scss b/src/assets/styles/components/_webring.scss
index 961ac6ee..3dbb5e85 100644
--- a/src/assets/styles/components/_webring.scss
+++ b/src/assets/styles/components/_webring.scss
@@ -68,7 +68,9 @@
         text-decoration: none;
     }
 
-    @media (max-width: 500px) {
+    @media (max-width: 640px) {
+        padding-top: 3rem;
+
         &__header {
             display: block;
             padding-top: 60px;
@@ -77,5 +79,8 @@
             position: absolute;
             top: -20px;
         }
+        &__map {
+            display: none;
+        }
     }
 }
diff --git a/src/includes/map.njk b/src/includes/map.njk
index 417a1c8f..f7848ac3 100644
--- a/src/includes/map.njk
+++ b/src/includes/map.njk
@@ -1,7 +1,7 @@
 <svg class="map" width="640" height="440">
     <circle cx="320" cy="220" r="170" class="map__circle"></circle>
     <circle cx="320" cy="220" r="10" class="map__center"></circle>
-    {% for node in members|mapNodes %}
-        <circle r="10" cx="{{ node.x }}" cy="{{ node.y }}" class="map__node"></circle>
+    {% for node in members|mapNodes(170, 640, 440) %}
+        <circle r="10" cx="{{ node.x }}" cy="{{ node.y }}" class="map__node" title="{{ node.title }}"></circle>
     {% endfor %}
 </svg>
\ No newline at end of file
diff --git a/src/includes/webring.njk b/src/includes/webring.njk
index 0622fcac..13ad028a 100644
--- a/src/includes/webring.njk
+++ b/src/includes/webring.njk
@@ -1,6 +1,6 @@
 <article class="webring">
     <div class="webring__map">
-        <div class="map" id="map-canvas"></div>
+        {% include 'map.njk' %}
     </div>
     <div class="webring__card">
         <header class="webring__header">