Merge branch 'main' into dx-1128/docs-local-icon

Author: jamiehenson

.circleci/config.yml

@@ -78,7 +78,10 @@ jobs:
       NODE_OPTIONS: --max-old-space-size=12288
     executor:
       name: default
-    resource_class: xlarge
+    # gen2 is ~1.4x faster CPU at +20% credits/min. Only this job runs the
+    # CPU-bound `yarn build`, so it's the one place the trade pays off (per
+    # Voltaire's gen2 rollout). Fall back to xlarge if gen2 is unavailable.
+    resource_class: xlarge.gen2
     steps:
       - checkout
       - attach_workspace:

bin/assert-compressed.sh

@@ -1,13 +1,13 @@
 #!/bin/bash
 
 #
-# A utility script to assert that all CSS, JS, JSON, and SVG files have corresponding .gz compressed versions
+# A utility script to assert that all CSS, JS, and SVG files have corresponding .gz compressed versions
 #
 # Usage: assert-compressed.sh
 #
 
 # Find all files that should be compressed
-FILES=$(find public -type f \( -name "*.css" -o -name "*.js" -o -name "*.json" -o -name "*.svg" \))
+FILES=$(find public -type f \( -name "*.css" -o -name "*.js" -o -name "*.svg" \))
 ORIGINAL_COUNT=$(echo "$FILES" | wc -l)
 
 # Check each file for a corresponding .gz version

data/onPostBuild/compressAssets.js

@@ -23,7 +23,12 @@ const piscina_1 = __importDefault(require("piscina"));
  */
 const onPostBuild = async ({ reporter }) => {
     const cwd = path_1.default.join(process.cwd(), 'public');
-    const globResult = await (0, fast_glob_1.default)('**/*.{css,js,json,svg}', { cwd });
+    // JSON (mostly Gatsby's page-data.json) is excluded: nginx is configured with
+    // `gzip on; gzip_types application/json; gzip_static on;` so JSON is
+    // live-gzipped on the way out. Pre-compressing it with zopfli was the bulk of
+    // onPostBuild time for ~5-10% extra ratio over nginx's live gzip-6. Following
+    // Voltaire, which dropped JSON pre-compression for the same reason.
+    const globResult = await (0, fast_glob_1.default)('**/*.{css,js,svg}', { cwd });
     const files = globResult.map((file) => {
         return {
             from: path_1.default.join(cwd, file),

data/onPostBuild/compressAssets.ts

@@ -20,7 +20,12 @@ import Piscina from 'piscina';
 
 export const onPostBuild: GatsbyNode['onPostBuild'] = async ({ reporter }) => {
   const cwd = path.join(process.cwd(), 'public');
-  const globResult = await fastGlob('**/*.{css,js,json,svg}', { cwd });
+  // JSON (mostly Gatsby's page-data.json) is excluded: nginx is configured with
+  // `gzip on; gzip_types application/json; gzip_static on;` so JSON is
+  // live-gzipped on the way out. Pre-compressing it with zopfli was the bulk of
+  // onPostBuild time for ~5-10% extra ratio over nginx's live gzip-6. Following
+  // Voltaire, which dropped JSON pre-compression for the same reason.
+  const globResult = await fastGlob('**/*.{css,js,svg}', { cwd });
 
   const files = globResult.map((file) => {
     return {

data/onPostBuild/compressAssetsWorker.js

@@ -2,7 +2,10 @@ const fs = require('fs/promises');
 const { gzipAsync } = require('@gfx/zopfli');
 
 const options = {
-  numiterations: parseInt(process.env.ASSET_COMPRESSION_ITERATIONS || '15', 10),
+  // Default 1: zopfli's deflate ratio plateaus after the first iteration
+  // (<0.5% byte savings vs. 5/15 for 25-45% more time per file). Set
+  // ASSET_COMPRESSION_ITERATIONS higher for production if max ratio is wanted.
+  numiterations: parseInt(process.env.ASSET_COMPRESSION_ITERATIONS || '1', 10),
 };
 
 const compress = async ({ from, to }) => {

package.json

@@ -122,7 +122,7 @@
     "@typescript-eslint/eslint-plugin": "^5.46.1",
     "@typescript-eslint/parser": "^7.1.1",
     "autoprefixer": "^10.4.27",
-    "babel-jest": "^30.3.0",
+    "babel-jest": "^30.4.1",
     "babel-plugin-module-resolver": "^5.0.3",
     "babel-plugin-transform-define": "^2.1.4",
     "babel-preset-gatsby": "3.16.0",
@@ -137,9 +137,9 @@
     "fast-check": "^3.4.0",
     "gatsby-plugin-postcss": "6.16.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.3.0",
+    "jest": "^30.4.2",
     "jest-axe": "^10.0.0",
-    "jest-environment-jsdom": "^30.3.0",
+    "jest-environment-jsdom": "^30.4.1",
     "lint-staged": "^13.1.0",
     "msw": "^2.0.1",
     "postcss": "^8.5.10",

src/components/Examples/ExamplesContent.test.tsx

@@ -75,7 +75,7 @@ describe('ExamplesContent', () => {
   });
 
   it('filters examples based on product filter selection', () => {
-    // Make the screen wider than the default of 1024px as desktop filtering only works >= 1040px
+    // Desktop filter auto-commits at the `sm` breakpoint (768px) and above
     Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1600 });
     window.dispatchEvent(new Event('resize'));
 
@@ -86,4 +86,19 @@ describe('ExamplesContent', () => {
     expect(screen.queryByText('Online status')).not.toBeInTheDocument();
     expect(screen.getByText('Member location')).toBeInTheDocument();
   });
+
+  // DX-1449: between the `sm` (768px) and `md` (1040px) breakpoints the inline
+  // desktop filter renders without an Apply button, but selections previously
+  // only committed at >= 1040px, leaving the filter inert in that range.
+  it('filters examples at widths between the sm and md breakpoints', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 818 });
+    window.dispatchEvent(new Event('resize'));
+
+    render(<ExamplesContent exampleImages={exampleImages} />);
+    const productFilterInput = screen.getByTestId('product-spaces');
+    fireEvent.click(productFilterInput);
+
+    expect(screen.queryByText('Online status')).not.toBeInTheDocument();
+    expect(screen.getByText('Member location')).toBeInTheDocument();
+  });
 });

src/components/Examples/ExamplesFilter.tsx

@@ -12,6 +12,11 @@ import { navigate } from 'gatsby';
 import { ProductName } from '@ably/ui/core/ProductTile/data';
 import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
 
+// Matches Tailwind's `sm` screen (768px), where the filter switches from the
+// mobile drawer (with an Apply button) to the inline desktop sidebar. Above
+// this width selections must auto-commit, since no Apply button is rendered.
+const SM_BREAKPOINT = 768;
+
 const ExamplesFilter = ({
   selected,
   setSelected,
@@ -85,7 +90,7 @@ const ExamplesFilter = ({
 
   useEffect(() => {
     const handleResize = () => {
-      if (window.innerWidth >= 1040) {
+      if (window.innerWidth >= SM_BREAKPOINT) {
         setExpandFilterMenu(false);
       }
     };
@@ -95,7 +100,7 @@ const ExamplesFilter = ({
   }, []);
 
   useEffect(() => {
-    if (window.innerWidth >= 1040) {
+    if (window.innerWidth >= SM_BREAKPOINT) {
       setSelected(localSelected);
     }
   }, [expandFilterMenu, localSelected, setSelected]);

src/pages/docs/channels/index.mdx

@@ -207,9 +207,9 @@ To set a rule:
 <Tabs>
 <Tab value="dashboard" label="Dashboard">
 
-In your app [settings](https://ably.com/accounts/any/apps/any/settings):
+In your app [settings](https://ably.com/accounts/any/apps/any/app_namespaces):
 
-1. Click **Add new rule**.
+1. Click **Create rule**.
 2. Select the channel name or namespace to apply rules to.
 3. Check the required rules.
 4. Click **Create rule** to save.