Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Wired site icon and url in metadata preview

Browse source 
refs https://github.com/TryGhost/Team/issues/3318
This commit is contained in:
Rishabh 2023-06-01 15:57:32 +05:30
parent 75b4b1fdff
commit 88af280bd8
2 changed files with 55 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin-x-settings/src/components/providers/SettingsProvider.tsx
View file

@ -16,7 +16,7 @@ interface SettingsProviderProps {
const SettingsContext = createContext<SettingsContextProps>({ const SettingsContext = createContext<SettingsContextProps>({
settings: null, settings: null,
siteData: null, siteData: null,
saveSettings: async () => {}, saveSettings: async () => {}
}); });
// Create a Settings Provider component // Create a Settings Provider component

82
ghost/admin-x-settings/src/components/settings/general/Metadata.tsx
View file

@ -7,10 +7,58 @@ import useSettingGroup from '../../../hooks/useSettingGroup';
import {ReactComponent as GoogleLogo} from '../../../admin-x-ds/assets/images/google-logo.svg'; import {ReactComponent as GoogleLogo} from '../../../admin-x-ds/assets/images/google-logo.svg';
import {ReactComponent as MagnifyingGlass} from '../../../admin-x-ds/assets/icons/magnifying-glass.svg'; import {ReactComponent as MagnifyingGlass} from '../../../admin-x-ds/assets/icons/magnifying-glass.svg';
interface SearchEnginePreviewProps {
title: string;
description: string;
icon?: string;
url?: string;
}
const SearchEnginePreview: React.FC<SearchEnginePreviewProps> = ({
title,
description,
icon,
url
}) => {
const siteUrl = url?.replace(/\/$/, '');
const siteDomain = siteUrl?.replace(/^https?:\/\//, '').replace(/\/?$/, '');
return (
<div>
<Heading grey={true} level={6}>Search engine result preview</Heading>
<div className='mt-3 flex items-center'>
<div className='basis-'>
<GoogleLogo className='mr-7 h-7' />
</div>
<div className='grow'>
<div className='flex w-full items-center justify-end rounded-full bg-white p-3 px-4 shadow'>
<MagnifyingGlass className='h-4 w-4 text-blue-600' style={{strokeWidth: '2px'}} />
</div>
</div>
</div>
<div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4'>
<div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200' style={{
backgroundImage: icon ? `url(${icon})` : 'none'
}}>
</div>
<div className='flex flex-col text-sm'>
<span>{siteDomain}</span>
<span className='-mt-0.5 inline-block text-xs text-grey-600'>{siteUrl}</span>
</div>
</div>
<div className='mt-1 flex flex-col'>
<span className='text-lg text-[#1a0dab]'>{title}</span>
<span className='text-sm text-grey-900'>{description}</span>
</div>
</div>
);
};
const Metadata: React.FC = () => { const Metadata: React.FC = () => {
const { const {
currentState, currentState,
saveState, saveState,
siteData,
focusRef, focusRef,
handleSave, handleSave,
handleCancel, handleCancel,
@ -29,33 +77,6 @@ const Metadata: React.FC = () => {
updateSetting('meta_description', e.target.value); updateSetting('meta_description', e.target.value);
}; };
const values = (
<div>
<Heading grey={true} level={6}>Search engine result preview</Heading>
<div className='mt-3 flex items-center'>
<div className='basis-'>
<GoogleLogo className='mr-7 h-7' />
</div>
<div className='grow'>
<div className='flex w-full items-center justify-end rounded-full bg-white p-3 px-4 shadow'>
<MagnifyingGlass className='h-4 w-4 text-blue-600' style={{strokeWidth: '2px'}} />
</div>
</div>
</div>
<div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4'>
<div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200'></div>
<div className='flex flex-col text-sm'>
<span>ghost.org</span>
<span className='-mt-0.5 inline-block text-xs text-grey-600'>https://ghost.org</span>
</div>
</div>
<div className='mt-1 flex flex-col'>
<span className='text-lg text-[#1a0dab]'>{metaTitle ? metaTitle : siteTitle}</span>
<span className='text-sm text-grey-900'>{metaDescription ? metaDescription : siteDescription}</span>
</div>
</div>
);
const inputFields = ( const inputFields = (
<SettingGroupContent> <SettingGroupContent>
<TextField <TextField
@ -87,7 +108,12 @@ const Metadata: React.FC = () => {
onSave={handleSave} onSave={handleSave}
onStateChange={handleStateChange} onStateChange={handleStateChange}
> >
{values} <SearchEnginePreview
description={metaDescription ? metaDescription : siteDescription}
icon={siteData?.icon}
title={metaTitle ? metaTitle : siteTitle}
url={siteData?.url}
/>
{currentState !== 'view' ? inputFields : ''} {currentState !== 'view' ? inputFields : ''}
</SettingGroup> </SettingGroup>
); );