Merge pull request #152 from openzim/issue-134-remove-inline-js

Remove inline Javascript
openzim · Dec 2, 2022 · ebd6116 · ebd6116
2 parents 9dfa50e + 57446b9
commit ebd6116
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 52 deletions.
diff --git a/res/js/index.ts b/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'));

diff --git a/res/template.html b/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>
diff --git a/res/templates/catalog.ts b/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}';`;
+};
diff --git a/res/templates/reactive-template.ts b/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>
+`;
diff --git a/steps/export.ts b/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)}`))
  );
 

diff --git a/test/e2e.test.ts b/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();
  });