Skip to content
This repository was archived by the owner on Jan 12, 2024. It is now read-only.

Commit 4ab758d

Browse files
oliveriosousaoliveriosousa
authored
feat: add example with Lit (#12)
* feat: add example with lit * chore: rename images to img * chore: update ipfs dependency
1 parent abc267e commit 4ab758d

File tree

11 files changed

+273
-1
lines changed

11 files changed

+273
-1
lines changed

‎examples/browser-create-react-app/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ Once the IPFS node is set up, `App.js` displays its ident and its version number
109109

110110
> _Side note: The PeerId of the IPFS node is [the multihash of the public key of this node](https://github.com/libp2p/specs/blob/master/peer-ids/peer-ids.md#peer-ids). The public-private key pair of a node is generated by typing `ipfs init`._
111111
112-
![Screen shot of the js ipfs node id info](./images/screenshot.png)
112+
![Screen shot of the js ipfs node id info](./img/screenshot.png)
113113

114114
**Note**: this example is useful to learn how to spawn IPFS from a web page. It is also possible to [spawn an IPFS daemon from the command line](https://docs.ipfs.io/install/command-line/) with `ipfs daemon`. While self-hosting is advised, one can also delegate IPFS operations to a third-party like Infura. See tutorials [here](https://blog.infura.io/part-2-getting-started-with-ipfs-on-infura/) and [here](https://blog.infura.io/part-2-getting-started-with-ipfs-on-infura/).
115115

‎examples/browser-create-react-app/images/screenshot.png renamed to ‎examples/browser-create-react-app/img/screenshot.png

File renamed without changes.

‎examples/browser-lit/README.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<p align="center">
2+
<a href="https://js.ipfs.io" title="JS IPFS">
3+
<img src="https://ipfs.io/ipfs/Qme6KJdKcp85TYbLxuLV7oQzMiLremD7HMoXLZEmgo6Rnh/js-ipfs-sticker.png" alt="IPFS in JavaScript logo" width="244" />
4+
</a>
5+
</p>
6+
7+
<h3 align="center"><b>IPFS Lit App</b></h3>
8+
9+
<p align="center">
10+
<b><i>Using js-ipfs with web components (lit)</i></b>
11+
<br />
12+
<br />
13+
<img src="https://raw.githubusercontent.com/jlord/forkngo/gh-pages/badges/cobalt.png" width="200">
14+
<br>
15+
<a href="https://github.com/ipfs/js-ipfs/tree/master/docs">Explore the docs</a>
16+
·
17+
<a href="https://codesandbox.io/">View Demo</a>
18+
·
19+
<a href="https://github.com/ipfs-examples/js-ipfs-examples/issues">Report Bug</a>
20+
·
21+
<a href="https://github.com/ipfs-examples/js-ipfs-examples/issues">Request Feature/Example</a>
22+
</p>
23+
24+
## Table of Contents
25+
26+
- [Table of Contents](#table-of-contents)
27+
- [About The Project](#about-the-project)
28+
- [Getting Started](#getting-started)
29+
- [Pre requisites](#pre-requisites)
30+
- [Installation and Running example](#installation-and-running-example)
31+
- [Usage](#usage)
32+
- [Documentation](#documentation)
33+
- [Contributing](#contributing)
34+
- [Want to hack on IPFS?](#want-to-hack-on-ipfs)
35+
36+
## About The Project
37+
38+
- Read the [docs](https://github.com/ipfs/js-ipfs/tree/master/docs)
39+
- Look into other [examples](https://github.com/ipfs/js-ipfs/tree/master/examples) to learn how to spawn an IPFS node in Node.js and in the Browser
40+
- Consult the [Core API docs](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api) to see what you can do with an IPFS node
41+
- Visit https://dweb-primer.ipfs.io to learn about IPFS and the concepts that underpin it
42+
- Head over to https://proto.school to take interactive tutorials that cover core IPFS APIs
43+
- Check out https://docs.ipfs.io for tips, how-tos and more
44+
- See https://blog.ipfs.io for news and more
45+
- Need help? Please ask 'How do I?' questions on https://discuss.ipfs.io
46+
47+
## Getting Started
48+
49+
### Pre requisites
50+
51+
Make sure you have installed all of the following prerequisites on your development machine:
52+
53+
- Git - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed.
54+
- Node.js - [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager.
55+
56+
### Installation and Running example
57+
58+
```console
59+
> npm install
60+
> npm start
61+
```
62+
63+
Now open your browser at `http://localhost:8888`
64+
65+
## Usage
66+
67+
This is a minimal demonstration of how to use `js-ipfs` in a lit app.
68+
69+
![screenshot of the js ipfs node id info](./img/screenshot.png)
70+
71+
_For more examples, please refer to the [Documentation](#documentation)_
72+
73+
## Documentation
74+
75+
- [Config](https://docs.ipfs.io/)
76+
- [Core API](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api)
77+
- [Examples](https://github.com/ipfs/js-ipfs/tree/master/examples)
78+
- [Development](https://github.com/ipfs/js-ipfs/blob/master/docs/DEVELOPMENT.md)
79+
80+
## Contributing
81+
82+
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**.
83+
84+
1. Fork the IPFS Project
85+
2. Create your Feature Branch (`git checkout -b feature/amazing-feature`)
86+
3. Commit your Changes (`git commit -a -m 'feat: add some amazing feature'`)
87+
4. Push to the Branch (`git push origin feature/amazing-feature`)
88+
5. Open a Pull Request
89+
90+
## Want to hack on IPFS?
91+
92+
[![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md)
93+
94+
The IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out:
95+
96+
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).
97+
98+
- **Check out existing issues** The [issue list](https://github.com/ipfs/js-ipfs/issues) has many that are marked as ['help wanted'](https://github.com/ipfs/js-ipfs/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22) or ['difficulty:easy'](https://github.com/ipfs/js-ipfs/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
99+
- **Look at the [IPFS Roadmap](https://github.com/ipfs/roadmap)** This are the high priority items being worked on right now
100+
- **Perform code reviews** More eyes will help
101+
a. speed the project along
102+
b. ensure quality, and
103+
c. reduce possible future bugs.
104+
- **Add tests**. There can never be enough tests.
105+
- **Join the [Weekly Core Implementations Call](https://github.com/ipfs/team-mgmt/issues/992)** it's where everyone discusses what's going on with IPFS and what's next

‎examples/browser-lit/favicon.ico

33.7 KB
Binary file not shown.

‎examples/browser-lit/img/screenshot.png

139 KB
Loading

‎examples/browser-lit/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>js-ipfs with lit</title>
8+
9+
<link rel="shortcut icon" href="favicon.ico" />
10+
<script defer type="module" src="./src/index.js"></script>
11+
</head>
12+
<body class="montserrat f5">
13+
<header class="flex items-center pa3 bg-navy bb bw3 b--aqua">
14+
<a href="https://ipfs.io" title="home">
15+
<img
16+
alt="IPFS logo"
17+
src="./public/ipfs-logo.svg"
18+
style="height: 50px"
19+
class="v-top"
20+
/>
21+
</a>
22+
</header>
23+
24+
<main class="pa4-l bg-snow mw7 mv5 center pa4">
25+
<ipfs-info></ipfs-info>
26+
</main>
27+
</body>
28+
</html>

‎examples/browser-lit/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "example-browser-lit",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "A minimal demonstration of how to use js-ipfs with lit",
6+
"keywords": [],
7+
"license": "MIT",
8+
"scripts": {
9+
"clean": "rimraf ./dist ./.cache ./.parcel-cache",
10+
"build": "parcel build index.html --no-scope-hoist",
11+
"serve": "parcel serve index.html --open -p 8888",
12+
"start": "npm run serve",
13+
"test": "npm run build && playwright test tests"
14+
},
15+
"browserslist": "last 1 Chrome version",
16+
"dependencies": {
17+
"ipfs": "^0.58.1",
18+
"ipfs-css": "^1.3.0",
19+
"lit": "^2.0.0-rc.2",
20+
"tachyons": "^4.12.0"
21+
},
22+
"devDependencies": {
23+
"@babel/core": "^7.14.8",
24+
"@playwright/test": "^1.12.3",
25+
"parcel": "latest",
26+
"playwright": "^1.12.3",
27+
"rimraf": "^3.0.2",
28+
"test-util-ipfs-example": "^1.0.2"
29+
}
30+
}

‎examples/browser-lit/public/ipfs-logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/browser-lit/src/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
'use strict'
2+
3+
// Global CSS
4+
import "ipfs-css";
5+
import 'tachyons'
6+
7+
// Components
8+
import './ipfs'

‎examples/browser-lit/src/ipfs.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
'use strict'
2+
3+
import {html, LitElement} from 'lit';
4+
import IPFS from 'ipfs'
5+
6+
export class IPFSInfo extends LitElement {
7+
static get properties() {
8+
return {
9+
_ipfs: {state: true},
10+
_id: {state: true},
11+
_version: {state: true},
12+
_agentVersion: {state: true}
13+
}
14+
}
15+
16+
constructor() {
17+
super();
18+
19+
this._ipfs = null;
20+
this._id = null;
21+
this._version = null;
22+
this._agentVersion = null;
23+
}
24+
25+
connectedCallback() {
26+
super.connectedCallback()
27+
28+
this.initIPFS();
29+
}
30+
31+
async initIPFS() {
32+
const ipfs = await IPFS.create();
33+
const id = await ipfs.id();
34+
const version = await ipfs.version();
35+
36+
this._ipfs = ipfs
37+
this._id = id.id;
38+
this._agentVersion = id.agentVersion;
39+
this._version = version.version;
40+
}
41+
42+
render() {
43+
if (!this._ipfs) {
44+
return html`Loading...`;
45+
}
46+
47+
const info = {
48+
'Id': this._id,
49+
'Agent Version': this._agentVersion,
50+
'Version': this._version,
51+
}
52+
53+
return html`
54+
<section>
55+
<h1 data-test='title'>Connected to IPFS</h1>
56+
<div>
57+
${Object.entries(info).map(([key, value]) => {
58+
return html`
59+
<div>
60+
<h2>${key}</h2>
61+
<div data-test=${key.replace(/\s+/g, '')}>${value}</div>
62+
</div>
63+
`
64+
}
65+
)}
66+
</div>
67+
</section>
68+
`;
69+
}
70+
}
71+
72+
customElements.define('ipfs-info', IPFSInfo);

‎examples/browser-lit/tests/test.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const { test, expect } = require('@playwright/test');
2+
const { playwright } = require('test-util-ipfs-example');
3+
4+
// Setup
5+
const play = test.extend({
6+
...playwright.servers(),
7+
});
8+
9+
play.describe('integrate ipfs with lit:', () => {
10+
// DOM
11+
const title = "[data-test=title]"
12+
const id = "[data-test=Id]"
13+
const agentVersion = "[data-test=AgentVersion]"
14+
const version = "[data-test=Version]"
15+
16+
play.beforeEach(async ({servers, page}) => {
17+
await page.goto(`http://localhost:${servers[0].port}/`);
18+
})
19+
20+
play('should properly initialized a IPFS node and print some properties', async ({ page }) => {
21+
await page.waitForSelector(title)
22+
23+
expect(await page.textContent(title)).toContain("Connected to IPFS");
24+
expect(await page.isVisible(id)).toBeTruthy();
25+
expect(await page.isVisible(agentVersion)).toBeTruthy();
26+
expect(await page.isVisible(version)).toBeTruthy();
27+
});
28+
});

0 commit comments

Comments
 (0)