diff --git a/ghost/announcement-bar/src/App.js b/ghost/announcement-bar/src/App.js index a3ca90be0f..37caac4f4f 100644 --- a/ghost/announcement-bar/src/App.js +++ b/ghost/announcement-bar/src/App.js @@ -2,8 +2,8 @@ import React from 'react'; import {AnnouncementBar} from './components/AnnouncementBar'; import setupGhostApi from './utils/api'; -export function App({apiUrl, apiKey}) { - const api = React.useRef(setupGhostApi({apiKey, apiUrl})); +export function App({apiUrl}) { + const api = React.useRef(setupGhostApi({apiUrl})); const [siteSettings, setSiteSettings] = React.useState(); React.useEffect(() => { @@ -11,8 +11,9 @@ export function App({apiUrl, apiKey}) { return; } const getSiteSettings = async () => { - const {settingsData} = await api.current.init(); - setSiteSettings(settingsData.settings); + const announcement = await api.current.init(); + + setSiteSettings(announcement); }; getSiteSettings(); diff --git a/ghost/announcement-bar/src/index.js b/ghost/announcement-bar/src/index.js index 987f9a0c2a..878bbad9aa 100644 --- a/ghost/announcement-bar/src/index.js +++ b/ghost/announcement-bar/src/index.js @@ -21,10 +21,8 @@ function getSiteData() { */ const scriptTag = document.querySelector('script[data-announcement-bar]'); if (scriptTag) { - const adminUrl = scriptTag.dataset.announcementBar; - const apiKey = scriptTag.dataset.key; - const apiUrl = scriptTag.dataset.api; - return {adminUrl, apiKey, apiUrl}; + const apiUrl = scriptTag.dataset.apiUrl; + return {apiUrl}; } return {}; } @@ -34,14 +32,11 @@ function setup() { } function init() { - const {adminUrl, apiKey, apiUrl} = getSiteData(); - const adminBaseUrl = (adminUrl || window.location.origin)?.replace(/\/+$/, ''); + const {apiUrl} = getSiteData(); setup(); ReactDOM.render( , diff --git a/ghost/announcement-bar/src/utils/api.js b/ghost/announcement-bar/src/utils/api.js index 3c905bc467..2e0c71a4f6 100644 --- a/ghost/announcement-bar/src/utils/api.js +++ b/ghost/announcement-bar/src/utils/api.js @@ -1,11 +1,4 @@ -function setupGhostApi({apiUrl, apiKey}) { - function contentEndpointFor({resource, keys, params = ''}) { - if (apiUrl && apiKey) { - return `${apiUrl.replace(/\/$/, '')}/${resource}/?key=${apiKey}&keys=${keys.join(',')}${params}`; - } - return ''; - } - +function setupGhostApi({apiUrl}) { function makeRequest({url, method = 'GET', headers = {}, credentials = undefined, body = undefined}) { const options = { method, @@ -17,12 +10,9 @@ function setupGhostApi({apiUrl, apiKey}) { } const api = {}; - api.site = { - settings() { - const url = contentEndpointFor({ - resource: 'settings', - keys: ['announcement', 'announcement_background'] - }); + api.announcementSettings = { + browse() { + const url = apiUrl; return makeRequest({ url, method: 'GET', @@ -40,11 +30,8 @@ function setupGhostApi({apiUrl, apiKey}) { }; api.init = async () => { - let [settingsData] = await Promise.all([ - api.site.settings() - ]); - - return {settingsData}; + let {announcement} = await api.announcementSettings.browse(); + return announcement[0]; }; return api; diff --git a/ghost/announcement-bar/src/utils/api.test.js b/ghost/announcement-bar/src/utils/api.test.js index f4f64f373b..009e7226c5 100644 --- a/ghost/announcement-bar/src/utils/api.test.js +++ b/ghost/announcement-bar/src/utils/api.test.js @@ -4,16 +4,21 @@ test('should call settings endpoint on init', () => { jest.spyOn(window, 'fetch'); window.fetch.mockResolvedValueOnce({ ok: true, - json: async () => ({success: true}) + json: async () => ({ + announcement: [{ + announcement_content: '

Test announcement

', + announcement_background: 'dark' + }] + }) }); - const api = setupGhostApi({apiKey: 'key', apiUrl: 'http://localhost'}); + const api = setupGhostApi({apiKey: 'key', apiUrl: 'http://localhost/members/api/announcement/'}); api.init(); expect(window.fetch).toHaveBeenCalledTimes(1); expect(window.fetch).toHaveBeenCalledWith( - 'http://localhost/settings/?key=key&keys=announcement,announcement_background', + 'http://localhost/members/api/announcement/', expect.objectContaining({ method: 'GET', headers: {'Content-Type': 'application/json'}, diff --git a/ghost/core/core/frontend/helpers/ghost_head.js b/ghost/core/core/frontend/helpers/ghost_head.js index bedb804261..413f48297c 100644 --- a/ghost/core/core/frontend/helpers/ghost_head.js +++ b/ghost/core/core/frontend/helpers/ghost_head.js @@ -87,17 +87,19 @@ function getSearchHelper(frontendKey) { return helper; } -function getAnnouncementBarHelper(frontendKey) { +function getAnnouncementBarHelper() { if (!settingsCache.get('announcement_content')) { return ''; } - const adminUrl = urlUtils.getAdminUrl() || urlUtils.getSiteUrl(); + const {scriptUrl} = getFrontendAppConfig('announcementBar'); + const siteUrl = urlUtils.getSiteUrl(); + const announcementUrl = new URL('members/api/announcement/', siteUrl); const attrs = { - key: frontendKey, - 'announcement-bar': adminUrl, - api: urlUtils.urlFor('api', {type: 'content'}, true) + 'announcement-bar': siteUrl, + 'api-url': announcementUrl }; + const dataAttrs = getDataAttributes(attrs); let helper = ``; @@ -247,7 +249,7 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam if (!_.includes(context, 'amp')) { head.push(getMembersHelper(options.data, frontendKey)); head.push(getSearchHelper(frontendKey)); - head.push(getAnnouncementBarHelper(frontendKey)); + head.push(getAnnouncementBarHelper()); try { head.push(getWebmentionDiscoveryLink()); } catch (err) {