From 98f5f7b7799927bcd6bb477446c849427bccf9eb Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Thu, 26 Dec 2024 18:46:53 +0100 Subject: [PATCH 01/20] tables test --- book/basic-features/badges.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 book/basic-features/badges.md diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md new file mode 100644 index 0000000..e69de29 From 185b4c7cdd9a0e397b1bc9d8a2e684f9d5ba9874 Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Thu, 26 Dec 2024 18:51:31 +0100 Subject: [PATCH 02/20] toc --- book/_toc.yml | 1 + book/basic-features/badges.md | 92 +++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) diff --git a/book/_toc.yml b/book/_toc.yml index 257e1e3..b3ea6ca 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -38,6 +38,7 @@ parts: - file: basic-features/Code_block_figures - file: basic-features/banner title: Banner or Announcement + - file: basic-features/badges.md - file: basic-features/external-features.md sections: - file: basic-features/hypothesis.md diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index e69de29..2ba34f6 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -0,0 +1,92 @@ +# Badges, Buttons & Icons + +Jupyter book provides a range of features which are visually appealing and functional. These elements can enhance the interactivity and visual design of your book, offering additional information or links in a compact and visually engaging way. The badges, buttons and icons are made available through Sphinx and they themselves wrote a [documentation](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html) about it. + +## Badges + +Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. There are three types of badges: plain, link and reference. They are fully customizable and can simply be added with Markdown syntax: + +| Badge Preview | Code Syntax | +|-----------------------------------------------------------------|-------------------------------| +| {bdg-primary}`plain_text` | `{bdg-primary}`plain_text`` | +| {bdg-link-primary}`https://teachbooks.io/` | `{bdg-link-primary}`https://teachbooks.io/`` | +| {bdg-link-primary}`TeachBooks ` | `{bdg-link-primary}`TeachBooks `` | +| {bdg-ref-primary}`my_ref` | `{bdg-ref-primary}`my_ref`` | + + +| Badge Preview | Code Syntax | +|-------------------------------|-------------------------------| +| {bdg}`my_text` | `{bdg}`my_text`` | +| {bdg-primary}`my_text` | `{bdg-primary}`my_text`` | +| {bdg-primary-line}`my_text` | `{bdg-primary-line}`my_text`` | +| {bdg-secondary}`my_text` | `{bdg-secondary}`my_text`` | +| {bdg-secondary-line}`my_text` | `{bdg-secondary-line}my_text` | +| {bdg-success}`my_text` | `{bdg-success}my_text` | +| {bdg-success-line}`my_text` | `{bdg-success-line}my_text` | +| {bdg-info}`my_text` | `{bdg-info}my_text` | +| {bdg-info-line}`my_text` | `{bdg-info-line}my_text` | +| {bdg-warning}`my_text` | `{bdg-warning}my_text` | +| {bdg-warning-line}`my_text` | `{bdg-warning-line}my_text` | +| {bdg-danger}`my_text` | `{bdg-danger}my_text` | +| {bdg-danger-line}`my_text` | `{bdg-danger-line}my_text` | +| {bdg-light}`my_text` | `{bdg-light}my_text` | +| {bdg-light-line}`my_text` | `{bdg-light-line}my_text` | +| {bdg-muted}`my_text` | `{bdg-muted}my_text` | +| {bdg-muted-line}`my_text` | `{bdg-muted-line}my_text` | +| {bdg-dark}`my_text` | `{bdg-dark}my_text` | +| {bdg-dark-line}`my_text` | `{bdg-dark-line}my_text` | +| {bdg-white}`my_text` | `{bdg-white}my_text` | +| {bdg-white-line}`my_text` | `{bdg-white-line}my_text` | +| {bdg-black}`my_text` | `{bdg-black}my_text` | +| {bdg-black-line}`my_text` | `{bdg-black-line}my_text` | + + +## Buttons +Buttons provide a way to create clickable elements that are more attractive than links. Jupyter-Book supports buttons using Markdown or HTML, making them highly customizable. + +Adding Buttons with Markdown +To create a button in Markdown, you can use HTML for full flexibility. For example: + +markdown +Code kopiëren +Visit Jupyter-Book +This will produce a styled button that links to the Jupyter-Book site. + +Predefined Button Classes +Jupyter-Book uses Bootstrap for styling, so you can apply classes such as: + +btn-primary (blue) +btn-secondary (gray) +btn-success (green) +btn-danger (red) +btn-warning (yellow) +You can experiment with these styles to create buttons that align with your book's theme. + +3. Icons +Icons can be included to visually represent actions or categories. Jupyter-Book supports FontAwesome icons, which can be integrated using HTML syntax. + +Adding Icons +To add an icon, use the following syntax: + +markdown +Code kopiëren + Jupyter-Book +This example adds a "book" icon before the text "Jupyter-Book." + +Combining Buttons and Icons +Icons can also be included within buttons for a modern, professional look: + +markdown +Code kopiëren + + Download Book + +This button includes a "download" icon alongside text. + +4. Use Cases +Here are some practical use cases for badges, buttons, and icons in a Jupyter-Book: + +Badges: Highlight software version, repository status, or contributors. +Buttons: Link to key sections of your book, such as downloads or external resources. +Icons: Add visual appeal or clarity to navigation links or labels. +Incorporating these elements into your Jupyter-Book improves both the aesthetic and functionality of your book, creating a more engaging experience for readers. \ No newline at end of file From 868541ce8e2cf38d5750c71b67fb11337abefabc Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Thu, 26 Dec 2024 19:07:30 +0100 Subject: [PATCH 03/20] badges done --- book/basic-features/badges.md | 52 ++++++++++++++--------------------- 1 file changed, 21 insertions(+), 31 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 2ba34f6..791dae0 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -6,39 +6,29 @@ Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. There are three types of badges: plain, link and reference. They are fully customizable and can simply be added with Markdown syntax: -| Badge Preview | Code Syntax | -|-----------------------------------------------------------------|-------------------------------| -| {bdg-primary}`plain_text` | `{bdg-primary}`plain_text`` | -| {bdg-link-primary}`https://teachbooks.io/` | `{bdg-link-primary}`https://teachbooks.io/`` | -| {bdg-link-primary}`TeachBooks ` | `{bdg-link-primary}`TeachBooks `` | -| {bdg-ref-primary}`my_ref` | `{bdg-ref-primary}`my_ref`` | +| Types of badge | Code Syntax | +|-----------------------------------------------------------------|------------------------------------------------------------------------| +| {bdg-primary}`plain_text` | ` {bdg-primary}`plain_text` ` | +| {bdg-link-primary}`https://teachbooks.io/` | ` {bdg-link-primary}`https://teachbooks.io/` ` | +| {bdg-link-primary}`TeachBooks ` | ` {bdg-link-primary}`TeachBooks < https://https://teachbooks.io/ > ` ` | +| {bdg-ref-primary}`my_ref` | `{bdg-ref-primary}`my_ref` ` | +Here's an overview of all the available colours: -| Badge Preview | Code Syntax | -|-------------------------------|-------------------------------| -| {bdg}`my_text` | `{bdg}`my_text`` | -| {bdg-primary}`my_text` | `{bdg-primary}`my_text`` | -| {bdg-primary-line}`my_text` | `{bdg-primary-line}`my_text`` | -| {bdg-secondary}`my_text` | `{bdg-secondary}`my_text`` | -| {bdg-secondary-line}`my_text` | `{bdg-secondary-line}my_text` | -| {bdg-success}`my_text` | `{bdg-success}my_text` | -| {bdg-success-line}`my_text` | `{bdg-success-line}my_text` | -| {bdg-info}`my_text` | `{bdg-info}my_text` | -| {bdg-info-line}`my_text` | `{bdg-info-line}my_text` | -| {bdg-warning}`my_text` | `{bdg-warning}my_text` | -| {bdg-warning-line}`my_text` | `{bdg-warning-line}my_text` | -| {bdg-danger}`my_text` | `{bdg-danger}my_text` | -| {bdg-danger-line}`my_text` | `{bdg-danger-line}my_text` | -| {bdg-light}`my_text` | `{bdg-light}my_text` | -| {bdg-light-line}`my_text` | `{bdg-light-line}my_text` | -| {bdg-muted}`my_text` | `{bdg-muted}my_text` | -| {bdg-muted-line}`my_text` | `{bdg-muted-line}my_text` | -| {bdg-dark}`my_text` | `{bdg-dark}my_text` | -| {bdg-dark-line}`my_text` | `{bdg-dark-line}my_text` | -| {bdg-white}`my_text` | `{bdg-white}my_text` | -| {bdg-white-line}`my_text` | `{bdg-white-line}my_text` | -| {bdg-black}`my_text` | `{bdg-black}my_text` | -| {bdg-black-line}`my_text` | `{bdg-black-line}my_text` | +| Full Colour | Code Syntax | Colour Outline | Code Syntax | +|-------------------------------|-------------------------------|-------------------------------|-----------------------------------| +| {bdg}`my_text` | ` {bdg}`my_text` ` | | | +| {bdg-primary}`my_text` | ` {bdg-primary}`my_text` ` | {bdg-primary-line}`my_text` | ` {bdg-primary-line}`my_text` ` | +| {bdg-secondary}`my_text` | `{bdg-secondary}`my_text`` | {bdg-secondary-line}`my_text` | ` {bdg-secondary-line}`my_text` ` | +| {bdg-success}`my_text` | `{bdg-success}my_text` | {bdg-success-line}`my_text` | ` {bdg-success-line}`my_text` ` | +| {bdg-info}`my_text` | `{bdg-info}my_text` | {bdg-info-line}`my_text` | ` {bdg-info-line}`my_text` ` | +| {bdg-warning}`my_text` | `{bdg-warning}my_text` | {bdg-warning-line}`my_text` | ` {bdg-warning-line}`my_text` ` | +| {bdg-danger}`my_text` | `{bdg-danger}my_text` | {bdg-danger-line}`my_text` | ` {bdg-danger-line}`my_text` ` | +| {bdg-light}`my_text` | `{bdg-light}my_text` | {bdg-light-line}`my_text` | ` {bdg-light-line}`my_text` ` | +| {bdg-muted}`my_text` | `{bdg-muted}my_text` | {bdg-muted-line}`my_text` | ` {bdg-muted-line}`my_text` ` | +| {bdg-dark}`my_text` | `{bdg-dark}my_text` | {bdg-dark-line}`my_text` | ` {bdg-dark-line}`my_text` ` | +| {bdg-white}`my_text` | `{bdg-white}my_text` | {bdg-white-line}`my_text` | ` {bdg-white-line}`my_text` ` | +| {bdg-black}`my_text` | `{bdg-black}my_text` | {bdg-black-line}`my_text` | ` {bdg-black-line}`my_text` ` | ## Buttons From 21f74d384ce75fa10423fde7650ece928b48c0da Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Thu, 26 Dec 2024 19:15:50 +0100 Subject: [PATCH 04/20] fix? --- book/basic-features/badges.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 791dae0..de707af 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -8,7 +8,7 @@ Badges are small visual indicators often used to convey concise or important inf | Types of badge | Code Syntax | |-----------------------------------------------------------------|------------------------------------------------------------------------| -| {bdg-primary}`plain_text` | ` {bdg-primary}`plain_text` ` | +| {bdg-primary}`plain_text` | ``` {bdg-primary}`plain_text` ``` | | {bdg-link-primary}`https://teachbooks.io/` | ` {bdg-link-primary}`https://teachbooks.io/` ` | | {bdg-link-primary}`TeachBooks ` | ` {bdg-link-primary}`TeachBooks < https://https://teachbooks.io/ > ` ` | | {bdg-ref-primary}`my_ref` | `{bdg-ref-primary}`my_ref` ` | From fe3a9d3f03689592b31f11662f8bfddb9c0e6bfd Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Thu, 26 Dec 2024 19:23:43 +0100 Subject: [PATCH 05/20] changes? --- book/basic-features/badges.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index de707af..77ea002 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -6,12 +6,12 @@ Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. There are three types of badges: plain, link and reference. They are fully customizable and can simply be added with Markdown syntax: -| Types of badge | Code Syntax | -|-----------------------------------------------------------------|------------------------------------------------------------------------| -| {bdg-primary}`plain_text` | ``` {bdg-primary}`plain_text` ``` | -| {bdg-link-primary}`https://teachbooks.io/` | ` {bdg-link-primary}`https://teachbooks.io/` ` | -| {bdg-link-primary}`TeachBooks ` | ` {bdg-link-primary}`TeachBooks < https://https://teachbooks.io/ > ` ` | -| {bdg-ref-primary}`my_ref` | `{bdg-ref-primary}`my_ref` ` | +| Type | Badge | Code Syntax | +|--------|----------------------------------------------------------|------------------------------------------------------------------------| +| Plain | {bdg-primary}`plain_text` | ```{code} {bdg-primary}`plain_text` ``` +| Link | {bdg-link-primary}`https://teachbooks.io/` | ` {bdg-link-primary}`https://teachbooks.io/` ` | +| Hidden Link | {bdg-link-primary}`TeachBooks ` | ` {bdg-link-primary}`TeachBooks < https://https://teachbooks.io/ > ` ` | +| Reference | {bdg-ref-primary}`my_ref` | `{bdg-ref-primary}`my_ref` ` | Here's an overview of all the available colours: From 47a871f780c7d98dc67d9985f0b2f74dfa2d563a Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Thu, 26 Dec 2024 19:27:35 +0100 Subject: [PATCH 06/20] Update badges.md --- book/basic-features/badges.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 77ea002..a7c64fa 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -8,10 +8,10 @@ Badges are small visual indicators often used to convey concise or important inf | Type | Badge | Code Syntax | |--------|----------------------------------------------------------|------------------------------------------------------------------------| -| Plain | {bdg-primary}`plain_text` | ```{code} {bdg-primary}`plain_text` ``` -| Link | {bdg-link-primary}`https://teachbooks.io/` | ` {bdg-link-primary}`https://teachbooks.io/` ` | -| Hidden Link | {bdg-link-primary}`TeachBooks ` | ` {bdg-link-primary}`TeachBooks < https://https://teachbooks.io/ > ` ` | -| Reference | {bdg-ref-primary}`my_ref` | `{bdg-ref-primary}`my_ref` ` | +| Plain | {bdg-primary}`plain_text` | ``` {bdg-primary}`plain_text` ``` +| Link | {bdg-link-primary}`https://teachbooks.io/` | ``` {bdg-link-primary}`https://teachbooks.io/` ``` | +| Hidden Link | {bdg-link-primary}`TeachBooks ` | ``` {bdg-link-primary}`TeachBooks < https://https://teachbooks.io/ > ` ``` | +| Reference | {bdg-ref-primary}`my_ref` | ``` {bdg-ref-primary}`my_ref` ``` | Here's an overview of all the available colours: From 6f767afab44ac837ed7fda29a51395a7a9a792ef Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Thu, 26 Dec 2024 19:34:56 +0100 Subject: [PATCH 07/20] badges final --- book/basic-features/badges.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index a7c64fa..aa86930 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -10,25 +10,25 @@ Badges are small visual indicators often used to convey concise or important inf |--------|----------------------------------------------------------|------------------------------------------------------------------------| | Plain | {bdg-primary}`plain_text` | ``` {bdg-primary}`plain_text` ``` | Link | {bdg-link-primary}`https://teachbooks.io/` | ``` {bdg-link-primary}`https://teachbooks.io/` ``` | -| Hidden Link | {bdg-link-primary}`TeachBooks ` | ``` {bdg-link-primary}`TeachBooks < https://https://teachbooks.io/ > ` ``` | +| Hidden Link | {bdg-link-primary}`TeachBooks ` | ``` {bdg-link-primary}`TeachBooks ` ``` | | Reference | {bdg-ref-primary}`my_ref` | ``` {bdg-ref-primary}`my_ref` ``` | Here's an overview of all the available colours: -| Full Colour | Code Syntax | Colour Outline | Code Syntax | -|-------------------------------|-------------------------------|-------------------------------|-----------------------------------| -| {bdg}`my_text` | ` {bdg}`my_text` ` | | | -| {bdg-primary}`my_text` | ` {bdg-primary}`my_text` ` | {bdg-primary-line}`my_text` | ` {bdg-primary-line}`my_text` ` | -| {bdg-secondary}`my_text` | `{bdg-secondary}`my_text`` | {bdg-secondary-line}`my_text` | ` {bdg-secondary-line}`my_text` ` | -| {bdg-success}`my_text` | `{bdg-success}my_text` | {bdg-success-line}`my_text` | ` {bdg-success-line}`my_text` ` | -| {bdg-info}`my_text` | `{bdg-info}my_text` | {bdg-info-line}`my_text` | ` {bdg-info-line}`my_text` ` | -| {bdg-warning}`my_text` | `{bdg-warning}my_text` | {bdg-warning-line}`my_text` | ` {bdg-warning-line}`my_text` ` | -| {bdg-danger}`my_text` | `{bdg-danger}my_text` | {bdg-danger-line}`my_text` | ` {bdg-danger-line}`my_text` ` | -| {bdg-light}`my_text` | `{bdg-light}my_text` | {bdg-light-line}`my_text` | ` {bdg-light-line}`my_text` ` | -| {bdg-muted}`my_text` | `{bdg-muted}my_text` | {bdg-muted-line}`my_text` | ` {bdg-muted-line}`my_text` ` | -| {bdg-dark}`my_text` | `{bdg-dark}my_text` | {bdg-dark-line}`my_text` | ` {bdg-dark-line}`my_text` ` | -| {bdg-white}`my_text` | `{bdg-white}my_text` | {bdg-white-line}`my_text` | ` {bdg-white-line}`my_text` ` | -| {bdg-black}`my_text` | `{bdg-black}my_text` | {bdg-black-line}`my_text` | ` {bdg-black-line}`my_text` ` | +| Full Colour | Code Syntax | Colour Outline | Code Syntax | +|-------------------------------|----------------------------------|-------------------------------|---------------------------------------| +| {bdg}`my_text` | ``` {bdg}`my_text` ``` | | | +| {bdg-primary}`my_text` | ``` {bdg-primary}`my_text` ``` | {bdg-primary-line}`my_text` | ``` {bdg-primary-line}`my_text` ``` | +| {bdg-secondary}`my_text` | ``` {bdg-secondary}`my_text` ``` | {bdg-secondary-line}`my_text` | ``` {bdg-secondary-line}`my_text` ``` | +| {bdg-success}`my_text` | ``` {bdg-success}my_text` ``` | {bdg-success-line}`my_text` | ``` {bdg-success-line}`my_text` ``` | +| {bdg-info}`my_text` | ``` {bdg-info}my_text` ``` | {bdg-info-line}`my_text` | ``` {bdg-info-line}`my_text` ``` | +| {bdg-warning}`my_text` | ``` {bdg-warning}my_text` ``` | {bdg-warning-line}`my_text` | ``` {bdg-warning-line}`my_text` ``` | +| {bdg-danger}`my_text` | ``` {bdg-danger}my_text` ``` | {bdg-danger-line}`my_text` | ``` {bdg-danger-line}`my_text` ``` | +| {bdg-light}`my_text` | ``` {bdg-light}my_text` ``` | {bdg-light-line}`my_text` | ``` {bdg-light-line}`my_text` ``` | +| {bdg-muted}`my_text` | ``` {bdg-muted}my_text` ``` | {bdg-muted-line}`my_text` | ``` {bdg-muted-line}`my_text` ``` | +| {bdg-dark}`my_text` | ``` {bdg-dark}my_text` ``` | {bdg-dark-line}`my_text` | ``` {bdg-dark-line}`my_text` ``` | +| {bdg-white}`my_text` | ``` {bdg-white}my_text` ``` | {bdg-white-line}`my_text` | ``` {bdg-white-line}`my_text` ``` | +| {bdg-black}`my_text` | ``` {bdg-black}my_text` ``` | {bdg-black-line}`my_text` | ``` {bdg-black-line}`my_text` ``` | ## Buttons From 4ac627aea3c1df83aff5107042face625e1a2e3b Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Sat, 28 Dec 2024 10:54:00 +0100 Subject: [PATCH 08/20] buttins --- book/basic-features/badges.md | 42 ++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index aa86930..b2cbe3b 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -32,27 +32,37 @@ Here's an overview of all the available colours: ## Buttons -Buttons provide a way to create clickable elements that are more attractive than links. Jupyter-Book supports buttons using Markdown or HTML, making them highly customizable. -Adding Buttons with Markdown -To create a button in Markdown, you can use HTML for full flexibility. For example: +Buttons provide a way to create clickable elements that are more attractive than links. Jupyter-Book supports buttons using Markdown making them highly customizable. It is possible to link to external websites as well as chapters within your book. To link to an external page, `{button-link}` and `{button-ref}` must be used when linking to a different part of your book. -markdown -Code kopiëren -Visit Jupyter-Book -This will produce a styled button that links to the Jupyter-Book site. +The basic code syntax for creating a button is as follows: -Predefined Button Classes -Jupyter-Book uses Bootstrap for styling, so you can apply classes such as: +```{button-link} https://teachbooks.io +``` -btn-primary (blue) -btn-secondary (gray) -btn-success (green) -btn-danger (red) -btn-warning (yellow) -You can experiment with these styles to create buttons that align with your book's theme. -3. Icons +```{button-red} book\intro.md +``` + +Buttons can be customized in markdown in a similar way as figures. You can experiment with these styles to create buttons that align with your book's theme. Here are the set of parameters which can be customized: + + +| Parameter | Options | Functionality | +|-------------------------------|----------------------------------|-------------------------------| +| colour | primary, secondary, success, danger, warning, info, light, dark, muted | Set the color of the button (background and font)| +| outline | / | white button, coloured outline| +| align | left, right, center | Align the button on the page | +| expand | / | Expand to fit parent width | +| click-parent | / | Make parent container also clickable | +| tooltip | / | Add tooltip on hover | +| shadow | / | Add shadow CSS | +| class | / | Additional CSS classes | + +Finally here are some examples: + + +## Icons + Icons can be included to visually represent actions or categories. Jupyter-Book supports FontAwesome icons, which can be integrated using HTML syntax. Adding Icons From 8a460e5d3ab0c7c1bc6d2c3dd4f2f8cd430984af Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Sat, 28 Dec 2024 11:01:39 +0100 Subject: [PATCH 09/20] Update badges.md --- book/basic-features/badges.md | 40 ++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index b2cbe3b..d6e5d62 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -20,15 +20,15 @@ Here's an overview of all the available colours: | {bdg}`my_text` | ``` {bdg}`my_text` ``` | | | | {bdg-primary}`my_text` | ``` {bdg-primary}`my_text` ``` | {bdg-primary-line}`my_text` | ``` {bdg-primary-line}`my_text` ``` | | {bdg-secondary}`my_text` | ``` {bdg-secondary}`my_text` ``` | {bdg-secondary-line}`my_text` | ``` {bdg-secondary-line}`my_text` ``` | -| {bdg-success}`my_text` | ``` {bdg-success}my_text` ``` | {bdg-success-line}`my_text` | ``` {bdg-success-line}`my_text` ``` | -| {bdg-info}`my_text` | ``` {bdg-info}my_text` ``` | {bdg-info-line}`my_text` | ``` {bdg-info-line}`my_text` ``` | -| {bdg-warning}`my_text` | ``` {bdg-warning}my_text` ``` | {bdg-warning-line}`my_text` | ``` {bdg-warning-line}`my_text` ``` | -| {bdg-danger}`my_text` | ``` {bdg-danger}my_text` ``` | {bdg-danger-line}`my_text` | ``` {bdg-danger-line}`my_text` ``` | -| {bdg-light}`my_text` | ``` {bdg-light}my_text` ``` | {bdg-light-line}`my_text` | ``` {bdg-light-line}`my_text` ``` | -| {bdg-muted}`my_text` | ``` {bdg-muted}my_text` ``` | {bdg-muted-line}`my_text` | ``` {bdg-muted-line}`my_text` ``` | -| {bdg-dark}`my_text` | ``` {bdg-dark}my_text` ``` | {bdg-dark-line}`my_text` | ``` {bdg-dark-line}`my_text` ``` | -| {bdg-white}`my_text` | ``` {bdg-white}my_text` ``` | {bdg-white-line}`my_text` | ``` {bdg-white-line}`my_text` ``` | -| {bdg-black}`my_text` | ``` {bdg-black}my_text` ``` | {bdg-black-line}`my_text` | ``` {bdg-black-line}`my_text` ``` | +| {bdg-success}`my_text` | ``` {bdg-success}`my_text` ``` | {bdg-success-line}`my_text` | ``` {bdg-success-line}`my_text` ``` | +| {bdg-info}`my_text` | ``` {bdg-info}`my_text` ``` | {bdg-info-line}`my_text` | ``` {bdg-info-line}`my_text` ``` | +| {bdg-warning}`my_text` | ``` {bdg-warning}`my_text` ``` | {bdg-warning-line}`my_text` | ``` {bdg-warning-line}`my_text` ``` | +| {bdg-danger}`my_text` | ``` {bdg-danger}`my_text` ``` | {bdg-danger-line}`my_text` | ``` {bdg-danger-line}`my_text` ``` | +| {bdg-light}`my_text` | ``` {bdg-light}`my_text` ``` | {bdg-light-line}`my_text` | ``` {bdg-light-line}`my_text` ``` | +| {bdg-muted}`my_text` | ``` {bdg-muted}`my_text` ``` | {bdg-muted-line}`my_text` | ``` {bdg-muted-line}`my_text` ``` | +| {bdg-dark}`my_text` | ``` {bdg-dark}`my_text` ``` | {bdg-dark-line}`my_text` | ``` {bdg-dark-line}`my_text` ``` | +| {bdg-white}`my_text` | ``` {bdg-white}`my_text` ``` | {bdg-white-line}`my_text` | ``` {bdg-white-line}`my_text` ``` | +| {bdg-black}`my_text` | ``` {bdg-black}`my_text` ``` | {bdg-black-line}`my_text` | ``` {bdg-black-line}`my_text` ``` | ## Buttons @@ -38,10 +38,11 @@ Buttons provide a way to create clickable elements that are more attractive than The basic code syntax for creating a button is as follows: ```{button-link} https://teachbooks.io +:color: primary ``` - -```{button-red} book\intro.md +```{button-ref} overview.md +:color: primary ``` Buttons can be customized in markdown in a similar way as figures. You can experiment with these styles to create buttons that align with your book's theme. Here are the set of parameters which can be customized: @@ -49,7 +50,7 @@ Buttons can be customized in markdown in a similar way as figures. You can exper | Parameter | Options | Functionality | |-------------------------------|----------------------------------|-------------------------------| -| colour | primary, secondary, success, danger, warning, info, light, dark, muted | Set the color of the button (background and font)| +| color | primary, secondary, success, danger, warning, info, light, dark, muted | Set the color of the button (background and font)| | outline | / | white button, coloured outline| | align | left, right, center | Align the button on the page | | expand | / | Expand to fit parent width | @@ -60,6 +61,21 @@ Buttons can be customized in markdown in a similar way as figures. You can exper Finally here are some examples: +```{button-link}https://teachbooks.io +TeachBooks + +:color: warning +:shadow: +``` + +```{button-link}https://teachbooks.io +TeachBooks + +:color: success +:outline: +:expand: +``` + ## Icons From 899318821d60adc5931266d1210e5a3c402392b8 Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Sat, 28 Dec 2024 11:36:51 +0100 Subject: [PATCH 10/20] Update badges.md --- book/basic-features/badges.md | 76 ++++++++++++++++++++++------------- 1 file changed, 49 insertions(+), 27 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index d6e5d62..3ea3d55 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -4,7 +4,9 @@ ## Badges -Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. There are three types of badges: plain, link and reference. They are fully customizable and can simply be added with Markdown syntax: +Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. + +There are three types of badges: plain, link and reference which are fully customizable and can simply be added with Markdown syntax: | Type | Badge | Code Syntax | |--------|----------------------------------------------------------|------------------------------------------------------------------------| @@ -33,7 +35,7 @@ Here's an overview of all the available colours: ## Buttons -Buttons provide a way to create clickable elements that are more attractive than links. Jupyter-Book supports buttons using Markdown making them highly customizable. It is possible to link to external websites as well as chapters within your book. To link to an external page, `{button-link}` and `{button-ref}` must be used when linking to a different part of your book. +Buttons provide a way to create clickable elements that are more attractive than links, for example, to link to key sections of your book such as downloads or external resources. Jupyter-Book supports buttons using Markdown making them highly customizable. It is possible to link to external websites as well as chapters within your book. To link to an external page, use `{button-link}`. `{button-ref}` must be used when linking to a part within your book. The basic code syntax for creating a button is as follows: @@ -41,7 +43,7 @@ The basic code syntax for creating a button is as follows: :color: primary ``` -```{button-ref} overview.md +```{button-ref} ../features/overview.md :color: primary ``` @@ -59,50 +61,70 @@ Buttons can be customized in markdown in a similar way as figures. You can exper | shadow | / | Add shadow CSS | | class | / | Additional CSS classes | + Finally here are some examples: -```{button-link}https://teachbooks.io +```{button-link} https://teachbooks.io TeachBooks - :color: warning :shadow: ``` -```{button-link}https://teachbooks.io +```{button-link} https://teachbooks.io TeachBooks - :color: success :outline: :expand: ``` - ## Icons -Icons can be included to visually represent actions or categories. Jupyter-Book supports FontAwesome icons, which can be integrated using HTML syntax. +Icons can be included to visually represent actions or categories. They can take many shapes, such as an image or button inserted in-line within a text paragraph. Icons can be integrated using HTML syntax. -Adding Icons To add an icon, use the following syntax: -markdown -Code kopiëren - Jupyter-Book -This example adds a "book" icon before the text "Jupyter-Book." +**Image Icons** -Combining Buttons and Icons -Icons can also be included within buttons for a modern, professional look: +Let's have a look at the first sentence of this chapter again. -markdown -Code kopiëren - - Download Book +Jupyter book provides a range of features which are visually appealing and functional. + +Here the Jupyter-book logo was inserted for a more professional look. It's including a link `href` and and image saved as `../images/logo-wide.svg` + +``` +Jupyter book provides a range of features which are visually appealing and functional. +``` + +**SVG Icons** + +A library of SVG icons can be found [here](https://icons.getbootstrap.com/#icons). + +By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the signature of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: + + " icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. + + +``` + +This paragraph includes a globe: + + " icon. + +``` + +**Combining Buttons and Icons** + +Icons can also be included within buttons for a modern, professional look. This button includes a download icon alongside some text: "Download it!". + +Loving this book? + Download it! -This button includes a "download" icon alongside text. -4. Use Cases -Here are some practical use cases for badges, buttons, and icons in a Jupyter-Book: +``` +Loving this book? + Download it! + +``` + + -Badges: Highlight software version, repository status, or contributors. -Buttons: Link to key sections of your book, such as downloads or external resources. -Icons: Add visual appeal or clarity to navigation links or labels. -Incorporating these elements into your Jupyter-Book improves both the aesthetic and functionality of your book, creating a more engaging experience for readers. \ No newline at end of file From 05ccb185c3871a14fd62b4b1ae3ecf3710b6ca70 Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Sat, 28 Dec 2024 11:42:24 +0100 Subject: [PATCH 11/20] Update badges.md --- book/basic-features/badges.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 3ea3d55..b3551aa 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -99,7 +99,7 @@ Here the Jupyter-book logo was inserted for a more professional look. It's inclu A library of SVG icons can be found [here](https://icons.getbootstrap.com/#icons). -By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the signature of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: +By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the SVG of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: " icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. @@ -114,7 +114,9 @@ This paragraph includes a globe: Download it! From 3ab43cd2f0208497dc0dc737078d15ec4b12576e Mon Sep 17 00:00:00 2001 From: Julie Kirsch Date: Sat, 28 Dec 2024 11:51:23 +0100 Subject: [PATCH 12/20] final? --- book/basic-features/badges.md | 55 ++++++++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 11 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index b3551aa..6f09068 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -43,10 +43,22 @@ The basic code syntax for creating a button is as follows: :color: primary ``` +``` + ```{button-link} https://teachbooks.io + :color: primary + ``` +``` + ```{button-ref} ../features/overview.md -:color: primary +:color: secondary ``` +``` + ```{button-ref} ../features/overview.md + :color: secondary + ``` +``` + Buttons can be customized in markdown in a similar way as figures. You can experiment with these styles to create buttons that align with your book's theme. Here are the set of parameters which can be customized: @@ -65,29 +77,50 @@ Buttons can be customized in markdown in a similar way as figures. You can exper Finally here are some examples: ```{button-link} https://teachbooks.io -TeachBooks :color: warning :shadow: + +TeachBooks +``` + +``` + ```{button-link} https://teachbooks.io + :color: warning + :shadow: + + TeachBooks + ``` + ``` ```{button-link} https://teachbooks.io -TeachBooks :color: success :outline: :expand: + +TeachBooks ``` +``` + ```{button-link} https://teachbooks.io + :color: success + :outline: + :expand: + + TeachBooks + ``` +``` + + ## Icons Icons can be included to visually represent actions or categories. They can take many shapes, such as an image or button inserted in-line within a text paragraph. Icons can be integrated using HTML syntax. To add an icon, use the following syntax: -**Image Icons** +**1. Image Icons** -Let's have a look at the first sentence of this chapter again. - -Jupyter book provides a range of features which are visually appealing and functional. +Let's have a look at the first sentence of this chapter again: Jupyter book provides a range of features which are visually appealing and functional. Here the Jupyter-book logo was inserted for a more professional look. It's including a link `href` and and image saved as `../images/logo-wide.svg` @@ -95,13 +128,13 @@ Here the Jupyter-book logo was inserted for a more professional look. It's inclu Jupyter book provides a range of features which are visually appealing and functional. ``` -**SVG Icons** +**2. SVG Icons** -A library of SVG icons can be found [here](https://icons.getbootstrap.com/#icons). +A library of SVG icons can be found in the [Bootstrap](https://icons.getbootstrap.com/#icons) library. By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the SVG of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: - " icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. + icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. ``` @@ -112,7 +145,7 @@ This paragraph includes a globe: Jupyter book provides a range of features which are visually appealing and functional. These elements can enhance the interactivity and visual design of your book, offering additional information or links in a compact and visually engaging way. The badges, buttons and icons are made available through Sphinx and they themselves wrote a [documentation](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html) about it. +(my_ref)= ## Badges -Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. There are three types of badges: plain, link and reference. They are fully customizable and can simply be added with Markdown syntax: +Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. There are three types of badges: plain, link and reference (for cross references within book). They are fully customizable and can simply be added with Markdown syntax: | Type | Badge | Code Syntax | |--------|----------------------------------------------------------|------------------------------------------------------------------------| From c6e9ac80c38be47da14bc83ac20a52ca92bc6a11 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Thu, 2 Jan 2025 15:11:19 +0100 Subject: [PATCH 17/20] added more icons --- book/basic-features/badges.md | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 7b18f99..2f6ea31 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -131,20 +131,29 @@ Here the Jupyter-book logo was inserted for a more professional look. It's inclu A library of SVG icons can be found in the [Bootstrap](https://icons.getbootstrap.com/#icons) library. -By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the SVG of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: - - icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. - +By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the SVG of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: . As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. ``` - -This paragraph includes a globe: - - " icon. - + + + ``` -**3. Combining Buttons and Icons** +**3. GitHub Octicon Icons** +[GitHub icons](https://primer.style/foundations/icons) like {octicon}`mark-github` can be added using the syntax: +```{octicon}`mark-github` ``` + +Where `mark-github` can be replaced by any of the name of the icon provided [here](https://primer.style/foundations/icons) + +By default the icon will be of height 1em (i.e. the height of the font). + +**4. Material Design Icons** +The use of Material Design Icons like {material-regular}`settings` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#material-design-icons) + +**5. FontAwesome Icons** +The use of FontAwesome Icons like {fas}`spinner` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#fontawesome-icons) + +**6. Combining Buttons and Icons** Icons can also be included within buttons using the icon font for a modern, professional look. The code can also be downloaded in the [Bootstrap](https://icons.getbootstrap.com/#icons) library. From 91f871e667d3c33c4f7cf096abc5712a40a36de9 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Thu, 2 Jan 2025 15:14:51 +0100 Subject: [PATCH 18/20] note --- book/basic-features/badges.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 2f6ea31..5cb1d60 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -151,7 +151,7 @@ By default the icon will be of height 1em (i.e. the height of the font). The use of Material Design Icons like {material-regular}`settings` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#material-design-icons) **5. FontAwesome Icons** -The use of FontAwesome Icons like {fas}`spinner` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#fontawesome-icons) +The use of FontAwesome Icons like {fas}`spinner` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#fontawesome-icons). There's no need to add the FontAwesome CSS. **6. Combining Buttons and Icons** From 62b5b80e3534335e9ec0c86eb2f7470113a26316 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Thu, 2 Jan 2025 15:15:41 +0100 Subject: [PATCH 19/20] enters --- book/basic-features/badges.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 5cb1d60..5f77fc3 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -140,6 +140,7 @@ By scrolling through the available icons in the library you can find just about ``` **3. GitHub Octicon Icons** + [GitHub icons](https://primer.style/foundations/icons) like {octicon}`mark-github` can be added using the syntax: ```{octicon}`mark-github` ``` @@ -148,9 +149,11 @@ Where `mark-github` can be replaced by any of the name of the icon provided [her By default the icon will be of height 1em (i.e. the height of the font). **4. Material Design Icons** + The use of Material Design Icons like {material-regular}`settings` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#material-design-icons) **5. FontAwesome Icons** + The use of FontAwesome Icons like {fas}`spinner` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#fontawesome-icons). There's no need to add the FontAwesome CSS. **6. Combining Buttons and Icons** From 19dda16dd83eaa2aa01dc31a7e2fbf8e464313aa Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Thu, 2 Jan 2025 15:17:00 +0100 Subject: [PATCH 20/20] note on svgs --- book/basic-features/badges.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 5f77fc3..14fbff4 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -139,6 +139,8 @@ By scrolling through the available icons in the library you can find just about ``` +If you want to keep your files clean, you won't like these svgs. However, your icons is probably available in one of the following icon providers. + **3. GitHub Octicon Icons** [GitHub icons](https://primer.style/foundations/icons) like {octicon}`mark-github` can be added using the syntax: