Theme fixes and more

[codemonkey800]

Description

Collection of fixes and additions for the the napari.org theme.

Fixes

https://napari-org-theme-fixes.vercel.app/

metaDescription config for setting meta description tag

The intro config added in #162 allows us to optionally add intros to a page. This can be used as the value for the meta description tag which is used for SEO. However, some pages may not have an intro, but ideally every page should have a meta description tag.

This can be added using the metaDescription config:

---
theme:
  metaDescription: This value will show up in Google search results!
---

Fix _modules link on API references

Currently we don't create pages from the _modules directory, so support was added since the API references pages uses it to show the source code:

• https://napari.org/_modules/napari/layers/labels/labels.html#Labels
• https://napari-org-theme-fixes.vercel.app/_modules/napari/layers/labels/labels.html#Labels

Inline code styling copied from napari hub

The code styling for inline blocks by default use ticks. Copying over the inline code styles from the napari hub fixes this:

Before:

After:

Add custom Pygments code theme

Before:

After:

Load scripts and stylesheets from HTML file

Currently we use an explicit list of scripts to load into the application on page load. However, Jupyter Book may inject an arbitrary amount of code into the page that is required by Sphinx Extensions. Because of this, it's better we load all the scripts so that the functionality continues to work.

[codemonkey800]

@liaprins-czi Added you for review so you can check out the code theme 💯

[liaprins-czi]

This looks super nice to me! The only small thing in the code blocks I notice that we probably shoudl do something about is that everytime I see the word self it is in a light grey color that I am pretty sure is not a11y compliant, and is not in the original hub code block color palette ... I wonder if there is a new token type appearing here? If so, can we get it to use one of the other colors in the palette that aren't being used (in this sample code at least), like the teal or the olive color? Or do we need an additional color for it? Let me know if so, and I will work on figuring out another color to add!

[codemonkey800]

This looks super nice to me! The only small thing in the code blocks I notice that we probably shoudl do something about is that everytime I see the word self it is in a light grey color that I am pretty sure is not a11y compliant, and is not in the original hub code block color palette ... I wonder if there is a new token type appearing here? If so, can we get it to use one of the other colors in the palette that aren't being used (in this sample code at least), like the teal or the olive color? Or do we need an additional color for it? Let me know if so, and I will work on figuring out another color to add!

Thanks for calling this out @liaprins-czi! I updated it to use the keywords color #7518a1 and also render it bold:

I also updated the rest of the colors used in the theme to more a11y friendly colors, but let me know if I miss anything!

---

The tokenizer used by Sphinx provides more tokens for us when compared to the old syntax highlighter code, so we could add more token styles. Right now, I tried my best to map the current color palette to the syntax highlighting for the sake of time, but we can later expand the color palette to include more tokens.

The theme source code shows what tokens are being used in case you want to prototype a color palette around it:

class NapariCodeTheme(Style):
    background_color = "#f7f7f7"

    styles = {
          Comment:                "italic #6f6f6f",
          Comment.Multiline:      "italic #6f6f6f",
          Comment.Preproc:        "bold #6f6f6f",
          Comment.Single:         "italic #6f6f6f",
          Comment.Special:        "bold italic #6f6f6f",
          Error:                  "bg:#e3d2d2 #a61717",
          Generic.Deleted:        "bg:#ffdddd #000000",
          Generic.Emph:           "italic #000000",
          Generic.Error:          "#990000",
          Generic.Heading:        "#6f6f6f",
          Generic.Inserted:       "bg:#ddffdd #000000",
          Generic.Output:         "#6f6f6f",
          Generic.Prompt:         "#555555",
          Generic.Strong:         "bold",
          Generic.Subheading:     "#6f6f6f",
          Generic.Traceback:      "#aa0000",
          Keyword:                "bold #7518a1",
          Literal.Number:         "#227b81",
          Literal.String:         "#0074b8",
          Name:                   '#000',
          Name.Attribute:         "#7518a1",
          Name.Builtin:           "bold #7518a1",
          Name.Class:             "bold #5471a0",
          Name.Constant:          "#7518a1",
          Name.Decorator:         "bold #3c5d5d",
          Name.Entity:            "#800080",
          Name.Exception:         "bold #990000",
          Name.Function:          "bold #004166",
          Name.Label:             "bold #990000",
          Name.Namespace:         "#555555",
          Name.Tag:               "#000080",
          Name.Variable:          "#7518a1",
          Operator:               "#956441",
          Punctuation:            '#000',
          String:                 "#0074b8",
    }

[liaprins-czi]

Sounds great, thanks!