1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3179],{54368:(e,t,a)=>{"use strict";a.r(t),a.d(t,{default:()=>W});var r=a(75038),l=a(76430),s=a(21958),o=a(58742),i=a(58454),n=a(12075),c=a(72651),d=a(56725),m=a(83390),u=a(7880),h=a.n(u),p=a(73982),x=a(88061),g=a(25393),f=a(20142),b=new Map;b.set("bold",function(e){return l.createElement(l.Fragment,null,l.createElement("polyline",{points:"118.1 174.1 152 208 185.9 174.1",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}),l.createElement("line",{x1:"152",y1:"128",x2:"152",y2:"208",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}),l.createElement("path",{d:"M96,208H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}),l.createElement("path",{d:"M80,128a80,80,0,1,1,144,48",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}))}),b.set("duotone",function(e){return l.createElement(l.Fragment,null,l.createElement("path",{d:"M80,128a80,80,0,1,1,80,80H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7",opacity:"0.2"}),l.createElement("polyline",{points:"118.1 174.1 152 208 185.9 174.1",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),l.createElement("line",{x1:"152",y1:"128",x2:"152",y2:"208",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),l.createElement("path",{d:"M96,208H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),l.createElement("path",{d:"M80,128a80,80,0,1,1,144,48",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}))}),b.set("fill",function(){return l.createElement(l.Fragment,null,l.createElement("path",{d:"M160.1,40A88.1,88.1,0,0,0,81.3,88.7h0a86.6,86.6,0,0,0-9.3,39,8.2,8.2,0,0,1-7.4,8.3,8,8,0,0,1-8.6-8,105,105,0,0,1,5.3-32.9,4,4,0,0,0-4.7-5.2A64,64,0,0,0,8,152c0,35.2,29.8,64,64.9,64H160a88,88,0,0,0,.1-176Zm31.5,123.7-33.9,34A8.5,8.5,0,0,1,152,200a8.3,8.3,0,0,1-5.7-2.3l-33.9-34a8,8,0,0,1,11.3-11.3L144,172.7V112a8,8,0,0,1,16,0v60.7l20.3-20.3a8,8,0,0,1,11.3,11.3Z"}))}),b.set("light",function(e){return l.createElement(l.Fragment,null,l.createElement("polyline",{points:"118.1 174.1 152 208 185.9 174.1",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),l.createElement("line",{x1:"152",y1:"128",x2:"152",y2:"208",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),l.createElement("path",{d:"M96,208H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),l.createElement("path",{d:"M80,128a80,80,0,1,1,144,48",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}))}),b.set("thin",function(e){return l.createElement(l.Fragment,null,l.createElement("polyline",{points:"118.1 174.1 152 208 185.9 174.1",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}),l.createElement("line",{x1:"152",y1:"128",x2:"152",y2:"208",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}),l.createElement("path",{d:"M96,208H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}),l.createElement("path",{d:"M80,128a80,80,0,1,1,144,48",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}))}),b.set("regular",function(e){return l.createElement(l.Fragment,null,l.createElement("polyline",{points:"118.1 174.1 152 208 185.9 174.1",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),l.createElement("line",{x1:"152",y1:"128",x2:"152",y2:"208",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),l.createElement("path",{d:"M96,208H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),l.createElement("path",{d:"M80,128a80,80,0,1,1,144,48",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}))});var j=function(e,t){return(0,g.$)(e,t,b)},v=(0,l.forwardRef)(function(e,t){return l.createElement(f.A,Object.assign({ref:t},e,{renderPath:j}))});v.displayName="CloudArrowDown";var y=a(19297),w=a(46001),k=a.n(w),N=a(49714).hp;let L=({setFromUrl:e,fromUrl:t,meta:a,setMeta:s,copyImage:d,saveImage:u,isPro:h,handleNonPro:g,imageRef:f})=>{let{c_Session:b}=(0,l.useContext)(i.A),[j,w]=(0,l.useState)({isFetching:!1}),L=async e=>{if(e&&e.preventDefault(),!h)return void g({text:"Please upgrade to Pro to quickly fetch details from a URL"});if(!t)return void o.oR.error("URL field cannot be blank");s(e=>({...e,loading:!0}));try{let e=await (0,c.SV)({url:"/api/getLinkPreview",body:{link:t}});if(e&&!e.error){s(t=>({...t,title:e.title||null,excerpt:e.description||null,author:e.author||null,published:e?.published&&!isNaN(Date.parse(e?.published))?new Date(e.published).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"}):null}));try{let t=await fetch(e.image).then(e=>e.blob());t?.size?s(t=>({...t,image:e.image||null,authorPhoto:e.icon||""})):(R(),o.oR.error("Couldn't load image, the link doesn't have resource sharing enabled"))}catch(e){R(),o.oR.error("Couldn't load image, the link doesn't have resource sharing enabled")}}else o.oR.error("string"==typeof e?.error?e.error:"Couldn't fetch details from this URL")}catch(e){R()}finally{s(e=>({...e,loading:!1}))}},P=({event:e,type:t})=>{var a=(e?.clipboardData||e?.originalEvent?.clipboardData)?.items||e?.target?.files||e?.dataTransfer?.files,r=0;for(r in a){var l=a[r];if("file"===l.kind||l?.type?.includes("image")){var o=l?.kind?l.getAsFile():l,i=new FileReader;i.onload=function(e){"authorPhoto"==t?s(t=>({...t,authorPhoto:e.target.result})):"backgroundImage"==t&&s(t=>({...t,image:e.target.result}))},i.readAsDataURL(o)}}},R=async()=>{let e=t;if(!h)return void g({text:"Please upgrade to Pro to fetch screenshots from URL"});if(!e?.length||e?.trim()==="")return void o.oR.error("URL field cannot be empty");/^https?:\/\//i.test(e)||(e="https://"+e);try{new URL(e),w({isFetching:!0})}catch{o.oR.error('Enter a valid URL, including "http" or "https"');return}let a=o.oR.loading("Loading screenshot from URL...");(0,c.vq)("captured_screenshot_from_og_url",{key:b?.email||""});try{let t=await (0,c.SV)({url:"/api/getScreenshotFromURL",body:{url:e}});if(t?.base?.data?.length){let e="data:image/png;base64,"+N.from(t?.base).toString("base64");o.oR.success("Added image",{id:a}),s(t=>({...t,image:e})),w({isFetching:!1})}else{let t=await (0,c.SV)({url:"/api/getScreenshotFromURL",body:{url:e}});if(t?.base?.data?.length){let e="data:image/png;base64,"+N.from(t?.base).toString("base64");o.oR.success("Added image",{id:a}),s(t=>({...t,image:e})),w({isFetching:!1})}else o.oR.error("Couldn't fetch the image from URL, please try again",{id:a}),w({isFetching:!1})}}catch(e){o.oR.error("Couldn't fetch the image from URL, please try again",{id:a}),w({isFetching:!1})}};return(0,r.jsx)("div",{className:"mt-5 pb-20 w-full lg:w-[400px] flex flex-none flex-col",children:(0,r.jsx)(p.E,{children:(0,r.jsxs)("div",{className:"w-full",children:[(0,r.jsxs)("div",{className:"w-full",children:[(0,r.jsx)("div",{className:"w-full p-4",children:(0,r.jsxs)("form",{onSubmit:L,children:[(0,r.jsx)("div",{className:"flex items-center",children:(0,r.jsx)(m.pd,{t
1ype:"url",label:(0,r.jsxs)("div",{className:"flex items-center",children:["Fetch from URL",h?"":(0,r.jsx)(c.ad,{})]}),placeholder:"https://yourpage.com/some-article",onChange:t=>e(t.target.value)})}),(0,r.jsxs)(m.$n,{type:"submit",variant:"secondary",className:k()("w-full mt-2",{"pointer-events-none cursor-not-allowed":a.loading}),children:[a?.loading?(0,r.jsx)("span",{className:"w-4 h-4 mr-2",children:x.Nl}):"","Fetch"]})]})}),(0,r.jsxs)("div",{className:"dark:text-gray-500 relative text-center w-full text-gray-400",children:[(0,r.jsx)("span",{className:"absolute top-[50%] left-0 w-full h-[2px] dark:bg-gray-900 bg-gray-200"}),(0,r.jsx)("span",{className:"relative z-10 dark:bg-gray-900 bg-gray-200 rounded-full px-2",children:"Or"})]}),(0,r.jsxs)("div",{className:"w-full space-y-2 p-4",children:[(0,r.jsx)(m.pd,{label:"Title",value:a.title||"",onChange:e=>s(t=>({...t,title:e.target.value}))}),(0,r.jsx)(m.TM,{label:"Excerpt",value:a.excerpt||"",onChange:e=>s(t=>({...t,excerpt:e.target.value}))}),(0,r.jsx)(m.pd,{label:"Author",value:a.author||"",onChange:e=>s(t=>({...t,author:e.target.value}))}),(0,r.jsx)(m.pd,{label:"Published Date",value:a.published||"",onChange:e=>s(t=>({...t,published:e.target.value}))}),(0,r.jsxs)("div",{className:"grid grid-cols-2 w-full gap-x-5",children:[(0,r.jsxs)("div",{className:"",children:[(0,r.jsxs)("label",{className:"flex mb-px text-sm font-semibold md:text-base dark:text-white items-center",children:["Feature image",a?.image?(0,r.jsx)(c.US,{title:"Remove image",className:"ml-2",onClick:()=>s(e=>({...e,image:null}))}):""]}),(0,r.jsxs)("label",{className:"px-8 max-h-[80px] overflow-hidden rounded-xl flex items-center justify-center text-2xl dark:bg-gray-800 text-white bg-linear-to-br from-gray-600 to-gray-800 opacity-90 hover:opacity-100 duration-100 cursor-pointer flex-col py-4 mt-2 drop-shadow",htmlFor:"customBgImage",style:a?.image?{backgroundImage:`linear-gradient(195deg, rgba(17, 17, 17, 1.7), rgba(5, 5, 5, 0.53)), url(${a?.image})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:{},children:[(0,r.jsx)("input",{className:"hidden",id:"customBgImage",type:"file",onChange:e=>{P({event:e,type:"backgroundImage"})}}),"+",(0,r.jsx)("span",{className:"text-sm font-semibold leading-none whitespace-nowrap",children:a?.image?"Replace image":"Add image"})]})]}),(0,r.jsxs)("div",{className:"",children:[(0,r.jsxs)("label",{className:"flex mb-px text-sm font-semibold md:text-base dark:text-white items-center",children:["Author Photo",a?.authorPhoto?(0,r.jsx)(c.US,{title:"Remove photo",className:"ml-2",onClick:()=>s(e=>({...e,authorPhoto:null}))}):""]}),(0,r.jsxs)("label",{className:"px-8 max-h-[80px] overflow-hidden rounded-xl flex items-center justify-center text-2xl dark:bg-gray-800 text-white bg-linear-to-br from-gray-600 to-gray-800 opacity-90 hover:opacity-100 duration-100 cursor-pointer flex-col py-4 mt-2 drop-shadow",htmlFor:"customAuthorImage",style:a?.authorPhoto?{background:`linear-gradient(195deg, rgba(17, 17, 17, 1.7), rgba(5, 5, 5, 0.53)), url(${a?.authorPhoto}) center no-repeat`,backgroundSize:"cover"}:{},children:[(0,r.jsx)("input",{className:"hidden",id:"customAuthorImage",type:"file",onChange:e=>P({event:e,type:"authorPhoto"})}),"+",(0,r.jsx)("span",{className:"text-sm font-semibold leading-none whitespace-nowrap",children:a?.authorPhoto?"Replace photo":"Add photo"})]})]})]})]}),(0,r.jsx)("div",{className:"mt-2 mb-4 block px-4",children:(0,r.jsxs)(m.$n,{variant:"secondary",className:"w-full",onClick:R,disabled:j?.isFetching,children:[h?(0,r.jsx)(v,{size:16}):(0,r.jsx)(y.A,{size:16}),(0,r.jsx)("span",{className:"ml-1 ",children:"Get URL screenshot as image"})]})})]}),(0,r.jsx)(n.CR,{allowScaling:!0,copyImage:d,saveImage:u,imageRef:f})]})})})},P=({src:e})=>(0,r.jsx)("img",{alt:"Author",src:e,className:"object-cover w-8 mr-2 h-8 bg-gray-50 rounded-full dark:bg-gray-800"}),R=()=>(0,r.jsxs)("div",{className:"absolute bottom-[4%] leading-none right-[3%] text-sm text-white shadow group",children:[(0,r.jsxs)("div",{className:"hidden group-hover:block text-sm bg-gray-900/60 rounded-xl absolute bottom-[calc(100%+10px)] right-[-10px] w-[200px] z-10 px-2 py-1 backdrop-blur-md",children:[(0,r.jsx)("span",{className:"font-semibold",children:"Upgrade to Pro"})," to remove this watermark"]}),(0,r.jsxs)("div",{className:"text-white relative mb-px px-1 py-px whitespace-nowrap cursor-pointer",children:[(0,r.jsx)("span",{className:"absolute -rotate-2 top-[-5px] left-[-5px] w-[calc(100%+10px)] h-[calc(100%+10px)] rounded-lg bg-pink-500 shadow-xl"}),(0,r.jsx)("span",{className:"relative opacity-90",children:"Created using"}),(0,r.jsx)("span",{className:"relative block font-semibold opacity-90",children:"pika.style"})]})]}),E=()=>(0,r.jsxs)("div",{className:"py-[10px] w-full bg-gray-800/70 rounded-tl-2xl absolute top-0 left-0 flex px-4 space-x-2 border-b border-gray-700/50 ",children:[(0,r.jsx)("div",{className:"w-3 h-3 rounded-full bg-[#FE5F57]"}),(0,r.jsx)("div",{className:"w-3 h-3 rounded-full bg-[#FFBC2E]"}),(0,r.jsx)("div",{className:"w-3 h-3 rounded-full bg-[#28C840]"})]}),C=({meta:e,isPro:t})=>(0,r.jsxs)("div",{className:"flex justify-center w-full h-full relative",children:[(0,r.jsxs)("div",{className:"flex flex-col max-w-[50%] w-full p-5 h-full justify-center",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-3xl font-black break-word text-gray-900",children:e.title??"Native-Like Animations for Page Transitions on the Web"}),(0,r.jsx)("p",{className:"mt-3 text-lg text-gray-500",children:e.excerpt??""})]}),(0,r.jsxs)("div",{className:"flex mt-10 whitespace-nowrap text-gray-500",children:[(0,r.jsxs)("div",{className:"flex",children:[e.authorPhoto?(0,r.jsx)(P,{src:e.authorPhoto}):"",e.author?(0,r.jsx)("div",{className:"mt-1",children:e.author}):""]}),e.published?(0,r.jsx)("div",{className:"px-1 mt-1",children:"-"}):"",e.published?(0,r.jsx)("div",{className:"mt-1",children:e.published}):""]})]}),(0,r.jsx)("div",{className:k()(`w-[50%] bg-linear-to-br from-pink-300 to-red-300 h-full overflow-hidden flex ${e.imagePosition}`),children:e.image?(0,r.jsx)("img",{src:e.image,alt:"Meta feature image",className:"object-cover object-top h-full w-full"}):""}),t?"":(0,r.jsx)(R,{})]}),A=({meta:e,isPro:t})=>(0,r.jsxs)("div",{className:"flex justify-start w-full h-full relative",children:[(0,r.jsxs)("div",{className:k()(`absolute inset-0 w-full h-ull bg-linear-to-br from-pink-300 to-red-300 flex ${e.imagePosition}`),children:[e.image?(0,r.jsx)("img",{src:e.image,alt:"Meta feature image",className:"object-cover object-top h-full w-full"}):"",(0,r.jsx)("div",{className:"absolute w-full h-full left-0 bottom-0 bg-linear-to-b from-black/10 via-black/80 to-black"})]}),(0,r.jsxs)("div",{className:"flex flex-col w-full px-6 py-6 h-full justify-end relative text-white",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-3xl font-black break-word",children:e.title??"Native-Like Animations for Page Transitions on the Web"}),(0,r.jsx)("p",{className:"mt-3 text-lg opacity-90",children:e.excerpt??""})]}),(0,r.jsxs)("div",{className:"flex mt-5 whitespace-nowrap text-gray-400",children:[(0,r.jsxs)("div",{className:"flex",children:[e.authorPhoto?(0,r.jsx)(P,{src:e.authorPhoto}):"",e.author?(0,r.jsx)("div",{className:"mt-1",children:e.author}):""]}),e.published?(0,r.jsx)("div",{className:"px-1 mt-1",children:"-"}):"",e.published?(0,r.jsx)("div",{className:"mt-1",children:e.published}):""]})]}),t?"":(0,r.jsx)(R,{})]}),F=({meta:e,isPro:t})=>(0,r.jsxs)("div",{className:"flex justify-start w-full h-full relative",children:[(0,r.jsx)("div",{className:k()(`absolute inset-0 w-full h-full bg-linear-to-br from-pink-300 to-red-300 flex ${e.imagePosition}`),children:e.image?(0,r.jsx)("img",{src:e.image,alt:"Meta feature image",className:"object-cover object-top h-full w-full"}):""}),(0,r.jsxs)("div",{className:"absolute w-[90%] h-[88%] bottom-0 right-0 rounded-tl-2xl bg-gray-900/80 backdrop-blur-xl shadow-2xl",children:[(0,r.jsx)(E,{}),(0,r.jsxs)("div",{className:"flex flex-col w-full p-10 h-full justify-end relative text-white",children:[(0,r.jsxs)("div",{children:[e.icon?(0,r.jsx)("img",{src:e.icon,alt:"Meta Icon",className:"w-10 mb-4 h-10 rounded-full"}):"",(0,r.jsx)("div",{className:"text-3xl font-black break-word",children:e.title??"Native-Like Animations for Page Transitions on the Web"}),(0,r.jsx)("p",{className:"mt-3 text-lg opacity-90",children:e.excerpt??""})]}),(0,r.jsxs)("div",{className:"flex mt-10 whitespace-nowrap text-gray-400",children:[(0,r.jsxs)("div",{className:"flex",children:[e.authorPhoto?(0,r.jsx)(P,{src:e.authorPhoto}):"",e.author?(0,r.jsx)("div",{className:"mt-1",children:e.author}):""]}),e.published?(0,r.jsx)("div",{className:"px-1 mt-1",children:"-"}):"",e.published?(0,r.jsx)("div",{className:"mt-1",children:e.published}):""]})]})]}),t?"":(0,r.jsx)(R,{})]}),S=({meta:e,isPro:t})=>(0,r.jsxs)("div",{className:"flex justify-start w-full h-full relative flex-col overflow-hidden",children:[(0,r.jsx)("div",{className:k()("absolute bottom-0 w-full h-full bg-linear-to-br from-red-500 to-indigo-300 flex opacity-20 blur-xl scale-[1.4]"),children:e.image?(0,r.jsx)("img",{src:e.image,alt:"Meta feature image",className:"object-cover w-full h-full"}):""}),e.icon?(0,r.jsx)("img",{src:e.icon,alt:"Meta Icon",className:"w-10 mb-4 h-10 rounded-full"}):"",(0,r.jsxs)("div",{className:"pt-10 max-w-[90%] mx-auto text-center flex items-center justify-center flex-col text-gray-900 relative",children:[(0,r.jsx)("div",{className:"text-4xl font-black break-word mx-auto w-full text-black",children:e.title??"Native-Like Animations for Page Transitions on the Web"}),(0,r.jsx)("div",{className:"mt-3 mx-auto text-lg opacity-90 w-full",children:e.excerpt??""}),(0,r.jsxs)("div",{className:"flex mt-5 whitespace-nowrap text-gray-500 mx-auto",children:[(0,r.jsxs)("div",{className:"flex",children:[e.authorPhoto?(0,r.jsx)(P,{src:e.authorPhoto}):"",e.author?(0,r.jsx)("div",{className:"mt-1",children:e.author}):""]}),e.published?(0,r.jsx)("div",{className:"px-1 mt-1",children:"-"}):"",e.published?(0,r.jsx)("div",{className:"mt-1",children:e.published}):""]})]}),(0,r.jsx)("div",{className:"text-white w-full flex items-center justify-center mt-auto pt-5 relative h-full rounded-t-xl overflow-hidden",children:(0,r.jsx)("div",{className:"max-w-[60%] flex items-center justify-center w-full h-full",children:e.image?(0,r.jsx)("img",{src:e.image,alt:"Meta feature image",className:"object-cover h-full object-top w-full rounded-t-xl shadow-2xl shadow-gray-800/50"}):(0,r.jsx)("div",{className:"bg-linear-to-br from-pink-300 to-red-300 w-full h-full rounded-t-xl"})})}),t?"":(0,r.jsx)(R,{})]}),T=({meta:e,isPro:t,fromUrl:a})=>(0,r.jsxs)("div",{className:"flex justify-start w-full h-full relative flex-col bg-white p-5",children:[(0,r.jsx)("div",{className:"w-full h-full grid absolute top-0 left-0",style:{gridTemplateRows:"repeat(10, 1fr)}"},children:[...Array(10)].map((e,t)=>(0,r.jsx)("div",{className:"w-full h-full border-b last:border-b-0",style:{borderColor:"#f5f5f5"}},t))}),(0,r.jsx)("div",{className:"w-full h-full grid absolute top-0 left-0 last:border-r-0!",style:{gridTemplateColumns:"repeat(10, 1fr)"},children:[...Array(10)].map((e,t)=>(0,r.jsx)("div",{className:"w-full h-full border-r last:border-r-0",style:{borderColor:"#f5f5f5"}},t))}),(0,r.jsxs)("div",{className:"relative flex max-w-[90%] w-full mx-auto h-full rounded-xl overflow-hidden bg-white",style:{boxShadow:"0 0 12px rgba(0,0,0,0.2)"},children:[(0,r.jsx)("div",{className:k()(`w-full h-full bg-linear-to-br from-pink-300 to-red-300 flex ${e.imagePosition}`),children:e.image?(0,r.jsx)("img",{src:e.image,alt:"Meta feature image",className:"object-cover object-center h-full w-full"}):""}),(0,r.jsxs)("div",{className:"flex flex-col w-full px-5 py-4 justify-start text-black bg-white absolute left-0 bottom-0",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-lg font-bold break-word",children:e.title??"Native-Like Animations for Page Transitions on the Web"}),(0,r.jsx)("p",{className:"text-lg opacity-90",children:e?.excerpt?.length>65?e?.excerpt?.slice(0,65)+"...":e?.excerpt})]}),(0,r.jsx)("div",{className:"flex whitespace-nowrap",children:(0,r.jsxs)("div",{className:"flex items-center mt-[4px]",children:[e.authorPhoto?(0,r.jsx)("div",{className:"w-6 h-6 as
1pect-square flex items-center justify-center mr-2",children:(0,r.jsx)("img",{src:e.authorPhoto,className:"border border-gray-300 rounded-full",alt:e?.title||"Open Graph"})}):"",a?(0,r.jsx)("div",{className:"opacity-50",children:(()=>{if(!a?.length)return null;try{return new URL(a),new URL(a)?.hostname?.replace("www.","")}catch(e){return null}})()}):""]})})]})]}),t?"":(0,r.jsx)(R,{})]});var I=a(93646);let M={title:"Open Graph Image Generator",excerpt:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto ex ea? Totam inventore est dolorum, hic temporibus velit.",author:"Rishi Mohan",published:"March 12",loading:!1,image:null,authorPhoto:"/avatar.png"},U=e=>String(e??"").replace(/&/g,"&").replace(/"/g,"""),O=({fromUrl:e,meta:t,setMeta:a,canvasRef:s,isPro:i})=>{let[n,c]=(0,l.useState)(0);(0,l.useEffect)(()=>{a(M);try{let e=JSON.parse(localStorage.getItem("pikaOGpreset"));Number.isInteger(e)&&c(Math.min(Math.max(e,0),d.length-1))}catch(e){console.error("Couldn't load settings",e)}},[]),(0,l.useEffect)(()=>{try{localStorage.setItem("pikaOGpreset",JSON.stringify(n))}catch(e){console.error("Couldn't save settings",e)}},[n]);let d=[{src:(0,r.jsx)(S,{meta:t,isPro:i})},{src:(0,r.jsx)(A,{meta:t,isPro:i})},{src:(0,r.jsx)(F,{meta:t,isPro:i})},{src:(0,r.jsx)(C,{meta:t,isPro:i})},{src:(0,r.jsx)(T,{meta:t,isPro:i,fromUrl:e})}],u=`<!-- Primary Tags --> 2 <title>${U(t?.title)}</title> 3 <meta name="title" content="${U(t?.title)}"> 4 <meta name="description" content="${U(t?.excerpt)}"> 5 6 <!-- Twitter --> 7 <meta property="twitter:title" content="${U(t?.title)}"> 8 <meta property="twitter:description" content="${U(t?.excerpt)}"> 9 <meta property="twitter:image" content="${U(e||"yourwebsite.com")}/LINK_TO_EXPORTED_IMAGE.png"> 10 <meta property="twitter:url" content="${U(e||"yourwebsite.com")}"> 11 <meta property="twitter:card" content="summary_large_image"> 12 13 <!-- Facebook --> 14 <meta property="og:title" content="${U(t?.title)}"> 15 <meta property="og:description" content="${U(t?.excerpt)}"> 16 <meta property="og:url" content="${U(e||"yourwebsite.com")}"> 17 <meta property="og:image" content="${U(e||"yourwebsite.com")}/LINK_TO_EXPORTED_IMAGE.png"> 18 <meta property="og:type" content="website">`;return(0,r.jsxs)("div",{className:"w-full lg:w-[calc(100%-400px)] pr-0 lg:pr-5 pt-5 lg:pl-0 flex flex-col items-center justify-center md:pb-10",children:[(0,r.jsxs)("div",{className:"flex items-center justify-between mb-5 mt-2 w-full",children:[(0,r.jsx)("div",{}),(0,r.jsxs)("div",{className:"flex items-center space-x-4",children:[(0,r.jsxs)(m.$n,{variant:"secondary",className:k()({"pointer-events-none cursor-not-allowed opacity-50":n-1<0}),onClick:()=>{c(e=>e-1>=0?e-1:e)},children:[(0,r.jsx)("span",{className:"w-4 h-4 mr-1 rotate-180",children:x.HK}),"Previous template"]}),(0,r.jsxs)(m.$n,{variant:"secondary",className:k()({"pointer-events-none cursor-not-allowed opacity-50":n+1>d.length-1}),onClick:()=>{c(e=>e+1<=d.length-1?e+1:e)},children:["Next template",(0,r.jsx)("span",{className:"w-4 h-4 ml-1",children:x.HK})]})]})]}),(0,r.jsx)("div",{className:"overflow-x-auto max-w-full",children:(0,r.jsx)("div",{className:"rounded-lg overflow-x-auto min-w-[800px]",children:(0,r.jsxs)("div",{className:"flex items-center justify-center bg-gray-100 w-[800px] h-[420px] overflow-hidden antialiased relative",ref:e=>s.current=e,children:[(0,r.jsx)(I.xH,{onDrop:e=>a(t=>({...t,image:e?.baseData}))}),d[n]?.src??d[0].src]})})}),(0,r.jsxs)("div",{className:"hidden md:block mt-5 bg-gray-100 dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-5 max-h-[200px] overflow-auto relative max-w-[800px]",children:[(0,r.jsx)(m.$n,{variant:"secondary",className:"sticky ml-auto -mb-5 top-0",onClick:async()=>{if(!navigator.clipboard)return void o.oR.error("Browser doesn't allow copying programmatically");try{await navigator.clipboard.writeText(u),o.oR.success("Open graph tags copied to clipboard")}catch(e){o.oR.error("Failed to copy Open graph tags to clipboard"),
18console.error("Failed to copy!",e)}},children:"Copy meta tags"}),(0,r.jsx)("code",{className:"whitespace-pre-line text-sm",children:u})]}),(0,r.jsxs)("div",{className:"py-2 font-mono md:py-4",children:[(0,r.jsxs)("div",{onClick:()=>a(M),className:"flex items-center justify-center w-full px-3 py-1 mx-auto text-sm text-gray-400 rounded-lg cursor-pointer dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400",children:[(0,r.jsx)("span",{className:"w-4 h-4 mr-1",children:x.NA}),"Reset"]}),(0,r.jsxs)("div",{className:"hidden text-sm text-center text-gray-400 dark:text-gray-500 md:block",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:"",children:"Cmd/Ctrl + S"}),": Save output image"]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:"",children:"Cmd/Ctrl + C"}),": Copy output to clipboard"]})]})]})]})};var _=a(69358);let W=function(){let e=(0,l.useRef)(),[t,a]=(0,l.useState)(),u=(0,l.useRef)(),[p,x]=(0,l.useState)({title:null,excerpt:null,author:null,published:null,loading:!1,image:null}),{c_Session:g,c_OpenLoginOrSignupModal:f,c_OpenUpgradeModal:b,c_SetStats:j,isPro:v}=(0,l.useContext)(i.A),y=async({customScale:t="1x",format:a="png",fileNamePrefix:r}={})=>{(0,c.vq)("og_image_saved",{key:g?.email||""});let l=o.oR.loading("Exporting image...");(0,c.i6)({ref:e.current,customScale:t,format:a,fileNamePrefix:r,onSuccess:()=>{o.oR.success("Image exported!",{id:l}),k(),g&&j({type:"og",exportType:"save",isPro:v})},onError:e=>{o.oR.error("Something went wrong, please try again",{id:l})}})},w=({text:e,type:t})=>{let a=(0,o.oR)((0,r.jsxs)("div",{className:"flex items-center",children:[(0,r.jsx)("div",{children:e||"Please upgrade to Pro to use this feature"}),(0,r.jsx)(m.$n,{onClick:()=>{(o.oR.dismiss(a),g)?g&&!v&&b():f({type:"Signup"})},className:"bg-black/70 px-2 py-1 text-sm font-semibold text-white ml-2 rounded-lg hover:scale-[1.05] duration-200 whitespace-nowrap",children:"Upgrade"})]}))},k=()=>{setTimeout(()=>{u?.current((0,c.Oe)({x:.1,y:.3})),u?.current((0,c.Oe)({x:.7,y:.9})),u?.current((0,c.Oe)({x:.8,y:.9})),u?.current((0,c.Oe)({x:.6,y:.9}))},300)};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(d.bV,{title:"Pika â Open Graph Image and Tags Generator",description:"Quickly generate perfectly sized Open Graph image(og:image) and meta tags from URL for Facebook, Twitter, LinkedIn and more",openGraph:{title:"Pika â Open Graph Image and Tags Generator",description:"Quickly generate perfectly sized Open Graph image(og:image) and meta tags from URL for Facebook, Twitter, LinkedIn and more",images:[{url:"/og-images/og.png",alt:"Pika â Open Graph Image and Tags Generator"}]}}),(0,r.jsx)(d.Zn,{id:"app",data:(0,d.rQ)({name:"Pika â Open Graph Image and Tags Generator",description:"Quickly generate perfectly sized Open Graph image(og:image) and meta tags from URL for Facebook, Twitter, LinkedIn and more",path:"/templates/open-graph-generator",image:"/og-images/og.png"})}),(0,r.jsx)(d.Zn,{id:"breadcrumb",data:(0,d.UE)([{name:"Pika",path:""},{name:"Templates",path:"/templates"},{name:"Open Graph Image and Tag Generator",path:"/templates/open-graph-generator"}])}),(0,r.jsx)(h(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:e})=>u.current=e}),(0,r.jsx)(s.A,{}),(0,r.jsx)("div",{className:"flex flex-col items-start justify-start max-w-[1280px] mx-auto",children:(0,r.jsxs)("div",{className:"relative flex flex-col-reverse w-full lg:flex-row-reverse px-5",children:[(0,r.jsx)(L,{fromUrl:t,setFromUrl:e=>a(e),meta:p,setMeta:e=>x(e),copyImage:({customScale:t="1x"}={})=>{let a=o.oR.loading("Copying image..."),r=0>navigator.userAgent.indexOf("Firefox");(0,c.vq)("og_image_copied",{key:g?.email||""}),(0,c.yq)({ref:e.current,customScale:t,onSuccess:()=>{o.oR.success("Image copied to clipboard",{id:a}),k(),g&&j({type:"og",exportType:"copy",isPro:v})},onError:()=>{r?o.oR.error("Something went wrong, please try again",{id:a}):o.oR.error("Firefox doesn't support copying image, please use save",{id:a})}})},saveImage:y,isPro:v,handleNonPro:w,imageRef:e?.current}
18),(0,r.jsx)(O,{meta:p,setMeta:e=>x(e),canvasRef:e,isPro:v,handleNonPro:w,fromUrl:t})]})}),(0,r.jsx)("div",{className:"pb-20",children:(0,r.jsx)(n.QK,{toShow:9,title:"Mockup Templates",subTitle:"Mockup templates can help you instantly create images for various use cases"})}),(0,r.jsx)(_.A,{})]})}},70817:(e,t,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/templates/open-graph-generator",function(){return a(54368)}])}},e=>{e.O(0,[4558,1178,407,7880,9539,1958,6394,5198,2075,2909,636,6593,8792],()=>e(e.s=70817)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.