A MkDocs plugin supports adding Redoc to the page.
Home Page: https://blueswen.github.io/mkdocs-redoc-tag/
License: MIT License
Hi,
thank you so much for making this plugin! 👍 I've tried it and everything seems to work as expected when using with mkdocs serve.
I just didn't figure out how to extend the content to use the whole space of the page.
Even if I include:
---
hide:
- navigation
- toc
---in the markdown file header, the ReDoc OpenAPI content still doesn't use the whole available space on the page. Maybe on a small screen is is not an issue, but on 4k, it looks weird.
Have a look at the screenshot below.
Including an extra CSS stylesheet (as proposed e.g. here doesn't solve the problem, because is makes wider everything, not just this page.
Also, an option to remove the extra scroll bar and really integrate the specs as page content would be very cool.
Hi,
I just tried to generate a fully static offline documentation website that would be working properly without any webserver. Unfortunately it seems that there is a similar bug to the one described in the issue I've opened for mkdocs-swagger-ui-tag plugin.
When using offline, I see just blank page and in the developer console in web browser, there is an error:
redoc-6bece43f.html:24 Uncaught DOMException: Failed to read a named property 'scheme' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
at window.onload (file:///<local path>/redoc-6bece43f.html:24:36)which points to following section of generated .html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redoc</title>
<link rel="stylesheet" type="text/css" id="slate-css" media="none" href="assets/stylesheets/redark.css" />
<script src="assets/javascripts/redark.js" charset="UTF-8"> </script>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body style="background: ;">
<div id="redoc-container"></div>
<script src="assets/javascripts/redoc.standalone.js" charset="UTF-8"> </script>
<script>
const openapi_spec_url = "assets/openapi/openapi.json";
window.onload = function () {
const parent_scheme = parent.scheme <---------------- HERE the exception occurrs
if (parent_scheme === "slate") {
enable_dark_mode();
} else {
disable_dark_mode();
}
}
enable_dark_mode = function(){
document.getElementById("slate-css").media = ""
Redoc.init(
openapi_spec_url,
{ theme: redark },
document.getElementById('redoc-container'),
);
}
disable_dark_mode = function(){
document.getElementById("slate-css").media = "none"
Redoc.init(
openapi_spec_url,
{},
document.getElementById('redoc-container'),
);
}
</script>
</body>
</html>I appreciate any help. I really like your plugin and this issue is the only thing stopping us to use it on our project.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.