Re-upgrade parcel-bundler, use no-hmr as workaround

ads.json

@@ -0,0 +1,29 @@
+[
+  {
+    "header": "Do You Like Lexiconga?",
+    "body": "If you enjoy Lexiconga, you can help contribute to keeping it online and adding new features. Your donations are much appreciated!",
+    "cta": "Buy Me a Coffee!",
+    "link": "https://buymeacoffee.com/robbieantenesse",
+    "start": "June 1, 2019",
+    "end": "August 1, 2099",
+    "isPriority": false
+  },
+  {
+    "header": "Support Lexiconga",
+    "body": "If you enjoy Lexiconga, you can help contribute to keeping it online and adding new features. Your donations are much appreciated!",
+    "cta": "Buy Me a Coffee!",
+    "link": "https://buymeacoffee.com/robbieantenesse",
+    "start": "June 1, 2019",
+    "end": "August 1, 2099",
+    "isPriority": false
+  },
+  {
+    "header": "A New Way to Role-Play",
+    "body": "The GUTS+ System is a tabletop role-playing game system that aims to be approachable enough for newcomers and flexible enough for any setting.",
+    "cta": "Learn to Play for Free!",
+    "link": "https://guts.plus",
+    "start": "June 1, 2019",
+    "end": "January 1, 2020",
+    "isPriority": false
+  }
+]

package.json

@@ -8,7 +8,7 @@
   "license": "UNLICENCED",
   "scripts": {
     "start": "concurrently \"npm run watch-js\" \"npm run watch-php\"",
-    "watch-js": "parcel watch index.html view.html --public-url ./",
+    "watch-js": "parcel watch index.html view.html --no-hmr --public-url ./",
     "watch-php": "cpx \"src/php/**/{*,.*}\" dist -v -w",
     "bundle": "parcel build index.html && cpx \"src/php/**/{*,.*}\" dist",
     "serve-frontend-only": "parcel index.html",
@@ -20,8 +20,7 @@
     "autoprefixer": "^9.5.1",
     "concurrently": "^4.1.0",
     "cpx": "^1.5.0",
-    "node-sass": "^4.12.0",
-    "parcel-bundler": "1.9.7",
+    "parcel-bundler": "^1.12.3",
     "rimraf": "^2.6.3",
     "sass": "^1.19.0"
   },

src/constants.js

@@ -60,6 +60,8 @@ export const DEFAULT_SETTINGS = {
   defaultTheme: 'default',
 };
 
+export const DISPLAY_AD_EVERY = 10;
+
 export const DEFAULT_PAGE_SIZE = 50;
 
 export const LOCAL_STORAGE_KEY = 'dictionary';

src/index.js

@@ -3,6 +3,7 @@ import { renderAll } from './js/render';
 import { hasToken } from './js/utilities';
 import { loadDictionary } from './js/dictionaryManagement';
 import { loadSettings } from './js/settings';
+import { setupAds } from './js/ads';
 
 function initialize() {
   loadDictionary();
@@ -14,8 +15,8 @@ function initialize() {
       account.loginWithToken();
     });
   }
-  
-  renderAll();
+
+  setupAds().then(() => renderAll());
 }
 
 window.onload = (function (oldLoad) {

src/js/ads.js

@@ -0,0 +1,37 @@
+import { DISPLAY_AD_EVERY } from '../constants.js';
+
+export function setupAds() {
+  return import('../../ads.json').then(ads => {
+    const shuffle = (a, b) => Math.random() > 0.5 ? 1 : -1;
+    const priority = ads.filter(ad => isActive(ad) && ad.isPriority).sort(shuffle);
+    const regular = ads.filter(ad => isActive(ad) && !ad.isPriority).sort(shuffle);
+    window.ads = [...priority, ...regular];
+  });
+}
+
+function isActive(ad) {
+  const date = new Date();
+  return date >= new Date(ad.start) && date < new Date(ad.end);
+}
+
+export function renderAd(wordPosition) {
+  if (window.hasOwnProperty('ads') && window.ads) {
+    if (wordPosition % DISPLAY_AD_EVERY === 3) {
+      const adIndex = Math.floor(wordPosition / DISPLAY_AD_EVERY) % window.ads.length;
+      const ad = window.ads[adIndex];
+      return `<article class="entry">
+        <header>
+          <h4 class="word">${ad.header}</h4>
+        </header>
+        <dl>
+          <dt class="definition">${ad.body}</dt>
+          <dd class="details">
+            <a href="${ad.link}" target="_blank" class="button">${ad.cta}</a>
+          </dd>
+        </dl>
+      </article>`;
+    }
+  }
+
+  return '';
+}

src/js/render.js

@@ -16,6 +16,7 @@ import {
 } from './setupListeners';
 import { getPaginationData } from './pagination';
 import { getOpenEditForms, parseReferences } from './wordManagement';
+import { renderAd } from './ads';
 
 export function renderAll() {
   renderTheme();
@@ -181,23 +182,21 @@ export function renderWords() {
     // const { pageStart, pageEnd } = getPaginationData(words);
 
     // words.slice(pageStart, pageEnd).forEach(originalWord => {
-    words.forEach(originalWord => {
-      let detailsMarkdown = removeTags(originalWord.details);
-      const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
-      if (references && Array.isArray(references)) {
-        detailsMarkdown = parseReferences(detailsMarkdown, references);
-      }
+    words.forEach((originalWord, displayIndex) => {
       const word = highlightSearchTerm({
         name: removeTags(originalWord.name),
         pronunciation: removeTags(originalWord.pronunciation),
         partOfSpeech: removeTags(originalWord.partOfSpeech),
         definition: removeTags(originalWord.definition),
-        details: detailsMarkdown,
+        details: parseReferences(removeTags(originalWord.details)),
         wordId: originalWord.wordId,
       });
       const homonymnNumber = getHomonymnNumber(originalWord);
       const shareLink = window.currentDictionary.hasOwnProperty('externalID')
         ? window.location.pathname + window.currentDictionary.externalID + '/' + word.wordId : '';
+
+      wordsHTML += renderAd(displayIndex);
+
       wordsHTML += `<article class="entry" id="${word.wordId}">
         <header>
           <h4 class="word">${word.name}${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4>

src/js/view/index.js

@@ -1,5 +1,6 @@
 import { renderAll } from './render';
 import setupListeners from './setupListeners';
+import { setupAds } from '../ads';
 
 // import setupListeners, { setupSearchFilters } from './js/setupListeners';
 // import { renderAll } from './js/render';
@@ -8,7 +9,7 @@ import setupListeners from './setupListeners';
 // import { loadSettings } from './js/settings';
 
 function initialize() {
-  renderAll();
+  setupAds().then(() => renderAll());
   setupListeners();
 }
 

src/js/view/render.js

@@ -6,6 +6,7 @@ import { showSection } from '../displayToggles';
 import { setupSearchFilters, setupInfoModal } from './setupListeners';
 import { parseReferences } from '../wordManagement';
 import { renderTheme } from '../render';
+import { renderAd } from '../ads';
 
 export function renderAll() {
   renderTheme();
@@ -139,18 +140,19 @@ export function renderWords() {
       </article>`;
     }
 
-    words.forEach(originalWord => {
-      let detailsMarkdown = originalWord.details;
-      detailsMarkdown = parseReferences(detailsMarkdown);
+    words.forEach((originalWord, displayIndex) => {
       const word = highlightSearchTerm({
         name: removeTags(originalWord.name),
         pronunciation: removeTags(originalWord.pronunciation),
         partOfSpeech: removeTags(originalWord.partOfSpeech),
         definition: removeTags(originalWord.definition),
-        details: detailsMarkdown,
+        details: parseReferences(removeTags(originalWord.details)),
         wordId: originalWord.wordId,
       });
       const shareLink = window.location.pathname + (window.location.pathname.match(new RegExp(word.wordId + '$')) ? '' : '/' + word.wordId);
+
+      wordsHTML += renderAd(displayIndex);
+
       wordsHTML += `<article class="entry" id="${word.wordId}">
         <header>
           <h4 class="word">${word.name}</h4>