Skip to content

Commit d83a698

Browse files
mdomdo
committed
Include twbs/examples in the Examples page
1 parent d70b5db commit d83a698

File tree

2 files changed

+64
-23
lines changed

2 files changed

+64
-23
lines changed

‎site/content/docs/5.3/examples/_index.md

+38-23
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,41 @@ aliases: "/examples/"
77

88
{{< list-examples.inline >}}
99
{{ range $entry := $.Site.Data.examples -}}
10-
<div class="row g-lg-5 mb-5">
11-
<div class="bd-content col-lg-3">
12-
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
13-
<p>{{ $entry.description }}</p>
14-
{{ if eq $entry.category "RTL" -}}
15-
<div class="bd-callout bd-callout-warning small">
16-
<p>
17-
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
18-
</p>
19-
<p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
20-
</div>
21-
{{ end -}}
22-
</div>
23-
24-
<div class="col-lg-9">
25-
{{ range $i, $example := $entry.examples -}}
26-
{{- $len := len $entry.examples -}}
27-
{{ if (eq $i 0) }}<div class="row">{{ end }}
28-
<div class="col-sm-6 col-md-4 mb-3">
29-
<a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
10+
<div class="bd-content">
11+
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
12+
<p>{{ $entry.description }}</p>
13+
{{ if eq $entry.category "RTL" -}}
14+
<div class="bd-callout bd-callout-warning small">
15+
<p>
16+
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
17+
</p>
18+
<p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
19+
</div>
20+
{{ end -}}
21+
{{ range $i, $example := $entry.examples -}}
22+
{{- $len := len $entry.examples -}}
23+
{{ if (eq $i 0) }}<div class="row">{{ end }}
24+
{{ if $entry.external }}
25+
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
26+
<svg class="bi fs-5 flex-shrink-0"><use xlink:href="#box-seam"></use></svg>
27+
<div>
28+
<h3 class="h5 mb-1">
29+
<a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank">
30+
{{ $example.name }}
31+
</a>
32+
</h3>
33+
<p class="text-muted">{{ $example.description }}</p>
34+
<p>
35+
<a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file=index.html" target="_blank">
36+
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
37+
Edit in StackBlitz
38+
</a>
39+
</p>
40+
</div>
41+
</div>
42+
{{ else }}
43+
<div class="col-sm-6 col-md-3 mb-3">
44+
<a class="d-block link-offset-1" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
3045
<img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
3146
/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
3247
src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
@@ -39,9 +54,9 @@ aliases: "/examples/"
3954
</a>
4055
<p class="text-muted">{{ $example.description }}</p>
4156
</div>
42-
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
43-
{{ end -}}
44-
</div>
57+
{{ end }}
58+
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
59+
{{ end -}}
4560
</div>
4661
{{ end -}}
4762
{{< /list-examples.inline >}}

‎site/data/examples.yml

+26
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
- category: Starters
2+
external: true
3+
description: "Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz."
4+
examples:
5+
- name: CDN starter
6+
description: "Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN."
7+
url: /examples/tree/main/starter
8+
- name: Sass & JS
9+
description: "Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript."
10+
url: /examples/tree/main/sass-js
11+
- name: Sass & ESM JS
12+
description: "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim."
13+
url: /examples/tree/main/sass-js-esm
14+
- name: Webpack
15+
description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack."
16+
url: /examples/tree/main/webpack
17+
- name: Parcel
18+
description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel."
19+
url: /examples/tree/main/parcel
20+
- name: Vite
21+
description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite."
22+
url: /examples/tree/main/vite
23+
- name: Bootstrap Icons
24+
description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font."
25+
url: /examples/tree/main/bootstrap-icons
26+
127
- category: Snippets
228
description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."
329
examples:

0 commit comments

Comments
 (0)