From be3b1805bc0eac471872ef3aa24ff5fd42af4f2e Mon Sep 17 00:00:00 2001 From: Warren Parad Date: Sun, 9 Jun 2024 10:30:35 +0200 Subject: [PATCH 1/3] Fix hyperlink to tag page. fix #255 --- CHANGELOG.md | 2 ++ docs/documentation.md | 8 +++++ src/styles/main-body-styles.js | 1 + src/styles/schema-styles.js | 2 +- src/templates/expanded-endpoint-template.js | 38 ++++++++++++++++++--- src/templates/focused-endpoint-template.js | 4 +-- src/utils/common-utils.js | 2 +- 7 files changed, 48 insertions(+), 9 deletions(-) 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/main-body-styles.js b/src/styles/main-body-styles.js index 9ee0564a..305d261c 100644 --- a/src/styles/main-body-styles.js +++ b/src/styles/main-body-styles.js @@ -97,6 +97,7 @@ export default css` } .tag.title { text-transform: uppercase; + margin-bottom: 16px; } .header{ background-color:var(--header-bg); diff --git a/src/styles/schema-styles.js b/src/styles/schema-styles.js index 9de55e93..d23f6a16 100644 --- a/src/styles/schema-styles.js +++ b/src/styles/schema-styles.js @@ -107,7 +107,7 @@ 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; } diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js index 5154798a..1ded4757 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/utils/common-utils.js b/src/utils/common-utils.js index 69e507bf..d2ed0d95 100644 --- a/src/utils/common-utils.js +++ b/src/utils/common-utils.js @@ -149,7 +149,7 @@ export function replaceState(rawElementId) { const query = new URLSearchParams(currentQuery); query.delete('route'); const newQuery = query.toString().length > 1 ? `${query.toString()}&route=${elementId}` : `route=${elementId}`; - window.history.replaceState(null, null, `#${currentNavigationHashPart}?${newQuery}`); + window.history.pushState(null, null, `#${currentNavigationHashPart}?${newQuery}`); } export function toMarkdown(markdownStringRaw) { From c74e547713039fa7c313d088f3c18ea044b5a8af Mon Sep 17 00:00:00 2001 From: Warren Parad Date: Sun, 9 Jun 2024 16:19:09 +0200 Subject: [PATCH 2/3] Automatically display tag info page when clicked for expand/collapse. --- src/styles/font-styles.js | 2 +- src/styles/main-body-styles.js | 5 ++--- src/styles/schema-styles.js | 5 +++++ src/templates/expanded-endpoint-template.js | 2 +- src/templates/navbar-template.js | 5 +++-- 5 files changed, 12 insertions(+), 7 deletions(-) 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 305d261c..c34e8b65 100644 --- a/src/styles/main-body-styles.js +++ b/src/styles/main-body-styles.js @@ -96,8 +96,8 @@ export default css` padding:0 8px; } .tag.title { - text-transform: uppercase; - margin-bottom: 16px; + margin-bottom: 1rem; + font-weight: bold; } .header{ background-color:var(--header-bg); @@ -130,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 d23f6a16..19f5d098 100644 --- a/src/styles/schema-styles.js +++ b/src/styles/schema-styles.js @@ -111,4 +111,9 @@ export default css` 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 1ded4757..ed6aefea 100644 --- a/src/templates/expanded-endpoint-template.js +++ b/src/templates/expanded-endpoint-template.js @@ -17,7 +17,7 @@ export function expandedEndpointBodyTemplate(path, tag) { ${this.renderStyle === 'read' ? html`
` : ''}
${(this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂') - ? html`

${tag?.name}

` + ? html`
${tag?.name} ` : ''} diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js index fc4746dd..a1f7e0ba 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,7 @@ function onExpandCollapse(tagId) { if (tag.expanded && this.operationsCollapsed) { this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false); } + this.scrollToEventTarget(event, false); this.requestUpdate(); } @@ -98,7 +99,7 @@ export default function navbarTemplate() { ? html`` : html`