[new feature] type writer in home header

README.ko.md

@@ -255,7 +255,7 @@ hideSingleContentsWhenJSDisabled = false
 minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud
 
 # header
-homeHeaderType = "text" # text, img, slide
+homeHeaderType = "text" # text, img, slide, typewriter
 
 # menu
 showMobileMenuTerms = ["tags", "categories", "series"]
@@ -800,7 +800,7 @@ root/assets/scss/custom.scss
 
 홈페이지에서 헤더 부분에 4가지 종류의 헤더를 입힐 수 있습니다. 슬라이더, 이미지, 텍스트, 그리고 아무것도 입력 안하시면 빈공간이 됩니다.
 
-1. config/_default/params.toml 설정파일에 homeHeaderType 값을 변경해주세요. 가능한 값은 slide, img, text입니다.
+1. config/_default/params.toml 설정파일에 homeHeaderType 값을 변경해주세요. 가능한 값은 slide, img, text, typewriter입니다.
 
 2. root/content/_index.md에 _index.md 파일을 만들어주세요 그리고 아래 내용을 복붙해주세요.
 

README.md

@@ -3,16 +3,37 @@
 English | 
 [한국어](https://github.com/zzossig/hugo-theme-zzo/blob/master/README.ko.md)
 
-🔥🔥🔥
+2020-07-24 new feature - [type writer in home header]
-after update the zzo theme, delete the outputs.page variable in `config.toml`.
-```diff
-[outputs]
-  <del>page = ["HTML", "SearchIndex"]</del>
-```
-I changed the place to make search index
-🔥🔥🔥
 
-Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(always), and many features. 
+I added new home header option. Now, we have 5 options - empty, text, image, slider and typewriter
+Follow the below steps to apply it
+
+0. Update the theme first.
+1. Edit `homeHeaderType` param to `typewriter` in params.toml file.
+2. Insert below code to your header md file.
+```yaml
+header:
+  - type: typewriter
+    methods:
+      - typeString: Hello world!
+      - pauseFor: 2500
+      - deleteAll: true
+      - typeString: Strings can be removed
+      - pauseFor: 2500
+      - deleteChars: 7
+      - typeString: <strong>altered!</strong>
+      - pauseFor: 2500
+    options:
+      loop: true
+      autoStart: false
+    height: 190
+    paddingX: 50
+    align: center
+    fontSize: 44
+    fontColor: yellow
+  ...
+```
+3. Refer this site https://safi.me.uk/typewriterjs/ and edit the params.
 
 ## Documentation
 
@@ -246,7 +267,7 @@ hideSingleContentsWhenJSDisabled = false
 minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud
 
 # header
-homeHeaderType = "text" # text, img, slide
+homeHeaderType = "text" # text, img, slide, typewriter
 
 # menu
 showMobileMenuTerms = ["tags", "categories", "series"]
@@ -781,7 +802,7 @@ Make sure that !important is necessary. After you changed this param, restart hu
 
 ### custom header
 
-You may want to change home page header. There are 4 options which is slider, image, text, empty.
+You may want to change home page header. There are 5 options which is slider, image, text, typewriter, empty.
 
 1. Set param at config/_default/params.toml(homeHeaderType)
 
@@ -790,6 +811,25 @@ You may want to change home page header. There are 4 options which is slider, im
 ```yaml
 ---
 header:
+- type: typewriter
+    methods:
+      - typeString: Hello world!
+      - pauseFor: 2500
+      - deleteAll: true
+      - typeString: Strings can be removed
+      - pauseFor: 2500
+      - deleteChars: 7
+      - typeString: <strong>altered!</strong>
+      - pauseFor: 2500
+    options:
+      loop: true
+      autoStart: false
+    height: 190
+    paddingX: 50
+    align: center
+    fontSize: 44
+    fontColor: yellow
+
   - type: text
     height: 200
     paddingX: 50

data/lib.toml

@@ -58,6 +58,9 @@
   sri = "sha256-Ogqs510LFnekr9o7OLdpelaaAmNss9egQRTyzCqV2NQ="
   url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js"
 
+[js.typewriter]
+  sri = "sha256-dsvC/UolMujQ/UQ7lVeJ7Q/FV3BSzWO0rc8iz1rqHQo="
+  url = "https://cdn.jsdelivr.net/npm/typewriter-effect@2.13.1/dist/core.js"
 
 
 

exampleSite/config/_default/params.toml

@@ -20,7 +20,7 @@ enablePinnedPosts = true
 minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud
 
 # header
-homeHeaderType = "text" # text, img, slide
+homeHeaderType = "text" # text, img, slide, typewriter
 
 # menu
 showMobileMenuTerms = ["tags", "categories", "series"]

exampleSite/content/en/_index.md

@@ -1,5 +1,24 @@
 ---
 header:
+  - type: typewriter
+    methods:
+      - typeString: Hello world!
+      - pauseFor: 2500
+      - deleteAll: true
+      - typeString: Strings can be removed
+      - pauseFor: 2500
+      - deleteChars: 7
+      - typeString: <strong>altered!</strong>
+      - pauseFor: 2500
+    options:
+      loop: true
+      autoStart: false
+    height: 190
+    paddingX: 50
+    align: center
+    fontSize: 44
+    fontColor: yellow
+    
   - type: text
     height: 200
     paddingX: 50

exampleSite/content/ko/_index.md

@@ -1,5 +1,24 @@
 ---
 header:
+  - type: typewriter
+    methods:
+      - typeString: Hello world!
+      - pauseFor: 2500
+      - deleteAll: true
+      - typeString: Strings can be removed
+      - pauseFor: 2500
+      - deleteChars: 7
+      - typeString: <strong>altered!</strong>
+      - pauseFor: 2500
+    options:
+      loop: true
+      autoStart: false
+    height: 190
+    paddingX: 50
+    align: center
+    fontSize: 44
+    fontColor: yellow
+    
   - type: text
     height: 200
     paddingX: 50

layouts/partials/header/header-typewriter.html

@@ -0,0 +1,41 @@
+<script src="{{ .Site.Data.lib.js.typewriter.url }}" integrity="{{ .Site.Data.lib.js.typewriter.sri }}" crossorigin="anonymous"></script>
+
+{{ if $.Params.header }}
+  {{ range $.Params.header }}
+    {{ if eq .type "typewriter" }}
+      <div class="site-header basicflex-column site-header__align-{{ .align }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px; font-size: {{ .fontSize }}px; {{ with .fontColor }}color:{{ . }}{{ end }};">
+        <div id="typewriter"></div>
+      </div>
+
+      <script>
+        {{ $methods:= .methods }}
+        {{ $options:= .options }}
+
+        var methods = JSON.parse({{ $methods | jsonify }});
+        var options = JSON.parse({{ $options | jsonify }});
+        var typeElem = document.getElementById("typewriter");
+        var typewriter = new Typewriter(typeElem, options);
+        
+        for (var i = 0; i < methods.length; i++) {
+          var key = Object.keys(methods[i])[0];
+
+          if (key === "typeString") {
+            typewriter.typeString(methods[i][key]);
+          } else if (key === "pauseFor") {
+            typewriter.pauseFor(methods[i][key]);
+          } else if (key === "deleteAll") {
+            typewriter.deleteAll();
+          } else if (key === "deleteChars") {
+            typewriter.deleteChars(methods[i][key]);
+          } else if (key === "pause") {
+            typewriter.pause();
+          } else if (key === "stop") {
+            typewriter.stop();
+          }
+        }
+
+        typewriter.start();
+      </script>
+    {{ end }}
+  {{ end }}
+{{ end }}

layouts/partials/header/site-header.html

@@ -6,6 +6,8 @@
         {{ partial "header/header-img" . }}
     {{ else if and ($.Param "homeHeaderType") (eq ($.Param "homeHeaderType") "text") }}
         {{ partial "header/header-text" . }}
+    {{ else if and ($.Param "homeHeaderType") (eq ($.Param "homeHeaderType") "typewriter") }}
+        {{ partial "header/header-typewriter" . }}
     {{ else }}
         {{ partial "header/custom-header" . }}
     {{ end }}