Optimize Build

src/pages/AllElectric.vue

@@ -57,7 +57,7 @@ export default class AllElectric extends Vue {}
 </script>
 
 <!-- If this query is updated, make sure to update PageSocialCard as well -->
-<static-query>
+<page-query>
   query {
     allBuilding(
       filter: {
@@ -106,15 +106,15 @@ export default class AllElectric extends Vue {}
       }
     }
   }
-</static-query>
+</page-query>
 
 <template>
   <DefaultLayout main-class="layout -full-width">
     <BuildingsHero
-      :buildings="$static.allBuilding.edges.map((edge) => edge.node)"
+      :buildings="$page.allBuilding.edges.map((edge) => edge.node)"
     >
       <h1 id="main-content" tabindex="-1">
-        Chicago's {{ $static.allBuilding.edges.length }} All Electric Buildings
+        Chicago's {{ $page.allBuilding.edges.length }} All Electric Buildings
       </h1>
     </BuildingsHero>
 
@@ -135,12 +135,12 @@ export default class AllElectric extends Vue {}
       <DataDisclaimer />
 
       <BuildingsMap
-        :buildings="$static.allBuilding.edges"
+        :buildings="$page.allBuilding.edges"
         filter-label="all electric"
       />
 
       <BuildingsTable
-        :buildings="$static.allBuilding.edges"
+        :buildings="$page.allBuilding.edges"
         :show-square-footage="true"
       />
 

src/pages/BiggestBuildings.vue

@@ -38,7 +38,7 @@ export default class BiggestBuildings extends Vue {
 </script>
 
 <!-- If this query is updated, make sure to update PageSocialCard as well -->
-<static-query>
+<page-query>
   query {
     allBuilding(sortBy: "GrossFloorArea", limit: 50) {
       edges {
@@ -74,15 +74,15 @@ export default class BiggestBuildings extends Vue {
       }
     }
   }
-</static-query>
+</page-query>
 
 <template>
   <DefaultLayout main-class="layout -full-width">
     <BuildingsHero
-      :buildings="$static.allBuilding.edges.map((edge) => edge.node)"
+      :buildings="$page.allBuilding.edges.map((edge) => edge.node)"
     >
       <h1 id="main-content" tabindex="-1">
-        Top {{ $static.allBuilding.edges.length }} Buildings By Square Footage
+        Top {{ $page.allBuilding.edges.length }} Buildings By Square Footage
       </h1>
     </BuildingsHero>
 
@@ -100,7 +100,7 @@ export default class BiggestBuildings extends Vue {
       <DataDisclaimer />
 
       <BuildingsTable
-        :buildings="$static.allBuilding.edges"
+        :buildings="$page.allBuilding.edges"
         :show-square-footage="true"
       />
 

src/pages/CleanestBuildings.vue

@@ -39,7 +39,7 @@ export default class CleanestBuildings extends Vue {
 </script>
 
 <!-- If this query is updated, make sure to update PageSocialCard as well -->
-<static-query>
+<page-query>
   query {
     allBuilding(
       filter: {
@@ -86,15 +86,15 @@ export default class CleanestBuildings extends Vue {
       }
     }
   }
-</static-query>
+</page-query>
 
 <template>
   <DefaultLayout main-class="layout -full-width">
     <BuildingsHero
-      :buildings="$static.allBuilding.edges.map((edge) => edge.node)"
+      :buildings="$page.allBuilding.edges.map((edge) => edge.node)"
     >
       <h1 id="main-content" tabindex="-1">
-        Cleanest {{ $static.allBuilding.edges.length }} Buildings by Greenhouse
+        Cleanest {{ $page.allBuilding.edges.length }} Buildings by Greenhouse
         Gas Intensity
       </h1>
     </BuildingsHero>
@@ -115,7 +115,7 @@ export default class CleanestBuildings extends Vue {
 
       <DataDisclaimer />
 
-      <BuildingsTable :buildings="$static.allBuilding.edges" />
+      <BuildingsTable :buildings="$page.allBuilding.edges" />
 
       <DataSourceFootnote />
     </div>

src/pages/GeothermalBuildings.vue

@@ -32,16 +32,16 @@ interface IBuildingEdge {
 })
 export default class GeothermalBuildings extends Vue {
   /** Set by Gridsome to results of GraphQL query */
-  readonly $static!: { allBuilding: { edges: Array<IBuildingEdge> } };
+  readonly $page!: { allBuilding: { edges: Array<IBuildingEdge> } };
 
   buildingsFiltered: Array<IBuildingEdge> = [];
 
   created(): void {
     validateTaggedBuildings(
       BuildingTags.hasGeothermalHeatPump,
-      this.$static.allBuilding.edges.map((e) => e.node.ID.toString()),
+      this.$page.allBuilding.edges.map((e) => e.node.ID.toString()),
     );
-    this.buildingsFiltered = this.$static.allBuilding.edges;
+    this.buildingsFiltered = this.$page.allBuilding.edges;
   }
 }
 </script>
@@ -51,7 +51,7 @@ export default class GeothermalBuildings extends Vue {
   performance optimization. The IDs MUST match buildings tagged with hasGeothermalHeatPump in
   buildings-custom-info.constant.vue (validated at runtime via validateTaggedBuildings).
 -->
-<static-query>
+<page-query>
   query {
     # PERFORMANCE OPTIMIZATION: Hard-coded filter for buildings with hasGeothermalHeatPump tag
     # These IDs MUST match buildings-custom-info.constant.vue (validated at runtime)
@@ -87,7 +87,7 @@ export default class GeothermalBuildings extends Vue {
       }
     }
   }
-</static-query>
+</page-query>
 
 <template>
   <DefaultLayout>

src/pages/LargeOwners.vue

@@ -32,7 +32,7 @@ export default class LargeOwners extends Vue {
 }
 </script>
 
-<static-query>
+<page-query>
   query {
     allBuilding(sortBy: "GHGIntensity", limit: 50) {
       edges {
@@ -64,7 +64,7 @@ export default class LargeOwners extends Vue {
       }
     }
   }
-</static-query>
+</page-query>
 
 <template>
   <DefaultLayout>

src/pages/LatestUpdates.vue

@@ -34,7 +34,7 @@ export default class LatestUpdates extends Vue {
   readonly Links: typeof Links = Links;
 
   /** Set by Gridsome to results of GraphQL query */
-  readonly $static!: {
+  readonly $page!: {
     newBuildings: { edges: Array<IBuildingNode> };
     stoppedReporting: { edges: Array<IBuildingNode> };
     consistentReporters: { totalCount: number };
@@ -47,14 +47,14 @@ export default class LatestUpdates extends Vue {
 
   get newBuildings(): Array<{ node: IBuilding }> {
     // Already filtered by GraphQL, just sort by square footage
-    return this.$static.newBuildings.edges
+    return this.$page.newBuildings.edges
       .slice()
       .sort((a, b) => b.node.GrossFloorArea - a.node.GrossFloorArea);
   }
 
   get consistentReportersCount(): number {
     // Already calculated by GraphQL totalCount
-    return this.$static.consistentReporters.totalCount;
+    return this.$page.consistentReporters.totalCount;
   }
 
   get netChangeInReporting(): number {
@@ -63,14 +63,14 @@ export default class LatestUpdates extends Vue {
 
   get stoppedReportingBuildings(): Array<{ node: IBuilding }> {
     // Already filtered by GraphQL, just sort by square footage
-    return this.$static.stoppedReporting.edges
+    return this.$page.stoppedReporting.edges
       .slice()
       .sort((a, b) => b.node.GrossFloorArea - a.node.GrossFloorArea);
   }
 }
 </script>
 
-<static-query>
+<page-query>
   query {
     # New buildings: FirstYearReported equals latest year (2023)
     newBuildings: allBuilding(filter: { FirstYearReported: { eq: 2023 } }) {
@@ -126,7 +126,7 @@ export default class LatestUpdates extends Vue {
     FirstYearReported
     LastYearReported
   }
-</static-query>
+</page-query>
 
 <template>
   <DefaultLayout>