From 14a082d4908fcf1184ce980c20a23ffe6a00d1e4 Mon Sep 17 00:00:00 2001 From: qazsato Date: Sun, 6 Jul 2025 19:42:45 +0900 Subject: [PATCH 1/7] add search endpoint to the api --- eslint.config.mjs | 1 + resources/common/index.css | 98 ++++++++++++++++++++++++++++++++ resources/common/index.js | 88 ++++++++++++++++++++++++++++ resources/redoc/index.css | 23 ++++++++ resources/redoc/index.js | 38 ++++++++++++- resources/redoc/template.ejs | 15 ++++- resources/stoplight/index.css | 23 ++++++++ resources/stoplight/index.js | 33 +++++++++++ resources/stoplight/template.ejs | 14 ++++- resources/swagger/index.css | 23 ++++++++ resources/swagger/index.js | 47 +++++++++++++++ resources/swagger/template.ejs | 14 ++++- src/index.js | 10 ++++ 13 files changed, 422 insertions(+), 5 deletions(-) create mode 100644 resources/common/index.css create mode 100644 resources/common/index.js diff --git a/eslint.config.mjs b/eslint.config.mjs index 64dbaee..1ef6541 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -11,6 +11,7 @@ export default [ ...globals.jest, SwaggerUIBundle: 'readonly', Redoc: 'readonly', + autoComplete: 'readonly', }, }, }, diff --git a/resources/common/index.css b/resources/common/index.css new file mode 100644 index 0000000..60ce956 --- /dev/null +++ b/resources/common/index.css @@ -0,0 +1,98 @@ +#search-button { + position: fixed; + top: 28px; + right: 28px; + z-index: 10; + display: flex; + align-items: center; + background-color: #fff; + border-radius: 4px; + border: 1px solid #d9d9d9; + padding: 4px 12px 4px 8px; + cursor: pointer; + + .icon { + font-size: 18px; + margin-right: 4px; + } +} + +#search-dialog { + position: fixed; + top: 10px; + margin: 0 auto; + height: 100%; + background: transparent; + border: none; +} + +#auto-complete { + background-color: #fff; +} + +.auto-complete-list { + .auto-complete-list-item { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 12px; + cursor: pointer; + border-bottom: 1px solid #f0f0f0; + border-radius: 0; + } +} + +.method-tag { + display: inline-block; + padding: 2px 0; + border-radius: 4px; + font-size: 11px; + color: #fff; + min-width: 54px; + text-align: center; +} + +.endpoint-path { + font-size: 13px; +} + +[data-theme=dark] { + #search-dialog::backdrop { + background-color: rgba(255, 255, 255, 0.1); + } + + #search-button { + background-color: #1f1f1f; + border: 1px solid #444; + color: #fff; + } + + #auto-complete { + background-color: #1f1f1f; + border: 1px solid #444; + color: #fff; + } + + .auto-complete-list { + background-color: #1f1f1f; + border: 1px solid #444; + + .auto-complete-list-item { + background-color: #1f1f1f; + border-bottom: 1px solid #444; + color: #fff; + + &:hover { + background-color: #333; + } + } + + .auto-complete-list-item[aria-selected="true"] { + background-color: #333; + } + } + + .endpoint-path { + color: #ccc; + } +} \ No newline at end of file diff --git a/resources/common/index.js b/resources/common/index.js new file mode 100644 index 0000000..a1335da --- /dev/null +++ b/resources/common/index.js @@ -0,0 +1,88 @@ +// eslint-disable-next-line no-unused-vars +class SearchDialog { + dialog + autocomplete + + constructor(dialogId, inputId, openapi) { + this.dialog = document.getElementById(dialogId) + if (!this.dialog) { + throw new Error(`Dialog with id "${dialogId}" not found`) + } + + this.autocomplete = new autoComplete({ + selector: `#${inputId}`, + placeHolder: 'Search endpoints', + data: { + src: this.filterEndpoints(openapi), + keys: ['name'], + }, + searchEngine: 'loose', + threshold: 0, + resultsList: { + maxResults: undefined, + class: 'auto-complete-list', + element: (list, data) => { + if (data.results.length > 0) { + list.innerHTML = '' + data.results.forEach((item) => { + const li = document.createElement('li') + li.className = 'auto-complete-list-item' + li.innerHTML = ` + ${item.value.method} + ${item.value.path} + ` + list.appendChild(li) + }) + } + }, + }, + }) + + this.dialog.addEventListener('click', (event) => { + if (event.target === this.dialog) { + this.hide() + } + }) + } + + on(event, callback) { + if (event === 'select') { + this.autocomplete.input.addEventListener('selection', (event) => { + callback(event.detail.selection.value) + }) + } else { + throw new Error(`Unsupported event: ${event}`) + } + } + + show() { + this.autocomplete.input.value = '' + this.autocomplete.start() + this.dialog.showModal() + } + + hide() { + this.dialog.close() + } + + filterEndpoints(openapi) { + const endpoints = [] + const paths = openapi.paths + for (const path in paths) { + const methods = Object.keys(paths[path]) + for (const method of methods) { + if (method === 'parameters') { + continue + } + endpoints.push({ + method: method.toUpperCase(), + path, + name: `${method.toUpperCase()} ${path}`, + operationId: paths[path][method].operationId, + tag: paths[path][method].tags[0] || 'default', + }) + } + } + return endpoints + } +} diff --git a/resources/redoc/index.css b/resources/redoc/index.css index 4e80383..7bfae5b 100644 --- a/resources/redoc/index.css +++ b/resources/redoc/index.css @@ -12,4 +12,27 @@ body { border: none !important; background-color: #3f3f46 !important; } +} + +.method-get { + background-color: rgb(47, 129, 50); +} + +.method-post { + background-color: rgb(24, 111, 175); +} + +.method-put, +.method-patch { + background-color: rgb(149, 80, 124); +} + +.method-delete { + background-color: rgb(204, 51, 51); +} + +.method-head, +.method-options, +.method-trace { + background-color: #9e9e9e; } \ No newline at end of file diff --git a/resources/redoc/index.js b/resources/redoc/index.js index 6e2d2ad..6b9cc95 100644 --- a/resources/redoc/index.js +++ b/resources/redoc/index.js @@ -122,10 +122,46 @@ const redark = { }, } -let option = {} +let option = { + disableSearch: true, +} if (document.documentElement.getAttribute('data-theme') === 'dark') { option = { theme: redark } } // ref. https://redocly.com/docs/redoc/deployment/html#the-redoc-object Redoc.init(window.apiDocs, option, document.getElementById('redoc-container')) + +// ref. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples +const modifierKeyPrefix = + navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone' + ? '⌘' // command key + : '^' // control key + +const searchButton = document.querySelector('#search-button') +searchButton.addEventListener('click', () => searchDialog.show()) +searchButton.querySelector('.text').textContent = + `Search ${modifierKeyPrefix}+K` + +// eslint-disable-next-line no-undef +const searchDialog = new SearchDialog( + 'search-dialog', + 'auto-complete', + window.apiDocs, +) +searchDialog.on('select', (selection) => { + const tag = selection.tag + const operationId = selection.operationId + const url = new URL(location.href) + url.hash = `#tag/${tag}/operation/${operationId}` + location.href = url.toString() + searchDialog.hide() +}) + +document.addEventListener('keydown', function (e) { + const isCmdOrCtrl = modifierKeyPrefix === '⌘' ? e.metaKey : e.ctrlKey + if (isCmdOrCtrl && e.key.toLowerCase() === 'k') { + searchDialog.show() + e.preventDefault() + } +}) diff --git a/resources/redoc/template.ejs b/resources/redoc/template.ejs index 8b87ea7..2b6fef2 100644 --- a/resources/redoc/template.ejs +++ b/resources/redoc/template.ejs @@ -1,18 +1,29 @@ - + <%= title %> + - + + + + + + +
+ \ No newline at end of file diff --git a/resources/stoplight/index.css b/resources/stoplight/index.css index 5f65954..ff7395c 100644 --- a/resources/stoplight/index.css +++ b/resources/stoplight/index.css @@ -13,4 +13,27 @@ .sl-elements-api { background-color: var(--color-canvas-pure); } +} + +.method-get { + background-color: #05b870; +} + +.method-post { + background-color: #19abff; +} + +.method-put, +.method-patch { + background-color: #f46d2a; +} + +.method-delete { + background-color: #f05151; +} + +.method-head, +.method-options, +.method-trace { + background-color: #9e9e9e; } \ No newline at end of file diff --git a/resources/stoplight/index.js b/resources/stoplight/index.js index 5155922..d0d1311 100644 --- a/resources/stoplight/index.js +++ b/resources/stoplight/index.js @@ -4,8 +4,41 @@ if (THEMES.includes(themeParam)) { document.documentElement.setAttribute('data-theme', themeParam) } +// ref. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples +const modifierKeyPrefix = + navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone' + ? '⌘' // command key + : '^' // control key + /* ref. https://github.com/stoplightio/elements/blob/main/docs/getting-started/elements/html.md#examples */ ;(async () => { const docs = document.querySelector('.elements-api') docs.apiDescriptionDocument = window.apiDocs + + const searchButton = document.querySelector('#search-button') + searchButton.addEventListener('click', () => searchDialog.show()) + searchButton.querySelector('.text').textContent = + `Search ${modifierKeyPrefix}+K` + + // eslint-disable-next-line no-undef + const searchDialog = new SearchDialog( + 'search-dialog', + 'auto-complete', + window.apiDocs, + ) + searchDialog.on('select', (selection) => { + const operationId = selection.operationId + const url = new URL(location.href) + url.hash = `#/operations/${operationId}` + location.href = url.toString() + searchDialog.hide() + }) + + document.addEventListener('keydown', function (e) { + const isCmdOrCtrl = modifierKeyPrefix === '⌘' ? e.metaKey : e.ctrlKey + if (isCmdOrCtrl && e.key.toLowerCase() === 'k') { + searchDialog.show() + e.preventDefault() + } + }) })() diff --git a/resources/stoplight/template.ejs b/resources/stoplight/template.ejs index ca18362..c2b323d 100644 --- a/resources/stoplight/template.ejs +++ b/resources/stoplight/template.ejs @@ -1,17 +1,29 @@ - + <%= title %> + + + + + + + + + \ No newline at end of file diff --git a/resources/swagger/index.css b/resources/swagger/index.css index b1da224..d3fa0c7 100644 --- a/resources/swagger/index.css +++ b/resources/swagger/index.css @@ -11,4 +11,27 @@ html[data-theme="dark"] { .swagger-ui .microlight { filter: invert(100%) hue-rotate(180deg); } +} + +.method-get { + background-color: #61affe; +} + +.method-post { + background-color: #49cc90; +} + +.method-put, +.method-patch { + background-color: #fca130; +} + +.method-delete { + background-color: #f93e3e; +} + +.method-head, +.method-options, +.method-trace { + background-color: #9e9e9e; } \ No newline at end of file diff --git a/resources/swagger/index.js b/resources/swagger/index.js index 6d07311..1dbe2a7 100644 --- a/resources/swagger/index.js +++ b/resources/swagger/index.js @@ -4,10 +4,57 @@ if (THEMES.includes(themeParam)) { document.documentElement.setAttribute('data-theme', themeParam) } +// ref. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples +const modifierKeyPrefix = + navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone' + ? '⌘' // command key + : '^' // control key + /* ref. https://swagger.io/docs/open-source-tools/swagger-ui/usage/installation/ */ window.onload = () => { window.ui = SwaggerUIBundle({ spec: window.apiDocs, dom_id: '#swagger-ui', + deepLinking: true, + }) + + const searchButton = document.querySelector('#search-button') + searchButton.addEventListener('click', () => searchDialog.show()) + searchButton.querySelector('.text').textContent = + `Search ${modifierKeyPrefix}+K` + + // eslint-disable-next-line no-undef + const searchDialog = new SearchDialog( + 'search-dialog', + 'auto-complete', + window.apiDocs, + ) + searchDialog.on('select', (selection) => { + const tag = selection.tag + const operationId = selection.operationId + const url = new URL(location.href) + url.hash = `#/${tag}/${operationId}` + location.href = url.toString() + searchDialog.hide() + + const opblock = document.querySelector(`#operations-${tag}-${operationId}`) + opblock.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }) + const opblockButton = opblock.querySelector( + '.opblock-summary-control[aria-expanded="false"]', + ) + if (opblockButton) { + opblockButton.click() + } + }) + + document.addEventListener('keydown', function (e) { + const isCmdOrCtrl = modifierKeyPrefix === '⌘' ? e.metaKey : e.ctrlKey + if (isCmdOrCtrl && e.key.toLowerCase() === 'k') { + searchDialog.show() + e.preventDefault() + } }) } diff --git a/resources/swagger/template.ejs b/resources/swagger/template.ejs index c860131..d24947a 100644 --- a/resources/swagger/template.ejs +++ b/resources/swagger/template.ejs @@ -1,17 +1,29 @@ - + <%= title %> + + + + + + + +
+ \ No newline at end of file diff --git a/src/index.js b/src/index.js index be1e73a..1ca41dc 100755 --- a/src/index.js +++ b/src/index.js @@ -99,10 +99,18 @@ async function renderOpenApiHtml(result) { path.resolve(__dirname, `../resources/${ui}/template.ejs`), 'utf-8', ) + const cssCommonContent = fs.readFileSync( + path.resolve(__dirname, `../resources/common/index.css`), + 'utf-8', + ) const cssContent = fs.readFileSync( path.resolve(__dirname, `../resources/${ui}/index.css`), 'utf-8', ) + const jsCommonContent = fs.readFileSync( + path.resolve(__dirname, `../resources/common/index.js`), + 'utf-8', + ) const jsContent = fs.readFileSync( path.resolve(__dirname, `../resources/${ui}/index.js`), 'utf-8', @@ -121,7 +129,9 @@ async function renderOpenApiHtml(result) { theme: result.theme, title: result.title, description: result.description, + jsCommonContent, jsContent, + cssCommonContent, cssContent, apiDocs, }) From 17967f173a84771ba84172bb923322eeec989a10 Mon Sep 17 00:00:00 2001 From: qazsato Date: Mon, 7 Jul 2025 08:22:04 +0900 Subject: [PATCH 2/7] update exmaple --- docs/examples/redoc-dark.html | 263 +++++++++++++++++++++++++++- docs/examples/redoc-light.html | 263 +++++++++++++++++++++++++++- docs/examples/stoplight-dark.html | 257 ++++++++++++++++++++++++++- docs/examples/stoplight-light.html | 257 ++++++++++++++++++++++++++- docs/examples/swagger-dark.html | 271 ++++++++++++++++++++++++++++- docs/examples/swagger-light.html | 271 ++++++++++++++++++++++++++++- 6 files changed, 1566 insertions(+), 16 deletions(-) diff --git a/docs/examples/redoc-dark.html b/docs/examples/redoc-dark.html index 4ca3100..cf2ba7e 100644 --- a/docs/examples/redoc-dark.html +++ b/docs/examples/redoc-dark.html @@ -1,12 +1,112 @@ - + OpenAPI Docs + - + + + - + + + + +
+ \ No newline at end of file diff --git a/docs/examples/redoc-light.html b/docs/examples/redoc-light.html index c640e0b..f89ec4c 100644 --- a/docs/examples/redoc-light.html +++ b/docs/examples/redoc-light.html @@ -1,12 +1,112 @@ - + OpenAPI Docs + - + + + - + + + + +
+ \ No newline at end of file diff --git a/docs/examples/stoplight-dark.html b/docs/examples/stoplight-dark.html index 5ac18c4..825b988 100644 --- a/docs/examples/stoplight-dark.html +++ b/docs/examples/stoplight-dark.html @@ -1,12 +1,113 @@ - + OpenAPI Docs + + + + - + + + + + + diff --git a/docs/examples/stoplight-light.html b/docs/examples/stoplight-light.html index e8e7565..69a6dbd 100644 --- a/docs/examples/stoplight-light.html +++ b/docs/examples/stoplight-light.html @@ -1,12 +1,113 @@ - + OpenAPI Docs + + + + - + + + + + + diff --git a/docs/examples/swagger-dark.html b/docs/examples/swagger-dark.html index 40b262d..e585f11 100644 --- a/docs/examples/swagger-dark.html +++ b/docs/examples/swagger-dark.html @@ -1,11 +1,112 @@ - + OpenAPI Docs + + + + - + + + + +
+ diff --git a/docs/examples/swagger-light.html b/docs/examples/swagger-light.html index 3370563..052a4ce 100644 --- a/docs/examples/swagger-light.html +++ b/docs/examples/swagger-light.html @@ -1,11 +1,112 @@ - + OpenAPI Docs + + + + - + + + + +
+ From 650432c71540b05a1e96425725515b7e1bc92599 Mon Sep 17 00:00:00 2001 From: qazsato Date: Mon, 7 Jul 2025 08:47:54 +0900 Subject: [PATCH 3/7] fix default tag --- resources/common/index.js | 4 +++- resources/redoc/index.css | 17 +++++++++++++---- resources/stoplight/index.css | 17 +++++++++++++---- resources/swagger/index.css | 19 ++++++++++++++----- 4 files changed, 43 insertions(+), 14 deletions(-) diff --git a/resources/common/index.js b/resources/common/index.js index a1335da..143dec0 100644 --- a/resources/common/index.js +++ b/resources/common/index.js @@ -79,7 +79,9 @@ class SearchDialog { path, name: `${method.toUpperCase()} ${path}`, operationId: paths[path][method].operationId, - tag: paths[path][method].tags[0] || 'default', + tag: paths[path][method].tags + ? paths[path][method].tags[0] + : 'default', }) } } diff --git a/resources/redoc/index.css b/resources/redoc/index.css index 7bfae5b..d5d6c7f 100644 --- a/resources/redoc/index.css +++ b/resources/redoc/index.css @@ -22,7 +22,10 @@ body { background-color: rgb(24, 111, 175); } -.method-put, +.method-put { + background-color: rgb(149, 80, 124); +} + .method-patch { background-color: rgb(149, 80, 124); } @@ -31,8 +34,14 @@ body { background-color: rgb(204, 51, 51); } -.method-head, -.method-options, +.method-head { + background-color: rgb(162, 61, 173); +} + +.method-options { + background-color: rgb(148, 112, 20); +} + .method-trace { - background-color: #9e9e9e; + background-color: #000; } \ No newline at end of file diff --git a/resources/stoplight/index.css b/resources/stoplight/index.css index ff7395c..ed6805a 100644 --- a/resources/stoplight/index.css +++ b/resources/stoplight/index.css @@ -23,7 +23,10 @@ background-color: #19abff; } -.method-put, +.method-put { + background-color: #f46d2a; +} + .method-patch { background-color: #f46d2a; } @@ -32,8 +35,14 @@ background-color: #f05151; } -.method-head, -.method-options, +.method-head { + background-color: rgb(144, 97, 249); +} + +.method-options { + background-color: rgb(13, 90, 167); +} + .method-trace { - background-color: #9e9e9e; + background-color: rgb(13, 11, 40); } \ No newline at end of file diff --git a/resources/swagger/index.css b/resources/swagger/index.css index d3fa0c7..8f26681 100644 --- a/resources/swagger/index.css +++ b/resources/swagger/index.css @@ -21,17 +21,26 @@ html[data-theme="dark"] { background-color: #49cc90; } -.method-put, -.method-patch { +.method-put { background-color: #fca130; } +.method-patch { + background-color: #50e3c2; +} + .method-delete { background-color: #f93e3e; } -.method-head, -.method-options, +.method-head { + background-color: #9012fe; +} + +.method-options { + background-color: #0d5aa7; +} + .method-trace { - background-color: #9e9e9e; + background-color: #000; } \ No newline at end of file From b2081336ddcb665b0c367f7c7a1799638239a12a Mon Sep 17 00:00:00 2001 From: qazsato Date: Wed, 9 Jul 2025 08:35:09 +0900 Subject: [PATCH 4/7] add endpoint summary --- resources/common/index.css | 20 ++++++++++++++++++++ resources/common/index.js | 11 +++++++---- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/resources/common/index.css b/resources/common/index.css index 60ce956..2315f73 100644 --- a/resources/common/index.css +++ b/resources/common/index.css @@ -24,6 +24,10 @@ height: 100%; background: transparent; border: none; + + .auto-complete-list { + max-height: 265px; + } } #auto-complete { @@ -50,12 +54,24 @@ color: #fff; min-width: 54px; text-align: center; + flex-shrink: 0; +} + +.endpoint-info { + display: flex; + flex-direction: column; + flex: 1; } .endpoint-path { font-size: 13px; } +.endpoint-summary { + font-size: 11px; + color: #666; +} + [data-theme=dark] { #search-dialog::backdrop { background-color: rgba(255, 255, 255, 0.1); @@ -95,4 +111,8 @@ .endpoint-path { color: #ccc; } + + .endpoint-summary { + color: #888; + } } \ No newline at end of file diff --git a/resources/common/index.js b/resources/common/index.js index 143dec0..93672ed 100644 --- a/resources/common/index.js +++ b/resources/common/index.js @@ -14,7 +14,7 @@ class SearchDialog { placeHolder: 'Search endpoints', data: { src: this.filterEndpoints(openapi), - keys: ['name'], + keys: ['method', 'path', 'summary'], }, searchEngine: 'loose', threshold: 0, @@ -28,8 +28,11 @@ class SearchDialog { const li = document.createElement('li') li.className = 'auto-complete-list-item' li.innerHTML = ` - ${item.value.method} - ${item.value.path} +
${item.value.method}
+
+
${item.value.path}
+
${item.value.summary}
+
` list.appendChild(li) }) @@ -77,11 +80,11 @@ class SearchDialog { endpoints.push({ method: method.toUpperCase(), path, - name: `${method.toUpperCase()} ${path}`, operationId: paths[path][method].operationId, tag: paths[path][method].tags ? paths[path][method].tags[0] : 'default', + summary: paths[path][method].summary || '', }) } } From e694d631982b12bc224be9ca52f77f9ef023286a Mon Sep 17 00:00:00 2001 From: qazsato Date: Wed, 9 Jul 2025 08:51:07 +0900 Subject: [PATCH 5/7] update example --- docs/examples/redoc-dark.html | 54 +++++++++++++++++++++----- docs/examples/redoc-light.html | 56 +++++++++++++++++++++------ docs/examples/stoplight-dark.html | 54 +++++++++++++++++++++----- docs/examples/stoplight-light.html | 56 +++++++++++++++++++++------ docs/examples/swagger-dark.html | 60 ++++++++++++++++++++++------- docs/examples/swagger-light.html | 62 +++++++++++++++++++++++------- 6 files changed, 273 insertions(+), 69 deletions(-) diff --git a/docs/examples/redoc-dark.html b/docs/examples/redoc-dark.html index cf2ba7e..4f079b2 100644 --- a/docs/examples/redoc-dark.html +++ b/docs/examples/redoc-dark.html @@ -35,6 +35,10 @@ height: 100%; background: transparent; border: none; + + .auto-complete-list { + max-height: 265px; + } } #auto-complete { @@ -61,12 +65,24 @@ color: #fff; min-width: 54px; text-align: center; + flex-shrink: 0; +} + +.endpoint-info { + display: flex; + flex-direction: column; + flex: 1; } .endpoint-path { font-size: 13px; } +.endpoint-summary { + font-size: 11px; + color: #666; +} + [data-theme=dark] { #search-dialog::backdrop { background-color: rgba(255, 255, 255, 0.1); @@ -106,6 +122,10 @@ .endpoint-path { color: #ccc; } + + .endpoint-summary { + color: #888; + } } - + @@ -173,7 +202,7 @@ placeHolder: 'Search endpoints', data: { src: this.filterEndpoints(openapi), - keys: ['name'], + keys: ['method', 'path', 'summary'], }, searchEngine: 'loose', threshold: 0, @@ -187,8 +216,11 @@ const li = document.createElement('li') li.className = 'auto-complete-list-item' li.innerHTML = ` - ${item.value.method} - ${item.value.path} +
${item.value.method}
+
+
${item.value.path}
+
${item.value.summary}
+
` list.appendChild(li) }) @@ -236,9 +268,11 @@ endpoints.push({ method: method.toUpperCase(), path, - name: `${method.toUpperCase()} ${path}`, operationId: paths[path][method].operationId, - tag: paths[path][method].tags[0] || 'default', + tag: paths[path][method].tags + ? paths[path][method].tags[0] + : 'default', + summary: paths[path][method].summary || '', }) } } diff --git a/docs/examples/redoc-light.html b/docs/examples/redoc-light.html index f89ec4c..4686521 100644 --- a/docs/examples/redoc-light.html +++ b/docs/examples/redoc-light.html @@ -1,5 +1,5 @@ - + OpenAPI Docs @@ -35,6 +35,10 @@ height: 100%; background: transparent; border: none; + + .auto-complete-list { + max-height: 265px; + } } #auto-complete { @@ -61,12 +65,24 @@ color: #fff; min-width: 54px; text-align: center; + flex-shrink: 0; +} + +.endpoint-info { + display: flex; + flex-direction: column; + flex: 1; } .endpoint-path { font-size: 13px; } +.endpoint-summary { + font-size: 11px; + color: #666; +} + [data-theme=dark] { #search-dialog::backdrop { background-color: rgba(255, 255, 255, 0.1); @@ -106,6 +122,10 @@ .endpoint-path { color: #ccc; } + + .endpoint-summary { + color: #888; + } } - + @@ -173,7 +202,7 @@ placeHolder: 'Search endpoints', data: { src: this.filterEndpoints(openapi), - keys: ['name'], + keys: ['method', 'path', 'summary'], }, searchEngine: 'loose', threshold: 0, @@ -187,8 +216,11 @@ const li = document.createElement('li') li.className = 'auto-complete-list-item' li.innerHTML = ` - ${item.value.method} - ${item.value.path} +
${item.value.method}
+
+
${item.value.path}
+
${item.value.summary}
+
` list.appendChild(li) }) @@ -236,9 +268,11 @@ endpoints.push({ method: method.toUpperCase(), path, - name: `${method.toUpperCase()} ${path}`, operationId: paths[path][method].operationId, - tag: paths[path][method].tags[0] || 'default', + tag: paths[path][method].tags + ? paths[path][method].tags[0] + : 'default', + summary: paths[path][method].summary || '', }) } } diff --git a/docs/examples/stoplight-dark.html b/docs/examples/stoplight-dark.html index 825b988..eea3d3e 100644 --- a/docs/examples/stoplight-dark.html +++ b/docs/examples/stoplight-dark.html @@ -36,6 +36,10 @@ height: 100%; background: transparent; border: none; + + .auto-complete-list { + max-height: 265px; + } } #auto-complete { @@ -62,12 +66,24 @@ color: #fff; min-width: 54px; text-align: center; + flex-shrink: 0; +} + +.endpoint-info { + display: flex; + flex-direction: column; + flex: 1; } .endpoint-path { font-size: 13px; } +.endpoint-summary { + font-size: 11px; + color: #666; +} + [data-theme=dark] { #search-dialog::backdrop { background-color: rgba(255, 255, 255, 0.1); @@ -107,6 +123,10 @@ .endpoint-path { color: #ccc; } + + .endpoint-summary { + color: #888; + } } - +