ci: Setup basic CI

.github/workflows/ci.yaml

@@ -0,0 +1,34 @@
+name: CI
+run-name: ${{github.workflow}} (${{github.event_name}} on ${{ github.ref_name}})
+
+on: [push, pull_request]
+
+concurrency:
+  group: 'ci'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: package.json
+
+      - name: Install dependencies
+        run: npm install
+
+      - name:
+          Verify the integrity of provenance attestations and registry signatures for installed
+          dependencies
+        run: npm audit signatures
+
+      - name: Build
+        run: npm run build --workspaces

.gitignore

@@ -1,3 +1,4 @@
 .idea
 .next
 node_modules
+build

examples/pixel/next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
 
 export default nextConfig;

examples/pixel/package.json

@@ -29,6 +29,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.4"
   }
 }

examples/pixel/src/app/Header.jsx

@@ -9,14 +9,16 @@ export function Header() {
   return (
     <>
       <div className="flex gap-2 items-center mt-4 mb-8">
-        <div className="flex gap-2 items-center grow">
-          <Link href="/">
-            <img src="/br-logo-primary.svg" alt="" width={150} />
+        <div className="flex grow items-center">
+          <Link href="/" className="inline-block">
+            <div className="flex gap-2 items-center">
+              <img src="/br-logo-primary.svg" alt="" width={150} />
+              <span>✨</span>
+              <div className="text-lg font-semibold text-[#002840]">
+                Pixel
+              </div>
+            </div>
           </Link>
-          <span>✨</span>
-          <div className="text-lg font-semibold text-[#002840]">
-            Pixel
-          </div>
         </div>
         <div className="flex gap-4 items-center">
           <div>

examples/pixel/src/app/events/page.jsx

@@ -1,7 +1,8 @@
 'use client';
 
+import Link from 'next/link';
 import JsonView from '@uiw/react-json-view';
-import { Button, ExternalLinkIcon } from '@bloomreach/react-banana-ui';
+import {ArrowLeftIcon, Button, ExternalLinkIcon} from '@bloomreach/react-banana-ui';
 import useAnalytics from '../../hooks/useAnalytics';
 
 export default function Page() {
@@ -13,6 +14,10 @@ export default function Page() {
         <div className="flex flex-col gap-8">
           <div className="flex items-center justify-between">
             <div>
+              <Link href="/" className="text-sm cursor-pointer text-blue-400 flex gap-2 hover:underline items-center">
+                <ArrowLeftIcon />
+                Back to home
+              </Link>
               <h1 className="text-2xl font-bold">Pixel events</h1>
               <p className="text-gray-500 dark:text-gray-400">
                 View the last 25 pixel events. See the events on the dashboard in

examples/pixel/src/app/page.jsx

@@ -77,7 +77,7 @@ export default function Home() {
           )}
           <div className="flex gap-4 mt-4">
             {showJson ? (
-              <JsonView value={data} collapsed={1} />
+              <div>{data ? <JsonView value={data} collapsed={1} /> : null}</div>
             ) : (
               <div className="w-full">
                 {!loading && data?.response?.docs?.length ? (

examples/pixel/src/components/SearchBar.jsx

@@ -1,15 +1,15 @@
 import _ from 'lodash';
+import { Suspense, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { InputField, LoaderIcon, SearchIcon } from '@bloomreach/react-banana-ui';
 import JsonView from '@uiw/react-json-view';
 import Highlighter from 'react-highlight-words';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
 import useAnalytics from '../hooks/useAnalytics';
 import useAutosuggestApi from '../hooks/useAutosuggestApi';
 import { CONFIG } from '../constants';
 
-export function SearchBar() {
+function SearchBarInner() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { trackEvent } = useAnalytics();
@@ -154,3 +154,11 @@ export function SearchBar() {
     </div>
   );
 }
+
+export function SearchBar() {
+  return (
+    <Suspense>
+      <SearchBarInner />
+    </Suspense>
+  );
+}

examples/visual-search/.env

@@ -0,0 +1,2 @@
+# Fixes: `npm error code ENOWORKSPACES` when running `npm run dev`
+NEXT_TELEMETRY_DISABLED=1

examples/visual-search/app/fetch-image-url/route.ts

@@ -1,14 +1,17 @@
 import {NextRequest, NextResponse} from "next/server";
 
 export async function GET(req: NextRequest, res: NextResponse) {
-  try {
-    const {searchParams} = new URL(req.url);
-    const url = searchParams.get('url')
+  const {searchParams} = new URL(req.url);
+  const url = searchParams.get('url');
 
-    if (!url) {
-      return res.status(400).json({message: 'url query parameter is required'});
-    }
+  if (!url) {
+    return new NextResponse(JSON.stringify({message: 'url query parameter is required'}), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' }
+    });
+  }
 
+  try {
     const response = await fetch(url);
     if (!response.ok) throw new Error(`unexpected response ${response.statusText}`);
     if (response.headers.get('content-length') === '0') throw new Error('no content-length');
@@ -22,11 +25,14 @@ export async function GET(req: NextRequest, res: NextResponse) {
       status: 200,
       headers: {
         'Content-Type': response.headers.get('content-type') || 'image/*',
-        'Content-Length': response.headers.get('content-length') || arr.length,
+        'Content-Length': response.headers.get('content-length') || String(arr.length),
       },
     })
-  } catch (e) {
+  } catch (e: any) {
     console.error(e);
-    return new NextResponse.error(e);
+    return new NextResponse(JSON.stringify({ message: e.message || 'An error occurred' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    })
   }
 }