Xmr/site dev

site/.eleventy.js

@@ -61,9 +61,17 @@ module.exports = eleventyConfig => {
     },
   ]);
 
-  eleventyConfig.addPassthroughCopy('src/assets/images');
-  eleventyConfig.addPassthroughCopy('src/assets/js');
-  eleventyConfig.addPassthroughCopy('src/site.webmanifest');
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/clipboard/dist/clipboard.min.js': 'assets/js/vendor/clipboard.min.js',
+  });
+
+  eleventyConfig.addPassthroughCopy({
+    '../dist/quicklink.umd.js': 'assets/js/quicklink.umd.js',
+  });
+
+  eleventyConfig.addPassthroughCopy('../site/src/assets/images');
+  eleventyConfig.addPassthroughCopy('../site/src/assets/js');
+  eleventyConfig.addPassthroughCopy('../site/src/site.webmanifest');
 
   eleventyConfig.addNunjucksFilter('markdown', string => {
     const md = new markdownIt();
@@ -89,7 +97,7 @@ module.exports = eleventyConfig => {
 
   return {
     dir: {
-      input: 'src',
+      input: '../site/src',
       output: 'build',
     },
   };

site/package.json

@@ -11,6 +11,9 @@
     "test": "npm run lint && npm run build"
   },
   "license": "Apache-2.0",
+  "dependencies": {
+    "clipboard": "^2.0.11"
+  },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-navigation": "^0.3.5",

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 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/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="/assets/js/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 defer src="/assets/js/vendor/clipboard.min.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-153597376-1"></script>
   <script>

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 @@
+@import "vendor/prism";
+@import "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 src="https://cdn.jsdelivr.net/npm/quicklink@{{ site.quicklinkVersion }}/dist/quicklink.umd.js"></script>
 <script>
   window.addEventListener('load', () => {
     quicklink.listen();