Skip to content

add Premonition note blocks #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -77,6 +78,7 @@ DEPENDENCIES
jekyll (~> 3.8.6)
jekyll-redirect-from
jekyll-sitemap
premonition (~> 2.0.0)
rake
tzinfo (~> 1.2)
tzinfo-data
Expand Down
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
65 changes: 65 additions & 0 deletions _sass/segment/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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); }
}
3 changes: 2 additions & 1 deletion test.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!

Expand Down