Merge pull request #50 from culturecreates/develop

Develop
culturecreates · Oct 23, 2024 · 39593a7 · 39593a7
2 parents 0789d82 + 6becf2f
commit 39593a7
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 24 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,7 +5,15 @@
     "jest": true
   },
   "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
-  "overrides": [],
+  "overrides": [
+    {
+      "files": ["config-overrides.js"],
+      "rules": {
+        "no-undef": "off",
+        "no-unused-vars": "off"
+      }
+    }
+  ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"

diff --git a/.github/workflows/build-production-deploy-s3.yml b/.github/workflows/build-production-deploy-s3.yml
@@ -17,4 +17,9 @@ jobs:
       - uses: actions/checkout@v2
       - run: npm install
       - run: npm run build:production
-      - run: aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/ --acl public-read --delete --cache-control max-age=3600
+      - run: |
+          current_version=$(node -p "require('./package.json').version")
+          major_version=$(echo $current_version | cut -d. -f1)
+
+          aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/v${major_version}/ --acl public-read --cache-control max-age=3600 --delete 
+
diff --git a/.github/workflows/build-staging-deploy-s3.yml b/.github/workflows/build-staging-deploy-s3.yml
@@ -17,4 +17,8 @@ jobs:
       - uses: actions/checkout@v2
       - run: npm install
       - run: npm run build:staging
-      - run: aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/ --acl public-read --delete --cache-control max-age=3600
+      - run: |
+          current_version=$(node -p "require('./package.json').version")
+          major_version=$(echo $current_version | cut -d. -f1)
+
+          aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/v${major_version}/ --acl public-read --cache-control max-age=3600 --delete 
diff --git a/README.md b/README.md
@@ -1,3 +1,67 @@
 # calendar-widget
 
 This is the widget used by Footlight CMS to display a list of events. The widget is designed to run in an iframe so it can be added to any website. The widget calls Footlight Open API and can can configured to have different appearences and events using [Footlight CMS](https://cms.footlight.io) by a user with an admin role.
+
+## CMS Widget Integration Guide
+
+* div integration example:
+```
+<head>
+  <script defer="defer" src="https://listing-widget.footlight.io/v0/static/js/widget.js"></script>
+  <link href="https://listing-widget.footlight.io/v0/static/css/widget.css" rel="stylesheet" />
+</head>
+
+<body style="margin: 20px; font-family: 'Roboto', 'Helvetica', sans-serif">
+  <div
+    id="calendar-widget"
+    data-api="api.footlight.io"
+    data-calendar="calendar-slug"
+    data-calendar-name="calendar-name"
+    data-locale="en"
+    data-color="#fc6060"
+    data-limit="6"
+    data-height="600px"
+    data-font="Roboto"
+  ></div>
+</body>
+```
+
+* Iframe integration example
+```
+<iframe
+  src="https://listing-widget.footlight.io/v0/index.html"
+  width="100%"
+  height="600px"
+  frameborder="0">
+</iframe>
+```
+
+## Updating Widget Versions
+
+How to Update to a New Version
+
+Each new major release of the widget will be available under a new version directory. For example, if you are currently using version v0 and a new version v1 is released, follow these steps:
+
+### For div method
+* Update the JavaScript and CSS file references to point to the new major version:
+```
+<head>
+  <script defer="defer" src="https://listing-widget.footlight.io/v1/static/js/widget.js"></script>
+  <link href="https://listing-widget.footlight.io/v1/static/css/widget.css" rel="stylesheet" />
+</head>
+```
+
+### for iframe method
+* Update the iframe src URL to reflect the new version:
+```
+src="https://listing-widget.footlight.io/v1/index.html"
+```
+
+### Versioning Format
+* The widget follows semantic versioning. Only the major version (e.g., v1, v2) is relevant for embedding.
+* Minor and patch versions do not require changes in the integration code, as updates will automatically be applied to the referenced major version.
+
+
+
+
+
diff --git a/config-overrides.js b/config-overrides.js
@@ -0,0 +1,12 @@
+module.exports = function override(config, env) {
+  config.output.filename = `static/js/widget.js`;
+
+  const miniCssExtractPlugin = config.plugins.find(
+    (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
+  );
+  if (miniCssExtractPlugin) {
+    miniCssExtractPlugin.options.filename = `static/css/widget.css`;
+  }
+
+  return config;
+};
diff --git a/package.json b/package.json
@@ -21,12 +21,12 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "start:staging": "env-cmd -f .env.staging react-scripts start",
-    "start:production": "env-cmd -f .env.production react-scripts start",
-    "build:staging": "env-cmd -f .env.staging react-scripts build",
-    "build:production": "env-cmd -f .env.production react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "start:staging": "env-cmd -f .env.staging react-app-rewired start",
+    "start:production": "env-cmd -f .env.production react-app-rewired start",
+    "build:staging": "env-cmd -f .env.staging react-app-rewired build",
+    "build:production": "env-cmd -f .env.production react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "lint": "eslint .",
     "lint:fix": "eslint --fix",
@@ -59,6 +59,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
-    "prettier": "^3.1.1"
+    "prettier": "^3.1.1",
+    "react-app-rewired": "^2.2.1"
   }
 }
diff --git a/src/index.css b/src/index.css
@@ -1,17 +1,4 @@
-html {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  max-width: 100vw !important;
-  height: 100%;
-}
-
-:root {
+#calendar-widget {
   --primary-grey: #646d7b;
   --secondary-grey: #d8d8d8;
   --tertiary-grey: #b6c1c9;
@@ -21,6 +8,12 @@ body {
   --primary-white-opaque: #ffffff;
 
   --primary-black: #222732;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  margin: 0;
+  padding: 0;
 }
 
 #calendar-widget ul,