struggling to make social cards to work

[hellt]

Hi @squidfunk

I am running insiders 3.2.3 and trying to make social cards to work here srl-labs/learn-srlinux#12.

The problems I have so far:

1 Using custom (non Google font)

As my main font I am using a font that is not available on Google fonts which I include via CSS
It seems that social cards can't make use of that custom font?

If it is not possible to make use of fonts which are included via @font-face it would be extremely helpful if social config region would allow for choosing a Google font instead. Otherwise it seems impossible to use social cards if a theme uses non Google font.

INFO     -  Building documentation...
WARNING  -  Config value: 'dev_addr'. Warning: The use of the IP address '0.0.0.0' suggests a production environment or the use of a proxy to connect to the MkDocs server. However, the MkDocs' server is intended for local development purposes only. Please use a third party production-ready server instead.
Traceback (most recent call last):
  File "/usr/local/bin/mkdocs", line 8, in <module>
    sys.exit(cli())
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1659, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/__main__.py", line 177, in serve_command
    serve.serve(dev_addr=dev_addr, livereload=livereload, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/commands/serve.py", line 54, in serve
    config = builder()
  File "/usr/local/lib/python3.9/site-packages/mkdocs/commands/serve.py", line 49, in builder
    build(config, live_server=live_server, dirty=dirty)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/commands/build.py", line 257, in build
    config = config['plugins'].run_event('config', config)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/plugins.py", line 102, in run_event
    result = method(item, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/material/plugins/social/plugin.py", line 83, in on_config
    self.font = self.__load_font(config)
  File "/usr/local/lib/python3.9/site-packages/material/plugins/social/plugin.py", line 330, in __load_font
    self.__load_font_from_google(name)
  File "/usr/local/lib/python3.9/site-packages/material/plugins/social/plugin.py", line 353, in __load_font_from_google
    zip = ZipFile(tmp)
  File "/usr/local/lib/python3.9/zipfile.py", line 1257, in __init__
    self._RealGetContents()
  File "/usr/local/lib/python3.9/zipfile.py", line 1324, in _RealGetContents
    raise BadZipFile("File is not a zip file")
zipfile.BadZipFile: File is not a zip file
make: *** [Makefile:17: isite] Error 1

Build fails with Google font (Roboto)

When I switched to Roboto as my main font I still got cryptic errors from PIL.

docker run -it --rm -p 8001:8000 -v $(pwd):/docs ghcr.io/srl-labs/mkdocs-material-insiders:3.2.3
INFO     -  Building documentation...
WARNING  -  Config value: 'dev_addr'. Warning: The use of the IP address '0.0.0.0' suggests a production environment or the use of a proxy to connect to the MkDocs server. However, the MkDocs' server is intended for local development purposes only. Please use a third party production-ready server instead.
INFO     -  Cleaning site directory
INFO     -  The following pages exist in the docs directory, but are not included in the "nav" configuration:
              - alwayson.md
ERROR    -  Error reading page 'index.md': images do not match
Traceback (most recent call last):
  File "/usr/local/bin/mkdocs", line 8, in <module>
    sys.exit(cli())
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1659, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/__main__.py", line 177, in serve_command
    serve.serve(dev_addr=dev_addr, livereload=livereload, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/commands/serve.py", line 54, in serve
    config = builder()
  File "/usr/local/lib/python3.9/site-packages/mkdocs/commands/serve.py", line 49, in builder
    build(config, live_server=live_server, dirty=dirty)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/commands/build.py", line 292, in build
    _populate_page(file.page, config, files, dirty)
  File "/usr/local/lib/python3.9/site-packages/mkdocs/commands/build.py", line 170, in _populate_page
    page.markdown = config['plugins'].run_event(
  File "/usr/local/lib/python3.9/site-packages/mkdocs/plugins.py", line 102, in run_event
    result = method(item, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/material/plugins/social/plugin.py", line 119, in on_page_markdown
    image = self.__render_card(site_name, title, description)
  File "/usr/local/lib/python3.9/site-packages/material/plugins/social/plugin.py", line 137, in __render_card
    image.alpha_composite(
  File "/usr/local/lib/python3.9/site-packages/PIL/Image.py", line 1633, in alpha_composite
    result = alpha_composite(background, overlay)
  File "/usr/local/lib/python3.9/site-packages/PIL/Image.py", line 3051, in alpha_composite
    return im1._new(core.alpha_composite(im1.im, im2.im))
ValueError: images do not match
make: *** [Makefile:17: isite] Error 1

Does this trace ring a bell? What did I do wrong? Could this be because I have a custom index page?

[squidfunk]

First, non-Google fonts are currently not supported, so you're pretty much on your own there. Note that the font to be used is sourced from the theme.font.text setting. Second, unfortunately, the trace doesn't ring a bell. Could you try and track it down? If I have a small reproducible case, I can look into fixing it.

it would be extremely helpful if social config region would allow for choosing a Google font instead. Otherwise it seems impossible to use social cards if a theme uses non Google font.

Yes, we can add that to the settings of the plugin, maybe something like cards_font. Note that the font must be a *.ttf file. Other formats are not supported. You can open an issue if you like. Edit: wait, a Google Font? Hmm, that'll make configuration even more complex. I'd suggest specifying the *.ttf manually, as this allows for more flexibility. This would also mean that you could use your custom font.

[hellt]

as for the first issue I opened this FR #3247

I am cool with using a ttf font in that cards_font section if you want to keep it less "busy"

[hellt]

@squidfunk for 2nd part of the issue I have created a minimal doc site that uses a custom index page

you can get this branch with

git clone -b issue-example --depth 1 https://github.com/srl-labs/learn-srlinux

and then try to build it with insiders container, for example.

If you want, I can scope it out as a separate issue

[squidfunk]

Yes, please create a separate issue. I looked at the branch and there's a lot of stuff in it. Could you maybe trim it further down, i.e., remove everything from mkdocs.yml that is not necessary and all pages that aren't. That would be of tremendous help.

[hellt]

@squidfunk I narrowed down what causes the issue (plus I removed all the unnecessary files from that branch, so you can re-pull it)

The issue is with the way I refer to a custom logo here https://github.com/srl-labs/learn-srlinux/blob/59f2d52c7e226ba60200fc3c4cccb5978093c724/mkdocs.yml#L17 as suggested in the official docs

Once I comment that out (making the default logo to be used) - everything runs.

I see that in the mkdocs-material you use another way to refer to a logo - via custom icons - should I use that instead? I tried that, but I am hitting weird path issues:

theme:
  icon:
    logo: srlinux

[Errno 2] No such file or directory: '/usr/local/lib/python3.9/site-packages/material/.icons/srlinux.svg'

❯ tree -a docs
docs
├── images
│   └── srlinux.svg
├── index.md
├── overrides
│   ├── .icons
│   │   └── srlinux.svg
│   └── home.html
└── stylesheets
    └── nokia.css

4 directories, 5 files

Since the root cause of an issue has been identified I do not create a separate issue (I can if you want me to)

[squidfunk]

Thanks for narrowing it down! SVGs need to be converted to PNGs (which the plugin should do automatically), as PIL can't handle SVGs directly. I imagine that the missing conversion could be the cause, but I need to check that. Since this discussion mentions multiple problems, it would be awesome if you could create an issue. Otherwise, I would've just converted this discussion, but that's not really appropriate. Also, we have more information now.