Fix hyperlink to tag page. fix #255

CHANGELOG.md

@@ -12,6 +12,8 @@ This package follows standard semvar, `<major>.<minor>.<build>`. 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.

docs/documentation.md

@@ -154,6 +154,14 @@ onEvent(event) {
   <div>Methods</div>
   <hr>
 </div>
+
+<!-- On Endpoint dipslay area -->
+<div slot="${tag}"></div>
+<div slot="${path}"></div>
+
+<!-- On Tag display page -->
+<div slot="${tag}--body"></div>
+<div slot="${tag}--footer"></div>
 ```
 
 #### Custom Navigation section

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);

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;
 }

src/templates/expanded-endpoint-template.js

@@ -8,19 +8,25 @@ 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]))) || [];
 
   const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate.call(this, path.xCodeSamples) : '';
   return html`
     ${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
     <div class='expanded-endpoint-body observe-me ${path.method}' part="section-operation ${path.elementId}" id='${path.elementId}'>
-      ${(this.renderStyle === 'focused' && tagName && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold"> ${tagName} </h3>` : ''}
-      ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
+      ${(this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂')
+        ? html`<h2 class="tag-link upper" style="margin-top: 0; font-weight:bold" data-content-id="${tag.elementId}" @click="${(e) => this.scrollToEventTarget(e, false)}"> ${tag?.name} </h2>`
+        : ''}
+      <slot name="${tag.elementId}"></slot>
+
       <div style="display: flex; justify-content: space-between">
         <div style="flex-grow: 1">
-          <h2>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
+          <h2 style="display: flex; align-items: center;">
+            <div>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</div>
+            <div>${path.deprecated ? html`<div>&nbsp;-<span class="bold-text red-text" style="font-size: var(--font-size-regular)"> DEPRECATED</small></div>` : ''}</div>
+          </h2>
           <div class='mono-font part="section-operation-url" regular-font-size' style='padding: 8px 0; color:var(--fg3)'> 
             ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''}
             <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
@@ -87,7 +93,6 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
   return html`
     <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="">
       <div class="title tag" part="label-tag-title">${tag.name}</div>
-      <slot name="${tag.elementId}"></slot>
       <slot name="${tag.elementId}--subsection--${subsectionId}">
         <div class="regular-font-size">
         ${
@@ -98,6 +103,29 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
         }
         </div>
       </slot>
+      <slot name="${tag.elementId}--body"></slot>
+
+      <br>
+      <strong>Operations</strong>
+
+      <div class='nav-bar-paths-under-tag' style="max-width: 300px">
+        ${tag.paths.map((p) => html`
+        <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
+          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}'>
+          <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
+            ${this.usePathInNavBar
+              ? html`<div class='mono-font' style="display: flex; align-items: center;">
+                  <div class="method ${p.method}"><span style="line-height: 1;">${p.method}</span></div> 
+                  <div style="display: flex; flex-wrap: wrap;">${p.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div>
+                </div>`
+              : p.summary || p.shortSummary
+            }
+            ${p.isWebhook ? '(Webhook)' : ''}
+          </span>
+        </div>`)}
+      </div>
+
+      <slot name="${tag.elementId}--footer"></slot>
     </section>`;
 }
 /* eslint-enable indent */

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);

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) {