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
-
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.organizeImportshowever 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.