diff --git a/examples/browser-create-react-app/README.md b/examples/browser-create-react-app/README.md index 0870c0a5..fdcf3bf9 100755 --- a/examples/browser-create-react-app/README.md +++ b/examples/browser-create-react-app/README.md @@ -109,7 +109,7 @@ Once the IPFS node is set up, `App.js` displays its ident and its version number > _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`._ -![Screen shot of the js ipfs node id info](./images/screenshot.png) +![Screen shot of the js ipfs node id info](./img/screenshot.png) **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/). diff --git a/examples/browser-create-react-app/images/screenshot.png b/examples/browser-create-react-app/img/screenshot.png similarity index 100% rename from examples/browser-create-react-app/images/screenshot.png rename to examples/browser-create-react-app/img/screenshot.png diff --git a/examples/browser-lit/README.md b/examples/browser-lit/README.md new file mode 100644 index 00000000..cf146201 --- /dev/null +++ b/examples/browser-lit/README.md @@ -0,0 +1,105 @@ +

+ + IPFS in JavaScript logo + +

+ +

IPFS Lit App

+ +

+ Using js-ipfs with web components (lit) +
+
+ +
+ Explore the docs + · + View Demo + · + Report Bug + · + Request Feature/Example +

+ +## Table of Contents + +- [Table of Contents](#table-of-contents) +- [About The Project](#about-the-project) +- [Getting Started](#getting-started) + - [Pre requisites](#pre-requisites) + - [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://github.com/ipfs/js-ipfs/tree/master/docs) +- 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 +- 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 +- 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 + +### Pre requisites + +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 +> npm start +``` + +Now open your browser at `http://localhost:8888` + +## Usage + +This is a minimal demonstration of how to use `js-ipfs` in a lit app. + +![screenshot of the js ipfs node id info](./img/screenshot.png) + +_For more examples, please refer to the [Documentation](#documentation)_ + +## Documentation + +- [Config](https://docs.ipfs.io/) +- [Core API](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api) +- [Examples](https://github.com/ipfs/js-ipfs/tree/master/examples) +- [Development](https://github.com/ipfs/js-ipfs/blob/master/docs/DEVELOPMENT.md) + +## 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/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 +- **Look at the [IPFS Roadmap](https://github.com/ipfs/roadmap)** 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. +- **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 diff --git a/examples/browser-lit/favicon.ico b/examples/browser-lit/favicon.ico new file mode 100644 index 00000000..b2f1f968 Binary files /dev/null and b/examples/browser-lit/favicon.ico differ diff --git a/examples/browser-lit/img/screenshot.png b/examples/browser-lit/img/screenshot.png new file mode 100644 index 00000000..a06dd6bc Binary files /dev/null and b/examples/browser-lit/img/screenshot.png differ diff --git a/examples/browser-lit/index.html b/examples/browser-lit/index.html new file mode 100644 index 00000000..7693aafd --- /dev/null +++ b/examples/browser-lit/index.html @@ -0,0 +1,28 @@ + + + + + + + js-ipfs with lit + + + + + +
+ + IPFS logo + +
+ +
+ +
+ + diff --git a/examples/browser-lit/package.json b/examples/browser-lit/package.json new file mode 100644 index 00000000..92723d05 --- /dev/null +++ b/examples/browser-lit/package.json @@ -0,0 +1,30 @@ +{ + "name": "example-browser-lit", + "version": "1.0.0", + "private": true, + "description": "A minimal demonstration of how to use js-ipfs with lit", + "keywords": [], + "license": "MIT", + "scripts": { + "clean": "rimraf ./dist ./.cache ./.parcel-cache", + "build": "parcel build index.html --no-scope-hoist", + "serve": "parcel serve index.html --open -p 8888", + "start": "npm run serve", + "test": "npm run build && playwright test tests" + }, + "browserslist": "last 1 Chrome version", + "dependencies": { + "ipfs": "^0.58.1", + "ipfs-css": "^1.3.0", + "lit": "^2.0.0-rc.2", + "tachyons": "^4.12.0" + }, + "devDependencies": { + "@babel/core": "^7.14.8", + "@playwright/test": "^1.12.3", + "parcel": "latest", + "playwright": "^1.12.3", + "rimraf": "^3.0.2", + "test-util-ipfs-example": "^1.0.2" + } +} diff --git a/examples/browser-lit/public/ipfs-logo.svg b/examples/browser-lit/public/ipfs-logo.svg new file mode 100644 index 00000000..f8633f62 --- /dev/null +++ b/examples/browser-lit/public/ipfs-logo.svg @@ -0,0 +1 @@ + diff --git a/examples/browser-lit/src/index.js b/examples/browser-lit/src/index.js new file mode 100644 index 00000000..18f85290 --- /dev/null +++ b/examples/browser-lit/src/index.js @@ -0,0 +1,8 @@ +'use strict' + +// Global CSS +import "ipfs-css"; +import 'tachyons' + +// Components +import './ipfs' diff --git a/examples/browser-lit/src/ipfs.js b/examples/browser-lit/src/ipfs.js new file mode 100644 index 00000000..bf302a29 --- /dev/null +++ b/examples/browser-lit/src/ipfs.js @@ -0,0 +1,72 @@ +'use strict' + +import {html, LitElement} from 'lit'; +import IPFS from 'ipfs' + +export class IPFSInfo extends LitElement { + static get properties() { + return { + _ipfs: {state: true}, + _id: {state: true}, + _version: {state: true}, + _agentVersion: {state: true} + } + } + + constructor() { + super(); + + this._ipfs = null; + this._id = null; + this._version = null; + this._agentVersion = null; + } + + connectedCallback() { + super.connectedCallback() + + this.initIPFS(); + } + + async initIPFS() { + const ipfs = await IPFS.create(); + const id = await ipfs.id(); + const version = await ipfs.version(); + + this._ipfs = ipfs + this._id = id.id; + this._agentVersion = id.agentVersion; + this._version = version.version; + } + + render() { + if (!this._ipfs) { + return html`Loading...`; + } + + const info = { + 'Id': this._id, + 'Agent Version': this._agentVersion, + 'Version': this._version, + } + + return html` +
+

Connected to IPFS

+
+ ${Object.entries(info).map(([key, value]) => { + return html` +
+

${key}

+
${value}
+
+ ` + } + )} +
+
+ `; + } +} + +customElements.define('ipfs-info', IPFSInfo); diff --git a/examples/browser-lit/tests/test.js b/examples/browser-lit/tests/test.js new file mode 100644 index 00000000..17eec51b --- /dev/null +++ b/examples/browser-lit/tests/test.js @@ -0,0 +1,28 @@ +const { test, expect } = require('@playwright/test'); +const { playwright } = require('test-util-ipfs-example'); + +// Setup +const play = test.extend({ + ...playwright.servers(), +}); + +play.describe('integrate ipfs with lit:', () => { + // DOM + const title = "[data-test=title]" + const id = "[data-test=Id]" + const agentVersion = "[data-test=AgentVersion]" + const version = "[data-test=Version]" + + play.beforeEach(async ({servers, page}) => { + await page.goto(`http://localhost:${servers[0].port}/`); + }) + + play('should properly initialized a IPFS node and print some properties', async ({ page }) => { + await page.waitForSelector(title) + + expect(await page.textContent(title)).toContain("Connected to IPFS"); + expect(await page.isVisible(id)).toBeTruthy(); + expect(await page.isVisible(agentVersion)).toBeTruthy(); + expect(await page.isVisible(version)).toBeTruthy(); + }); +});