collapse block fix

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';
+    });
+  });
+});

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;
+    }
+  }
+}

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);
+}

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 <http://localhost:8080/rolldice> 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`.
 
-<details>
-<summary>View example output</summary>
+<!-- <details>
+<summary>View example output</summary> -->
+
+{{% preview-fade %}}
 
 ```json
 {
@@ -333,15 +335,19 @@ few times. After a while you should see the spans printed in the console by the
 }
 ```
 
-</details>
+{{% /preview-fade %}}
+
+<!-- </details> -->
 
 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:
 
-<details>
-<summary>View example output</summary>
+<!-- <details>
+<summary>View example output</summary> -->
+
+{{% preview-fade %}}
 
 ```yaml
 {
@@ -466,7 +472,9 @@ the console output, such as the following:
 }
 ```
 
-</details>
+{{% /preview-fade %}}
+
+<!-- </details> -->
 
 ## Next Steps
 

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") -}}
+
+

layouts/shortcodes/preview-fade.html

@@ -0,0 +1,9 @@
+<div class="preview-fade" data-state="collapsed">
+  <div class="preview-content">
+    {{ .Inner | markdownify }}
+  </div>
+  <div class="fade-overlay"></div>
+  <button class="expand-button">
+    <span class="expand-text">Show More</span>
+  </button>
+</div>