@upstash/ratelimit 0.4.4 → 0.4.5-canary.0

package/.github/actions/redis/action.yaml

@@ -0,0 +1,58 @@
+name: Create local redis server
+
+inputs:
+  UPSTASH_REDIS_REST_URL:
+    required: true
+  UPSTASH_REDIS_REST_TOKEN:
+    required: true
+  UPSTASH_REPO_ACCESS_TOKEN:
+    required: true
+  REDIS_SERVER_CONFIG:
+    required: true
+
+runs:
+  using: "composite"
+
+  steps:
+    - name: Check out Redis Server
+      uses: actions/checkout@v2
+      with:
+        repository: upstash/redis-server
+        token: ${{ inputs.UPSTASH_REPO_ACCESS_TOKEN }}
+        path: redis-server
+
+    - uses: actions/setup-go@v2
+      with:
+        stable: "true"
+        go-version: "^1.17"
+
+    - uses: actions/cache@v2
+      with:
+        path: |
+          ~/go/pkg/mod
+          ~/.cache/go-build
+        key: ${{ runner.os }}-redis-server-${{ hashFiles('**/go.mod') }}
+        restore-keys: |
+          ${{ runner.os }}-redis-server
+
+    - run: |
+        echo "$REDIS_SERVER_CONFIG" >> config.json
+      shell: bash
+      env:
+        REDIS_SERVER_CONFIG: ${{ inputs.REDIS_SERVER_CONFIG }}
+
+    - run: |
+        make
+        ./upstash-redis -log-level error -config $GITHUB_WORKSPACE/config.json &
+      working-directory: ./redis-server/cmd
+      shell: bash
+      env:
+        UPSTASH_REDIS_REST_URL: ${{ inputs.UPSTASH_REDIS_REST_URL }}
+        UPSTASH_REDIS_REST_TOKEN: ${{ inputs.UPSTASH_REDIS_REST_TOKEN }}
+
+    - run: |
+        curl $UPSTASH_REDIS_REST_URL/info -H "Authorization: Bearer $UPSTASH_REDIS_REST_TOKEN"
+      shell: bash
+      env:
+        UPSTASH_REDIS_REST_URL: ${{ inputs.UPSTASH_REDIS_REST_URL }}
+        UPSTASH_REDIS_REST_TOKEN: ${{ inputs.UPSTASH_REDIS_REST_TOKEN }}

package/.github/workflows/release.yml

@@ -0,0 +1,46 @@
+name: Release
+
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+     
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Set version
+        run: node cmd/set-version.js . ${GITHUB_REF#refs/*/}
+
+      - name: Install bun
+        run: npm install -g bun
+     
+      - name: Install dependencies
+        run: bun install
+      
+      - name: Build
+        run: bun run build
+
+      - name: Add npm token
+        run: echo "//registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}" > .npmrc
+
+
+      - name: Publish release candidate
+        if: "github.event.release.prerelease"
+        run: npm publish --access public --tag=canary --no-git-checks
+         
+      - name: Publish
+        if: "!github.event.release.prerelease"
+        run: npm publish --access public --no-git-checks
+
+   

package/.github/workflows/stale.yaml

@@ -0,0 +1,31 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: "30 1 * * *"
+
+env:
+  DAYS_BEFORE_ISSUE_STALE: 30
+  DAYS_BEFORE_ISSUE_CLOSE: 7
+  DAYS_BEFORE_PR_STALE: 30
+  DAYS_BEFORE_PR_CLOSE: 7
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-issue-stale: ${{ env.DAYS_BEFORE_ISSUE_STALE }}
+          days-before-issue-close: ${{ env.DAYS_BEFORE_ISSUE_CLOSE }}
+          days-before-pr-stale: ${{ env.DAYS_BEFORE_PR_STALE }}
+          days-before-pr-close: ${{ env.DAYS_BEFORE_PR_CLOSE }}
+          stale-issue-label: "Inactive Issue"
+          stale-issue-message: 'This issue is stale because it has been open ${{ env.DAYS_BEFORE_ISSUE_STALE }} days with no activity. Remove stale label or comment or this will be closed in ${{ env.DAYS_BEFORE_ISSUE_CLOSE }} days.'
+          stale-pr-message: 'This PR is stale because it has been open ${{ env.DAYS_BEFORE_PR_STALE }} days with no activity. Remove stale label or comment or this will be closed in ${{ env.DAYS_BEFORE_PR_CLOSE }} days.'
+          close-issue-message: 'This issue was closed because it has been stalled for ${{ env.DAYS_BEFORE_ISSUE_CLOSE }} days with no activity.'
+          close-pr-message: 'This PR was closed because it has been stalled for ${{ env.DAYS_BEFORE_PR_CLOSE }} days with no activity.'
+          exempt-issue-labels: "Active Issue"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/tests.yaml

@@ -0,0 +1,79 @@
+name: Tests
+on:
+  pull_request:
+  schedule:
+    - cron: "0 0 * * *" # daily
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    name: Build
+    steps:
+      - name: Setup repo
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install bun
+        run: npm install -g bun
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Verify formatting
+        run: bun run fmt 
+
+      - name: Start redis server
+        uses: ./.github/actions/redis
+        with:
+          UPSTASH_REDIS_REST_URL: http://127.0.0.1:6379
+          UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_REDIS_REST_TOKEN }}
+          UPSTASH_REPO_ACCESS_TOKEN: ${{ secrets.UPSTASH_REPO_ACCESS_TOKEN }}
+          REDIS_SERVER_CONFIG: ${{ secrets.REDIS_SERVER_CONFIG }}
+
+      - name: Build
+        run: bun run build
+        env:
+          UPSTASH_REDIS_REST_URL: http://127.0.0.1:6379
+          UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_REDIS_REST_TOKEN }}
+
+
+  test:
+    runs-on: ubuntu-latest
+    name: Tests
+    steps:
+      - name: Setup repo
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install bun
+        run: npm install -g bun
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Start redis server
+        uses: ./.github/actions/redis
+        with:
+          UPSTASH_REDIS_REST_URL: http://127.0.0.1:6379
+          UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_REDIS_REST_TOKEN }}
+          UPSTASH_REPO_ACCESS_TOKEN: ${{ secrets.UPSTASH_REPO_ACCESS_TOKEN }}
+          REDIS_SERVER_CONFIG: ${{ secrets.REDIS_SERVER_CONFIG }}
+
+      - name: Run tests
+        run: bun run test 
+        env:
+          UPSTASH_REDIS_REST_URL: http://127.0.0.1:6379
+          UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_REDIS_REST_TOKEN }}
+          EU2_UPSTASH_REDIS_REST_URL: ${{ secrets.EU2_UPSTASH_REDIS_REST_URL }}
+          EU2_UPSTASH_REDIS_REST_TOKEN: ${{ secrets.EU2_UPSTASH_REDIS_REST_TOKEN }}
+          APN_UPSTASH_REDIS_REST_URL: ${{ secrets.APN_UPSTASH_REDIS_REST_URL }}
+          APN_UPSTASH_REDIS_REST_TOKEN: ${{ secrets.APN_UPSTASH_REDIS_REST_TOKEN }}
+          US1_UPSTASH_REDIS_REST_URL: ${{ secrets.US1_UPSTASH_REDIS_REST_URL }}
+          US1_UPSTASH_REDIS_REST_TOKEN: ${{ secrets.US1_UPSTASH_REDIS_REST_TOKEN }}

package/README.md

@@ -7,7 +7,7 @@ It is the only connectionless (HTTP based) rate limiting library and designed
 for:
 
 - Serverless functions (AWS Lambda, Vercel ...)
-- Cloudflare Workers
+- Cloudflare Workers & Pages
 - Vercel Edge
 - Fastly Compute@Edge
 - Next.js, Jamstack ...
@@ -80,7 +80,7 @@ documentation on how to create a redis instance.
 
 ```ts
 import { Ratelimit } from "@upstash/ratelimit"; // for deno: see above
-import { Redis } from "@upstash/redis";
+import { Redis } from "@upstash/redis"; // see below for cloudflare and fastly adapters
 
 // Create a new ratelimiter, that allows 10 requests per 10 seconds
 const ratelimit = new Ratelimit({
@@ -107,6 +107,13 @@ doExpensiveCalculation();
 return "Here you go!";
 ```
 
+For Cloudflare Workers and Fastly Compute@Edge, you can use the following imports:
+
+```ts
+import { Redis } from "@upstash/redis/cloudflare"; // for cloudflare workers and pages
+import { Redis } from "@upstash/redis/fastly"; // for fastly compute@edge
+```
+
 [Here's a complete nextjs example](https://github.com/upstash/ratelimit/tree/main/examples/nextjs)
 
 The `limit` method returns some more metadata that might be useful to you:

package/biome.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
+
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      },
+      "correctness": {
+        "noUnusedVariables": "warn"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      },
+      "style": {
+        "useBlockStatements": "error",
+        "noNonNullAssertion": "off"
+      },
+      "performance": {
+        "noDelete": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
+    },
+    "ignore": ["node_modules", ".next", "dist", ".nuxt", ".contentlayer"]
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "enabled": true,
+    "lineWidth": 100,
+    "ignore": ["node_modules", ".next", "dist", ".nuxt", ".contentlayer"]
+  }
+}

package/cmd/set-version.js

@@ -0,0 +1,14 @@
+const fs = require("fs");
+const path = require("path");
+
+const root = process.argv[2]; // path to project root
+const version = process.argv[3].replace(/^v/, ""); // new version
+
+console.log(`Updating version=${version} in ${root}`);
+
+const content = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf-8"));
+
+content.version = version;
+
+fs.writeFileSync(path.join(root, "package.json"), JSON.stringify(content, null, 2));
+fs.writeFileSync(path.join(root, "src", "version.ts"), `export const VERSION = "${version}";`);

package/examples/cloudflare-workers/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "cloudflare-workers",
+  "version": "0.0.0",
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20230419.0",
+    "typescript": "^5.0.4",
+    "wrangler": "2.20.0"
+  },
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler publish"
+  },
+  "dependencies": {
+    "@upstash/ratelimit": "link:../../dist",
+    "@upstash/redis": "^1.20.6"
+  }
+}

package/examples/cloudflare-workers/src/index.ts

@@ -0,0 +1,35 @@
+import { Ratelimit } from "@upstash/ratelimit";
+import { Redis } from "@upstash/redis/cloudflare";
+export interface Env {
+  UPSTASH_REDIS_REST_URL: string;
+  UPSTASH_REDIS_REST_TOKEN: string;
+}
+
+const cache = new Map();
+
+export default {
+  async fetch(request: Request, env: Env, _ctx: ExecutionContext): Promise<Response> {
+    try {
+      console.log("URL:", env.UPSTASH_REDIS_REST_URL);
+
+      if (new URL(request.url).pathname !== "/limit") {
+        return new Response("go to /limit", { status: 400 });
+      }
+
+      const ratelimit = new Ratelimit({
+        redis: Redis.fromEnv(env),
+        limiter: Ratelimit.cachedFixedWindow(5, "5 s"),
+        ephemeralCache: cache,
+      });
+
+      const res = await ratelimit.limit("identifier");
+      if (res.success) {
+        return new Response(JSON.stringify(res, null, 2), { status: 200 });
+      } else {
+        return new Response(JSON.stringify({ res }, null, 2), { status: 429 });
+      }
+    } catch (err) {
+      return new Response((err as Error).message, { status: 500 });
+    }
+  },
+};

package/examples/cloudflare-workers/tsconfig.json

@@ -0,0 +1,105 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Enable incremental compilation */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": [
+      "es2021"
+    ], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react", /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
+    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+
+    /* Modules */
+    "module": "es2022", /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
+    "types": [
+      "@cloudflare/workers-types"
+    ], /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    "resolveJsonModule": true, /* Enable importing .json files */
+    // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+    "checkJs": false, /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    "noEmit": true, /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
+    // "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true, /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
+    // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
+    // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

package/examples/cloudflare-workers/wrangler.toml

@@ -0,0 +1,3 @@
+name = "cloudflare-workers"
+main = "src/index.ts"
+compatibility_date = "2022-08-11"

package/examples/nextjs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Upstash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/examples/nextjs/README.md

@@ -0,0 +1,17 @@
+# Next.js + Tailwind CSS Example
+
+This example shows how to use [Tailwind CSS](https://tailwindcss.com/)
+[(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows
+the steps outlined in the official
+[Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
+
+## How to use
+
+Execute
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
+with [npm](https://docs.npmjs.com/cli/init) or
+[Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+yarn create next-app -e https://github.com/upstash/next-template your-app-name
+```

package/examples/nextjs/components/Breadcrumb.tsx

@@ -0,0 +1,67 @@
+import Image from "next/image";
+import React from "react";
+
+export type BreadcrumbItemProps = {
+  name: string;
+  url: string;
+};
+
+export type BreadcrumbProps = {
+  data: BreadcrumbItemProps[];
+  showRoot?: boolean;
+};
+
+export function BreadcrumbDivider() {
+  return <span className="text-gray-300">/</span>;
+}
+
+export function BreadcrumbItem({ url, name }: BreadcrumbItemProps) {
+  return (
+    <a
+      className="cursor-pointer hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={url}
+    >
+      {name}
+    </a>
+  );
+}
+
+export function Breadcrumb({ data, showRoot = true }: BreadcrumbProps) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <svg width="20" height="20" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+        />
+      </svg>
+
+      {showRoot && (
+        <React.Fragment>
+          <span className="text-gray-300">/</span>
+
+          <a
+            className="cursor-pointer hover:underline"
+            href="https://github.com/upstash"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            upstash
+          </a>
+        </React.Fragment>
+      )}
+
+      {data.map((item) => {
+        return (
+          <React.Fragment key={item.url}>
+            <BreadcrumbDivider />
+            <BreadcrumbItem url={item.url} name={item.name} />
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/examples/nextjs/components/Header.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Breadcrumb, BreadcrumbProps } from "./Breadcrumb";
+import StarButton from "./StarButton";
+
+export type HeaderProps = {
+  breadcrumbOptions: BreadcrumbProps;
+};
+
+export default function Header({ breadcrumbOptions }: HeaderProps) {
+  return (
+    <header className="relative z-10 flex items-center bg-gray-900 py-4 px-6 text-gray-50">
+      <Breadcrumb {...breadcrumbOptions} />
+      <div className="ml-auto hidden sm:block">
+        <StarButton {...[...breadcrumbOptions?.data].pop()} />
+      </div>
+    </header>
+  );
+}

package/examples/nextjs/components/ReadBlogPost.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function ReadBlogPost({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="bg-gray-100 p-4 text-center">{children}</div>;
+}

package/examples/nextjs/components/StarButton.tsx

@@ -0,0 +1,27 @@
+export type StarButtonProps = {
+  url?: string;
+};
+
+export default function StarButton({ url }: StarButtonProps) {
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex cursor-pointer items-center gap-1.5 rounded bg-white px-4 py-1.5 text-gray-700 hover:bg-primary-50 hover:text-primary-700"
+    >
+      <svg width="18" height="18" viewBox="0 0 16 16" version="1.1">
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"
+        />
+      </svg>
+      <span>Star on GitHub</span>
+    </a>
+  );
+}