highlight instruction after first login

client/src/instruction.ts

@@ -8,9 +8,21 @@ function initToggle() {
     const $state = document.querySelector(".js-instruction-visibility-state");
     const $instruction = document.querySelector(".js-instruction");
 
+    function toggle(state: boolean) {
+        localStorage.setItem("instruction", state.toString());
+
+        $instruction.classList.toggle("hide", state);
+        $state.classList.toggle("active", state);
+    }
+
+    let hidden = localStorage.getItem("instruction_hidden") === "true";
+
+    toggle(hidden);
+
     $button.addEventListener("click", () => {
-        $instruction.classList.toggle("hide");
-        $state.classList.toggle("active");
+        hidden = !hidden;
+
+        toggle(hidden);
     });
 }
 

internal/templates/v2/models.go

@@ -32,3 +32,16 @@ func (v ProfileView) GetName() string {
 
 	return v.Name
 }
+
+func showCharts(currentPageProfile ProfileView, sessionProfile ProfileView, stats ProfileViewsStats) bool {
+	if stats.TotalCount > 0 {
+		return true
+	}
+
+	// hide charts before first view tracked
+	if currentPageProfile.ID == sessionProfile.ID {
+		return false
+	}
+
+	return true
+}

internal/templates/v2/profile.qtpl

@@ -79,6 +79,8 @@
                 </div>
             </div>
         </section>
+
+        {% if showCharts(currentPageProfile, sessionProfile, stats) %}
         <section class="profile__statistics">
             <div class="profile__header">
                 <h3 class="profile__title">Your GitHub profile views statistic</h3>
@@ -186,6 +188,7 @@
             </button>
         </section>
         {% endif %}
+        {% endif %}
 
         {%= instruction(currentPageProfile, sessionProfile, exampleProfile, instructionDone) %}
     </div>