Setup app to support prod published flow

apps/comments-ui/package.json

@@ -1,9 +1,19 @@
 {
-  "name": "comments-ui",
+  "name": "@tryghost/comments-ui",
   "version": "0.1.0",
   "license": "MIT",
   "repository": "git@github.com:TryGhost/comments-ui.git",
   "author": "Ghost Foundation",
+  "unpkg": "umd/comments-ui.umd.js",
+  "files": [
+    "umd/",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "dependencies": {
     "@sentry/react": "^7.5.0",
     "@testing-library/jest-dom": "5.16.2",

apps/comments-ui/scripts/build-combined.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const rewire = require('rewire');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const defaults = rewire('react-scripts/scripts/build.js');
@@ -27,3 +28,9 @@ config.module.rules[1].oneOf = config.module.rules[1].oneOf.map((rule) => {
             : options))
     });
 });
+
+fs.copyFile('./public/main.css', './umd/main.css', (err) => {
+    if (err) {
+        throw err;
+    }
+});

apps/comments-ui/src/App.js

@@ -23,12 +23,12 @@ function AuthFrame({adminUrl, onLoad}) {
     );
 }
 
-function CommentsBoxContainer({done}) {
+function CommentsBoxContainer({done, appVersion}) {
     if (!done) {
         return null;
     }
     return (
-        <ShadowRoot>
+        <ShadowRoot appVersion={appVersion}>
             <CommentsBox />
         </ShadowRoot>
     );
@@ -301,7 +301,7 @@ export default class App extends React.Component {
         return (
             <SentryErrorBoundary dsn={this.props.sentryDsn}>
                 <AppContext.Provider value={this.getContextFromState()}>
-                    <CommentsBoxContainer done={done} />
+                    <CommentsBoxContainer done={done} appVersion={this.props.appVersion} />
                     <AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initSetup.bind(this)}/>
                 </AppContext.Provider>
             </SentryErrorBoundary>

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import root from 'react-shadow';
+import {getBundledCssLink} from '../utils/helpers';
 
 const ShadowRoot = ({
     children,
     ...props
 }) => {
+    const cssLink = getBundledCssLink({appVersion: props.appVersion});
     const head = (
-        <link rel="stylesheet" href="http://localhost:4000/main.css" />
+        <link rel="stylesheet" href={cssLink} />
     );
 
     return (

apps/comments-ui/src/index.js

@@ -37,8 +37,9 @@ function getSiteData() {
         const colorScheme = scriptTag.dataset.colorScheme;
         const avatarSaturation = scriptTag.dataset.avatarSaturation;
         const accentColor = scriptTag.dataset.accentColor;
+        const appVersion = scriptTag.dataset.appVersion;
 
-        return {siteUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor};
+        return {siteUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor, appVersion};
     }
     return {};
 }
@@ -58,13 +59,13 @@ function setup({siteUrl}) {
 
 function init() {
     // const customSiteUrl = getSiteUrl();
-    const {siteUrl: customSiteUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor} = getSiteData();
+    const {siteUrl: customSiteUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor, appVersion} = getSiteData();
     const siteUrl = customSiteUrl || window.location.origin;
     setup({siteUrl});
 
     ReactDOM.render(
         <React.StrictMode>
-            {<App adminUrl={adminUrl} siteUrl={siteUrl} customSiteUrl={customSiteUrl} sentryDsn={sentryDsn} postId={postId} colorScheme={colorScheme} avatarSaturation={avatarSaturation} accentColor={accentColor} />}
+            {<App appVersion={appVersion} adminUrl={adminUrl} siteUrl={siteUrl} customSiteUrl={customSiteUrl} sentryDsn={sentryDsn} postId={postId} colorScheme={colorScheme} avatarSaturation={avatarSaturation} accentColor={accentColor} />}
         </React.StrictMode>,
         document.getElementById(ROOT_DIV_ID)
     );

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

@@ -104,3 +104,11 @@ export function getInitials(name) {
 
     return parts[0].substring(0, 1) + parts[parts.length - 1].substring(0, 1);
 }
+
+export function getBundledCssLink({appVersion}) {
+    if (process.env.NODE_ENV === 'production' && appVersion) {
+        return `https://unpkg.com/@tryghost/comments-ui@~${appVersion}/umd/main.css`;
+    } else {
+        return 'http://localhost:3000/main.css';
+    }
+}