Speak

♡ We speak therefore we are.

⎋ Speak up!

♨ A Volcano of vocabularising

✌ Haiku 俳句 short poetry

※ Graphic, Efficient, Rapid Communication Bricks

⁂ Use me to get a clue and to get the message through!

❊ Who? its a second click quest and pleasure!

Speak website v.1.1.2 features

• Site content licensed under a Creative Commons Attribution 4.0 International license.
• Conditional Media Query Mixin by @sheiko
• Speech-bubbles inspired by Nicolas Gallagher
• Compressed html thanks to Anatol Broder
• Zero plugins
• Web app standalone functionality with chrome (android only :().
• Inlined svg icons
• 100% vanilla js
• Open graph metas
• Twitter cards
• auto generated OG/Twitter preview images using gulp-webshot,node-webshot, which uses PhantomJS
• Data driven navigation
• jekyll sitemap
• Page titles that make sense
• Understandable body tags sentences
• Selected keyword (categories) navigation
• random quote on home via js
• use font: caption; (no more webfont.js async) to leverage operating system fonts
• SSL/HTTPS and hosting by Netlify

To do

Sometime soon:

• refactor with gridsome or nuxt.js
• improve OG/twitter cards preview images generation
• turn speechbubble css into svg
• more share links fb, g+, (twitter done!) in single
• double kudos: love|hate
• smooth transitions
• service workers
• print.css

Maybe:

• contribute form (use Netlify forms or eduardoboucas staticman)

Dev features

• gulp OG/twitter cards preview images generation (gulp-webshot using phantomjs)
• gulp browsersync

Gems dependencies:

• github-pages
• jekyll-feed
• html-proofer
• jekyll-sitemap
• jekyll-seo-tag

Prerequisites

Node, Npm, gulp

Getting started

0. If you haven't yet, install Bundler + Gulp globally!

gem install --global bundler

npm install --global gulp

Dev time

1. In project local dir:

bundle install

2. Install Gulp in project local dir:

npm install --save-dev gulp

3. First run Jekyll like this:

bundle exec jekyll serve --trace

4. Open a new terminal window and run

(meta previews images for social networks, OG, Twitter, chats and the such...)

gulp make-previews

you might need to change which images are generated by adjusting line 20 of gulpfile.js

5. (optional) Open a new terminal window and run browsersync via gulp:

gulp