Merge pull request #256 from framesjs/dev

Dev

Author: stephancill

.changeset/five-mangos-try.md

@@ -0,0 +1,5 @@
+---
+"frames.js": patch
+---
+
+fix: turbo build

.changeset/grumpy-moose-beam.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+feat: custom fonts example

.changeset/heavy-nails-love.md

@@ -0,0 +1,6 @@
+---
+"frames.js": minor
+"docs": patch
+---
+
+feat: cloudflare workers adapter

.changeset/new-emus-love.md

@@ -0,0 +1,12 @@
+---
+"docs": patch
+---
+
+- adds default context reference to createFrames reference
+- frames.js for apps section
+- clean up example filenames, add steps
+- createFrames params
+- troubleshooting docs
+- update useFrame reference
+- make button docs more visible
+- multi-page guide

.changeset/new-moose-talk.md

@@ -0,0 +1,5 @@
+---
+"frames.js": patch
+---
+
+fix(nextjs): prioritize APP_URL over VERCEL_URL

.changeset/olive-kangaroos-talk.md

@@ -0,0 +1,5 @@
+---
+"frames.js": minor
+---
+
+chore: deprecate old Next.js api

.changeset/silly-files-cheat.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+fix: add missing parts to cf workers guide

.changeset/smooth-bugs-admire.md

@@ -0,0 +1,5 @@
+---
+"create-frames": patch
+---
+
+feat: introduce cli tool to bootstrap projects from templates

.changeset/sweet-rivers-join.md

@@ -0,0 +1,5 @@
+---
+"frames.js": patch
+---
+
+fix: expose core types and utils via frames.js/types and frames.js/utils

.changeset/ten-beans-compete.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+feat: updated multi-page example

.changeset/thirty-dots-doubt.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+fix: refactor frames app into frames.ts in examples

.changeset/warm-pandas-laugh.md

@@ -0,0 +1,5 @@
+---
+"frames.js": patch
+---
+
+fix: correctly tree shake the bundle

.changeset/yellow-zoos-promise.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+feat: custom middleware example

.github/workflows/github-actions.yml

@@ -0,0 +1,87 @@
+name: Frames.js Actions
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  initialize:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+  lint:
+    needs: [initialize]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  typecheck:
+    needs: [initialize]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Typecheck
+        run: yarn build:ci
+
+  test:
+    needs: [lint, typecheck]
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Unit Tests
+        run: yarn test:ci

.scripts/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

.scripts/prepare-create-frames.js

@@ -0,0 +1,33 @@
+/**
+ * This script is used to prepare create-frames package for publishing.
+ *
+ * It copies the templates directory to the root of the package so that it can be used by the create-frames package.
+ */
+
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import glob from "fast-glob";
+import { cpSync, renameSync, rmSync } from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+
+rmSync(resolve(__dirname, "../packages/create-frames/templates"), { force: true, recursive: true });
+
+cpSync(
+  resolve(__dirname, "../templates"),
+  resolve(__dirname, "../packages/create-frames/templates"),
+  {
+    recursive: true,
+    filter: (src) => !/(node_modules|\.turbo|\.next|next-env\.d\.ts)/.test(src),
+  }
+);
+
+const dotfiles = await glob(
+  resolve(__dirname, "../packages/create-frames/templates/**/.*")
+);
+
+// rename dotfiles to use underscore instead of dot so we can publish them to npm as is
+for (const doftile of dotfiles) {
+  renameSync(doftile, doftile.replace("/.", "/_"));
+}

docs/pages/guides/display-frames.mdx docs/pages/guides/apps/display-frames.mdx

@@ -9,26 +9,32 @@ This guide shows you how to add frames rendering to your next.js + tailwind app
 
 ## Steps
 
-1. Create a new repo
+::::steps
 
-`npx create-next-app@latest my-project --ts --eslint --tailwind --app`
+### Create a new repo
 
-`cd my-project`
 
-`yarn add @frames.js/render`
+Create a new Next.js app
 
-`yarn install`
+```sh
+npx create-next-app@latest my-project --ts --eslint --tailwind --app
+cd my-project
+```
+
+Add `@frames.js/render` to your project
 
-2. Add proxies for routing frame requests via your backend for privacy + preventing CORS issues
-```tsx filename="// ./app/frames/route.tsx"
-// ./app/frames/route.tsx
+```sh
+yarn add @frames.js/render
+```
+
+### Add proxies for routing frame requests via your backend for privacy + preventing CORS issues
+```tsx [./app/frames/route.tsx]
 export { GET, POST } from "@frames.js/render/next";
 ```
 
-3. Add the renderer to your page
+### Add the renderer to your page
 
-```tsx filename="// ./app/page.tsx"
-// ./app/page.tsx
+```tsx [./app/page.tsx]
 "use client";
 import {
   FrameUI,
@@ -81,10 +87,9 @@ export default function Page() {
 
 ```
 
-4. In order for the styles to work, your project should have tailwind set up as well as the tailwind.config.js rule
+### In order for the styles to work, your project should have tailwind set up as well as the tailwind.config.js rule
 
-```tsx filename="// tailwind.config.js"
-// tailwind.config.js
+```tsx [tailwind.config.js]
 const config = {
     // ...
     content: [
@@ -97,10 +102,9 @@ const config = {
 }
 ```
 
-5. Allow images from any domain
+### Allow images from any domain
 
-```tsx filename="// next.config.js"
-// next.config.js
+```tsx [next.config.js]
 const nextConfig = {
   images: {
     remotePatterns: [
@@ -113,10 +117,10 @@ const nextConfig = {
 };
 ```
 
-6. Run `yarn run dev`
-
-7. Done! 🎉
+### Run `yarn run dev`
 
+### Done! 🎉
+::::
 
 ### Optional