fix: SSG compatibility

Author: JounQin

packages/doom/src/runtime/components/Masonry.tsx

@@ -1,4 +1,4 @@
-import MasonryLayout from 'masonry-layout'
+import type MasonryLayout from 'masonry-layout'
 import { useLayoutEffect, useRef, type HTMLAttributes } from 'react'
 
 export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,7 +13,11 @@ export const Masonry = ({ options, ...props }: MasonryProps) => {
       return
     }
 
-    const masonry = new MasonryLayout(ref.current, options)
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const masonry = new (require('masonry-layout') as typeof MasonryLayout)(
+      ref.current,
+      options,
+    )
 
     return () => {
       masonry.destroy?.()

packages/doom/src/runtime/components/Overview.tsx

@@ -50,6 +50,11 @@ const getChildLink = (
   return ''
 }
 
+const masonryOptions = {
+  itemSelector: `.${classes.overviewGroup}`,
+  gutter: 16,
+}
+
 // The sidebar data include two types: sidebar item and sidebar group.
 // In overpage page, we select all the related sidebar groups and show the groups in the page.
 // In the meantime, some sidebar items also should be shown in the page, we collect them in the group named 'Others' and show them in the page.
@@ -212,14 +217,6 @@ export function Overview(props: {
 
   const groups = customGroups ?? defaultGroups
 
-  const masonryOptions = useMemo(
-    () => ({
-      itemSelector: `.${classes.overviewGroup}`,
-      gutter: 16,
-    }),
-    [],
-  )
-
   return (
     <div className="overview-index doom-overview-index">
       {content}