Skip to content

Commit deb3355

Browse files
softmarshmallowsoftmarshmallow
committed
clean up
1 parent 8dcded6 commit deb3355

File tree

10 files changed

+182
-242
lines changed

10 files changed

+182
-242
lines changed

‎README.md

+7-6
Original file line numberDiff line numberDiff line change
@@ -156,12 +156,13 @@ We support importing designs from Figma with our [figma-sdk](https://github.com/
156156

157157
## Usage
158158

159-
Linting
160-
Custom Tokenizer
161-
Custom Assets Repository
162-
Custom Cache
163-
Custom Cursor
164-
Plugins
159+
- [REST API](./www/README.md)
160+
- Linting (coming soon)
161+
- Custom Tokenizer (coming soon)
162+
- Custom Assets Repository (coming soon)
163+
- Custom Cache (coming soon)
164+
- Custom Cursor (coming soon)
165+
- Plugins (coming soon)
165166

166167
### Running locally
167168

‎api/README.md

-155
This file was deleted.

‎api/__test__/.gitignore

Whitespace-only changes.

‎api/index.ts

-2
This file was deleted.

‎api/package.json

-4
This file was deleted.

‎www/README.md

+152-22
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,166 @@
1-
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).
1+
# Grida Code API (Beta) - `code.api.grida.co`
22

3-
## Getting Started
3+
## Usage (REST)
44

5-
First, run the development server:
5+
### `POST /v1/code`
66

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
7+
Example
8+
9+
```ts
10+
import Axios from "axios";
11+
12+
const client = Axios.create({
13+
baseURL: "https://code.api.grida.co/v1",
14+
headers: {
15+
"Content-Type": "application/json",
16+
"X-Figma-Access-Token": "figd_xxxxxxxxxx",
17+
},
18+
});
19+
20+
client.post("code", {
21+
// target node url formatted as https://www.figma.com/file/{fileKey}?node-id={nodeId}
22+
// at this moment, the nodeId must be formatted as 00:00, not 00-00
23+
// Note: if you copy & paste the link from the fihma editor, you will get in the format of 00-00 (we are updating this)
24+
figma: "https://www.figma.com/file/MikewnarPfXXXXX/?node-id=0%3A1",
25+
framework: {
26+
framework: "vanilla", // react, flutter, ...
27+
},
28+
});
1529
```
1630

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
31+
#### Request Body
32+
33+
```ts
34+
interface CodeRequest {
35+
figma: FigmaNodeInput;
36+
framework: Partial<FrameworkConfig>;
37+
}
38+
```
39+
40+
**`body.figma`**
1841

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
42+
```ts
43+
type FigmaNodeInput =
44+
| string
45+
| { url: string; version: string }
46+
| { filekey: string; node: string; version: string };
47+
```
48+
49+
**Note** currently only `string` is supported.
50+
51+
An URL indicating the target node in Figma design.
52+
53+
target node url formatted as `https://www.figma.com/file/{fileKey}?node-id={nodeId}`
54+
at this moment, the nodeId must be formatted as `00:00`, not `00-00` url encoded value like `0%3A1` is also acceptable.
55+
56+
Note: if you copy & paste the link from the fihma editor, you will get in the format of 00-00 (we are updating this)
2057

21-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
58+
**`body.framework`**
2259

23-
## Learn More
60+
A Framework configuration used for generating code. Learn more at [Framework Configuration](https://grida.co/docs/cli#2-framework-configuration)
2461

25-
To learn more about Next.js, take a look at the following resources:
62+
#### Response
2663

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
64+
```ts
65+
// example of response
66+
{
67+
warnings: [],
68+
src: '', // do not use this
69+
srcdoc: '<DOCTYPE html><head>...</head><body>...',
70+
srcmap: {
71+
// the mapping between the generated code and the design
72+
// node-id : xpath
73+
'123:123': '//div[@data-figma-node-id="123:123"]]'
74+
},
75+
files:{
76+
'index.hml': '<DOCTYPE html><head>...</head><body>...'
77+
}
78+
framework:{
79+
// the framework config used for generating code
80+
// ...
81+
},
82+
// (if the input design source is figma, you will get the brief summary about the used design)
83+
figma:{
84+
file:{
85+
// #region original data ------
86+
name: "Exmaples",
87+
lastModified: "2023-03-28T17:51:08Z",
88+
thumbnailUrl: "https://s3-alpha.figma.com/thumbnails/dc85b86a-2502-4baa-a776-ce0972131a80",
89+
version: "3247308401",
90+
// #endregion original data ------
91+
}
2992

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
93+
filekey: 'MikewnarPfXXXXX',
94+
entry: '0:1',
95+
json: "{}",
96+
node: {
97+
...
98+
}
99+
}
100+
engine: {
101+
// the info of the engine used for generating code
102+
name: 'code.api.grida.co/v1',
103+
// the engibe version
104+
version: '2023.1.1'
105+
},
106+
// the preview image of the rendered html
107+
thumbnail: 'https://xxx.s3.amazonaws.com/.../xxxxxx.png',
108+
license: {
109+
// the license info of the generated code and the api
110+
// ...
111+
}
112+
}
113+
```
114+
115+
- `warnings` - An array of warnings. If there is no warning, it will be an empty array. (This is usually a warning caused by poor design, which can be ignored)
116+
- `src` - The generated code as a uri, a publicly accessible html file endpoint.
117+
- `srcdoc` - The generated code as a bundled and concatenated string, which can be used to embed the code directly into your website.
118+
119+
### `GET /v1/embed`
31120

32-
## Deploy on Vercel
121+
We also provide an experimental embed API for embedding the generated code directly into your website with an iframe.
33122

34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
123+
Example
124+
125+
```html
126+
<iframe
127+
src="https://code.api.grida.co/v1/embed?figma=<figma-node-url>&fpat=figd_xxxxx"
128+
width="100%"
129+
height="100%"
130+
></iframe>
131+
```
35132

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
133+
#### URL Parameters
134+
135+
**`figma`**
136+
Same as `/v1/code` API's `figma` parameter.
137+
138+
**`fpat`** or **`fat`**
139+
140+
- fpat: Figma Personal Access Token (starting with `figd_`)
141+
- fat: Figma Access Token
142+
143+
Warning: For security reasons, we highly recommend using the Figma Access Token (which expires), instead of the Figma Personal Access Token (which never expires unless revoked). The Figma Personal Access Token is only used for development purpose.
144+
145+
We are planning on providing a more secure way to use embed with the `fpat` in the future.
146+
147+
The framework configuration for embed is `vanilla-preview` by default. We are planning on providing a way to customize the framework configuration in the future.
148+
149+
## Request / Response Types Declarations
150+
151+
See [./types.ts](./types.ts)
152+
153+
## API Clients (Under Development)
154+
155+
At this moment there is no publicly available API wrappers. If you are looking for use on your local machine, you van use [Grida CLI](https://grida.co/cli)
156+
157+
## Running Locally
158+
159+
First, run the development server:
160+
161+
```bash
162+
yarn
163+
yarn dev
164+
```
165+
166+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

‎www/app/v1/code/route.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { code } from "@grida/code";
2-
import type { CodeRequest, FigmaToVanillaResponse } from "@grida/api/types";
3-
import { LICENSE_CE } from "@grida/api";
2+
import { LICENSE_CE } from "@/license";
3+
import type { CodeRequest, FigmaToVanillaResponse } from "@/types";
44
import assert from "assert";
55
import { FrameworkConfig, VanillaFrameworkConfig } from "@grida/builder-config";
66
import { type NextRequest, NextResponse } from "next/server";

‎api/license.ts ‎www/license.ts

File renamed without changes.

‎api/types.ts ‎www/types.ts

File renamed without changes.

0 commit comments

Comments
 (0)