schemadoctor/index.html at main · shiftnerd/schemadoctor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Schema Doctor: Reducer Edition</title>
  <meta name="description" content="Schema Doctor is an open-source tool to validate, clean, and reduce the size of OpenAPI schemas for automation, RPA workflows, and API integrations.">
  <meta name="keywords" content="Schema Doctor, OpenAPI, schema validator, schema fixer, schema reducer, API automation, JSON, YAML, Rewst, RPA">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Schema Doctor | OpenAPI Schema Fixer Tool">
  <meta property="og:description" content="Validate, fix, and simplify OpenAPI schemas for automation and RPA workflows.">
  <meta property="og:url" content="https://schemadoctor.com">
  <meta property="og:image" content="https://yourdomain.com/assets/schema-doctor-preview.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Schema Doctor | OpenAPI Schema Fixer Tool">
  <meta name="twitter:description" content="Open-source tool to validate, clean, and reduce the size of OpenAPI schemas for automation and RPA workflows.">
  <meta name="twitter:image" content="https://yourdomain.com/assets/schema-doctor-preview.png">
  <link rel="canonical" href="https://schemadoctor.com">
   <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Schema Doctor",
    "applicationCategory": "DeveloperTool",
    "url": "https://schemadoctor.com",
    "description": "Schema Doctor is an open-source tool to validate, fix, and simplify OpenAPI schemas for automation and RPA workflows.",
    "operatingSystem": "Any",
    "softwareVersion": "1.0.0",
    "author": {
      "@type": "Organization",
      "name": "Rewst Community"
    }
  }
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
</head>
<body class="theme-dark">
  <header class="topbar">
    <div class="brand">🩺 Schema Doctor: <span class="muted">Reducer Edition</span></div>
    <div class="actions">
      <button id="themeToggle" class="btn" title="Toggle theme">🌗 Theme</button>
      <button id="copyBtn" class="btn" title="Copy reduced JSON">📋 Copy</button>
      <button id="downloadBtn" class="btn primary" title="Download reduced.json">⬇️ Download</button>
    </div>
  </header>

  <main id="app-layout" class="layout">
    <section id="left-pane" class="pane inputs">
      <h2>Input</h2>

      <div class="input-row">
        <label for="schemaUrl">Fetch by URL</label>
        <div class="urlbar">
          <input id="schemaUrl" type="url" placeholder="https://example.com/openapi.yaml or .json" />
          <button id="fetchBtn" class="btn">Fetch</button>
        </div>
      </div>

      <div class="input-row">
        <label>Upload file (JSON or YAML)</label>
        <div id="dropZone" class="dropzone" tabindex="0" aria-label="Drop file here or click to choose">
          <input id="fileInput" type="file" accept=".json,.yaml,.yml,application/json,text/yaml" hidden />
          <div class="dz-hint">Drag & drop here or <span class="linkish">browse</span></div>
        </div>
      </div>

      <div class="input-row">
        <label for="pasteArea">Paste JSON/YAML</label>
        <textarea id="pasteArea" placeholder="Paste your OpenAPI schema here…" rows="6"></textarea>
        <div class="row-right">
          <button id="loadPasteBtn" class="btn">Load Paste</button>
        </div>
      </div>

      <div class="input-row">
        <button id="reduceBtn" class="btn primary">Generate Reduced Schema</button>
        <span id="status" class="status" aria-live="polite"></span>
      </div>

      <!-- Optional Endpoint Filter (accordion, collapsed by default) -->
      <details id="filter-panel" class="filter-accordion locked" aria-disabled="true">
        <summary class="filter-summary-row">
          <span class="chev" aria-hidden="true"></span>
          <span>Endpoint Filter</span>
          <small id="filter-summary" class="summary-pill"></small>
        </summary>

    <div class="filter-grid" style="display:grid; gap:.5rem; grid-template-columns: 1fr;">
        <div class="filter-toggle">
            <label class="switch">
              <input type="checkbox" id="filter-enabled" />
              <span class="slider" aria-hidden="true"></span>
              <span class="switch-label">Enable endpoint filtering</span>
            </label>
            <span class="toggle-hint">Only matching endpoints will be kept in the reduced schema.</span>
          </div>

      <div class="filter-row" style="display:flex; gap:1rem; flex-wrap:wrap;">
        <fieldset style="border:1px solid var(--border, rgba(255,255,255,.1)); border-radius:10px; padding:.5rem .75rem;">
          <legend>Methods</legend>
          <label><input type="checkbox" class="filter-method" value="get"    /> GET</label>
          <label><input type="checkbox" class="filter-method" value="post"   /> POST</label>
          <label><input type="checkbox" class="filter-method" value="put"    /> PUT</label>
          <label><input type="checkbox" class="filter-method" value="patch"  /> PATCH</label>
          <label><input type="checkbox" class="filter-method" value="delete" /> DELETE</label>
          <label><input type="checkbox" class="filter-method" value="head"   /> HEAD</label>
          <label><input type="checkbox" class="filter-method" value="options"/> OPTIONS</label>
          <label><input type="checkbox" class="filter-method" value="trace"  /> TRACE</label>
        </fieldset>

        <fieldset style="flex:1; min-width:280px; border:1px solid var(--border, rgba(255,255,255,.1)); border-radius:10px; padding:.5rem .75rem;">
          <legend>Path patterns (comma or newline)</legend>
          <textarea id="filter-paths" rows="3" placeholder="/zones, /dns_records or /accounts
  Use /regex/ to treat a token as RegExp"
            style="width:100%; resize:vertical;"></textarea>
        </fieldset>
      </div>

      <fieldset style="border:1px solid var(--border, rgba(255,255,255,.1)); border-radius:10px; padding:.5rem .75rem;">
        <legend>Tags / Categories</legend>

        <div id="filter-tags-toolbar" class="filter-toolbar">
            <input id="filter-tag-search" ...>
            <button id="tag-all" class="btn">All</button>
            <button id="tag-none" class="btn">None</button>
          </div>
          <div id="filter-tags" class="filter-tags">
          <em style="opacity:.7;">Open this panel after loading a schema to see tags…</em>
        </div>
      </fieldset>

      <div style="display:flex; gap:.5rem; align-items:center;">
        <button id="filter-clear" class="btn">Clear filter</button>
        <span id="filter-stats" style="opacity:.8;"></span>
      </div>
    </div>
    <!-- Pending banner (appears when filter changed but not applied) -->
<div id="filter-pending" class="callout info hidden">
    Filtering changes are pending. Press <strong>Generate</strong> or
    <button id="filter-apply-inline" class="btn small" type="button">Apply now</button>.
  </div>

<!-- Persistent metrics -->
<div id="metrics" aria-live="polite">
    <span class="metric-label">Metrics</span>
    <span id="metric-lines"   class="metric-chip">Lines: —</span>
    <span id="metric-actions" class="metric-chip">Actions: —</span>
  </div>
    </section>
    <details class="hint">
      <summary>Having CORS trouble fetching a URL?</summary>
      Try downloading the schema and using the upload/paste options. Some servers block cross‑origin fetches.
    </details>
    <div id="splitter" class="splitter" role="separator"
    aria-label="Resize sidebar" aria-orientation="vertical" tabindex="0"></div>

    <section id="right-pane" class="pane editors">
      <div class="editor-group">
        <h2>Original (read‑only)</h2>
        <div id="originalEditor" class="editor"></div>
      </div>
      <div class="editor-group">
        <h2>Reduced (JSON)</h2>
        <div id="reducedEditor" class="editor"></div>
      </div>
    </section>
  </main>

  <footer id="app-footer" class="app-footer">
    <div class="footer-content"> Other tools: <a href="https://schemadoctor.com/vector" target="_blank">Convert an image to vector(SVG)</a> | <a href="https://schemadoctor.com/postman" target="_blank">Convert a Postman collection to OpenAPI</a></div>
    <br>
    Disclaimer: This app is a community-driven project built by Ben Climer and is not officially supported or endorsed by Rewst.
    If you have suggestions or improvements, please submit a pull request.
  </footer>

  <!-- Libraries (CDNJS, no SRI to avoid mismatches) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/8.17.1/ajv7.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" defer></script>

  <!-- Monaco loader -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>

  <script>
    // Monaco worker config for CDN usage
    window.MonacoEnvironment = {
      getWorkerUrl: function(workerId, label) {
        const base = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/';
        const code = `self.MonacoEnvironment={baseUrl:'${base}'};importScripts('${base}vs/base/worker/workerMain.js');`;
        return URL.createObjectURL(new Blob([code], { type: 'text/javascript' }));
      }
    };
    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' } });
  </script>

  <!-- App -->
  <script src="app.js" defer></script>
</body>
</html>