Skip to content

Commit b851a99

Browse files
Docs: use Example shortcode instead of divs with only .bd-example class (#41556)
1 parent 094fb64 commit b851a99

14 files changed

Lines changed: 574 additions & 575 deletions

File tree

site/src/assets/examples/cheatsheet-rtl/index.astro

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1418,41 +1418,41 @@ import Placeholder from "@shortcodes/Placeholder.astro"
14181418
</div>
14191419

14201420
<div>
1421-
<div class="bd-example">
1422-
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
1423-
<a class="navbar-brand" href="#">شريط التنقل</a>
1424-
<ul class="nav nav-pills">
1425-
<li class="nav-item">
1426-
<a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
1427-
</li>
1428-
<li class="nav-item">
1429-
<a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
1430-
</li>
1431-
<li class="nav-item dropdown">
1432-
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
1433-
<ul class="dropdown-menu">
1434-
<li><a class="dropdown-item" href="#one">واحد</a></li>
1435-
<li><a class="dropdown-item" href="#two">اثنان</a></li>
1436-
<li><hr class="dropdown-divider"></li>
1437-
<li><a class="dropdown-item" href="#three">ثلاثة</a></li>
1438-
</ul>
1439-
</li>
1440-
</ul>
1441-
</nav>
1442-
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto">
1443-
<h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
1444-
<p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
1445-
<h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
1446-
<p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
1447-
<h4 id="one">واحد</h4>
1448-
<p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
1449-
<h4 id="two">اثنان</h4>
1450-
<p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
1451-
<h4 id="three">ثلاثة</h4>
1452-
<p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
1453-
<p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
1454-
</div>
1421+
<Example showMarkup={false} code={`
1422+
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
1423+
<a class="navbar-brand" href="#">شريط التنقل</a>
1424+
<ul class="nav nav-pills">
1425+
<li class="nav-item">
1426+
<a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
1427+
</li>
1428+
<li class="nav-item">
1429+
<a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
1430+
</li>
1431+
<li class="nav-item dropdown">
1432+
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
1433+
<ul class="dropdown-menu">
1434+
<li><a class="dropdown-item" href="#one">واحد</a></li>
1435+
<li><a class="dropdown-item" href="#two">اثنان</a></li>
1436+
<li><hr class="dropdown-divider"></li>
1437+
<li><a class="dropdown-item" href="#three">ثلاثة</a></li>
1438+
</ul>
1439+
</li>
1440+
</ul>
1441+
</nav>
1442+
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto">
1443+
<h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
1444+
<p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
1445+
<h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
1446+
<p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
1447+
<h4 id="one">واحد</h4>
1448+
<p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
1449+
<h4 id="two">اثنان</h4>
1450+
<p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
1451+
<h4 id="three">ثلاثة</h4>
1452+
<p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
1453+
<p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
14551454
</div>
1455+
`} />
14561456
</div>
14571457
</article>
14581458
<article class="my-3" id="spinners">

site/src/assets/examples/cheatsheet/index.astro

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1223,7 +1223,7 @@ export const body_class = 'bg-body-tertiary'
12231223
</div>
12241224
</div>
12251225
</nav>
1226-
1226+
12271227
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
12281228
<div class="container-fluid">
12291229
<a class="navbar-brand" href="#">
@@ -1394,40 +1394,40 @@ export const body_class = 'bg-body-tertiary'
13941394
</div>
13951395

13961396
<div>
1397-
<div class="bd-example">
1398-
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
1399-
<a class="navbar-brand" href="#">Navbar</a>
1400-
<ul class="nav nav-pills">
1401-
<li class="nav-item">
1402-
<a class="nav-link active" href="#scrollspyHeading1">First</a>
1403-
</li>
1404-
<li class="nav-item">
1405-
<a class="nav-link" href="#scrollspyHeading2">Second</a>
1406-
</li>
1407-
<li class="nav-item dropdown">
1408-
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
1409-
<ul class="dropdown-menu">
1410-
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
1411-
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
1412-
<li><hr class="dropdown-divider"></li>
1413-
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
1414-
</ul>
1415-
</li>
1416-
</ul>
1417-
</nav>
1397+
<Example showMarkup={false} code={`
1398+
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
1399+
<a class="navbar-brand" href="#">Navbar</a>
1400+
<ul class="nav nav-pills">
1401+
<li class="nav-item">
1402+
<a class="nav-link active" href="#scrollspyHeading1">First</a>
1403+
</li>
1404+
<li class="nav-item">
1405+
<a class="nav-link" href="#scrollspyHeading2">Second</a>
1406+
</li>
1407+
<li class="nav-item dropdown">
1408+
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
1409+
<ul class="dropdown-menu">
1410+
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
1411+
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
1412+
<li><hr class="dropdown-divider"></li>
1413+
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
1414+
</ul>
1415+
</li>
1416+
</ul>
1417+
</nav>
14181418
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" tabindex="0">
1419-
<h4 id="scrollspyHeading1">First heading</h4>
1420-
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1421-
<h4 id="scrollspyHeading2">Second heading</h4>
1422-
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1423-
<h4 id="scrollspyHeading3">Third heading</h4>
1424-
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1425-
<h4 id="scrollspyHeading4">Fourth heading</h4>
1426-
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1427-
<h4 id="scrollspyHeading5">Fifth heading</h4>
1428-
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1429-
</div>
1419+
<h4 id="scrollspyHeading1">First heading</h4>
1420+
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1421+
<h4 id="scrollspyHeading2">Second heading</h4>
1422+
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1423+
<h4 id="scrollspyHeading3">Third heading</h4>
1424+
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1425+
<h4 id="scrollspyHeading4">Fourth heading</h4>
1426+
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
1427+
<h4 id="scrollspyHeading5">Fifth heading</h4>
1428+
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
14301429
</div>
1430+
`} />
14311431
</div>
14321432
</article>
14331433
<article class="my-3" id="spinners">

site/src/components/shortcodes/Table.astro

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import Code from '@shortcodes/Code.astro'
3+
import Example from '@shortcodes/Example.astro'
34
import * as tableContent from '@shortcodes/TableContent.md'
45
56
interface Props {
@@ -20,12 +21,12 @@ const { class: className, simplified = true } = Astro.props
2021
const tableCode = `<table${className ? ` class="${className}"` : ''}>
2122
${simplified ? ' ...' : await tableContent.compiledContent()}
2223
</table>`
24+
25+
const exampleCode = `<table${className ? ` class="${className}"` : ''}>
26+
${await tableContent.compiledContent()}
27+
</table>`
2328
---
2429

25-
<div class="bd-example">
26-
<table class={className}>
27-
<tableContent.Content />
28-
</table>
29-
</div>
30+
<Example showMarkup={false} code={exampleCode} />
3031

3132
<Code code={tableCode} lang="html" />

site/src/content/docs/components/buttons.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -200,9 +200,9 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a
200200

201201
Here’s an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap’s CSS variables with a mixture of our own CSS and Sass variables.
202202

203-
<div class="bd-example">
204-
<button type="button" class="btn btn-bd-primary">Custom button</button>
205-
</div>
203+
<Example showMarkup={false} code={`
204+
<button type="button" class="btn btn-bd-primary">Custom button</button>
205+
`} />
206206

207207
<ScssDocs name="btn-css-vars-example" file="site/src/scss/_buttons.scss" />
208208

site/src/content/docs/components/modal.mdx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@ Toggle a working modal demo by clicking the button below. It will slide down and
100100
</div>
101101
</div>
102102

103-
<div class="bd-example">
104-
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>
105-
</div>
103+
<Example showMarkup={false} code={`
104+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>
105+
`} />
106106

107107
```html
108108
<!-- Button trigger modal -->
@@ -152,9 +152,9 @@ When backdrop is set to static, the modal will not close when clicking outside o
152152
</div>
153153
</div>
154154

155-
<div class="bd-example">
156-
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>
157-
</div>
155+
<Example showMarkup={false} code={`
156+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>
157+
`} />
158158

159159
```html
160160
<!-- Button trigger modal -->
@@ -204,9 +204,9 @@ When modals become too long for the user’s viewport or device, they scroll ind
204204
</div>
205205
</div>
206206

207-
<div class="bd-example">
208-
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button>
209-
</div>
207+
<Example showMarkup={false} code={`
208+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button>
209+
`} />
210210

211211
You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
212212

@@ -230,9 +230,9 @@ You can also create a scrollable modal that allows scrolling the modal body by a
230230
</div>
231231
</div>
232232

233-
<div class="bd-example">
234-
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button>
235-
</div>
233+
<Example showMarkup={false} code={`
234+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button>
235+
`} />
236236

237237
```html
238238
<!-- Scrollable modal -->
@@ -383,9 +383,9 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
383383
</div>
384384
</div>
385385

386-
<div class="bd-example">
386+
<Example showMarkup={false} code={`
387387
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#gridSystemModal">Launch demo modal</button>
388-
</div>
388+
`} />
389389

390390
```html
391391
<div class="modal-body">

0 commit comments

Comments
 (0)