0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

Use example shortcode for basic examples layout similar to back-quotes (show just markup with clipboard button)

This commit is contained in:
Hannah Issermann 2024-09-13 11:47:48 +02:00
parent 429e0c3b9d
commit dd9f8a365c
3 changed files with 35 additions and 5 deletions

View File

@ -42,3 +42,7 @@
margin-top: 1.25rem;
margin-right: .75rem;
}
.btn-example {
margin-top: .6rem;
}

View File

@ -45,6 +45,20 @@ sitemap:
<div class="test">This is a test.</div>
{{< /example >}}
{{< example lang="scss" show_preview="false" >}}
.test {
--color: blue;
show_preview="false"
}
{{< /example >}}
{{< example lang="scss" basic="true" >}}
.test {
--color: blue;
basic
}
{{< /example >}}
{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}

View File

@ -8,6 +8,7 @@
* show_markup: if the markup should be output in the HTML - default: `true`
* show_preview: if the preview should be output in the HTML - default: `true`
* stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
* basic: todo - default: `false`
*/ -}}
{{- $id := .Get "id" -}}
@ -16,18 +17,19 @@
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $show_preview := .Get "show_preview" | default true -}}
{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
{{- $basic := .Get "basic" | default "false" -}}
{{- $content := .Inner -}}
<div class="bd-example-snippet bd-code-snippet">
{{- if eq $show_preview true }}
{{- if and (eq $show_preview true) (eq $basic true) }}
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
{{ $content }}
</div>
{{- end }}
{{- end -}}
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
{{- if (eq $show_markup true) }}
{{- if and (eq $show_preview true) (eq $basic "false") -}}
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
<div class="d-flex ms-auto">
@ -41,9 +43,19 @@
</div>
{{- end -}}
{{- if eq $basic "true" }}
<div class="bd-clipboard">
<button type="button" class="btn-clipboard btn-example">
<svg class="bi" role="img" aria-label="Copy to clipboard">
<use xlink:href="#clipboard"></use>
</svg>
</button>
</div>
{{- end }}
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end }}
{{- end -}}
</div>