Merge branch 'main' into 202-lazy-loading

.eslintrc.js → .eslintrc.cjs

@@ -17,5 +17,7 @@ module.exports = {
     'import/extensions': ['error', {
       js: 'always',
     }],
+    'max-len': ['error', { "code": 200 }],
+    'function-paren-newline': 'off',
   },
 };

.github/workflows/run-tests.yaml

@@ -13,5 +13,6 @@ jobs:
         node-version: '16' #required for npm 8 or later.
     - run: npm install
     - run: npm run lint
+    - run: npm test
       env:
         CI: true

.mocharc.json

@@ -0,0 +1,3 @@
+{
+  "recursive": true
+}

README.md

@@ -24,3 +24,96 @@ npm run lint
 1. Install the [AEM CLI](https://github.com/adobe/aem-cli): `npm install -g @adobe/aem-cli`
 1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)
 1. Open the `{repo}` directory in your favorite IDE and start coding :)
+
+
+### Local Proxy for APIs
+There are numerous APIs that this site relies on, including but not limited to:
+
+* Account (login, profile, etc)
+* Blog
+* Properties (search, listing, etc)
+* Agent (details, search)
+* Suggestions 
+
+All of these APIs are hosted on an AMS system. To make use of them locally, a proxy is needed.
+
+There are two ways to set up the local proxy:
+
+* [Real Domain Proxy](#real-domain-proxy)
+  * Less configuration, but must be aware when proxy is/isn't running.
+* [Local Proxy to Remote](#local-proxy-to-remote)
+  * More configuration, but explicit domain for proxy - clear delineation of live and proxied traffic.
+
+Either way, you need to download and install a local proxy. These instructions use [Proxyman](https://proxyman.io/download). Once you download and install Proxyman, you will need to also install the Proxyman CA certs. These are needed to be able to route the secure traffic.
+
+
+#### Real Domain Proxy
+
+In this setup, the proxy is configured to route non-API traffic on the Staging domain to your local computer. So all requests _except_ the APIs will go the local host. The API calls will remain routed to the Stage domain.
+
+1. Create a new Allow List entry:
+    * _Tools_ => _Allow List_
+    * Name: `BHHS Stage`
+    * Rule: `https://stage.commonmoves.com*`
+    * Any, Use Wildcard
+    * Include all subpaths of this URL: Checked
+
+1. Create a new Map Remote Entry:
+   * _Tools_ => _Map Remote_
+   * Matching Rule:
+     * Name: `BHHS API`
+     * Rule: `https://stage.commonmoves.com(?!(/bin|/content)).*`
+     * Any, Use Regex
+     * Include all subpaths of this URL: Checked
+   * Map To: 
+     * Protocol: `http`
+     * Host: localhost
+     * Port: 3000
+
+
+
+#### Local Proxy to Remote
+
+This setup uses a locally resolved domain, which will Proxyman will use to route the traffic. All non-API traffic will route to localhost, all API traffic will go to the Stage domain.
+
+1. Add an entry to `/etc/hosts`:
+   Proxyman won't proxy localhost, so a custom domain is required. Add the following (if you already have a host entry for 127.0.0.1, simply add the new domain)
+> 127.0.0.1 proxyman.debug 
+
+2. Create a self-signed cert. This is necessary for the AEM Cli to so that cookies can be persisted. It really doesn't matter what you answer for the questions. Just make sure you do not create the certs in the code repo, or add them to Git.
+
+(`/some/path` is used as a reference here, find an appropriate spot on your local computer)
+
+```
+$ cd /some/path
+$ openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt
+```
+
+3. Create a new Allow List entry:
+   * _Tools_ => _Allow List_
+   * Name: *Localhost*
+   * Matching Rule `https:\/\/proxyman\.debug:\d+.*`
+   * Any, Use Regex
+   * Include all subpaths of this URL: checked
+
+4. Create a new Map Remote Entry:
+    * _Tools_ => _Map Remote_
+   * Matching Rule
+     * Name: *BHHS API*
+     * Rule: `https://proxyman.debug:\d+(/bin|/content).*`
+     * Any, Use Regex
+     * Include all subpaths of this URL: checked
+   * Map To
+     * Protocol: `https`
+     * Host: `stage.commonmoves.com`
+     * Port: `443`
+
+5. Staring the AEM local proxy requires also passing in the Cert info, to run using https:
+
+(`/some/path` is the same place you previously created the cert)
+
+```
+% aem up --tls-cert /some/path/localhost.crt --tls-key /some/path/localhost.key
+```
+
+To view Proxied site use: https://proxyman.debug:3000/

blocks/agent-communities/agent-communities.css

@@ -0,0 +1,242 @@
+@import url('./design-1.css');
+
+.agent-communities.block {
+  min-height: 1000px;
+}
+
+.agent-communities.block .cards-list {
+  display: flex;
+  flex-wrap: wrap;
+
+  --anim-speed: 0.2s;
+  --zoom: 10px;
+  --columns: 1;
+}
+
+.agent-communities.block .cards-list .cards-item {
+  height: 11.5rem;
+  flex-basis: calc(100% / var(--columns) - 20px);
+  margin: 10px;
+  cursor: pointer;
+  transition: flex-basis var(--anim-speed) ease-in-out;
+}
+
+.agent-communities.block .cards-list .cards-item:first-of-type {
+  order: 1;
+  border: 1px solid var(--primary-color);
+}
+
+.agent-communities.block .cards-list .cards-item-body h4 {
+  padding-top: 5rem;
+  color: var(--white);
+  text-align: center;
+  font-weight: var(--font-weight-bold);
+  height: 100%;
+  text-transform: uppercase;
+  font-size: var(--heading-font-size-s);
+  filter: drop-shadow(0 0 2px var(--black));
+  background: linear-gradient(transparent, transparent, rgba(0 0 0 / 50%));
+}
+
+.agent-communities.block .cards-list .cards-item-body h4:hover {
+  background: unset;
+}
+
+.agent-communities.block .cards-list .cards-item-body h4::before {
+  font-size: var(--heading-font-size-m);
+  font-weight: var(--font-weight-bold);
+  content: 'Explore ';
+}
+
+.agent-communities.block .cards-list .cards-item:first-of-type h4 {
+  color: var(--primary-color);
+  background: unset;
+  filter: unset;
+}
+
+.agent-communities.block .hero-item {
+  margin: 10px 10px 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.agent-communities.block .hero-item img {
+  width: 100%;
+  height: fit-content;
+  object-fit: cover;
+  margin-bottom: 10px;
+  background-position: center 70%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.agent-communities.block .hero-item-explore {
+  text-transform: uppercase;
+  color: var(--primary-color);
+  border: solid 1px var(--primary-color);
+  margin: auto;
+  padding: .5rem .75rem;
+  text-decoration: none;
+  font-size: var(--body-font-size-xs);
+  font-weight: var(--font-weight-bold);
+}
+
+.agent-communities.block .hero-item-explore:hover {
+  color: var(--primary-light);
+  background-color: var(--primary-color);
+}
+
+.agent-communities.block .hero-item-heading {
+  text-transform: uppercase;
+  font-size: var(--body-font-size-s);
+  letter-spacing: 3.2px;
+  font-weight: var(--font-weight-bold);
+}
+
+.agent-communities.block .hero-item-bio {
+  font-size: var(--body-font-size-s);
+  line-height: var(--line-height-m);
+  margin-top: 0.5rem;
+}
+
+.agent-communities.block .cards-list .cards-item-body {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+}
+
+.agent-communities.block .cards-list .cards-item-body:hover {
+  width: calc(100% + var(--zoom));
+  height: calc(100% + var(--zoom));
+  margin: calc(0px - var(--zoom)/2);
+  transition: margin var(--anim-speed) ease-in-out, width var(--anim-speed) ease-in-out, height var(--anim-speed) ease-in-out;
+}
+
+.agent-communities.block .agent-communities-loader {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 50%;
+  height: 100%;
+  width: 100%;
+  max-width: 400px;
+  transform: translateX(-50%);
+  margin: 0 auto;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 2s linear;
+  z-index: 2
+}
+
+.agent-communities.block.loading .agent-communities-loader {
+  opacity: 1;
+  visibility: visible;
+  transition: all 2s linear;
+}
+
+.agent-communities.block .agent-communities-loader .animation {
+  position: relative;
+  width: 100%;
+}
+
+@keyframes pulse {
+  from {
+    border: 0 solid white;
+  }
+
+  to {
+    border: 75px solid white
+  }
+}
+
+.agent-communities.block .agent-communities-loader .pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  animation: linear 2s infinite alternate pulse;
+  z-index: 2;
+}
+
+.agent-communities.block .agent-communities-loader picture {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-bottom: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.agent-communities.block .agent-communities-loader picture img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-position: center;
+  object-fit: cover;
+}
+
+@media (min-width: 600px) {
+  .agent-communities.block .cards-list {
+    --columns: 2;
+  }
+
+  .agent-communities.block .hero-item img {
+    height: 18.5rem;
+  }
+
+  .agent-communities.block .hero-item-explore {
+    padding: .85rem 1.15rem;
+    font-size: var(--body-font-size-s);
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+
+  .agent-communities.block .cards-list .cards-item-body h4 {
+    font-size: var(--heading-font-size-m);
+  }
+
+  .agent-communities.block .hero-item-heading {
+    color: var(--black);
+    padding: 1rem 2rem 0 0;
+    background: var(--white);
+    width: fit-content;
+    min-width: 18.75rem;
+  }
+
+  .agent-communities.block .hero-item-heading,
+  .agent-communities.block .hero-item-bio,
+  .agent-communities.block .hero-item-explore {
+    position: relative;
+    top: -3.125rem;
+  }
+
+  .agent-communities.block .hero-item {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  .agent-communities.block .cards-list {
+    --columns: 4;
+  }
+
+  .agent-communities.block .hero-item-bio {
+    font-size: var(--body-font-size-m);
+    line-height: var(--line-height-m);
+  }
+
+  .agent-communities.block .hero-item img {
+    height: 31.25rem;
+  }
+
+  .agent-communities.block .hero-item-heading {
+    font-size: var(--body-font-size-m);
+  }
+}