From 7b38f3106a56b7408cf3be29c2b975bbc516b8b0 Mon Sep 17 00:00:00 2001
From: Ethan Wong <e1hanw0ng@gmail.com>
Date: Sun, 8 Sep 2024 14:40:11 +0800
Subject: [PATCH] Replace typeit with typed.js.

Opting out typeit for the following reasons:

* the delay between strings gets longer after every line typed (https://github.com/alexmacarthur/typeit/issues/347).

* It's GPL licensed.
---
 package.json                                  |  2 +-
 .../{TypeIt.vue => TypedComponent.vue}        |  6 ++--
 src/pages/HomePage.vue                        | 28 +++++++++++--------
 yarn.lock                                     |  8 +++---
 4 files changed, 25 insertions(+), 19 deletions(-)
 rename src/components/{TypeIt.vue => TypedComponent.vue} (71%)

diff --git a/package.json b/package.json
index e972f78..0c7dee7 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "bootstrap": "^4.6.2",
     "rfs": "^10.0.0",
-    "typeit": "^8.7.1",
+    "typed.js": "^2.1.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {
diff --git a/src/components/TypeIt.vue b/src/components/TypedComponent.vue
similarity index 71%
rename from src/components/TypeIt.vue
rename to src/components/TypedComponent.vue
index a7acc89..1768dc1 100644
--- a/src/components/TypeIt.vue
+++ b/src/components/TypedComponent.vue
@@ -4,13 +4,13 @@
 
 <script>
 import { defineComponent } from "vue";
-import TypeIt from "typeit";
+import Typed from "typed.js";
 
 export default defineComponent({
   mounted() {
-    new TypeIt(this.$el, {
+    new Typed(this.$el, {
       ...this.$attrs,
-    }).go();
+    });
   },
 });
 </script>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index e429650..030dc95 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -31,7 +31,7 @@
           />{{ welcomeTitle }}
         </h1>
         <p class="homepage__intro mb-3 mx-2">
-          I'm <TypeIt v-bind="typeItProps" />
+          I'm <TypedComponent v-bind="typedProps" />
         </p>
       </main>
       <LinkList class="mt-3" :currentLanguage="currentLanguage" />
@@ -45,12 +45,18 @@ import { defineComponent, computed, watch } from "vue";
 
 import NavMenu from "@/components/NavMenu.vue";
 import LanguageChooser from "@/components/LanguageChooser.vue";
-import TypeIt from "@/components/TypeIt.vue";
+import TypedComponent from "@/components/Typed.vue";
 import LinkList from "@/components/LinkList.vue";
 import PageFooter from "@/components/PageFooter.vue";
 
 export default defineComponent({
-  components: { NavMenu, LanguageChooser, TypeIt, LinkList, PageFooter },
+  components: {
+    NavMenu,
+    LanguageChooser,
+    TypedComponent,
+    LinkList,
+    PageFooter,
+  },
   setup() {
     const navMenuItems = [
       {
@@ -77,7 +83,7 @@ export default defineComponent({
       },
     ];
 
-    const typeItProps = {
+    const typedProps = {
       strings: [
         "a full-time iOS & Mac developer.",
         "a self-taught frontend developer.",
@@ -86,13 +92,13 @@ export default defineComponent({
         "a lover of coffee.",
         "foolish to ideas, hungry to adventures.",
       ],
-      lifeLike: true,
+      startDelay: 500,
+      typeSpeed: 100,
+      backSpeed: 50,
+      smartBackspace: false,
+      backDelay: 1000,
       loop: true,
-      cursorSpeed: 200,
-      speed: 100,
-      deleteSpeed: 50,
-      nextStringDelay: 750,
-      breakLines: false,
+      contentType: "null",
     };
 
     // TODO: Use hooks for this.
@@ -119,7 +125,7 @@ export default defineComponent({
 
     return {
       navMenuItems,
-      typeItProps,
+      typedProps,
       currentLanguage,
       showsMigrationTip,
 
diff --git a/yarn.lock b/yarn.lock
index 6f208ac..d788b3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1360,10 +1360,10 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typeit@^8.7.1:
-  version "8.7.1"
-  resolved "https://registry.yarnpkg.com/typeit/-/typeit-8.7.1.tgz#d45921def11d4b71a445d34e546a5cdb4d1f9014"
-  integrity sha512-Bx/O4NMz10NWh9FWYtVwV4XwGHF9UDJfpCZPJRtw2/oUcahFAStU8J0t19aroPfTV6s1UlS5ICoqilOqmEnh2Q==
+typed.js@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/typed.js/-/typed.js-2.1.0.tgz#b97a06111a5f57d6a59acfdd36d4f9b891ee13b4"
+  integrity sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==
 
 typescript@^5.0.3:
   version "5.0.3"