@internetarchive/collection-browser 0.3.6 → 0.3.7-alpha.1

package/dist/test/tiles/list/tile-list-compact.test.js

@@ -1,130 +1,130 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import '../../../src/tiles/list/tile-list-compact';
-describe('List Tile Compact', () => {
-    it('should render initial component', async () => {
-        var _a, _b, _c, _d, _e;
-        const el = await fixture(html `<tile-list-compact></tile-list-compact>`);
-        const listContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#list-line');
-        const itemTitle = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#title');
-        const imageBlock = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('image-block');
-        const itemIcon = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#icon');
-        const itemViews = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#views');
-        expect(listContainer).to.exist;
-        expect(itemTitle).to.exist;
-        expect(imageBlock).to.exist;
-        expect(itemIcon).to.exist;
-        expect(itemViews).to.exist;
-    });
-    it('should render with creator element with title', async () => {
-        var _a;
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../../../src/tiles/list/tile-list-compact';
+describe('List Tile Compact', () => {
+    it('should render initial component', async () => {
+        var _a, _b, _c, _d, _e;
+        const el = await fixture(html `<tile-list-compact></tile-list-compact>`);
+        const listContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#list-line');
+        const itemTitle = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#title');
+        const imageBlock = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('image-block');
+        const itemIcon = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#icon');
+        const itemViews = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#views');
+        expect(listContainer).to.exist;
+        expect(itemTitle).to.exist;
+        expect(imageBlock).to.exist;
+        expect(itemIcon).to.exist;
+        expect(itemViews).to.exist;
+    });
+    it('should render with creator element with title', async () => {
+        var _a;
         const el = await fixture(html `
       <tile-list-compact
         .model=${{ creators: ['someone'] }}
       ></tile-list-compact>
-    `);
-        const creator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#creator');
-        expect(creator).to.exist;
-    });
-    it('should render weekly views when sorting by week', async () => {
-        var _a, _b;
+    `);
+        const creator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#creator');
+        expect(creator).to.exist;
+    });
+    it('should render weekly views when sorting by week', async () => {
+        var _a, _b;
         const el = await fixture(html `
       <tile-list-compact
         .model=${{ viewCount: 50, weeklyViewCount: 10 }}
         .sortParam=${{ field: 'week', direction: 'desc' }}
       >
       </tile-list-compact>
-    `);
-        const viewsColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('views');
-        expect(viewsColumn).to.exist;
-        expect((_b = viewsColumn === null || viewsColumn === void 0 ? void 0 : viewsColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('10');
-    });
-    it('should render 0 for views if missing model', async () => {
-        var _a, _b;
+    `);
+        const viewsColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('views');
+        expect(viewsColumn).to.exist;
+        expect((_b = viewsColumn === null || viewsColumn === void 0 ? void 0 : viewsColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('10');
+    });
+    it('should render 0 for views if missing model', async () => {
+        var _a, _b;
         const el = await fixture(html `
       <tile-list-compact .sortParam=${{ field: 'week', direction: 'desc' }}>
       </tile-list-compact>
-    `);
-        const viewsColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('views');
-        expect(viewsColumn).to.exist;
-        expect((_b = viewsColumn === null || viewsColumn === void 0 ? void 0 : viewsColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('0');
-    });
-    it('should render published date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date('2010-01-01'),
-            dateArchived: new Date('2011-01-01'),
-            datePublished: new Date('2012-01-01'),
-            dateReviewed: new Date('2013-01-01'),
-        };
+    `);
+        const viewsColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('views');
+        expect(viewsColumn).to.exist;
+        expect((_b = viewsColumn === null || viewsColumn === void 0 ? void 0 : viewsColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('0');
+    });
+    it('should render published date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date('2010-01-01'),
+            dateArchived: new Date('2011-01-01'),
+            datePublished: new Date('2012-01-01'),
+            dateReviewed: new Date('2013-01-01'),
+        };
         const el = await fixture(html `
       <tile-list-compact
         .model=${model}
         .sortParam=${{ field: 'date', direction: 'desc' }}
       >
       </tile-list-compact>
-    `);
-        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
-        expect(dateColumn).to.exist;
-        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2012');
-    });
-    it('should render added date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date('2010-01-01'),
-            dateArchived: new Date('2011-01-01'),
-            datePublished: new Date('2012-01-01'),
-            dateReviewed: new Date('2013-01-01'),
-        };
+    `);
+        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
+        expect(dateColumn).to.exist;
+        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2012');
+    });
+    it('should render added date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date('2010-01-01'),
+            dateArchived: new Date('2011-01-01'),
+            datePublished: new Date('2012-01-01'),
+            dateReviewed: new Date('2013-01-01'),
+        };
         const el = await fixture(html `
       <tile-list-compact
         .model=${model}
         .sortParam=${{ field: 'addeddate', direction: 'desc' }}
       >
       </tile-list-compact>
-    `);
-        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
-        expect(dateColumn).to.exist;
-        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2010');
-    });
-    it('should render archived date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date('2010-01-01'),
-            dateArchived: new Date('2011-01-01'),
-            datePublished: new Date('2012-01-01'),
-            dateReviewed: new Date('2013-01-01'),
-        };
+    `);
+        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
+        expect(dateColumn).to.exist;
+        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2010');
+    });
+    it('should render archived date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date('2010-01-01'),
+            dateArchived: new Date('2011-01-01'),
+            datePublished: new Date('2012-01-01'),
+            dateReviewed: new Date('2013-01-01'),
+        };
         const el = await fixture(html `
       <tile-list-compact
         .model=${model}
         .sortParam=${{ field: 'publicdate', direction: 'desc' }}
       >
       </tile-list-compact>
-    `);
-        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
-        expect(dateColumn).to.exist;
-        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2011');
-    });
-    it('should render reviewed date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date('2010-01-01'),
-            dateArchived: new Date('2011-01-01'),
-            datePublished: new Date('2012-01-01'),
-            dateReviewed: new Date('2013-01-01'),
-        };
+    `);
+        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
+        expect(dateColumn).to.exist;
+        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2011');
+    });
+    it('should render reviewed date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date('2010-01-01'),
+            dateArchived: new Date('2011-01-01'),
+            datePublished: new Date('2012-01-01'),
+            dateReviewed: new Date('2013-01-01'),
+        };
         const el = await fixture(html `
       <tile-list-compact
         .model=${model}
         .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
       >
       </tile-list-compact>
-    `);
-        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
-        expect(dateColumn).to.exist;
-        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2013');
-    });
-});
+    `);
+        const dateColumn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('date');
+        expect(dateColumn).to.exist;
+        expect((_b = dateColumn === null || dateColumn === void 0 ? void 0 : dateColumn.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Jan 01, 2013');
+    });
+});
 //# sourceMappingURL=tile-list-compact.test.js.map

package/dist/test/tiles/list/tile-list.test.d.ts

@@ -1 +1 @@
-import '../../../src/tiles/list/tile-list';
+import '../../../src/tiles/list/tile-list';

package/dist/test/tiles/list/tile-list.test.js

@@ -1,91 +1,91 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import '../../../src/tiles/list/tile-list';
-import { MockCollectionNameCache } from '../../mocks/mock-collection-name-cache';
-describe('List Tile', () => {
-    it('should render initial component', async () => {
-        var _a, _b, _c;
-        const el = await fixture(html `<tile-list></tile-list>`);
-        const listContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#list-line');
-        const itemTitle = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#title');
-        const imageBlock = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('image-block');
-        expect(listContainer).to.exist;
-        expect(itemTitle).to.exist;
-        expect(imageBlock).to.exist;
-    });
-    it('should render with creator element but not dates', async () => {
-        var _a, _b;
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../../../src/tiles/list/tile-list';
+import { MockCollectionNameCache } from '../../mocks/mock-collection-name-cache';
+describe('List Tile', () => {
+    it('should render initial component', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<tile-list></tile-list>`);
+        const listContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#list-line');
+        const itemTitle = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#title');
+        const imageBlock = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('image-block');
+        expect(listContainer).to.exist;
+        expect(itemTitle).to.exist;
+        expect(imageBlock).to.exist;
+    });
+    it('should render with creator element but not dates', async () => {
+        var _a, _b;
         const el = await fixture(html `
       <tile-list .model=${{ creators: ['someone'] }}></tile-list>
-    `);
-        const creator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#creator');
-        const datesLine = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#dates-line');
-        expect(creator).to.exist;
-        expect(datesLine === null || datesLine === void 0 ? void 0 : datesLine.children.length).to.equal(0);
-    });
-    it('should render with snippet block when it has snippets', async () => {
-        var _a;
+    `);
+        const creator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#creator');
+        const datesLine = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#dates-line');
+        expect(creator).to.exist;
+        expect(datesLine === null || datesLine === void 0 ? void 0 : datesLine.children.length).to.equal(0);
+    });
+    it('should render with snippet block when it has snippets', async () => {
+        var _a;
         const el = await fixture(html `
       <tile-list .model=${{ snippets: ['some {{{snippet}}} text'] }}>
       </tile-list>
-    `);
-        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
-        expect(snippetBlock).to.exist;
-    });
-    it('should not render snippet block when no snippets are present', async () => {
-        var _a;
-        const el = await fixture(html `<tile-list></tile-list>`);
-        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
-        expect(snippetBlock).to.not.exist;
-    });
-    it('should not render suppressed collections', async () => {
-        var _a;
-        const collectionNameCache = new MockCollectionNameCache();
+    `);
+        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
+        expect(snippetBlock).to.exist;
+    });
+    it('should not render snippet block when no snippets are present', async () => {
+        var _a;
+        const el = await fixture(html `<tile-list></tile-list>`);
+        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
+        expect(snippetBlock).to.not.exist;
+    });
+    it('should not render suppressed collections', async () => {
+        var _a;
+        const collectionNameCache = new MockCollectionNameCache();
         const el = await fixture(html `
       <tile-list
         .model=${{ collections: ['deemphasize', 'community', 'foo'] }}
         .collectionNameCache=${collectionNameCache}
       >
       </tile-list>
-    `);
-        const collectionsRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('collections');
-        expect(collectionsRow).to.exist;
-        const collectionLinks = collectionsRow === null || collectionsRow === void 0 ? void 0 : collectionsRow.querySelectorAll('a[href]');
-        expect(collectionLinks === null || collectionLinks === void 0 ? void 0 : collectionLinks.length).to.equal(1);
-        expect(collectionLinks === null || collectionLinks === void 0 ? void 0 : collectionLinks.item(0).getAttribute('href')).to.equal('/details/foo');
-    });
-    it('should render weekly views when sorting by week', async () => {
-        var _a, _b;
+    `);
+        const collectionsRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('collections');
+        expect(collectionsRow).to.exist;
+        const collectionLinks = collectionsRow === null || collectionsRow === void 0 ? void 0 : collectionsRow.querySelectorAll('a[href]');
+        expect(collectionLinks === null || collectionLinks === void 0 ? void 0 : collectionLinks.length).to.equal(1);
+        expect(collectionLinks === null || collectionLinks === void 0 ? void 0 : collectionLinks.item(0).getAttribute('href')).to.equal('/details/foo');
+    });
+    it('should render weekly views when sorting by week', async () => {
+        var _a, _b;
         const el = await fixture(html `
       <tile-list
         .model=${{ viewCount: 50, weeklyViewCount: 10 }}
         .sortParam=${{ field: 'week', direction: 'desc' }}
       >
       </tile-list>
-    `);
-        const viewsRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('views-line');
-        expect(viewsRow).to.exist;
-        expect((_b = viewsRow === null || viewsRow === void 0 ? void 0 : viewsRow.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Views:  10');
-    });
-    it('should render added date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date('2010-01-01'),
-            dateArchived: new Date('2011-01-01'),
-            datePublished: new Date('2012-01-01'),
-            dateReviewed: new Date('2013-01-01'),
-        };
+    `);
+        const viewsRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('views-line');
+        expect(viewsRow).to.exist;
+        expect((_b = viewsRow === null || viewsRow === void 0 ? void 0 : viewsRow.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Views:  10');
+    });
+    it('should render added date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date('2010-01-01'),
+            dateArchived: new Date('2011-01-01'),
+            datePublished: new Date('2012-01-01'),
+            dateReviewed: new Date('2013-01-01'),
+        };
         const el = await fixture(html `
       <tile-list
         .model=${model}
         .sortParam=${{ field: 'addeddate', direction: 'desc' }}
       >
       </tile-list>
-    `);
-        const dateRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('dates-line');
-        expect(dateRow).to.exist;
-        expect((_b = dateRow === null || dateRow === void 0 ? void 0 : dateRow.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('Added:  Jan 01, 2010');
-    });
-});
+    `);
+        const dateRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('dates-line');
+        expect(dateRow).to.exist;
+        expect((_b = dateRow === null || dateRow === void 0 ? void 0 : dateRow.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('Added:  Jan 01, 2010');
+    });
+});
 //# sourceMappingURL=tile-list.test.js.map

package/dist/test/utils/format-count.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/test/utils/format-count.test.js

@@ -1,24 +1,24 @@
-import { expect } from '@open-wc/testing';
-import { formatCount } from '../../src/utils/format-count';
-const testCount = 805342;
-describe('formatCount', () => {
-    it('returns blank when undefined number', () => {
-        expect(formatCount(undefined)).to.equal('');
-    });
-    it('returns blank when negative number', () => {
-        expect(formatCount(testCount * -1)).to.equal('');
-    });
-    it('returns long number when no NumberFormat', () => {
-        expect(formatCount(testCount)).to.equal('805,342');
-    });
-    it('returns short number when short NumberFormat', () => {
-        expect(formatCount(testCount, 'short')).to.equal('805K');
-    });
-    it('returns decimal when value of significant digits < 10', () => {
-        expect(formatCount(testCount * 10, 'short', 'long')).to.equal('8.1 million');
-    });
-    it('returns locale formatted number', () => {
-        expect(formatCount(testCount, 'long', 'long', 'de-DE')).to.equal('805.342');
-    });
-});
+import { expect } from '@open-wc/testing';
+import { formatCount } from '../../src/utils/format-count';
+const testCount = 805342;
+describe('formatCount', () => {
+    it('returns blank when undefined number', () => {
+        expect(formatCount(undefined)).to.equal('');
+    });
+    it('returns blank when negative number', () => {
+        expect(formatCount(testCount * -1)).to.equal('');
+    });
+    it('returns long number when no NumberFormat', () => {
+        expect(formatCount(testCount)).to.equal('805,342');
+    });
+    it('returns short number when short NumberFormat', () => {
+        expect(formatCount(testCount, 'short')).to.equal('805K');
+    });
+    it('returns decimal when value of significant digits < 10', () => {
+        expect(formatCount(testCount * 10, 'short', 'long')).to.equal('8.1 million');
+    });
+    it('returns locale formatted number', () => {
+        expect(formatCount(testCount, 'long', 'long', 'de-DE')).to.equal('805.342');
+    });
+});
 //# sourceMappingURL=format-count.test.js.map

package/dist/test/utils/format-date.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/test/utils/format-date.test.js

@@ -1,18 +1,18 @@
-import { expect } from '@open-wc/testing';
-import { formatDate } from '../../src/utils/format-date';
-const testDate = new Date(Date.UTC(2020, 11, 9));
-describe('formatDate', () => {
-    it('returns blank when undefined date', () => {
-        expect(formatDate(undefined)).to.equal('');
-    });
-    it('returns short date when no DateFormat', () => {
-        expect(formatDate(testDate)).to.equal('Dec 2020');
-    });
-    it('returns long date when long DateFormat', () => {
-        expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');
-    });
-    it('returns locale formatted date', () => {
-        expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');
-    });
-});
+import { expect } from '@open-wc/testing';
+import { formatDate } from '../../src/utils/format-date';
+const testDate = new Date(Date.UTC(2020, 11, 9));
+describe('formatDate', () => {
+    it('returns blank when undefined date', () => {
+        expect(formatDate(undefined)).to.equal('');
+    });
+    it('returns short date when no DateFormat', () => {
+        expect(formatDate(testDate)).to.equal('Dec 2020');
+    });
+    it('returns long date when long DateFormat', () => {
+        expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');
+    });
+    it('returns locale formatted date', () => {
+        expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');
+    });
+});
 //# sourceMappingURL=format-date.test.js.map

package/index.html

@@ -1,24 +1,24 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    html {
-      font-size: 10px; /* This is to match petabox's base font size */
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-
-    body {
-      background: #fff;
-      color: #2C2C2C;
-    }
-  </style>
-<script
-  src="https://polyfill.archive.org/v3/polyfill.min.js?features=scrollIntoView%2CElement.prototype.scrollIntoView"></script>
-
-</head>
-<body>
-  <app-root></app-root>
-  <script type="module" src="./dist/src/app-root.js"></script>
-</body>
-</html>
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    html {
+      font-size: 10px; /* This is to match petabox's base font size */
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+
+    body {
+      background: #fff;
+      color: #2C2C2C;
+    }
+  </style>
+<script
+  src="https://polyfill.archive.org/v3/polyfill.min.js?features=scrollIntoView%2CElement.prototype.scrollIntoView"></script>
+
+</head>
+<body>
+  <app-root></app-root>
+  <script type="module" src="./dist/src/app-root.js"></script>
+</body>
+</html>