4ec54bc2c3
* Add images * Basic button functionality; TODO placeholders for dispatching contentOutlineToggle and rendering content outline component * Basic content outline container * Content outline toggles * Remove icon files from explore * Scroll into view v1 * outline that reflect's explore's order of vizs * Update icon name * Add scrollId to PanelChrome; scrolling enabled for Table * Add queries icon * Improve scroll behavior in split view * Add wrapper so the sticky navigation doesn't scroll when on the bottom of the window * Fix the issue with logs gap; center icons * Memoize register and unregister functions; adjust content height * Make displayOrderId optional * Use Node API for finding position of panels in content outline; add tooltip * Dock content outline in expanded mode; at tooltip to toggle button * Handle content outline visibility from Explore and not redux; pass outlineItems as a prop * Fix ContentOutline test * Add interaction tracking * Add padding to fix test * Replace string literals with objects for styles * Update event reporting payloads * Custom content outline button; content outline container improvements * Add aria-expanded to content outline button in ExploreToolbar * Fix vertical and horizontal scrolling * Add aria-controls * Remove unneccessary css since ExploreToolbar is sticky * Update feature toggles; Fix typos * Make content outline button more prominent in split mode; add padding to content outline items; * Diego's UX updates * WIP: some scroll fixes * Fix test and type error * Add id to ContentOutline to differentiate in split mode * No default exports --------- Co-authored-by: Giordano Ricci <me@giordanoricci.com>
Building the docs locally
When you contribute to documentation, it's a good practice to build the docs on your local machine to make sure your changes appear as you expect. This README explains the process for doing that.
To build a local version, you need to run a process in a Docker container.
Grafana periodically updates the Docker image, docs-base, to update the styling of the Docs.
Requirements
- Docker >= 2.1.0.3
- Yarn >= 1.22.4
Build the doc site
First, make sure the Docker daemon is running on your machine. Then, follow these steps:
- On the command line, first change to the docs folder:
cd docs. - Run
make docs. This launches a preview of the website with the current grafana docs athttp://localhost:3002/docs/grafana/latest/which will refresh automatically when changes are made to content in thesourcesdirectory.
If you have the grafana/website repo checked out in the same directory as the grafana repo, then you can run make docs-local-static to use local assets (such as images).
Content guidelines
Edit content in the sources directory.
Contributing
Using relref for internal links
Use the Hugo shortcode relref any time you are linking to other internal docs pages.
Syntax is:
{{< relref "example.md" >}}
You might need to add more context for the link (containing folders and so on, folder/example.md) if Hugo says the relref is ambiguous.
Managing redirects
When moving content around or removing pages it's important that users following old links are properly redirected to the new location. We do this using the aliases feature in Hugo.
If you are moving a page, add an aliases entry in the front matter referencing the old location of the page which will redirect the old url to the new location.
If you are removing a page, add an aliases entry in the front matter of the most-applicable page referencing the location of the page being removed.
If you are copying an existing page as the basis for a new one, be sure to remove any aliases entries in the front matter in your copy to avoid conflicting redirects.
Edit the side menu
The side menu is automatically build from the file structure. Use the weight front matter parameter to order pages.
To specify different menu text from the page title, use the front matter parameter menuTitle.
Add images
Please see our help documentation on Image, diagram, and screenshot guidelines for comprehensive information.
Deploy changes to grafana.com
When a PR is merged with changes in the docs/sources directory, those changes are automatically synced by a GitHub action (.github/workflows/publish.yml) to the grafana/website repo.
- A PR that targets the
mainbranch syncs to thecontent/docs/grafana/nextdirectory in thewebsiterepository, and publishes tohttps://grafana.com/docs/grafana/next/. - A PR targeting the
latest/currentrelease branch syncs to thecontent/docs/grafana/latestdirectory in thewebsiterepository, and publishes tohttps://grafana.com/docs/grafana/latest/.
Once the sync is complete, the website will automatically publish to production - no further action is needed.