gridsome.server.js

// Server API makes it possible to hook into various parts of Gridsome
// on server-side and add custom data to the GraphQL data layer.
// Learn more: https://gridsome.org/docs/server-api/

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

/**
 * From fetching CSV data:
 * https://gridsome.org/docs/fetching-data/#csv
 */
const { readFileSync, copyFileSync } = require('fs');
const build = require('gridsome/lib/build');
const parse = require('csv-parse/sync').parse;
const pageSocialConfigsData = require('./src/constants/page-social-images/page-social-configs.json');
const buildingOwnersData = require('./src/constants/building-owners.json');
const propertyTypesData = require('./src/data/dist/property-types.json');
const { slugifyPropertyType } = require('./src/constants/property-type-helpers.js');

const DataDirectory = './src/data/dist/';

// The search autocomplete index is generated by the data pipeline (see
// src/data/scripts/generate_search_index.py) and committed to src/data/dist.
// We copy it into static/ (served at the site root) at build time so the
// autocomplete can fetch it on demand rather than bundling ~3.5k records into
// the initial page JS. The static/ copy is gitignored since it's generated.
const StaticDirectory = './static/';
const SearchIndexFile = 'building-search-index.csv';

const BuildingEmissionsDataFile = 'building-benchmarks.csv';
const HistoricBenchmarkingDataFile = 'benchmarking-all-years.csv';
const WardStatsDataFile = 'ward-stats.csv';

// Get building owner IDs from the centralized JSON file
const BuildingOwnerIds = Object.keys(buildingOwnersData);

module.exports = function (api) {
  // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
  api.loadSource(async (actions) => {
    loadBuildingBenchmarkData(actions);
    loadHistoricBenchmarkDat(actions);
    loadWardStatsData(actions);
  });

  /**
   * Use the Pages API to create custom templates for building owners and wards
   * @see https://gridsome.org/docs/pages-api
   */
  api.createPages(({ createPage }) => {
    // Create pages for building owners. This could be a dynamic route, but making it this way
    // should let them get statically built as expected
    BuildingOwnerIds.forEach((ownerId) => {
      createPage({
        path: `/owner/${ownerId}`,
        component: './src/templates/BuildingOwner.vue',
        context: { ownerId },
      });
    });

    // Create pages for each of Chicago's 50 Wards
    const ChicagoWardCount = 50;

    for (var ward = 1; ward <= ChicagoWardCount; ward++) {
      createPage({
        path: `/ward/${ward}`,
        component: './src/templates/Ward.vue',
        // In the CSV the ward is a string, so we pass that to the context as well for GraphQL
        context: { ward: ward.toString() },
      });
    }

    // Create pages for each property type
    propertyTypesData.propertyTypes.forEach((propertyType) => {
      const slug = slugifyPropertyType(propertyType);

      createPage({
        path: `/property-type/${slug}`,
        component: './src/templates/PropertyType.vue',
        context: { propertyType },
      });
    });

    // Create dev-only tooling and social card routes (only in development). These pages live in
    // src/templates rather than src/pages so they aren't picked up by Gridsome's automatic
    // filesystem routing, which would build them (and run their queries) on every build
    // regardless of NODE_ENV.
    if (process.env.NODE_ENV !== 'production') {
      // Create the building image uploader admin page
      createPage({
        path: '/building-image-uploader',
        component: './src/templates/BuildingImageUploader.vue',
      });

      // Create page social card routes
      const pageIds = Object.keys(pageSocialConfigsData);

      pageIds.forEach(pageId => {
        createPage({
          path: `/page-social-card/${pageId}`,
          component: './src/templates/social-cards/PageSocialCardPage.vue',
          context: {
            pageId: pageId
          }
        });
      });

      // Create owner social card routes
      BuildingOwnerIds.forEach(ownerId => {
        createPage({
          path: `/owner-social-card/${ownerId}`,
          component: './src/templates/social-cards/OwnerSocialCardPage.vue',
          context: {
            ownerId: ownerId
          }
        });
      });

      // Create property type social card routes
      propertyTypesData.propertyTypes.forEach((propertyType) => {
        const slug = slugifyPropertyType(propertyType);

        createPage({
          path: `/property-type-social-card/${slug}`,
          component: './src/templates/social-cards/PropertyTypeSocialCardPage.vue',
          context: {
            propertyType: propertyType
          }
        });
      });
    }
  });
};

/**
 * Load in the building benchmark data
 *
 * @param {unknown} actions The actions class?
 */
function loadBuildingBenchmarkData(actions) {
  const latestBenchmarksRaw = readFileSync(
    `${DataDirectory}${BuildingEmissionsDataFile}`,
    'utf8',
  );

  /**
   * Load in building benchmarks and expose as Buildings collection
   */
  const LatestBenchmarksData = parse(latestBenchmarksRaw, {
    columns: true,
    skip_empty_lines: true,
  });

  const collection = actions.addCollection({ typeName: 'Building' });

  // If we get a duplicate node warning, notate the name here, and then we tack on the ID to the
  // URL so '/building/salvation-army` becomes `/building/salvation-army-1234`. Gridsome only logs
  // a console warning (not a catchable error) when a node's path collides with an existing one,
  // then silently drops the node - so any collision NOT in this list must be caught below and
  // fail the build loudly, rather than silently hiding a building.
  const duplicateSlugs = [
    'illinois-institute-of-technology',
    'bricktown-square',
    'the-woodlands-of-bronzeville-condominium-association',
    'west-side-realty-corporation',
    'gateway-centre',
    'salvation-army',
    'left-bank-at-k-station',
    'tech-business-center',
    'iit-research-tower',
    'oakwood-shores-2d',
    // Newly surfaced by the Never Submitted Buildings work - these are multi-building
    // complexes where previously only one building in the pair had reported data
    'brompton',
    'kenwin-venture-lllp',
    "the-buyer's-market-incorporated",
    'armour',
    'sutherland',
    '24-east-washington-street',
    'park-boulevard',
    'encuentro-square',
  ];

  // Tracks every slug we've assigned so far this build, so we can catch NEW collisions (ones not
  // yet in duplicateSlugs above) immediately instead of letting Gridsome silently drop the node
  const seenSlugs = new Set();

  for (const building of LatestBenchmarksData) {
    // Make a slugSource that is the property name or the address as a fallback (skip one letter
    // names, e.g. '-)
    building.slugSource =
      building.PropertyName.length > 1
        ? building.PropertyName
        : building.Address;

    // The csv parse returns everything as strings, so explicitly parse float columns so GraphQL
    // loads them properly and can apply filters (like `TotalGHGEmissions: { gt: 1000.0 }`)
    // TODO: Parse all our float and int columns so GraphQL can then filter them
    const buildingFloatCols = [
      'DistrictChilledWaterUse',
      'DistrictSteamUse',
      'ElectricityUse',
      'GHGIntensity',
      'GrossFloorArea',
      'NaturalGasUse',
      'TotalGHGEmissions',
    ];

    buildingFloatCols.forEach((col) => {
      building[col] = parseFloat(building[col]);
    });

    // Parse integer columns for GraphQL filtering
    const buildingIntCols = [
      'FirstYearReported',
      'LastYearReported',
    ];

    buildingIntCols.forEach((col) => {
      if (building[col] && building[col] !== '') {
        building[col] = parseInt(building[col], 10);
      } else {
        building[col] = null;
      }
    });

    if (!building.slugSource || typeof building.slugSource !== 'string') {
      throw new Error('No building slug source (name or address)!', building);
    }

    if (
      duplicateSlugs.includes(
        building.slugSource.toLowerCase().replaceAll(' ', '-'),
      )
    ) {
      building.slugSource = building.slugSource + building.ID;
    }

    const normalizedSlug = building.slugSource
      .toLowerCase()
      .replaceAll(' ', '-');

    // Fail the build loudly instead of letting Gridsome silently drop the node - a collision
    // here means a building would otherwise vanish from the site with no warning
    if (seenSlugs.has(normalizedSlug)) {
      throw new Error(
        `Duplicate building slug "${normalizedSlug}" (building ID ${building.ID}) - add its ` +
          "base name/address to the duplicateSlugs list in gridsome.server.js so it gets " +
          'disambiguated with its ID instead of silently overwriting another building.',
      );
    }
    seenSlugs.add(normalizedSlug);

    collection.addNode(building);
  }

  copyBuildingSearchIndexToStatic();
}

/**
 * Copy the pipeline-generated search autocomplete index from src/data/dist into
 * the static folder, so the search UI can fetch it at the site root instead of
 * bundling it into page JS. The index itself is generated by the data pipeline
 * (src/data/scripts/generate_search_index.py), not here.
 */
function copyBuildingSearchIndexToStatic() {
  copyFileSync(
    `${DataDirectory}${SearchIndexFile}`,
    `${StaticDirectory}${SearchIndexFile}`,
  );
}

/**
 * Load in pre-computed ward-level stats
 *
 * @param {unknown} actions The actions class?
 */
function loadWardStatsData(actions) {
  const wardStatsRaw = readFileSync(`${DataDirectory}${WardStatsDataFile}`, 'utf8');
  const wardStatsData = parse(wardStatsRaw, { columns: true, skip_empty_lines: true });

  const collection = actions.addCollection({ typeName: 'WardStats' });

  for (const row of wardStatsData) {
    // Shape must match IWardStats in src/components/WardsTable.vue
    collection.addNode({
      Ward: parseInt(row['Ward'], 10),
      CompliantBuildings: parseInt(row['Compliant Buildings'], 10),
      TotalBuildings: parseInt(row['Total Buildings'], 10),
      TotalGHGEmissions: parseFloat(row['Total GHG Emissions (tons CO2 eq.)']),
      AvgGHGIntensity: parseFloat(row['Avg GHG Intensity (kg CO2 eq./sqft)']),
      TotalSquareFootage: parseFloat(row['Total Square Footage']),
      AvgBuildingAge: row['Avg Building Age (years)']
        ? parseFloat(row['Avg Building Age (years)'])
        : null,
    });
  }
}

/**
 * Load in the historic benchmark data
 *
 * @param {unknown} actions The actions class?
 */
function loadHistoricBenchmarkDat(actions) {
  const historicBenchmarksRaw = readFileSync(
    `${DataDirectory}${HistoricBenchmarkingDataFile}`,
    'utf8',
  );

  /**
   * Load in building benchmarks and expose as Buildings collection
   */
  const HistoricBenchmarksData = parse(historicBenchmarksRaw, {
    columns: true,
    skip_empty_lines: true,
  });

  const collection = actions.addCollection({ typeName: 'Benchmark' });

  for (const benchmark of HistoricBenchmarksData) {
    // The csv parse returns everything as strings, so explicitly parse float columns so GraphQL
    // loads them properly and can apply filters (like `TotalGHGEmissions: { gt: 1000.0 }`)
    // TODO: Parse all our float and int columns so GraphQL can then filter them
    const historicFloatCols = [
      'DistrictChilledWaterUse',
      'DistrictSteamUse',
      'ElectricityUse',
      'GHGIntensity',
      'GrossFloorArea',
      'NaturalGasUse',
      'SourceEUI',
      'TotalGHGEmissions',
    ];

    historicFloatCols.forEach((col) => {
      benchmark[col] = parseFloat(benchmark[col]);
    });

    benchmark.DataYear = parseInt(benchmark.DataYear);

    collection.addNode(benchmark);
  }
}