From dfb9068172bc9da92a51c2b112674132355b5f84 Mon Sep 17 00:00:00 2001 From: Kenneth Ormandy Date: Mon, 3 Aug 2015 00:57:12 -0700 Subject: [PATCH 1/3] Adds a specific version of Dropcap.js --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6210511..a6ce890 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "repository": "git@github.com:losttype/blog.losttype.com.git", "keywords": [], "dependencies": { - "dropcap.js": "^1.0.0", + "dropcap.js": "1.0.0", "smoothscroll": "0.1.0", "vague-time": "1.2.0", "zoom.js": "fat/zoom.js" From f6b4996e123f5081f2c5a11b16a499ec78beca37 Mon Sep 17 00:00:00 2001 From: Kenneth Ormandy Date: Mon, 3 Aug 2015 02:28:00 -0700 Subject: [PATCH 2/3] Adds hard-coded drop caps --- src/2013-10-13-goodbye-brooklyn.md | 3 ++- src/css/index.scss | 1 + src/css/module/_dropcap.scss | 36 ++++++++++++++++++++++++++++++ src/js/index.js | 17 ++++++++++---- 4 files changed, 52 insertions(+), 5 deletions(-) create mode 100644 src/css/module/_dropcap.scss diff --git a/src/2013-10-13-goodbye-brooklyn.md b/src/2013-10-13-goodbye-brooklyn.md index 89b4fac..7085089 100644 --- a/src/2013-10-13-goodbye-brooklyn.md +++ b/src/2013-10-13-goodbye-brooklyn.md @@ -6,12 +6,13 @@ thumbnail: /media/2013/10/12.jpg template: post.hbs category: fieldtripny collection: fieldtripny +dropcap: true ---
![](/media/2013/10/12.jpg)
-And so the trip has come to an end. I’m writing this from my apartment in San Francisco. I was one of the first to leave this morning, while everyone was still sleeping off their hangover. It was a weird and sad feeling to walk out that apartment, as this past week has been somewhat magical. +

And so the trip has come to an end. I’m writing this from my apartment in San Francisco. I was one of the first to leave this morning, while everyone was still sleeping off their hangover. It was a weird and sad feeling to walk out that apartment, as this past week has been somewhat magical.

I had no idea what I was in for before I flew out to Brooklyn, but by the end of the week, I got to know this amazing group of people. What a week. Thanks, Lost Type. diff --git a/src/css/index.scss b/src/css/index.scss index 928c7d4..53e4a9b 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -36,6 +36,7 @@ @import "module/form"; @import "module/newsletter"; @import "module/footer"; +@import "module/dropcap"; @import "module/print"; // State diff --git a/src/css/module/_dropcap.scss b/src/css/module/_dropcap.scss new file mode 100644 index 0000000..938901e --- /dev/null +++ b/src/css/module/_dropcap.scss @@ -0,0 +1,36 @@ +// Dropcap +// +// A dropcap for a post. The markup is generated automatically, with the +// span coming from a Handlebars helper, and the `line-height` alignment +// and other features coming from [Dropcap.js](https://github.com/adobe-webplatform/dropcap.js). +// +// Markup: +//

And so the trip has come to an end. I’m writing this from my apartment in San Francisco. I was one of the first to leave this morning, while everyone was still sleeping off their hangover. It was a weird and sad feeling to walk out that apartment, as this past week has been somewhat magical.

// +// +// Styleguide: module.dropcap +.dropcap { + text-transform: uppercase; + text-indent: 0; + font-family: $font-family-sans; + font-weight: 900; + margin-right: $base-line-height * 0.5rem; +} + +.dropcap-container { + text-indent: -0.5rem; + &[data-dropcap="A"], + &[data-dropcap="L"] { + text-indent: -1rem; + } + + &:first-word { + background-color: blue; + } + + // Temp + text-transform: lowercase; + .caps { + text-transform: lowercase !important; + font-feature-settings: normal; + } +} diff --git a/src/js/index.js b/src/js/index.js index 46e41de..5c3d7c0 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,15 +1,24 @@ var vagueTime = require('vague-time') require('smoothscroll') +require('dropcap.js') +var mustard = mustard || false + // Check if we cut the mustard inline, // otherwise let’s do it again I guess if (mustard || 'querySelector' in window.document) { - var tags = document.getElementsByClassName('js-dateFuzzy') - for (var i = tags.length - 1; i >= 0; i--) { - var dateTime = new Date(tags[i].getAttribute('datetime')) - tags[i].innerHTML = vagueTime.get({ + var elDateFuzzy = document.getElementsByClassName('js-dateFuzzy') + var elDropcap = document.querySelectorAll('.js-dropcap') + + for (var i = elDateFuzzy.length - 1; i >= 0; i--) { + var dateTime = new Date(elDateFuzzy[i].getAttribute('datetime')) + elDateFuzzy[i].innerHTML = vagueTime.get({ to: dateTime, from: Date.now() }) } + + window.Dropcap.layout(elDropcap, 3) + + } From 16b0c3133b5240b83a007fa90bfab0edf0eee219 Mon Sep 17 00:00:00 2001 From: Kenneth Ormandy Date: Mon, 3 Aug 2015 02:29:02 -0700 Subject: [PATCH 3/3] Adds beginnings of incomplete dropcap wrapping helper --- _helpers/dropwrap.js | 22 ++++++++++++++++++++++ _templates/post.hbs | 6 +++++- 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 _helpers/dropwrap.js diff --git a/_helpers/dropwrap.js b/_helpers/dropwrap.js new file mode 100644 index 0000000..744c6ae --- /dev/null +++ b/_helpers/dropwrap.js @@ -0,0 +1,22 @@ +var cheerio = require('cheerio') + +module.exports = (function (content) { + $ = cheerio.load(content) + + // var lead = $('p').get(0) + // var dropcap = lead.substring(0, 1) + // lead = dropcap + + // $('p:first-child').get(0).prepend($('').html(dropacp)) + + // $lead + // .html(dropcap.substring(1)) + // .addClass('dropcap-container') + // .attr('data-dropcap', $(dropcap).text()) + // .prepend($('') + // .html(dropcap) + // .addClass('dropcap js-dropcap')) + + + return $.html() +}) diff --git a/_templates/post.hbs b/_templates/post.hbs index 38a2111..b094883 100644 --- a/_templates/post.hbs +++ b/_templates/post.hbs @@ -27,7 +27,11 @@
- {{{ quotelength contents }}} + {{#if dropcap }} + {{{ dropwrap contents }}}{{!-- Need to add quotelength back in here too --}} + {{ else }} + {{{ quotelength contents }}} + {{/if }}