fix(algolia, babel, toc, eslint) & chore(deps, code lint) & style(dar…

…k, social)

Fix:
1. Make babel and eslint work better.
2. No longer show Algolia elements when site not ready.
3. Prevent body from scrolling when open algolia search.
4. Init toc before site fully loaded.

Chore:
1. Update and remove useless deps.
2. More `const` !

Style:
1. Improve algolia dark mode style sheet.
2. Fix social icon align (fi3ework#301).
3. Add background color for article in light mode.
4. Improve social display in mobile mode.

.eslintrc.json

@@ -1,7 +1,9 @@
 {
+    "parser": "@babel/eslint-parser",
     "extends": [
-        "eslint-config-alloy",
-        "plugin:prettier/recommended"
+        "alloy",
+        "plugin:prettier/recommended",
+        "prettier"
     ],
     "globals": {
         "siteMeta": true

layout/_partial/algolia.ejs

@@ -1,20 +1,19 @@
-<div class="site-search">
+<div class="site-search site-search-loading">
     <div class="algolia-popup popup">
         <div class="algolia-search">
             <div class="algolia-search-input-icon">
                 <i class="fa fa-search"></i>
             </div>
             <div class="algolia-search-input" id="algolia-search-input"></div>
+            <div class="popup-btn-close">
+                <i class="iconfont-archer">&#xe609;</i>
+            </div>
         </div>
 
         <div class="algolia-results">
-            <div id="algolia-stats"></div>
+            <div id="algolia-stats" class="algolia-stats"></div>
             <div id="algolia-hits"></div>
             <div id="algolia-pagination" class="algolia-pagination"></div>
         </div>
-
-        <span class="popup-btn-close">
-            <i class="iconfont-archer">&#xe609;</i>
-        </span>
     </div>
 </div>

layout/_partial/base-head.ejs

@@ -30,12 +30,12 @@
         <link rel="alternate" href="<%= url_for(theme.feed.path) %>" title="<%= theme.main_title %>" type="application/atom+xml">
     <% } %>
     <title><%= title %></title>
+    <%- partial('base-preload-polyfill') %>
     <%- partial('critical-css/critical-style') %>
     <link rel="preload" href="<%- url_for("css/style.css?v=202107") %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" href="<%- url_for("css/dark.css?v=202107") %>" as="style">
     <link rel="stylesheet" href="<%- url_for("css/mobile.css?v=202107") %>" media="(max-width: 980px)">
     <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <%- partial('base-preload-polyfill') %>
     <link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/webfontloader.min.js" as="script">
     <link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" as="script">
     <link rel="preload" href="<%- url_for('scripts/main.js') %>?v=202107" as="script">

layout/_partial/sidebar/sidebar-archives.ejs

@@ -24,7 +24,7 @@
         </div>
         <!-- search  -->
         <% if (theme.algolia_search.enable) { %>
-            <div class="site-search popup-trigger">
+            <div class="site-search site-search-loading popup-trigger">
                 <span class="iconfont-archer search-icon">&#xe627;</span>
             </div>
         <% } %>

layout/layout.ejs

@@ -56,13 +56,7 @@
         <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js" defer></script>
         <!-- algolia -->
         <% if (theme.algolia_search.enable) { %>
-            <!-- algolia browser support -->
-            <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CArray.prototype.includes%2CPromise%2CObject.assign%2CObject.entries"></script>
-            <!-- algolia layout -->
             <%- partial('_partial/algolia') %>
-            <!-- algolia source -->
-            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" crossorigin="anonymous"></script>
-            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" crossorigin="anonymous"></script>
             <script src="<%- url_for('scripts/search.js') %>" defer></script>
         <% } %>
         <!-- busuanzi -->