merge

.github/workflows/playwright.yml

@@ -5,7 +5,7 @@ on:
 jobs:
   test_setup:
     name: Test setup
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     outputs:
       preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
     steps:
@@ -19,16 +19,16 @@ jobs:
     needs: test_setup
     name: Test
     timeout-minutes: 60
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version-file: '.nvmrc'
     - name: Install dependencies
-      run: yarn
+      run: yarn install --immutable
     - name: Install Playwright Browsers
-      run: yarn playwright install --with-deps
+      run: yarn playwright install --with-deps chromium firefox webkit
     - name: Run Playwright tests
       run: yarn playwright test
       env:

CHANGELOG.md

@@ -21,7 +21,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed -->
 
-
 Unreleased
 
 ### Added
@@ -35,6 +34,27 @@ Unreleased
 
 ### Removed
 
+
+Released 25/09/2023
+
+### Added
+
+- Blog post tags
+
+
+### Changed
+
+- Access to Blog (news) moved from main menu to sidebar
+
+
+### Fixed
+
+- Blurry images in blog section
+
+### Removed
+
+- Link to subsections in Global Mangrove Alliance
+
 Released 23/08/2023
 
 ### Added

cloud-functions/alerts-tiler/index.js

@@ -142,7 +142,7 @@ const alertsJob = async (
   x,
   y,
   z,
-  startDate = '2020-01-01',
+  startDate = '2019-01-01',
   endDate = new Date().toISOString().split('T')[0]
 ) => {
   // First try to get data from cache in order to reduce costs

cloud-functions/fetch-alerts-heatmap/index.js

@@ -1,8 +1,8 @@
-const { BigQuery } = require("@google-cloud/bigquery");
-const axios = require("axios").default;
-const reverse = require("turf-reverse");
-const http = require("http");
-const https = require("https");
+const { BigQuery } = require('@google-cloud/bigquery');
+const axios = require('axios').default;
+const reverse = require('turf-reverse');
+const http = require('http');
+const https = require('https');
 
 const httpAgent = new http.Agent({ keepAlive: true });
 const httpsAgent = new https.Agent({ keepAlive: true });
@@ -30,16 +30,16 @@ const makeQuery = (startDate, endDate) => {
 };
 
 const serializeToGeoJSON = (data) => ({
-  type: "FeatureCollection",
-  name: "deforestation-alerts",
+  type: 'FeatureCollection',
+  name: 'deforestation-alerts',
   features: data.map((d) => ({
-    type: "Feature",
+    type: 'Feature',
     properties: {
       count: d.count,
       intensity: d.count / d.max,
     },
     geometry: {
-      type: "Point",
+      type: 'Point',
       coordinates: [d.longitude, d.latitude],
     },
   })),
@@ -56,8 +56,8 @@ const serializeToGeoJSON = (data) => ({
  * @param {Date} endDate
  */
 const alertsJob = async (
-  startDate = "2020-01-01",
-  endDate = new Date().toISOString().split("T")[0]
+  startDate = '2019-01-01',
+  endDate = new Date().toISOString().split('T')[0]
 ) => {
   // First try to get data from cache in order to reduce costs
   const cacheKey = `_${startDate}_${endDate}`;
@@ -68,7 +68,7 @@ const alertsJob = async (
   const options = {
     query: makeQuery(startDate, endDate),
     // Location must match that of the dataset(s) referenced in the query.
-    location: "US",
+    location: 'US',
   };
 
   // Run the query as a job
@@ -96,14 +96,14 @@ exports.fetchAlertsHeatmap = (req, res) => {
   // Set CORS headers for preflight requests
   // Allows GETs from any origin with the Content-Type header
   // and caches preflight response for 3600s
-  res.set("Access-Control-Allow-Origin", "*");
+  res.set('Access-Control-Allow-Origin', '*');
 
-  if (req.method === "OPTIONS") {
+  if (req.method === 'OPTIONS') {
     // Send response to OPTIONS requests
-    res.set("Access-Control-Allow-Methods", "GET");
-    res.set("Access-Control-Allow-Headers", "Content-Type");
-    res.set("Access-Control-Max-Age", "3600");
-    res.status(204).send("");
+    res.set('Access-Control-Allow-Methods', 'GET');
+    res.set('Access-Control-Allow-Headers', 'Content-Type');
+    res.set('Access-Control-Max-Age', '3600');
+    res.status(204).send('');
   } else {
     fetch();
   }

cloud-functions/fetch-alerts/index.js

@@ -1,11 +1,11 @@
-const { BigQuery } = require("@google-cloud/bigquery");
-const axios = require("axios").default;
-const reverse = require("turf-reverse");
-const mapshaper = require("mapshaper");
+const { BigQuery } = require('@google-cloud/bigquery');
+const axios = require('axios').default;
+const reverse = require('turf-reverse');
+const mapshaper = require('mapshaper');
 
-const crypto = require("crypto");
-const http = require("http");
-const https = require("https");
+const crypto = require('crypto');
+const http = require('http');
+const https = require('https');
 
 const httpAgent = new http.Agent({ keepAlive: true });
 const httpsAgent = new https.Agent({ keepAlive: true });
@@ -14,41 +14,38 @@ const bigquery = new BigQuery();
 
 const cache = {};
 
-const md5 = (x) =>
-  crypto.createHash("md5").update(JSON.stringify(x), "utf8").digest("hex");
+const md5 = (x) => crypto.createHash('md5').update(JSON.stringify(x), 'utf8').digest('hex');
 
 const getLocation = async (locationId, env) => {
   if (!locationId) return null;
-  console.log("Getting geometry from locations API");
+  console.log('Getting geometry from locations API');
   const apiUrl = {
-    production: "https://mangrove-atlas-api.herokuapp.com",
-    staging: "https://mangrove-atlas-api-staging.herokuapp.com",
+    production: 'https://mangrove-atlas-api.herokuapp.com',
+    staging: 'https://mangrove-atlas-api-staging.herokuapp.com',
   };
-  const response = await axios.get(
-    `${apiUrl[env]}/api/v2/locations/${locationId}`,
-    { httpAgent, httpsAgent }
-  );
+  const response = await axios.get(`${apiUrl[env]}/api/v2/locations/${locationId}`, {
+    httpAgent,
+    httpsAgent,
+  });
   if (response && response.data) return response.data.data;
   return null;
 };
 
 const simplifyGeoJSON = async (geoJSON) => {
-  const input = { "input.geojson": JSON.stringify(geoJSON) };
+  const input = { 'input.geojson': JSON.stringify(geoJSON) };
   const cmd =
-    "-i input.geojson -simplify dp 20% keep-shapes -clean -o output.geojson format=geojson geojson-type=Feature";
+    '-i input.geojson -simplify dp 20% keep-shapes -clean -o output.geojson format=geojson geojson-type=Feature';
 
-  const geoJSONsimp = (await mapshaper.applyCommands(cmd, input))[
-    "output.geojson"
-  ].toString();
+  const geoJSONsimp = (await mapshaper.applyCommands(cmd, input))['output.geojson'].toString();
   return geoJSONsimp;
 };
 
 const makeQuery = async (location, startDate, endDate) => {
-  let whereQuery = "";
+  let whereQuery = '';
 
   if (location) {
     const geoJSON = {
-      type: "Feature",
+      type: 'Feature',
       properties: {},
       geometry: location.geometry,
     };
@@ -76,18 +73,17 @@ const makeQuery = async (location, startDate, endDate) => {
 const alertsJob = async (locationId, startDate, endDate, env, geojson) => {
   // First try to get data from cache in order to reduce costs
   const geojson_md5 = geojson ? md5(geojson) : null;
-  const cacheKey = `${locationId || geojson_md5 || ""}_${startDate}_${endDate}`;
+  const cacheKey = `${locationId || geojson_md5 || ''}_${startDate}_${endDate}`;
   if (cache[cacheKey]) {
     console.log(`Response from cache ${cacheKey}`);
     return cache[cacheKey];
   }
 
-  const location =
-    (locationId && (await getLocation(locationId, env))) || geojson.features[0];
+  const location = (locationId && (await getLocation(locationId, env))) || geojson.features[0];
   const options = {
     query: await makeQuery(location, startDate, endDate),
     // Location must match that of the dataset(s) referenced in the query.
-    location: "US",
+    location: 'US',
   };
 
   // Run the query as a job
@@ -108,20 +104,13 @@ exports.fetchAlerts = (req, res) => {
   // Get data and return a JSON
   async function fetch() {
     try {
-      const startDate = req.query.startDate || "2020-01-01";
-      const endDate =
-        req.query.end_date || new Date().toISOString().split("T")[0];
-      const env = req.query.env || "production";
+      const startDate = req.query.startDate || '2019-01-01';
+      const endDate = req.query.end_date || new Date().toISOString().split('T')[0];
+      const env = req.query.env || 'production';
       const locationId = req.query.location_id || null;
       const geojson = (req.body && req.body.geometry) || null;
 
-      const result = await alertsJob(
-        locationId,
-        startDate,
-        endDate,
-        env,
-        geojson
-      );
+      const result = await alertsJob(locationId, startDate, endDate, env, geojson);
       res.status(200).json(result);
     } catch (error) {
       console.log(error);
@@ -132,15 +121,15 @@ exports.fetchAlerts = (req, res) => {
   // Set CORS headers for preflight requests
   // Allows GETs from any origin with the Content-Type header
   // and caches preflight response for 3600s
-  res.set("Access-Control-Allow-Origin", "*");
+  res.set('Access-Control-Allow-Origin', '*');
 
-  if (req.method === "OPTIONS") {
+  if (req.method === 'OPTIONS') {
     // Send response to OPTIONS requests
-    res.set("Access-Control-Allow-Methods", "GET");
-    res.set("Access-Control-Allow-Methods", "POST");
-    res.set("Access-Control-Allow-Headers", "Content-Type");
-    res.set("Access-Control-Max-Age", "3600");
-    res.status(204).send("");
+    res.set('Access-Control-Allow-Methods', 'GET');
+    res.set('Access-Control-Allow-Methods', 'POST');
+    res.set('Access-Control-Allow-Headers', 'Content-Type');
+    res.set('Access-Control-Max-Age', '3600');
+    res.status(204).send('');
   } else {
     fetch();
   }

package.json

@@ -59,14 +59,15 @@
     "cmdk": "0.2.0",
     "d3-format": "3.1.0",
     "date-fns": "2.30.0",
+    "diacritics": "^1.3.0",
     "framer-motion": "10.12.3",
     "fuse.js": "6.6.2",
     "input": "1.0.1",
     "lodash-es": "4.17.21",
     "mapbox-gl": "^2.13.0",
     "next": "^13.4.3",
     "popover": "2.4.1",
-    "postcss": "8.4.21",
+    "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
@@ -102,6 +103,7 @@
     "husky": "6.0.0",
     "prettier": "2.8.3",
     "prettier-plugin-tailwindcss": "0.2.1",
+    "react-icons": "4.11.0",
     "start-server-and-test": "1.12.1",
     "svg-sprite-loader": "6.0.11",
     "svgo": "3.0.2",

playwright.config.ts

@@ -9,26 +9,43 @@ import { defineConfig, devices } from '@playwright/test';
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+const PORT = process.env.PORT || 3000;
+
 export default defineConfig({
   testDir: 'tests',
+  outputDir: 'test-results',
+  timeout: 60000,
+  globalTimeout: 60000,
+  expect: {
+    timeout: 60000,
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: process.env.CI
+    ? undefined
+    : {
+        command: process.env.CI ? 'yarn build && yarn start' : 'yarn dev',
+        url: `http://localhost:${PORT}`,
+        reuseExistingServer: !process.env.CI,
+        timeout: 300000,
+      },
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: !process.env.CI,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [['list'], ['html', { open: 'never' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
-    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
+    baseURL: process.env.CI ? process.env.PLAYWRIGHT_TEST_BASE_URL : `http://localhost:${PORT}`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    navigationTimeout: 60000,
   },
 
   /* Configure projects for major browsers */
@@ -67,12 +84,4 @@ export default defineConfig({
     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     // },
   ],
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    // command: process.env.CI ? 'yarn build && yarn start' : 'yarn dev',
-    command: 'yarn dev',
-    url: 'http://localhost:3000',
-    reuseExistingServer: !process.env.CI,
-  },
 });