feature(Sharing section): add Raw Json URL card to Sharing section

apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx

@@ -4,6 +4,7 @@ import { Button, Input, Label, Switch, Tooltip } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
 
 import { useToast } from "@/client/hooks/use-toast";
+import { axios } from "@/client/libs/axios"
 import { useUser } from "@/client/services/user";
 import { useResumeStore } from "@/client/stores/resume";
 
@@ -20,6 +21,7 @@ export const SharingSection = () => {
 
   // Constants
   const url = `${window.location.origin}/${username}/${slug}`;
+  const rawJsonUrl = `${window.location.origin}${axios.defaults.baseURL}/resume/public/${username}/${slug}/stealthily`;
 
   const onCopy = async () => {
     await navigator.clipboard.writeText(url);
@@ -31,6 +33,16 @@ export const SharingSection = () => {
     });
   };
 
+  const onRawJsonCopy = async () => {
+    await navigator.clipboard.writeText(rawJsonUrl);
+
+    toast({
+      variant: "success",
+      title: t`A link has been copied to your clipboard.`,
+      description: t`Anyone with this link can view and download the json data of the resume. This link will not count towards the resume view count.`,
+    });
+  };
+
   return (
     <section id="sharing" className="grid gap-y-6">
       <header className="flex items-center justify-between">
@@ -65,21 +77,50 @@ export const SharingSection = () => {
           {isPublic && (
             <motion.div
               layout
-              className="space-y-1.5"
+              className="space-y-3"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
             >
-              <Label htmlFor="resume-url">{t`URL`}</Label>
+              <div className="space-y-1.5">
+                <Label htmlFor="resume-url">{t`URL`}</Label>
 
-              <div className="flex gap-x-1.5">
-                <Input readOnly id="resume-url" value={url} className="flex-1" />
+                <div className="flex gap-x-1.5">
+                  <Input
+                    readOnly
+                    id="resume-url"
+                    value={url}
+                    className="flex-1 caret-transparent"
+                  />
 
-                <Tooltip content={t`Copy to Clipboard`}>
-                  <Button size="icon" variant="ghost" onClick={onCopy}>
-                    <CopySimpleIcon />
-                  </Button>
-                </Tooltip>
+                  <Tooltip content={t`Copy to Clipboard`}>
+                    <Button size="icon" variant="ghost" onClick={onCopy}>
+                      <CopySimpleIcon />
+                    </Button>
+                  </Tooltip>
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="resume-raw-json-url" className="space-y-1">
+                  <p>{t`Raw Json URL`}</p>
+                  <p className="text-xs opacity-60">{t`For advanced users! Does not count towards resume statistics.`}</p>
+                </Label>
+
+                <div className="flex gap-x-1.5">
+                  <Input
+                    readOnly
+                    id="resume-raw-json-url"
+                    value={rawJsonUrl}
+                    className="flex-1 caret-transparent"
+                  />
+
+                  <Tooltip content={t`Copy to Clipboard`}>
+                    <Button size="icon" variant="ghost" onClick={onRawJsonCopy}>
+                      <CopySimpleIcon />
+                    </Button>
+                  </Tooltip>
+                </div>
               </div>
             </motion.div>
           )}