From dff0be8b1731dfde6aa41558da9b4db31438a654 Mon Sep 17 00:00:00 2001
From: Tom Meagher
Date: Wed, 28 Feb 2024 09:49:56 -0500
Subject: [PATCH] docs: install
---
pnpm-lock.yaml | 3 ++
site/pages/getting-started.mdx | 19 ++++++---
site/pages/installation.mdx | 72 ++++++++++++++++++++++++++++++++++
site/vocs.config.tsx | 4 ++
src/frog-base.tsx | 14 ++++---
src/package.json | 8 +++-
templates/vercel/package.json | 1 +
7 files changed, 109 insertions(+), 12 deletions(-)
create mode 100644 site/pages/installation.mdx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e10ac8c..9e105b24 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,6 +191,9 @@ importers:
qrcode:
specifier: ^1.5.3
version: 1.5.3
+ typescript:
+ specifier: '>=5.0.4'
+ version: 5.3.3
viem:
specifier: ^2.7.10
version: 2.7.11(typescript@5.3.3)
diff --git a/site/pages/getting-started.mdx b/site/pages/getting-started.mdx
index 3ef6687c..59c2dd57 100644
--- a/site/pages/getting-started.mdx
+++ b/site/pages/getting-started.mdx
@@ -66,28 +66,31 @@ You can install Frog in an existing project, or start from scratch, by installin
### Install
-First, we will install `frog` as a dependency in our project.
+First, we will install `frog` as a dependency in our project along with its [`hono`](https://hono.dev) peer dependency.
:::code-group
```bash [npm]
-npm i frog
+npm i frog hono
```
```bash [pnpm]
-pnpm i frog
+pnpm i frog hono
```
```bash [yarn]
-yarn add frog
+yarn add frog hono
```
```bash [bun]
-bun i frog
+bun i frog hono
```
:::
+- [Hono](https://github.com/honojs/hono) is a small, simple, and ultrafast web framework for the Edges.
+- [TypeScript](https://github.com/microsoft/TypeScript) is optional, but highly recommended.
+
### Build your First Frame
@@ -141,8 +144,12 @@ After that, let's add a script to our `package.json` to serve our frame.
"scripts": {
"dev": "frog dev", // [!code focus]
},
+ "dependencies": {
+ "frog": "latest",
+ "hono": "latest"
+ },
"devDependencies": {
- "frog": "latest"
+ "typescript": "latest"
}
}
```
diff --git a/site/pages/installation.mdx b/site/pages/installation.mdx
new file mode 100644
index 00000000..cdff983a
--- /dev/null
+++ b/site/pages/installation.mdx
@@ -0,0 +1,72 @@
+# Installation
+
+Install Frog via your package manager or build from source.
+
+## Package Manager
+
+Install the required packages.
+
+:::code-group
+```bash [pnpm]
+pnpm add frog hono
+```
+
+```bash [npm]
+npm install frog hono
+```
+
+```bash [yarn]
+yarn add frog hono
+```
+
+```bash [bun]
+bun add frog hono
+```
+:::
+
+- [Hono](https://github.com/honojs/hono) is a small, simple, and ultrafast web framework for the Edges.
+- [TypeScript](https://github.com/microsoft/TypeScript) is optional, but highly recommended.
+
+## Using Unreleased Commits
+
+If you can't wait for a new release to test the latest features, you can either install from the `canary` tag (tracks the [`main`](https://github.com/wevm/frog/tree/main) branch).
+
+:::code-group
+```bash [pnpm]
+pnpm add frog@canary
+```
+
+```bash [npm]
+npm install frog@canary
+```
+
+```bash [yarn]
+yarn add frog@canary
+```
+
+```bash [bun]
+bun add frog@canary
+```
+:::
+
+Or clone the [Frog repo](https://github.com/wevm/frog) to your local machine, build, and link it yourself.
+
+```bash
+gh repo clone wevm/frog
+cd frog
+pnpm install
+pnpm build
+cd src
+pnpm link --global
+```
+
+Then go to the project where you are using Frog and run `pnpm link --global frog` (or the package manager that you used to link Frog globally). Make sure you installed the [required peer dependencies](/installation#package-manager) and their versions are correct.
+
+## Security
+
+Ethereum-related projects are often targeted in attacks to steal users' assets. Make sure you follow security best-practices for your project. Some quick things to get started.
+
+- Pin package versions, upgrade mindfully, and inspect lockfile changes to minimize the risk of [supply-chain attacks](https://nodejs.org/en/guides/security/#supply-chain-attacks).
+- Install the [Socket Security](https://socket.dev) [GitHub App](https://github.com/apps/socket-security) to help detect and block supply-chain attacks.
+- Add a [Content Security Policy](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html) to defend against external scripts running in your app.
+
diff --git a/site/vocs.config.tsx b/site/vocs.config.tsx
index ef3cab65..033a2038 100644
--- a/site/vocs.config.tsx
+++ b/site/vocs.config.tsx
@@ -252,6 +252,10 @@ export default defineConfig({
},
],
sidebar: [
+ {
+ text: 'Installation',
+ link: '/installation',
+ },
{
text: 'Getting Started',
link: '/getting-started',
diff --git a/src/frog-base.tsx b/src/frog-base.tsx
index d69f4a06..7ed0f9cb 100644
--- a/src/frog-base.tsx
+++ b/src/frog-base.tsx
@@ -338,7 +338,7 @@ export class FrogBase<
return true
})
- const body = isDevEnabled && (
+ const body = isDevEnabled ? (
+ ) : (
+
)
return c.render(
@@ -378,10 +380,12 @@ export class FrogBase<
)}
{parsedIntents}
-
+ {isDevEnabled && (
+
+ )}
{body}