refactor: css preview

src/app/dashboard/[subdomain]/settings/css/page-component.tsx

@@ -4,12 +4,14 @@ import { useParams } from "next/navigation"
 import { FC, useEffect, useRef, useState } from "react"
 import toast from "react-hot-toast"
 
+import { useQuery } from "@tanstack/react-query"
+
 import { MonacoEditor } from "~/components/common/Monaco"
 import { SettingsLayout } from "~/components/dashboard/SettingsLayout"
 import { Button } from "~/components/ui/Button"
 import { FieldLabel } from "~/components/ui/FieldLabel"
 import { useGetState } from "~/hooks/useGetState"
-import { IS_DEV } from "~/lib/constants"
+import { getSiteLink } from "~/lib/helpers"
 import { useTranslation } from "~/lib/i18n/client"
 import { useGetSite, useUpdateSite } from "~/queries/site"
 
@@ -108,7 +110,11 @@ export default function SettingsCSSPage() {
           />
         </div>
         <div className="mt-5 space-x-2">
-          <PreviewButton css={css} subdomain={subdomain} />
+          <PreviewButton
+            css={css}
+            subdomain={subdomain}
+            handle={site.data?.handle!}
+          />
           <Button type="submit" isLoading={updateSite.isLoading}>
             {t("Save")}
           </Button>
@@ -121,9 +127,21 @@ export default function SettingsCSSPage() {
 const PreviewButton: FC<{
   css: string
   subdomain: string
-}> = ({ css, subdomain }) => {
+  custom_domain?: string
+}> = ({ css, subdomain, custom_domain }) => {
   const { t } = useTranslation("dashboard")
 
+  const { data: siteLink } = useQuery({
+    queryKey: ["site_link", subdomain],
+
+    queryFn: async () => {
+      return getSiteLink({
+        subdomain,
+        domain: custom_domain,
+      })
+    },
+  })
+
   const datasetRef = useRef({
     previewWindowOrigin: "",
     previewWindow: null as null | Window,
@@ -131,14 +149,10 @@ const PreviewButton: FC<{
   const [isInPreview, setIsPreview] = useState(false)
 
   const handlePreview = () => {
-    let url: URL
-
-    if (IS_DEV) {
-      url = new URL(`http://${subdomain}.localhost:2222/`)
-    } else {
-      url = new URL(location.href)
-      // TODO
+    if (!siteLink) {
+      return
     }
+    let url: URL = new URL(siteLink)
 
     url.searchParams.set("origin", location.origin)
     url.searchParams.set("css-preview", "true")

src/app/site/[site]/[slug]/page.tsx

@@ -5,7 +5,6 @@ import serialize from "serialize-javascript"
 import { Hydrate, dehydrate } from "@tanstack/react-query"
 
 import PageContent from "~/components/common/PageContent"
-import { CSSPreviewConnect } from "~/components/site/CSSPreviewConnect"
 import { OIAButton } from "~/components/site/OIAButton"
 import { PostFooter } from "~/components/site/PostFooter"
 import PostMeta from "~/components/site/PostMeta"
@@ -188,7 +187,6 @@ export default async function SitePagePage({
           {page?.metadata && <PostFooter page={page} site={site} />}
         </Hydrate>
       )}
-      <CSSPreviewConnect />
     </div>
   )
 }

src/app/site/[site]/layout.tsx

@@ -6,8 +6,8 @@ import { Hydrate, dehydrate } from "@tanstack/react-query"
 
 import { BlockchainInfo } from "~/components/common/BlockchainInfo"
 import { SitePlayerContainer } from "~/components/common/SitePlayer"
-import Style from "~/components/common/Style"
 import { BackToTopFAB } from "~/components/site/BackToTopFAB"
+import { CustomSiteStyle } from "~/components/site/CustomSiteStyle"
 import SiteFooter from "~/components/site/SiteFooter"
 import { SiteHeader } from "~/components/site/SiteHeader"
 import { FABContainer } from "~/components/ui/FAB"
@@ -169,7 +169,7 @@ export default async function SiteLayout({
       <div
         className={`xlog-page xlog-page-${type} xlog-user xlog-deprecated-class`}
       >
-        <Style content={site?.metadata?.content?.css} />
+        <CustomSiteStyle content={site.metadata?.content?.css || ""} />
         {colors?.light && colors?.dark && (
           <style>
             {`.light {

src/app/site/[site]/page.tsx

@@ -1,6 +1,5 @@
 import { Hydrate, dehydrate } from "@tanstack/react-query"
 
-import { CSSPreviewConnect } from "~/components/site/CSSPreviewConnect"
 import SiteHome from "~/components/site/SiteHome"
 import getQueryClient from "~/lib/query-client"
 import { PageVisibilityEnum } from "~/lib/types"
@@ -31,7 +30,6 @@ async function SiteIndexPage({
 
   return (
     <Hydrate state={dehydratedState}>
-      <CSSPreviewConnect />
       <SiteHome handle={params.site} />
     </Hydrate>
   )

src/components/site/CustomSiteStyle.tsx

@@ -1,24 +1,33 @@
 "use client"
 
-import { startTransition, useEffect, useState } from "react"
+import { FC, startTransition, useEffect, useState } from "react"
+
+import { IS_DEV } from "~/lib/constants"
+import { SITE_URL } from "~/lib/env"
 
 import Style from "../common/Style"
 
-export const CSSPreviewConnect = () => {
-  const [css, setCss] = useState("")
+export const CustomSiteStyle: FC<{
+  content: string
+}> = (props) => {
+  const { content } = props
+  const [currentStyle, setCurrentStyle] = useState(content)
+
+  useEffect(() => {
+    setCurrentStyle(content)
+  }, [content])
 
   useEffect(() => {
     const search = location.search
     const searchParams = new URLSearchParams(search)
 
-    let targinOrigin = searchParams.get("origin")
+    const targinOrigin = IS_DEV ? "http://localhost:2222" : SITE_URL
 
     const isCSSPreview = searchParams.get("css-preview")
 
     if (!targinOrigin || !isCSSPreview) {
       return
     }
-    targinOrigin = decodeURIComponent(targinOrigin)
     window.opener.postMessage("Preview Ready", targinOrigin)
 
     const handler = (e: MessageEvent) => {
@@ -32,7 +41,7 @@ export const CSSPreviewConnect = () => {
         const { css } = parsedData.data
 
         startTransition(() => {
-          setCss(css)
+          setCurrentStyle(css)
         })
       }
     }
@@ -43,5 +52,5 @@ export const CSSPreviewConnect = () => {
     }
   }, [])
 
-  return <Style content={css} />
+  return <Style content={currentStyle} />
 }