Add Microsoft Clarity code to all pages (#153)

* Add `@microsoft/clarity` code

* Create `Root.js`

* Add `@microsoft/clarity` code

Author: josh-wong

src/theme/DocsRoot/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames, HtmlClassNameProvider} from '@docusaurus/theme-common';
+import renderRoutes from '@docusaurus/renderRoutes';
+import Layout from '@theme/Layout';
+import Clarity from '@microsoft/clarity';
+
+import type {Props} from '@theme/DocVersionRoot';
+
+const projectId = "p9179dcazx"
+
+Clarity.init(projectId);
+
+export default function DocsRoot(props: Props): JSX.Element {
+  return (
+    <HtmlClassNameProvider className={clsx(ThemeClassNames.wrapper.docsPages)}>
+      <Layout>{renderRoutes(props.route.routes!)}</Layout>
+    </HtmlClassNameProvider>
+  );
+}

src/theme/Root.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Clarity from '@microsoft/clarity';
+
+const projectId = "p9179dcazx"
+Clarity.init(projectId);
+
+// Default implementation, that you can customize
+export default function Root({children}) {
+  return <>{children}</>;
+}