Allow to change about page
MODIFY
docker/start-nginx-with-devportal.sh
docker/start-nginx-with-devportal.sh
@@ -33,13 +33,53 @@ else
export LOGO_FILE_URL="assets/ScheerPASLogo.svg"
fi
+# Set the default about logo
+if [ -n "$ABOUT_LOGO_FILE_URL" ]
+then
+ printf "Using custom about img url: %s\n" "$ABOUT_LOGO_FILE_URL"
+else
+ export ABOUT_LOGO_FILE_URL="assets/about-logo.png"
+fi
+
+# Set the fist link
+if [ -n "$FIRST_LINK" ]
+then
+ printf "Using first link: %s\n" "$FIRST_LINK"
+else
+ export FIRST_LINK="https://scheer-pas.com"
+fi
+
+# Set the fist link label
+if [ -n "$FIRST_LINK_LABEL" ]
+then
+ printf "Using first link label: %s\n" "$FIRST_LINK_LABEL"
+else
+ export FIRST_LINK_LABEL="Project Site"
+fi
+
+# Set the second link
+if [ -n "$SECOND_LINK" ]
+then
+ printf "Using second link: %s\n" "$SECOND_LINK"
+else
+ export SECOND_LINK="https://doc.scheer-pas.com/display/APIMGMNT"
+fi
+
+# Set the second link label
+if [ -n "$SECOND_LINK_LABEL" ]
+then
+ printf "Using second link label: %s\n" "$SECOND_LINK_LABEL"
+else
+ export SECOND_LINK_LABEL="User Guide"
+fi
+
# replace all occurences of placeholders with environment variables
# see https://blog.codecentric.de/en/2019/03/docker-angular-dockerize-app-easily/
for mainFileName in /usr/share/nginx/html/main*.js
do
- envsubst "\$KEYCLOAK_REALM \$API_MGMT_UI_REST_URL \$KEYCLOAK_AUTH_URL \$LOGO_FILE_URL" < "$mainFileName" > main.tmp
+ envsubst "\$KEYCLOAK_REALM \$API_MGMT_UI_REST_URL \$KEYCLOAK_AUTH_URL \$LOGO_FILE_URL \$ABOUT_LOGO_FILE_URL \$FIRST_LINK \$FIRST_LINK_LABEL \$SECOND_LINK \$SECOND_LINK_LABEL" < "$mainFileName" > main.tmp
mv main.tmp "${mainFileName}"
done

MODIFY
src/app/about/about.component.html
src/app/about/about.component.html
<h1>About</h1>
-<img src="assets/about-logo.png" width="376.6px" alt="Scheer PAS API Management">
+<img id="aboutLogo" src="{{aboutLogo}}" alt="Scheer PAS API Management">
<table>
<tr id="version">
</tr>
<tr></tr>
<tr>
- <th>Project Site</th>
- <td><a href="https://www.scheer-pas.com/">https://www.scheer-pas.com/</a></td>
+ <th>{{firstLinkLabel}}</th>
+ <td><a href="{{firstLink}}">{{firstLink}}</a></td>
</tr>
<tr>
- <th>User Guide</th>
- <td><a href="https://doc.scheer-pas.com/display/APIMGMNT">https://doc.scheer-pas.com/display/APIMGMNT</a></td>
+ <th>{{secondLinkLabel}}</th>
+ <td><a href="{{secondLink}}">{{secondLink}}</a></td>
</tr>
</table>

MODIFY
src/app/about/about.component.scss
src/app/about/about.component.scss
@@ -31,3 +31,7 @@ td {
a {
color: rgb(6, 97, 142);
}
+
+#aboutLogo {
+ width: 376.6px;
+}

MODIFY
src/app/about/about.component.ts
src/app/about/about.component.ts
import { Component, OnInit } from '@angular/core';
import { version } from '../../../package.json';
+import {environment} from '../../environments/environment';
@Component({
selector: 'app-about',
@@ -25,6 +26,11 @@ import { version } from '../../../package.json';
export class AboutComponent implements OnInit {
public devportalVersion: string;
+ public aboutLogo: string = environment.aboutLogoUrl;
+ public firstLink: string = environment.firstLink;
+ public firstLinkLabel: string = environment.firstLinkLabel;
+ public secondLink: string = environment.secondLink;
+ public secondLinkLabel: string = environment.secondLinkLabel;
constructor() { }

MODIFY
src/environments/environment.prod.ts
src/environments/environment.prod.ts
@@ -19,5 +19,10 @@ export const environment = {
apiMgmtRealm: '${KEYCLOAK_REALM}',
apiMgmtUiRestUrl: '${API_MGMT_UI_REST_URL}',
keycloakAuthUrl: '${KEYCLOAK_AUTH_URL}',
- logoUrl: '${LOGO_FILE_URL}'
+ logoUrl: '${LOGO_FILE_URL}',
+ aboutLogoUrl: '${ABOUT_LOGO_FILE_URL}',
+ firstLink: '${FIRST_LINK}',
+ firstLinkLabel: '${FIRST_LINK_LABEL}',
+ secondLink: '${SECOND_LINK}',
+ secondLinkLabel: '${SECOND_LINK_LABEL}'
};

MODIFY
src/environments/environment.ts
src/environments/environment.ts
@@ -23,7 +23,12 @@ export const environment = {
apiMgmtRealm: '[keycloakRealm]',
apiMgmtUiRestUrl: 'https://[apimanUiRestEndpoint]:[port]/apiman',
keycloakAuthUrl: 'https://[keycloakEndpoint]:[port]/auth',
- logoUrl: 'assets/ScheerPASLogo.svg'
+ logoUrl: 'assets/ScheerPASLogo.svg',
+ aboutLogoUrl: 'assets/about-logo.png',
+ firstLink: 'https://scheer-pas.com',
+ firstLinkLabel: 'Project Site',
+ secondLink: 'https://doc.scheer-pas.com/display/APIMGMNT',
+ secondLinkLabel: 'User Guide'
};
/*

GW-454: Allow to change about page