Make the logo and favicon configurable

[mcollina]

as titled, we should also brand them as Fastify

[Xpucmoc-Bockpec]

I use this trick to change (prepend) all the CSS so you can use a custom logo, hide the top bar, etc.

h2 + a, section .models, .download-url-wrapper {
  display: none!important;
}

.topbar {
  background-color: #002f6c!important;
}

.opblock-get .opblock-summary-method {
  background-color: #0048a6!important;
}

.topbar-wrapper {
  height: 45px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("hello.svg");
}

.topbar-wrapper img {
  display: none;
}

function streamToString (stream) {
  const chunks = [];

  return new Promise((resolve, reject) => {
    stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
    stream.on('error', (err) => reject(err));
    stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
  });
}

fastify.addHook('onSend', async (req, res, payload) => {
  if (req.url === '/docs/static/swagger-ui.css') {
    const styleBuffer = await fs.readFile(path.join(path.resolve('path', 'to', 'styles.css')));

    return styleBuffer.toString() + (typeof payload === 'string' ? payload : await streamToString(payload));
  }
});

[Uzlopak]

ugh... so you basically ALWAYS patch the swagger-ui.css on the fly :/

It would be better to add a option for customCSS and customJS. Both should be then exposed like static files, and then patch once the index.html from swagger.ui with a style-tag and script tag for the css and js file and than it should be working.

Also we can add an option for favicon and if we set a favicon use https://www.npmjs.com/package/fastify-favicon and if not use favicon.ico like before.

[Xpucmoc-Bockpec]

Sure, but right now it's the only way I know. It can be improved (cached or smth), but it will still remain weird 😳