How to customizing the swagger ui properties

[tq2021]

Hi docsy team,

This is a consulting issue about how to customize the swagger ui properties within docsy. I read the documentation swagger ui part. It only mentions that the Swagger’s CSS could be overridden. However, my question is if the swagger ui html could be overridden. I saw the code https://github.com/google/docsy/blob/a917d9da42c496054f5a9450f7c0def6a1d35ec8/layouts/shortcodes/swaggerui.html#L5, it seems that the swagger ui is initialized with hard code.

If I want to add some customizing properties such as supportedSubmitMethods to the swagger ui as below, is it good to do the overriding here?

    const ui = SwaggerUIBundle({
      url: {{ $original | relURL }},
      dom_id: '#ohpen_swagger_ui',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      supportedSubmitMethods: []
    });

Otherwise, is there any standard way to do that? Thank you very much.

BR, Qin

[LisaFC]

From looking at the Swagger UI docs, that approach (overriding that shortcode file in your own project and adding the parameter) should work.

Unfortunately I don't know enough about the different places where you can customize Swagger UI to recommend any other/better approach - @theletterf, any suggestions?

[theletterf]

The way I did it years ago was to download the swagger-ui repo, alter the CSS, build, and then use the built distribution in Docsy by replacing the newly built files. Clunky, but worked.

https://github.com/swagger-api/swagger-ui/blob/master/docs/development/setting-up.md

From Docsy's docs:

You can customize Swagger UI’s look and feel by overriding Swagger’s CSS or by editing and compiling a Swagger UI dist yourself and replace themes/docsy/static/css/swagger-ui.css.

[johnhansarickWallaroo]

Here's my question - and showing my ignorance: when Docsy is installed as a module, there's no more themes/docsy/static/css/swagger-ui.css to modify.

So where should our modified swagger-ui.css file go: layouts/css? assets/css?

UPDATE: For those looking for the answer, put it in static/css/swagger-ui.css .

[chalin]

Closing. If there is still a problem, let me know and I'll reopen the issue; or create a new issue. Thanks.