enforce markdown image width to be <=100

add code block and copy button

Author: jdegenstein

website/src/pages/parts/[slug].astro

@@ -112,5 +112,75 @@ const { model, descriptionHtml } = Astro.props;
         <article set:html={descriptionHtml} />
       </section>
     </div>
+
+
+    <script>
+      // Wait for the DOM to fully load
+      document.addEventListener("DOMContentLoaded", () => {
+        // Find all code blocks inside the description section
+        const preElements = document.querySelectorAll('.description pre');
+
+        preElements.forEach((pre) => {
+          const codeElem = pre.querySelector('code');
+          if (!codeElem) return;
+
+          // Extract the language name from the class (e.g., "language-python")
+          let lang = 'TEXT';
+          codeElem.classList.forEach(cls => {
+            if (cls.startsWith('language-')) {
+              lang = cls.replace('language-', '');
+            }
+          });
+
+          // Create the outer wrapper
+          const wrapper = document.createElement('div');
+          wrapper.className = 'code-wrapper';
+          
+          // Insert wrapper just before the pre element, then move the pre inside it
+          pre.parentNode.insertBefore(wrapper, pre);
+          
+          // Create the header bar
+          const header = document.createElement('div');
+          header.className = 'code-header';
+          
+          // Add the language label
+          const langSpan = document.createElement('span');
+          langSpan.className = 'code-lang';
+          langSpan.innerText = lang;
+          
+          // Add the copy button
+          const copyBtn = document.createElement('button');
+          copyBtn.className = 'copy-btn';
+          copyBtn.innerText = 'Copy';
+          
+          // Attach copy functionality
+          copyBtn.addEventListener('click', async () => {
+            try {
+              // Write the text content of the code block to the clipboard
+              await navigator.clipboard.writeText(codeElem.innerText);
+              
+              // Visual feedback
+              copyBtn.innerText = 'Copied!';
+              copyBtn.classList.add('copied');
+              
+              // Reset button after 2 seconds
+              setTimeout(() => {
+                copyBtn.innerText = 'Copy';
+                copyBtn.classList.remove('copied');
+              }, 2000);
+            } catch (err) {
+              console.error('Failed to copy text: ', err);
+            }
+          });
+
+          // Assemble the DOM structure
+          header.appendChild(langSpan);
+          header.appendChild(copyBtn);
+          
+          wrapper.appendChild(header);
+          wrapper.appendChild(pre);
+        });
+      });
+    </script>
   </body>
 </html>

website/src/styles/global.css

@@ -172,3 +172,89 @@ body {
   align-items: center;
   margin-bottom: 2rem;
 }
+
+/* --- Markdown Description Content --- */
+.description img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px; /* Matches the rounded corners of your UI */
+  display: block;
+  margin: 1rem auto; /* Centers the image if it is smaller than the container */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adds a subtle depth */
+}
+
+/* --- Code Blocks --- */
+.code-wrapper {
+  margin: 1.5rem 0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  background: #1e1e1e; /* Dark theme for the header */
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: #252526;
+  border-bottom: 1px solid #333;
+}
+
+.code-lang {
+  color: #9cdcfe;
+  font-size: 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.copy-btn {
+  background: transparent;
+  color: #a9a9a9;
+  border: 1px solid #555;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.copy-btn:hover {
+  background: #333;
+  color: #fff;
+  border-color: #888;
+}
+
+.copy-btn.copied {
+  background: #2ea043;
+  color: #fff;
+  border-color: #2ea043;
+}
+
+.description pre {
+  background: #1e1e1e !important;
+  color: #d4d4d4;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.description pre code {
+  background: transparent;
+  padding: 0;
+}
+
+/* Inline code styles (not blocks) */
+.description :not(pre) > code {
+  background: #eaeaea;
+  color: #d73a49;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.85em;
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}