Technical Components
Table of contents
There are several elements to this "framework":
- GatsbyJS - Site Generator (uses React)
- Primer.Doctocat - Theme by GitHub
- Primer.Components - React Components
- Primer.StyledOcticons - GitHub Icons (SVG)
- MDX - Extended Markdown
GatsbyJS
GatsbyJS is a site generator that uses modern web technologies to produce in their words "blazing fast websites and apps".
It is based on the React JavaScript framework from Facebook and uses Webpack, GraphQL and the latest development techniques to provide really fast user experiences.
Click here to learn morePrimer
Primer is the design system built by, and for GitHub. It encompasses everything from Iconography and Web Components, through to the companies presentation master slides. We use a small subset of their open-source tools which are detailed below.
Click here to learn moreDoctocat
Doctocat is the GatsbyJS theme GitHub have developed for their documentation. It is preconfigured for working within the Primer team, so requires some modification out-of-the-box to remove branding etc.
It also contains a number of useful components and datasources that link back to GitHub data such as the list of Contributors at the bottom of each page.
Click here to learn moreComponents
Primer Components are useful implementations of the Primer CSS library, implemented as ReactJS Components.
Click here to learn moreStyledOcticons
Primer StyledOcticons are ReactJs Components that are wrapped with system props from the styled-system package.
Not only are these easy to style, but the base package, @primer/octicons-react supports tree-shaking to ensure only used components are bundled.
MDX
MDX is Markdown for the component era. It lets you write JSX embedded inside Markdown. It's a great combination because it allows you to use Markdown's terse syntax (such as `# Heading`) for your content and JSX for more advanced, or reusable components.Adding Components to Markdown with MDX | GatsbyJS
