js.ipfs.io - The js-ipfs project Website.

Welcome to the js.ipfs.io Website repo. This website uses gatsbyjs. Most of the website content is data-driven, you can check the data directory to see the sections information bundled as js files.

Lead Maintainer

Pedro Santos

Table of Contents

• Contribute to the Website Content
  • Internationalization
  • Listing a talk on the website
  • Want to show what's possible to build with js-ipfs?
• Development and Release Cycle
  • Development
  • Publish
• License

Internationalization i18n

Incorrect translation, help us fix it!

• 1. Create a Transifex account
• 2. Go to https://www.transifex.com/ipfs/js-ipfs-website/, select a language, find an invalid string and propose a new translation

Missing language? Help us translate!

You can do it in 2 steps:

1. Create a PR that adds a line to the config file with a new language code

In the file intl/config, add a line for your language. Example, if you were to add Portuguese, you would only have to add the new language to the availableLocales array:

module.exports = {
  defaultLocale: 'en',
  availableLocales: [
    { acronym: 'en', fullForm: 'English' },
    { acronym: 'pt', fullForm: 'Português' }
  ]
}

2. Translate content at Transifex

• Go to https://www.transifex.com/ipfs/js-ipfs-website and start translating.
• If your language is missing request it on Transifex or as an issue in this repo.
• To download and add translations to the PR:

  $ tx pull -l <lang>
  $ git add intl
  $ git commit

This step can be done by you or a person reviewing the PR. Replace <lang> with the code added to intl/config.js

When you are finished, submit it as a PR to this repo. Once it gets merged into master it will be live at dev.js.ipfs.io. It will be live at js.ipfs.io as soon as the production branch is updated.

Learn more on how to use Transifex

• Installing the Transifex Client
• Understanding .tx/config file
• Manual sync via Transifex Client
  • Using Transifex with GitHub in Your Development Workflow
  • Syncing a local project to Transifex with the Transifex Client

Listing a talk on the website

You can add your talk to the website by creating a PR. You just need to add an object to the publicationsAndTalks array. Example, if you were to add a new entry, you would have to add the link to your talk and its title:

const publicationsAndTalks = [
  {
    link: 'https://www.youtube.com/watch?v=WK4PIGr3RB8',
    active: true,
    title: 'Progress Report on the Decentralized Web, David Dias'
  },
  {
    link: 'https://www.youtube.com/watch?v=2cmbm6iABsI',
    title: 'IPFS on the Brave Browser, Alan Shaw'
  }
]

Want to show what's possible to build with js-ipfs?

Sharing your app with us is very simple! You just need to host your code on codesandbox and edit apps array. Example, if you want to add a new app, you only have to add a new entry to the apps array by adding its title and the corresponding codesandbox share link:

const apps = [
  {
    title: 'Example 1',
    link: 'https://codesandbox.io/embed/qkj8z9l8kq'
  },
  {
    title: 'Example 2',
    link: 'https://codesandbox.io/embed/vv99onw18y'
  }
]

Development

Dependencies

• gatsbyjs v2 to build the website
• Node.js >= v10 and npm for build tools
• Transifex Client for locales
• ipfs to deploy changes

Install

> git clone https://github.com/ipfs/js.ipfs.io
> npm install

Usage

The following commands are available:

• npm run develop - Starts a hot-reloading development environment at localhost:8000.
• npm run build - Generates the static HTML and JavaScript code bundles by performing a production build.
• npm run lint - Runs aegir lint.

Supported Browsers Versions

We are currently targeting:

Browser	Versions
Chrome	>= 69
Firefox	>= 62
Safari	>= 11.1

Publish

When a branch gets merged to master, it is deployed to dev.js.ipfs.

To deploy to js.ipfs.io the code should be merged into the production branch.

Important: Before a deploy you need to add the website to IPFS and update the resulting hash in each translation file. Thus, you must:

1. Build the project

> npm run build

2. Init your ipfs daemon (if you haven't done it before)

> ipfs init

3. Add the public folder to IPFS

> ipfs add -r public/
added <resulting-hash>

After that, go to the messages folder and paste the resulting hash on the serviceWorker object. Note that all json files must be updated. Example:

"serviceWorker": {
    ...
    "activationSuccessText": "(...)js.ipfs.io - /ipfs/<resulting-hash>](https://js.ipfs.io/ipfs/<resulting-hash>\n(...)"
    ...
}

Note: This process will be automated as soon as we tackle this issue.

License

MIT