Replaced hardcoded css link with styles from config (#2)

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

- the stylesheet link was prev hardcoded in the app, which made it impossible to configure from Ghost
- fetches styles url from the data attribute on script instead, which allows app to load styles based on config upstream

apps/comments-ui/src/App.js

@@ -70,7 +70,7 @@ export default class App extends React.Component {
             // Fetch data from API, links, preview, dev sources
             const {site, member} = await this.fetchApiData();
             const {comments, pagination} = await this.fetchComments();
-            
+
             const state = {
                 site,
                 member,
@@ -104,7 +104,7 @@ export default class App extends React.Component {
                 // eslint-disable-next-line no-console
                 console.warn(`[Comments] Failed to fetch current admin user:`, e);
             }
-            
+
             const state = {
                 admin
             };
@@ -264,7 +264,8 @@ export default class App extends React.Component {
                     return null;
                 },
                 allowUrls: [
-                    /https?:\/\/((www)\.)?unpkg\.com\/@tryghost\/comments/
+                    /https?:\/\/((www)\.)?unpkg\.com\/@tryghost\/comments/,
+                    /https?:\/\/((cdn)\.)?jsdelivr\.net\/npm\/@tryghost\/comments/
                 ]
             });
         }
@@ -287,9 +288,10 @@ export default class App extends React.Component {
             accentColor: this.props.accentColor,
             commentsEnabled: this.props.commentsEnabled,
             appVersion: this.props.appVersion,
+            stylesUrl: this.props.stylesUrl,
             popup,
             dispatchAction: (_action, data) => this.dispatchAction(_action, data),
-            
+
             /**
              * @deprecated
              * Use dispatchAction instead

apps/comments-ui/src/components/Frame.js

@@ -1,5 +1,4 @@
 import React, {useContext, useState} from 'react';
-import {getBundledCssLink} from '../utils/helpers';
 import AppContext from '../AppContext';
 import IFrame from './IFrame';
 
@@ -9,8 +8,7 @@ const Frame = ({
     style,
     ...props
 }) => {
-    const {appVersion} = useContext(AppContext);
-    const cssLink = getBundledCssLink({appVersion});
+    const {stylesUrl} = useContext(AppContext);
 
     const styles = `
         body, html {
@@ -47,7 +45,7 @@ const Frame = ({
     const onResize = (iframeRoot) => {
         setIframeStyle((current) => {
             return {
-                ...current, 
+                ...current,
                 height: `${iframeRoot.scrollHeight}px`
             };
         });
@@ -61,7 +59,7 @@ const Frame = ({
 
     const head = (
         <>
-            <link rel="stylesheet" href={cssLink} onLoad={onLoadCSS} />
+            <link rel="stylesheet" href={stylesUrl} onLoad={onLoadCSS} />
             <style dangerouslySetInnerHTML={{__html: styles}} />
             <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         </>

apps/comments-ui/src/index.js

@@ -38,8 +38,9 @@ function getSiteData() {
         const accentColor = scriptTag.dataset.accentColor;
         const appVersion = scriptTag.dataset.appVersion;
         const commentsEnabled = scriptTag.dataset.commentsEnabled;
+        const stylesUrl = scriptTag.dataset.styles;
 
-        return {siteUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor, appVersion, commentsEnabled};
+        return {siteUrl, stylesUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor, appVersion, commentsEnabled};
     }
     return {};
 }

apps/comments-ui/src/utils/helpers.js

@@ -53,7 +53,7 @@ export function formatRelativeTime(dateString) {
         return `${Math.floor(diff)} minutes ago`;
     }
 
-    // First check for yesterday 
+    // First check for yesterday
     // (we ignore setting 'yesterday' if close to midnight and keep using minutes until 1 hour difference)
     const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
     if (date.getFullYear() === yesterday.getFullYear() && date.getMonth() === yesterday.getMonth() && date.getDate() === yesterday.getDate()) {
@@ -105,22 +105,6 @@ export function getInitials(name) {
     return parts[0].substring(0, 1).toLocaleUpperCase() + parts[parts.length - 1].substring(0, 1).toLocaleUpperCase();
 }
 
-// Keep a reference outside, because document.currentScript is only returned on the initial script load.
-const currentScript = document.currentScript;
-
-export function getBundledCssLink({appVersion}) {
-    if (process.env.NODE_ENV === 'production' && appVersion) {
-        return `https://unpkg.com/@tryghost/comments-ui@~${appVersion}/umd/main.css`;
-    } else {
-        if (currentScript) {
-            // Dynamically determine the current path
-            const url = new URL(currentScript.src);
-            return url.origin + '/main.css';
-        }
-        return 'http://localhost:4000/main.css';
-    }
-}
-
 // Rudimentary check for screen width
 // Note, this should be the same as breakpoint defined in Tailwind config
 export function isMobile() {