chore: avoid load artalk when at homepage

src/components/Comments.tsx

@@ -15,14 +15,16 @@ export const Comments = (props: Props) => {
 
   useEffect(() => {
     const initComment = async () => {
-      const getArtalkSingleton = await window.getArtalkSingleton
-      const artalk = getArtalkSingleton({
+      import("artalk/dist/Artalk.css")
+      const { init } = await import("artalk")
+      const artalk = init({
         el: "#comments",
         pageKey,
         pageTitle,
         server: commentServer,
         site: SITE.title,
       })
+      window.artalk = artalk
       const theme = localStorage.getItem("theme") as string
       artalk.setDarkMode(theme === "dark")
     }

src/layouts/Layout.astro

@@ -98,17 +98,6 @@ const socialImageURL = new URL(
         </div>
       )
     }
-    <script>
-      const loadArtalk = async () => {
-        const { init } = await import("artalk")
-        return (config: any) => {
-          const artalk = init(config)
-          window.artalk = artalk
-          return artalk
-        }
-      }
-      window.getArtalkSingleton = loadArtalk()
-    </script>
     {
       import.meta.env.UMAMI_URL && (
         <script

src/layouts/PostDetails.astro

@@ -1,5 +1,4 @@
 ---
-import "artalk/dist/Artalk.css"
 import Layout from "@layouts/Layout.astro"
 import Header from "@components/Header.astro"
 import Footer from "@components/Footer.astro"

src/types.ts

@@ -39,6 +39,5 @@ export type SocialMedia =
 declare global {
   interface Window {
     artalk: Artalk
-    getArtalkSingleton: Promise<(config: Partial<ArtalkConfig>) => Artalk>
   }
 }