feat: #1150 Served web component themes over CDN (#1158)

reapit · May 8, 2020 · 403e4cf · 403e4cf
1 parent d7da78f
commit 403e4cf
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 180 deletions.
diff --git a/packages/demo-site/index.ejs b/packages/demo-site/index.ejs
@@ -28,121 +28,7 @@
     <script src="<%= CDN_URL %>/search-widget.js"></script>
     <script src="<%= CDN_URL %>/appointment-bookings.js"></script>
     <script src="<%= CDN_URL %>/viewing-booking.js"></script>
-    <script>
-      const variantDefault = {
-        // appointment-bookings's specific styles
-        dateCellHeaderBackgroundColor: '#ececec',
-        timeCellBackgroundColor: '#dfdfdf',
-        timeCellBackgroundColorHover: '#d3d3d3',
-        timeCellsContainerBackgroundColor: '#f9f9f9',
-        formLabelColor: '#737373',
-        formHrSeparatorFontColor: '#e6e6e6',
-        formButtonFontSize: '1.2rem',
-
-        // base
-        baseBackgroundColor: '#f9fbfd',
-        basefontSize: '16px',
-        basefontColor: '#12263f',
-        secondaryfontColor: '#1e2554',
-        primaryHeadingFontSize: '24px',
-        secondaryHeadingFontSize: '20px',
-        baseFontFamily: '"Roboto", sans-serif',
-        headingFontFamily: '"Open Sans", sans-serif',
-        primaryAccentColor: '#0061a8',
-        secondaryAccentColor: '#6c757d',
-        mapAccentColor: '#7bc9eb',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-      }
-
-      const variantA = {
-        baseBackgroundColor: '#fff',
-        basefontSize: '16px',
-        basefontColor: '#556986',
-        inverseFontColor: '#fff',
-        secondaryfontColor: '#95aac9',
-        primaryHeadingFontSize: '22px',
-        secondaryHeadingFontSize: '18px',
-        baseFontFamily: '"Open Sans", sans-serif',
-        headingFontFamily: '"Montserrat", sans-serif',
-        primaryAccentColor: '#887e96',
-        secondaryAccentColor: '#7d9d88',
-        mapAccentColor: '',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-        searchPlaceholder: 'e.g. London or EC1N',
-      }
-
-      const variantB = {
-        baseBackgroundColor: '#f9fbfd',
-        basefontSize: '14px',
-        basefontColor: '#12263f',
-        inverseFontColor: '#f9fbfd',
-        secondaryfontColor: '#1e2554',
-        primaryHeadingFontSize: '24px',
-        secondaryHeadingFontSize: '20px',
-        baseFontFamily: '"Roboto", sans-serif',
-        headingFontFamily: '"Open Sans", sans-serif',
-        primaryAccentColor: '#0061a8',
-        secondaryAccentColor: '#1e2554',
-        mapAccentColor: '#7bc9eb',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-        searchPlaceholder: 'e.g. London or EC1N',
-      }
-
-      const variantC = {
-        baseBackgroundColor: '#4C566A',
-        basefontSize: '14px',
-        basefontColor: '#fff',
-        inverseFontColor: '#4C566A',
-        secondaryfontColor: '#88C0D0',
-        primaryHeadingFontSize: '28px',
-        secondaryHeadingFontSize: '24px',
-        baseFontFamily: '"Open Sans", sans-serif',
-        headingFontFamily: '"Roboto Slab", serif',
-        primaryAccentColor: '#A3BE8C',
-        secondaryAccentColor: '##88C0D0',
-        mapAccentColor: '#8FBCBB',
-        breakPoints: {
-          mobile: '',
-          tablet: '',
-          laptop: '',
-          desktop: '',
-        },
-        searchPlaceholder: 'e.g. London or EC1N',
-      }
-
-      const params = new URLSearchParams(window.location.search)
-
-      const variant = params.get('variant')
-
-      switch (variant) {
-        case 'A':
-          window.theme = variantA
-          break
-        case 'B':
-          window.theme = variantB
-          break
-        case 'C':
-          window.theme = variantC
-          break
-        default:
-          window.theme = variantDefault
-      }
-    </script>
+    <script src="<%= CDN_URL %>/themes.js"></script>
     <script>
       ReapitSearchWidgetComponent &&
         new ReapitSearchWidgetComponent({
@@ -162,4 +48,4 @@
         })
     </script>
   </body>
-  </html>
+</html>
diff --git a/packages/web-components/src/appointment-bookings/client/index.html b/packages/web-components/src/appointment-bookings/client/index.html
@@ -24,7 +24,7 @@
 
 
   <script src="./dist/appointment-bookings.js"></script>
-  <script src="./themes/appointment-bookings.js"></script>
+  <script src="./themes/themes.js"></script>
   <script>
     if (window.ReapitAppointmentBookingComponent) {
       new ReapitAppointmentBookingComponent({

diff --git a/packages/web-components/src/common/styles/__themes__/appointment-bookings.js b/packages/web-components/src/common/styles/__themes__/appointment-bookings.js
diff --git a/...common/styles/__themes__/search-widget.js → ...ts/src/common/styles/__themes__/themes.js b/...common/styles/__themes__/search-widget.js → ...ts/src/common/styles/__themes__/themes.js
@@ -1,3 +1,16 @@
+const commonVariables = {
+  // appointment-bookings's specific styles
+  dateCellHeaderBackgroundColor: '#ececec',
+  timeCellBackgroundColor: '#dfdfdf',
+  timeCellBackgroundColorHover: '#d3d3d3',
+  timeCellsContainerBackgroundColor: '#f9f9f9',
+  formLabelColor: '#737373',
+  formHrSeparatorFontColor: '#e6e6e6',
+  formButtonFontSize: '1.2rem',
+  //search widget
+  searchPlaceholder: 'e.g. London or EC1N',
+}
+
 const variantA = {
   baseBackgroundColor: '#fff',
   basefontSize: '16px',
@@ -17,7 +30,7 @@ const variantA = {
     laptop: '',
     desktop: '',
   },
-  searchPlaceholder: 'e.g. London or EC1N',
+  ...commonVariables,
 }
 
 const variantB = {
@@ -39,7 +52,7 @@ const variantB = {
     laptop: '',
     desktop: '',
   },
-  searchPlaceholder: 'e.g. London or EC1N',
+  ...commonVariables,
 }
 
 const variantC = {
@@ -61,7 +74,7 @@ const variantC = {
     laptop: '',
     desktop: '',
   },
-  searchPlaceholder: 'e.g. London or EC1N',
+  ...commonVariables,
 }
 
 const params = new URLSearchParams(window.location.search)
@@ -79,5 +92,5 @@ switch (variant) {
     window.theme = variantC
     break
   default:
-    window.theme = {}
+    window.theme = variantA
 }
diff --git a/packages/web-components/src/common/styles/__themes__/viewing-booking.js b/packages/web-components/src/common/styles/__themes__/viewing-booking.js
diff --git a/packages/web-components/src/scripts/build-prod.js b/packages/web-components/src/scripts/build-prod.js
@@ -1,14 +1,37 @@
 #!/usr/bin/env node
+const path = require('path')
+const { runCommand } = require('../../../../scripts/release/utils')
+
+const releaseDevThemes = () => {
+  try {
+    const bucketName = 'reapit-web-components'
+    const themesDistPath = path.resolve(__dirname, '../../', 'public', 'themes')
+    // Copy new version to the bucket
+    runCommand('aws', [
+      's3',
+      'cp',
+      themesDistPath,
+      `s3://${bucketName}`,
+      '--grants',
+      'read=uri=http://acs.amazonaws.com/groups/global/AllUsers',
+      '--recursive',
+    ])
+  } catch (err) {
+    console.error(err)
+    throw new Error(err)
+  }
+}
+
 return (() => {
   const { execSync } = require('child_process')
   const { setEnv } = require('./get-env')
-  const packages = ['search-widget', 'appointment-bookings', 'viewing-booking']
+  const packages = ['search-widget', 'appointment-bookings', 'viewing-booking', 'themes']
   const opts = {
     stdio: 'inherit',
   }
   setEnv()
 
-  const clearPublic = 'rimraf ./public/dist'
+  const clearPublic = 'rimraf ./public/dist && rimraf ./public/themes'
   execSync(clearPublic, opts)
 
   packages.forEach(package => {
@@ -20,5 +43,8 @@ return (() => {
       process.exit(1)
     }
   })
+  // upload themes to CDN
+  releaseDevThemes()
+
   process.exit(0)
 })()
diff --git a/packages/web-components/src/scripts/rollup.config.themes.js b/packages/web-components/src/scripts/rollup.config.themes.js
@@ -0,0 +1,15 @@
+import baseConfig from './rollup.config.base'
+
+const production = !process.env.ROLLUP_WATCH
+
+export default {
+  ...baseConfig,
+  input: 'src/common/styles/__themes__/themes.js',
+  output: {
+    sourcemap: !production,
+    format: 'iife',
+    name: 'theme',
+    file: './public/themes/themes.js',
+  },
+  plugins: [...baseConfig.plugins],
+}
diff --git a/packages/web-components/src/scripts/start-dev.js b/packages/web-components/src/scripts/start-dev.js
@@ -9,7 +9,7 @@ return (() => {
       const clearPublic = 'rimraf ./public/dist && rimraf ./public/themes'
       const moveHtml = `mkdir -p ./public && cp ./src/${packageName}/client/index.html ./public/`
       // eslint-disable-next-line max-len
-      const moveTheme = `mkdir -p ./public/themes && cp ./src/common/styles/__themes__/${packageName}.js ./public/themes`
+      const moveTheme = 'mkdir -p ./public/themes && cp ./src/common/styles/__themes__/themes.js ./public/themes'
       const clientScript = `rollup -w -c './src/scripts/rollup.config.${packageName}.js' --environment APP_ENV:local`
       const serverScript = 'serverless offline --out public/dist --stage local'
       const startClientServer = 'sirv public --dev -s --port 8080'

diff --git a/packages/web-components/src/search-widget/client/index.html b/packages/web-components/src/search-widget/client/index.html
@@ -15,7 +15,7 @@
   <body>
     <div id="search-widget"></div>
     <script src="./dist/search-widget.js"></script>
-    <script src="./themes/search-widget.js"></script>
+    <script src="./themes/themes.js"></script>
     <script>
       ReapitSearchWidgetComponent &&
         new ReapitSearchWidgetComponent({

diff --git a/packages/web-components/src/viewing-booking/client/index.html b/packages/web-components/src/viewing-booking/client/index.html
@@ -20,7 +20,7 @@
     <div id="appointment-bookings-viewing"></div>
 
     <script src="./dist/viewing-booking.js"></script>
-    <script src="./themes/viewing-booking.js"></script>
+    <script src="./themes/themes.js"></script>
     <script>
       if (window.ReapitViewingBookingComponent) {
         new ReapitViewingBookingComponent({