Replace typeit with typed.js.

Opting out typeit for the following reasons:

* the delay between strings gets longer after every line typed (alexmacarthur/typeit#347).

* It's GPL licensed.

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": {

src/components/TypeIt.vue → 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>

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,
 

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"