feat(console): add rehypraw to display html for awesome akash templates

apps/deploy-web/package.json

@@ -97,6 +97,7 @@
     "react-simple-maps": "^3.0.0",
     "react-use-websocket": "^3.0.0",
     "rehype-highlight": "^6.0.0",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^3.0.1",
     "sharp": "^0.30.3",
     "stripe": "^10.14.0",

apps/deploy-web/src/components/new-deployment/TemplateList.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import { Button, buttonVariants } from "@akashnetwork/ui/components";
-import { ArrowRight, Cpu, Page, Rocket, Wrench, Linux } from "iconoir-react";
+import { ArrowRight, Cpu, Linux,Page, Rocket, Wrench } from "iconoir-react";
 import { NavArrowLeft } from "iconoir-react";
 import { useAtom } from "jotai";
 import Link from "next/link";

apps/deploy-web/src/components/shared/Markdown.tsx

@@ -2,28 +2,37 @@
 import "highlight.js/styles/vs2015.css";
 
 import ReactMarkdown from "react-markdown";
+import { PluggableList } from "react-markdown/lib/react-markdown";
 import { useTheme } from "next-themes";
 import rehypeHighlight from "rehype-highlight";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
 import { cn } from "@src/utils/styleUtils";
 
 type MarkdownProps = {
   children?: React.ReactNode | string;
+  hasHtml?: boolean;
 };
 
-const Markdown: React.FunctionComponent<MarkdownProps> = ({ children }) => {
+const Markdown: React.FunctionComponent<MarkdownProps> = ({ children, hasHtml }) => {
   const { resolvedTheme } = useTheme();
 
+  const rehypePlugins: PluggableList = [[rehypeHighlight, { ignoreMissing: true }]];
+
+  if (hasHtml) {
+    rehypePlugins.push([rehypeRaw as any]);
+  }
+
   return (
     <ReactMarkdown
       className={cn(
-        "markdownContainerRoot prose dark:prose-invert prose-code:before:hidden prose-code:after:hidden",
+        "markdownContainerRoot prose max-w-full dark:prose-invert prose-code:before:hidden prose-code:after:hidden",
         resolvedTheme === "dark" ? "markdownContainer-dark" : "markdownContainer"
       )}
       linkTarget="_blank"
       remarkPlugins={[remarkGfm]}
-      rehypePlugins={[[rehypeHighlight, { ignoreMissing: true }]]}
+      rehypePlugins={rehypePlugins}
     >
       {children as string}
     </ReactMarkdown>

apps/deploy-web/src/components/templates/TemplateDetail.tsx

@@ -97,7 +97,7 @@ export const TemplateDetail: React.FunctionComponent<Props> = ({ templateId, tem
           {activeTab === "README" && (
             <ViewPanel stickToBottom className="overflow-auto pb-12">
               <div className="container pb-8 pt-4 sm:pt-8">
-                <Markdown>{_template?.readme}</Markdown>
+                <Markdown hasHtml={_template.id?.startsWith("akash-network-awesome-akash")}>{_template?.readme}</Markdown>
               </div>
             </ViewPanel>
           )}