Merge pull request #55 from segmentio/install-premonition

add Premonition note blocks

Author: sanscontext

Gemfile

@@ -13,6 +13,7 @@ end
 group :jekyll_plugins do
   gem 'jekyll-sitemap'
   gem 'jekyll-redirect-from'
+  gem "premonition", "~> 2.0.0"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -48,6 +48,7 @@ GEM
     multipart-post (2.1.1)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
+    premonition (2.0.0)
     public_suffix (3.1.1)
     rake (12.3.3)
     rb-fsevent (0.10.3)
@@ -77,6 +78,7 @@ DEPENDENCIES
   jekyll (~> 3.8.6)
   jekyll-redirect-from
   jekyll-sitemap
+  premonition (~> 2.0.0)
   rake
   tzinfo (~> 1.2)
   tzinfo-data

README.md

@@ -106,6 +106,15 @@ Swiftype is set up as a script in `_layouts/default.html`
 We're using Rouge, set in the `_config.yml`. It's now default for Jekyll 3 and later, so 🎉.
 A list of the cues Rouge accepts can be found [here](https://github.com/rouge-ruby/rouge/wiki/list-of-supported-languages-and-lexers).
 
+# Note Blocks
+We're using [Premonition](https://github.com/lazee/premonition) for our Note blocks. This is stock right now, with four styles: `note`, `info`, `warning`, and `error`. We might build more later.
+
+You'd write a block like this:
+```md
+> warning "I am a warning"
+> The body of the warning goes here. Premonition allows you to write any `Markdown` inside the block.
+```
+
 
 # Frontmatter
 

_config.yml

@@ -28,6 +28,7 @@ defaults:
 plugins:
   - jekyll-sitemap
   - jekyll-redirect-from
+  - premonition
 
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list

_layouts/default.html

@@ -25,6 +25,7 @@
     <meta class="swiftype" name="title" data-type="string" content="{{page.title}}" />
     <meta class="swiftype" name="priority" data-type="integer" content="2" />
   {% endif %}
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
 
   <link rel="icon" sizes="192x192" href="https://segment.com/build/public/public/images/touch-icon.png">
   <link rel="apple-touch-icon" href="https://segment.com/build/public/public/images/touch-icon.png">

_sass/segment/_layout.scss

@@ -518,3 +518,68 @@ footer > #data-collection a {
     margin-bottom: 0;
   }
 }
+
+.premonition {
+  $default-color: #5bc0de;
+  $default-light-color: #e3edf2;
+  $info-color: #50af51;
+  $info-light-color: #f3f8f3;
+  $warning-color: #f0ad4e;
+  $warning-light-color: #fcf8f2;
+  $error-color: #d9534f;
+  $error-light-color: #fdf7f7;
+  $content-color: rgba(0,0,0,0.5);
+
+  display: grid;
+  grid-template-columns: 43px auto;
+  padding-top: 13px;
+  padding-bottom: 6px;
+  margin: 30px 0 30px 0;
+  background-color: $default-light-color;
+  border-left: 4px solid $default-color;
+  color: $default-color;
+
+  code {
+    background-color: #fff;
+    color: $default-color;
+  }
+
+  .header {
+    font-weight: 700;
+    font-size: 15px;
+    color: $default-color;
+  }
+
+  .fa {
+    font-size: 18px;
+    opacity: .3;
+    padding-top: 2px;
+    padding-left: 20px;
+  }
+
+  .content {
+    color: $content-color;
+    padding-right: 40px;
+  }
+
+  @mixin box-type($c, $lc) {
+    background-color: $lc;
+    color: $c;
+    border-color: $c;
+
+    a {
+      color: $c;
+      text-decoration: underline;
+    }
+    code {
+      color: $c;
+    }
+    .header {
+      color: $c;
+    }
+  }
+
+  &.info { @include box-type($info-color, $info-light-color); }
+  &.warning { @include box-type($warning-color, $warning-light-color); }
+  &.error { @include box-type($error-color, $error-light-color); }
+}

test.md

@@ -14,8 +14,9 @@ redirect_from:
 - /guides/testing
 ---
 
+> note "This is a note"
+> Some note text foo bar baz
 
-{% include content/connection-modes.md %}
 
 Welcome to the documentation test page!