feat: clearer preview address alerts

public/locales/zh/site.json

@@ -6,5 +6,7 @@
   "load more": "还有 {{count}} 篇{{name}}，点击加载更多",
   "signed and stored on the blockchain": "此{{name}}已经由它的创作者签名并安全地存储在区块链上。",
   "Write a comment on the blockchain": "在区块链上写下你的评论",
-  "powered by": "由 <name/> 提供支持"
+  "powered by": "由 <name/> 提供支持",
+  "This address is in local editing preview mode and cannot be viewed by the public. The expected online address is:":
+    "此地址处于本地编辑预览模式，无法被公众查看。预期的在线地址是："
 }

src/components/site/SitePage.tsx

@@ -4,12 +4,16 @@ import { PostFooter } from "./PostFooter"
 import { Note, Profile } from "~/lib/types"
 import Head from "next/head"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "next-i18next"
+import { UniLink } from "../ui/UniLink"
+import { getDefaultSlug } from "~/lib/helpers"
 
 export const SitePage: React.FC<{
   page?: Note | null
   site?: Profile | null
 }> = ({ page, site }) => {
   // const author = useGetUserSites(page?.authors?.[0])
+  const { t } = useTranslation("site")
 
   function addPageJsonLd() {
     return {
@@ -44,8 +48,24 @@ export const SitePage: React.FC<{
         />
       </Head>
       {page?.preview && (
-        <div className="fixed top-0 left-0 w-full text-center text-orange-500 bg-gray-100 py-2 opacity-80 text-sm">
-          Currently in private preview mode, public can’t see this
+        <div className="fixed top-0 left-0 w-full text-center text-red-500 bg-gray-100 py-2 opacity-80 text-sm">
+          {t(
+            "This address is in local editing preview mode and cannot be viewed by the public. The expected online address is:",
+          )}
+          <UniLink
+            href={`${getSiteLink({
+              subdomain: site?.username || "",
+              domain: site?.custom_domain,
+            })}/${page.slug || getDefaultSlug(page.title || "", page.id)}`}
+            className="hover:underline"
+          >
+            {getSiteLink({
+              subdomain: site?.username || "",
+              domain: site?.custom_domain,
+              noProtocol: true,
+            })}
+            /{page.slug || getDefaultSlug(page.title || "", page.id)}
+          </UniLink>
         </div>
       )}
       <article>

src/lib/helpers.ts

@@ -2,6 +2,7 @@ import { NoteEntity } from "crossbell.js"
 
 import { IS_PROD } from "./constants"
 import { OUR_DOMAIN } from "./env"
+import pinyin from "pinyin"
 
 export const getSiteLink = ({
   domain,
@@ -30,3 +31,16 @@ export const getNoteSlug = (note: NoteEntity) => {
     (note.metadata?.content as any)?._crosslog_slug
   )?.toLowerCase?.()
 }
+
+export const getDefaultSlug = (title: string, id: string) => {
+  return (
+    pinyin(title as string, {
+      style: pinyin.STYLE_NORMAL,
+      compact: true,
+    })?.[0]
+      ?.map((word) => word.trim())
+      ?.filter((word) => word)
+      ?.join("-")
+      ?.replace(/\s+/g, "-") || id.replace(`local-`, "")
+  )
+}

src/pages/_site/[site]/preview/[page].tsx

@@ -43,7 +43,19 @@ function SitePagePage() {
 
   const site = useGetSite(domainOrSubdomain)
 
-  return <SitePage page={page.data} site={site.data} />
+  return (
+    <SitePage
+      page={
+        page.data
+          ? {
+              ...page.data,
+              preview: true,
+            }
+          : null
+      }
+      site={site.data}
+    />
+  )
 }
 
 SitePagePage.getLayout = (page: ReactElement) => {

src/pages/dashboard/[subdomain]/editor.tsx

@@ -42,6 +42,7 @@ import { useTranslation } from "next-i18next"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
 import { GetServerSideProps } from "next"
 import { serverSidePropsHandler } from "~/lib/server-side-props"
+import { getDefaultSlug } from "~/lib/helpers"
 
 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
   async (ctx) => {
@@ -133,17 +134,10 @@ export default function SubdomainEditor() {
       }
       if (key === "title") {
         setDefaultSlug(
-          pinyin(value as string, {
-            style: pinyin.STYLE_NORMAL,
-            compact: true,
-          })?.[0]
-            ?.map((word) => word.trim())
-            ?.filter((word) => word)
-            ?.join("-")
-            ?.replace(/\s+/g, "-") ||
-            draftKey
-              .replace(`draft-${subdomain}-local-`, "")
-              .replace(`draft-${subdomain}-`, ""),
+          getDefaultSlug(
+            value as string,
+            draftKey.replace(`draft-${subdomain}-`, ""),
+          ),
         )
       }
       const newValues = { ...values, [key]: value }
@@ -235,14 +229,10 @@ export default function SubdomainEditor() {
       content: page.data.body?.content || "",
     })
     setDefaultSlug(
-      pinyin(page.data.title || "", {
-        style: pinyin.STYLE_NORMAL,
-        compact: true,
-      })?.[0]
-        ?.map((word) => word.trim())
-        ?.filter((word) => word)
-        ?.join("-")
-        ?.replace(/\s+/g, "-") || "",
+      getDefaultSlug(
+        page.data.title || "",
+        draftKey.replace(`draft-${subdomain}-`, ""),
+      ),
     )
   }, [page.data, subdomain, draftKey])