Skip to content

refactor: remove redundant h5 element #34

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

Open
lex111 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor: remove redundant h5 element #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 5 additions & 3 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,9 +207,11 @@ module.exports = function attacher(options) {
settings.ifmClass ? ["alert", `alert--${settings.ifmClass}`] : []
),
[
element("div", "admonition-heading", [
element("h5", "", iconContainerNodes.concat(titleNodes))
]),
element(
"div",
"admonition-heading",
iconContainerNodes.concat(titleNodes)
),
contentNodes
]
);
Expand Down
20 changes: 11 additions & 9 deletions styles/classic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
padding: 15px 30px 15px 15px;
}

.admonition h5 {
margin-top: 0;
margin-bottom: 8px;
.admonition-heading {
font-size: 14px;
line-height: 1.1;
font-weight: bold;
margin: 0 0 8px 0;
text-transform: uppercase;
}

Expand All @@ -32,7 +34,7 @@
border-left: 8px solid #7633db;
}

.admonition h5 {
.admonition-heading {
color: #7633db;
}

Expand All @@ -47,7 +49,7 @@
border-left: 8px solid #e67e22;
}

.admonition-caution h5 {
.admonition-caution .admonition-heading {
color: #e67e22;
}

Expand All @@ -61,7 +63,7 @@
border-left: 8px solid #2ecc71;
}

.admonition-tip h5 {
.admonition-tip .admonition-heading {
color: #2ecc71;
}

Expand All @@ -75,7 +77,7 @@
border-left: 8px solid #e74c3c;
}

.admonition-warning h5 {
.admonition-warning .admonition-heading {
color: #e74c3c;
}

Expand All @@ -89,7 +91,7 @@
border-left: 8px solid #3498db;
}

.admonition-important h5 {
.admonition-important .admonition-heading {
color: #3498db;
}

Expand All @@ -103,7 +105,7 @@
border-left: 8px solid #f1c40f;
}

.admonition-note h5 {
.admonition-note .admonition-heading {
color: #f1c40f;
}

Expand Down
7 changes: 4 additions & 3 deletions styles/infima.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,10 @@
--ra-admonition-background-color: var(--ifm-color-primary)
}

.admonition h5 {
margin-top: 0;
margin-bottom: 8px;
.admonition-heading {
font-size: 14px;
font-weight: bold;
margin: 0 0 8px 0;
text-transform: uppercase;
}

Expand Down
24 changes: 6 additions & 18 deletions test/emoji.ref
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,32 @@
<body>
<h1>This is a test</h1>
<div class="admonition admonition-note alert alert--secondary">
<div class="admonition-heading">
<h5><span class="admonition-icon">ℹ️</span>Note</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon">ℹ️</span>Note</div>
<div class="admonition-content">
<p>This is what a note looks like</p>
</div>
</div>
<div class="admonition admonition-tip alert alert--success">
<div class="admonition-heading">
<h5><span class="admonition-icon">💡</span>Tip</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon">💡</span>Tip</div>
<div class="admonition-content">
<p>It works great with docusaurus 2.0</p>
</div>
</div>
<div class="admonition admonition-caution alert alert--warning">
<div class="admonition-heading">
<h5><span class="admonition-icon">⚠️</span>you can set <em>your own</em> title</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon">⚠️</span>you can set <em>your own</em> title</div>
<div class="admonition-content">
<p>it replaces the default title</p>
</div>
</div>
<div class="admonition admonition-important alert alert--info">
<div class="admonition-heading">
<h5><span class="admonition-icon">❗️</span>credit</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon">❗️</span>credit</div>
<div class="admonition-content">
<p>Based on <code>remarkable-admonitions</code></p>
<p>SVG Icons by GitHub Octicons</p>
</div>
</div>
<div class="admonition admonition-warning alert alert--danger">
<div class="admonition-heading">
<h5><span class="admonition-icon">🔥</span>Warning</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon">🔥</span>Warning</div>
<div class="admonition-content">
<p>You can't nest them</p>
<ul>
Expand All @@ -59,9 +49,7 @@
</div>
</div>
<div class="admonition admonition-custom">
<div class="admonition-heading">
<h5><span class="admonition-icon">💻</span>Custom</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon">💻</span>Custom</div>
<div class="admonition-content">
<p>You can make your own custom types. The icon, keyword, and emoji can be set in the plugin options and they can be styled separately.</p>
</div>
Expand Down
24 changes: 6 additions & 18 deletions test/none.ref
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,32 @@
<body>
<h1>This is a test</h1>
<div class="admonition admonition-note alert alert--secondary">
<div class="admonition-heading">
<h5>Note</h5>
</div>
<div class="admonition-heading">Note</div>
<div class="admonition-content">
<p>This is what a note looks like</p>
</div>
</div>
<div class="admonition admonition-tip alert alert--success">
<div class="admonition-heading">
<h5>Tip</h5>
</div>
<div class="admonition-heading">Tip</div>
<div class="admonition-content">
<p>It works great with docusaurus 2.0</p>
</div>
</div>
<div class="admonition admonition-caution alert alert--warning">
<div class="admonition-heading">
<h5>you can set <em>your own</em> title</h5>
</div>
<div class="admonition-heading">you can set <em>your own</em> title</div>
<div class="admonition-content">
<p>it replaces the default title</p>
</div>
</div>
<div class="admonition admonition-important alert alert--info">
<div class="admonition-heading">
<h5>credit</h5>
</div>
<div class="admonition-heading">credit</div>
<div class="admonition-content">
<p>Based on <code>remarkable-admonitions</code></p>
<p>SVG Icons by GitHub Octicons</p>
</div>
</div>
<div class="admonition admonition-warning alert alert--danger">
<div class="admonition-heading">
<h5>Warning</h5>
</div>
<div class="admonition-heading">Warning</div>
<div class="admonition-content">
<p>You can't nest them</p>
<ul>
Expand All @@ -59,9 +49,7 @@
</div>
</div>
<div class="admonition admonition-custom">
<div class="admonition-heading">
<h5>Custom</h5>
</div>
<div class="admonition-heading">Custom</div>
<div class="admonition-content">
<p>You can make your own custom types. The icon, keyword, and emoji can be set in the plugin options and they can be styled separately.</p>
</div>
Expand Down
48 changes: 18 additions & 30 deletions test/svg.ref
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,52 +8,42 @@
<body>
<h1>This is a test</h1>
<div class="admonition admonition-note alert alert--secondary">
<div class="admonition-heading">
<h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
</svg></span>Note</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
</svg></span>Note</div>
<div class="admonition-content">
<p>This is what a note looks like</p>
</div>
</div>
<div class="admonition admonition-tip alert alert--success">
<div class="admonition-heading">
<h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16">
<path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path>
</svg></span>Tip</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16">
<path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path>
</svg></span>Tip</div>
<div class="admonition-content">
<p>It works great with docusaurus 2.0</p>
</div>
</div>
<div class="admonition admonition-caution alert alert--warning">
<div class="admonition-heading">
<h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path>
</svg></span>you can set <em>your own</em> title</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path>
</svg></span>you can set <em>your own</em> title</div>
<div class="admonition-content">
<p>it replaces the default title</p>
</div>
</div>
<div class="admonition admonition-important alert alert--info">
<div class="admonition-heading">
<h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path>
</svg></span>credit</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path>
</svg></span>credit</div>
<div class="admonition-content">
<p>Based on <code>remarkable-admonitions</code></p>
<p>SVG Icons by GitHub Octicons</p>
</div>
</div>
<div class="admonition admonition-warning alert alert--danger">
<div class="admonition-heading">
<h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16">
<path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path>
</svg></span>Warning</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16">
<path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path>
</svg></span>Warning</div>
<div class="admonition-content">
<p>You can't nest them</p>
<ul>
Expand All @@ -69,11 +59,9 @@
</div>
</div>
<div class="admonition admonition-custom">
<div class="admonition-heading">
<h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path>
</svg></span>Custom</h5>
</div>
<div class="admonition-heading"><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path>
</svg></span>Custom</div>
<div class="admonition-content">
<p>You can make your own custom types. The icon, keyword, and emoji can be set in the plugin options and they can be styled separately.</p>
</div>
Expand Down