feat: smarter typeit shortcode

pogor-dev · Aug 10, 2019 · a6bf8d8 · a6bf8d8
1 parent c16db32
commit a6bf8d8
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 165 deletions.
diff --git a/assets/css/_common/_core/base.scss b/assets/css/_common/_core/base.scss
@@ -1,18 +1,14 @@
 /** Font **/
+/* Lato */
+@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
 
-	/* Lato */
-	@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
-
-	/* Montserrat */
-	@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
-
-	/* Roboto */
-	@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
+/* Montserrat */
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
 
-  
- 
-  
-  html {
+/* Roboto */
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
+
+html {
     &::-webkit-scrollbar {
       width: 8px;
       height: 8px;
@@ -25,8 +21,8 @@
         background-color: #ddd;
       }
     }
-  }
-  
+}
+
   ::selection {
     background: rgba(0, 149, 255, 0.1);
   }

diff --git a/assets/css/_common/_page/post.scss b/assets/css/_common/_page/post.scss
@@ -161,39 +161,56 @@
             margin: 0 !important;
         }
 
-        div.code {
+        div.typeit-code {
           padding: 6px;
           font-size: 14px;
           font-family: Consolas, Monaco, Menlo, Consolas, monospace;
           font-weight:bold;
           word-break: break-all;
 
-          .code-key {
+          .k {
             color: #D371E3;
           }
 
-          .code-cvar {
+          .kt {
+            color: #D371E3;
+          }
+
+          .kc {
+            color: #D371E3;
+          }
+
+          .o {
+            color: #D371E3;
+          }
+
+          .n {
             color: #ECBF6F;
           }
 
-          .code-var {
+          .nf {
             color: #F16473;
           }
 
-          .code-func {
+          .na {
             color: #41B1F5;
           }
 
-          .code-str {
+          .s {
             color: #8BC56F;
           }
 
-          .code-num {
+          .n {
             color: #DB975C;
           }
 
-          .code-comm {
+          .c1 {
             color: #7E848F;
+            white-space: pre-wrap;
+          }
+
+          .space {
+            white-space: pre-wrap;
           }
         }
 
@@ -241,7 +258,6 @@
 
     }
 
-
     .post-nav {
 
         &:before,
@@ -280,7 +296,68 @@
         content: " / ";
     }
 
-    .post-comment{
+    .post-comment {
         padding: 3em 0;
     }
 }
+
+/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #ff79c6 }
+/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
+/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
+/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
+/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
+/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
+/* KeywordType */ .chroma .kt { color: #8be9fd }
+/* NameAttribute */ .chroma .na { color: #50fa7b }
+/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
+/* NameClass */ .chroma .nc { color: #50fa7b }
+/* NameFunction */ .chroma .nf { color: #50fa7b }
+/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
+/* NameTag */ .chroma .nt { color: #ff79c6 }
+/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
+/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
+/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
+/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
+/* LiteralString */ .chroma .s { color: #f1fa8c }
+/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
+/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
+/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
+/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
+/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
+/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
+/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
+/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
+/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
+/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
+/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
+/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
+/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
+/* LiteralNumber */ .chroma .m { color: #bd93f9 }
+/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
+/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
+/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
+/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
+/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
+/* Operator */ .chroma .o { color: #ff79c6 }
+/* OperatorWord */ .chroma .ow { color: #ff79c6 }
+/* Comment */ .chroma .c { color: #6272a4 }
+/* CommentHashbang */ .chroma .ch { color: #6272a4 }
+/* CommentMultiline */ .chroma .cm { color: #6272a4 }
+/* CommentSingle */ .chroma .c1 { color: #6272a4 }
+/* CommentSpecial */ .chroma .cs { color: #6272a4 }
+/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
+/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
+/* GenericDeleted */ .chroma .gd { color: #8b080b }
+/* GenericEmph */ .chroma .ge { text-decoration: underline }
+/* GenericHeading */ .chroma .gh { font-weight: bold }
+/* GenericInserted */ .chroma .gi { font-weight: bold }
+/* GenericOutput */ .chroma .go { color: #44475a }
+/* GenericSubheading */ .chroma .gu { font-weight: bold }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -4,17 +4,31 @@ jQuery(function($) {
 
     var _Blog = window._Blog || {};
 
-    _Blog.prettify = function() {
-        $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
-        window.prettyPrint && prettyPrint();
-    };
-
     _Blog.typeit = function() {
         if (window.typeitMap) {
             for (let id in typeitMap) {
-                new TypeIt(id, {
-                    strings: typeitMap[id],
-                }).go();
+                if (Array.isArray(typeitMap[id])) {
+                    const group = typeitMap[id];
+                    (function typeone (i) {
+                        if (i === group.length - 1) {
+                            new TypeIt(`#${group[i]}`, {
+                                strings: document.getElementById(`r${group[i]}`).innerHTML,
+                            }).go();
+                            return;
+                        }
+                        let instance = new TypeIt(`#${group[i]}`, {
+                            strings: document.getElementById(`r${group[i]}`).innerHTML,
+                            afterComplete: () => {
+                                instance.destroy();
+                                typeone(i + 1);
+                            },
+                        }).go();
+                    })(0);
+                } else {
+                    new TypeIt(`#${id}`, {
+                        strings: document.getElementById(`r${id}`).innerHTML,
+                    }).go();
+                }
             }
         }
     };
@@ -74,7 +88,6 @@ jQuery(function($) {
 
     $(document).ready(function() {
         _Blog.toggleTheme();
-        _Blog.prettify();
         _Blog.countdown();
         _Blog.changeTitle();
         _Blog.toggleMobileMenu();

diff --git a/layouts/partials/home_post.html b/layouts/partials/home_post.html
@@ -1,75 +1,58 @@
 {{ $cdn_url := .Scratch.Get "cdn_url" }}
 
 <div class="post-warp">
-    <div class="intro">
-        {{ $avatar := "" }}
-        {{ if or .Params.gravatar.Email (and .Site.Params.gravatar.Email (ne .Params.gravatar.Email false)) }}
-            {{ $avatar = (printf "https://www.gravatar.com/avatar/%s?s=240&d=mp" (md5 .Site.Params.gravatar.email)) }}
-        {{ else if .Site.Params.avatar }}
-            {{ $avatar = (printf "%s%s" $cdn_url .) }}
-        {{ end }}
-        {{ if $avatar }}
-            <div class="avatar">
-                <a href="/posts/"> <img src={{ $avatar }} alt="avatar"></a>
-            </div>
-        {{ end }}
-
-        {{ with .Site.Params.subtitle }}
-            <h2 class="description">
-                <div id="subtitle"></div>
-            </h2>
-            <script>
-                var typeitMap = window.typeitMap || {};
-                typeitMap["#subtitle"] = "{{ . }}";
-            </script>
-        {{ end }}
-    </div>
-
-    {{ range (.Paginate .Pages).Pages }}
-    <article class="post" itemscope itemscope="" itemtype="http://schema.org/Article">
-
-        <header class="post-header">
-            <h1 class="post-title" itemprop="name headline"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
-        </header>
-        <div class="post-content">
-            <!--featured_image-->
-            {{ with .Params.featured_image }}
-            {{- $img := . -}}
-            <p><img src="{{ printf "%s%s" $cdn_url $img }}" class="featured_image"></p>
-            {{ end }}
-            <!-- end featured_image-->
+    {{ partial "intro.html" . }}
+    {{ range (.Paginate (where .Pages "Type" "posts")).Pages }}
+        <article class="post" itemscope itemtype="http://schema.org/Article">
+            <header class="post-header">
+                <h1 class="post-title" itemprop="name headline">
+                    <a href="{{ .Permalink }}">{{ .Title }}</a>
+                </h1>
+            </header>
+            <div class="post-content">
+                <!--featured_image-->
+                {{ with .Params.featured_image }}
+                    {{ $img := . }}
+                    <p>
+                        <img itemprop="image" src="{{ printf "%s%s" $cdn_url $img }}" class="featured_image">
+                    </p>
+                {{ end }}
+                <!-- end featured_image-->
 
-            {{ .Summary }}
-        </div>
-        <div class="post-footer">
-            <div class="post-meta">
-                <span class="post-time">
-                    <time datetime={{.Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
-                        itemprop="datePublished">{{ .Date.Format (.Site.Params.dateFormatToUse | default "2 January 2006") }}</time>
-                </span>
-                in
-                {{ with .Params.categories -}}
-                <i class="iconfont icon-folder"></i>
-                <span class="post-category">
-                    {{ range . }}
-                    {{- $name := . -}}
-                    {{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
-                    <a href="{{ .Permalink }}"> {{ $name }} </a>
-                    {{ end -}}
-                    {{ end }}
-                </span>
-                {{- end }}
+                {{ .Summary }}
             </div>
-            {{ with .Params.tags }}
-            <div class="post-tags">
-                {{ range . }}
-                <span class="tag"><a href="{{ "tags/" | absURL }}{{ . | urlize }}/">
-                        #{{.}}</a></span>
+            <div class="post-footer">
+                <div class="post-meta">
+                    <span class="post-time">
+                        <time datetime={{.Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} itemprop="datePublished">
+                            {{ .Date.Format (.Site.Params.dateFormatToUse | default "2 January 2006") }}
+                        </time>
+                    </span>
+                    in
+                    {{ with .Params.categories }}
+                        <i class="iconfont icon-folder"></i>
+                        <span class="post-category">
+                            {{ range . }}
+                                {{ $name := . }}
+                                {{ with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) }}
+                                    <a href="{{ .Permalink }}">{{ $name }}</a>
+                                {{ end }}
+                            {{ end }}
+                        </span>
+                    {{ end }}
+                </div>
+
+                {{ with .Params.tags }}
+                    <div class="post-tags">
+                        {{ range . }}
+                            <span class="tag">
+                                <a href="{{ "tags/" | absURL }}{{ . | urlize }}/">#{{ . }}</a>
+                            </span>
+                        {{ end }}
+                    </div>
                 {{ end }}
             </div>
-            {{ end }}
-        </div>
-    </article>
+        </article>
     {{ end }}
 
     {{ partial "paginator.html" . }}

diff --git a/layouts/partials/home_profile.html b/layouts/partials/home_profile.html
@@ -1,29 +1 @@
-{{ $cdn_url := .Scratch.Get "cdn_url" }}
-
-<div class="intro">
-    {{ $avatar := "" }}
-    {{ if or .Params.gravatar.Email (and .Site.Params.gravatar.Email (ne .Params.gravatar.Email false)) }}
-        {{ $avatar = (printf "https://www.gravatar.com/avatar/%s?s=240&d=mp" (md5 .Site.Params.gravatar.email)) }}
-    {{ else if .Site.Params.avatar }}
-        {{ $avatar = (printf "%s%s" $cdn_url .) }}
-    {{ end }}
-    {{ if $avatar }}
-        <div class="avatar">
-            <a href="/posts/"> <img src={{ $avatar }} alt="avatar"></a>
-        </div>
-    {{ end }}
-
-    {{ with .Site.Params.subtitle }}
-        <h2 class="description">
-            <div id="subtitle"></div>
-        </h2>
-        <script>
-            var typeitMap = window.typeitMap || {};
-            typeitMap["#subtitle"] = "{{ . }}";
-        </script>
-    {{ end }}
-
-    <div class="social-links">
-        {{ partial "social.html" . }}
-    </div>
-</div>
+{{ partial "intro.html" . }}