RapiDoc
RapiDoc copied to clipboard
Question: Contributing Guidelines?
While playing around with RapiDoc, I put a simple html together for setting light/dark theme based on system preference and I thought I would add it to your existing list of examples. Looks like you guys don't have any contributing docs, so I was just curious whether there are standards you prefer to adhere to for pull requests.
Here's the html example for reference:
<!doctype html>
<!-- Important: must specify -->
<html>
<head>
<meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 characters -->
<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
<link rel="stylesheet" type="text/css" href="custom.css">
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const rapidocElement = document.getElementById("api-docs");
rapidocElement.addEventListener("before-render", (e) => {
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDark) {
rapidocElement.setAttribute("theme", "dark");
//rapidocElement.setAttribute("bg-color", "");
//rapidocElement.setAttribute("header-color", "");
//rapidocElement.setAttribute("primary-color", "");
//rapidocElement.setAttribute("nav-bg-color", "");
}
else {
rapidocElement.setAttribute("theme", "light");
//rapidocElement.setAttribute("bg-color", "");
//rapidocElement.setAttribute("header-color", "");
//rapidocElement.setAttribute("primary-color", "");
//rapidocElement.setAttribute("nav-bg-color", "");
}
});
});
</script>
</head>
<body>
<rapi-doc id="api-docs"
spec-url="https://petstore3.swagger.io/api/v3/openapi.json"
show-method-in-nav-bar="as-colored-block"
show-header="true"
allow-spec-url-load="false"
allow-spec-file-load="false"
allow-spec-file-download="true"
allow-server-selection="false"
schema-style="table"
schema-expand-level="1"
schema-description-expanded="true"
default-schema-tab="schema">
<div slot="logo" style="display: flex; align-items: flex-start; justify-content: left; margin-left: -4px;">
<div style=" width: 330px; display: flex; align-items: center;">
<div style="height: 40px; margin-left: 26px;">
<img src="https://seeklogo.com/images/S/swagger-logo-A49F73BAF4-seeklogo.com.png" style="height: 40px;">
</div>
<div style="margin-left:18px;">
<span style="color:#fff; font-size: 20px; font-weight:600;">Pet Store</span>
</div>
</div>
</div>
</rapi-doc>
</body>
</html>