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