CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
MetaTagEditor-uPETDQxa.js18 linesDownload Raw Back to assets
1import{r as o,j as e}from"./react-DKy9e2uO.js";import{i}from"./index-Ck8YGBbR.js";import"./bottleneck-Cpj98o6Y.js";import"./react-dom-CpxHE_eW.js";import"./scheduler-DYLXRpC5.js";import"./idb-Dob3nYDb.js";import"./@google-D80DdW2m.js";import"./marked-CesSW9Du.js";import"./jszip-s56H2EZ-.js";const n=({meta:t})=>e.jsxs("div",{className:"w-full max-w-md mx-auto bg-surface border border-border rounded-2xl overflow-hidden shadow-lg",children:[e.jsx("div",{className:"h-52 bg-gray-100 flex items-center justify-center",children:t.image?e.jsx("img",{src:t.image,alt:"Preview",className:"w-full h-full object-cover",onError:a=>a.currentTarget.style.display="none"}):e.jsx("span",{className:"text-text-secondary",children:"Image Preview"})}),e.jsxs("div",{className:"p-4",children:[e.jsx("p",{className:"text-xs text-text-secondary truncate",children:new URL(t.url||"https://example.com").hostname}),e.jsx("h3",{className:"font-bold text-text-primary truncate mt-1",children:t.title||"Your Title Here"}),e.jsx("p",{className:"text-sm text-text-secondary mt-1 line-clamp-2",children:t.description||"A concise description of your content will appear here."})]})]}),j=()=>{const[t,a]=o.useState({title:"DevCore AI Toolkit",description:"The ultimate toolkit for modern developers, powered by Gemini.",image:"https://storage.googleapis.com/maker-studio-project-images-prod/programming_power_on_a_laptop_3a8f0bb1_39a9_4c2b_81f0_a74551480f2c.png",url:"https://devcore.example.com"}),r=s=>{a({...t,[s.target.name]:s.target.value})},l=o.useMemo(()=>`<!-- Primary Meta Tags -->2<title>${t.title}</title>3<meta name="title" content="${t.title}" />4<meta name="description" content="${t.description}" />5<!-- Open Graph / Facebook -->6<meta property="og:type" content="website" />7<meta property="og:url" content="${t.url}" />8<meta property="og:title" content="${t.title}" />9<meta property="og:description" content="${t.description}" />10<meta property="og:image" content="${t.image}" />11<!-- Twitter -->12<meta property="twitter:card" content="summary_large_image" />13<meta property="twitter:url" content="${t.url}" />14<meta property="twitter:title" content="${t.title}" />15<meta property="twitter:description" content="${t.description}" />16<meta property="twitter:image" content="${t.image}" />`,[t]);return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[e.jsx(i,{}),e.jsx("span",{className:"ml-3",children:"Meta Tag Editor"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Generate SEO & social media meta tags with a live preview."})]}),e.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 min-h-0",children:[e.jsxs("div",{className:"xl:col-span-1 flex flex-col gap-4 bg-surface border border-border p-6 rounded-lg overflow-y-auto",children:[e.jsx("h3",{className:"text-xl font-bold",children:"Metadata"}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm",children:"Title"}),e.jsx("input",{type:"text",name:"title",value:t.title,onChange:r,className:"w-full mt-1 p-2 rounded bg-background border border-border"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm",children:"Description"}),e.jsx("input",{type:"text",name:"description",value:t.description,onChange:r,className:"w-full mt-1 p-2 rounded bg-background border border-border"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm",children:"Canonical URL"}),e.jsx("input",{type:"text",name:"url",value:t.url,onChange:r,className:"w-full mt-1 p-2 rounded bg-background border border-border"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm",children:"Social Image URL"}),e.jsx("input",{type:"text",name:"image",value:t.image,onChange:r,className:"w-full mt-1 p-2 rounded bg-background border border-border"})]})]}),e.jsxs("div",{className:"xl:col-span-1 flex flex-col",children:[e.jsx("label",{className:"text-sm font-medium text-text-secondary mb-2",children:"Generated HTML"}),e.jsxs("div",{className:"relative flex-grow",children:[e.jsx("pre",{className:"w-full h-full bg-background p-4 rounded-md text-primary text-sm overflow-auto",children:l}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(l),className:"absolute top-2 right-2 px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-xs",children:"Copy"})]})]}),e.jsxs("div",{className:"hidden xl:flex flex-col items-center justify-center",children:[e.jsx("label",{className:"text-sm font-medium text-text-secondary mb-2",children:"Live Preview"}),e.jsx(n,{meta:t})]})]})]})};export{j as MetaTagEditor};17//# sourceMappingURL=MetaTagEditor-uPETDQxa.js.map18