fix: window reference on server (#234)

Author: JounQin

.changeset/lazy-crabs-itch.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+fix: window reference on server

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

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

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

@@ -51,7 +51,7 @@ const getChildLink = (
 }
 
 const masonryOptions = {
-  itemSelector: `.${classes.overviewGroup}`,
+  itemSelector: `.masonry-item`,
   gutter: 16,
 }
 
@@ -232,7 +232,10 @@ export function Overview(props: {
 
           <Masonry className={classes.overviewGroups} options={masonryOptions}>
             {group.items.map((item) => (
-              <div className={classes.overviewGroup} key={item.link}>
+              <div
+                className={`${classes.overviewGroup} masonry-item`}
+                key={item.link}
+              >
                 <h3>
                   <Link href={item.link} {...renderInlineMarkdown(item.text)} />
                 </h3>