diff --git a/CHANGELOG.md b/CHANGELOG.md index 03dd5985..06c55151 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ This package follows standard semvar, `..`. No breaking cha * Automatically retry fetching the spec if it doesn't work for any reason. * Fix array description display preference to be first--The Array description, and then only second--The array item schema description, so that the "more specific" description wins, even though the "items" description is more deeply nested. This aligns to the expected behavior of preference in the json schema. * Fix selecte drop down menu update trigger. +* Add missing link to Tag display page. +* Replace `replaceState` with `pushState` so forwards and backwards navigation actually work. ## 2.1 * Add `x-locale` vendor extension to specify the locale of the spec. diff --git a/docs/documentation.md b/docs/documentation.md index 7a417fec..913e5ecc 100644 --- a/docs/documentation.md +++ b/docs/documentation.md @@ -154,6 +154,14 @@ onEvent(event) {
Methods
+ + +
+
+ + +
+
``` #### Custom Navigation section diff --git a/src/styles/font-styles.js b/src/styles/font-styles.js index 5b6ee8e4..e75ddc88 100644 --- a/src/styles/font-styles.js +++ b/src/styles/font-styles.js @@ -15,7 +15,7 @@ export default css` font-family:var(--font-mono); } .title { - font-size: calc(var(--font-size-small) + 18px); + font-size: calc(var(--font-size-small) + 1rem); font-weight: normal } .sub-title{ font-size: 20px;} diff --git a/src/styles/main-body-styles.js b/src/styles/main-body-styles.js index 9ee0564a..c34e8b65 100644 --- a/src/styles/main-body-styles.js +++ b/src/styles/main-body-styles.js @@ -96,7 +96,8 @@ export default css` padding:0 8px; } .tag.title { - text-transform: uppercase; + margin-bottom: 1rem; + font-weight: bold; } .header{ background-color:var(--header-bg); @@ -129,7 +130,6 @@ export default css` } .expanded-endpoint-body, .expanded-endpoint-component { position: relative; - padding: 6px 0px; } .divider { diff --git a/src/styles/schema-styles.js b/src/styles/schema-styles.js index 9de55e93..19f5d098 100644 --- a/src/styles/schema-styles.js +++ b/src/styles/schema-styles.js @@ -107,8 +107,13 @@ export default css` } } -.expanded-endpoint-component > h2:hover, .schema-link:hover { +.expanded-endpoint-component > h2:hover, .schema-link:hover, .expanded-endpoint-body > .tag-link:hover { cursor: pointer; text-decoration: underline; } + +.tag-link { + margin-top: 0; + font-weight: bold; +} `; diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js index 5154798a..ed6aefea 100644 --- a/src/templates/expanded-endpoint-template.js +++ b/src/templates/expanded-endpoint-template.js @@ -8,7 +8,7 @@ import '../components/api-request.js'; import '../components/api-response.js'; /* eslint-disable indent */ -export function expandedEndpointBodyTemplate(path, tagName = '') { +export function expandedEndpointBodyTemplate(path, tag) { // Filter API Keys that are non-empty and are applicable to the the path const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter((v) => (v.finalKeyValue && path.security && path.security.some((ps) => ps[v.apiKeyId]))) || []; @@ -16,11 +16,17 @@ export function expandedEndpointBodyTemplate(path, tagName = '') { return html` ${this.renderStyle === 'read' ? html`
` : ''}
- ${(this.renderStyle === 'focused' && tagName && tagName !== 'General ⦂') ? html`

${tagName}

` : ''} - ${path.deprecated ? html`
DEPRECATED
` : ''} + ${(this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂') + ? html`
${tag?.name} ` + : ''} + +
-

${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}

+

+
${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}
+
${path.deprecated ? html`
 - DEPRECATED
` : ''}
+

${path.isWebhook ? html` WEBHOOK ` : ''} ${path.method} @@ -87,7 +93,6 @@ export function expandedTagTemplate(tagId, subsectionFullId) { return html`
${tag.name}
-
${ @@ -98,6 +103,29 @@ export function expandedTagTemplate(tagId, subsectionFullId) { }
+ + +
+ Operations + +
+ ${tag.paths.map((p) => html` +
+ + ${this.usePathInNavBar + ? html`
+
${p.method}
+
${p.path.split('/').filter(t => t.trim()).map(t => html`/${t}`)}
+
` + : p.summary || p.shortSummary + } + ${p.isWebhook ? '(Webhook)' : ''} + +
`)} +
+ +
`; } /* eslint-enable indent */ diff --git a/src/templates/focused-endpoint-template.js b/src/templates/focused-endpoint-template.js index a6504acb..d2167df0 100644 --- a/src/templates/focused-endpoint-template.js +++ b/src/templates/focused-endpoint-template.js @@ -22,7 +22,7 @@ function defaultContentTemplate() { const selectedTagObj = this.resolvedSpec.tags[0]; const selectedPathObj = selectedTagObj?.paths[0]; return (selectedPathObj) - ? wrapFocusedTemplate(expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name)) + ? wrapFocusedTemplate(expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj)) : wrapFocusedTemplate(''); } @@ -65,7 +65,7 @@ export default function focusedEndpointTemplate() { } } if (selectedPathObj) { - focusedTemplate = wrapFocusedTemplate.call(this, expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name)); + focusedTemplate = wrapFocusedTemplate.call(this, expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj)); } else { // if explorerLocation is not found then show the default content (overview or first-path) focusedTemplate = defaultContentTemplate.call(this); diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js index fc4746dd..b24c10a0 100644 --- a/src/templates/navbar-template.js +++ b/src/templates/navbar-template.js @@ -5,7 +5,7 @@ import { getI18nText } from '../languages/index.js'; import { expandCollapseComponent } from './endpoint-template.js'; import { getComponentInfo } from './components-template.js'; -function onExpandCollapse(tagId) { +function onExpandCollapseTag(event, tagId) { const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId); if (!tag) { return; @@ -14,6 +14,11 @@ function onExpandCollapse(tagId) { if (tag.expanded && this.operationsCollapsed) { this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false); } + + // Only display the dedicated tag page if the tag has a description, otherwise, it will be an ugly page with nothing on it. + if (tag.description) { + this.scrollToEventTarget(event, false); + } this.requestUpdate(); } @@ -98,7 +103,7 @@ export default function navbarTemplate() { ? html`` : html`