much better looking api docs

This commit is contained in:
toast 2021-03-29 18:19:36 -07:00
parent 35462bf3e7
commit 56283c052b
5 changed files with 136 additions and 167 deletions

View File

@ -12,11 +12,9 @@ const EXAMPLE_CODE_JS = (
method: 'POST',
headers: {
'Content-Type': 'application/json',
// NOTE: your API key
Authorization: 'Basic ${key}',
},
body: JSON.stringify({ data: {
// NOTE: your slate ID
id: '${slateId}'
}})
});
@ -33,15 +31,14 @@ headers = {
}
json = {'id': '${slateId}'}
r = requests.post(url, headers=headers, json=json)
print(r.text)
`;
print(r.text)`;
const EXAMPLE_RESPONSE = (key, slateId) => `
{
"decorator": "V1_GET",
"slates": [
{
"id": "8eb2d471-9abf-4eae-a461-c62ebeb529b0",
"id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"created_at": "2021-03-24T00:51:21.007Z",
"updated_at": "2021-03-24T02:58:21.728Z",
"published_at": null,
@ -67,18 +64,18 @@ const EXAMPLE_RESPONSE = (key, slateId) => `
},
"objects": [
{
"id": "data-fce946be-7212-4f62-a74c-adfafd8d0d15",
"id": "data-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"cid": "bafkreibrpxcv37juaq67it2gu7xyjo5fzq7v3r55ykcgzylvsfljcv3s3a",
"url": "https://slate.textile.io/ipfs/bafkreibrpxcv37juaq67it2gu7xyjo5fzq7v355ykcgzylvsfljcv3s3a",
"name": "4.jpg",
"url": "https://slate.textile.io/ipfs/cid-goes-here",
"name": "door.jpg",
"size": 33676,
"type": "image/jpeg",
"title": "4.jpg",
"ownerId": "8b2bfac4-9c57-4cba-ae13-81da293fabc5",
"title": "door.jpg",
"ownerId": ""xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx,
"blurhash": "U6BzILt700IADjWBx]oz00f6?bs:00Rj_Nt7"
}
],
"ownerId": "8b2bfac4-9c57-4cba-ae13-81da293fabc5",
"ownerId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"url": "https://slate.host/devexamples/public-example"
}
}
@ -86,7 +83,7 @@ const EXAMPLE_RESPONSE = (key, slateId) => `
"user": {
"username": "devexamples",
"data": {
"photo": "https://slate.textile.io/ipfs/bafkreiardkkfxj3ip373ee2tf6ffivjqclq7ionemt6pw55e6hv7ws5pvu"
"photo": "https://slate.textile.io/ipfs/cid-goes-here"
}
}
}`;
@ -105,13 +102,13 @@ export default class APIDocsGetSlate extends React.Component {
return (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 64 }}
style={{ maxWidth: 640, marginTop: 64 }}
label="Get slate by ID"
description="This API request will return a specific slate. If you don't provide an ID argument the response will contain the most recently modified slate. Save the response locally because you can send this JSON back to our API server using the route /api/v1/update-slate to update your slate."
description="This API request will return a specific slate. If you don't provide an ID argument the response will contain the most recently modified slate. You can save the response locally and send this JSON back to our API server using the route /api/v1/update-slate to update your slate."
/>
<CodeBlock
children={code}
style={{ maxWidth: "840px" }}
style={{ maxWidth: "820px" }}
language={language}
title="Get slate by ID"
onLanguageChange={this.props.onLanguageChange}
@ -120,7 +117,7 @@ export default class APIDocsGetSlate extends React.Component {
<br />
<CodeBlock
children={EXAMPLE_RESPONSE(APIKey, slateId)}
style={{ maxWidth: "840px" }}
style={{ maxWidth: "820px" }}
language="json"
title="Get slate by ID response"
/>

View File

@ -9,7 +9,6 @@ const EXAMPLE_CODE_JS = (key) => `const response = await fetch('https://slate.ho
method: 'POST',
headers: {
'Content-Type': 'application/json',
// NOTE: your API key
Authorization: 'Basic ${key}',
},
body: JSON.stringify({ data: {
@ -21,60 +20,46 @@ const json = await response.json();
console.log(json);`;
const EXAMPLE_CODE_PY = (key) => `import requests
url = 'https://slate.host/api/v1/get'
import json as JSON
url = "https://slate.host/api/v1/get"
headers = {
'content-type': 'application/json',
'Authorization': '${key}'
}
"content-type": "application/json",
"Authorization": "SLA8d5a9c28-cb14-4886-b4ac-5575da2d90aaTE",
}
json = {'private': 'true'}
json = {"private": "false"}
r = requests.post(url, headers=headers, json=json)
get = requests.post(url, headers=headers, json=json)
print(r.text)`;
const DocPage = (props) => {
let language = props.language;
let APIKey = props.APIKey;
if (language === "javascript") {
return (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 64 }}
label="Get all slates"
description="This API request returns all of your public slates"
/>
<CodeBlock
children={EXAMPLE_CODE_JS(APIKey)}
language={language}
style={{ maxWidth: "840px" }}
topBar="true"
title="Get all slates"
/>
</React.Fragment>
);
}
if (language === "python") {
return (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 64 }}
label="Get all slates"
description="This API request returns all of your public slates"
/>
<CodeBlock
children={EXAMPLE_CODE_PY(APIKey)}
language={language}
style={{ maxWidth: "840px" }}
/>
</React.Fragment>
);
}
};
print(JSON.dumps(get.json(), indent=2))`;
export default class APIDocsGet extends React.Component {
render() {
return <DocPage language={this.props.language} APIKey={this.props.APIKey} />;
let APIKey = this.props.APIKey;
let language = this.props.language;
let code = {
javascript: EXAMPLE_CODE_JS(APIKey),
python: EXAMPLE_CODE_PY(APIKey),
};
return (
<React.Fragment>
<System.DescriptionGroup
style={{ maxWidth: 640, marginTop: 64 }}
label="Get all slates"
description="This API request returns all of your slates, and can optionally return your private slates as well. If the request body is omitted, the request will return only your public slates by default."
/>
<CodeBlock
children={code}
language={language}
style={{ maxWidth: "820px" }}
title="Get all slates"
multiLang="true"
onLanguageChange={this.props.onLanguageChange}
/>
</React.Fragment>
);
}
}

View File

@ -6,8 +6,7 @@ import CodeBlock from "~/components/system/CodeBlock";
import { css } from "@emotion/react";
const EXAMPLE_CODE_JS = (key, slateId) => {
return `
const SLATE_ID = "${slateId}"
return `const SLATE_ID = "${slateId}"
const slateResponseData = getSlateById(SLATE_ID);
@ -18,7 +17,6 @@ const response = await fetch('https://slate.host/api/v1/update-slate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// NOTE: your API key
Authorization: 'Basic ${key}',
},
body: JSON.stringify({ data: slate })
@ -28,56 +26,53 @@ const json = await response.json();
console.log(json);`;
};
const EXAMPLE_CODE_PY = (key, slateId) => `# STILL BEING CODED AND TESTED`;
const EXAMPLE_CODE_PY = (key, slateId) =>
`headers = {
"content-type": "application/json",
"Authorization": "Basic ${key}",
}
json = {"id": "${slateId}"}
get_slate = requests.post(
"https://slate.host/api/v1/get-slate", headers=headers, json=json
)
const DocPage = (props) => {
let language = props.language;
let key = props.APIKey;
let slateId = props.slateId;
if (language === "javascript") {
return (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 64 }}
label="Update slate by ID"
description="This API endpoint will allow you to update a slate by sending your current locally modified version. This API endpoint allows for full customization so be careful."
/>
<CodeBlock
children={EXAMPLE_CODE_JS(key, slateId)}
style={{ maxWidth: "840px" }}
language={language}
topBar="true"
title="Update slate by ID"
/>
</React.Fragment>
);
}
if (language === "python") {
return (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 64 }}
label="Update slate by ID"
description="This API endpoint will allow you to update a slate by sending your current locally modified version. This API endpoint allows for full customization so be careful."
/>
<CodeBlock
children={EXAMPLE_CODE_PY(key, slateId)}
style={{ maxWidth: "840px" }}
language={language}
/>
</React.Fragment>
);
}
};
get_slate_response = get_slate.json()
slate = get_slate_response["slate"]
# change a field in the slate response
slate["data"]["objects"][0]["title"] = "i changed the title"
url = "https://slate.host/api/v1/update-slate"
updated_data = {"data": slate}
update_slate = requests.post(url, headers=headers, json=updated_data)`;
export default class APIDocsUpdateSlate extends React.Component {
render() {
let language = this.props.language;
let key = this.props.APIKey;
let slateId = this.props.slateId;
let code = {
javascript: EXAMPLE_CODE_JS(key, slateId),
python: EXAMPLE_CODE_PY(key, slateId),
};
return (
<DocPage
language={this.props.language}
APIKey={this.props.APIKey}
slateId={this.props.slateId}
/>
<React.Fragment>
<System.DescriptionGroup
style={{ maxWidth: 640, marginTop: 64 }}
label="Update slate by ID"
description="This API endpoint allows you to modify a slate by saving the response from get-slate, modifying it, and sending it back. Be VERY careful modifying the data field of the JSON because it allows for full customization. If you change the wrong fields, it will break you slate when the database JSONB is updated. As a rule of thumb, if a field looks like something Slate would generate (keys, hashes, id's), don't change it."
/>
<CodeBlock
children={code}
style={{ maxWidth: "820px" }}
language={language}
title="Update slate by ID"
multiLang="true"
onLanguageChange={this.props.onLanguageChange}
/>
</React.Fragment>
);
}
}

View File

@ -17,7 +17,6 @@ data.append("data", file);
const response = await fetch(url, {
method: 'POST',
headers: {
// NOTE: your API key
Authorization: 'Basic ${key}',
},
body: data
@ -25,66 +24,42 @@ const response = await fetch(url, {
const json = await response.json();
// NOTE: the URL to your asset will be available in the JSON response.
console.log(json);`;
const EXAMPLE_CODE_PY = (key, slateId) => `import requests
const EXAMPLE_CODE_PY = (key, slateId) => `url = "https://uploads.slate.host/api/public/${slateId}"
files = {"file": open("example-file.txt", "rb")}
headers = {"Authorization": "Basic ${key}"}
url = 'https://uploads.slate.host/api/public/${slateId}'
files = {'file': open('example-file.txt', 'rb')}
headers = {'Authorization': 'Basic ${key}'}
r = requests.post(url, headers=headers, files=files)
print(r.text)`;
const DocPage = (props) => {
let language = props.language;
let key = props.APIKey;
let slateId = props.slateId;
if (language === "javascript") {
return (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 64 }}
label="Upload to slate by Id"
description="This API endpoint will add a file object to your slate."
/>
<CodeBlock
children={EXAMPLE_CODE_JS(key, slateId)}
style={{ maxWidth: "840px" }}
language={language}
topBar="true"
title="Upload to slate by Id"
/>
</React.Fragment>
);
}
if (language === "python") {
return (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 64 }}
label="Upload to slate by Id"
description="This API endpoint will add a file object to your slate."
/>
<CodeBlock
children={EXAMPLE_CODE_PY(key, slateId)}
style={{ maxWidth: "840px" }}
language={language}
/>
</React.Fragment>
);
}
};
r = requests.post(url, headers=headers, files=files)`;
export default class APIDocsUploadToSlate extends React.Component {
render() {
let language = this.props.language;
let key = this.props.APIKey;
let slateId = this.props.slateId;
let code = {
javascript: EXAMPLE_CODE_JS(key, slateId),
python: EXAMPLE_CODE_PY(key, slateId),
};
return (
<DocPage
language={this.props.language}
APIKey={this.props.APIKey}
slateId={this.props.slateId}
/>
<React.Fragment>
<System.DescriptionGroup
style={{ maxWidth: 640, marginTop: 64 }}
label="Upload to slate by Id"
description={
'This API endpoint allows you to upload file(s) to your slate. This uses our data transfer microservice to interact with Textile Buckets and upload data to the IPFS/Filecoin network.'
}
/>
<CodeBlock
children={code}
style={{ maxWidth: "820px" }}
language={language}
title="Upload to slate by ID"
multiLang="true"
onLanguageChange={this.props.onLanguageChange}
/>
</React.Fragment>
);
}
}

View File

@ -363,12 +363,29 @@ export default class SceneSettingsDeveloper extends React.Component {
<APIDocsUploadToSlate language={lang} APIKey={APIKey} slateId={slateId} />
*/}
<React.Fragment>
<APIDocsGet
language={lang}
APIKey={APIKey}
onLanguageChange={this._handleChangeLanguage}
/>
<APIDocsGetSlate
language={lang}
APIKey={APIKey}
slateId={slateId}
onLanguageChange={this._handleChangeLanguage}
/>
<APIDocsUpdateSlate
language={lang}
APIKey={APIKey}
slateId={slateId}
onLanguageChange={this._handleChangeLanguage}
/>
<APIDocsUploadToSlate
language={lang}
APIKey={APIKey}
slateId={slateId}
onLanguageChange={this._handleChangeLanguage}
/>
</React.Fragment>
</ScenePage>
);