asyncapi · ritik307 · Jan 22, 2022 · Jan 26, 2022 · Feb 3, 2022 · Feb 9, 2022
@@ -0,0 +1,84 @@
+/*
+ * Below you can see how to create reusable chunks/components/helpers.
+ * Check the files in the `template` folder to see how to import and use them within a template.
+ */
+
+import {
+  Indent,
+  IndentationTypes,
+  withIndendation,
+} from "@asyncapi/generator-react-sdk";
+
+/*
+ * Each component has a `childrenContent` property.
+ * It is the processed children content of a component into a pure string. You can use it for compositions in your component.
+ *
+ * Example:
+ * function CustomComponent({ childrenContent }) {
+ *   return `some text at the beginning: ${childrenContent}`
+ * }
+ *
+ * function RootComponent() {
+ *   return (
+ *     <CustomComponent>
+ *       some text at the end.
+ *     </CustomComponent>
+ *   );
+ * }
+ *
+ * then output from RootComponent will be `some text at the beginning: some text at the end.`.
+ */
+export function HTML({ childrenContent }) {
+  return `
+<!DOCTYPE html>
+<html lang="en">
+${childrenContent}
+</html>
+`;
+}
+
+/*
+ * If you need indent content inside template you can use `withIndendation` function or wrap content between `Indent` component.
+ * The mentioned helper and component can be imported from `@asyncapi/generator-react-sdk` package.
+ *
+ * `withIndendation` function performs action on pure string, but `Indent` can wraps part of template.
+ * You can see usage both cases below.
+ *
+ * Also you can see how to create components using composition.
+ * You can use another component with the given parameters for the given use-case.
+ */
+export function Head({ title, cssLinks = [],base }) {
+  const links = cssLinks
+    .map((link) => `<link rel="stylesheet" href="${link}">\n`)
+    .join("");
+
+  const content = `
+<head>
+  <meta charset="utf-8">
+  <base href=${base}>
+  <title>${title}</title>
+${withIndendation(links, 2, IndentationTypes.SPACES)}
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>  
+`;
+
+  return (
+    <Indent size={2} type={IndentationTypes.SPACES}>
+      {content}
+    </Indent>
+  );
+}
+
+export function Body({ childrenContent }) {
+  const content = `
+<body>
+${withIndendation(childrenContent, 2, IndentationTypes.SPACES)}
+</body>
+`;
+
+  return (
+    <Indent size={2} type={IndentationTypes.SPACES}>
+      {content}
+    </Indent>
+  );
+}
@@ -34,6 +34,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@asyncapi/generator-react-sdk": "^0.2.23",
     "@asyncapi/parser": "^1.13.0",
     "@asyncapi/react-component": "^1.0.0-next.32",
     "highlight.js": "10.7.3",

@@ -0,0 +1,58 @@
+import { File } from "@asyncapi/generator-react-sdk";
+
+// Import custom components from file
+import { HTML, Head, Body } from "../components/common";
+
+export default function Index({ asyncapi, params }) {
+  const getCssLinks = () => {
+    const cssLinks = [];
+    if (params.singleFile) {
+      cssLinks.push("template/css/asyncapi-ui.css");
+      cssLinks.push("template/css/asyncapi-ui.css");
+    } else {
+      cssLinks.push("css/asyncapi-ui.css");
+      cssLinks.push("css/asyncapi-ui.css");
+    }
+    return cssLinks;
+  };
+  return (
+    <File name="index.html">
+      <HTML>
+        <Head
+          title={
+            asyncapi.info().title() +
+            asyncapi.info().version() +
+            "documentation"
+          }
+          cssLinks={getCssLinks()}
+          base={params.baseHref ? params.baseHref : ""}
+        />
+        <Body>
+          <div id="root">{asyncapi}</div>
+          <Scripts params={params} />
+        </Body>
+      </HTML>
+    </File>
+  );
+}
+function Scripts({ params }) {
+  if (params.singleFile) {
+    return `
+        <script src="template/js/asyncapi-ui.min.js" type="text/javascript" ></script>
+        <script>
+            var schema = ${asyncapi};
+            var config = ${params};
+            AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
+        </script>
+    `;
+  } else {
+    return `
+        <script src="js/asyncapi-ui.min.js" type="application/javascript"></script>
+        <script>
+            var schema = ${asyncapi};
+            var config = ${params};
+            AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
+        </script>
+    `;
+  }
+}