fix(projects): load content dynamically and refresh table of contents

The previous way of handling content import was causing issue. So I use
dynamic import instead. However, the table of contents was not
displayed because the wrapper is first empty. I added a mutation
observer to refresh the table of contents when the body is updated.

1 files changed, 28 insertions, 0 deletions

diff --git a/src/utils/hooks/use-mutation-observer.tsx b/src/utils/hooks/use-mutation-observer.tsx
new file mode 100644
index 0000000..c56f7aa
--- /dev/null
+++ b/src/utils/hooks/use-mutation-observer.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+type UseMutationObserverProps = {
+  callback: () => void;
+  options: MutationObserverInit;
+  nodeOrSelector: string | HTMLElement;
+};
+
+export const useMutationObserver = ({
+  callback,
+  options,
+  nodeOrSelector,
+}: UseMutationObserverProps) => {
+  useEffect(() => {
+    const targetNode =
+      typeof nodeOrSelector === 'string'
+        ? document.querySelector(nodeOrSelector)!
+        : nodeOrSelector;
+
+    const observer = new MutationObserver(callback);
+
+    observer.observe(targetNode, options);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [nodeOrSelector, options, callback]);
+};