adjusted the loading priority of images/fonts (#356)

* made sure that important logos are inlined

* made sure that the loading priority better reflects our intentions

* formatting fixes

Author: CommanderStorm

content/_index.html

@@ -2,6 +2,7 @@
 title: MapLibre
 menu: footer
 weight: -10
+description: The MapLibre Organization is an umbrella for open-source mapping libraries.
 ---
 
 <div class="container">
@@ -11,12 +12,7 @@
         <div class="home-banner">
           <div class="row align-items-center" style="padding: 0px 10px;">
             <div>
-              <object
-                style="margin: 0 auto;"
-                width="353"
-                data="/img/maplibre-logo.svg"
-                type="image/svg+xml"
-              ></object>
+              {{< svg src="static/img/maplibre-logo.svg" width="353px" style="margin: 0 auto;" >}}
 
               <p style="word-break:normal; margin-top:30px; max-width: 800px;">
                 The MapLibre Organization is an umbrella for open-source mapping

layouts/author/footer.html

@@ -6,12 +6,8 @@
       <div class="row py-3">
         <div class="col-4">
           <a href="/" aria-label="MapLibre">
-            <object
-              height="30"
-              width="120"
-              data="/img/maplibre-logo.svg"
-              type="image/svg+xml"
-            ></object>
+            {{ partial "svg.html" (dict "src" "static/img/maplibre-logo.svg" "height" "30px" "width" "120px") }}
+
 
             <!--       
             <svg

layouts/partials/footer.html

@@ -6,12 +6,8 @@
       <div class="row py-3">
         <div class="col-4">
           <a href="/" aria-label="MapLibre">
-            <object
-              height="30"
-              width="120"
-              data="/img/maplibre-logo.svg"
-              type="image/svg+xml"
-            ></object>
+            {{ partial "svg.html" (dict "src" "static/img/maplibre-logo.svg" "height" "30px" "width" "120px") }}
+
 
             <!--       
             <svg

layouts/partials/head.html

@@ -34,15 +34,30 @@
   <link rel="me" href="https://mastodon.social/@maplibre" />
 
   {{ $options := (dict "includePaths" (slice "node_modules") "transpiler" "libsass") }}
-  {{ $style := resources.Get "style.scss" | resources.ToCSS $options | resources.Minify |
-    resources.Fingerprint
-  }}
+  {{ $style := resources.Get "style.scss" | resources.ToCSS $options | resources.Minify }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}" />
+  <link
+    rel="preload"
+    href="/files/alata-latin-400-normal.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+  />
 
-  {{ $style := readFile "node_modules/maplibre-gl/dist/maplibre-gl.css" | resources.FromString "mapbox-gl.css" |
-    resources.Fingerprint
-  }}
+  {{ $style := readFile "node_modules/maplibre-gl/dist/maplibre-gl.css" | resources.FromString "maplibre-gl.css" }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}" />
+  <link
+    rel="preload"
+    href="https://demotiles.maplibre.org/style.json"
+    as="fetch"
+    crossorigin
+  />
+  <link
+    rel="preload"
+    href="https://demotiles.maplibre.org/tiles/tiles.json"
+    as="fetch"
+    crossorigin
+  />
 
   {{ $opts := dict "targetPath" "main.js" }}
   {{ $built := resources.Get "main.js" | js.Build $opts | resources.Fingerprint }}  <script type="text/javascript" src="{{ $built.RelPermalink }}"></script>

layouts/partials/nav.html

@@ -7,12 +7,7 @@
 >
   <div class="container">
     <a class="navbar-brand" href="/" aria-label="MapLibre">
-      <object
-        height="30"
-        width="120"
-        data="/img/maplibre-logo.svg"
-        type="image/svg+xml"
-      ></object>
+      {{ partial "svg.html" (dict "src" "static/img/maplibre-logo.svg" "height" "30px" "width" "120px") }}
     </a>
     <div class="d-flex">
       <button

layouts/partials/svg.html

@@ -0,0 +1,8 @@
+<span
+  style="
+    {{- with .width }}width:{{ . }};{{ end -}}
+    {{- with .height }}height:{{ . }};{{ end -}}
+    display: inline-block;"
+>
+  {{ .src  | readFile | safeHTML }}
+</span>

layouts/shortcodes/svg.html

@@ -1,4 +1,8 @@
-{{ $svg := .Get 0 }}
-<span style="width: 20px; display: inline-block;">
-  {{ $svg  | readFile | safeHTML }}
+<span
+  style="
+    {{- with .Get "width" }}width:{{ . }};{{ end -}}
+    {{- with .Get "height" }}height: {{ . }};{{ end -}}
+    display: inline-block;"
+>
+  {{ .Get "src"  | readFile | safeHTML }}
 </span>