diff --git a/assets/js/preview-fade.js b/assets/js/preview-fade.js new file mode 100644 index 000000000000..ad0fe8daecd5 --- /dev/null +++ b/assets/js/preview-fade.js @@ -0,0 +1,33 @@ +// assets/js/preview-fade.js +console.log('Preview fade script loaded'); + +document.addEventListener('DOMContentLoaded', () => { + console.log('DOM Content Loaded'); + + const previewFades = document.querySelectorAll('.preview-fade'); + console.log('Found preview fades:', previewFades.length); + + previewFades.forEach(container => { + const button = container.querySelector('.expand-button'); + const buttonText = button.querySelector('.expand-text'); + + if (!button) { + console.error('Button not found in container:', container); + return; + } + + if (!buttonText) { + console.error('Button text element not found in button:', button); + return; + } + + button.addEventListener('click', () => { + console.log('Button clicked'); + const currentState = container.getAttribute('data-state'); + const newState = currentState === 'collapsed' ? 'expanded' : 'collapsed'; + console.log('State changing from', currentState, 'to', newState); + container.setAttribute('data-state', newState); + buttonText.textContent = newState === 'expanded' ? 'Show Less' : 'Show More'; + }); + }); +}); \ No newline at end of file diff --git a/assets/scss/_preview-fade.scss b/assets/scss/_preview-fade.scss new file mode 100644 index 000000000000..98893ea57ea1 --- /dev/null +++ b/assets/scss/_preview-fade.scss @@ -0,0 +1,51 @@ +// assets/scss/components/_preview-fade.scss +.preview-fade { + position: relative; + margin: 1rem 0; + + &__content { + max-height: 200px; + overflow: hidden; + transition: max-height 0.3s ease-out; + + &--expanded { + max-height: none; + } + } + + &__overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 100px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 1) + ); + display: flex; + align-items: flex-end; + justify-content: center; + padding-bottom: 1rem; + + &--hidden { + display: none; + } + } + + &__button { + padding: 0.5rem 1rem; + border-radius: 20px; + background-color: white; + border: 1px solid #0366d6; + color: #0366d6; + cursor: pointer; + font-size: 0.875rem; + transition: all 0.2s; + + &:hover { + background-color: #f6f8fa; + } + } +} \ No newline at end of file diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 6de8eb1b3b6a..da5ad39367b5 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -5,10 +5,11 @@ @import 'tabs'; @import 'external_link'; @import 'td/code-dark'; +@import 'preview-fade'; .td-home { .otel-logo { - margin-top: 2rem; + margin-top: 2rem; margin-bottom: 3rem; max-height: 12rem; } @@ -327,3 +328,55 @@ details { overflow-y: auto; } } + + +.preview-fade { + position: relative; + border: 1px solid var(--gray-200); + border-radius: 0.375rem; + background: var(--gray-100); + margin: 1rem 0; +} + +.preview-content { + padding: 1rem; + margin: 0; + overflow-x: auto; +} + +.preview-fade[data-state='collapsed'] .preview-content { + max-height: 150px; +} + +.preview-fade[data-state='expanded'] .preview-content { + max-height: none; +} + +.fade-overlay { + position: absolute; + bottom: 2.5rem; + left: 0; + right: 0; + height: 4rem; + background: linear-gradient(to top, var(--gray-100), transparent); + pointer-events: none; +} + +.preview-fade[data-state='expanded'] .fade-overlay { + display: none; +} + +.expand-button { + width: 100%; + padding: 0.5rem; + border: none; + border-top: 1px solid var(--gray-200); + background: var(--gray-100); + color: var(--gray-700); + cursor: pointer; + font-size: 0.875rem; +} + +.expand-button:hover { + background: var(--gray-200); +} diff --git a/content/en/docs/languages/js/getting-started/nodejs.md b/content/en/docs/languages/js/getting-started/nodejs.md index 4197b9118e0f..7e79bcd899b2 100644 --- a/content/en/docs/languages/js/getting-started/nodejs.md +++ b/content/en/docs/languages/js/getting-started/nodejs.md @@ -89,7 +89,7 @@ app.get('/rolldice', (req, res) => { app.listen(PORT, () => { console.log(`Listening for requests on http://localhost:${PORT}`); -}); +}); ``` {{% /tab %}} {{% tab JavaScript %}} @@ -251,8 +251,10 @@ Open in your web browser and reload the page a few times. After a while you should see the spans printed in the console by the `ConsoleSpanExporter`. -
-View example output + + +{{% preview-fade %}} ```json { @@ -333,15 +335,19 @@ few times. After a while you should see the spans printed in the console by the } ``` -
+{{% /preview-fade %}} + + The generated span tracks the lifetime of a request to the `/rolldice` route. Send a few more requests to the endpoint. After a moment, you'll see metrics in the console output, such as the following: -
-View example output + + +{{% preview-fade %}} ```yaml { @@ -466,7 +472,9 @@ the console output, such as the following: } ``` -
+{{% /preview-fade %}} + + ## Next Steps diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html index 9df70d272006..e09d85134f6c 100644 --- a/layouts/partials/hooks/body-end.html +++ b/layouts/partials/hooks/body-end.html @@ -2,3 +2,6 @@ {{ partial "script.html" (dict "src" "js/tracing.js") -}} {{ end -}} {{ partial "script.html" (dict "src" "js/navScroll.js") -}} +{{ partial "script.html" (dict "src" "js/preview-fade.js") -}} + + diff --git a/layouts/shortcodes/preview-fade.html b/layouts/shortcodes/preview-fade.html new file mode 100644 index 000000000000..92cc1f9b0574 --- /dev/null +++ b/layouts/shortcodes/preview-fade.html @@ -0,0 +1,9 @@ +
+
+ {{ .Inner | markdownify }} +
+
+ +
\ No newline at end of file