js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix missing react tab and copy/code styles

Browse Source
This commit is contained in:
Cory LaViska
2024-04-29 10:14:11 -04:00
parent f1a65e7dc8
commit 90fdb93ae1
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/_utils/code-examples.js
View File

@@ -23,7 +23,7 @@ export function codeExamplesPlugin(options = {}) {
container.querySelectorAll('code.example').forEach(code => {
const pre = code.closest('pre');
const adjacentPre = pre.nextElementSibling?.localName === 'pre' ? pre.nextElementSibling : null;
const adjacentCode = adjacentPre?.querySelector('code.react') ? adjacentPre.querySelector('code') : null;
const adjacentPreForReact = adjacentPre?.querySelector('code.react') ? adjacentPre.querySelector('code') : null;
const hasButtons = !code.classList.contains('no-buttons');
const isOpen = code.classList.contains('open') || !hasButtons;
const noEdit = code.classList.contains('no-edit');
@@ -43,15 +43,15 @@ export function codeExamplesPlugin(options = {}) {
<div class="code-example-source" id="${id}">
<wa-tab-group>
<wa-tab slot="nav" panel="html">HTML</wa-tab>
<wa-tab slot="nav" panel="react">React</wa-tab>
<wa-tab-panel name="html">
${pre.outerHTML}
</wa-tab-panel>
<wa-tab-panel name="react">
${adjacentCode ? adjacentPre.outerHTML : ''}
</wa-tab-panel>
<wa-tab-panel name="html">${pre.outerHTML}</wa-tab-panel>
${
adjacentPreForReact
? `
<wa-tab slot="nav" panel="react">React</wa-tab>
<wa-tab-panel name="react">${adjacentPre.outerHTML}</wa-tab-panel>
`
: ''
}
</wa-tab-group>
</div>
${