Images

We write for a global audience and strive to use screenshots and text in figures sparingly.

Screenshots, in particular, are difficult to maintain as UIs change.

Don't use images of text, code samples, or terminal output. Use actual text.

For general guidance on images in docs, see Diagrams, figures, and other images.

Screenshots

Take a high-resolution screenshot. Make sure your device display resolution is set to its highest level. Avoid zooming in when taking the screenshot.

To take a screenshot of terminal output and code samples, use a tool like https://carbon.now.sh/ to generate a clean terminal example. For usage, see https://carbon.now.sh/about.

For code samples, use Code Blocks.

Adding images to docs

Use .svg files for diagrams.

For other image types, use .png or .jpg images.

Add image files to the /docs2/static/img directory. Remember to keep images in sync with code updates. If in doubt, don't use images when text suffices.

Use this syntax for the image and caption:

<figure>
  <img
    src="/img/2_zkApps_Examples.jpg"
    alt="Example zkApp zero knowledge applications."
    width="85%"
  />
  <figcaption>
    zkApps are a great fit for applications that require proof that you have a
    secret without revealing it to anyone.
  </figcaption>
</figure>

Docs home page

The source image of the enhanced terminal screen on the docs home page is in static/img/homepage/zkapp_developers.png.

The content on the docs home page https://github.com/o1-labs/docs2/blob/main/docs/welcome.mdx is rendered from a React component.