feat: support share link

package.json

@@ -47,6 +47,7 @@
     "embla-carousel-react": "8.5.1",
     "input-otp": "1.4.1",
     "lucide-react": "^0.454.0",
+    "nanoid": "^5.1.5",
     "next": "15.2.4",
     "next-themes": "^0.4.4",
     "react": "^19",

pnpm-lock.yaml

@@ -122,6 +122,9 @@ importers:
       lucide-react:
         specifier: ^0.454.0
         version: 0.454.0([email protected])
+      nanoid:
+        specifier: ^5.1.5
+        version: 5.1.5
       next:
         specifier: 15.2.4
         version: 15.2.4([email protected]([email protected]))([email protected])
@@ -1656,6 +1659,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
@@ -3463,6 +3471,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]([email protected]([email protected]))([email protected]):
     dependencies:
       react: 19.1.0

src/components/preview.tsx

@@ -2,11 +2,13 @@
 
 import { useState, forwardRef, useImperativeHandle, useEffect, useRef } from "react"
 import { DEFAULT_HTML } from "@/lib/constants"
-import { PreviewRef, Version } from "@/lib/types"
+import { PreviewRef } from "@/lib/types"
 import { MinimizeIcon, MaximizeIcon, DownloadIcon, RefreshIcon } from "./ui/icons"
 import { useModel } from "@/lib/contexts/model-context"
-import { Loader2 } from "lucide-react"
+import { Loader2, Share2 } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { generateShareLink } from "@/lib/sharelink"
+import { ShareDialog } from "./share-dialog"
 
 interface PreviewProps {
   initialHtml?: string;
@@ -28,6 +30,9 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
   const [error, setError] = useState<string | null>(null);
   const [showAuthError, setShowAuthError] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [isSharing, setIsSharing] = useState(false);
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
+  const [shareUrl, setShareUrl] = useState<string>("");
   const { selectedModelId } = useModel();
   const renderCount = useRef(0);
   const headUpdated = useRef(false);
@@ -257,6 +262,38 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
     }
   };
 
+  const handleShare = async () => {
+    if (!html) {
+      setError("No HTML content to share");
+      return;
+    }
+
+    setIsSharing(true);
+    setError(null);
+
+    try {
+      const uploadedUrl = await generateShareLink(html, currentVersion || "");
+      setShareUrl(uploadedUrl);
+      setShareDialogOpen(true);
+    } catch (err) {
+      const errorMessage = (err as Error).message || 'Failed to share HTML';
+      setError(errorMessage);
+      if (onErrorChange) {
+        onErrorChange(errorMessage);
+      }
+      console.error('Error sharing HTML:', err);
+    } finally {
+      setIsSharing(false);
+    }
+  };
+
+  const handleShareDialogClose = (open: boolean) => {
+    setShareDialogOpen(open);
+    if (!open) {
+      setShareUrl("");
+    }
+  };
+
   return (
     <div className={`${isFullscreen ? 'fixed inset-0 z-10 bg-novita-dark' : 'h-full'} p-4 pl-2`}>
       { isPartialGenerating && (
@@ -271,6 +308,21 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       )}
       <div className="bg-white text-black h-full overflow-hidden relative isolation-auto">
         <div className="absolute top-3 right-3 flex gap-2 z-[100]">
+          <button
+            onClick={handleShare}
+            disabled={isSharing || !html}
+            className="bg-novita-gray/90 text-white p-2 px-3 text-xs rounded-md shadow-md hover:bg-novita-gray/70 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Share Link"
+            title="Share Link"
+          >
+            {isSharing ? (
+              <Loader2 className="h-3 w-3 mr-2 animate-spin" />
+            ) : (
+              <Share2 className="h-3 w-3 mr-2" />
+            )}
+            {isSharing ? 'Sharing...' : 'Share Link'}
+          </button>
+
           <button
             onClick={refreshPreview}
             className="bg-novita-gray/90 text-white p-2 rounded-md shadow-md hover:bg-novita-gray/70 transition-colors flex items-center justify-center"
@@ -305,6 +357,12 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
           title="Preview"
         />
       </div>
+
+      <ShareDialog 
+        open={shareDialogOpen}
+        onOpenChange={handleShareDialogClose}
+        shareUrl={shareUrl}
+      />
     </div>
   )
 });

src/components/share-dialog.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { useState } from "react"
+import { Copy, Check, AlertTriangle } from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
+import { Button } from "./ui/button"
+
+interface ShareDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  shareUrl: string;
+}
+
+export function ShareDialog({ open, onOpenChange, shareUrl }: ShareDialogProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy link:', err);
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    setCopied(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share Your Creation</DialogTitle>
+        </DialogHeader>
+        
+        <div className="flex items-start space-x-2 p-3 rounded-md">
+          <AlertTriangle className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            <strong>Note:</strong> This shared link is temporary and may not be permanently available.
+          </p>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <label htmlFor="link" className="sr-only">
+              Link
+            </label>
+            <input
+              id="link"
+              value={shareUrl}
+              readOnly
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            />
+          </div>
+          <Button 
+            type="button" 
+            size="sm" 
+            className="px-3"
+            onClick={handleCopyLink}
+          >
+            <span className="sr-only">Copy</span>
+            {copied ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        <div className="flex justify-end space-x-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleClose}
+          >
+            Close
+          </Button>
+          <Button
+            type="button"
+            onClick={() => window.open(shareUrl, '_blank')}
+          >
+            Open Link
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+} 

src/lib/sharelink.ts

@@ -0,0 +1,47 @@
+import { nanoid } from "nanoid";
+const FILE_NAME_KEY = "novita-anysite-share-filename";
+const BASE_URL = "https://anysite-gallery.novita.ai";
+
+function getShareFilename(): string {
+  let filename = localStorage.getItem(FILE_NAME_KEY);
+
+  if (!filename) {
+    filename = `${nanoid()}`;
+    localStorage.setItem(FILE_NAME_KEY, filename);
+  }
+
+  return filename;
+}
+
+export async function generateShareLink(html: string) {
+  const filename = getShareFilename();
+
+  const response = await fetch(`${BASE_URL}/api/upload-code`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      filename: `${filename}.html`,
+      code: html,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to upload: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const result = await response.json();
+
+  if (!result.success) {
+    throw new Error(result.message || "Failed to upload HTML");
+  }
+
+  const uploadedUrl = result.data?.url;
+  if (!uploadedUrl) {
+    throw new Error("No URL returned from upload service");
+  }
+  return `${BASE_URL}/${filename}`;
+}