dev.md

Fumes website features

• microformats. example test here

• ultra simple codepen-geek responsive logo.

• smart inline svg icons.

• post thumbs. Front-matter declared.

• chrome standalone web app functionality (android only :().

• photographer indexes and navigation.

• open graph.

• attribution footnotes "APPEND to copy action" via inlined vanilla js.

• twitter cards (tested here..).

• SSL/https thanks to Netlify.

• responsive videos without plugins thanks to [Eduardo Boucas] adapted (https://eduardoboucas.com/blog/2016/12/21/responsive-video-embeds-jekyll.html)

• Reading time estimates. Using this plugin eleventy-plugin-reading-time by Johan Brook.

Fumes development technologies

Stuff for development. Its happens in master branch:

• npm

• 11ty

• plus various code clips & techniques taken here and there...

• Netlify CND and SSL/https.

Setup:

npm install

after that, you might need to run also:

npm audit fix

Dev time:

A. Run 11ty

npx @11ty/eleventy --serve

or Change the web server’s port. Here how to use localhost:8081 :

npx @11ty/eleventy --serve --port=8081

B. Produce images

Use Grinder gulp functions to quickly make all the images need for Fumes's responsive layout.

To do

• install this: https://github.com/nhoizey/eleventy-plugin-images-responsiver

• licenses management: use licenses.yml

• post count in footer

• compress html

• handy prev / next articles navigation.

• print.css

• google authors

• Google Author Rich Snippets

One day:

• use eleventy-img

• install service workers

• mailchimp

• merchandise

• PDFs | ebooks