Detect crawlers & cleanup

code/index.html

@@ -16,6 +16,7 @@
     <link rel="mask-icon" href="/assets/icons/favicon.svg" color="#FFFFFF">
     <link rel="preload" href="/assets/fonts/RussoOne-Regular.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/assets/fonts/lichess.chess.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/assets/icons/pwa-192x192.png" as="image" type="image/png">
     <link rel="prefetch" href="/assets/stockfish/linrock-nnue-7.wasm" type="application/wasm" importance="low" />
     <meta name="theme-color" content="#000000">
     <meta name="color-scheme" content="light dark" />
@@ -34,8 +35,7 @@
             "operatingSystem": "All"
           }
      </script>
-    <script
-        type="importmap">{"imports": {"lila-stockfish-web/linrock-nnue-7.js": "./assets/stockfish/linrock-nnue-7.js"}}</script>
+    <script type="importmap">{"imports": {"lila-stockfish-web/linrock-nnue-7.js": "./assets/stockfish/linrock-nnue-7.js"}}</script>
     <base href="/" />
 </head>
 

code/src/commons/utils.ts

@@ -147,3 +147,6 @@ export const pieceCount = (fen: string): { [key: string]: number } => {
     return pieceCount;
 }
 
+export const isBot = (): boolean => {
+    return navigator.userAgent.toLowerCase().includes('bot');
+};

code/src/controllers/position.ts

@@ -1,7 +1,7 @@
 import Alpine from 'alpinejs';
 import { BaseController } from './controller';
 import { configurationService, endgameDatabaseService, redrawIconImages, releaseWakeLock, requestWakeLock, routeService, soundService, stockfishService, syzygyService } from '../services';
-import { MAIN_MENU_ID, ariaDescriptionFromIcon, pieceCount, pieceTotalCount, setupSEO } from '../commons';
+import { MAIN_MENU_ID, ariaDescriptionFromIcon, isBot, pieceCount, pieceTotalCount, setupSEO } from '../commons';
 import { Category, MoveItem, Position, Subcategory } from '../model';
 import { Chess, ChessInstance, PieceType, SQUARES, Square } from 'chess.js';
 import { Chessground } from 'chessground';
@@ -367,7 +367,7 @@ class PositionController extends BaseController {
       this.showNavPrev.value = this.idxSubcategory.value > 0 || this.idxCategory.value > 0 || this.idxGame.value > 0;
       this.showNavNext.value = !(this.idxCategory.value === endgameDatabaseService.endgameDatabase.count - 1 && this.idxSubcategory.value === this.idxLastSubcategory.value && this.idxGame.value === this.idxLastGame.value);
     }
-    this.initStockfishGame();
+    if (!isBot()) this.initStockfishGame();
     this.chess.load(this.fen);
     this.moveList.splice(0, this.moveList.length);
     this.moveList.push([]);

code/src/services/alpine-service.ts

@@ -1,65 +1,14 @@
 import AlpineI18n from 'alpinejs-i18n';
-import Alpine, { DirectiveData, DirectiveUtilities, ElementWithXAttributes } from 'alpinejs';
+import Alpine from 'alpinejs';
 import { i18nJson } from '../static';
 
-// https://github.dev/bennadel/JavaScript-Demos/tree/master/demos/json-explorer-alpine3
-function TemplateOutletDirective(element: ElementWithXAttributes, metadata: DirectiveData, framework: DirectiveUtilities): void {
-
-    // Get the template reference that we want to clone and render.
-    var templateRef = framework.evaluate(metadata.expression);
-
-    // Clone the template and get the root node - this is the node that we will
-    // inject into the DOM.
-    // @ts-ignore
-    var clone = templateRef.content
-        .cloneNode(true)
-        .firstElementChild
-        ;
-
-    // For the clone, all I need to do at the moment is copy the datastack from the
-    // template over to the clone. This way, even if the template doesn't have an "x-data"
-    // attribute, I'll still have the right stack.
-    clone._x_dataStack = Alpine.closestDataStack(element);
-
-    // Instead of leaving the template in the DOM, we're going to swap the
-    // template with a comment hook. This isn't necessary; but, I think it leaves
-    // the DOM more pleasant looking.
-    var domHook = document.createComment(` Template outlet hook (${metadata.expression}) with bindings (${element.getAttribute("x-data")}). `);
-    // @ts-ignore
-    domHook._template_outlet_ref = templateRef;
-    // @ts-ignore
-    domHook._template_outlet_clone = clone;
-
-    // Swap the template-outlet element with the hook and clone.
-    // --
-    // NOTE: Doing this inside the mutateDom() method will pause Alpine's internal
-    // MutationObserver, which allows us to perform DOM manipulation without
-    // triggering actions in the framework. Then, we can call initTree() and
-    // destroyTree() to have explicitly setup and teardowm DOM node bindings.
-    Alpine.mutateDom(
-        function pauseMutationObserver() {
-            element.after(domHook);
-            domHook.after(clone);
-            Alpine.initTree(clone);
-            element.remove();
-            Alpine.destroyTree(element);
-        }
-    );
-}
-
 class AlpineService {
 
     private hideLoader() {
         const loaderContainer = document.querySelector('.loader-container');
         if (loaderContainer) { loaderContainer.remove(); }
     }
 
-    private startup() {
-        document.addEventListener('alpine:init', () => {
-            Alpine.directive("template-outlet", TemplateOutletDirective);
-        });
-    }
-
     private i18n() {
         document.addEventListener('alpine-i18n:ready', () => {
             const browserLang = navigator.language;
@@ -92,7 +41,6 @@ class AlpineService {
     }
 
     public init() {
-        this.startup();
         this.i18n();
         Alpine.plugin(AlpineI18n);
         Alpine.start();

code/src/services/services.ts

@@ -8,13 +8,14 @@ import { boardThemeSwitcherService } from './board-theme-switcher-service';
 import { syzygyService } from './syzygy-service';
 import { stockfishService } from './stockfish-service';
 import { soundService } from './sound-service';
+import { isBot } from '../commons';
 
 export function services_initialize() {
     return storageService.init()
         .then(() => configurationService.init())
-        .then(() => stockfishService.init())
-        .then(() => syzygyService.init())
-        .then(() => soundService.init())
+        .then(() => isBot() ? true : stockfishService.init())
+        .then(() => isBot() ? true : syzygyService.init())
+        .then(() => isBot() ? true : soundService.init())
         .then(() => themeSwitcherService.init())
         .then(() => boardThemeSwitcherService.init())
         .then(() => endgameDatabaseService.init())

firebase.json

@@ -74,11 +74,11 @@
           },
           {
             "key": "Cross-Origin-Embedder-Policy",
-            "value": null
+            "value": "unsafe-none"
           },
           {
             "key": "Cross-Origin-Opener-Policy",
-            "value": null
+            "value": "unsafe-none"
           }
         ]
       },
@@ -91,11 +91,11 @@
           },
           {
             "key": "Cross-Origin-Embedder-Policy",
-            "value": null
+            "value": "unsafe-none"
           },
           {
             "key": "Cross-Origin-Opener-Policy",
-            "value": null
+            "value": "unsafe-none"
           }
         ]
       }
@@ -135,4 +135,4 @@
       }
     ]
   }
-}
+}