add feature-tweetquote flag and twitter-like blockquote styling

5 files changed, 48 insertions, 9 deletions

diff --git a/exampleSite/content/features.md b/exampleSite/content/features.md
index 20a9e18..abb58f7 100644
--- a/exampleSite/content/features.md
+++ b/exampleSite/content/features.md
@@ -83,26 +83,27 @@ For brevity, the `feature-` prefix is omitted, but all of Story's classes have t
 
 | Feature            | Explanation                                                                                 | Implementation |
 |--------------------|---------------------------------------------------------------------------------------------|----------------|
-| [3dbook-covers](/images)       | Styles images to resemble a hardcover book                                                | JS + CSS       |
+| [3dbook-covers](/images)       | Styles images to resemble a hardcover book                                                  | JS + CSS       |
 | [figcaption](/figures)         | Transforms images into captioned figures                                                    | JS + CSS       |
 | [figcaption-hidden](/figures)  | Hides figure captions, revealing them on mouseover                                          | CSS            |
 | [figcaption-visible](/figures) | Formats figure captions visibly                                                             | CSS            |
 | [figlink](/figures)            | Links text like "Figure/Table 3" to the corresponding figure or table                       | JS             |
 | [fignum](/figures)             | Auto-numbers figures and tables                                                             | CSS            |
-| [h3-cl](/typography)           | Adds CSS `clear: left` to all `<h3>` tags | CSS |
-| [h3-cr](/typography)           | Adds CSS `clear: right` to all `<h3>` tags | CSS |
-| [h3-cb](/typography)           | Adds CSS `clear: both` to all `<h3>` tags | CSS |
+| [h3-cl](/typography)           | Adds CSS `clear: left` to all `<h3>` tags                                                   | CSS            |
+| [h3-cr](/typography)           | Adds CSS `clear: right` to all `<h3>` tags                                                  | CSS            |
+| [h3-cb](/typography)           | Adds CSS `clear: both` to all `<h3>` tags                                                   | CSS            |
 | [highlight](/typography)       | Applies syntax highlighting to code blocks, using HighlightJS                               | JS + CSS       |
-| [hrdinkus](/typography)        | Styles `<hr>` elements as a dinkus (three asterisks)                                      | CSS            |
-| [hrfleuron](/typography)       | Styles `<hr>` elements as a fleuron (&#10086;)                                            | CSS            |
+| [hrdinkus](/typography)        | Styles `<hr>` elements as a dinkus (three asterisks)                                        | CSS            |
+| [hrfleuron](/typography)       | Styles `<hr>` elements as a fleuron (&#10086;)                                              | CSS            |
 | [hyphenate](/typography)       | Enables line-breaks and hyphenation of text via the browser                                 | CSS            |
 | [justify](/typography)         | Aligns text with full-justification                                                         | CSS            |
 | [math](/math)                  | Enables LaTeX math typesetting using KaTeX                                                  | JS             |
 | [music](/music)                | Enables rendering abc notation as sheet music with abcjs                                    | JS             |
 | [nohdr](/images/)              | Disables header images locally; when applied globally, disables preview thumbnails in lists | Hugo           |
-| [subtitle](/typography)        | Enabled by default; disable to hide page subtitles | CSS
-| [tablefig](/figures)           | Styles tables similar to scientific papers                                                | JS + CSS       |
+| [subtitle](/typography)        | Enabled by default; disable to hide page subtitles                                          | CSS            |
+| [tablefig](/figures)           | Styles tables similar to scientific papers                                                  | JS + CSS       |
 | [tablefw](/figures)            | Sets table cells in a font with fixed-width numerals                                        | CSS            |
-| titlecase                      | Not enabled by default; Transforms All Content Titles to Titlecase                                                  | Hugo           |
+| titlecase                      | Not enabled by default; Transforms All Content Titles to Titlecase                          | Hugo           |
+| [tweetquote](/typography)      | Renders a blockquote in a simplistic tweet style, if it follows conventions                 | JS + CSS       |
 
 Read next: [Story's author biographies](/author-profiles/).
diff --git a/exampleSite/content/typography.md b/exampleSite/content/typography.md
index 9f129ec..a10e6c6 100644
--- a/exampleSite/content/typography.md
+++ b/exampleSite/content/typography.md
@@ -10,6 +10,7 @@ classes:
 - feature-hyphenate
 - feature-justify
 - feature-highlight
+- feature-tweetquote
 categories:
 - Demo
 ---
@@ -88,6 +89,14 @@ And an ordered list:
 1. Item two
 1. Item three is longer. I thought I would sail about a little and see the unimaginative incomprehensibilities of the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. (This is a justification and hyphenation demo.)
 
+### Quotes That Link To Tweets
+
+If you don't like embedding tweets, Story has a cleaner way to quote and link to a tweet. Just blockquote the content and end it with a paragraph containing the author's name and the tweet's permalink, and enable the `feature-tweetquote` flag. Story will transform the quote to resemble a simplistic tweet styling. If the flag isn't enabled, normal blockquote styling applies.
+
+> Monitoring tells you whether the system works. Observability lets you ask why it's not working.
+> 
+> [Baron Sc​hwartz](https://twitter.com/xaprb/status/921004656402321408)
+
 <script type="text/javascript">
 $( "#hyph" ).click(function() {
    $("body").toggleClass("feature-hyphenate");
diff --git a/static/css/story.css b/static/css/story.css
index f56fe9d..ca486e4 100644
--- a/static/css/story.css
+++ b/static/css/story.css
@@ -217,6 +217,14 @@ body.feature-fignum table caption::before {
   border-radius: 100%;
   margin: 0 1rem 1rem 0;
 }
+blockquote.tweet {
+	border: 1px solid #e1e8ed;
+	border-radius: 5px;
+  padding: 4px 20px;
+}
+blockquote.tweet p:last-child {
+	text-align: right !important;
+}
 .pagination li {
   display: inline-block;
 }
diff --git a/static/css/story.less b/static/css/story.less
index 1336d9a..6f0febc 100644
--- a/static/css/story.less
+++ b/static/css/story.less
@@ -248,6 +248,15 @@ body {
 	margin: 0 1rem 1rem 0;
 }
 
+blockquote.tweet {
+	border: 1px solid #e1e8ed;
+	border-radius: 5px;
+	padding: 4px 20px;
+	p:last-child {
+		text-align: right !important;
+	}
+}
+
 .pagination li {
 	display: inline-block;
 	a {
diff --git a/static/js/story.js b/static/js/story.js
index 5f5432b..ff247f5 100644
--- a/static/js/story.js
+++ b/static/js/story.js
@@ -38,6 +38,18 @@ $( function() {
    }
 });
 
+// Render tweet-styled blockquotes, if <body> has the class feature-tweetquote and the blockquote ends
+// with a twitter permalink URL.
+$( function() {
+   if ( $( "body.feature-tweetquote:not(.feature-notweetquote)" ).length ) {
+      $("blockquote p:last-child a[href*='twitter.com']").each(function(i, e){
+         $(this.parentElement.parentElement).addClass("tweet sans-serif mw6");
+         $(this).addClass("no-underline link dim");
+         $(this).append(' <i class="fab fa-twitter fa-lg">');
+      });
+   }
+});
+
 // Render perspective book images, if <body> has the class
 // feature-3dbook-covers
 $( function() {