Skip to content
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

docs: add a StackBlitz "Try It" button in code examples #35644

Merged
merged 9 commits into from
Mar 9, 2022
Merged

docs: add a StackBlitz "Try It" button in code examples #35644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d9f00bf
feat: add Edit button to open snippets in StackBlitz
PuruVJ Jan 2, 2022
c80c8cd
Pin Stackblitz SDK
PuruVJ Mar 1, 2022
025a1de
Unpin Stackblitz SDK version
PuruVJ Mar 2, 2022
409d552
Fix lint issue
PuruVJ Mar 2, 2022
feeab60
Remove unnecessary tooltip
PuruVJ Mar 2, 2022
8c5a707
Fix var name & use `openproject` option to open file
GeoSot Mar 2, 2022
4cf0d64
Merge branch 'main' into feat/edit-button
PuruVJ Mar 5, 2022
cbe550e
Merge branch 'main' into feat/edit-button
PuruVJ Mar 8, 2022
a4bb3f6
Merge branch 'main' into feat/edit-button
XhmikosR Mar 9, 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
27 changes: 17 additions & 10 deletions site/assets/js/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,17 +125,24 @@
element.insertAdjacentHTML('beforebegin', btnHtml)
})

document.querySelectorAll('.btn-clipboard')
.forEach(function (btn) {
var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })

btn.addEventListener('mouseleave', function () {
// Explicitly hide tooltip, since after clicking it remains
// focused (as it's a button), so tooltip would otherwise
// remain visible until focus is moved away
tooltipBtn.hide()
})
/**
*
* @param {HTMLButtonElement} btn
* @param {string} title
*/
function snippetButtonTooltip(btn, title) {
var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })

btn.addEventListener('mouseleave', function () {
// Explicitly hide tooltip, since after clicking it remains
// focused (as it's a button), so tooltip would otherwise
// remain visible until focus is moved away
tooltipBtn.hide()
})
}

snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard')
snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz')

var clipboard = new ClipboardJS('.btn-clipboard', {
target: function (trigger) {
Expand Down
11 changes: 9 additions & 2 deletions site/assets/scss/_clipboard-js.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
//
// JS-based `Copy` buttons for code snippets.

.bd-clipboard {
.bd-clipboard,
.bd-edit {
position: relative;
display: none;
float: right;
Expand All @@ -16,7 +17,8 @@
}
}

.btn-clipboard {
.btn-clipboard,
.btn-edit {
position: absolute;
top: .65rem;
right: .65rem;
Expand All @@ -25,6 +27,7 @@
padding: .25rem .5rem;
@include font-size(.65em);
color: $primary;
white-space: nowrap;
background-color: $white;
border: 1px solid;
@include border-radius();
Expand All @@ -35,3 +38,7 @@
background-color: $primary;
}
}

.btn-edit {
right: 3.65rem;
}
45 changes: 45 additions & 0 deletions site/layouts/partials/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

{{ if eq .Page.Layout "docs" -}}
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
{{- end }}

{{- $vendor := resources.Match "js/vendor/*.js" -}}
Expand All @@ -18,3 +19,47 @@
{{- end }}

<script src="{{ $docsJs.Permalink | relURL }}"></script>

{{ if eq .Page.Layout "docs" -}}
<script>
// Open in StackBlitz logic
document.querySelectorAll('.btn-edit')
.forEach(function (btn) {
btn.addEventListener('click', function (event) {
var htmlSnippet = event.target.closest('.bd-content').querySelector('.bd-example').innerHTML

StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
})
})

StackBlitzSDK.openBootstrapSnippet = function(snippet) {
var project = {
files: {
'index.html': `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
<title>Bootstrap Example</title>
</head>
<body>

<!-- Example Code -->
${snippet.replace(/^/gm, ' ')}
<!-- End Example Code -->

<${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
</body>
</html>`
},
title: 'Bootstrap Example',
description: 'Official example from ' + window.location.href,
template: 'html',
tags: ['bootstrap']
}

StackBlitzSDK.openProject(project, { openFile: 'index.html' })
}
</script>
{{- end }}
3 changes: 3 additions & 0 deletions site/layouts/shortcodes/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
{{- end -}}

{{- if eq $show_markup true -}}
<div class="bd-edit">
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">Try it</button>
</div>
{{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
Expand Down