Updated css bundle logic for iframe

refs https://github.com/TryGhost/Team/issues/1665

- css bundle is fetched from an external url, which is different for development and production
- updates bundle to be fetched via unpkg for production using app version
- extracts version information from script tag in root

ghost/sodo-search/src/App.js

@@ -31,6 +31,7 @@ export default class App extends React.Component {
                 page: 'search',
                 showPopup: true,
                 siteUrl: this.props.siteUrl,
+                appVersion: this.props.appVersion,
                 searchIndex: this.state.searchIndex,
                 indexComplete: this.state.indexComplete,
                 searchValue: this.state.searchValue,

ghost/sodo-search/src/components/PopupModal.js

@@ -3,6 +3,7 @@ import AppContext from '../AppContext';
 import {ReactComponent as SearchIcon} from '../icons/search.svg';
 import {ReactComponent as CloseIcon} from '../icons/close.svg';
 import {useContext} from 'react';
+import {getBundledCssLink} from '../utils/helpers';
 
 const React = require('react');
 
@@ -288,7 +289,6 @@ function SearchResultBox() {
         return d.name?.toLowerCase().includes(searchValue?.toLowerCase());
     });
 
-    /* eslint-disable no-console */
     if (indexComplete && searchValue) {
         searchResults = searchIndex.search(searchValue);
         filteredPosts = searchResults?.posts?.map((d) => {
@@ -299,7 +299,6 @@ function SearchResultBox() {
                 slug: d?.slug
             };
         }) || [];
-        console.log(filteredPosts);
     }
 
     const hasResults = filteredPosts?.length || filteredAuthors?.length || filteredTags?.length;
@@ -379,9 +378,10 @@ export default class PopupModal extends React.Component {
             }
         `;
 
+        const cssLink = getBundledCssLink({appVersion: this.context.appVersion});
         return (
             <>
-                <link rel='stylesheet' href='http://localhost:3000/main.css' />
+                <link rel='stylesheet' href={cssLink} />
                 <style dangerouslySetInnerHTML={{__html: styles}} />
                 <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
             </>

ghost/sodo-search/src/index.js

@@ -20,7 +20,8 @@ function getSiteData() {
         const siteUrl = scriptTag.dataset.sodoSearch;
         const apiKey = scriptTag.dataset.key;
         const apiUrl = scriptTag.dataset.api;
-        return {siteUrl, apiKey, apiUrl};
+        const appVersion = scriptTag.dataset.version;
+        return {siteUrl, apiKey, apiUrl, appVersion};
     }
     return {};
 }
@@ -30,12 +31,15 @@ function setup({siteUrl}) {
 }
 
 function init() {
-    const {siteUrl: customSiteUrl, apiKey, apiUrl} = getSiteData();
+    const {siteUrl: customSiteUrl, apiKey, apiUrl, appVersion} = getSiteData();
     const siteUrl = customSiteUrl || window.location.origin;
     setup({siteUrl});
     ReactDOM.render(
         <React.StrictMode>
-            <App siteUrl={siteUrl} apiKey={apiKey} apiUrl={apiUrl} />
+            <App
+                siteUrl={siteUrl} apiKey={apiKey} apiUrl={apiUrl}
+                appVersion={appVersion}
+            />
         </React.StrictMode>,
         document.getElementById(ROOT_DIV_ID)
     );

ghost/sodo-search/src/utils/helpers.js

@@ -0,0 +1,7 @@
+export function getBundledCssLink({appVersion}) {
+    if (process.env.NODE_ENV === 'production' && appVersion) {
+        return `https://unpkg.com/@tryghost/sodo-search@~${appVersion}/umd/main.css`;
+    } else {
+        return 'http://localhost:3000/main.css';
+    }
+}