From 0ad696d333958c085c79272a83e9ff07a85501de Mon Sep 17 00:00:00 2001
From: Frost Ming <me@frostming.com>
Date: Tue, 14 Nov 2023 16:05:56 +0800
Subject: [PATCH] feat: add code animation

Signed-off-by: Frost Ming <me@frostming.com>
---
 assets/static/custom.css | 30 +++++++++++------
 templates/home.html      | 70 ++++++++++++++++++++++++++++++++++++++--
 templates/layout.html    |  2 ++
 3 files changed, 91 insertions(+), 11 deletions(-)

diff --git a/assets/static/custom.css b/assets/static/custom.css
index 7bd1315..a6ec3d7 100644
--- a/assets/static/custom.css
+++ b/assets/static/custom.css
@@ -1,8 +1,3 @@
-@font-face {
-  font-family: Bitmap;
-  src: url('./fonts/DinkieBitmap-9px.woff2') format('woff2');
-}
-
 .text-shadow {
   text-shadow: -1px -1px 0 #ffbb06, 1px -1px 0 #ffbb06, -1px 1px 0 #ffbb06, 1px 1px 0 #ffbb06;
 }
@@ -10,10 +5,6 @@
   text-shadow: -1px -1px 0 #ffbb06, 1px -1px 0 #ffbb06, -1px 1px 0 #ffbb06, 1px 1px 0 #ffbb06;
 }
 
-.font-bitmap {
-  font-family: Bitmap, sans-serif;
-}
-
 .menu {
   position: relative;
 }
@@ -34,3 +25,24 @@ body {
   background-repeat: repeat;
   background-size: 2rem;
 }
+
+/* Blinking cursor */
+#code:after{
+  content: "|";
+  animation: blink 500ms linear infinite alternate;
+}
+
+@-webkit-keyframes blink{
+  0%{opacity: 0;}
+  100%{opacity: 1;}
+}
+
+@-moz-keyframes blink{
+  0%{opacity: 0;}
+  100%{opacity: 1;}
+}
+
+@keyframes blink{
+  0%{opacity: 0;}
+  100%{opacity: 1;}
+}
diff --git a/templates/home.html b/templates/home.html
index dc05ba2..a7a089c 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,5 +1,19 @@
-{% extends "layout.html" %} {% block title %}{{ this.title }}{% endblock %} {% block body %}
+{% extends "layout.html" %}
+{% block title %}{{ this.title }}{% endblock %}
+{% block head %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+{% endblock %}
+{% block body %}
 <figure class="-mx-16"><img class="w-full" src="{{ 'banner.png'|asseturl }}" alt="PyConChina 2023" /></figure>
+<pre id="code" class="py-2 px-4 my-4 rounded">
+import openai
+
+openai.chat.completions.create(messages=[
+    {"role": "assistant", "message": "Welcome to PyCon China 2023!"},
+])
+</pre>
 <div class="flex justify-center space-x-2 lg:space-x-4 py-2 text-4xl font-bold">
   {% for city in this.children.filter(F._model == 'city') %}
   <a href="{{ city._path|url }}" class="py-2 px-2 text-white bg-gray-600 hover:bg-primary border-white border-b-8 transition duration-300"> {{ city.title }} </a>
@@ -10,4 +24,56 @@
   <h1 class="text-4xl my-6 flex font-thin text-white items-center space-x-2"><img src="{{'snake.png'|asseturl}}" /><span>{{item.title}}</span></h1>
   <div class="prose max-w-none prose-invert border-2 border-primary border p-4">{{item.body}}</div>
 </section>
-{% endfor %} {% endblock %}
+{% endfor %}
+{% endblock %}
+{% block scripts %}
+<script>
+  const target = document.getElementById('code');
+
+  // Highlight the code
+  hljs.highlightElement(target);
+  // Get all the child nodes
+  var children = Object.values(document.getElementById('code').childNodes);
+
+  // Empty the target
+  target.innerText = '';
+
+  // And start the animation from the first node
+  type(0);
+
+  function type(i) {
+    // Little helper
+    function randomNumber(min, max) {
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+
+    // Make the content visible
+    if (i === 0) {
+        target.style.visibility = 'visible';
+    }
+
+    // When we've displayed all the nodes
+    // Just start over
+    if (i >= children.length) {
+        return;
+    }
+
+    // Append each node to the target code placeholder
+    // And scroll that div if the code scrolls past it
+    if (children.hasOwnProperty(i)) {
+        target.appendChild(children[i]);
+
+        target.scrollTop = target.scrollHeight;
+    }
+
+    // Step to the next node
+    i++;
+
+    // Repeat the process
+    // after a variable amount of time
+    setTimeout(function () {
+        type(i);
+    }, randomNumber(500, 800));
+  }
+</script>
+{% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
index 825a2f6..d2330e8 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="{{ '/static/style.css'|url }}" />
     <link rel="stylesheet" href="{{ '/static/custom.css'|url }}" />
     <title>{% block title %}Welcome{% endblock %} | PyConChina 2023</title>
+    {% block head %}{% endblock %}
   </head>
   <body>
     <div class="flex flex-col min-h-screen">
@@ -15,5 +16,6 @@
       <main class="mx-auto max-w-6xl p-2 grow">{% block body %}{% endblock %}</main>
       {% include "components/footer.html" %}
     </div>
+    {% block scripts %}{% endblock %}
   </body>
 </html>