fix(ui): fix swagger ui styling
Added the same swagger css as the apiman manager ui to ensure the same look and feel.
Furthermore, changed the background color of the curl response.
MODIFY
angular.json
angular.json
"src/themes/default.scss",
"node_modules/swagger-ui/dist/swagger-ui.css",
"node_modules/simplebar/dist/simplebar.min.css",
- "node_modules/prismjs/themes/prism.css",
"node_modules/material-icons/iconfont/filled.css"
],
"scripts": [
"node_modules/marked/marked.min.js",
- "node_modules/simplebar/dist/simplebar.min.js",
- "node_modules/prismjs/prism.js"
+ "node_modules/simplebar/dist/simplebar.min.js"
]
},
"configurations": {

MODIFY
package-lock.json
package-lock.json
"@ngx-translate/core": "14.0.0",
"@ngx-translate/http-loader": "7.0.0",
"@swimlane/ngx-charts": "20.1.0",
+ "@types/prismjs": "^1.26.0",
"json5": "2.2.1",
"keycloak-angular": "9.1.0",
"keycloak-js": "16.1.1",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
+ "node_modules/@types/prismjs": {
+ "version": "1.26.0",
+ "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+ "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ=="
+ },
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
+ "@types/prismjs": {
+ "version": "1.26.0",
+ "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+ "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ=="
+ },
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",

MODIFY
package.json
package.json
"@ngx-translate/core": "14.0.0",
"@ngx-translate/http-loader": "7.0.0",
"@swimlane/ngx-charts": "20.1.0",
+ "@types/prismjs": "^1.26.0",
"json5": "2.2.1",
"keycloak-angular": "9.1.0",
"keycloak-js": "16.1.1",

MODIFY
src/app/components/api-markdown-description/api-markdown-description.component.scss
src/app/components/api-markdown-description/api-markdown-description.component.scss
+/*!
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
+@import "~prismjs/themes/prism.css";
+
#markdown-container {
max-height: 50vh;
padding-left: 1%;

MODIFY
src/app/components/api-markdown-description/api-markdown-description.component.ts
src/app/components/api-markdown-description/api-markdown-description.component.ts
-import { Component, Input, OnInit } from '@angular/core';
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
+import {
+ AfterViewInit,
+ Component,
+ Input,
+ OnInit,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
+import * as Prism from 'prismjs';
+import 'prismjs/components';
@Component({
selector: 'app-api-markdown-description',
templateUrl: './api-markdown-description.component.html',
- styleUrls: ['./api-markdown-description.component.scss']
+ styleUrls: ['./api-markdown-description.component.scss'],
+ // Enable a ShadowRoot to apply styles in a isolated manner
+ // This is necessary to apply prism styling and syntax highlighting.
+ encapsulation: ViewEncapsulation.ShadowDom
})
-export class ApiMarkdownDescriptionComponent implements OnInit {
+export class ApiMarkdownDescriptionComponent implements OnInit, AfterViewInit {
+ @ViewChild('markdown-container') markdownContainer!: ParentNode;
@Input() markdownText = '';
constructor(private translator: TranslateService) {}
@@ -18,4 +47,9 @@ export class ApiMarkdownDescriptionComponent implements OnInit {
) as string;
}
}
+
+ // Activate syntax highlighting as soon as the page is rendered to avoid initialize errors
+ ngAfterViewInit(): void {
+ Prism.highlightAllUnder(this.markdownContainer);
+ }
}

ADD
src/assets/swagger-custom-styles.css
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+.swagger-ui .wrapper {
+ max-width: none !important;
+}
+
+.swagger-ui .info {
+ margin: 0 !important;
+}

MODIFY
src/styles.scss
src/styles.scss
@import "@angular/material/theming";
@import "src/themes/default";
@import "src/themes/custom";
+@import "assets/swagger-custom-styles.css";
@include mat.core;
/***** THEMING *****/
@@ -317,13 +318,3 @@ a {
width: initial;
overflow: hidden;
}
-
-// Overwrite some swagger css properties
-// We have to use the global css file and the !important property, otherwise it won't work
-.wrapper {
- max-width: none !important;
-}
-
-.info {
- margin: 0 !important;
-}

fix(ui): fix swagger ui styling

Added the same swagger css as the apiman manager ui to ensure the same look and feel.
Furthermore, changed the background color of the curl response.