display tryitout instructions from md file

Author: PhilBastian

src/frontend/package-lock.json

@@ -13,10 +13,12 @@
   },
   "dependencies": {
     "@microsoft/signalr": "^8.0.7",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-markdown-render": "^2.2.1"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-typescript": "^14.1.3",

src/frontend/package.json

@@ -0,0 +1 @@
+# This is Azure

src/frontend/public/azure.md

@@ -0,0 +1,28 @@
+# this is rabbit
+
+something something
+
+## sub heading 1
+
+1. list item
+1. another list item
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae condimentum metus, a pretium lacus. Nam pulvinar tempus fermentum. Nam dapibus elit nec finibus scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus egestas, tellus luctus lobortis sollicitudin, tellus odio sodales ex, et facilisis tortor magna ut ipsum. Vivamus risus quam, scelerisque aliquam quam quis, volutpat fringilla velit. Praesent a metus eget nibh suscipit ultricies. Vivamus non est ligula. Aliquam eget condimentum mauris. Vestibulum vitae venenatis massa, quis dictum mauris. Pellentesque blandit lacus sapien, sed sodales massa interdum non. Aenean porta, tortor a laoreet vehicula, leo orci gravida magna, in tincidunt lectus mauris malesuada leo. Cras tempor est quis neque tristique, eu tincidunt sapien faucibus. Phasellus eget maximus diam. Nam suscipit purus ac laoreet ullamcorper. Ut dapibus sit amet dui sit amet fermentum.
+
+Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed mi eros, imperdiet ut massa eu, fermentum sollicitudin sem. Nulla a aliquam dolor, eu eleifend elit. Nulla viverra ullamcorper lacinia. Morbi efficitur, ex sit amet volutpat gravida, tortor sapien tempus magna, vel accumsan justo libero sed mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean ac dapibus odio.
+
+Sed at pharetra risus. Vivamus sed nunc rhoncus, tincidunt orci ut, sagittis tellus. Suspendisse auctor congue dui eget dictum. Fusce vitae ipsum in sem sollicitudin sodales et at massa. Maecenas quis gravida lacus. Nulla eu suscipit dolor. Donec molestie eget dolor at rutrum. Vivamus urna tortor, venenatis eu urna vel, sagittis fringilla tellus. Phasellus a libero in turpis vulputate pretium.
+
+Phasellus arcu est, bibendum quis facilisis quis, feugiat vitae dolor. Quisque dapibus, nibh at pharetra consectetur, dolor eros mattis eros, ac tincidunt urna neque sit amet tellus. Phasellus tortor mi, varius cursus est posuere, convallis iaculis ante. Cras rhoncus elementum ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sit amet dignissim nibh. In hac habitasse platea dictumst. Integer imperdiet erat nec mi ullamcorper, in posuere tortor tincidunt. Ut non sollicitudin sem. Suspendisse vel fermentum mi, eu condimentum felis.
+
+Aliquam pellentesque nulla ac neque gravida tristique. Suspendisse risus justo, suscipit ac lectus in, consectetur convallis diam. Aliquam ornare lectus odio, id auctor mi suscipit eu. Aliquam erat volutpat. Duis sed leo vitae lorem sagittis molestie. Nullam sed scelerisque urna, ac vestibulum lorem. Cras sodales sed mauris ac auctor.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae condimentum metus, a pretium lacus. Nam pulvinar tempus fermentum. Nam dapibus elit nec finibus scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus egestas, tellus luctus lobortis sollicitudin, tellus odio sodales ex, et facilisis tortor magna ut ipsum. Vivamus risus quam, scelerisque aliquam quam quis, volutpat fringilla velit. Praesent a metus eget nibh suscipit ultricies. Vivamus non est ligula. Aliquam eget condimentum mauris. Vestibulum vitae venenatis massa, quis dictum mauris. Pellentesque blandit lacus sapien, sed sodales massa interdum non. Aenean porta, tortor a laoreet vehicula, leo orci gravida magna, in tincidunt lectus mauris malesuada leo. Cras tempor est quis neque tristique, eu tincidunt sapien faucibus. Phasellus eget maximus diam. Nam suscipit purus ac laoreet ullamcorper. Ut dapibus sit amet dui sit amet fermentum.
+
+Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed mi eros, imperdiet ut massa eu, fermentum sollicitudin sem. Nulla a aliquam dolor, eu eleifend elit. Nulla viverra ullamcorper lacinia. Morbi efficitur, ex sit amet volutpat gravida, tortor sapien tempus magna, vel accumsan justo libero sed mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean ac dapibus odio.
+
+Sed at pharetra risus. Vivamus sed nunc rhoncus, tincidunt orci ut, sagittis tellus. Suspendisse auctor congue dui eget dictum. Fusce vitae ipsum in sem sollicitudin sodales et at massa. Maecenas quis gravida lacus. Nulla eu suscipit dolor. Donec molestie eget dolor at rutrum. Vivamus urna tortor, venenatis eu urna vel, sagittis fringilla tellus. Phasellus a libero in turpis vulputate pretium.
+
+Phasellus arcu est, bibendum quis facilisis quis, feugiat vitae dolor. Quisque dapibus, nibh at pharetra consectetur, dolor eros mattis eros, ac tincidunt urna neque sit amet tellus. Phasellus tortor mi, varius cursus est posuere, convallis iaculis ante. Cras rhoncus elementum ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sit amet dignissim nibh. In hac habitasse platea dictumst. Integer imperdiet erat nec mi ullamcorper, in posuere tortor tincidunt. Ut non sollicitudin sem. Suspendisse vel fermentum mi, eu condimentum felis.
+
+Aliquam pellentesque nulla ac neque gravida tristique. Suspendisse risus justo, suscipit ac lectus in, consectetur convallis diam. Aliquam ornare lectus odio, id auctor mi suscipit eu. Aliquam erat volutpat. Duis sed leo vitae lorem sagittis molestie. Nullam sed scelerisque urna, ac vestibulum lorem. Cras sodales sed mauris ac auctor.

src/frontend/public/rabbit.md

@@ -52,6 +52,15 @@ const tab = ref("showcase");
   flex: 1;
   overflow: auto;
   padding: 0.5em;
+  display: flex;
+  flex-direction: column;
+}
+
+.container > div {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .sections > div {

src/frontend/src/App.vue

@@ -7,13 +7,12 @@
   font-weight: normal;
 }
 
-/**/
 /* General Reset */
-* {
+/* * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
+} */
 
 /* Body Styles */
 

src/frontend/src/assets/main.css

@@ -1,11 +1,35 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import VueMarkdown from "vue-markdown-render";
+
+const rabbitMarkdown = ref("");
+const azureMarkdown = ref("");
+const selection = ref("rabbit");
+
+onMounted(async () => {
+  const rabbitFile = await fetch("./rabbit.md");
+  const azureFile = await fetch("./azure.md");
+  rabbitMarkdown.value = await rabbitFile.text();
+  azureMarkdown.value = await azureFile.text();
+});
+</script>
+
 <template>
-  <h3 class="bolder">Want to try it in your system?</h3>
-  Select your transport:
-  <select>
-    <option>RabbitMq</option>
-    <option>Azure Service Bus</option>
-  </select>
-  <div style="padding-top: 2rem">
+  <div class="try-it-out">
+    <h3 class="bolder">Want to try it in your system?</h3>
+    <div>
+      Select your transport:
+      <select v-model="selection">
+        <option value="rabbit">RabbitMq</option>
+        <option value="azure">Azure Service Bus</option>
+      </select>
+    </div>
+    <div class="markdown-container">
+      <VueMarkdown
+        :source="selection === 'rabbit' ? rabbitMarkdown : azureMarkdown"
+      />
+    </div>
+    <!-- <div style="padding-top: 2rem">
     <ul>
       <li>Open the .env file corresponding to your transport</li>
       <li>
@@ -28,6 +52,7 @@
         >
       </div>
     </div>
+  </div> -->
   </div>
 </template>
 
@@ -38,4 +63,25 @@
   line-height: 16px;
   padding-bottom: 0.5rem;
 }
+
+.try-it-out {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.markdown-container {
+  margin: 0.5em 0;
+  padding: 0.5em;
+  width: 100%;
+  border-radius: 0.5em;
+  box-shadow: 0 2px 10px #2c3e50;
+  overflow: auto;
+  flex: 1;
+}
+
+:deep(p) {
+  margin: 0.5em 0;
+}
 </style>