Styleguide

Styleguide

The spacy.io website is implemented using Gatsby with Remark and MDX. This allows authoring content in straightforward Markdown without the usual limitations. Standard elements can be overwritten with powerful React components and wherever Markdown syntax isn’t enough, JSX components can be used.

Colors

dark
medium
light
faint
blue
dark blue
green
dark green
purple
dark purple
red
light red
yellow
light yellow

Patterns

blue patternby Kemal Şanlı
green patternby Kemal Şanlı
purple patternby Kemal Şanlı

Typography

Headlines are set in HK Grotesk by Hanken Design. All other body text and code uses the best-matching default system font to provide a “native” reading experience.

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Label

The following optional attributes can be set on the headline to modify it. For example, to add a tag for the documented type or mark features that have been introduced in a specific version or require statistical models to be loaded. Tags are also available as standalone <Tag /> components.

ArgumentExampleResult
tag{tag="method"}method
new{new="2"}v2.0
model{model="tagger, parser"}Needs model
hidden{hidden="true"}

Elements

Special link styles are used depending on the link URL.

Abbreviations

Some text with an abbreviation. On small screens, I collapse and the explanation text is displayed next to the abbreviation.

Tags

Tags can be used together with headlines, or next to properties across the documentation, and combined with tooltips to provide additional information. An optional variant argument can be used for special tags. variant="new" makes the tag take a version number to mark new features. Using the component, visibility of this tag can later be toggled once the feature isn’t considered new anymore. Setting variant="model" takes a description of model capabilities and can be used to mark features that require a respective model to be installed.

method v2.0 Needs model

Buttons

Link buttons come in two variants, primary and secondary and two sizes, with an optional large size modifier. Since they’re mostly used as enhanced links, the buttons are implemented as styled links instead of native button elements.

Primary smallSecondary small

Primary largeSecondary large

Components

Table

Tables are used to present data and API documentation. Certain keywords can be used to mark a footer row with a distinct style, for example to visualise the return values of a documented function.

Header 1Header 2Header 3Header 4
Column 1Column 2Column 3Column 4
Column 1Column 2Column 3Column 4
Column 1Column 2Column 3Column 4
Column 1Column 2Column 3Column 4

List

Lists are available as bulleted and numbered. Markdown lists are transformed automatically.

  • I am a bulleted list
  • I have nice bullets
  • Lorem ipsum dolor
  • consectetur adipiscing elit
  1. I am an ordered list
  2. I have nice numbers
  3. Lorem ipsum dolor
  4. consectetur adipiscing elit

Aside

Asides can be used to display additional notes and content in the right-hand column. Asides can contain text, code and other elements if needed. Visually, asides are moved to the side on the X-axis, and displayed at the same level they were inserted. On small screens, they collapse and are rendered in their original position, in between the text.

To make them easier to use in Markdown, paragraphs formatted as blockquotes will turn into asides by default. Level 4 headlines (with a leading ####) will become aside titles.

Code Block

Code blocks use the Prism syntax highlighter with a custom theme. The language can be set individually on each block, and defaults to raw text with no highlighting. An optional label can be added as the first line with the prefix #### (Python-like) and /// (JavaScript-like). the indented block as plain text and preserve whitespace.

Using spaCy

import spacy nlp = spacy.load("en_core_web_sm") doc = nlp(u"This is a sentence.") for token in doc: print(token.text, token.pos_)

Code blocks and also specify an optional range of line numbers to highlight by adding {highlight="..."} to the headline. Acceptable ranges are spans like 5-7, but also 5-7,10 or 5-7,10,13-14.

Using the matcher

import spacy from spacy.matcher import Matcher nlp = spacy.load('en_core_web_sm') matcher = Matcher(nlp.vocab)pattern = [{'LOWER': 'hello'}, {'IS_PUNCT': True}, {'LOWER': 'world'}]matcher.add('HelloWorld', None, pattern)doc = nlp(u'Hello, world! Hello world!') matches = matcher(doc)

Adding {executable="true"} to the title turns the code into an executable block, powered by Binder and Juniper. If JavaScript is disabled, the interactive widget defaults to a regular code block.

import spacy
nlp = spacy.load("en_core_web_sm")
doc = nlp(u"This is a sentence.")
for token in doc:
    print(token.text, token.pos_)

If a code block only contains a URL to a GitHub file, the raw file contents are embedded automatically and syntax highlighting is applied. The link to the original file is shown at the top of the widget.

explosion/spaCy/master/examples/pipeline/custom_component_countries_api.py
Can't fetch code example from GitHub :( Please use the link below to view the example. If you've come across a broken link, we always appreciate a pull request to the repository, or a report on the issue tracker. Thanks!

Infobox

Infoboxes can be used to add notes, updates, warnings or additional information to a page or section. Semantically, they’re implemented and interpreted as an aside element. Infoboxes can take an optional title argument, as well as an optional variant (either "warning" or "danger").

Accordion

Accordions are collapsible sections that are mostly used for lengthy tables, like the tag and label annotation schemes for different languages. They all need to be presented – but chances are the user doesn’t actually care about all of them, especially not at the same time. So it’s fairly reasonable to hide them begin a click. This particular implementation was inspired by the amazing Inclusive Components blog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim ante, pretium a orci eget, varius dignissim augue. Nam eu dictum mauris, id tincidunt nisi. Integer commodo pellentesque tincidunt. Nam at turpis finibus tortor gravida sodales tincidunt sit amet est. Nullam euismod arcu in tortor auctor, sit amet dignissim justo congue.

Setup and installation

Before running the setup, make sure your versions of Node and npm are up to date.

# Clone the repository
git clone https://github.com/explosion/spaCy
cd spaCy/website

# Install Gatsby's command-line tool
npm install --global gatsby-cli

# Install the dependencies
npm install

# Start the development server
npm run dev

If you are planning on making edits to the site, you should also set up the Prettier code formatter. It takes care of formatting Markdown and other files automatically. See here for the available extensions for your code editor. The .prettierrc file in the root defines the settings used in this codebase.

Markdown reference

All page content and page meta lives in the .md files in the /docs directory. The frontmatter block at the top of each file defines the page title and other settings like the sidebar menu.

---
title: Page title
---

## Headline starting a section {#some_id}

This is a regular paragraph with a [link](https://spacy.io) and **bold text**.

> #### This is an aside title
>
> This is aside text.

### Subheadline

| Header 1 | Header 2 |
| -------- | -------- |
| Column 1 | Column 2 |

```python
### Code block title {highlight="2-3"}
import spacy
nlp = spacy.load("en_core_web_sm")
doc = nlp("Hello world")
```

<Infobox title="Important note" variant="warning">

This is content in the infobox.

</Infobox>

In addition to the native markdown elements, you can use the components <Infobox />, <Accordion />, <Abbr /> and <Tag /> via their JSX syntax.

Project structure

Directory structure

├── docs # the actual markdown content ├── meta # JSON-formatted site metadata | ├── languages.json # supported languages and statistical models | ├── logos.json # logos and links for landing page | ├── sidebars.json # sidebar navigations for different sections | ├── site.json # general site metadata | └── universe.json # data for the spaCy universe section ├── public # compiled site ├── src # source | ├── components # React components | ├── fonts # webfonts | ├── images # images used in the layout | ├── plugins # custom plugins to transform Markdown | ├── styles # CSS modules and global styles | ├── templates # page layouts | | ├── docs.js # layout template for documentation pages | | ├── index.js # global layout template | | ├── models.js # layout template for model pages | | └── universe.js # layout templates for universe | └── widgets # non-reusable components with content, e.g. changelog ├── gatsby-browser.js # browser-specific hooks for Gatsby ├── gatsby-config.js # Gatsby configuration ├── gatsby-node.js # Node-specific hooks for Gatsby └── package.json # package settings and dependencies