add webpack

.gitignore

@@ -2,4 +2,3 @@ node_modules
 dist
 functions
 yarn-error.log
-main.css

_tasks/scripts.js

@@ -0,0 +1,19 @@
+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'))
+})

_tasks/styles.js

@@ -9,5 +9,5 @@ gulp.task('styles', function() {
                 outputStyle: 'compressed'
             }).on('error', sass.logError)
         )
-        .pipe(gulp.dest('./src/assets/styles'))
+        .pipe(gulp.dest('./dist/assets/styles'))
 })

_tasks/watch.js

@@ -4,4 +4,5 @@ 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'))
 })

gulpfile.js

@@ -2,5 +2,5 @@ const gulp = require('gulp')
 
 require('require-dir')('./_tasks')
 
-gulp.task('build', gulp.series('clean', 'styles'))
+gulp.task('build', gulp.series('clean', 'styles', 'scripts'))
 gulp.task('build:dev', gulp.series('build', 'watch'))

package.json

@@ -17,11 +17,13 @@
   "dependencies": {
     "@11ty/eleventy": "^0.8.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.0",
+    "d3": "^5.9.2",
     "del": "^3.0.0",
     "gulp": "^4.0.0",
     "gulp-sass": "^4.0.1",
     "html-minifier": "^3.5.20",
     "netlify-lambda": "^1.1.1",
-    "require-dir": "^1.2.0"
+    "require-dir": "^1.2.0",
+    "webpack-stream": "^5.2.1"
   }
 }

src/assets/scripts/embed.njk

@@ -1,5 +1,5 @@
 ---
-permalink: 'embed.js'
+permalink: 'assets/scripts/embed.js'
 ---
 class WebringBanner extends HTMLElement {
     constructor() {

src/assets/scripts/map.js

@@ -0,0 +1,71 @@
+import * as d3 from 'd3'
+import members from '../../data/members'
+
+class WebringMap {
+    constructor() {
+        this.radius = 200
+        this.canvasWidth = this.radius * 2 + 32
+
+        this.svg = null
+        this.nodes = []
+
+        this.init()
+    }
+
+    init() {
+        d3.selectAll('svg').remove()
+        this.svg = d3
+            .select('#map-canvas')
+            .append('svg')
+            .attr('width', this.canvasWidth)
+            .attr('height', this.canvasWidth)
+
+        this.nodes = members.map((member, index) => {
+            const angle = (index / (members.length / 2)) * Math.PI
+            const x = this.radius * Math.cos(angle) + this.canvasWidth / 2
+            const y = this.radius * Math.sin(angle) + this.canvasWidth / 2
+
+            return {
+                id: index,
+                title: member.title,
+                url: member.url,
+                x,
+                y
+            }
+        })
+    }
+
+    drawCircle() {
+        this.svg
+            .append('circle')
+            .attr('cx', this.canvasWidth / 2)
+            .attr('cy', this.canvasWidth / 2)
+            .attr('r', this.radius)
+            .attr('strokeWidth', 2)
+    }
+
+    drawNodes() {
+        this.svg
+            .selectAll('circle')
+            .data(this.nodes)
+            .enter()
+            .append('circle')
+            .attr('r', 10)
+            .attr('cx', function(d, i) {
+                return d.x
+            })
+            .attr('cy', function(d, i) {
+                return d.y
+            })
+    }
+
+    draw() {
+        this.drawCircle()
+        this.drawNodes()
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const map = new WebringMap()
+    map.draw()
+})

src/assets/styles/components/_webring.scss

@@ -1,9 +1,11 @@
 .webring {
-    position: relative;
-    margin-bottom: 3rem;
-    background-color: #fff;
-    border-radius: 0.5rem;
-    box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
+    &__card {
+        position: relative;
+        margin-bottom: 2rem;
+        background-color: #fff;
+        border-radius: 0.5rem;
+        box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
+    }
 
     &__header,
     &__body {

src/includes/snippet.njk

@@ -4,4 +4,4 @@
     <a href="{{ meta.url }}/random">Random</a>
     <a href="{{ meta.url }}/next">Next</a>
 </webring-banner>
-<script async src="{{ meta.url }}/embed.js" charset="utf-8"></script>
+<script async src="{{ meta.url }}/assets/scripts/embed.js" charset="utf-8"></script>

src/includes/webring.njk

@@ -1,28 +1,33 @@
 <article class="webring">
-    <header class="webring__header">
-        {% if meta.image %}
-        <img class="webring__image" src="/assets/images/{{ meta.image }}" width="70" height="70" alt="">
-        {% endif %}
+    <div class="webring__map" hidden>
+        <canvas id="map-canvas"></canvas>
+    </div>
+    <div class="webring__card">
+        <header class="webring__header">
+            {% if meta.image %}
+            <img class="webring__image" src="/assets/images/{{ meta.image }}" width="70" height="70" alt="">
+            {% endif %}
 
-        <div class="webring__description">
-            <h1 class="webring__title">{{ meta.title }}</h1>
-            <p>{{ meta.description }}</p>
-            <a href="/code-of-conduct">Code of Conduct</a>
-        </div>
-    </header>
-
-    <div class="webring__body">
-        <div class="webring__subtitle">
-            <h2 class="h3">Members ({{ members | length }})</h2>
-            <a href="/feeds.xml">RSS Feeds</a>
-        </div>
+            <div class="webring__description">
+                <h1 class="webring__title">{{ meta.title }}</h1>
+                <p>{{ meta.description }}</p>
+                <a href="/code-of-conduct">Code of Conduct</a>
+            </div>
+        </header>
+            
+        <div class="webring__body">
+            <div class="webring__subtitle">
+                <h2 class="h3">Members ({{ members | length }})</h2>
+                <a href="/feeds.xml">RSS Feeds</a>
+            </div>
 
-        <ol class="webring__memberlist">
-            {% for member in members %}
-            <li class="webring__member">
-                <a href="{{ member.url }}" class="webring__link">{{ member.title }}</a>
-            </li>
-            {% endfor %}
-        </ol>
+            <ol class="webring__memberlist">
+                {% for member in members %}
+                <li class="webring__member">
+                    <a href="{{ member.url }}" class="webring__link">{{ member.title }}</a>
+                </li>
+                {% endfor %}
+            </ol>
+        </div>
     </div>
 </article>

src/index.njk

@@ -1,5 +1,6 @@
 ---
 layout: base
+is_front: true
 ---
 
 {% include 'webring.njk' %}

src/layouts/base.njk

@@ -14,6 +14,10 @@
     <div class="container">
         {{ content | safe }}
     </div>
+
+    {% if is_front %}
+    <script src="/assets/scripts/map.js"></script>
+    {% endif %}
 </body>
 </html>