Fix website code preview css

Author: SimonSchubert

websiteBuilder/src/main/kotlin/com/linuxcommandlibrary/desktop/HtmlMarkdownRenderer.kt

@@ -23,6 +23,27 @@ object HtmlMarkdownRenderer {
         }
     }
 
+    /**
+     * Render sections with multi-line code blocks styled as previews (monospace, no $ prefix, no copy button).
+     */
+    fun renderSectionsWithPreviews(sections: List<TipSectionElement>): String = buildString {
+        sections.forEach { section ->
+            when (section) {
+                is TipSectionElement.Text -> append(renderText(section))
+                is TipSectionElement.Blockquote -> append(renderBlockquote(section))
+                is TipSectionElement.Code -> {
+                    val isMultiLine = section.command.contains("\n")
+                    if (isMultiLine) {
+                        append(renderPreviewCode(section))
+                    } else {
+                        append(renderCode(section))
+                    }
+                }
+                is TipSectionElement.Table -> append(renderTable(section))
+            }
+        }
+    }
+
     private fun renderText(text: TipSectionElement.Text): String = buildString {
         append("<span>")
         text.elements.forEach { element ->
@@ -78,6 +99,18 @@ object HtmlMarkdownRenderer {
         }
     }
 
+    private fun renderPreviewCode(code: TipSectionElement.Code): String = buildString {
+        append("""<pre class="code-preview">""")
+        code.elements.forEach { element ->
+            when (element) {
+                is CommandElement.Text -> append(element.text.escapeHtml())
+                is CommandElement.Man -> append(element.man.escapeHtml())
+                is CommandElement.Url -> append(element.command.escapeHtml())
+            }
+        }
+        append("</pre>")
+    }
+
     private fun renderTable(table: TipSectionElement.Table): String = buildString {
         append("<table>")
 

websiteBuilder/src/main/kotlin/com/linuxcommandlibrary/desktop/WebsiteBuilder.kt

@@ -119,7 +119,7 @@ class WebsiteBuilder(
     private val pastSponsors: List<Pair<String, String>> = emptyList(),
 ) {
 
-    private val cacheVersion = 14
+    private val cacheVersion = 15
 
     /**
      * Get sorted list of command names from markdown files.
@@ -442,7 +442,11 @@ class WebsiteBuilder(
                                             }
                                         }
                                         unsafe {
-                                            +HtmlMarkdownRenderer.renderSections(group.sections)
+                                            if (categoryTitle == "Terminal games") {
+                                                +HtmlMarkdownRenderer.renderSectionsWithPreviews(group.sections)
+                                            } else {
+                                                +HtmlMarkdownRenderer.renderSections(group.sections)
+                                            }
                                         }
                                     }
                                 }
@@ -716,6 +720,14 @@ class WebsiteBuilder(
                                                 }
                                             }
 
+                                            "PREVIEW" -> {
+                                                div {
+                                                    unsafe {
+                                                        +HtmlMarkdownRenderer.renderSectionsWithPreviews(section.elements)
+                                                    }
+                                                }
+                                            }
+
                                             else -> {
                                                 // Use HtmlMarkdownRenderer for all other sections
                                                 p {
@@ -1275,9 +1287,9 @@ class WebsiteBuilder(
                     id = "app-link"
                     href = "https://github.com/SimonSchubert/Kai"
                     img {
+                        style="max-width: 100%;"
                         src = "/images/af/kai-1-horizontal.webp"
                         alt = "Kai"
-                        height = "160"
                     }
                 }
                 script {

websiteBuilder/src/main/resources/stylesheets/main.css

@@ -494,6 +494,17 @@ pre {
     margin-bottom: auto;
 }
 
+.code-preview {
+	color: #fff;
+	background-color: #000;
+	padding: 8px;
+	font-family: 'Courier New', Courier, monospace;
+	white-space: pre;
+	width: fit-content;
+	margin: 4px 0 8px 0;
+	line-height: 1.2;
+}
+
 .visible {
 	visibility: visible !important;
 	opacity: 1;