OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganized and improved meta data settings so it's easier to parse DES-159

Browse Source 
refs DES-159
This commit is contained in:
Djordje Vlaisavljevic 2024-03-05 11:23:42 +00:00 committed by GitHub
parent e3d01e0b1f
commit 50770d20b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
apps/admin-x-settings/src/components/settings/general/Metadata.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import TopLevelGroup from '../../TopLevelGroup';
import useSettingGroup from '../../../hooks/useSettingGroup';
import {GoogleLogo, Heading, Icon, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design-system';
import {GoogleLogo, Icon, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design-system';
import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
interface SearchEnginePreviewProps {
@ -22,32 +22,35 @@ const SearchEnginePreview: React.FC<SearchEnginePreviewProps> = ({
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 dark:bg-grey-900'>
<Icon className='stroke-[2px] text-blue-600' name='magnifying-glass' size='sm' />
<div className='-mx-5 -mb-5 overflow-hidden rounded-b-xl bg-grey-50 px-5 pt-5 dark:bg-grey-950 md:-mx-7 md:-mb-7 md:px-7 md:pt-7'>
<div className='rounded-t-sm bg-white px-5 py-3 shadow-lg dark:bg-grey-975'>
<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 dark:bg-grey-900'>
<Icon className='stroke-[2px] text-blue-600' name='magnifying-glass' size='sm' />
</div>
</div>
</div>
<div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4 dark:border-grey-900'>
<div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200 dark:bg-grey-700' style={{
backgroundImage: icon ? `url(${icon})` : 'none',
backgroundSize: 'contain'
}}>
</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] dark:text-blue'>{title}</span>
<span className='text-sm text-grey-900 dark:text-grey-700'>{description}</span>
</div>
</div>
</div>
<div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4 dark:border-grey-900'>
<div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200 dark:bg-grey-700' style={{
backgroundImage: icon ? `url(${icon})` : 'none',
backgroundSize: 'contain'
}}>
</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] dark:text-blue'>{title}</span>
<span className='text-sm text-grey-900 dark:text-grey-700'>{description}</span>
</div>
</div>
);
};
@ -108,7 +111,7 @@ const Metadata: React.FC<{ keywords: string[] }> = ({keywords}) => {
onEditingChange={handleEditingChange}
onSave={handleSave}
>
{isEditing &&
{!isEditing &&
<>
<SearchEnginePreview
description={metaDescription ? metaDescription : siteDescription}
@ -116,6 +119,10 @@ const Metadata: React.FC<{ keywords: string[] }> = ({keywords}) => {
title={metaTitle ? metaTitle : siteTitle}
url={siteData?.url}
/>
</>
}
{isEditing &&
<>
{inputFields}
</>
}