asp.net-core swagger redoc api-documentation

Create custom index.html in asp.net core Redoc as Api-Documentation

I'm using Asp.net core with Swagger and the Redoc as API-Documentation:

app.UseReDoc(c =>
    {
        c.DocumentTitle = "API Documentation";
        c.SpecUrl = "/swagger.json";
    });

And the default route for api-docs is /api-docs/index.html

I have two questions:

Is there a possibility to make a custom index.html page?

Can we add another custom page to the documentation?

Solution

You can make a custom index.html page for it, but it doesn't seem to support too much scalability, it seems that you can't add another pages.

app.UseReDoc(c =>
{
    c.DocumentTitle = "Swagger Demo Documentation";
    c.SpecUrl = "/swagger/v1/swagger.json";

    c.IndexStream = () => Assembly.GetExecutingAssembly()
        .GetManifestResourceStream("ProjectName.index.html"); // requires file to be added as an embedded resource
});

Add your custom Index.html as an embedded file in the csproj file:

<ItemGroup>
        <EmbeddedResource Include="index.html">
            <CopyToOutputDirectory>Always</CopyToOutputDirectory>
        </EmbeddedResource>
</ItemGroup>

My custom index.cshtml(To get started, you should base your custom index.html on the default version):

<!DOCTYPE html>
<html>
<head>
    <title>%(DocumentTitle)</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

    <!--
    ReDoc doesn't change outer page styles
    -->
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
    %(HeadContent)
</head>
<body>
    <h1>Customer Index Page</h1>
    <div id="redoc-container"></div>
    <script src="redoc.standalone.js"></script>
    <script type="text/javascript">
        Redoc.init('%(SpecUrl)', JSON.parse('%(ConfigObject)'), document.getElementById('redoc-container'))
    </script>
</body>
</html>

Test Result:

For more details, you can refer to this link.