The Sentry documentation is a static site, generated by Jekyll and Gatsby.
You will need Ruby, Bundler, and Volta installed. If you don't have opinions about the process, this will get you going:
# Install Homebrew and everything mentioned above
$ bin/bootstrap
Once you have the required system dependencies:
# Install or update application dependencies
$ make
Now run the development webserver:
$ yarn start
You will now be able to access docs via http://localhost:3000.
Note: This is running both the Jekyll (port 9001) and Gatsby (port 9002) servers, with a proxy routing requests between the two.
The repository currently contains a Jekyll site (./
) as well as a Gatsby site (./gatsby
). This is to aid with a progressive migration over to Gatsby. There's a bit of magic that you need to understand in how this is deployed:
-
Sidebar: Jekyll and Gatsby both control the sidebar. If you add a new page in Gatsby at the top level (aka
/docs/parent/THISLEVEL.md
) you will also need to add an empty page in Jekyll at the same location with thetitle
,sidebar_order
, andgatsby
frontmatter elements:--- title: Page Name sidebar_order: 0 gatsby: true ---
-
When you convert a page from Jekyll to Gatsby you should remove all text contents of the document in Jekyll (this makes it clear its not used), and add
gatsby: true
to the frontmatter. This ensures it still renders in the sidebar, but both systems recognize the content is in Gatsby. -
In production, the
nginx.conf
file determines which routes are served by Jekyll vs Gatsby. Gatsby is the default behavior, whereas Jekyll routes are listed explicitly. -
In development, the proxy server (
server.js
) manages routing between Jekyll (http://localhost:9001) and Gatsby (http://localhost:9002). Route configuration is the same as whats in nginx. -
We've disabled the default optimized static links within Gatsby due to the complexity of navigating between two codebases. Once the Jekyll conversion is done, we'll want to make the change in
<SmartLink>
. -
We're automatically importing all Jekyll pages inside of Gatsby. They won't all work. When formally converting a page over to Gatsby you should move it into a parallel location inside of the Gatsby file tree (
./src/docs/...
). You also like want to convert it to.mdx
instead of.md
. (DC: you will need to updategatsby-node.js
to handle indexing.mdx
once the first is added!) -
This is likely brittle. We want to move away from Jekyll as quickly as possible, so ideally all new content is done in Gatsby.
-
You can determine which engine is used by viewing source and looking for
"Rendered with"
in the HTML.
🙏 that MDX v2 fixes this.
MDX has its flaws. When rendering components, any text inside of them is treated as raw text (not markdown). To work around this you can use the <markdown>
tag, but it also has its issues. Generally speaking, put an empty line after the opening tag, and before the closing tag.
// dont do this as parsing will hit weird breakages
<markdown>
foo bar
</markdown>
// do this
<markdown>
foo bar
</markdown>
The following instructions assume you're in ./gatsby
.
Nothing to really see here yet. We'll update this when the Jekyll wrappers are gone.
$ yarn start
There are a number of enhancements in place that are only available when developing locally.
- Numerous optimizations have been made to speed up builds. See [environment-variables] for more info.
- Pressing the
`
(backtick) key reveals a drawer with meta info for each page. - The sidebar includes links to documentation of special components available to the docs.
The following variables can be set when using bin/server
(aka yarn start-jekyll
). Defaults prefer performance.
FAST_BUILD=true
The master switch. When true, all performance adjustments are enabled. Disable to debug strange behavior.JEKYLL_INCREMENTAL=true
When true, Jekyll only rebuilds pages that have changed. In some cases this can create unpredictable behavior.JEKYLL_ENABLE_PLATFORM_API=false
When false,_platforms/*
will not be generated.
Documentation is written in Markdown, which is parsed by kramdown.
While the server is running, you can also view the Markdown styleguide
While in dev mode, the sidebar includes documentation for the special tags and includes available for formatting content.
The Sentry documentation contains two document types: categories and documents. Documents may have child documents.
Categories are manually defined.
- Add a new entry to src/data/documentation_categories.yml. Order is defined by the order in this document.
# Display name for the category
- title: Category Name
# slug matching a filename in _includes/svg/
icon: category-icon
# A slug for the category. Must match a file or folder in collections/_documentation/
slug: category-slug
- Create a markdown file or a folder of markdown files in collections/_documentation/
Category hierarchy is automatically defined by folder structure. Add a markdown file to a folder within _src/collections/documentation. Order is alphabetical by default, or you may force sorting order by adding an sidebar_order
integer value in the frontmatter of the document.
When adding new pages, use bin/test -u
to update test snapshots.