d3 update

_includes/header.html

@@ -7,7 +7,7 @@
     <svg class="w1 mr2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.11 219.53"><path fill="currentColor" d="M243.11 64.85q0 11.66-1.12 15.72-.42 1.43-6.31 14.43-6.18-.14-12.5-.42-8.15-.42-11.79-2.39-2.94-1.55-9.82-9.54a129 129 0 0 1-8.71-11.23q-3.23-6.75-10.1-20.22-3.66-6.73-13.9-21a95.7 95.7 0 0 0-15.44-1.26q-4.77 0-13.76 11.79a99.49 99.49 0 0 0-10.8 16.56Q127 60.92 123.24 71q-4.35 11.35-4.35 13.33v135.2h-7.58V75.8a44.51 44.51 0 0 0-1.82-11.09q-2.11-7.57-4.64-10-4.62-4.49-18.95-4.49-2.39 0-7.79 5.62t-6.52 8.42q-4.64 11-6.18 34-1.55 23.58-5.61 34.25-1.12 2.94-8.71 11.37a107.26 107.26 0 0 1-10.52 10.52q-2 1.69-18.67 10.53-8.43-14-16.71-28.21Q0 125.35 0 103.73q0-15.58 2.39-24.42 7.16-26.67 15.16-36.08 6.16-7.29 22.88-14A64.23 64.23 0 0 1 64.57 24 94.86 94.86 0 0 1 79 25.69q10.38 1.81 14 3.51 6.31 2.81 14 12.7t9.4 16.77q.42 1.69 1.13 6.88 1.26-5.47 4.21-16.14 2.23-4.92 6.74-14.88A117.39 117.39 0 0 1 135 20.35q7.31-10.67 27.23-16.84A77.2 77.2 0 0 1 185.14 0q13.34 0 19.94 1.82 25.39 7.17 34.81 35 3.23 9.64 3.22 28.03zm-139-16.42q-4.22-4.77-14.32-12.08-8.79-4.07-25.22-4.07-10 0-21.9 4.64T23.58 48.29q-2 1.82-8.77 19.58T8 88.71q0 2.54-.14 7.72t-.14 7.72q0 15.72 2.11 23.44a51.07 51.07 0 0 0 6.87 13.9q8.15 12.36 8.57 13 3.64-1.81 10.52-6.17 2.53-2 9.27-9.48t7.58-9.61q4.48-10.95 5.89-34.67t5.9-34.67q2.1-5.34 8.14-10.25L83 41.55zm131.42 19.09V55.73q0-10-2.1-16.15A49.06 49.06 0 0 0 221.5 20.7a40.61 40.61 0 0 0-18.67-11.16q-7.16-1.81-21.62-1.82-7.44 0-22 5.47Q144 19 140 24.14q-1.41 1.83-5.62 13.48 5.61-4.92 16.7-14.74h22.18q4.92 6.32 13.9 19.65 4.06 9 13.47 26.25 8.56 12.91 14.18 15.72a26.21 26.21 0 0 0 11.6 2.5l4.91-.14a47.55 47.55 0 0 0 4.21-19.34z"/></svg>
     <a class="no-underline f4 foreground-text anthony mr3" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
     {% if page.url != "/" %}
-      <div id="gardenConditions" class="br-pill code f7 ba pv2 ph3"></div>
+      <div id="gardenConditions" class="br-pill code f7 ba pv2 ph3 dn"></div>
     {% endif %}
   </div>
 

_layouts/default.html

@@ -8,7 +8,7 @@
     </main>
     {%- include footer.html -%}
     {% include link-previews.html %}
-    <script src="{{ "/assets/js/d3.v6.min.js" | relative_url }}"></script>
+    <script src="{{ "/assets/js/d3.min.js" | relative_url }}"></script>
     <script src="{{ "/assets/js/scripts.js" | relative_url }}?{{ site.time | date: '%s%N' }}"></script>
   </body>
 </html>

_layouts/note.html

@@ -32,13 +32,13 @@ layout: default
       </div>
 
       <aside class="bt b--background bw1 nl3 nr3 ph3 mt5">
-        <h3 class="normal f1 mt5 work-sans-light mb4">Notes mentioning this note</h3>
+        <h2 class="normal f1 mv4 work-sans-light">Notes mentioning this note</h2>
         {% if page.backlinks.size > 0 %}
         <div class="flex flex-wrap">
         {% for backlink in page.backlinks %}
           <div class="w-50 flex">
             <div class="shadow-solid-accent mb2 mr2 br4 pa3 flex flex-column">
-              <h4 class="mt0  mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h4>
+              <h3 class="mt0 f5 mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h3>
               <div class="f7 lh-copy mb3 flex-auto">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
               <div class="f7 light-silver">{{ backlink.url }}</div>
             </div>

_sass/_fonts.scss

@@ -5,10 +5,12 @@
   font-family: Anthony;
   src: url('../fonts/Anthony.woff2') format('woff2'),
        url('../fonts/Anthony.woff') format('woff');
+  font-display: swap;
 }
 
 @font-face {
   font-family: Work Sans Light;
   src: url('../fonts/WorkSans-Light.woff2') format('woff2'),
        url('../fonts/WorkSans-Light.woff') format('woff');
+  font-display: swap;
 }

assets/js/scripts.js

@@ -144,8 +144,6 @@ if (typeof window.graphDataIndex !== 'undefined') {
 
 // Notes graph
 
-const d3 = window.d3
-
 if (typeof window.graphData !== 'undefined') {
   const MINIMAL_NODE_SIZE = 10
   const MAX_NODE_SIZE = 16
@@ -404,10 +402,15 @@ const capitalize = str => `${str.charAt(0).toUpperCase()}${str.slice(1)}`
 const conditionsContainer = document.getElementById('gardenConditions')
 const openWeatherUrl = 'https://garden-weather-api.vercel.app/weather/toronto'
 
-if (conditionsContainer) {
+async function fetchWeather() {
-  window.fetch(openWeatherUrl)
+  let response = await window.fetch(openWeatherUrl)
-    .then(response => response.json())
+  let weatherData = await response.json()
-    .then(data => {
+  conditionsContainer.innerHTML = `${capitalize(weatherData.weather[0].description)}, ${Math.round(weatherData.main.temp)}°C`
-      document.getElementById('gardenConditions').innerHTML = `${capitalize(data.weather[0].description)}, ${Math.round(data.main.temp)}°C`
+  conditionsContainer.classList.remove('dn')
-    })
+}
+
+if (conditionsContainer) {
+  fetchWeather().catch(e => {
+    console.log('There has been a problem with getting the weather ' + e.message);
+  });
 }