draw map through eleventy

.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',

_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'))
 })

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 {

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;
+        }
     }
 }

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>

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">