perf: refactor using semantic HTML (#1207)

Fixes #1196

_javascript/modules/components/img-lazyload.js

@@ -7,7 +7,7 @@ function stopShimmer($node) {
 }
 
 export function imgLazy() {
-  const $images = $('#core-wrapper img[data-src]');
+  const $images = $('main img[data-src]');
 
   if ($images.length <= 0) {
     return;

_javascript/modules/components/search-display.js

@@ -4,9 +4,9 @@
 const $btnSbTrigger = $('#sidebar-trigger');
 const $btnSearchTrigger = $('#search-trigger');
 const $btnCancel = $('#search-cancel');
-const $content = $('#main>.row');
+const $content = $('#main-wrapper>.container>.row');
 const $topbarTitle = $('#topbar-title');
-const $searchWrapper = $('#search-wrapper');
+const $search = $('search');
 const $resultWrapper = $('#search-result-wrapper');
 const $results = $('#search-results');
 const $input = $('#search-input');
@@ -39,13 +39,13 @@ class MobileSearchBar {
     $btnSbTrigger.addClass(C_UNLOADED);
     $topbarTitle.addClass(C_UNLOADED);
     $btnSearchTrigger.addClass(C_UNLOADED);
-    $searchWrapper.addClass(C_FLEX);
+    $search.addClass(C_FLEX);
     $btnCancel.addClass(C_LOADED);
   }
 
   static off() {
     $btnCancel.removeClass(C_LOADED);
-    $searchWrapper.removeClass(C_FLEX);
+    $search.removeClass(C_FLEX);
     $btnSbTrigger.removeClass(C_UNLOADED);
     $topbarTitle.removeClass(C_UNLOADED);
     $btnSearchTrigger.removeClass(C_UNLOADED);
@@ -55,7 +55,7 @@ class MobileSearchBar {
 class ResultSwitch {
   static on() {
     if (!ScrollBlocker.resultVisible) {
-      // the block method must be called before $(#main) unloaded.
+      // the block method must be called before $(#main-wrapper>.container) unloaded.
       ScrollBlocker.on();
       $resultWrapper.removeClass(C_UNLOADED);
       $content.addClass(C_UNLOADED);
@@ -72,7 +72,7 @@ class ResultSwitch {
       $resultWrapper.addClass(C_UNLOADED);
       $content.removeClass(C_UNLOADED);
 
-      // now the release method must be called after $(#main) display
+      // now the release method must be called after $(#main-wrapper>.container) display
       ScrollBlocker.off();
 
       $input.val('');
@@ -98,11 +98,11 @@ export function displaySearch() {
   });
 
   $input.on('focus', function () {
-    $searchWrapper.addClass(C_FOCUS);
+    $search.addClass(C_FOCUS);
   });
 
   $input.on('focusout', function () {
-    $searchWrapper.removeClass(C_FOCUS);
+    $search.removeClass(C_FOCUS);
   });
 
   $input.on('input', () => {

_javascript/modules/components/toc.js

@@ -1,9 +1,9 @@
 export function toc() {
-  if (document.querySelector('#core-wrapper h2')) {
+  if (document.querySelector('main h2')) {
     // see: https://github.com/tscanlin/tocbot#usage
     tocbot.init({
       tocSelector: '#toc',
-      contentSelector: '.post-content',
+      contentSelector: '.content',
       ignoreSelector: '[data-toc-skip]',
       headingSelector: 'h2, h3, h4',
       orderedList: false,