The Developer Portal brings together all the resources needed for experienced as well as beginning developers on the Internet Computer.
The Developer Portal uses Docusaurus.
- Node v16 (v18 not recommended)
While modifying documentation in the repository, you can preview the changes locally by executing the following commands.
cd portal/
git submodule update --init
npm install
npm startThe Developer Portal frontend should appear in your browser under http://localhost:3000.
To preview a specific locale in the context of an internationalization contribution, start the docs with the following command:
npm start -- --locale <locale>Docusaurus is quite easy to use and facilitates the creation of documents. The developer portal uses Markdown as its default format with enhancements provided by Docusuaurus.
To create a document, head to the /docs folder and create a Markdown file in the directory of your choice.
Here is an example of a docs s 8000 ub-directory:
developer-docs/
developer-docs/
home.mdx
quickstart/
...
references/
...
The roadmap items are stored as markdown files inside the roadmap directory.
The items are grouped by domain and status.
roadmap
├── 1_core-protocol
│ ├── deployed
│ │ ├── network_performance.md
│ │ └── nodes_can_be_reassigned.md
│ ├── in-progress
│ │ ├── 1_btc-integration.md
│ │ ├── 2_tecdsa.md
│ │ ├── 3_http-outcalls.md
│ │ ├── 4_high-replication-subnets.md
│ │ └── 5_deterministic-time-slicing.md
│ ├── index.md
│ └── pending
│ └── eth-integration.md
├── 2_boundary_nodes
│ ├── deployed
│ │ └── icos-nodes.md
│ ├── in-progress
│ │ ├── 1_seo_and_streaming.md
│ │ ├── 2_asset_canister_caching.md
...
- to change the title, links, or ETA of an item, edit the metadata section at the top of each markdown document
- to change the status of an item, eg. from
in-progresstodeployed, move the file to thedeployeddirectory - items are listed in alphabetical order of their filename, to enforce a certain ordering between items you can prefix the filenames with numbers
- to mark an item as a community request, set
is_community: truein the item's metadata
Each domain folder contains an index.md file which adds metadata, like a title, a description, and cover images.
The how it works page cards and subpages are stored as markdown files inside the how-it-works directory.
how-it-works
├── 1_about
│ ├── 01-overview-of-the-internet-computer.card.md
│ ├── 01-overview-of-the-internet-computer.subpage.md
│ ├── canister-lifecycle.card.md
│ ├── canister-lifecycle.subpage.md
│ └── index.md
├── 2_featured
│ ├── direct-integration-with-bitcoin.card.md
│ ├── direct-integration-with-bitcoin.subpage.md
│ ├── index.md
│ ├── sns.card.md
│ ├── threshold-ecdsa-signing.card.md
│ ├── threshold-ecdsa-signing.subpage.md
The directory contains markdown files ending in .card.md and .subpage.md.
The .card.md files will show up as part of the /how-it-works page, under the section they are grouped in (eg. Featured).
The .subpage.md files will each generate a subpage under /how-it-works/, based on the files' metadata and content:
- the
slugparameter will determine the final URL, eg. the slugcanister-lifecyclewill generate the page/how-it-works/canister-lifecycle. - the
title,abstract(optional), andcoverImagewill determine how the page looks when shared on social media
How to embed youtube videos:
You can embed youtube videos by adding the video's cover image, then turning the image into a link to the video itself, eg.
[](https://www.youtube.com/watch?v=YWHTNr8RZHg)
The page will automatically put the Youtube icon on the cover image, imitating an embedded video.
You can get the cover image of a video by substituting the video ID into the following URL:
https://i.ytimg.com/vi/INSERT_VIDEO_ID_HERE/0.jpg
If the resulting image is low quality, you can try https://i.ytimg.com/vi/INSERT_VIDEO_ID_HERE/maxresdefault.jpg, but it does not always exist.
- Making sure that the
.github/CODEOWNERSfile is filled with new documents that you added. This way we can ensure that future Pull Requests are reviewed by the right people. - When creating a document, it must be registered in
/sidebars.js, otherwise, it will not appear in the side navigation bar.
More information about document creation on Docusaurus's docs.
Whenever a Pull Request is created on the repository, a CI job will appear and deploy a Preview on Netlify so that reviewers can easily check the changes made the way the end users will.
To access the preview, head to the very bottom of your pull request where you will see the list of deployments. Once the job is finished, you should see as active the "Preview Netlify" deployment.
Then simply press the "View deployment" button to in your fresh Netlify preview.
Here is a description of how a contribution should be made to the developer portal.
- The contributor creates a fork/branch where the changes are made.
- a Pull Request is created from this branch to
master. the preview is generated and the reviewers can directly check the preview website. - After the Pull Request is merged into master, CI/CD will deploy the contents to the IC. The changes made will appear on the webpage under the version in the dropdown named "Current".
- Optional: When a repo maintainer tags a commit on master as $TAG, then CI/CD deploys the contents to the IC. The webpage will default to the new "$TAG" version, visible in the versions dropdown, and allow users to view the contents pinned at that tag.
The agents and CDKs sections should not only contain docs for DFINITY-created agents and CDKs. We therefore invite other projects to:
- link to their own agents or CDKs on the respective index pages (the files to be edited are in
docs/developer-docs/build/agents/index.mdordocs/developer-docs/backend/choosing-language.md) - add their own documentation as a folder under
AgentsorCDKs
We invite developers to add their IC-focused developer tools to the Developer Tools page by appending an entry to the communityToolingItems array in src/components/Common/toolingItems.ts.
Please make sure to add appropriate tags to make the tool easy to discover for other devs. Avoid introducing new tags if possible.
You can submit your sample project to be displayed on the Samples page.
Add your submission to the community projects file and open a pull request. You can use an editor with TypeScript support to make sure your submission follows the schema.
Disclaimer: You should have a working canister for your product to be showcased. Our team will review the PR and get back to you for any further questions. In the meantime, please contact devcomms@dfinity.org if you have any questions.
Add your project to the end of showcase.json. Refer to the object schema below for the required fields.
Make up a unique project id. For example, if your project is called Awesome ICP Project!, your project id could be awesome-icp-project.
Your logo/video/screenshots files should be prefixed with your project id, and placed in the /static/img/showcase folder. For example, if your project id is awesome-icp-project, your logo file should be named awesome-icp-project_logo.webp and placed in the /static/img/showcase folder.
| Asset | Requirements | Format | Notes | |
|---|---|---|---|---|
| logo | required | 112x112px | webp/svg/png | Currently displayed 56x56px |
| screenshots | optional | 1024x576px | webp/jpg | The schema supports multiple files, but only the first one will be displayed |
| video | optional | max 10MB | webm/mp4 | If there is a video file specified, it will be displayed instead of a screenshot. |
The list of tags is not final, and will be updated as the project evolves. For now, the following tags are available:
WalletNFTSocialFiDeFiGamesDAOMetaverseTools / Infrastructure
{
id: string,
name: string,
oneLiner: string, // short description of the project
website: string, // URL starting with `https://`
tags: ('Wallet' | 'NFT' | 'SocialFi' | 'DeFi' | 'Games' | 'DAO' | 'Metaverse' | 'Tools / Infrastructure')[],
description: string, // description of the project
usesInternetIdentity: boolean,
stats: string, // eg. "10,000 users"
logo: string, // url to logo file, eg. /img/showcase/awesome-icp-project_logo.webp
github?: string, // full URL to github repo, if available
youtube?: string, // full URL to a YouTube video or channel, if available
twitter?: string, // full URL to a twitter account, if available
screenshots?: string[], // optional array of urls to screenshot files
video?: string, // optional url to video file, eg. /img/showcase/awesome-icp-project_video.webm
videoContentType?: 'video/webm' | 'video/mp4', // to feed into the type attribute of the video/source element
submittableId?: string, // optional id of the submittable form
},