Update provider metadata to include images in popovers

This commit is contained in:
Steven Nguyen
2024-02-13 19:00:24 -08:00
committed by Steven Nguyen
parent 39f9270779
commit f0b214044f
8 changed files with 46 additions and 29 deletions
@@ -37,6 +37,7 @@ type ProvidersMap = {
placeholder?: string;
description?: string;
popover?: string[];
popoverImage?: { src: { light: string; dark: string }; alt: string };
allowedFileExtensions?: string[];
optional?: boolean;
options?: { label: string; value: string | number | boolean }[];
@@ -66,8 +67,15 @@ export const providers: ProvidersMap = {
popover: [
'<b>How to get the <a class="link" href="https://firebase.google.com" target="_blank" rel="noopener noreferrer">FCM</a> service account JSON?</b>',
'Head to <b>Project settings -> Service accounts -> Generate new private key.</b>',
'Generating the new key will result in the download of a JSON file.'
]
'Generating the new key will result in the download of a JSON file.',
],
popoverImage: {
src: {
light: '/images/messaging/fcm-service-account-json-light.png',
dark: '/images/messaging/fcm-service-account-json-dark.png'
},
alt: 'Screenshot of how to generate the Firebase Service Account JSON file'
}
}
]
},
@@ -83,8 +91,15 @@ export const providers: ProvidersMap = {
placeholder: 'Enter team ID',
popover: [
'<b>How to get the team ID?</b>',
'Head to <b><a class="link" href="https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a> -> Membership details -> Team ID.</b>'
]
'Head to <b><a style="link" href="https://developer.apple.com/account" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a> -> Membership details -> Team ID.</b>'
],
popoverImage: {
src: {
light: '/images/messaging/apns-team-id.png',
dark: '/images/messaging/apns-team-id.png'
},
alt: 'Screenshot of where to find the Team ID in the Apple Developer Member Center'
}
},
{
label: 'Bundle ID',
@@ -93,27 +108,15 @@ export const providers: ProvidersMap = {
placeholder: 'Enter bundle ID',
popover: [
'<b>How to get the bundle ID?</b>',
'Head to <b><a class="link" href="https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a> -> Certificates, Identifiers & Profiles -> Identifiers.</b>',
`<a
href="/images/apns-bundle-id.png"
class="file-preview is-with-image"
target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer"
aria-label="open file in new window">
<div class="file-preview-image">
<img
width="205"
height="125"
src="/images/apns-bundle-id.png"
alt="Screenshot of Bundle ID in Apple" />
</div>
<div class="file-preview-content">
<div class="avatar">
<span class="icon-external-link" aria-hidden="true" />
</div>
</div>
</a>`
]
'Head to <b><a class="link" href="https://developer.apple.com/account" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a> -> Certificates, Identifiers & Profiles -> Identifiers.</b>'
],
popoverImage: {
src: {
light: '/images/messaging/apns-bundle-id.png',
dark: '/images/messaging/apns-bundle-id.png'
},
alt: 'Screenshot of where to find the Bundle ID in the Apple Developer Member Center'
}
},
{
label: 'Authentication key ID',
@@ -122,9 +125,16 @@ export const providers: ProvidersMap = {
placeholder: 'Enter key ID',
popover: [
'<b>How to get the auth key ID?</b>',
'Head to <b><a class="link" href="https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a> -> Certificates, Identifiers & Profiles -> Keys.</b>',
'Head to <b><a class="link" href="https://developer.apple.com/account" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a> -> Certificates, Identifiers & Profiles -> Keys.</b>',
'Click on your key to view details.'
]
],
popoverImage: {
src: {
light: '/images/messaging/apns-authentication-key-id.png',
dark: '/images/messaging/apns-authentication-key-id.png'
},
alt: 'Screenshot of how to find the Authentication Key ID in the Apple Developer Member Center'
}
},
{
label: 'Auth key (.p8 file)',
@@ -133,9 +143,16 @@ export const providers: ProvidersMap = {
allowedFileExtensions: ['p8'],
popover: [
'<b>How to get the authentication key?</b>',
'Head to <b><a class="link" href="https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a></b> (under Program resources) <b>-> Certificates, Identifiers & Profiles -> Keys.</b>',
'Head to <b><a class="link" href="https://developer.apple.com/account" target="_blank" rel="noopener noreferrer">Apple Developer Member Center</a></b> (under Program resources) <b>-> Certificates, Identifiers & Profiles -> Keys.</b>',
'Create a key and give it a name. Enable the Apple Push Notifications service (APNS), and register your key.'
]
],
popoverImage: {
src: {
light: '/images/messaging/apns-auth-key.png',
dark: '/images/messaging/apns-auth-key.png'
},
alt: 'Screenshot of where to download the Authentication Key in the Apple Developer Member Center'
}
}
]
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB