Skip to content

Commit fae8de1

Browse files
johnathonroachjohnathonroach
authored
feat: nft up docs (#1837)
* add react-device-detect * create arch switch content display for md files * create nftup docs page * update quickstart with nftup info * refine arch-switch component
1 parent cece7ce commit fae8de1

5 files changed

Lines changed: 91 additions & 2 deletions

File tree

‎packages/website/components/mdx/arch-switch.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import { osName } from 'react-device-detect'
3+
4+
/**
5+
* @param {any} props
6+
*/
7+
export function ArchSwitch({ children }) {
8+
return (
9+
<div className="arch-container mt-6">
10+
{children.length &&
11+
children.map((/** @type {{ props: { case: string; }; }} */ element) => {
12+
if (
13+
!element.props ||
14+
!element.props.case ||
15+
element.props.case === osName
16+
) {
17+
return element
18+
}
19+
20+
return null
21+
})}
22+
</div>
23+
)
24+
}

‎packages/website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"nft.storage": "^6.0.0",
3030
"rc-tooltip": "^5.1.1",
3131
"react": "17.0.2",
32+
"react-device-detect": "^2.2.2",
3233
"react-dom": "17.0.2",
3334
"react-icons": "^4.3.1",
3435
"react-if": "4.0.1",

‎packages/website/pages/docs/how-to/meta.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
"store-directory": "Store a directory of files",
77
"get-status": "Get upload status",
88
"ucan": "Use UCAN tokens for delegated authorization",
9-
"pinning-service": "Pinning Services API"
10-
}
9+
"pinning-service": "Pinning Services API",
10+
"nftup": "Upload with NFTUp"
11+
}

‎packages/website/pages/docs/how-to/nftup.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Upload files and directories with NFTUp
3+
---
4+
5+
import { ArchSwitch } from 'components/mdx/arch-switch';
6+
import Callout from 'nextra-theme-docs/callout';
7+
8+
# Upload files and directories with NFTUp
9+
10+
NFTUp is the easiest way for content creators to upload their metadata and assets, ready to be minted into NFTs by smart contracts and then traded on marketplaces, and browsed in galleries.
11+
12+
<ArchSwitch>
13+
<Callout case="Mac OS" emoji="💡">
14+
**Download for Mac OS**
15+
- [Mac Universal](https://github.com/nftstorage/nftup/releases/download/v1.0.0-beta.0/NFT-UP-1.0.0-beta.0-universal.dmg)
16+
- [Mac M1](https://github.com/nftstorage/nftup/releases/download/v1.0.0-beta.0/NFT-UP-1.0.0-beta.0-arm64.dmg)
17+
- [Mac x86](https://github.com/nftstorage/nftup/releases/download/v1.0.0-beta.0/NFT-UP-1.0.0-beta.0.dmg)
18+
</Callout>
19+
<Callout case="Windows" emoji="💡">
20+
**Download for Windows**
21+
- [Windows](https://github.com/nftstorage/nftup/releases/download/v1.0.0-beta.0/NFT-UP-Setup-1.0.0-beta.0.exe)
22+
</Callout>
23+
[All Releases](https://github.com/nftstorage/nftup/releases)
24+
</ArchSwitch>
25+
26+
While your download is happening, here is a quick preview of what you can expect. First you'll download the disk image and drag and drop NFTUp to your Applications folder.
27+
28+
<img width="652" alt="Install Application" src="https://user-images.githubusercontent.com/253/161602798-50da3381-8626-43ca-942c-9ca84c202c19.png"/>
29+
30+
Then double click to launch the application and you'll see the main screen.
31+
32+
<img width="992" alt="Screenshot 2022-03-31 at 15 09 35" src="https://user-images.githubusercontent.com/253/161609435-9b1ba803-ea1b-48dd-a721-e9250f5ad2d1.png"/>
33+
34+
Now you can drag and drop some files or folders on it. You might be prompted for your NFT.Storage API key. You can [get your key on your account page](https://nft.storage/manage/).
35+
36+
<img width="593" alt="Screen Shot 2022-04-04 at 11 54 35 AM" src="https://user-images.githubusercontent.com/253/161612668-5df79ddc-2e75-484c-acbd-a8b04b2b69e7.png"/>
37+
38+
You can upload any file structure you want. If you are doing something like a HashLips build, you can upload the assets and metadata at the same time by dragging them both to the upload box.
39+
40+
<img width="992" alt="Screenshot 2022-03-31 at 15 14 17" src="https://user-images.githubusercontent.com/253/161602971-2ed0e84b-3f53-47a6-b997-fa903b88c5e7.png"/>
41+
42+
Once the upload is complete, you'll get a link to your content. Click it to fetch your data from the IPFS network.
43+
44+
<img width="992" alt="Screenshot 2022-03-31 at 15 19 49" src="https://user-images.githubusercontent.com/253/161602972-9fc4fee3-d22c-45b2-8289-3d63279c0962.png"/>
45+
46+
Now you are ready to set your [smart contract base URL](https://nft.storage/blog/post/2022-02-15-base-url-apis/), or otherwise share your content with NFT minting services.
47+
48+
Enjoy NFTUp, and if you want to contribute, [the code is available on GitHub.](https://github.com/nftstorage/nftup)

‎packages/website/pages/docs/quickstart.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ NFT.Storage is especially useful for individual creators who are minting NFTs, o
1616

1717
1. [Creating an NFT.Storage account](#create-an-account)
1818
1. [Uploading a file via the website](#uploading-a-file-using-the-website)
19+
1. [Uploading files & directories via the NFTUp application](#uploading-files--directories-via-the-nftup-application)
1920
1. [Getting a free API token](#get-an-api-token)
2021
1. [Using the JavaScript API](#using-the-javascript-api)
2122

@@ -63,6 +64,20 @@ Once you're logged in, you can get started with NFT.Storage right away by upload
6364

6465
Once the upload is complete, you'll be able to view your file in the [file listing page](https://nft.storage/files/).
6566

67+
### Uploading files & directories via the NFTUp application
68+
69+
NFTUp is the easiest way for content creators to upload their metadata and assets, ready to be minted into NFTs by smart contracts and then traded on marketplaces, and browsed in galleries.
70+
71+
<img width="992" alt="Screenshot 2022-03-31 at 15 09 35" src="https://user-images.githubusercontent.com/253/161609435-9b1ba803-ea1b-48dd-a721-e9250f5ad2d1.png"/>
72+
73+
1. [Download and install](./how-to/nftup/) NFTUp for your OS
74+
1. Launch the application.
75+
1. Drag and drop some files or folders on it. You might be prompted for your NFT.Storage API key. You can [get your key on your account page](https://nft.storage/manage/).
76+
1. Upload any file structure you want. If you are doing something like a HashLips build, you can upload the assets and metadata at the same time by dragging them both to the upload box.
77+
1. Once the upload is complete, you'll get a link to your content. Click it to fetch your data from the IPFS network.
78+
1. Set your [smart contract base URL](https://nft.storage/blog/post/2022-02-15-base-url-apis/), or otherwise share your content with NFT minting services.
79+
1. Contribute on [GitHub.](https://github.com/nftstorage/nftup)
80+
6681
### Get an API Token
6782

6883
It only takes a few moments to get a free API token from NFT.Storage. This token enables you to interact with the NFT.Storage service without using the main website, enabling you to incorporate files stored using NFT.Storage directly into your applications and services.

0 commit comments

Comments
 (0)