fix: links to check tools

.env

@@ -1,2 +1 @@
 HUGO_VERSION=0.83.1
-BASE_URL=https://hugothemeiris.peaceiris.app

Makefile

@@ -28,47 +28,45 @@ bumphugo:
 
 .PHONY: build
 build:
-	$(eval opt := --minify --baseURL $(BASE_URL) --cleanDestinationDir)
+	$(eval opt := --minify --cleanDestinationDir)
 	$(DOCKER_COMPOSE) run --rm --entrypoint=hugo hugo $(opt)
 
 .PHONY: npm-build
 npm-build:
 	cd ./exampleSite && \
-	hugo --minify --baseURL $(BASE_URL) --cleanDestinationDir
+	hugo --minify --cleanDestinationDir
 
 .PHONY: test
 test:
-	$(eval opt := --minify --baseURL $(BASE_URL) \
+	$(eval opt := --minify \
 		--renderToMemory --i18n-warnings --path-warnings --debug)
 	$(DOCKER_COMPOSE) run --rm --entrypoint=hugo hugo $(opt)
 
 .PHONY: npm-test
 npm-test:
 	cd ./exampleSite && \
-	hugo --minify --baseURL $(BASE_URL) \
+	hugo --minify \
 		--renderToMemory --i18n-warnings --path-warnings --debug
 
 .PHONY: metrics
 metrics:
-	$(eval opt := --minify --baseURL $(BASE_URL) \
+	$(eval opt := --minify \
 		--renderToMemory --i18n-warnings --path-warnings --debug \
 		--templateMetrics --templateMetricsHints)
 	$(DOCKER_COMPOSE) run --rm --entrypoint=hugo hugo $(opt)
 
 .PHONY: cibuild
 cibuild:
 	cd ./exampleSite && \
-		hugo --minify \
-			--baseURL '/' \
-			--cleanDestinationDir \
+		hugo --minify --cleanDestinationDir \
+			--environment "staging" \
 			--i18n-warnings --path-warnings --debug \
 			--templateMetrics --templateMetricsHints
 
 .PHONY: cibuild-prod
 cibuild-prod:
 	cd ./exampleSite && \
 		hugo --minify --cleanDestinationDir \
-			--baseURL ${BASE_URL} \
 			--i18n-warnings --path-warnings && \
 		wget -O ./public/report.html ${BASE_URL}/report.html || true
 

exampleSite/config/_default/config.yaml

@@ -1,4 +1,4 @@
-baseURL: "https://example.com"
+baseURL: "https://hugothemeiris.peaceiris.app"
 
 module:
   imports:

exampleSite/config/_default/params.yaml

@@ -15,4 +15,4 @@ icon:
   x180: /favicon/apple-icon-180x180.jpg
   mstile: /favicon/ms-icon-150x150.jpg
 
-# disableBreadcrumbNavigation: true
+disableBreadcrumbNavigation: false

exampleSite/config/development/params.yaml

@@ -1,3 +1,2 @@
 # Params for development (server mode)
-hugoenv: development
-stagingURL: "https://hugothemeiris.peaceiris.app"
+productionBaseURL: "https://hugothemeiris.peaceiris.app"

exampleSite/config/production/params.yaml

@@ -1,2 +1 @@
 # Params for production (build mode)
-hugoenv: production

exampleSite/config/staging/config.yaml

@@ -0,0 +1,2 @@
+# Config for production
+baseURL: "/"

exampleSite/config/staging/params.yaml

@@ -0,0 +1 @@
+# Params for production (build mode)

layouts/_default/_markup/render-heading.html

@@ -1,3 +1 @@
-{{ if and (ne .Level "1") (ne .Level "2") }}
-<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="title is-5">{{ .Text | safeHTML }}</h{{ .Level }}>
-{{ end }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="title is-{{ add .Level 1 }}">{{ .Text | safeHTML }}</h{{ .Level }}>

layouts/partials/check-tools.html

@@ -1,10 +1,3 @@
-{{ if ne $.Site.Params.hugoenv "production" }}
-  {{ $targetURL := $.Permalink }}
-  {{ if $.Site.IsServer }}
-    {{ $targetRelURL := .Page.Permalink | relURL }}
-    {{ $targetURL = delimit (slice $.Site.Params.stagingURL $targetRelURL) "" }}
-  {{ end }}
-
 <div class="dropdown" id="checkTools">
   <div class="dropdown-trigger">
     <button class="button is-warning" aria-haspopup="true" aria-controls="dropdown-menu" onclick="toggleDropdownCheckTools();">
@@ -13,64 +6,51 @@
   </div>
   <div class="dropdown-menu" id="dropdown-menu" role="menu">
     <div class="dropdown-content">
-      <a
-        href="https://developers.google.com/speed/pagespeed/insights/?url={{ $targetURL }}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="dropdown-item normal-link"
-        >Page Speed Insights</a
-      >
-      <a
-        href="https://search.google.com/test/rich-results?url={{ $targetURL }}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="dropdown-item normal-link"
-        >Rich result</a
-      >
-      <a
-        href="https://validator.w3.org/nu/?doc={{ $targetURL }}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="dropdown-item normal-link"
-        >Markup</a
-      >
-      <a
-        href="https://material.io/tools/resizer/#url={{ $targetURL }}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="dropdown-item normal-link"
-        >RESIZER</a
-      >
-      <a
-        href="https://search.google.com/test/mobile-friendly?url={{ $targetURL }}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="dropdown-item normal-link"
-        >Mobile</a
-      >
-      <a
-        href="https://developers.facebook.com/tools/debug/sharing/?q={{ $targetURL }}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="dropdown-item normal-link"
-        >Facebook</a
-      >
+      <button class="button dropdown-item" onclick="openCheckToolPage('pagespeedInsights');">
+        <span>Page Speed Insights</span>
+      </button>
+      <button class="button dropdown-item" onclick="openCheckToolPage('richResults');">
+        <span>Rich Result</span>
+      </button>
+      <button class="button dropdown-item" onclick="openCheckToolPage('mobileFriendly');">
+        <span>Mobile Friendly</span>
+      </button>
+      <button class="button dropdown-item" onclick="openCheckToolPage('w3Validator');">
+        <span>Validate Markup</span>
+      </button>
+      <button class="button dropdown-item" onclick="openCheckToolPage('facebook');">
+        <span>Facebook Sharing Debugger</span>
+      </button>
       <a
         href="https://cards-dev.twitter.com/validator"
         target="_blank"
         rel="noopener noreferrer"
-        class="dropdown-item normal-link"
-        >Twitter</a
+        class="button dropdown-item"
+        >Twitter Card Validator</a
       >
     </div>
   </div>
 </div>
 
 <script>
   function toggleDropdownCheckTools() {
-    var obj = document.getElementById("checkTools");
+    const obj = document.getElementById("checkTools");
     obj.classList.toggle("is-active");
   }
-</script>
 
-{{ end }}
+  function openCheckToolPage(toolName) {
+    const toolsTable = {
+      pagespeedInsights: 'https://developers.google.com/speed/pagespeed/insights/?url=',
+      richResults: 'https://search.google.com/test/rich-results?url=',
+      mobileFriendly: 'https://search.google.com/test/mobile-friendly?url=',
+      w3Validator: 'https://validator.w3.org/nu/?doc=',
+      facebook: 'https://developers.facebook.com/tools/debug/?q=',
+    }
+    {{ if $.Site.IsServer }}
+      const toolURL = toolsTable[toolName] + '{{ $.Site.Params.productionBaseURL | safeURL }}{{ .RelPermalink }}';
+    {{ else }}
+      const toolURL = toolsTable[toolName] + window.location.href;
+    {{ end }}
+    window.open(toolURL, '_blank', 'noreferrer');
+  }
+</script>

layouts/partials/content.html

@@ -4,7 +4,7 @@
 
 {{ $hasH2 := findRE "</h2>" $content }}
 {{ if $hasH2 }}
-  {{ $content = $content | replaceRE "<h2 " "</section><section class=\"section\"><h2 class=\"title is-3\" " }}
+  {{ $content = $content | replaceRE "<h2 " "</section><section class=\"section\"><h2 " }}
 {{ end }}
 
 {{ $content = $content | replaceRE "<ul>\n<li>" "<div class=\"content\"><ul><li>" }}

layouts/partials/keyboard-shortcut.html

@@ -53,7 +53,7 @@
 {{ $secureJS := $js | resources.Fingerprint "sha512" }}
 <script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 <script>
-  var keyboardShortcutHelpModal = document.getElementById("keyboard-shortcut-help-modal");
+  const keyboardShortcutHelpModal = document.getElementById("keyboard-shortcut-help-modal");
 
   function toggleActive(obj) {
     obj.classList.toggle("is-active");

layouts/partials/lang-button.html

@@ -19,7 +19,7 @@
 </div>
 <script>
   function toggleDropdownActive() {
-    var obj = document.getElementById("langDrop");
+    const obj = document.getElementById("langDrop");
     obj.classList.toggle("is-active");
   }
 </script>

layouts/partials/mathjax.html

@@ -1,4 +1,4 @@
-<script defer>
+<script>
   MathJax = {
     tex: {
       inlineMath: [['$', '$'], ['\\(', '\\)']]

layouts/partials/mermaid.html

@@ -2,7 +2,7 @@
 {{ $secureJS := $js | resources.Fingerprint "sha512" }}
 <script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 <script>
-  var config = {
+  const mermaidConfig = {
     startOnLoad: true,
     flowchart: {
       useMaxWidth: true,
@@ -13,5 +13,5 @@
     securityLevel: "strict",
   };
 
-  mermaid.initialize(config);
+  mermaid.initialize(mermaidConfig);
 </script>

layouts/shortcodes/github-sponsors-list.html

@@ -7,18 +7,18 @@
   {{ $sponsorID := .sponsor.login }}
   {{ $sponsorURL := delimit (slice "https://github.com/" $sponsorID) "" | safeURL }}
   <div class="column is-3-mobile is-2-tablet">
-    <a href="{{ $sponsorURL }}" rel="noopener noreferrer" target="_blank" class="normal-link">
-      <figure class="image is-64x64">
+    <figure class="image is-64x64">
+      <a href="{{ $sponsorURL }}" rel="noopener noreferrer" target="_blank" class="normal-link">
         <img
           class="is-rounded"
           alt="{{ $sponsorID }} | GitHub"
           src="{{ $sponsorURL }}.png"
           decoding="async"
           loading="lazy"
         />
-      </figure>
+      </a>
       <figcaption>{{ print $sponsorID }}</figcaption>
-    </a>
+    </figure>
   </div>
 {{ end }}
 </div>