How to create a jupyter extention that only inject static JS and CSS?

Widgets
1

In short I want to make ipyleaflet compatible with ipyvuetify. I solved several issues and I published them in a lib called sepal_ui. In short I need to inject special cased CSS and JS.

In my current implementation I use the good old:

sepal_ui_css = HTML(f"<style>{(CSS_DIR / 'custom.css').read_text()}</style>")
display(sepal_ui_css)

I would like to transform my into an extention and thus inject this css directly in Jupyter. I found no documentation and I drawn myself in ipyleaflet and ipyvue setup/webpack/npm stuff. also I went to the Jupyter-template repository but it’s way to complicated for my use case.

My guess is that I need to inject the following data_files using my setup.py:

from pathlib import Path

from setuptools import setup

ROOT = Path(__file__).parent

def rel(f: Path) -> str:
    """give the relative path of f with respect to ROOT"""
    # make sure the relative links are ok even when build in the isolated directory
    return str(f.relative_to(ROOT))


def get_data_files():
    """files that need to be installed in specific locations upon installation."""

    nbext = [rel(f) for f in ROOT.glob("jupyter/nbextension/*")]
    package = [rel(f) for f in ROOT.glob("jupyter/labextension/package.json")]
    labext = [rel(f) for f in ROOT.glob("jupyter/labextension/static/*")]
    nbconfig = [rel(f) for f in ROOT.glob("jupyter-test-extention.json")]

    return [
        ("share/jupyter/nbextensions/jupyter-test-extention", nbext),
        ("share/jupyter/labextensions/jupyter-test-extention", package),
        ("share/jupyter/labextensions/jupyter-test-extention/static", labext),
        ("etc/jupyter/nbconfig/notebook.d", nbconfig),
    ]

setup(data_files=get_data_files())

My question is what should be the content of these folder ? (again I have nothing fancy, plain old css and 2 js functions)