Skip to content

Commit

Permalink
feat(#74): add admonition blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
jefBinomed committed Mar 29, 2024
1 parent 23c4010 commit 5d204c2
Show file tree
Hide file tree
Showing 7 changed files with 295 additions and 0 deletions.
61 changes: 61 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ You can preview it here : https://sfeir-school-theme.netlify.com/
- [Helpers](https://github.com/sfeir-open-source/sfeir-school-theme/#helpers)
- [List with fragments ](https://github.com/sfeir-open-source/sfeir-school-theme/#list-with-fragments)
- [Feather icons ](https://github.com/sfeir-open-source/sfeir-school-theme/#feather-icons)
- [Admonition blocks ](https://github.com/sfeir-open-source/sfeir-school-theme/#admonition-blocks)
- [Print the slides](https://github.com/sfeir-open-source/sfeir-school-theme/#print-the-slides)
- [Releases Notes](https://github.com/sfeir-open-source/sfeir-school-theme/wiki/Releases-Notes)

Expand Down Expand Up @@ -1030,6 +1031,66 @@ Complete list of icons : https://feathericons.com/

![](./docs/images/feather-icons.png)

### Admonition blocks

You can you admonition blocks to highlight some content in your slides. You can use the following classes:

- `abstract`
- `info`
- `tip`
- `note`
- `success`
- `question`
- `warning`
- `failure`
- `danger`
- `important`
- `bug`
- `example`
- `quote`

Simply add the class "admonition" with the tip desired as class to transform the text into admonition. This is target for text!

```md
Mode tip

<!-- .element: class="admonition tip" -->
```

will produce

![](./docs/images/admonition-tip.png)

to do this in html :

```html
<p class="admonition tip">>Mode tip</p>
```

#### Custom Admonition

You can also specify your own icon if you want using 'custom' as class. To specify the icon to use, you will have to add data attribute on your element `data-admonition-icon` with the icon. We recommand you to use Emojis as icon.

There is a default grey background color but if you want, you can customize it using the custom property `--admonition-bg-color` in the style of the element.

```md
Mode custom

<!-- .element: class="admonition custom" data-admonition-icon="🐼 Custom" -->

Mode custom and custom color

<!-- .element: class="admonition custom" data-admonition-icon="🕶️ Custombis" style="--admonition-bg-color:#d7be00;" -->
```

this will produce

![](./docs/images/admonition-custom.png)

Here are all the icons availables and modes :

![](./docs/images/admonition-all.png)

## Print the slides

To print your presentation, simply follow the reveal.js tutorial : [Pdf Export](https://revealjs.com/pdf-export/)
Expand Down
103 changes: 103 additions & 0 deletions demo/markdown/40_helpers.md
Original file line number Diff line number Diff line change
Expand Up @@ -470,3 +470,106 @@ Using markdown image
Using html
<i data-feather="github" ></i> basic icon
```

##==##

# Admonition Blocks

Du texte Admonition en mode informatif mais qui est vraiment assez long et qui du coup nécessite un retour à la ligne

<!-- .element: class="admonition info" -->

<div style="display:grid;grid-template-columns: 1fr 1fr 1fr 1fr ;">
<div>
<p class="admonition abstract">Mode abstract</p>
<p class="admonition tip">Mode tip</p>
<p class="admonition note">Mode note</p>
<p class="admonition success">Mode success</p>
</div>
<div>
<p class="admonition question">Mode question</p>
<p class="admonition warning">Mode warning</p>
<p class="admonition failure">Mode failure</p>
<p class="admonition danger">Mode danger</p>
</div>
<div>
<p class="admonition important">Mode important</p>
<p class="admonition bug">Mode bug</p>
<p class="admonition example">Mode example</p>
<p class="admonition quote">Mode quote</p>
</div>
<div>
<p class="admonition custom" data-admonition-icon="🐼 Custom">Mode custom</p>
<p class="admonition custom" data-admonition-icon="🕶️ Custombis" style="--admonition-bg-color:#d7be00;">Mode custom and custom color</p>
</div>
</div>

##--##

<!-- .slide: class="with-code" -->

# Code to produce / Markdown

```markdown
# Admonition Blocks

Du texte Admonition en mode informatif mais qui est vraiment assez long et qui du coup nécessite un retour à la ligne

<!-- .element: class="admonition info" -->

Mode abstract

<!-- .element: class="admonition abstract" -->

Mode tip

<!-- .element: class="admonition tip" -->

Mode note

<!-- .element: class="admonition note" -->

Mode success

<!-- .element: class="admonition success" -->

Mode question

<!-- .element: class="admonition question" -->

Mode warning

<!-- .element: class="admonition warning" -->

Mode failure

<!-- .element: class="admonition failure" -->

Mode danger

<!-- .element: class="admonition danger" -->

Mode important

<!-- .element: class="admonition important" -->

Mode bug

<!-- .element: class="admonition bug" -->

Mode example

<!-- .element: class="admonition example" -->

Mode quote

<!-- .element: class="admonition quote" -->

Mode custom

<!-- .element: class="admonition custom" data-admonition-icon="🐼 Custom" -->

Mode custom and custom color

<!-- .element: class="admonition custom" data-admonition-icon="🕶️ Custombis" style="--admonition-bg-color:#d7be00;" -->
```
Binary file added docs/images/admonition-all.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/admonition-custom.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/admonition-tip.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 129 additions & 0 deletions src/scss/utils/admonition.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
.reveal .slides section .admonition {
border-left: 7px solid black;
position: relative;
padding-left: 25px;
padding-top: 60px;
//margin-left: 75px;

&:before {
position: absolute;
//left: -75px;
top: 0;
display: flex;
align-items: center;
height: 60px;
font-size: 0.8em;
}

&.note {
border-left-color: #6093f8;
&:before {
color: #6093f8;
content: '📝 Note';
}
}

&.abstract {
border-left-color: #6e9dfa;
&:before {
color: #6e9dfa;
content: '📋 Abstract';
}
}

&.tip {
border-left-color: #33f8d7;
&:before {
color: #33f8d7;
content: '💡 Tip';
}
}

&.info {
border-left-color: #7cddf6;
&:before {
color: #7cddf6;
content: 'ℹ️ Info';
}
}

&.success {
border-left-color: #6ffa8e;
&:before {
color: #6ffa8e;
content: '✅ Success';
}
}

&.question {
border-left-color: #6bf316;
&:before {
color: #6bf316;
content: '? Question';
}
}

&.warning {
border-left-color: #f9ac65;
&:before {
color: #f9ac65;
content: '⚠️ Warning';
}
}

&.failure {
border-left-color: #f86262;
&:before {
color: #f86262;
content: '❌ Failure';
}
}

&.danger {
border-left-color: #fa6178;
&:before {
color: #fa6178;
content: '🔥 Danger';
}
}

&.important {
border-left-color: #f74c4c;
&:before {
color: #f74c4c;
content: '❗ Important';
}
}

&.bug {
border-left-color: #f8597e;
&:before {
color: #f8597e;
content: '🐞 Bug';
}
}

&.example {
border-left-color: #8b61f6;
&:before {
color: #8b61f6;
content: '💻 Example';
}
}

&.quote {
border-left-color: #808080;
&:before {
color: #808080;
content: '💬 Quote';
}
}

&.custom {
border-left-color: var(--admonition-bg-color, #808080);
&:before {
color: var(--admonition-bg-color, #808080);
content: attr(data-admonition-icon);
}
}
}
2 changes: 2 additions & 0 deletions src/scss/utils/helper.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import './admonition.scss';

/**
* IMAGE
*
Expand Down

0 comments on commit 5d204c2

Please sign in to comment.