From dab1e8b4698da0df2acd7cc54cd236defcd632bc Mon Sep 17 00:00:00 2001
From: Siphalor <info@siphalor.de>
Date: Sun, 13 Feb 2022 13:04:54 +0100
Subject: [PATCH] defer loading of external contents

---
 _includes/header.html | 27 +++++++++++++++++++++++++++
 about.md              | 14 +++++++++++---
 index.md              | 11 ++++++++---
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 5757813..cbc1b63 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -151,4 +151,31 @@
   <meta name="theme-color" content="#ffffff">
 
   <link rel="stylesheet" href="/assets/css/style.css" />
+  <script>
+    function prepareCodersrank() {
+      var placeholders = document.getElementsByClassName("cr-placeholder");
+      console.log(placeholders);
+      if (localStorage.getItem("load-codersrank")) {
+        loadCodersrank();
+      } else {
+        for (ph of placeholders) {
+          ph.addEventListener("click", e => {
+              e.preventDefault();
+              console.log(e);
+            localStorage.setItem("load-codersrank", true);
+            loadCodersrank();
+          });
+        }
+      }
+    }
+
+    function loadCodersrank() {
+      var script = document.createElement("script");
+      script.src = "https://unpkg.com/@codersrank/activity/codersrank-activity.min.js";
+      for (ph of document.getElementsByClassName("cr-placeholder")) {
+        ph.parentElement.innerHTML = ph.childNodes[0].data;
+      }
+      document.head.appendChild(script);
+    }
+  </script>
 </head>
diff --git a/about.md b/about.md
index 83b1597..b2c481b 100644
--- a/about.md
+++ b/about.md
@@ -10,9 +10,14 @@ Hi, I'm a German software developer currently studying Applied Informatics.
 In my spare time I do quite [some modding]({% link modding.html %}) to the sandbox video game [Minecraft](https://en.wikipedia.org/wiki/Minecraft). I also do some more or less experimental projects with Python, PHP and Rust.
 
 
-<div style="height:350px">
-<codersrank-skills-chart username="Siphalor" branding="false" labels legend skills="C,C++,CSS,Go,HTML,Java,JavaScript,PHP,Python,Rust,SCSS" svg-height="300" aria-hidden="true"></codersrank-skills-chart>
-</div>
+<a href="https://profile.codersrank.io/user/siphalor" aria-label="My CodersRank profile" style="height:350px">
+  <span class="cr-placeholder"><!--
+    <codersrank-skills-chart username="Siphalor" branding="false" labels legend skills="C,C++,CSS,Go,HTML,Java,JavaScript,PHP,Python,Rust,SCSS" svg-height="300" aria-hidden="true"></codersrank-skills-chart>
+    -->
+    Click here to load external content from codersrank.io. Your preference will be saved.
+  </span>
+</a>
+
 <script src="https://unpkg.com/@codersrank/skills-chart/codersrank-skills-chart.min.js"></script>
 
 ## Contact
@@ -20,3 +25,6 @@ In my spare time I do quite [some modding]({% link modding.html %}) to the sandb
 - [<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16" role="presentation"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/></svg> {{ site.author.email }}](mailto:{{ site.author.email }})
 - [<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16" role="presentation"><path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/></svg> Twitter](https://twitter.com/{{ site.author.twitter }})
 - [<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16" role="presentation"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/></svg> LinkedIn](https://linkedin.com/in/{{ site.author.linkedin }})
+
+
+<script>prepareCodersrank()</script>
diff --git a/index.md b/index.md
index 9177d0a..1fe0265 100644
--- a/index.md
+++ b/index.md
@@ -3,7 +3,12 @@ layout: home
 ---
 
 <a href="https://profile.codersrank.io/user/siphalor" aria-label="My CodersRank profile" style="height:111px">
-	<codersrank-activity username="Siphalor" legend="false" labels branding="false" tooltip step="5"
-		title="Combined activity graph from GitHub, GitLab and others" aria-hidden="true"></codersrank-activity>
+  <span class="cr-placeholder"><!--
+	    <codersrank-activity username="Siphalor" legend="false" labels branding="false" tooltip step="5"
+        title="Combined activity graph from GitHub, GitLab and others" aria-hidden="true"></codersrank-activity>
+    -->
+    Click here to load external content from codersrank.io. Your preference will be saved.
+  </span>
 </a>
-<script src="https://unpkg.com/@codersrank/activity/codersrank-activity.min.js"></script>
+
+<script>prepareCodersrank()</script>