Merge pull request #78 from Sanofi-IADC/bugfix/base-path

Fix basepath for static files

package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "npm run prebuild && nest build && npm run copy:static",
+    "build": "npm run prebuild && nest build",
     "format": "prettier --write \"src/**/*.ts\"",
     "format:check": "prettier --list-different \"src/**/*.ts\"",
     "start": "nest start",
@@ -33,8 +33,8 @@
     "@nestjs/platform-express": "7.6.15",
     "@nestjs/serve-static": "2.1.4",
     "@nestjs/terminus": "7.1.2",
-    "cheerio": "1.0.0-rc.3",
     "cache-manager": "3.4.3",
+    "cheerio": "1.0.0-rc.3",
     "class-transformer": "0.4.0",
     "class-validator": "0.13.1",
     "node-sass-middleware": "0.11.0",
@@ -57,7 +57,6 @@
     "@typescript-eslint/eslint-plugin": "4.21.0",
     "@typescript-eslint/parser": "4.21.0",
     "@vuepress/plugin-back-to-top": "1.8.2",
-    "cpx": "1.5.0",
     "eslint": "7.24.0",
     "eslint-config-prettier": "7.2.0",
     "eslint-plugin-prettier": "3.3.1",

src/main.ts

@@ -5,13 +5,15 @@ import path from 'path';
 import { AppModule } from './app.module';
 import sassMiddleware from 'node-sass-middleware';
 import { HttpExceptionFilter } from './common/filters/http-exception.filter';
+import { ConfigService } from '@nestjs/config';
+import Config from './config/config';
 
 async function bootstrap() {
   const logger = new Logger('bootstrap');
   // as we need to access the Express API
   const app = await NestFactory.create<NestExpressApplication>(AppModule);
   // logger: ['error', 'warn'];
-
+  const basePath = app.get(ConfigService).get<Config>('web.basePath');
   app.useGlobalPipes(
     // Reference: https://docs.nestjs.com/techniques/validation#auto-validation
     new ValidationPipe({
@@ -28,7 +30,7 @@ async function bootstrap() {
 
   app.useGlobalFilters(new HttpExceptionFilter());
 
-  app.setGlobalPrefix('cpv');
+  app.setGlobalPrefix(`${basePath}`);
   app.disable('x-powered-by');
   app.enableCors();
   app.use(
@@ -43,7 +45,7 @@ async function bootstrap() {
       prefix: '/css',
     }),
   );
-  app.useStaticAssets(path.resolve('./static'));
+  app.useStaticAssets(path.resolve('./static'), { prefix: `${basePath}` });
 
   await app.listen(process.env.PORT || 3000);
 }

src/proxy-page/proxy-page.service.ts

@@ -34,21 +34,12 @@ export class ProxyPageService {
     private context: ContextService,
   ) {}
 
-  /**
-   * @function renderPage Service
-   * @return Promise {string}
-   * @param spaceKey {string} 'iadc' - space key where the page belongs
-   * @param pageId {string} '639243960' - id of the page to retrieve
-   * @param theme {string} '#FFFFFF' - theme used by the page
-   * @param type {string} 'blog' - type of the page
-   */
-  async renderPage(
+  private initContext(
     spaceKey: string,
     pageId: string,
     theme: string,
-    type: string,
-  ): Promise<string> {
-    const results = await this.confluence.getPage(spaceKey, pageId);
+    results: any,
+  ) {
     this.context.Init(spaceKey, pageId, theme);
     this.context.setTitle(results.title);
     this.context.setHtmlBody(results.body.styled_view.value);
@@ -63,7 +54,25 @@ export class ProxyPageService {
     ) {
       this.context.setFullWidth(true);
     }
-    fixHtmlHead()(this.context);
+  }
+
+  /**
+   * @function renderPage Service
+   * @return Promise {string}
+   * @param spaceKey {string} 'iadc' - space key where the page belongs
+   * @param pageId {string} '639243960' - id of the page to retrieve
+   * @param theme {string} '#FFFFFF' - theme used by the page
+   * @param type {string} 'blog' - type of the page
+   */
+  async renderPage(
+    spaceKey: string,
+    pageId: string,
+    theme: string,
+    type: string,
+  ): Promise<string> {
+    const results = await this.confluence.getPage(spaceKey, pageId);
+    this.initContext(spaceKey, pageId, theme, results);
+    fixHtmlHead(this.config)(this.context);
     fixContentWidth()(this.context);
     fixLinks(this.config)(this.context);
     fixToc()(this.context);
@@ -104,22 +113,8 @@ export class ProxyPageService {
     theme: string,
   ): Promise<string> {
     const results = await this.confluence.getPage(spaceKey, pageId);
-    this.logger.log(`Starting the restyling of /${spaceKey}/${pageId}`);
-    this.context.Init(spaceKey, pageId, theme);
-    this.context.setTitle(results.title);
-    this.context.setHtmlBody(results.body.styled_view.value);
-    this.context.setAuthor(results.history.createdBy.displayName);
-    this.context.setEmail(results.history.createdBy.email);
-    this.context.setAvatar(results.history.createdBy.profilePicture.path);
-    this.context.setWhen(results.history.createdDate);
-    if (
-      results.metadata.properties['content-appearance-published'] &&
-      results.metadata.properties['content-appearance-published'].value ===
-        'full-width'
-    ) {
-      this.context.setFullWidth(true);
-    }
-    fixHtmlHead()(this.context);
+    this.initContext(spaceKey, pageId, theme, results);
+    fixHtmlHead(this.config)(this.context);
     fixLinks(this.config)(this.context);
     fixEmojis()(this.context);
     fixDrawio(this.config)(this.context);
@@ -129,7 +124,7 @@ export class ProxyPageService {
     fixTableColGroup()(this.context);
     fixEmptyLineIncludePage()(this.context);
     delUnnecessaryCode()(this.context);
-    addSlides()(this.context);
+    addSlides(this.config)(this.context);
     this.context.Close();
     return this.context.getHtmlBody();
   }

src/proxy-page/steps/addCustomCss.ts

@@ -8,9 +8,10 @@ export default (config: ConfigService): Step => {
     context.setPerfMark('addCustomCss');
     const $ = context.getCheerioBody();
     const version = config.get<Config>('version');
+    const basePath = config.get<Config>('web.basePath');
 
     $('head').append(
-      `<link rel="stylesheet" type="text/css" href="/css/custom.css?cache=${version}" />`,
+      `<link rel="stylesheet" type="text/css" href="${basePath}/css/custom.css?cache=${version}" />`,
     );
 
     // ! Do not insert internal CSS styles because the function removeUnnecessaryCode will remove them later

src/proxy-page/steps/addHighlightjs.ts

@@ -8,6 +8,7 @@ export default (config: ConfigService): Step => {
     context.setPerfMark('addHighlightjs');
     const $ = context.getCheerioBody();
     const version = config.get<Config>('version');
+    const basePath = config.get<Config>('web.basePath');
 
     $('pre.syntaxhighlighter-pre').each(
       (_index: number, macro: CheerioElement) => {
@@ -17,13 +18,13 @@ export default (config: ConfigService): Step => {
 
     // `<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css" />`
     $('head').append(
-      `<link rel="stylesheet" type="text/css" href="/highlight/zenburn.min.css?nocache=${version}" />`,
+      `<link rel="stylesheet" type="text/css" href="${basePath}/highlight/zenburn.min.css?nocache=${version}" />`,
     );
 
     // `<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>`
     // When the DOM content is loaded call the initialization of the Hightlight library
     $('body').append(
-      `<script defer src="/highlight/highlight.min.js?nocache=${version}"></script>
+      `<script defer src="${basePath}/highlight/highlight.min.js?nocache=${version}"></script>
        <script type="module">
          document.addEventListener('DOMContentLoaded', function () {hljs.initHighlightingOnLoad();})
        </script>`,

src/proxy-page/steps/addSlides.ts

@@ -1,10 +1,13 @@
+import { ConfigService } from '@nestjs/config';
+import Config from 'src/config/config';
 import { ContextService } from '../../context/context.service';
 import { Step } from '../proxy-page.step';
 
-export default (): Step => {
+export default (config: ConfigService): Step => {
   return (context: ContextService): void => {
     context.setPerfMark('addSlides');
     const $ = context.getCheerioBody();
+    const basePath = config.get<Config>('web.basePath');
 
     // Handle the source code block to be syntax highlighted by highlight.js (auto language detection by default)
     $('pre.syntaxhighlighter-pre').each(
@@ -53,20 +56,20 @@ export default (): Step => {
 
     // Let's add the JS library for reveal.js and required CSS styles
     $('head').append(
-      `<link rel="stylesheet" href="/reveal/reset.css">
-      <link rel="stylesheet" href="/reveal/reveal.css">
-      <link rel="stylesheet" href="/reveal/theme/${theme}.css" id="theme">
-      <link rel="stylesheet" href="/highlight/zenburn.min.css">
-      <script src="/reveal/reveal.js"></script>`,
+      `<link rel="stylesheet" href="${basePath}/reveal/reset.css">
+      <link rel="stylesheet" href="${basePath}/reveal/reveal.css">
+      <link rel="stylesheet" href="${basePath}/reveal/theme/${theme}.css" id="theme">
+      <link rel="stylesheet" href="${basePath}/highlight/zenburn.min.css">
+      <script src="${basePath}/reveal/reveal.js"></script>`,
     );
 
     const newHtmlBody = `<div id="Content" class="reveal"><div class="slides">${sections}</div></div>`;
     $('#Content').replaceWith(newHtmlBody);
 
     // When the DOM content is loaded call the initialization of Reveal (https://revealjs.com/)
     $('#Content').append(
-      `<script src="/reveal/plugin/zoom/zoom.js"></script>
-      <script src="/reveal/plugin/highlight/highlight.js"></script>
+      `<script src="${basePath}/reveal/plugin/zoom/zoom.js"></script>
+      <script src="${basePath}/reveal/plugin/highlight/highlight.js"></script>
       <script>
         document.addEventListener('DOMContentLoaded', function () {
           Reveal.initialize({ 

src/proxy-page/steps/addZooming.ts

@@ -8,12 +8,13 @@ export default (config: ConfigService): Step => {
     context.setPerfMark('addZooming');
     const $ = context.getCheerioBody();
     const version = config.get<Config>('version');
+    const basePath = config.get<Config>('web.basePath');
 
     // Library to include the zooming effect to Drawio images
     // https://unpkg.com/[email protected]/build/zooming.min.js
     // When the DOM content is loaded call the initialization of the Zooming library
     $('body').append(
-      `<script defer src="/zooming/zooming-2.1.1.min.js?cache=${version}"></script>
+      `<script defer src="${basePath}/zooming/zooming-2.1.1.min.js?cache=${version}"></script>
       <script type="module">
         document.addEventListener('DOMContentLoaded', function () {
           new Zooming({}).listen('.img-zoomable');

src/proxy-page/steps/fixHtmlHead.ts

@@ -1,16 +1,19 @@
+import { ConfigService } from '@nestjs/config';
+import Config from 'src/config/config';
 import { ContextService } from '../../context/context.service';
 import { Step } from '../proxy-page.step';
 
-export default (): Step => {
+export default (config: ConfigService): Step => {
   return (context: ContextService): void => {
     context.setPerfMark('fixHtmlHead');
     const $ = context.getCheerioBody();
+    const basePath = config.get<Config>('web.basePath');
 
     $('head').prepend(
-      `<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
-      <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
-      <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-      <link rel="shortcut icon" href="/favicon/favicon.ico">`,
+      `<link rel="apple-touch-icon" sizes="180x180" href="${basePath}/favicon/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="${basePath}/favicon/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="${basePath}/favicon/favicon-16x16.png">
+      <link rel="shortcut icon" href="${basePath}/favicon/favicon.ico">`,
     );
 
     $('head').prepend(

tests/unit/steps/addCustomCss.spec.ts

@@ -19,12 +19,13 @@ describe('ConfluenceProxy / addCustomCss', () => {
   it('should add custom CSS', () => {
     const step = addCustomCss(config);
     const version = config.get<Config>('version');
+    const basePath = config.get<Config>('web.basePath');
     context.setHtmlBody(
       '<html><head><title>test</title><style default-inline-css>/* confluence CSS */</style></head><body></body></html>',
     );
     step(context);
     expect(context.getHtmlBody()).toEqual(
-      `<html><head><title>test</title><style default-inline-css>/* confluence CSS */</style><link rel="stylesheet" type="text/css" href="/css/custom.css?cache=${version}"></head><body></body></html>`,
+      `<html><head><title>test</title><style default-inline-css>/* confluence CSS */</style><link rel="stylesheet" type="text/css" href="${basePath}/css/custom.css?cache=${version}"></head><body></body></html>`,
     );
   });
 });