Feat/render description md (#40)

* feat: added support for rendering markdown text for description (YAML -> UI)

* feat: added support for highlighting links/email.

* feat: update README to clarify markdown support in description field

* docs: update the README for editing YAML file

Author: kenlhlui

_layouts/minimal_search.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title }}</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         :root {
             /* Maximum number of cards to display per row on wider screens */
@@ -411,6 +412,16 @@
             max-height: none;
         }
 
+        .guides-description a {
+            color: #0066cc;
+            text-decoration: underline;
+        }
+
+        .guides-description a:hover {
+            color: #004499;
+            text-decoration: underline;
+        }
+
         .read-more-btn {
             background: none;
             border: none;
@@ -1205,11 +1216,12 @@ <h3>No guides found</h3>
 
                 // Safely handle description
                 const description = guide.description && guide.description !== 'undefined' && guide.description !== 'null' ? guide.description : '';
+                const descriptionHtml = description ? marked.parse(description) : '';
 
                 return `
                 <div class="guides-card">
                     <h3><a href="${guide.url}" target="_blank">${guide.title}</a></h3>
-                    <p class="guides-description" id="${uniqueId}" data-full-text="${description.replace(/"/g, '&quot;')}">${description}</p>
+                    <div class="guides-description" id="${uniqueId}" data-full-text="${description.replace(/"/g, '&quot;')}">${descriptionHtml}</div>
                     <button class="read-more-btn" id="btn-${uniqueId}" onclick="toggleDescription('${uniqueId}', this)" style="display: none;">Read more</button>
                     <div class="guides-tags">
                         ${techniques.map(cat => `<span class="tag technique${activeFilters.technique.has(cat) ? ' active' : ''}" data-facet="technique" data-value="${cat}">${cat}</span>`).join('')}

docs/update-data/README.md

@@ -6,7 +6,7 @@ Each tutorial entry can have the following fields:
 |----------------|------------|----------------------------------------------------------------------------------------------------------------|-----------------------------|
 | `id`           | No         | A unique identifier for the tutorial.                                                                         | String                     |
 | `title`        | Yes        | The title of the tutorial.                                                                                    | String                     |
-| `description`  | No         | A brief description of the tutorial.                                                                          | String                     |
+| `description`  | No         | A brief description of the tutorial. <br><br>**Note**: Markdown is supported when rendering this field in the web interface.               | String                     |
 | `url`          | Yes        | The URL of the tutorial.                                                                                      | String (URL)                |
 | `technique`    | No         | The technique(s) covered in the tutorial.                                                                     | String or Array of Strings  |
 | `tool`         | No         | The tool(s) used in the tutorial.                                                                             | String or Array of Strings  |