refactor style build

.eleventy.js

@@ -9,6 +9,7 @@ module.exports = function(config) {
     config.addLayoutAlias('page', 'page.njk')
 
     config.addPassthroughCopy('src/assets/images')
+    config.addPassthroughCopy('src/assets/styles/main.css')
 
     config.addTransform('htmlmin', function(content, outputPath) {
         if (outputPath.endsWith('.html')) {

_tasks/styles.js

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

_tasks/watch.js

@@ -0,0 +1,7 @@
+const gulp = require('gulp')
+/*
+  Watch folders for changess
+*/
+gulp.task('watch', function() {
+    gulp.watch('src/assets/styles/**/*.scss', gulp.series('styles'))
+})

gulpfile.js

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

package.json

@@ -9,7 +9,7 @@
     "url": "http://github.com/maxboeck/webring"
   },
   "scripts": {
-    "start": "gulp build && eleventy --serve",
+    "start": "gulp build:dev & eleventy --serve",
     "build": "gulp build && eleventy && yarn run build:lambda",
     "serve:lambda": "netlify-lambda serve _lambda",
     "build:lambda": "netlify-lambda build _lambda"

src/assets/styles/components/_memberlist.scss

@@ -1,14 +1,18 @@
 .memberlist {
     max-height: 250px;
-    overflow-y: scroll;
+    border: 1px solid $gray-lighter;
+    overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
     &__item {
-        border-bottom: 1px solid #ccc;
+        &:not(:last-child) {
+            border-bottom: 1px solid $gray-lighter;
+        }
         &:nth-child(even) {
-            background-color: rgba(122, 122, 122, 0.1);
+            background-color: rgba($gray-light, 0.1);
         }
     }
+
     &__link {
         display: block;
         padding: 0.25rem;

src/includes/signupform.njk

@@ -1,4 +1,4 @@
-<form name="signup" method="POST" data-netlify="true">
+<form class="form" name="signup" method="POST" data-netlify="true" netlify-honeypot="bot">
     <p>
         <label for="input-name">Site Name:</label>
         <input type="text" name="name" id="input-name" placeholder="Frank's awesome site" />
@@ -11,5 +11,9 @@
         <label for="input-feed">RSS Feed URL (optional):</label>
         <input type="url" name="feed" id="input-feed" placeholder="https://www.franks-site.org/feed.xml" />
     </p>
-    <button type="submit">Please Add Me!</button>
+    <div class="sr-only" aria-hidden="true">
+        <label for="input-bot">Don’t fill this out if you're human:</label>
+        <input type="text" name="bot" id="input-bot" />
+    </div>
+    <button type="submit" class="btn btn--primary">Please Add Me!</button>
 </form>

src/includes/webring.njk

@@ -1,7 +1,14 @@
-<div class="webring">
-    <h1 class="webring__title">{{ meta.title }}</h1>
-    <p class="webring__desc">{{ meta.description }}</p>
-    <a href="/coc">Code of Conduct</a>
+<article class="webring">
+    <header class="webring__header">
+        <h1 class="webring__title">{{ meta.title }}</h1>
+
+        {% if meta.image %}
+        <img class="webring__image" src="/assets/images/{{ meta.image }}" width="100" height="100" alt="">
+        {% endif %}
+
+        <p class="webring__desc">{{ meta.description }}</p>
+        <a href="/coc">Code of Conduct</a>
+    </header>
 
     <div class="webring__body">
         <h2>Members ({{ members | length }})</h2>
@@ -22,4 +29,4 @@
         {% endfor %}
         </p>
     </div>
-</div>
+</article>

src/index.md

@@ -4,19 +4,17 @@ layout: home
 
 ## What's this?
 
-## How to join
+A community of sites around a common topic, also known as a [webring](). Kids in the 90s used to do it.
 
-To add your site to the webring, [open a pull request]({{ meta.repo }}/compare) and supply the following information:
+## How to join
 
-* Name of your site
-* URL of your site
-* URL of your RSS feed (optional)
+To join the webring, [open a pull request]({{ meta.repo }}/compare) and supply the name and URL of your site. If you publish a RSS feed, you can provide that as well to add it to the central index.
 
-Alternatively, you can use this form to sign up:
+If you don't have a Github account, you can also use this form to sign up:
 
 {% include 'signupform.njk' %}
 
-The webring admins will then look at your site and determine if it will be included.
+The webring admins will then look at your site and determine if it's a good fit.
 
 ## Add the Snippet