Numerous performance fixes.

- Refactored themes to always load with just a single file. This avoids
  a round trip on each request.
- Locally load "Fira Code" when available on the system, then try to
  load the woff2 file, then fall back to regular woff.
- Update markup to use relative urls where it is safe. RSS feeds still
  use absolute URLs.
- Only set og:image:(height/width) when using the standard color icon.
- Fixed styles on the pagination buttons.

assets/css/color/blue.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #23B0FF;

assets/css/color/green.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #78E2A0;

assets/css/color/orange.css

@@ -0,0 +1 @@
+@import '../style.css';

assets/css/color/pink.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #EE72F1;

assets/css/color/red.css

@@ -1,10 +1,4 @@
-@import '../main.css';
+@import '../style.css';
-@import '../header.css';
-@import '../logo.css';
-@import '../pagination.css';
-@import '../post.css';
-@import '../syntax.css';
-@import '../variables.css';
 
 :root {
   --accent: #FF6266;

assets/css/font.css

@@ -1,17 +1,17 @@
 @font-face {
   font-display: swap;
   font-family: 'Fira Code';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 400;
-  src: url("../fonts/FiraCode-Regular.woff") format("woff");
+  src: local("Fira Code") url("/assets/fonts/FiraCode-Regular.woff2") format("woff2") url("/assets/fonts/FiraCode-Regular.woff") format("woff");
   font-display: swap;
 }
 
 @font-face {
   font-display: swap;
   font-family: 'Fira Code';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 800;
-  src: url("../fonts/FiraCode-Bold.woff") format("woff");
+  src: local("Fira Code") url("/assets/fonts/FiraCode-Bold.woff2") format("woff2") url("/assets/fonts/FiraCode-Bold.woff") format("woff");
   font-display: swap;
 }

layouts/404.html

@@ -3,7 +3,7 @@
     <h1 class="post-title">404 — {{ $.Site.Params.missingContentMessage | default "Page not found..." }}</h1>
 
     <div class="post-content">
-      <a href="{{ "/" | absURL }}">{{ $.Site.Params.missingBackButtonLabel | default "Back to home page" }}&nbsp;→</a>
+      <a href="{{ "/" | relURL }}">{{ $.Site.Params.missingBackButtonLabel | default "Back to home page" }}&nbsp;→</a>
     </div>
 
   </div>

layouts/_default/index.html

@@ -17,7 +17,7 @@
     {{ range $paginator.Pages }}
       <div class="post on-list">
         <h1 class="post-title">
-          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+          <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
         </h1>
         <div class="post-meta">
           <span class="post-date">
@@ -31,7 +31,7 @@
         {{ if .Params.tags }}
           <span class="post-tags">
             {{ range .Params.tags }}
-            #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
+            #<a href="{{ (urlize (printf "tags/%s/" . )) | relLangURL }}">
               {{- . -}}
             </a>&nbsp;
             {{ end }}

layouts/_default/list.html

@@ -8,7 +8,7 @@
     {{ range .Paginator.Pages }}
       <div class="post on-list">
         <h1 class="post-title">
-          <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+          <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
         </h1>
         <div class="post-meta">
           <span class="post-date">
@@ -22,7 +22,7 @@
         {{ if .Params.tags }}
           <span class="post-tags">
             {{ range .Params.tags }}
-            #<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
+            #<a href="{{ (urlize (printf "tags/%s/" . )) | relLangURL }}">
               {{- . -}}
             </a>&nbsp;
             {{ end }}

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <div class="post">
   <h1 class="post-title">
-    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+    <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></h1>
   <div class="post-meta">
     {{ if .Params.Date }}
       <span class="post-date">
@@ -22,7 +22,7 @@
   {{ if .Params.tags }}
   <span class="post-tags">
     {{ range .Params.tags }}
-    #<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp;
+    #<a href="{{ (urlize (printf "tags/%s/" .)) | relLangURL }}">{{ . }}</a>&nbsp;
     {{ end }}
   </span>
   {{ end }}

layouts/_default/terms.html

@@ -8,7 +8,7 @@
       {{ $count := .Count }}
       {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
         <li>
-          <a class="terms-title" href="{{ .Permalink }}">{{ .Name }} ({{ $count }})</a>
+          <a class="terms-title" href="{{ .RelPermalink }}">{{ .Name }} ({{ $count }})</a>
         </li>
       {{ end }}
       {{ end }}

layouts/partials/cover.html

@@ -5,7 +5,7 @@
   {{- if .Resources.GetMatch .Params.Cover }}
     {{- $cover = (.Resources.GetMatch .Params.Cover).RelPermalink -}}
   {{- else -}}
-    {{- $cover = absURL .Params.Cover -}}
+    {{- $cover = relURL .Params.Cover -}}
   {{- end -}}
 {{- else if $.Site.Params.AutoCover -}}
   {{- if (not .Params.Cover) -}}

layouts/partials/footer.html

@@ -12,11 +12,11 @@
   </div>
 </footer>
 
-<script src="{{ "assets/main.js" | absURL }}"></script>
+<script defer src="{{ "assets/main.js" | relURL }}"></script>
-<script src="{{ "assets/prism.js" | absURL }}"></script>
+<script defer src="{{ "assets/prism.js" | relURL }}"></script>
 
 {{ if $.Site.Params.showLanguageSelector }}
-  <script src="{{ "assets/languageSelector.js" | absURL }}"></script>
+  <script src="{{ "assets/languageSelector.js" | relURL }}"></script>
 {{ end }}
 
 <!-- Extended footer section-->

layouts/partials/head.html

@@ -8,24 +8,25 @@
 {{ template "_internal/google_analytics.html" . }}
 
 <!-- Theme CSS -->
-<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
 {{ if (isset .Params "color") }}
-  <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | absURL }}">
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | relURL }}">
 {{ else if and (ne $.Site.Params.ThemeColor "orange") (ne $.Site.Params.ThemeColor "color" "") }}
-  <link rel="stylesheet" href="{{ (printf "assets/%s.css" $.Site.Params.ThemeColor) | absURL }}">
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" $.Site.Params.ThemeColor) | relURL }}">
+{{ else }}
+  <link rel="stylesheet" href="{{ "assets/orange.css" | relURL }}">
 {{ end }}
 
 <!-- Custom CSS to override theme properties (/static/style.css) -->
 {{ if (fileExists "static/style.css") -}}
-  <link rel="stylesheet" href="{{ "style.css" | absURL }}">
+  <link rel="stylesheet" href="{{ "style.css" | relURL }}">
 {{- end }}
 
 <!-- Icons -->
-<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon-192x192.png" | absURL }}">
+<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon-192x192.png" | relURL }}">
 {{ if isset $.Site.Params "favicon" }}
-  <link rel="shortcut icon" href="{{ $.Site.Params.favicon | absURL }}">
+  <link rel="shortcut icon" href="{{ $.Site.Params.favicon | relURL }}">
 {{ else }}
-  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" ($.Site.Params.ThemeColor | default "orange") | absURL }}">
+  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" ($.Site.Params.ThemeColor | default "orange") | relURL }}">
 {{ end }}
 
 <!-- Twitter Card -->
@@ -51,10 +52,10 @@
     <meta property="og:image" content="{{ $.Site.Params.favicon | absURL }}">
   {{ else }}
     <meta property="og:image" content="{{ printf "img/favicon/%s.png" $.Site.Params.ThemeColor | absURL }}">
+    <meta property="og:image:width" content="2048">
+    <meta property="og:image:height" content="1024">
   {{ end }}
 {{ end }}
-<meta property="og:image:width" content="2048">
-<meta property="og:image:height" content="1024">
 {{ range .Params.categories }}
   <meta property="article:section" content="{{ . }}" />
 {{ end }}

layouts/partials/menu.html

@@ -35,7 +35,7 @@
       </ul>
       <ul class="language-selector__more hidden">
         {{ range $.Site.Home.AllTranslations }}
-        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+        <li><a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
         {{ end }}
       </ul>
     </ul>
@@ -52,7 +52,7 @@
     <hr />
       {{ range $.Site.Home.AllTranslations }}
         <li>
-          <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+          <a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
         </li>
       {{ end }}
     {{ end }}

layouts/partials/posts_pagination.html

@@ -6,20 +6,16 @@
     </div>
     <div class="pagination__buttons">
         {{ if .NextInSection }}
-        <span class="button previous">
+        <a class="button previous" href="{{ .NextInSection.RelPermalink }}">
-            <a href="{{ .NextInSection.Permalink }}">
+            <span class="button__icon">←</span>
-                <span class="button__icon">←</span>
+            <span class="button__text">{{ .NextInSection.Title }}</span>
-                <span class="button__text">{{ .NextInSection.Title }}</span>
+        </a>
-            </a>
-        </span>
         {{ end }}
         {{ if .PrevInSection }}
-        <span class="button next">
+        <a class="button next" href="{{ .PrevInSection.RelPermalink }}">
-            <a href="{{ .PrevInSection.Permalink }}">
+            <span class="button__text">{{ .PrevInSection.Title }}</span>
-                <span class="button__text">{{ .PrevInSection.Title }}</span>
+            <span class="button__icon">→</span>
-                <span class="button__icon">→</span>
+        </a>
-            </a>
-        </span>
         {{ end }}
     </div>
 </div>

layouts/shortcodes/code.html

@@ -11,5 +11,5 @@
     <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
   </div>
 {{ else }}
-  {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}
+  {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.RelPermalink }}
 {{ end }}

package.json

@@ -55,6 +55,6 @@
     "webpack-cli": "^4.5.0"
   },
   "dependencies": {
-    "yarn": "^1.22.10"
+    "yarn": "^1.22.19"
   }
 }

static/assets/languageSelector.js

@@ -1,4 +1 @@
-(function(){var __webpack_modules__={"./assets/js/languageSelector.js":
+!function(){var e=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),t=function(){return window.matchMedia(e).matches},n=document.querySelector(".language-selector-current"),o=document.querySelector(".language-selector__more");document.body.addEventListener("click",(function(){t()||!o||o.classList.contains("hidden")||o.classList.add("hidden")})),n&&n.addEventListener("click",(function(e){t()||(e.stopPropagation(),o.classList.toggle("hidden"))}))}();
-/*!***************************************!*\
-  !*** ./assets/js/languageSelector.js ***!
-  \***************************************/function(){eval('var mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar languageSelector = document.querySelector(".language-selector-current");\nvar moreLanguagesContainer = document.querySelector(".language-selector__more");\ndocument.body.addEventListener("click", function () {\n  if (!isMobile() && moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {\n    moreLanguagesContainer.classList.add("hidden");\n  }\n});\nlanguageSelector && languageSelector.addEventListener("click", function (e) {\n  if (!isMobile()) {\n    e.stopPropagation();\n    moreLanguagesContainer.classList.toggle("hidden");\n  }\n});\n\n//# sourceURL=webpack://terminal/./assets/js/languageSelector.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/languageSelector.js"]()})();

static/assets/main.js

@@ -1,4 +1 @@
-(function(){var __webpack_modules__={"./assets/js/menu.js":
+!function(){var e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),i=(document.querySelector(".menu__inner--desktop"),document.querySelector(".menu__sub-inner-more-trigger")),o=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(d).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),o&&o.classList.toggle("hidden",!c())};t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),o&&o.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!o||o.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):o.classList.add("hidden")})),window.addEventListener("resize",s),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),i&&i.addEventListener("click",(function(t){t.stopPropagation(),o&&o.classList.toggle("hidden"),o.getBoundingClientRect().right>e.getBoundingClientRect().right&&(o.style.left="auto",o.style.right=0)}))}();
-/*!***************************!*\
-  !*** ./assets/js/menu.js ***!
-  \***************************/function(){eval('var container = document.querySelector(".container");\nvar menu = document.querySelector(".menu");\nvar mobileMenuTrigger = document.querySelector(".menu-trigger");\nvar desktopMenu = document.querySelector(".menu__inner--desktop");\nvar desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");\nvar menuMore = document.querySelector(".menu__sub-inner-more");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar handleMenuClasses = function handleMenuClasses() {\n  mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());\n  menu && menu.classList.toggle("hidden", isMobile());\n  menuMore && menuMore.classList.toggle("hidden", !isMobile());\n}; // Common\n\n\nmenu && menu.addEventListener("click", function (e) {\n  return e.stopPropagation();\n});\nmenuMore && menuMore.addEventListener("click", function (e) {\n  return e.stopPropagation();\n});\nhandleMenuClasses();\ndocument.body.addEventListener("click", function () {\n  if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {\n    menuMore.classList.add("hidden");\n  } else if (isMobile() && !menu.classList.contains("hidden")) {\n    menu.classList.add("hidden");\n  }\n});\nwindow.addEventListener("resize", handleMenuClasses); // Mobile menu\n\nmobileMenuTrigger && mobileMenuTrigger.addEventListener("click", function (e) {\n  e.stopPropagation();\n  menu && menu.classList.toggle("hidden");\n}); // Desktop menu\n\ndesktopMenuTrigger && desktopMenuTrigger.addEventListener("click", function (e) {\n  e.stopPropagation();\n  menuMore && menuMore.classList.toggle("hidden");\n\n  if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {\n    menuMore.style.left = "auto";\n    menuMore.style.right = 0;\n  }\n});\n\n//# sourceURL=webpack://terminal/./assets/js/menu.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/menu.js"]()})();

webpack.config.js

@@ -15,10 +15,10 @@ module.exports = (env, { mode }) => ({
     main: join("assets", "js", "menu.js"),
     languageSelector: join("assets", "js", "languageSelector.js"),
     prism: join("assets", "js", "prism.js"),
-    style: join("assets", "css", "style.css"),
     red: join("assets", "css", "color", "red.css"),
     blue: join("assets", "css", "color", "blue.css"),
     green: join("assets", "css", "color", "green.css"),
+    orange: join("assets", "css", "color", "orange.css"),
     pink: join("assets", "css", "color", "pink.css"),
   },
   output: {
@@ -93,6 +93,7 @@ module.exports = (env, { mode }) => ({
         join("static/assets/green.js"),
         join("static/assets/red.js"),
         join("static/assets/pink.js"),
+        join("static/assets/orange.js"),
       ],
       verbose: true,
     }),