DEV Community: Anders Grendstadbakk

Drafts and scheduled publishing

Anders Grendstadbakk — Tue, 14 Apr 2020 20:19:29 +0000

A nice feature I had in Jekyll was drafts and the option to schedule publishing of content.

In Jekyll you placed drafts in a separate folder called _drafts and when you built the site with the flag --drafts they where included.

I have gone a different way in my Eleventy site, and keep the drafts in the same folder (_posts) as the published content. To mark something as draft I add it to the front matter: draft: true.
Combined with that I have the following functions in .elevent.js.

These functions do things based on environment, you can read how to add environment variables to Eleventy in this other post I wrote.

const drafts = (item) => {
  if (!eleventyVars.development && item.data.draft) {
    // If not development, and draft is true, skip it.
    return false
  }
  // Return everything by default.
  return true;
};

This function is used as a array filter callback to skip the drafts if the current environment is not development.

Scheduled publishing

For scheduling content I do a similar approach, I check the defined date vs the current date, and skip the item in production if it's in the future.

const future = (item) => {
  // If item date is before now it's safe to publish it.
  if (item.date <= now) {
    return true;
  }

  // If it's in the future we can publish it in development.
  if (eleventyVars.development) {
    return true;
  }

  // In future and not development, skip it.
  return false;
};

The scheduling check only works when the site is deployed/built. So I have used ifttt.com to automatically rebuild my website hosted on netlify.com each night.

The complete solution

I have all of this in a helper function I use to generate the collection.

function getPosts(collectionApi) {
  const globs = [
    './_posts/*',
  ];
  const now = new Date();

  const drafts = (item) => {
    // See function above.
  };
  const future = (item) => {
    // See function above.
  };

  return collectionApi.getFilteredByGlob(globs)
    .filter(item => !!item.data.permalink)
    .filter(drafts)
    .filter(future)
    .reverse();
}

It's important that you add these checks to all collections you output, so your drafts are not published on the archive page or in the rss feed.

If you want to look at my whole code you can check it out on Github.

Possible changes

If you want to keep the drafts in a separate folder the getPosts function could be changed to include the drafts folder in the globs-array instead of checking the draft variable. I'm considering doing this my self.

Disable row in Drupal tableselect

Anders Grendstadbakk — Thu, 26 Sep 2019 20:47:38 +0000

When you use the tableselect element there may be reasons you want to make a row not selectable:

Permissions
Missing properties on the element
Or any other reason to not make a row selectable

I had to do this recently and thought it should be a easy thing to do, since all form elements seems to support the #disabled property.

A tableselect element looks something like this:

$form['table'] = [
  '#type' => 'tableselect',
  '#multiple' => FALSE,
  '#header' => [
    'name' => 'Name',
    'age' => 'Age',
  ],
  '#options' => $options,
  '#empty' => 'No items available',
];

And then each entry (in $options) would look like:

$options['anders'] = [ // knowing the key is important for disabling.
  'name' => [
    '#markup' => 'Anders',
  ],
  'age' => [
    '#markup' => 30,
  ],
];

You would think the way to disable a row is to just add '#disabled' => TRUE; to the option entry, but no, nothing happens.

To actually disable a row you would need to target the same key outside the #options array. Like this:

$form['table']['anders']['#disabled'] = TRUE; // Added directly to tableselect element.

In my opinion this is quite confusing.

Refresh Service Worker

Anders Grendstadbakk — Sun, 21 Jul 2019 18:56:57 +0000

Have you ever enabled a service worker and then realised that your updates are not showing because of caching. I have.

According to MDN a service worker will update every 24 hour or so or when all pages/instances are closed.

This can be a problem if you have made recent changes or the website is added to home screen. There could be reasons not to force update the service worker whenever a new one is available, so a better solution is to prompt the user to update (if they want to).

How to detect when a new worker is available

There are two parts to manage this. The service worker must listen for messages from the browser (client refreshing), and the browser must listen for new service workers.

Service worker

To listen for messages inside the service worker we need to add an event listener for the message event.

In my solution I send an object to the service worker with an action property. So when the service worker receives action: 'skipWaiting' it knows to activate the pending worker.

self.addEventListener('message', function(event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

Browser

First you need a button to click.

<button class="refresh-worker hidden">A new service worker is available, click to reload</button>

I recommend to hide it with CSS. If JS or service workers are not supported it has no purpose and can stay hidden.

const refreshButton = document.querySelector('.refresh-worker');
let newWorker = null;

refreshButton.addEventListener('click', (event) => {
  event.preventDefault();
  newWorker.postMessage({ action: 'skipWaiting' });
  window.location.reload();
});

First we need a reference to the button (for click handler) and a variable to put the service worker in when it's available.

When the button is clicked we send a message to the worker telling it to skip waiting and activate the new worker. Then we refresh the page.

Next we must listen for service worker updates so we know when to display the button and prompt the user to update.

// Register service worker:
navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
        // Listen for updates:
    registration.addEventListener('updatefound', () => {
      newWorker = registration.installing;
            // Listen for when the new worker is ready:
      newWorker.addEventListener('statechange', () => {
        switch (newWorker.state) {
          case 'installed':
            if (navigator.serviceWorker.controller) {
                            // Display button:
              refreshButton.classList.remove('hidden');
            }
            break;
        }
      });
    });
  });
}

When the worker is ready to be activated we can display the button and inform the user that a new version is available.

Eleventy Essentials

Anders Grendstadbakk — Mon, 03 Jun 2019 19:29:54 +0000

I switched my personal site to Eleventy recently. It's a very good static site generator. Here are some tips and tricks I have discovered that are nice to have when you are creating a site.

Start using the _data folder

If you come from Jekyll you are used to different kinds of variables being available in your templates (site.time, site.posts).
Eleventy does not have these by default, but it's quite easy to add them (and more).

Each JSON/JS file in the _data folder will become available under the filename namespace in your templates. So _data/meta.json becomes available as meta.some_key_inside_file.

eleventy.js

The first file I create contains things related to the engine and environment.

module.exports = {
  production: process.env.ELEVENTY_ENV === 'production',
  development: process.env.ELEVENTY_ENV === 'development',
  env: process.env.ELEVENTY_ENV || 'development',
  notReady: false, // Flag to prevent something from rendering.
  time: () => {
    return new Date(); // Simplest example, could use Moment.js to return another format.
  },
};

This gives me access to information about environment so I can exclude Google Analytics if it's not production, or print more information in development.

metadata.json

{
  "title": "Andeers.com",
  "description": "Personal site of Anders Grendstadbakk",
  "url": "https://andeers.com/",
  "feed": {
    "subtitle": "I mainly write about web development and tech.",
    "filename": "feed.xml",
    "path": "/feed/feed.xml",
    "url": "https://andeers.com/feed/feed.xml",
    "id": "https://andeers.com/"
  },
  "author": {
    "name": "",
    "email": ""
  }
}

The metadata.json contains information about this site and me. I also have some fields for the RSS feed. It's nice to collect all this information in one file so when you make changes you have it all together.

.eleventy.js

This file is where you define collections, filters, and shortcodes.

A hot tip is that since this is node.js you can require() your data files here and access the variables. This way you can use content from metadata in helper functions, or output something different in development.

const eleventyVars = require('./_data/eleventy');

Create a collection based on a folder of files

eleventyConfig.addCollection('posts', function(collection) {
  return collection.getFilteredByGlob('./_posts/*').reverse().filter(function(item) {
    // Only include items with a permalink.
    return !!item.data.permalink;
  });
});

This gives you a collection of all items in the _posts folder.

Latest posts

eleventyConfig.addCollection('latestPosts', function(collection) {
  const posts = collection.getSortedByDate().reverse();

  let items = [];
  for( let item of posts ) {
    if(!!item.inputPath.match(/\/_posts\//)) {
      items.push( item );
      if( items.length >= 5 ) {
        return items;
      }
    }
  }
});

This snippet gives you a variable with the 5 latest posts you can use on your front page.

Date functions

eleventyConfig.addFilter('readableDate', dateObj => {
  return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_FULL);
});

// Used in Handlebars like this: {{readableDate post.date }}

This function renders the date in a specific way, but it could easily take another argument that specifies format, or use Moment.js in stead of Luxon.

Meta functions

eleventyConfig.addFilter('pageTitle', title => {
  if (title && title !== '') {
    return `${title} | ${metadata.title}`;
  }
  return metadata.title;
});

eleventyConfig.addFilter('pageDescription', (description, opt) => {
  const {content, excerpt } = opt.data.root;

  if (description && description !== '') {
    return description;
  }
  else if (excerpt && excerpt !== '') {
    return excerpt;
  }
  else if (content && content !== '' && !opt.data.root.isFront) {
    return snippetGenerator(content);
  }

  return metadata.description;
});

I have two functions I use for <title> and <description>. The first one renders the page title with the site name appended, and if a page title is not available it just returns the site name.

The pageDescription check multiple places for a description, first if one was specifically defined, then it tries to generate one from the content of the page. If that does not work it falls back to the generic site description.

Other stuff

In the root index.html I add a isFront: true to the front matter, this makes it possible to do conditional stuff when rendering the front page:

<section>
  {{#if isFront}}
    <p>This paragraph is only written to the front page.</p>
  {{/if}}
  <p>This paragraph is rendered on all pages.</p>
</section>

Since my website is a work in progress I will probably find other useful snippets to make Eleventy even better, so check this site out on Github.