Release NREL updates

.github/workflows/deploy.yml

@@ -14,10 +14,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set node version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 16.18.0
 
@@ -28,7 +28,7 @@ jobs:
           npx ng build
 
       - name: Deploy Main Site
-        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        uses: JamesIves/github-pages-deploy-action@v4.6.4
         if: github.ref == 'refs/heads/main'
         with:
           branch: gh-pages
@@ -53,7 +53,7 @@ jobs:
           aws s3 sync --delete ./dist s3://${{ secrets.AWS_STAGING_BUCKET }}
 
       - name: Deploy NREL
-        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        uses: JamesIves/github-pages-deploy-action@v4.6.4
         if: github.ref == 'refs/heads/nrel'
         with:
           repository-name: BuildingEnergyTools/tools-website-nrel
@@ -62,7 +62,7 @@ jobs:
           token: ${{ secrets.DEPLOY_STAGING_KEY }}
 
       - name: Deploy LBNL
-        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        uses: JamesIves/github-pages-deploy-action@v4.6.4
         if: github.ref == 'refs/heads/lbnl'
         with:
           repository-name: BuildingEnergyTools/tools-website-lbnl
@@ -71,7 +71,7 @@ jobs:
           token: ${{ secrets.DEPLOY_STAGING_KEY }}
 
       - name: Deploy PNNL
-        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        uses: JamesIves/github-pages-deploy-action@v4.6.4
         if: github.ref == 'refs/heads/pnnl'
         with:
           repository-name: BuildingEnergyTools/tools-website-pnnl

.pre-commit-config.yaml

@@ -8,7 +8,7 @@ exclude: |
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.4.0
+    rev: v4.6.0
     hooks:
       - id: trailing-whitespace
       - id: check-added-large-files
@@ -24,7 +24,7 @@ repos:
       - id: pretty-format-json
         args: ["--autofix", "--no-sort-keys", "--no-ensure-ascii"]
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.4
+    rev: v4.0.0-alpha.8
     hooks:
       - id: prettier
         # for now ignoring html, css, scss, javascript

README.md

@@ -59,3 +59,7 @@ To manually sync the website with the S3 bucket, configure permissions for using
 ng build
 aws s3 sync dist s3://nrel-btodatatools-web-prod-bucket
 ```
+
+## Subdomain management
+
+There are three subdomains on GitHub that are used to view the website before pushing to develop and main.

src/app/app-routing.module.ts

@@ -74,6 +74,7 @@ const routes: Routes = [{
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     scrollPositionRestoration: 'enabled',
+    anchorScrolling: 'enabled',
     useHash: true
   })],
   exports: [RouterModule]

src/app/app.component.html

@@ -1,3 +1,5 @@
+<!-- <a class="skip-link" [routerLink]="[currentUrl]" [fragment]="'maincontent'" >Skip to Main Content</a> -->
+<a class="skip-link" href="#maincontent">Skip to Main Content</a>
 <app-header></app-header>
 <app-menu></app-menu>
 <main fxFlex="grow" id="maincontent">

src/app/app.component.scss

@@ -1,9 +1,27 @@
 @import "theme";
 
+*:focus {
+  outline: 2px solid #005FCC;
+}
+
 :host {
   display: flex;
   flex-direction: column !important;
   /*max-width: $maxWidth;*/
   min-height: 100%;
   margin: 0 auto;
 }
+
+.skip-link {
+  background: #ffff;
+  height: 30px;
+  left: 50%;
+  padding: 4px;
+  position: absolute;
+  transform: translateY(-100%);
+  transition: transform 0.3s;
+}
+
+.skip-link:focus {
+  transform: translateY(0%);
+}

src/app/app.component.ts

@@ -10,7 +10,7 @@ import { appTitle, Constants } from '@shared/classes/constants';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-
+  currentUrl: any = ''
   constructor(
     public router: Router,
     private titleService: TitleService
@@ -24,6 +24,11 @@ export class AppComponent {
         } else {
           titleService.setTitle(appTitle);
         }
+        if (event.url != '') {
+          this.currentUrl = event.url;
+        } else {
+          this.currentUrl ='';
+        }
       }
     });
   }

src/app/header/header.component.html

@@ -13,11 +13,11 @@ <h1 routerLink="/" class="title">Building Performance Tools</h1>
             <div class="navbar-brand">
               <span><img src="assets/images/doe-eere-logo.png" alt="" usemap="#logo" class="banner-logo">
                 <map name="logo">
-                  <area shape="rect" coords="1,1,198,20" href="https://www.energy.gov/" alt="Energy.gov">
-                  <area shape="rect" coords="2,22,198,75" href="https://www.energy.gov/eere/office-energy-efficiency-renewable-energy" alt="Office of Energy Efficiency and Renewable Energy">
+                  <area shape="rect" class="focus" coords="1,1,198,20" href="https://www.energy.gov/" alt="Energy.gov">
+                  <area shape="rect" class="focus" coords="2,22,198,75" href="https://www.energy.gov/eere/office-energy-efficiency-renewable-energy" alt="Office of Energy Efficiency and Renewable Energy">
                 </map>
               </span>
-              <span class="banner-title"><a routerLink="/">Building Data Tools</a></span>
+              <span class="banner-title"><a routerLink="/" class="focus">Building Data Tools</a></span>
             </div>
           </div>
         </div>

src/app/header/header.component.scss

@@ -1,5 +1,11 @@
 @import "theme";
 
+.focus {
+  &:focus {
+    outline: 2px solid #005FCC;
+  }
+}
+
 .top-header {
   background-color: #094f58;
   background-image: url("/assets/images/datatools_header.jpg");

src/app/home/graphic/graphic.component.html

@@ -2,43 +2,45 @@
   <div class="col-type-4" fxLayout="column">
     <div class="col-bkgnd-4">
       <div class="header4">
-        <h3 class="header">GOALS & OUTCOMES</h3>
+        <h2 class="header">GOALS & OUTCOMES</h2>
       </div>
     </div>
 
     <div class="goals-cards" fxLayout="row wrap" fxLayout.xs="column">
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g1" routerLink="/goals/analyze" (mouseenter)="mouseEnter('g1')" (mouseleave)="mouseLeave('g1')" [ngClass]="{'opaque': hovers.g2 || hovers.g3 || hovers.g4}">
+        <mat-card class="goals-card-pad" id="g1" (mouseenter)="mouseEnter('g1')" (mouseleave)="mouseLeave('g1')" [ngClass]="{'opaque': hovers.g2 || hovers.g3 || hovers.g4}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/com-resstock-outcomes-icon.svg" alt="ComStock & ResStock outcomes icon"></div>
-            <p class="card-text">Assess Impacts and Identify New Opportunities</p>
+            <p class="card-text">
+              <a routerLink="/goals/analyze">Assess Impacts and Identify New Opportunities</a></p>
           </mat-card-content>
         </mat-card>
       </div>
 
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g2" routerLink="/goals/target" (mouseenter)="mouseEnter('g2')" (mouseleave)="mouseLeave('g2')" [ngClass]="{'opaque': hovers.g1 || hovers.g3 || hovers.g4}">
+        <mat-card class="goals-card-pad" id="g2" (mouseenter)="mouseEnter('g2')" (mouseleave)="mouseLeave('g2')" [ngClass]="{'opaque': hovers.g1 || hovers.g3 || hovers.g4}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/better-outcomes-icon.svg" alt="BETTER outcomes icon"></div>
-            <p class="card-text">Identify Measures and Suggest Areas for Deeper Evaluations</p>
+            <p class="card-text">
+              <a routerLink="/goals/target">Identify Measures and Suggest Areas for Deeper Evaluations</a></p>
           </mat-card-content>
         </mat-card>
       </div>
 
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g3" routerLink="/goals/compliance" (mouseenter)="mouseEnter('g3')" (mouseleave)="mouseLeave('g3')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g4}">
+        <mat-card class="goals-card-pad" id="g3" (mouseenter)="mouseEnter('g3')" (mouseleave)="mouseLeave('g3')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g4}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/assetscore-outcomes-icon.svg" alt="Asset Score Outcomes icon"></div>
-            <p class="card-text">Bring Buildings into Compliance with EUI and GHGe Requirements</p>
+            <p class="card-text"><a routerLink="/goals/compliance">Bring Buildings into Compliance with EUI and GHGe Requirements</a></p>
           </mat-card-content>
         </mat-card>
       </div>
 
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g4" routerLink="/goals/customize" (mouseenter)="mouseEnter('g4')" (mouseleave)="mouseLeave('g4')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g3}">
+        <mat-card class="goals-card-pad" id="g4" (mouseenter)="mouseEnter('g4')" (mouseleave)="mouseLeave('g4')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g3}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/thirdparty-outcomes-icon.svg" alt="third-party outcomes icon"></div>
-            <p class="card-text">Customize Your Workflow with CRM, Data Visualizations, and More</p>
+            <p class="card-text"><a routerLink="/goals/customize">Customize Your Workflow with CRM, Data Visualizations, and More</a></p>
           </mat-card-content>
         </mat-card>
       </div>
@@ -49,7 +51,7 @@ <h3 class="header">GOALS & OUTCOMES</h3>
     <div fxFlex="calc(33.33% - 5px)" fxFlex.xs="100%" fxLayout="column" class="col-type-1">
       <div class="col-bkgnd-1">
         <div class="header1">
-          <h3 class="header">DATA COLLECTION & REPORTING</h3>
+          <h2 class="header">DATA COLLECTION & REPORTING</h2>
         </div>
       </div>
 
@@ -87,7 +89,7 @@ <h3 class="header">DATA COLLECTION & REPORTING</h3>
     <div fxFlex="calc(33.33% - 5px)" fxFlex.xs="100%" fxLayout="column" class="col-type-2">
       <div class="col-bkgnd-2">
         <div class="header2">
-          <h3 class="header">MANAGEMENT & COMPLIANCE</h3>
+          <h2 class="header">MANAGEMENT & COMPLIANCE</h2>
         </div>
       </div>
 
@@ -121,7 +123,7 @@ <h3 class="header">MANAGEMENT & COMPLIANCE</h3>
     <div fxFlex="calc(33.33% - 5px)" fxFlex.xs="100%" fxLayout="column" class="col-type-3">
       <div class="col-bkgnd-3">
         <div class="header3">
-          <h3 class="header">ANALYSIS & EVALUATION</h3>
+          <h2 class="header">ANALYSIS & EVALUATION</h2>
         </div>
       </div>
 

src/app/home/graphic/graphic.component.scss

@@ -14,13 +14,17 @@
   height: 0;
 }
 
+.card-text {
+  a {
+    color: #000;
+  }
+}
+
 .mat-card {
-  cursor: pointer;
   transition: filter 200ms ease-in-out;
 }
 
 .mat-card-content {
-  cursor: pointer;
   margin-bottom: 0;
 }
 
@@ -34,9 +38,17 @@
 
 .header {
   padding: 1.7rem 10px 0;
-  font-weight: 500;
+  font-weight: 400;
   color: white;
   text-align: center;
+  h2 {
+    color: white;
+    font-family: "Roboto", sans-serif;
+    font-size: 1.8rem;
+    line-height: 3rem;
+    padding-left: 4rem;
+    padding-top: 10px;
+  }
 }
 
 .header1,

src/app/home/home.component.html

@@ -2,23 +2,12 @@
   <div class="home-intro-text2 my-2">
     <div fxLayout="row" fxLayoutAlign="space-around" class="top-side" fxFlex="90%" fxFlexOffset="5%">
       <p>The U.S. Department of Energy developed a comprehensive suite of tools for accessing, managing, analyzing and sharing building energy data. This website describes how they can be used to support <a href="https://www.epa.gov/statelocalenergy/benchmarking-and-building-performance-standards-policy-toolkit">building performance standards (BPS) policies</a>, one of many possible use cases.</p>
-
-      <!--<div [fxFlex]="45" class="left-side" fxLayout="column">
-        <p>More local governments are choosing to implement Building Performance Standard (BPS) policies to meet their energy efficiency and climate-related goals. BPS policies go beyond benchmarking, requiring owners of buildings covered by the policy to conduct an energy audit and install recommended upgrades in pursuit of a minimum performance standard.</p>
-
-        <p>These mandates often lack funding for implementation, leaving public officials to do their best without additional staff or resources. This can result in a heavy reliance on manual data handling processes – processes which are time consuming and prone to error.</p>
-      </div>
-      <div [fxFlex]="50" fxLayout="column">
-        <p>To reduce the burden of BPS implementation, the U.S. Department of Energy (DOE) and its National Laboratory partners created a suite of powerful, interoperable, free and open-source data tools. These tools snap directly into existing workflows and make it easy to collect, manage, analyze, and share the building-related data needed for a BPS policy.</p>
-
-        <p>Sustainability leaders like Washington, D.C. and others are already using these tools to meet their goals. And since they're backed by DOE, you can count on long-term maintenance and support.</p>
-      </div>-->
     </div>
   </div>
 
   <div fxLayout="row" fxLayout.xs="column" class="interactive-map-div">
     <div fxLayoutAlign="space-around" fxFlex.gt-xs="35%">
-      <h2>Find Your Tool or Workflow</h2>
+      <h1>Find Your Tool or Workflow</h1>
     </div>
     <div fxLayoutAlign="space-around" fxFlex.gt-xs="65%">
       <p>Mouse over and click on the tools below to get more information.<br>When you're ready, follow the 'Learn More' button to see just how easy data can be.</p>
@@ -29,27 +18,27 @@ <h2>Find Your Tool or Workflow</h2>
 
   <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px" class="bottom-boxes">
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="standardize" routerLink="/data-standardization">
-        <h3>Get started with<br>data standardization</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="standardize">
+        <h2><a routerLink="/data-standardization"><i class="fas fa-exchange-alt"></i> Get started with<br>data standardization</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="help" routerLink="/help-desk">
-        <h3>Help Desk</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="help">
+        <h2><a routerLink="/help-desk"><i class="fas fa-question"></i> Contact the <br/>Help Desk</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="explore-tools" routerLink="/analysis-evaluation">
-        <h3>Explore the analysis tools</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="explore-tools">
+        <h2><a routerLink="/analysis-evaluation"><i class="fas fa-search"></i> Explore the <br/>analysis tools</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="dev" routerLink="/developers">
-        <h3>Find information for developers</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="dev">
+        <h2><a routerLink="/developers"><i class="fas fa-laptop-code"></i> Find information <br/>for developers</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
   </div>