RapiDoc icon indicating copy to clipboard operation
RapiDoc copied to clipboard

Question: Contributing Guidelines?

Open officeSpacePirate opened this issue 3 years ago • 0 comments

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>

officeSpacePirate avatar Aug 11 '22 17:08 officeSpacePirate