Initial Commit

README.md

@@ -1 +1,99 @@
-# sample-react-coronavirus-microsite
+# React-Based “Coronavirus Response” Website Using Acoustic Content's Headless CMS
+
+This is an example of how to create a modern website using the headless CMS features of Acoustic Content in combination with a Single Page Application (SPA) for the website. This sample is a React-based site, though the same concepts and content can be used with any web application or other delivery channel. That’s the great benefit of a headless CMS: the content and images are completely independent of the delivery channel. Your business users can manage all the content in one place and have it delivered across all channels - websites, mobile apps, emails, or any other channel. 
+
+### Combining the React SPA with content and assets managed by business users
+
+In this example you can see how business users can manage all the website components they need to manage, while the web developer provides the framework for the website.
+
+The following components of the website are managed by business users in Acoustic Content:
+- Home Page Introductory statement.
+- Company information, logo, favicon.
+- Update Articles, with Top (pinned) updates on the home page, and all updates shown on the Updates page. Clicking on an Update article's summary tile results in a dynamic page displaying the detail of the article on the website.
+- Individual FAQ items, of which Top (pinned) updates are shown on the home page, and all FAQs shown on the FAQs page.
+- All the images for the site content, using the Image Profile feature to automatically generate different size images.
+- Resources, such as external links and social networks.
+- Configuration options for the style guide, including the Font family and colors.
+
+These components of the website are defined in the SPA which is built by a web developer:
+- The React SPA framework with support for pulling in content and assets dynamically using Acoustic Content REST APIs.
+- Top-level navigation (Home, Udates, FAQs). These are defined as routes in the SPA.
+- Site look and feel, using Bootstrap styling with responsive web design so the site renders nicely on any device.
+- Search for content in the site. The search input supports auto-complete, using the "faceted search" support of the Content delivery search API.
+
+To see the dynamic pages of the site in action, try this after you've installed the sample:
+- Create a new COVID Update content item. Fill out the text elements and select an image. Note that in the Article Text field you can use features of the rich text editor, including the ability to include images right inline with the text.
+- On the COVID Update, turn on "Top Update and select the category and tags for the filtering functionality on the Updates page.
+- Publish the new COVID Update.
+- Open the website in a browser.
+- On the home page, your new update should appear at the top of the list of updates (since it’s the most recent).
+- From the Updates page, your new article should be listed, and you can filter by category and tag to find your update.
+
+
+## Installing the Sample
+
+### Prerequisites
+
+In order to run Sample Site locally or hosted on Acoustic Content, the following is required:
+
+- Acoustic Content Tenant;
+
+- [wchtools-cli](https://github.com/ibm-wch/wchtools-cli) v2.3.4 or above;
+
+- The latest Node 10.x LTS version of Node;
+
+- Run `wchtools init` to setup the [WCH tools CLI](https://github.com/ibm-wch/wchtools-cli#getting-started);
+
+- Download or clone this repository to get the React application code and "content-artifacts" to be deployed to your tenant.
+
+### Update the source with your tenant information
+
+1. You can set the tenant information, by changing the values in `src/api/endpoints.js`. This file determines from which tenant website gets served from.
+
+   Inside `src/api/endpoints.js`, replace the values on the following lines to match your Content tenant:
+
+```
+export const DOMAIN_NAME = 'your-domain-name.com';
+export const CONTENT_HUB_ID = '0000000-0000-0000-0000-000000000000';
+```
+
+The domain name can be extracted from the delivery URL of your site. (e.g. https:/domain_name/content_hub_id/).
+
+All hub information including domain, IDs and URLs for the hub can be found inside Acoustic Content (_Sidebar > About > Hub Information_):
+
+- Log in to Acoustic Content and open the 'About' tab.
+- Click the 'Hub information' option.
+- Find a delivery URL and hub ID on 'Hub Information' pop-up window.
+
+2. Change Content hub ID (copy this from your Authoring UI's 'About -> Hub Information' panel) into the _homepage_ value inside `package.json`.
+
+3. Edit `public/index.html` to replace the values on the following lines to match your Content tenant:
+
+```
+    var hostName = "https://your-domain-name.com";
+    var tenantId = "00000000-0000-0000-0000-00000000000";
+```
+
+
+
+### Upload contents to Acoustic Content
+
+1. Go to the directory where you have a downloaded folder with the Content Model files (it contains sub-folders named _assets, content-types, content, categories_ etc.);
+2. Run `wchtools push -A --dir <Folder_Name> --publish-now` to push the Content Model to the Hub. If your content folder `content-artifacts` is located in a website sample root folder there is also a shortcut `npm run init-content`
+3. Login to Acoustic Content to see that it contains uploaded content inside 'Content Model' and 'Content Library' sections.
+
+### Run the site application on a local development server
+
+1. Enable localhost CORS support for your tenant. Login to Acoustic Content and go to Settings, Administration, Security tab. Add http://localhost:3000 (or "*" for any domain) and save your settings.
+2. Go to the folder with the application (it contains sub-folders named _src, public_ etc.) and install dependencies by running `npm install`.
+3. Run `npm start` to start the development server and open the application in a new web browser tab on the `localhost`.
+
+### Build and Deploy to Acoustic Content
+
+_Note:_ If you haven't installed the sample locally, please go through sections **Prerequisites**, **Changing the tenant** and make sure to install project dependencies by running `npm install`.
+
+Steps to deploy your sample:
+
+1. Run `npm run hub-build-deploy` command. It will build and deploy the application to the specified hub.
+2. To open the website on Acoustic Content, please use the following link type: _[delivery_URL]/coronavirus-response/index.html_
+3. Note that publishing can take some time for all updates to be available. In case you do not want to wait for the server side akamai cache to time out you can flush the cache via: `wchtools clear --cache`. More information can be found here: [Clearing the content delivery network cache](https://github.com/acoustic-content-samples/wchtools-cli#clearing-the-watson-content-hub-content-delivery-network-cache).

content-artifacts/assets/dxauth/ui-extension-colorpicker/index.html

@@ -0,0 +1,71 @@
+<html>
+
+<head>
+    <!-- <script src="https://www-wdc.digitalexperience.ibm.com/auth/ibm-wch-ui-extensions.js"></script> -->
+    <script src="ibm-wch-ui-extensions.js"></script>
+    <script>
+        /*
+            Copyright IBM Corporation 2018
+            Licensed under the Apache License, Version 2.0 (the "License");
+            you may not use this file except in compliance with the License.
+            You may obtain a copy of the License at
+                http://www.apache.org/licenses/LICENSE-2.0
+            Unless required by applicable law or agreed to in writing, software
+            distributed under the License is distributed on an "AS IS" BASIS,
+            WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+            See the License for the specific language governing permissions and
+            limitations under the License.
+        */
+        function onload() {
+            var colorPicker = document.getElementById("colorPicker");
+            console.log("Dave was in colorpicker");
+            wchUIExt.requestResizeFrame(50);
+
+            wchUIExt.getDefinition().then((definition) => {
+                wchUIExt.getElement().then((element) => {
+                    if (definition.elementType === "group") {
+                        if (element.value) {
+                            if (element.value["colorpicker"].value) {
+                                console.log("Dave was in colorpicker setting value");
+                                colorPicker.value = element.value["colorpicker"].value;
+                            }
+                        }
+                    } else {
+                        if (element.value) {
+                            console.log("Dave was in colorpicker setting value 2");
+                            colorPicker.value = element.value;
+                        }
+                    }
+                });
+            });
+        }
+
+        function onInput() {
+            wchUIExt.getDefinition().then((definition) => {
+                if (definition.elementType === "group") {
+                    wchUIExt.setElement({
+                        elementType: "group",
+                        typeRef: definition.typeRef,
+                        value: {
+                            "colorpicker": {
+                                elementType: "text",
+                                value: document.getElementById("colorPicker").value
+                            }
+                        }
+                    });
+                } else {
+                    wchUIExt.setElement({
+                        elementType: "text",
+                        value: document.getElementById("colorPicker").value
+                    });
+                }
+            });
+        }
+    </script>
+</head>
+
+<body onload="onload()">
+    <input id="colorPicker" type="color" onInput="onInput()">
+</body>
+
+</html>

content-artifacts/assets/dxdam/01/01f8eefc-4ee7-4e80-850f-7e5bfceeae9e/IconsYellowSet_Location.png_amd.json

@@ -0,0 +1,102 @@
+{
+  "fileName": "IconsYellowSet_Location.png",
+  "metadata": {
+    "width": 2001,
+    "height": 2001
+  },
+  "libraryId": "a4226673-f1b0-4cd1-80d9-7d51607d7276",
+  "creatorId": "ab07fa0d-ee97-4f74-bca9-cf39133ea88d",
+  "description": "",
+  "caption": "",
+  "mediaId": "e76ce24c-0c3a-4ac2-a43d-d967ef23ad86",
+  "path": "/dxdam/01/01f8eefc-4ee7-4e80-850f-7e5bfceeae9e/IconsYellowSet_Location.png",
+  "digest": "DDfORZYWjEo1HJwFSaGDFA==",
+  "lastModifierId": "1584362b-abd7-4913-aa0b-652a2f701d8d",
+  "renditions": {
+    "default": {
+      "id": "r=64a1b984-e86c-4eb3-b06d-5e86bd5731b5&a=01f8eefc-4ee7-4e80-850f-7e5bfceeae9e",
+      "source": "/authoring/v1/resources/64a1b984-e86c-4eb3-b06d-5e86bd5731b5"
+    }
+  },
+  "id": "01f8eefc-4ee7-4e80-850f-7e5bfceeae9e",
+  "usageRights": {
+    "categories": [
+      {
+        "id": "00000000-0000-0000-0000-032300c8e20"
+      },
+      {
+        "id": "00000000-0000-0000-0000-023000c8e20"
+      }
+    ]
+  },
+  "systemModified": "2020-04-15T18:06:53.618Z",
+  "profileRenditions": [],
+  "rev": "2-2c336e56fb7f856e66f6ae03a230c545",
+  "altText": "",
+  "resource": "64a1b984-e86c-4eb3-b06d-5e86bd5731b5",
+  "created": "2020-04-10T17:00:12.662Z",
+  "profiles": [],
+  "mediaType": "image/png",
+  "classification": "asset",
+  "assetType": "image",
+  "tags": {
+    "suggested": [
+      "classification:sash fastener",
+      "classification:lock",
+      "classification:fastener",
+      "classification:restraint (chains)",
+      "classification:key",
+      "classification:adhesive plaster",
+      "classification:fluorescent lamp",
+      "classification:lamp",
+      "classification:lemon yellow color",
+      "classification:yellow color"
+    ],
+    "declined": [
+      "classification:sash fastener",
+      "classification:lock",
+      "classification:fastener",
+      "classification:restraint (chains)",
+      "classification:key",
+      "classification:adhesive plaster",
+      "classification:fluorescent lamp",
+      "classification:lamp",
+      "classification:lemon yellow color"
+    ],
+    "values": [
+      "classification:yellow color",
+      "user:yellow",
+      "user:location"
+    ],
+    "analysis": "complete"
+  },
+  "isManaged": true,
+  "categoryIds": [],
+  "cognitive": {
+    "classifications": [
+      "sash fastener",
+      "lock",
+      "fastener",
+      "restraint (chains)",
+      "key",
+      "adhesive plaster",
+      "fluorescent lamp",
+      "lamp",
+      "lemon yellow color",
+      "yellow color"
+    ],
+    "colors": {
+      "lightMuted": "#927d06",
+      "darkMuted": "#967302",
+      "lightVibrant": "#fae988",
+      "vibrant": "#f4bc04",
+      "muted": "#967302",
+      "darkVibrant": "#826402"
+    },
+    "status": "complete"
+  },
+  "fileSize": 34627,
+  "name": "IconsYellowSet_Location.png",
+  "lastModified": "2020-04-15T18:06:53.618Z",
+  "status": "ready"
+}

content-artifacts/assets/dxdam/02/024e51e2-f544-4b57-ad18-0d13e09706bd/YT_Color.svg_amd.json

@@ -0,0 +1,51 @@
+{
+  "fileName": "YT_Color.svg",
+  "metadata": {},
+  "libraryId": "51797f7c-589c-431e-9437-a4d3fd1ea560",
+  "creatorId": "ab9f9ba5-3215-4f12-a053-2b2a9927311d",
+  "description": "",
+  "caption": "",
+  "mediaId": "2c331fc6-7260-4b3f-9bbe-aa19f4c2a0a7",
+  "path": "/dxdam/02/024e51e2-f544-4b57-ad18-0d13e09706bd/YT_Color.svg",
+  "digest": "+SPbgJT/Jv4/bKIKEeeMLg==",
+  "lastModifierId": "ab9f9ba5-3215-4f12-a053-2b2a9927311d",
+  "renditions": {
+    "default": {
+      "id": "r=000de2a3-7c21-4dfd-9874-f9fc3492e894&a=024e51e2-f544-4b57-ad18-0d13e09706bd",
+      "source": "/authoring/v1/resources/000de2a3-7c21-4dfd-9874-f9fc3492e894"
+    }
+  },
+  "id": "024e51e2-f544-4b57-ad18-0d13e09706bd",
+  "usageRights": {
+    "categories": []
+  },
+  "systemModified": "2020-04-11T22:50:04.871Z",
+  "profileRenditions": [],
+  "rev": "2-1ff1c30c761186a8bd73ded51a9c5767",
+  "altText": "",
+  "resource": "000de2a3-7c21-4dfd-9874-f9fc3492e894",
+  "created": "2020-04-10T06:55:06.764Z",
+  "profiles": [],
+  "mediaType": "image/svg+xml",
+  "classification": "asset",
+  "assetType": "image",
+  "tags": {
+    "declined": [],
+    "values": [
+      "user:YouTube"
+    ],
+    "analysis": "none"
+  },
+  "isManaged": true,
+  "categoryIds": [
+    "c8158dbf-1ebd-4b94-8901-3d146696924a",
+    "df217feb-f4cf-41a5-90d4-f54195d2ffc6"
+  ],
+  "cognitive": {
+    "status": "none"
+  },
+  "fileSize": 651,
+  "name": "YT_Color.svg",
+  "lastModified": "2020-04-11T22:50:04.871Z",
+  "status": "ready"
+}