Merge adobe/spark-website/main into webistry-development/spark-website/main

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.circleci/config.yml

@@ -0,0 +1,57 @@
+version: 2.1
+executors:
+  node12:
+    docker:
+    - image: circleci/node:12
+      environment:
+        NPM_CONFIG_PREFIX: "~/.npm-global"
+        working_directory: ~/repo
+
+orbs:
+  helix-post-deploy: adobe/helix-post-deploy@2.0.10
+
+jobs:
+  build:
+    executor: node12
+    steps:
+      - checkout
+      - run:
+          name: install latest npm
+          command: sudo npm -g install npm
+      - run:
+          name: Installing Dependencies
+          command: npm install
+      - persist_to_workspace:
+          root: /home/circleci
+          paths:
+            - project
+
+  operations:
+    executor: node12
+    steps:
+      - attach_workspace:
+          at: /home/circleci
+      - helix-post-deploy/monitoring:
+          newrelic_name: Adobe CC Express - Production Content
+          newrelic_url: https://www.adobe.com/express
+          newrelic_type: browser
+          newrelic_script: ./.monitoring/homepage-pricing.js
+          newrelic_group_policy: Customer Sites
+          newrelic_locations: AWS_US_WEST_1
+          newrelic_frequency: 1
+
+workflows:
+  version: 2
+  build:
+    jobs:
+      - build:
+          filters:
+            branches:
+              only: ops
+      - operations:
+          requires:
+            - build
+          context: Project Helix
+          filters:
+            branches:
+              only: ops

.eslintrc.js

@@ -16,8 +16,19 @@ module.exports = {
   rules: {
     // allow reassigning param
     'no-param-reassign': [2, { props: false }],
+    'linebreak-style': ['error', 'unix'],
+    'import/extensions': ['error', {
+      js: 'always',
+    }],
   },
+  parser: '@babel/eslint-parser',
   parserOptions: {
+    allowImportExportEverywhere: true,
     sourceType: 'module',
+    requireConfigFile: false,
+    babelOptions: {
+      configFile: './.babelrc',
+    },
   },
+  plugins: ['@babel'],
 };

.github/workflows/run-tests.yaml

@@ -13,6 +13,7 @@ jobs:
         node-version: '12'
     - run: npm install
       working-directory: test
+    - run: npm run lint
     - run: npm test
       working-directory: test
       env:

.monitoring/homepage-pricing.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you 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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/* global $browser $driver */
+/* eslint-disable no-console */
+
+/*
+ * Scripted Browser API Documentation:
+ * https://docs.newrelic.com/docs/synthetics/new-relic-synthetics/scripting-monitors/writing-scripted-browsers
+ */
+const assert = require('assert');
+
+const TIMEOUT = 10000;
+
+/**
+ * Checks if the homepage is loading and showing the expected content.
+ * @param {string} baseUrl The base URL to check
+ */
+ async function checkHomepage(baseUrl) {
+  const url = `${baseUrl}/`;
+  console.log(`Verifying ${url} ...`);
+  $browser.get(url)
+    // wait for the page to fully load
+    .then(() => $browser.sleep(TIMEOUT))
+    // check document integrity
+    .then(() => $browser.findElement($driver.By.css('html')))
+    .then((html) => Promise.all([html.getAttribute('class'), html.getAttribute('lang')]))
+    .then(([template, lang]) => {
+      assert.ok(template === 'default', `Expected template to be "default", got "${template}" instead`);
+      assert.ok(lang === 'en', `Expected language to be "en", got "${lang}" instead`);
+    })
+    // check CTA button
+    .then(() => $browser.findElement($driver.By.css('main a.button.primary')))
+    .then(() => console.log(`${url} successfully verified.`))
+    .catch((e) => {
+      assert.fail(`Verification of ${url} failed: ${e.message}`);
+    });
+}
+
+/**
+ * Checks if the pricing page is loading and showing the expected content.
+ * @param {string} baseUrl The base URL to check
+ */
+async function checkPricingPage(baseUrl) {
+  const url = `${baseUrl}/pricing`;
+  console.log(`Verifying ${url} ...`);
+  $browser.get(url)
+    // wait for the page to fully load
+    .then(() => $browser.sleep(TIMEOUT))
+    // check buy button
+    .then(() => $browser.findElement($driver.By.linkText('Buy Now')))
+    .then((button) => button.getAttribute('href'))
+    .then((buyUrl) => assert.ok(buyUrl.startsWith('https://commerce.adobe.com')))
+    .then(() => console.log(`${url} successfully verified.`))
+    .catch((e) => {
+      assert.fail(`Verification of ${url} failed: ${e.message}`);
+    });
+}
+
+// Check homepage and pricing page
+(async () => {
+  await Promise.all([
+    '$$$URL$$$',
+    // 'https://spark-website--adobe.hlx.live/express',
+    // 'https://spark-website--adobe.hlx.page/express',
+  ].map((baseUrl) => checkHomepage(baseUrl) && checkPricingPage(baseUrl)));
+})();

404.html

@@ -6,19 +6,52 @@
 	window.isErrorPage = true;
 	window.errorCode = '404';
   </script>
+  <style>
+
+	.error-404 main {
+		visibility: visible;
+	    background-image: url(https://adobe.com/content/dam/acom/en/error-pages/images/404-1440x612_edge2.jpg);
+		background-size: cover;
+		background-position: 70%;
+		height: 70vh;
+		position: relative;
+		padding: 32px;
+		text-align: left;
+	}
+
+	.error-404 cite {
+		position: absolute;
+		bottom: 32px;
+		left: 32px;
+	}
+
+	.error-404 main nav a {
+		display: block;
+		padding: 1rem 0;
+	}
+
+	.error-404 main .section-wrapper h2 {
+		text-align: left;
+	}
+
+	.error-404 footer, .error-404 .feds-navBar-wrapper {
+		margin-top: 0;
+	}
+
+  </style>
   <esi:include src="/head.html" onerror="continue"/>
 </head>
-<body>
+<body class="error-404">
   <!--  header -->
   <header><esi:include src="/header.plain.html" onerror="continue"/></header>
   <!--  main content -->
-  <main>
-	  <div class="default">
-		<h2></h2>
-		<p class="detail"></p>
-		<nav class="list">
-			<a class="gotohome" href="/"></a>
-			<a class="searchadobe" href="https://adobe.com/search.html"></a>
+  <main> 
+	  <div>
+		<h2>These are uncharted waters.</h2>
+		<p><i>Searching for something? Try one of the links below</i></p>
+		<nav>
+			<a href="/express/">Go to homepage</a>
+			<a href="https://adobe.com/search.html">Search Adobe.com</a>
 		</nav>
 		<cite>
 			<a href="https://www.behance.net/rsvn" target="_blank">The Story Begins Here by Risfan Fardiansyah</a>	

README.md

@@ -10,6 +10,8 @@ Outer CDN:
 
 1. Install the [Helix CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/helix-cli`
 1. Clone this repository locally: `git clone https://github.com/adobe/spark-website.git`
-1. Go to the `fedpub` directory: `cd spark-website`
+1. Go to the `spark-website` directory: `cd spark-website`
 1. Start Helix Simulator: `hlx up` (opens your browser at `http://localhost:3000`)
 1. Open the `spark-website` directory in your favorite IDE and start coding :)
+
+

express/blocks/animation/animation.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you 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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+  createTag,
+} from '../../scripts/scripts.js';
+
+export default function decorate($block, name, doc) {
+  doc.querySelectorAll('.animation a[href], .video a[href]').forEach(($a) => {
+    const href = $a.getAttribute('href');
+    const url = new URL(href);
+    const helixId = url.pathname.split('/')[2];
+    const $parent = $a.parentNode;
+
+    if (href.endsWith('.mp4')) {
+      const isAnimation = !!$a.closest('.animation');
+      // const isAnimation = true;
+
+      let attribs = { controls: '' };
+      if (isAnimation) {
+        attribs = {
+          playsinline: '', autoplay: '', loop: '', muted: '',
+        };
+      }
+      const $poster = $a.closest('div').querySelector('img');
+      if ($poster) {
+        attribs.poster = $poster.src;
+        $poster.remove();
+      }
+
+      const $video = createTag('video', attribs);
+      /*
+      if (href.startsWith('https://hlx.blob.core.windows.net/external/')) {
+        href='/hlx_'+href.split('/')[4].replace('#image','');
+      }
+      */
+      $video.innerHTML = `<source src="${href}" type="video/mp4">`;
+      $a.parentNode.replaceChild($video, $a);
+      if (isAnimation) {
+        $video.addEventListener('canplay', () => {
+          $video.muted = true;
+          $video.play();
+        });
+      }
+    }
+
+    if (href.endsWith('.gif')) {
+      $a.parentNode.replaceChild(createTag('img', { src: `/hlx_${helixId}.gif` }), $a);
+    }
+
+    const $next = $parent.nextElementSibling;
+    if ($next && $next.tagName === 'P' && $next.innerHTML.trim().startsWith('<em>')) {
+      $next.classList.add('legend');
+    }
+  });
+}

express/blocks/banner/banner.css

@@ -0,0 +1,17 @@
+main .banner {
+  border-radius: 20px;
+  background-color: #000;
+  color: #FFF;
+  padding: 32px;
+  margin: 32px auto;
+}
+
+main .banner a:any-link {
+  color: white;
+}
+
+@media (min-width:900px) {
+  main .banner {
+    margin: 40px auto;
+  }
+}

test/unit/template.test.js → express/blocks/banner/banner.js

@@ -9,10 +9,4 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-/* eslint-env mocha */
-
-describe('Template page', () => {
-  it('dummy', () => {
-    // expect(true).to.be.true;
-  });
-});
+/* global */