Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow specifying a custom font for the card text #110

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion docs/source/socialcards.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ See [the opengraph.xyz website](https://www.opengraph.xyz/) for a way to preview
Here's an example of what the card for this page looks like:

% This is auto-generated at build time

```{image} ../tmp//num_0.png
:width: 500
```
Expand Down Expand Up @@ -42,14 +43,33 @@ ogp_social_cards = {
Matplotlib does not support easy plotting of SVG images, so ensure that your image is a PNG or JPEG file, not SVG.
```

## Customize the text font

By default, the Roboto Flex font is used to render the card text.

You can specify the other font name via ``font`` key:

```{code-block} python
:caption: conf.py

ogp_social_cards = {
"font": "Noto Sans CJK JP",
}
```

You might need to install an additional font package on your environment. Also, note that the font name needs to be
discoverable by Matplotlib FontManager.
See [Matplotlib documentation](https://matplotlib.org/stable/tutorials/text/text_props.html#default-font)
for the information about FontManager.

## Customize the card

There are several customization options to change the text and look of the social media preview card.
Below is a summary of these options.

- **`site_url`**: Set a custom site URL.
- **`line_color`**: Color of the border line at the bottom of the card, in hex format.
% TODO: add an over-ride for each part of the card.
% TODO: add an over-ride for each part of the card.

## Example social cards

Expand Down
19 changes: 10 additions & 9 deletions sphinxext/opengraph/socialcards.py
Original file line number Diff line number Diff line change
Expand Up @@ -178,16 +178,17 @@ def create_social_card_objects(
site_url_color="#2f363d",
background_color="white",
line_color="#5A626B",
font="Roboto",
font=None,
):
"""Create the Matplotlib objects for the first time."""
# Load the Roboto font
# TODO: Currently the `font` parameter above does nothing
# Should instead make it possible to load remote fonts or local fonts
# if a user specifies.
path_font = Path(__file__).parent / "_static/Roboto-flex.ttf"
font = matplotlib.font_manager.FontEntry(fname=str(path_font), name="Roboto")
matplotlib.font_manager.fontManager.ttflist.append(font)
# If no font specified, load the Roboto Flex font as a fallback
if font is None:
path_font = Path(__file__).parent / "_static/Roboto-flex.ttf"
roboto_font = matplotlib.font_manager.FontEntry(
fname=str(path_font), name="Roboto"
)
matplotlib.font_manager.fontManager.ttflist.append(roboto_font)
font = roboto_font.name

# Because Matplotlib doesn't let you specify figures in pixels, only inches
# This `multiple` results in a scale of about 1146px by 600px
Expand All @@ -214,7 +215,7 @@ def create_social_card_objects(

# Axes configuration
left_margin = 0.05
with plt.rc_context({"font.family": font.name}):
with plt.rc_context({"font.family": font}):
# Site title
# Smaller font, just above page title
site_title_y_offset = 0.87
Expand Down