CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
MetaTagEditor-uPETDQxa.js.map1 linesDownload Raw Back to assets
1{"version":3,"file":"MetaTagEditor-uPETDQxa.js","sources":["../../components/features/MetaTagEditor.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { CodeBracketSquareIcon } from '../icons.tsx';\n\ninterface MetaData {\n    title: string;\n    description: string;\n    image: string;\n    url: string;\n}\n\nconst SocialCardPreview: React.FC<{ meta: MetaData }> = ({ meta }) => (\n    <div className=\"w-full max-w-md mx-auto bg-surface border border-border rounded-2xl overflow-hidden shadow-lg\">\n        <div className=\"h-52 bg-gray-100 flex items-center justify-center\">\n            {meta.image ? <img src={meta.image} alt=\"Preview\" className=\"w-full h-full object-cover\" onError={(e) => e.currentTarget.style.display='none'}/> : <span className=\"text-text-secondary\">Image Preview</span>}\n        </div>\n        <div className=\"p-4\">\n            <p className=\"text-xs text-text-secondary truncate\">{new URL(meta.url || 'https://example.com').hostname}</p>\n            <h3 className=\"font-bold text-text-primary truncate mt-1\">{meta.title || 'Your Title Here'}</h3>\n            <p className=\"text-sm text-text-secondary mt-1 line-clamp-2\">{meta.description || 'A concise description of your content will appear here.'}</p>\n        </div>\n    </div>\n);\n\nexport const MetaTagEditor: React.FC = () => {\n    const [meta, setMeta] = useState<MetaData>({\n        title: 'DevCore AI Toolkit', description: 'The ultimate toolkit for modern developers, powered by Gemini.',\n        image: 'https://storage.googleapis.com/maker-studio-project-images-prod/programming_power_on_a_laptop_3a8f0bb1_39a9_4c2b_81f0_a74551480f2c.png',\n        url: 'https://devcore.example.com'\n    });\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setMeta({ ...meta, [e.target.name]: e.target.value });\n    };\n\n    const generatedHtml = useMemo(() => {\n        return `<!-- Primary Meta Tags -->\n<title>${meta.title}</title>\n<meta name=\"title\" content=\"${meta.title}\" />\n<meta name=\"description\" content=\"${meta.description}\" />\n<!-- Open Graph / Facebook -->\n<meta property=\"og:type\" content=\"website\" />\n<meta property=\"og:url\" content=\"${meta.url}\" />\n<meta property=\"og:title\" content=\"${meta.title}\" />\n<meta property=\"og:description\" content=\"${meta.description}\" />\n<meta property=\"og:image\" content=\"${meta.image}\" />\n<!-- Twitter -->\n<meta property=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:url\" content=\"${meta.url}\" />\n<meta property=\"twitter:title\" content=\"${meta.title}\" />\n<meta property=\"twitter:description\" content=\"${meta.description}\" />\n<meta property=\"twitter:image\" content=\"${meta.image}\" />`;\n    }, [meta]);\n    \n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\"><h1 className=\"text-3xl font-bold flex items-center\"><CodeBracketSquareIcon /><span className=\"ml-3\">Meta Tag Editor</span></h1><p className=\"text-text-secondary mt-1\">Generate SEO & social media meta tags with a live preview.</p></header>\n            <div className=\"flex-grow grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 min-h-0\">\n                <div className=\"xl:col-span-1 flex flex-col gap-4 bg-surface border border-border p-6 rounded-lg overflow-y-auto\">\n                    <h3 className=\"text-xl font-bold\">Metadata</h3>\n                    <div><label className=\"block text-sm\">Title</label><input type=\"text\" name=\"title\" value={meta.title} onChange={handleChange} className=\"w-full mt-1 p-2 rounded bg-background border border-border\"/></div>\n                    <div><label className=\"block text-sm\">Description</label><input type=\"text\" name=\"description\" value={meta.description} onChange={handleChange} className=\"w-full mt-1 p-2 rounded bg-background border border-border\"/></div>\n                    <div><label className=\"block text-sm\">Canonical URL</label><input type=\"text\" name=\"url\" value={meta.url} onChange={handleChange} className=\"w-full mt-1 p-2 rounded bg-background border border-border\"/></div>\n                    <div><label className=\"block text-sm\">Social Image URL</label><input type=\"text\" name=\"image\" value={meta.image} onChange={handleChange} className=\"w-full mt-1 p-2 rounded bg-background border border-border\"/></div>\n                </div>\n                <div className=\"xl:col-span-1 flex flex-col\">\n                     <label className=\"text-sm font-medium text-text-secondary mb-2\">Generated HTML</label>\n                     <div className=\"relative flex-grow\"><pre className=\"w-full h-full bg-background p-4 rounded-md text-primary text-sm overflow-auto\">{generatedHtml}</pre><button onClick={() => navigator.clipboard.writeText(generatedHtml)} className=\"absolute top-2 right-2 px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-xs\">Copy</button></div>\n                </div>\n                 <div className=\"hidden xl:flex flex-col items-center justify-center\">\n                    <label className=\"text-sm font-medium text-text-secondary mb-2\">Live Preview</label>\n                    <SocialCardPreview meta={meta} />\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["SocialCardPreview","meta","jsxs","jsx","e","MetaTagEditor","setMeta","useState","handleChange","generatedHtml","useMemo","CodeBracketSquareIcon"],"mappings":"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"}