Skip to content

Migrate to Bootstrap 5 #1882

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.

Sign up for GitHub

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
jonahtanjz merged 11 commits into from
Apr 15, 2022
Merged

Migrate to Bootstrap 5 #1882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e35c32b
Migrate utilities to Bootstrap V5 (#1834)
jovyntls Apr 5, 2022
7bc7878
Migrate breaking changes for badges (#1884)
jovyntls Apr 7, 2022
c1436a1
Migrate close buttons (#1886)
jovyntls Apr 9, 2022
5f9cc95
Remove jumbotron class (#1885)
jovyntls Apr 11, 2022
0ad144d
Migrate dropdown components (#1888)
jovyntls Apr 12, 2022
5485206
Namespace Bootstrap data attributes with data-bs- (#1892)
jovyntls Apr 12, 2022
84099ac
Migrate MarkBind's quizzes and questions (#1890)
jovyntls Apr 12, 2022
eef4089
Fix spacing for navbars and searchbars (#1900)
jovyntls Apr 12, 2022
33383ca
Migrate horizontal rules (#1901)
jovyntls Apr 12, 2022
d7c6819
Migrate Bootswatch themes to v5.1.3 (#1898)
jovyntls Apr 15, 2022
8106d48
Prevent Navbars from being printed (#1906)
jovyntls Apr 15, 2022
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
2 changes: 1 addition & 1 deletion docs/_markbind/layouts/devGuide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div id="flex-body">
<nav id="site-nav" class="fixed-header-padding">
<div class="site-nav-top">
<div class="font-weight-bold mb-2" style="font-size: 1.25rem;">Developer Guide</div>
<div class="fw-bold mb-2" style="font-size: 1.25rem;">Developer Guide</div>
</div>
<div class="nav-component slim-scroll">
<site-nav>
Expand Down
2 changes: 1 addition & 1 deletion docs/_markbind/layouts/userGuide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div id="flex-body">
<nav id="site-nav" class="fixed-header-padding">
<div class="site-nav-top">
<div class="font-weight-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
<div class="fw-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
</div>
<div class="nav-component slim-scroll">
<site-nav>
Expand Down
4 changes: 2 additions & 2 deletions docs/_markbind/variables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<variable name="icon_bulb_blue"><span style="color: {{ markbind_blue }}">:fas-lightbulb:</span></variable>
<variable name="icon_dislike">:fas-thumbs-down:</variable>
<variable id="icon_embedding"><md>:glyphicon-log-in:</md></variable>
<variable name="icon_example">++<span class='badge badge-pill badge-secondary' style="padding-bottom: 4px; margin-right: 5px;">Example</span>++</variable>
<variable name="icon_examples">++<span class='badge badge-pill badge-secondary' style="padding-bottom: 4px;">Examples</span>++</variable>
<variable name="icon_example">++<span class='badge rounded-pill bg-secondary' style="padding-bottom: 4px; margin-right: 5px;">Example</span>++</variable>
<variable name="icon_examples">++<span class='badge rounded-pill bg-secondary' style="padding-bottom: 4px;">Examples</span>++</variable>
<variable name="icon_info">:fas-info-circle:</variable>
<variable name="icon_ticked">:far-check-square:</variable>

Expand Down
20 changes: 10 additions & 10 deletions docs/devGuide/workflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ The sections below has more information about various stages of submitting a PR.

{.mb-3}

![]({{baseUrl}}/images/debugger/WebStorm_1.png) {.ml-4}
![]({{baseUrl}}/images/debugger/WebStorm_1.png) {.ms-4}

**2. Debugging all tests** in the `npm run test` script:

![]({{baseUrl}}/images/debugger/WebStorm_2.png) {.ml-4}

![]({{baseUrl}}/images/debugger/WebStorm_2.png) {.ms-4}
**3. Debugging only the cli package's tests**:

![]({{baseUrl}}/images/debugger/WebStorm_3.png) {.ml-4}
![]({{baseUrl}}/images/debugger/WebStorm_3.png) {.ms-4}

</modal>

Expand All @@ -65,8 +65,8 @@ The sections below has more information about various stages of submitting a PR.
* the `-d` developer option. (see [below](#editing-frontend-features))

{.mb-3}

```json {.ml-4 heading="launch.json"}
```json {.ms-4 heading="launch.json"}
{
"configurations": [
{
Expand All @@ -86,7 +86,7 @@ The sections below has more information about various stages of submitting a PR.

**2. Debugging all tests** in the `npm run test` script:

```json {.ml-4 heading="launch.json"}
```json {.ms-4 heading="launch.json"}
{
"configurations": [
{
Expand All @@ -105,8 +105,8 @@ The sections below has more information about various stages of submitting a PR.
```

**3. Debugging only the cli package's tests**:

```json {.ml-4 heading="launch.json"}
```json {.ms-4 heading="launch.json"}
{
"configurations": [
{
Expand Down
Binary file added docs/images/bootswatch/zephyr.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/njk/common.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{% macro previous_next(previous_page, next_page) %}
<div class="clearfix">
{% if previous_page != ''%}
<span class="float-left"><a class="btn btn-light" href="{{ previous_page }}.html"><md>:far-arrow-alt-circle-left: <include src="{{ previous_page }}.md#title" inline /></md></a></span>
<span class="float-start"><a class="btn btn-light" href="{{ previous_page }}.html"><md>:far-arrow-alt-circle-left: <include src="{{ previous_page }}.md#title" inline /></md></a></span>
{% endif %}
{% if next_page != ''%}
<span class="float-right"><a class="btn btn-light" href="{{ next_page }}.html"><md><include src="{{ next_page }}.md#title" inline /> :far-arrow-alt-circle-right:</md></a></span>
<span class="float-end"><a class="btn btn-light" href="{{ next_page }}.html"><md><include src="{{ next_page }}.md#title" inline /> :far-arrow-alt-circle-right:</md></a></span>
{% endif %}
</div>
<br>
Expand Down
2 changes: 1 addition & 1 deletion docs/userGuide/markBindSyntaxOverview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ More info: <include src="{{ filename }}#link" inline trim/>

#### {{ icon_check_blue }} MarkBind Vue components and BootStrap

MarkBind has several core Vue.js components built on the popular [BootStrap](https://getbootstrap.com/docs/4.2/getting-started/introduction/) framework. Much of Bootstrap's features are supported in and out of these components as well.
MarkBind has several core Vue.js components built on the popular [BootStrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/) framework. Much of Bootstrap's features are supported in and out of these components as well.

<!-- ======================================================================================================= -->

Expand Down
58 changes: 29 additions & 29 deletions docs/userGuide/syntax/badges.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,23 @@
<variable name="highlightStyle">html</variable>
<variable name="code">
Normal:
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<br>Pills:
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
</variable>
</include>

Expand All @@ -30,45 +30,45 @@ You can use Badges in combination with headings, buttons, links, etc.
<variable name="highlightStyle">html</variable>
<variable name="code">
Links:
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-pill badge-warning">Warning</a>
<a href="#" class="badge bg-primary">Primary</a>
<a href="#" class="badge rounded-pill bg-warning text-dark">Warning</a>

Buttons:
<button type="button" class="btn btn-primary">
Difficulty Level <span class="badge badge-light">4</span>
Difficulty Level <span class="badge bg-light text-dark">4</span>
</button>

Headings:

### Feature X <span class="badge badge-danger">beta</span> {.no-index}
##### Feature Y <span class="badge badge-pill badge-success">stable</span> {.no-index}
### Feature X <span class="badge bg-danger">beta</span> {.no-index}
##### Feature Y <span class="badge rounded-pill bg-success">stable</span> {.no-index}
</variable>
</include>


<div class="indented">

%%{{ icon_info }} You can refer to [Bootstrap documentation](https://getbootstrap.com/docs/4.2/components/badge/) to find more information about Badges.%%
%%{{ icon_info }} You can refer to [Bootstrap documentation](https://getbootstrap.com/docs/5.1/components/badge/) to find more information about Badges.%%
</div>


<div id="short" class="d-none">

```markdown
<span class="badge badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<button type="button" class="btn btn-primary">
Difficulty Level <span class="badge badge-light">4</span>
Difficulty Level <span class="badge bg-light text-dark">4</span>
</button>
```
</div>

<div id="examples" class="d-none">

<span class="badge badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<button type="button" class="btn btn-primary">
Difficulty Level <span class="badge badge-light">4</span>
##### Feature Y <span class="badge badge-pill badge-warning">stable</span> {.no-index}
Difficulty Level <span class="badge bg-light text-dark">4</span>
##### Feature Y <span class="badge rounded-pill bg-warning text-dark">stable</span> {.no-index}
</button>
</div>
2 changes: 1 addition & 1 deletion docs/userGuide/syntax/dropdowns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`,

<div class="indented">

%%{{ icon_info }} You may refer to [this documentation](https://getbootstrap.com/docs/4.0/components/buttons/) regarding how you can use the **Bootstrap buttons**, and how to style them.%%
%%{{ icon_info }} You may refer to [this documentation](https://getbootstrap.com/docs/5.1/components/buttons/) regarding how you can use the **Bootstrap buttons**, and how to style them.%%
</div>


Expand Down
2 changes: 1 addition & 1 deletion docs/userGuide/syntax/lists.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ first number
1. Sub item 1.1
1. Sub item 1.2
1. Item 2
{.pl-0 .ml-0}
{.ps-0 .ms-0}
</variable>
</include>
</template>
Expand Down
3 changes: 2 additions & 1 deletion docs/userGuide/themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ Currently, MarkBind supports all light themes from [Bootswatch](https://bootswat
'sketchy',
'spacelab',
'united',
'yeti'
'yeti',
'zephyr'
] %}

<div class="container-fluid">
Expand Down
10 changes: 5 additions & 5 deletions docs/userGuide/tipsAndTricks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ Here are the steps to set up Netlify to use a specific version of MarkBind.
##### :fas-lightbulb: Indent components

In some cases, you may want to indent components such as panels and boxes to match the surrounding content.
This is easily achieved by adding some margin and padding utility classes from [Bootstrap](https://getbootstrap.com/docs/4.4/utilities/spacing/)
This is easily achieved by adding some margin and padding utility classes from [Bootstrap](https://getbootstrap.com/docs/5.1/utilities/spacing/)
to the component. The following examples show how to do this.

**Indent Box component**
Expand All @@ -140,7 +140,7 @@ to the component. The following examples show how to do this.

<box>Some text at level 1</box>

<box class="ml-4">Some text at level 2</box>
<box class="ms-4">Some text at level 2</box>

<box>Some text at level 1</box>

Expand All @@ -156,8 +156,8 @@ to the component. The following examples show how to do this.
<panel header="This panel is at level 1">
...
</panel>
<panel header="This panel is at level 2" class="ml-3">
The "ml-3" is arbitarily chosen i.e "ml-0" to "ml-5" are all possible values.
<panel header="This panel is at level 2" class="ms-3">
The "ms-3" is arbitarily chosen i.e "ms-0" to "ms-5" are all possible values.
</panel>
<panel header="This panel is at level 1">
...
Expand All @@ -178,7 +178,7 @@ The following box component will be included via `<include>`.
<variable name="code">

<box>Some text at level 1 (before included content)</box>
<include src="tipsAndTricks.md#forIndentDemo" class="ml-5"></include>
<include src="tipsAndTricks.md#forIndentDemo" class="ms-5"></include>
<box>Some text at level 1 (after included content)</box>

</variable>
Expand Down
2 changes: 1 addition & 1 deletion docs/userGuide/tweakingThePageStructure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Next, edit the layout file to your liking, and add the `{% raw %}{{ content }}{%
<!-- Push content downward when using a fixed header with the fixed-header-padding class -->
<nav id="site-nav" class="fixed-header-padding">
<div class="site-nav-top">
<div class="font-weight-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
<div class="fw-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
</div>
<div class="nav-component slim-scroll">
<site-nav>
Expand Down
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/_markbind/layouts/default.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div id="flex-body">
<nav id="site-nav" class="fixed-header-padding">
<div class="site-nav-top">
<div class="font-weight-bold mb-2" style="font-size: 1.25rem;"><markdown>## {{ layoutName or "Default Layout" }}</markdown></div>
<div class="fw-bold mb-2" style="font-size: 1.25rem;"><markdown>## {{ layoutName or "Default Layout" }}</markdown></div>
</div>
<div class="nav-component slim-scroll">
<include src="navigation/site-nav.md" />
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/bugs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
<div id="flex-body">
<overlay-source id="site-nav" class="fixed-header-padding" tag-name="nav" to="site-nav">
<div class="site-nav-top">
<div class="font-weight-bold mb-2" style="font-size: 1.25rem;">
<div class="fw-bold mb-2" style="font-size: 1.25rem;">
<div>
<h2 id="default-layout"><span id="default-layout" class="anchor"></span>Default Layout<a class="fa fa-anchor" href="#default-layout" onclick="event.stopPropagation()"></a></h2>
</div>
Expand Down
Loading