Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Fixed embeddable signup form preview and generated code (#21592)

Browse source 
ref ENG-1671
This commit is contained in:
Sodbileg Gansukh 2024-11-12 14:33:52 +08:00 • committed by GitHub
parent 7f158c0e18
commit 9ffc5ca79a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
apps/admin-x-settings/src/components/settings/growth/embedSignup/EmbedSignupFormModal.tsx
View file

@ -16,7 +16,8 @@ const EmbedSignupFormModal = NiceModal.create(() => {
const [selectedColor, setSelectedColor] = useState<string>('#08090c');
const [selectedLabels, setSelectedLabels] = useState<SelectedLabelTypes[]>([]);
const [selectedLayout, setSelectedLayout] = useState<string>('all-in-one');
const [embedScript, setEmbedScript] = useState<string>('');
const [previewScript, setPreviewScript] = useState<string>('');
const [generatedScript, setGeneratedScript] = useState<string>('');
const [isCopied, setIsCopied] = useState(false);
const {updateRoute} = useRouting();
@ -33,8 +34,8 @@ const EmbedSignupFormModal = NiceModal.create(() => {
if (!siteData) {
return;
}
const code = generateCode({
preview: true,
const defaultConfig = {
config: {
blogUrl: siteData.url,
signupForm: {
@ -53,14 +54,24 @@ const EmbedSignupFormModal = NiceModal.create(() => {
backgroundColor: selectedColor || '#08090c',
layout: selectedLayout,
i18nEnabled
});
};
setEmbedScript(code);
const previewCode = generateCode({
preview: true,
...defaultConfig
});
setPreviewScript(previewCode);
const generatedCode = generateCode({
preview: false,
...defaultConfig
});
setGeneratedScript(generatedCode);
}, [siteData, accentColor, selectedLabels, config, title, selectedColor, selectedLayout, locale, i18nEnabled, icon, description]);
const handleCopyClick = async () => {
try {
await navigator.clipboard.writeText(embedScript);
await navigator.clipboard.writeText(generatedScript);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000); // reset after 2 seconds
} catch (err) {
@ -98,13 +109,13 @@ const EmbedSignupFormModal = NiceModal.create(() => {
>
<div className='grid grid-cols-[5.2fr_2.8fr]'>
<EmbedSignupPreview
html={embedScript}
html={previewScript}
style={selectedLayout}
/>
<EmbedSignupSidebar
accentColor={accentColor}
customColor={customColor}
embedScript={embedScript}
embedScript={generatedScript}
handleColorToggle={handleColorToggle}
handleCopyClick={handleCopyClick}
handleLabelClick={addSelectedLabel}

2
apps/admin-x-settings/src/utils/generateEmbedCode.ts
View file

@ -100,7 +100,7 @@ export const generateCode = ({
const code = `<div style="${escapeHtml(style)}"><script src="${encodeURI(scriptUrl)}"${dataOptionsString} async></script></div>`;
if (preview && style === 'minimal') {
if (preview && layout === 'minimal') {
return `<div style="position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);background-size: 16px 16px;background-position: 0 0, 8px 8px;;"></div>${code}`;
}

2
apps/admin-x-settings/test/unit/utils/generateEmbedCode.test.ts
View file

@ -54,7 +54,7 @@ describe('generateCode', function () {
it('renders a preview with a minimal layout', function () {
genOptions.preview = true;
genOptions.layout = 'minimal';
assert.equal(generateCode(genOptions), '<div style="min-height: 58px; max-width: 440px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);"><script src="https://example.com" data-button-color="#000000" data-button-text-color="#FFFFFF" data-site="https://example.com" async></script></div>');
assert.equal(generateCode(genOptions), '<div style="position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);background-size: 16px 16px;background-position: 0 0, 8px 8px;;"></div><div style="min-height: 58px; max-width: 440px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);"><script src="https://example.com" data-button-color="#000000" data-button-text-color="#FFFFFF" data-site="https://example.com" async></script></div>');
});
it('generates text color based on background color - light background, black text', function () {