Remove inline Javascript

res/js/index.ts

@@ -1,6 +1,7 @@
 import swal from 'sweetalert2';
 import * as ArrayFrom from 'array-from';
 import {Category, Simulation} from '../../lib/types';
+import { template as reactiveTemplate } from '../templates/reactive-template';
 
 if (!(Array as any).from) (Array as any).from = ArrayFrom;
 
@@ -39,7 +40,7 @@ const currentCategory = (localStorage && localStorage[window.lsPrefix + 'current
 
 const ractive = new Ractive({
   el: '#ractive-target',
-  template: '#ractive-template',
+  template: reactiveTemplate,
   computed: {
     languages() {
       return Object.entries(this.get('languageMappings'));

res/template.html

@@ -38,50 +38,9 @@
 	<div id="container">
 		<div id='ractive-target'></div>
 	</div>
-
-	<script id='ractive-template' type='text/html'>
-		<div class="language-container">
-			{{#if languages.length > 1}}
-				<label>
-					<select value="{{selectedLanguage}}">
-						{{#each languages}}
-							<option value='{{this[0]}}'>{{this[1]}}</option>
-						{{/each}}
-					</select>
-				</label>
-			{{/if}}
-			<label>
-				<select value='{{selectedCategory}}'>
-					<option value='all'>All categories</option>
-					{{#each categories}}
-						<option value='{{makeCategoryId(.)}}'>{{makeCategoryName(.)}}</option>
-					{{/each}}
-				</select>
-			</label>
-		</div>
-		<div class="card-cont">
-		    {{#each simulations}}
-				<div class="sim-card" on-click='showConfirm'>
-					<img src="../I/{{id}}.png" alt="Screenshot of the {{display}}" />
-					<div class="overlay">
-						<i class="fa fa-info-circle" aria-hidden="true"></i>
-						<h2>{{title}}</h2>
-					</div>
-				</div>
-			{{/each}}
-		</div>
-	</script>
 </body>
 
-<script>
-	window.importedData = <!-- REPLACEMEINCODE -->;
-
-	window.lsPrefix = 'kiwix';
-
-	<!-- SETLSPREFIX -->
-
-</script>
-
+<script src='../-/catalog.js'></script>
 <script src='../-/dist.js'></script>
 
 </html>

res/templates/catalog.ts

@@ -0,0 +1,9 @@
+
+export const catalogJs = (catalog: {}, lsPrefix: string): string => {
+
+    return `window.importedData = ${JSON.stringify(catalog)};
+
+window.lsPrefix = 'kiwix';
+
+lsPrefix = '${lsPrefix}';`;
+};

res/templates/reactive-template.ts

@@ -0,0 +1,32 @@
+export const template: string = `
+<div class="language-container">
+	{{#if languages.length > 1}}
+		<label>
+			<select value="{{selectedLanguage}}">
+				{{#each languages}}
+					<option value='{{this[0]}}'>{{this[1]}}</option>
+				{{/each}}
+			</select>
+		</label>
+	{{/if}}
+	<label>
+		<select value='{{selectedCategory}}'>
+			<option value='all'>All categories</option>
+			{{#each categories}}
+				<option value='{{makeCategoryId(.)}}'>{{makeCategoryName(.)}}</option>
+			{{/each}}
+		</select>
+	</label>
+</div>
+<div class="card-cont">
+	{{#each simulations}}
+		<div class="sim-card" on-click='showConfirm'>
+			<img src="../I/{{id}}.png" alt="Screenshot of the {{display}}" />
+			<div class="overlay">
+				<i class="fa fa-info-circle" aria-hidden="true"></i>
+				<h2>{{title}}</h2>
+			</div>
+		</div>
+	{{/each}}
+</div>
+`;

steps/export.ts

@@ -19,6 +19,7 @@ import {Presets, SingleBar} from 'cli-progress';
 // @ts-ignore
 import * as langs from '../state/get/languages.json';
 import { exit } from 'yargs';
+import { catalogJs } from '../res/templates/catalog';
 
 dotenv.config();
 
@@ -131,14 +132,12 @@ const exportTarget = async (target: Target) => {
   }
 
   // Generate index file
-  const templateHTML = await fs.promises.readFile(resDir + 'template.html', 'utf8');
-  // Pretty hacky - doing a replace on the HTML. Investigate other ways
-  await fs.promises.writeFile(targetDir + 'index.html',
-    templateHTML
-      .replace('<!-- REPLACEMEINCODE -->', JSON.stringify(catalog))
-      .replace('<!-- SETLSPREFIX -->', `lsPrefix = "${target.output}";`), 'utf8');
-
-  await Promise.all(glob.sync(`${resDir}/**/*`, {ignore: ['*.ts', 'template.html'], nodir: true})
+  await fs.promises.copyFile(resDir + 'template.html', targetDir + 'index.html');
+
+  // Generate catalog JS
+  await fs.promises.writeFile(targetDir + 'catalog.js', catalogJs(catalog, target.output), 'utf8');
+
+  await Promise.all(glob.sync(`${resDir}/**/*`, {ignore: ['*/templates/*', '*.ts', 'template.html'], nodir: true})
     .map(async (file) => fs.promises.copyFile(file, `${targetDir}${path.basename(file)}`))
   );
 

test/e2e.test.ts

@@ -93,7 +93,7 @@ describe('Validate ZIM', () => {
     const article = await zim.getArticleByUrl(`A/index.html`);
     expect(article).toBeDefined();
     expect(article.mimeType).toEqual('text/html');
-    expect(article.data.length).toBeGreaterThan(100000);
+    expect(article.data.length).toBeGreaterThan(1900);
     done();
   });