style/feat: stretch md reader if no key features are available / default value if no markdown was stored for an API
MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<mat-expansion-panel-header>
<mat-panel-title>
<div id="version-info">
- Version {{ api.version }} of {{ api.api.name }}
+ {{'COMMON.VERSION' | translate}} {{ api.version }} {{'COMMON.OF' | translate}} {{ api.api.name }}
<span *ngIf="isLatest" id="latest-tag" class="primary">[latest]</span>
</div>
<a *ngIf="api.docsAvailable"
- [routerLink]="['/swagger', api.api.organization.id, api.api.id,api.version]"
- >
+ [routerLink]="['/swagger', api.api.organization.id, api.api.id,api.version]">
<button
mat-raised-button
id="docs-button"
- color="primary"
- >
+ color="primary">
{{ "COMMON.API_DOCS" | translate }}
</button>
</a>
<img
mat-card-avatar
alt="Logo"
- src="https://github.com/apiman/apiman/raw/master/manager/ui/war/plugins/api-manager/img/about-logo.png"
+ src="assets/img/api-man-logo.png"
/>
</span>
- <p id="shortDescription">{{ shortDescription }}</p>
+ <p id="shortDescription">{{ api.api.description }}</p>
</div>
- <div class="container">
+ <!-- Template for MD-Reader -->
+ <ng-template #mdTemplate>
<div class="box" id="long-description-tile" data-simplebar>
- <markdown [data]="api.extendedDescription"></markdown>
+ <markdown [data]="markDownText"></markdown>
</div>
- <div class="box" id="key-features" *ngIf="features.length > 0">
+ </ng-template>
+
+ <!-- Template for Key Features -->
+ <ng-template #featuresTemplate>
+ <div id="key-features" *ngIf="features.length > 0">
<h1 class="primary">Key Features</h1>
+ <div>
<mat-list>
<mat-list-item *ngFor="let feature of features">
- <mat-icon matListIcon class="primary material-icons-outlined mr-8"
- >folder_outline</mat-icon
- >
+ <mat-icon matListIcon class="primary material-icons-outlined mr-8">star_border</mat-icon>
<span>{{ feature }}</span>
</mat-list-item>
</mat-list>
</div>
</div>
+ </ng-template>
+
+ <!-- Markdown Reader & Key Features -->
+ <div *ngIf="hasMdAndFeatures()" class="md-and-features">
+ <template [ngTemplateOutlet]="mdTemplate"></template>
+ <template [ngTemplateOutlet]="featuresTemplate"></template>
+ </div>
+
+ <!-- Markdown only -->
+ <div *ngIf="hasMdOnly()" class="md-only">
+ <template [ngTemplateOutlet]="mdTemplate"></template>
+ </div>
+
+ <!-- Plans -->
<app-plan-card-list [apiVersion]="api"></app-plan-card-list>
</mat-expansion-panel>

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
.box{
- width: 100%;
height: 100%;
padding-left: 1%;
padding-right: 1%;
@@ -61,8 +60,12 @@ mat-grid-list {
background-color: rgba(0, 0, 0, 0.04) !important;
}
-.container {
+.md-and-features{
display: grid;
- grid-template-columns: 3fr 1fr;
- gap: 40px;
+ grid-column-gap: 40px;
+ grid-template-columns: 3.6fr 1fr;
+}
+
+.md-only{
+ width: unset;
}

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
import { Component, Input, OnInit } from '@angular/core';
import {IApiVersionExt} from '../../interfaces/IApiVersionExt';
+import {TranslateService} from "@ngx-translate/core";
@Component({
selector: 'app-marketplace-api-description',
@@ -11,17 +12,20 @@ export class MarketplaceApiDescriptionComponent implements OnInit {
@Input() isLatest!: boolean;
features: string[] = ['fast', 'free', 'fancy features'];
- shortDescription = '';
+ public markDownText = this.translator.instant('API_DETAILS.NO_EXT_DESCRIPTION');
- constructor() {}
+ constructor(private translator: TranslateService) {}
ngOnInit(): void {
- this.getShortDescription();
+ if (this.api.extendedDescription)
+ this.markDownText = this.api.extendedDescription;
}
- private getShortDescription() {
- if (this.api.api.description) {
- this.shortDescription = this.api.api.description.substring(0, 240);
+ hasMdAndFeatures() {
+ return this.markDownText && this.features.length > 0;
}
+
+ hasMdOnly() {
+ return this.markDownText && this.features.length === 0
}
}

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"ERROR": "Data could not be loaded, please try again later.",
"SUCCESS": "Successfully created!",
"LOGIN_OR_REGISTER": "Login / Register",
- "LOGOUT": "Logout"
+ "LOGOUT": "Logout",
+ "VERSION": "Version",
+ "OF": "of"
},
"HOME": {
"TITLE": "KoolBank Api Developer Portal",
"UNREGISTER_TITLE": "Remove Client",
"UNREGISTER_SURE": "Are you really sure you want to <span class='warn'>remove</span> the client <b>{{value}}</b> and its contracts?",
"UNREGISTER_BTN": "Unregister"
+ },
+ "API_DETAILS": {
+ "NO_EXT_DESCRIPTION": "No further description has been stored for this API"
}
}

style/feat: stretch md reader if no key features are available / default value if no markdown was stored for an API