-
Notifications
You must be signed in to change notification settings - Fork 62
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add helia-car-creator example #72
Merged
Merged
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
f86bfb4
feat: add helia-car-creator example
SgtPooki bc31580
Merge branch 'main' into feat/helia-create-car
SgtPooki c1b201b
chore: create lint:fix script
SgtPooki 8ae0150
fix: npm run lint:fix
SgtPooki af4372d
fix: lint succeeds
SgtPooki 91183ef
docs(create-car): update readme and demo video
SgtPooki 455ea2d
test(create-car): create car file test
SgtPooki d4e7d5a
fix(create-car): unset rootCID on unmount
SgtPooki 417d7b3
test(create-car): ensure all car cids match
SgtPooki 91dbc7f
docs(create-car): fix dev instructions
SgtPooki c0ef127
docs(create-car): example page title
SgtPooki File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,3 +12,5 @@ yarn.lock | |
test-results | ||
playwright-report | ||
.parcel-cache | ||
.envrc | ||
.tool-versions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
examples/helia-create-car/.github/pull_request_template.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
# ⚠️ IMPORTANT ⚠️ | ||
|
||
# Please do not create a Pull Request for this repository | ||
|
||
The contents of this repository are automatically synced from the parent [Helia Examples Project](https://github.com/ipfs-examples/helia-examples) so any changes made to the standalone repository will be lost after the next sync. | ||
|
||
Please open a PR against [IPFS Examples](https://github.com/ipfs-examples/helia-examples) instead. | ||
|
||
## Contributing | ||
|
||
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. | ||
|
||
1. Fork the [Helia Examples Project](https://github.com/ipfs-examples/helia-examples) | ||
2. Create your Feature Branch (`git checkout -b feature/amazing-example`) | ||
3. Commit your Changes (`git commit -a -m 'feat: add some amazing example'`) | ||
4. Push to the Branch (`git push origin feature/amazing-example`) | ||
5. Open a Pull Request |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
name: pull | ||
|
||
on: | ||
workflow_dispatch | ||
|
||
jobs: | ||
sync: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v2 | ||
- name: Pull from another repository | ||
uses: ipfs-examples/actions-pull-directory-from-repo@main | ||
with: | ||
source-repo: ipfs-examples/helia-examples | ||
source-folder-path: examples/${{ github.event.repository.name }} | ||
source-branch: main | ||
target-branch: main | ||
git-username: github-actions | ||
git-email: github-actions@github.com |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? | ||
/test-results/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
<p align="center"> | ||
<a href="https://github.com/ipfs/helia" title="Helia"> | ||
<img src="https://github.com/raw/ipfs/helia/main/assets/helia.png" alt="Helia logo" width="300" /> | ||
</a> | ||
</p> | ||
|
||
<h3 align="center"><b>Helia with React+Vite</b></h3> | ||
|
||
<p align="center"> | ||
<img src="https://github.com/raw/jlord/forkngo/gh-pages/badges/cobalt.png" width="200"> | ||
<br> | ||
<a href="https://ipfs.github.io/helia/modules/helia.html">Explore the docs</a> | ||
· | ||
<a href="https://codesandbox.io/p/sandbox/infallible-haibt-e3lcd4">View Demo</a> | ||
· | ||
<a href="https://github.com/ipfs-examples/helia-examples/issues">Report Bug</a> | ||
· | ||
<a href="https://github.com/ipfs-examples/helia-examples/issues">Request Feature/Example</a> | ||
</p> | ||
|
||
## Table of Contents | ||
|
||
- [Table of Contents](#table-of-contents) | ||
- [About The Project](#about-the-project) | ||
- [Getting Started](#getting-started) | ||
- [Prerequisites](#prerequisites) | ||
- [Installation and Running example](#installation-and-running-example) | ||
- [Usage](#usage) | ||
- [Documentation](#documentation) | ||
- [Contributing](#contributing) | ||
- [Want to hack on IPFS?](#want-to-hack-on-ipfs) | ||
|
||
## About The Project | ||
|
||
- Read the [docs](https://ipfs.github.io/helia/modules/helia.html) | ||
- Look into other [examples](https://github.com/ipfs-examples/helia-examples) to learn how to spawn a Helia node in Node.js and in the Browser | ||
- Visit https://dweb-primer.ipfs.io to learn about IPFS and the concepts that underpin it | ||
- Head over to https://proto.school to take interactive tutorials that cover core IPFS APIs | ||
- Check out https://docs.ipfs.io for tips, how-tos and more | ||
- See https://blog.ipfs.io for news and more | ||
- Need help? Please ask 'How do I?' questions on https://discuss.ipfs.io | ||
|
||
## Getting Started | ||
|
||
### Prerequisites | ||
|
||
Make sure you have installed all of the following prerequisites on your development machine: | ||
|
||
- Git - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed. | ||
- Node.js - [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager. | ||
|
||
### Installation and Running example | ||
|
||
```console | ||
> npm install | ||
|
||
// then | ||
> npm start | ||
or | ||
> npm run dev | ||
``` | ||
To run the test | ||
|
||
```console | ||
npx playwright install | ||
npm run test | ||
``` | ||
|
||
Now open your browser at `http://localhost:3000` | ||
|
||
## Usage | ||
|
||
In this example, you will find a boilerplate you can use to guide yourself into creating a car file with helia. | ||
|
||
You should see the following: | ||
|
||
![](./public/helia-create-car-demo.gif) | ||
|
||
_For more examples, please refer to the [Documentation](#documentation)_ | ||
|
||
## Documentation | ||
|
||
- [IPFS Primer](https://dweb-primer.ipfs.io/) | ||
- [IPFS Docs](https://docs.ipfs.io/) | ||
- [Tutorials](https://proto.school) | ||
- [More examples](https://github.com/ipfs-examples/helia-examples) | ||
- [API - Helia](https://ipfs.github.io/helia/modules/helia.html) | ||
- [API - @helia/unixfs](https://ipfs.github.io/helia-unixfs/modules/helia.html) | ||
|
||
## Contributing | ||
|
||
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. | ||
|
||
1. Fork the IPFS Project | ||
2. Create your Feature Branch (`git checkout -b feature/amazing-feature`) | ||
3. Commit your Changes (`git commit -a -m 'feat: add some amazing feature'`) | ||
4. Push to the Branch (`git push origin feature/amazing-feature`) | ||
5. Open a Pull Request | ||
|
||
## Want to hack on IPFS? | ||
|
||
[![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md) | ||
|
||
The IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out: | ||
|
||
Read the [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md) and [JavaScript Contributing Guidelines](https://github.com/ipfs/community/blob/master/CONTRIBUTING_JS.md). | ||
|
||
- **Check out existing issues** The [issue list](https://github.com/ipfs/helia/issues) has many that are marked as ['help wanted'](https://github.com/ipfs/helia/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22) or ['difficulty:easy'](https://github.com/ipfs/helia/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Adifficulty%3Aeasy) which make great starting points for development, many of which can be tackled with no prior IPFS knowledge | ||
- **Look at the [Helia Roadmap](https://github.com/ipfs/helia/blob/main/ROADMAP.md)** This are the high priority items being worked on right now | ||
- **Perform code reviews** More eyes will help | ||
a. speed the project along | ||
b. ensure quality, and | ||
c. reduce possible future bugs | ||
- **Add tests**. There can never be enough tests | ||
|
||
[cid]: https://docs.ipfs.tech/concepts/content-addressing "Content Identifier" | ||
[Uint8Array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array | ||
[libp2p]: https://libp2p.io |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Helia Create Car Example </title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.jsx"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
{ | ||
"name": "helia-create-car", | ||
"version": "0.0.0", | ||
"description": "Using Helia with vite - upload files and get a car file back", | ||
"private": true, | ||
"type": "module", | ||
"scripts": { | ||
"clean": "rimraf ./dist", | ||
"dev": "vite", | ||
"start": "vite", | ||
"build": "vite build", | ||
"preview": "vite preview", | ||
"test": "npm run build && test-browser-example test" | ||
}, | ||
"dependencies": { | ||
"@helia/car": "^1.0.0", | ||
"@helia/unixfs": "^1.4.1", | ||
"@ipld/car": "^5.1.1", | ||
"helia": "^1.3.8", | ||
"prop-types": "^15.8.1", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"rimraf": "^5.0.0" | ||
}, | ||
"devDependencies": { | ||
"@playwright/test": "^1.31.2", | ||
"@types/react": "^18.0.28", | ||
"@types/react-dom": "^18.0.11", | ||
"@vitejs/plugin-react": "^4.0.0", | ||
"test-ipfs-example": "^1.0.0", | ||
"vite": "^4.2.0" | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
#root { | ||
max-width: 1280px; | ||
margin: 0 auto; | ||
padding: 2rem; | ||
text-align: center; | ||
} | ||
|
||
.logo { | ||
height: 6em; | ||
padding: 1.5em; | ||
will-change: filter; | ||
transition: filter 300ms; | ||
} | ||
.logo:hover { | ||
filter: drop-shadow(0 0 2em #646cffaa); | ||
} | ||
.logo.react:hover { | ||
filter: drop-shadow(0 0 2em #61dafbaa); | ||
} | ||
|
||
@keyframes logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
a:nth-of-type(2) .logo { | ||
animation: logo-spin infinite 20s linear; | ||
} | ||
} | ||
|
||
.card { | ||
padding: 2em; | ||
} | ||
|
||
.read-the-docs { | ||
color: #888; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { React } from 'react' | ||
import './App.css' | ||
import CarCreator from '@/components/CarCreator' | ||
import FileUploader from '@/components/FileUploader' | ||
import { useHelia } from '@/hooks/useHelia' | ||
import FileProvider from '@/provider/FileProvider' | ||
|
||
function App () { | ||
const { error, starting } = useHelia() | ||
|
||
let statusColor = 'green' | ||
if (error) { | ||
statusColor = 'red' | ||
} else if (starting) { | ||
statusColor = 'yellow' | ||
} | ||
|
||
return ( | ||
<div className="App"> | ||
<div | ||
id="heliaStatus" | ||
style={{ | ||
border: `4px solid ${statusColor}`, | ||
paddingBottom: '4px', | ||
width: '100%' | ||
}} | ||
>Helia Status</div> | ||
<br/> | ||
<FileProvider> | ||
<FileUploader /> | ||
<CarCreator /> | ||
</FileProvider> | ||
</div> | ||
) | ||
} | ||
|
||
export default App |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
*.log*
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
idk why these were all there. probably from the other example i copied from