ci: add prerelease (upstash#10)

* ci: add prerelease

* chore: fix version

* style: fmt

.github/workflows/prerelease.yaml

@@ -0,0 +1,33 @@
+name: Prerelease
+on:
+  push:
+    branches:
+      - main
+jobs:
+  prerelease:
+    name: Prerelease
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Build
+        run: deno run -A ./cmd/build.ts
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release
+        working-directory: dist
+

.gitignore

@@ -9,3 +9,4 @@ redis-server
 
 *.log
 .vercel
+.next

.releaserc

@@ -0,0 +1,14 @@
+{
+  "branches": [
+    {
+      "name": "release"
+    },
+    {
+      "name": "main",
+      "channel": "next",
+      "prerelease": "next"
+    }
+  ],
+  "dryRun": false,
+  "ci": true
+}

cmd/build.ts

@@ -48,7 +48,7 @@ await build({
       "@upstash/redis": "1.3.3-alpha.1",
     },
     peerDependencies: {
-      "@upstash/redis": "^1.3.4",
+      "@upstash/redis": "^1.4.0",
     },
     "size-limit": [
       {
@@ -66,6 +66,7 @@ await build({
 // post build steps
 Deno.copyFileSync("LICENSE", `${outDir}/LICENSE`);
 Deno.copyFileSync("README.md", `${outDir}/README.md`);
+Deno.copyFileSync(".releaserc", `${outDir}/.releaserc`);
 
 /**
  * Workaround because currently deno can not typecheck the built modules without `@types/node` being installed as regular dependency

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.

examples/nextjs/README.md

@@ -1,17 +1,17 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with
-[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Next.js + Tailwind CSS Example
 
-## Getting Started
+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).
 
-1. Create a database on [https://console.upstash.com/](Upstash)
-2. Copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` into `.env`
-3. Run the development server:
+## 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
-npm run dev
-# or
-yarn dev
+yarn create next-app -e https://github.com/upstash/next-template your-app-name
 ```
-
-4. Open [http://localhost:3000](http://localhost:3000) with your browser to see
-   the result.

examples/nextjs/components/Breadcrumb.tsx

@@ -0,0 +1,72 @@
+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>
+  );
+}

examples/nextjs/components/Header.tsx

@@ -0,0 +1,18 @@
+import { Breadcrumb, BreadcrumbProps } from "./Breadcrumb";
+import StarButton from "./StarButton";
+import React from "react";
+
+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>
+  );
+}

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>;
+}

examples/nextjs/components/StarButton.tsx

@@ -0,0 +1,28 @@
+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"
+        >
+        </path>
+      </svg>
+      <span>Star on GitHub</span>
+    </a>
+  );
+}

examples/nextjs/package.json

@@ -1,25 +1,27 @@
 {
-  "name": "nextjs",
-  "version": "0.1.0",
+  "name": "upstash-ratelimit-nextjs",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
     "@upstash/ratelimit": "../../dist",
-    "@upstash/redis": "^1.3.4",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "@upstash/redis": "^1.4.0",
+    "next": "^12.1.6",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
-    "@types/node": "17.0.21",
-    "@types/react": "17.0.39",
-    "eslint": "8.10.0",
-    "eslint-config-next": "12.1.0",
-    "typescript": "4.6.2"
+    "@tailwindcss/forms": "^0.5.1",
+    "@types/node": "^17.0.32",
+    "@types/react": "^18.0.9",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.13",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.10",
+    "tailwindcss": "^3.0.24",
+    "typescript": "^4.6.4"
   }
 }

examples/nextjs/pages/_app.tsx

@@ -1,7 +1,49 @@
+import "styles/globals.css";
+
+import React from "react";
 import type { AppProps } from "next/app";
+import Header from "components/Header";
+import ReadBlogPost from "components/ReadBlogPost";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Header
+        breadcrumbOptions={{
+          data: [
+            {
+              name: "ratelimit",
+              url: "https://github.com/upstash/ratelimit",
+            },
+          ],
+        }}
+      />
+
+      {
+        /*<ReadBlogPost>
+        This is a sample project for the blogpost{" "}
+        <a
+          className="text-primary-600"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://blog.upstash.com/nextjs-caching-with-redis"
+        >
+          Example Post
+        </a>
+      </ReadBlogPost>*/
+      }
+
+      <div className="w-full max-w-3xl px-6 mx-auto py-14">
+        <Component {...pageProps} />
+      </div>
+    </>
+  );
 }
 
 export default MyApp;