TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-27 21:03:29 +03:00
Code Issues Projects Releases Wiki Activity

Added Pintura integration to Twitter and Facebook meta cards (#18264)

Browse Source 
no issue

- wired up the pintura integration to facebook and twitter meta card editors

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at e01c851</samp>

This pull request adds the ability to edit images for Facebook and
Twitter cards in the general settings component using Pintura, a
web-based image editor. It introduces a custom hook to handle the
Pintura editor logic and settings, and modifies the `ImageInput`
component to accept a prop to enable or disable the feature. It affects
the files `Facebook.tsx` and `Twitter.tsx` in the
`apps/admin-x-settings/src/components/settings/general` directory.
This commit is contained in:
Ronald Langeveld 2023-09-21 15:35:57 +07:00 committed by GitHub
parent 93648eecb5
commit 60de9387fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/admin-x-settings/src/components/settings/general/Facebook.tsx
View File

@ -3,6 +3,7 @@ import React from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../admin-x-ds/global/form/TextField';
import usePinturaEditor from '../../../hooks/usePinturaEditor';
import useSettingGroup from '../../../hooks/useSettingGroup';
import {ReactComponent as FacebookLogo} from '../../../admin-x-ds/assets/images/facebook-logo.svg';
import {getImageUrl, useUploadImage} from '../../../api/images';
@ -21,6 +22,21 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
} = useSettingGroup();
const {mutateAsync: uploadImage} = useUploadImage();
const [pintura] = getSettingValues<boolean>(localSettings, ['pintura']);
// const [unsplashEnabled] = getSettingValues<boolean>(localSettings, ['unsplash']);
const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
// const [showUnsplash, setShowUnsplash] = useState<boolean>(false);
const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
const editor = usePinturaEditor(
{config: {
jsUrl: pinturaJsUrl || '',
cssUrl: pinturaCssUrl || ''
},
disabled: !pinturaEnabled}
);
const [
facebookTitle, facebookDescription, facebookImage, siteTitle, siteDescription
@ -67,6 +83,18 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
height='300px'
id='facebook-image'
imageURL={facebookImage}
pintura={
{
isEnabled: pinturaEnabled,
openEditor: async () => editor.openEditor({
image: facebookImage || '',
handleSave: async (file:File) => {
const imageUrl = getImageUrl(await uploadImage({file}));
updateSetting('og_image', imageUrl);
}
})
}
}
onDelete={handleImageDelete}
onUpload={handleImageUpload}
>

26
apps/admin-x-settings/src/components/settings/general/Twitter.tsx
View File

@ -3,6 +3,7 @@ import React from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import TextField from '../../../admin-x-ds/global/form/TextField';
import usePinturaEditor from '../../../hooks/usePinturaEditor';
import useSettingGroup from '../../../hooks/useSettingGroup';
import {ReactComponent as TwitterLogo} from '../../../admin-x-ds/assets/images/twitter-logo.svg';
import {getImageUrl, useUploadImage} from '../../../api/images';
@ -21,6 +22,19 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
} = useSettingGroup();
const {mutateAsync: uploadImage} = useUploadImage();
const [pintura] = getSettingValues<boolean>(localSettings, ['pintura']);
const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
const editor = usePinturaEditor(
{config: {
jsUrl: pinturaJsUrl || '',
cssUrl: pinturaCssUrl || ''
},
disabled: !pinturaEnabled}
);
const [
twitterTitle, twitterDescription, twitterImage, siteTitle, siteDescription
@ -69,6 +83,18 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
height='300px'
id='twitter-image'
imageURL={twitterImage}
pintura={
{
isEnabled: pinturaEnabled,
openEditor: async () => editor.openEditor({
image: twitterImage || '',
handleSave: async (file:File) => {
const imageUrl = getImageUrl(await uploadImage({file}));
updateSetting('twitter_image', imageUrl);
}
})
}
}
onDelete={handleImageDelete}
onUpload={handleImageUpload}
>