feat(echo): Create Novu Echo Terminal web component

What?

Convert the Novu Echo Terminal into a reusable web component, using a single JS entry point

Why?

The Novu Echo Terminal should be portable, a web component makes it easy to use across multiple sites with both JS and HTML embed options available

Testing HTML Method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- NB: this is using `@echo-web-component` to target this branch. In prod, we omit this git-ref. -->
    <script id="echo-terminal-loader" src="https://cdn.jsdelivr.net/gh/novuhq/docs@echo-web-component/echo-terminal.js" type="text/javascript" crossorigin="anonymous"></script>
</head>
<body>
    <nv-echo-terminal></nv-echo-terminal>
</body>
</html>

JS Method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        !function(e){if(!document.getElementById(e)){var t=document.createElement("script");t.src="https://cdn.jsdelivr.net/gh/novuhq/docs@echo-web-component/echo-terminal.js",t.type="text/javascript",t.crossOrigin="anonymous",t.id=e;var n=document.getElementsByTagName("script")[0];n?n.parentNode.insertBefore(t,n):document.body.appendChild(t)}}("nv-echo-terminal-loader");
    </script>
</head>
<body>
    <nv-echo-terminal></nv-echo-terminal>
</body>
</html>

Demo: https://novu-preview-echo-web-component.mintlify.app/echo/quickstart

Screenshots The Usage Readme

novuhq / docs

feat(echo): Create Novu Echo Terminal web component #558