feat: ✨ add contact form (#15)

* feat: ✨ add contact form

* fix: 🐛 update explanation text

docs/changelog.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 99
+sidebar_position: 98
 title: Changelog
 ---
 

docs/contact.mdx

@@ -0,0 +1,10 @@
+---
+sidebar_position: 99
+title: Contact Us
+---
+
+Want to provide feedback about our dataset? Have a question about our project? Need help using our data? Let us know!
+
+import TallyEmbed from '@site/src/components/TallyEmbed';
+
+<TallyEmbed />

docusaurus.config.js

@@ -66,7 +66,7 @@ export default {
           alt: 'My Site Logo',
           src: 'https://fairdataihub.org/images/hero/aireadi-logo.png',
         },
-        hideOnScroll: true,
+        hideOnScroll: false,
         items: [
           {
             type: 'docsVersionDropdown',
@@ -78,7 +78,7 @@ export default {
             position: 'right',
           },
           {
-            href: 'https://aireadi.org/contact',
+            href: '/docs/1/contact',
             label: 'Contact Us',
             position: 'right',
           },
@@ -162,6 +162,7 @@ export default {
           content: 'summary_large_image',
         },
       ],
+      scripts: [],
       headTags: [
         {
           tagName: 'link',

src/components/PageFeedback.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/button-has-type */
 import React from 'react';
 import Lottie from 'react-lottie';
+import { Icon } from '@iconify/react';
 
 import LikeAnimationData from './lotties/like.json';
 import DislikeAnimationData from './lotties/dislike.json';
@@ -217,6 +218,15 @@ function PageFeedback() {
         />
       )}
 
+      <hr className="w-2/5 mx-auto  bg-sky-200" />
+
+      <div className="flex justify-center items-center space-x-2 pt-1">
+        <Icon icon="lucide:badge-info" />
+        <a href="/docs/1/contact" className="">
+          <h4 className="mb-0">I have more feedback!</h4>
+        </a>
+      </div>
+
       {showTextFeedback && (
         <div className="flex justify-center space-x-2 pt-1">
           <textarea

src/components/TallyEmbed.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-undef */
+import React, { useEffect } from 'react';
+
+export default function TallyEmbed() {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://tally.so/widgets/embed.js';
+    script.onload = function () {
+      if (typeof Tally !== 'undefined') {
+        Tally.loadEmbeds();
+      } else {
+        document.querySelectorAll('iframe[data-tally-src]:not([src])').forEach((iframe) => {
+          iframe.src = iframe.dataset.tallySrc;
+        });
+      }
+    };
+    script.onerror = script.onload;
+    document.body.appendChild(script);
+  }, []);
+
+  return (
+    <iframe
+      data-tally-src="https://tally.so/embed/wdY71y?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
+      loading="lazy"
+      width="100%"
+      height="276"
+      title="AI-READI Contact Form"
+    />
+  );
+}