Merge pull request #256 from Authress-Engineering/fix-tag-link

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

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 { 

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

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`<div class="title tag-link" 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/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`
                   <div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}'
-                    @click='${() => { onExpandCollapse.call(this, tag.elementId); }}'>
+                    @click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'>
 
                     <div style="display: flex; justify-content: space-between; width: 100%;">
                       <div style="margin-right: .5rem">${tag.name}</div>

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