Site improvements

site/src/_includes/components/copy-snippet.njk

@@ -7,7 +7,7 @@
 
   <div class="snippet-for-copy">
   {% highlight "html" %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/{{ site.quicklinkVersion }}/quicklink.umd.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/quicklink@{{ site.quicklinkVersion }}/dist/quicklink.umd.js"></script>
 <script>
   window.addEventListener('load', () => {
     quicklink.listen();

site/src/_includes/components/download.njk

@@ -3,11 +3,11 @@
 {% sectionTitle "Download" %}
 <ul class="no-bullet">
   <li class="list-icon">
-    <img src="/assets/images/font-icons/download-solid.svg" alt="download" loading="lazy" width="13" height="13">
-    <a href="https://cdnjs.cloudflare.com/ajax/libs/quicklink/{{ site.quicklinkVersion }}/quicklink.umd.js" target="_blank" rel="noopener noreferrer">Build (&lt; {{ site.quicklinkSizeLimit }} minified/gzipped)</a>
+    {% include "layouts/font-icons/download-solid.svg" %}
+    <a href="https://cdn.jsdelivr.net/npm/quicklink@{{ site.quicklinkVersion }}/dist/quicklink.umd.js" target="_blank" rel="noopener noreferrer">Build (&lt; {{ site.quicklinkSizeLimit }} minified/gzipped)</a>
   </li>
   <li class="list-icon">
-    <img src="/assets/images/font-icons/chain-solid.svg" alt="chain" loading="lazy" width="13" height="13">
+    {% include "layouts/font-icons/chain-solid.svg" %}
     <a href="https://www.jsdelivr.com/package/npm/quicklink" target="_blank" rel="noopener noreferrer">CDN copies</a>
   </li>
 </ul>

site/src/_includes/components/trusted-by.njk

@@ -2,12 +2,12 @@
 {% block section %}
 {% sectionTitle "Trusted by" %}
 <div class="flex-grid overflow-x-auto">
-  {% for trustedByLogo in site.trustedByLogos %}
+  {%- for trustedByLogo in site.trustedByLogos %}
     <a class="flex-grid__item text-center" href="{{ trustedByLogo.websiteUrl }}" target="_blank" rel="noopener noreferrer">
       {# TODO: responsive sizing like "used-with" logos #}
       <img loading="lazy" src="/assets/images/quicklink-used-logos/{{ trustedByLogo.logoFileName }}" style="max-width: 92px" alt="{{ trustedByLogo.companyName }}">
       <span class="text-center"><strong>{{ trustedByLogo.companyName }}</strong></span>
     </a>
-  {% endfor %}
+  {%- endfor %}
 </div>
 {% endblock %}

site/src/_includes/components/usage.njk

@@ -7,7 +7,7 @@
 
 {% highlight "html" %}
 <!-- Include quicklink from dist -->
-<script src="dist/quicklink.umd.js"></script>
+<script defer src="dist/quicklink.umd.js"></script>
 <!-- Initialize (you can do this whenever you want) -->
 <script>
   quicklink.listen();

site/src/_includes/components/use-with.njk

@@ -3,11 +3,11 @@
 {% sectionTitle "Use with" %}
 <div class="center">
   <div class="flex-grid overflow-x-auto">
-    {% for framework in site.useWithFrameworks %}
+    {%- for framework in site.useWithFrameworks %}
       <a class="flex-grid__item" href="{{ framework.url }}" target="_blank" rel="noopener noreferrer">
         <img loading="lazy" src="/assets/images/logos/{{ framework.logoFileName }}" style="width: 112px; min-width: 92px" alt="{{ framework.title }}">
       </a>
-    {% endfor %}
+    {%- endfor %}
   </div>
 </div>
 {% endblock %}

site/src/_includes/layouts/base.njk

@@ -10,15 +10,14 @@
     <div class="back-to-top hidden">&uarr;</div>
   </main>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/{{ site.quicklinkVersion }}/quicklink.umd.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/quicklink@{{ site.quicklinkVersion }}/dist/quicklink.umd.js"></script>
   <script>
     window.addEventListener('load', () => {
       quicklink.listen();
     });
   </script>
-  <link rel="stylesheet" href="{{ '/assets/styles/vendor/prism.css' | rev }}">
   <script defer src="https://buttons.github.io/buttons.js"></script>
-  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js" integrity="sha512-7O5pXpc0oCRrxk8RUfDYFgn0nO1t+jLuIOQdOMRp4APB7uZ4vSjspzp5y6YDtDs4VzUSTbWzBFZ/LKJhnyFOKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" integrity="sha256-4XodgW4TwIJuDtf+v6vDJ39FVxI0veC/kSCCmnFp7ck=" crossorigin="anonymous"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-153597376-1"></script>
   <script>
@@ -28,7 +27,7 @@
     gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon' });
     gtag('config', 'UA-153597376-1');
   </script>
-  <script defer src="{{ '/assets/js/script.js' }}"></script>
+  <script defer src="/assets/js/script.js"></script>
 </body>
 
 </html>

site/src/_includes/layouts/head.njk

@@ -5,20 +5,14 @@
   <meta name="description" content="{{ description }}">
   <meta name="generator" content="{{ eleventy.generator }}">
 
+  {{ extra_head | safe }}
+
   {% include "layouts/favicons.njk" -%}
   {% include "layouts/social.njk" -%}
 
-  <link rel="preload" href="{{ '/assets/styles/main.css' | rev }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-  <link rel="preload" href="{{ '/assets/styles/github-markdown.css' | rev }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-  <link rel="stylesheet" href="{{ '/assets/styles/main.css' | rev }}">
-  <link rel="stylesheet" href="{{ '/assets/styles/copy-snippet.css' | rev }}">
+  <link rel="preload" href="{{ '/assets/styles/main.css' | rev }}" as="style">
+  <link rel="preload" href="{{ '/assets/styles/github-markdown.css' | rev }}" as="style">
   <link rel="stylesheet" href="{{ '/assets/styles/github-markdown.css' | rev }}">
+  <link rel="stylesheet" href="{{ '/assets/styles/main.css' | rev }}">
   {# TODO: opt for theme and tweak the background color by avoiding github markdown #}
-
-  {% set cssrelpreloadJs -%}
-    {%- include "js/vendor/cssrelpreload.js" -%}
-  {%- endset -%}
-  <script>
-    {{ cssrelpreloadJs | safe -}}
-  </script>
 </head>

site/src/assets/styles/main.scss

@@ -1,3 +1,6 @@
+@use "vendor/prism";
+@use "copy-snippet";
+
 html {
   height: 100%;
 }
@@ -168,7 +171,7 @@ main.page-main {
   padding-left: 0;
 }
 
-.list-icon img {
+.list-icon svg {
   margin-right: 1rem;
 }
 

site/src/index.njk

@@ -5,6 +5,7 @@ description: Faster subsequent page-loads by prefetching in-viewport links durin
 eleventyNavigation:
   key: Home
   order: 0
+extra_head: <link rel="dns-preconnect" href="https://api.github.com">
 ---
 
 {% include "components/heading.njk" %}

site/src/measure.njk

@@ -22,7 +22,7 @@ In this section, we explore different ways of measuring the impact of Quicklink
 If you take a look at the code of the listing page, in the optimized version of the site, you'll find the code to initialize Quicklink:
 {% endmarkdownConvert %}
   {% highlight "js" %}
-<script src="https://unpkg.com/quicklink@{{ site.quicklinkVersion }}/dist/quicklink.umd.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/quicklink@{{ site.quicklinkVersion }}/dist/quicklink.umd.js"></script>
 <script>
   window.addEventListener('load', () => {
     quicklink.listen();