This repository contains the general documentation of toit served at docs.toit.io.
yarn
is used in web projects. To install yarn
, follow the guide here.
Note! You don't need to setup your PATH
env.var. as described in the guide.
If you haven't installed node
yet, install node
from nodejs.org. Add the node bin directory to your PATH
in $HOME/.profile
Here's a short summary of what you need to do:
- Create a personal access token
- Name it appropriately (I suggest something like:
<your machine name> GitHub npm registry
) - Check
write:packages
andread:packages
- Name it appropriately (I suggest something like:
- Copy the token
- Add the token to your
~/.npmrc
:echo "//npm.pkg.github.com/:_authToken=YOUR_TOKEN" >> ~/.npmrc
-
Add the ESLint extension to VS Code to get linting directly in the code. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint.
-
To get the right indentation, etc. directly in the code, and on save add the Prettier extension to VS Code. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode.
-
To get VS Code to automatically fix linting errors (if possible) and organize imports on save, add the following to your settings.json file:
"editor.codeActionsOnSave": [ "source.fixAll.eslint", "source.organizeImports", ],
Be careful with
source.organizeImports
however since that can drastically reduce performance in VS Code.
yarn install
before any of these commands!
In the project directory, you can run:
Runs the app in the development mode. Open http://localhost:8000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
If you want to be able to access the development server from other computers,
use this: yarn develop -H 0.0.0.0
Builds the app for production to the build
folder.
The same as yarn develop
but it serves the built site.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
All the documentation pages are in docs/
. The folder and file hierarchy is
also used in the navigation.
The documentation pages are written in .mdx
which are
markdown files that can also
import react components.
There are multiple components to make the content more engaging:
<Note type="info">
Content here can be markdown
</Note>
The type can be info
or warning
for now.
<Tabs>
<Tab label="Tab 1">
Content of tab 1
</Tab>
<Tab label="Tab 2">
Content of tab 2
</Tab>
</Tabs>
The sidebar navigation on the left is defined in docs/menu.yaml
.
You can look at src/@types/index.d.ts
for all valid properties.