jekyll-theme-type 1.1 → 1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: a887f9c28935122ea7323b0c1c6b3da01271e277
-  data.tar.gz: d3b5750a6bb40c7b9f0a2900e185176b18204331
+SHA256:
+  metadata.gz: 7e8ee31c08e816cc07a6f281e63490a5ed50499ea4333dc6190d070fdc6cfe2a
+  data.tar.gz: d3827ae17395e8fd35ae888147cf33a9ef9d7f848de87419bd0b58599559074c
 SHA512:
-  metadata.gz: 366a9adf069be4eb262ffe8b18a021fb909057335610978d35a2f67d7b0fd440e2974ce3960f58302c39f00840d77108db7c9ad9f7a5f91d21f4886a410f8d15
-  data.tar.gz: b46f93b306d3e5069a0f9f6a76e97b85468cb9700b03ec56c06570a6f83cb174985ea10620eb8b25064247d1a807bb8865df41a168842ac02fc1cb71c50cf772
+  metadata.gz: 27de480cd93ec1feb799898d3e290082481225f45b335bc13c35f122da5eafdb0bbe21ff5d8d551ad31d3f012d4c8180a4ad6cd3cb2c3f6b765e4587b438fe65
+  data.tar.gz: 10b10f6cfbe5bfaee24e0cb13c8116428d2b030b5f5fe0f78de71bbb3c589e981a415a7b8ba6aa3f472271bf24e6871e9d798aac7fdd46f68e105ca76f5db84c

data/README.md

@@ -20,7 +20,7 @@ Open `_config.yml` in a text editor to change most of the blog's settings.
 
 If a variable in this document is marked as "optional", disable the feature by removing all text from the variable. For example, to prevent the avatar from rendering in the header, the avatar line should read:
 
-```
+```yml
 theme:
   title: Type Theme
   avatar:
@@ -36,7 +36,7 @@ The most common configurations, included here for guidance, are:
 
 Jekyll website *without* a subpath (such as a GitHub Pages website for a given username):
 
-```
+```yml
 # SITE CONFIGURATION
 baseurl: ""
 url: "https://username.github.io"
@@ -44,7 +44,7 @@ url: "https://username.github.io"
 
 Jekyll website *with* subpath (like the Type Theme demo page):
 
-```
+```yml
 # SITE CONFIGURATION
 baseurl: "/sub-directory"
 url: "https://username.github.io/"
@@ -120,7 +120,7 @@ Navigate to the `_sass > base` directory and open `_variables.scss` to change co
 
 Once you have loaded a Google Font in `config.yml`, you can integrate the fonts into your CSS by changing the font-family in `_variables.scss`. For example, after loading the Playfair Display and PT Sans fonts from Google:
 
-```
+```css
 // Typography
 $font-family-main: 'PT Sans', Helvetica, Arial, sans-serif;
 $font-family-headings: 'Playfair Display', Helvetica, Arial, sans-serif;
@@ -128,9 +128,47 @@ $font-family-headings: 'Playfair Display', Helvetica, Arial, sans-serif;
 
 Mozilla's [ColorPicker](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) is a helpful tool to get your preferred colours in hexadecimal or RGBA form for use in `_variables.scss`.
 
-### Favicon
+### Customize style when using the remote_theme
+
+If you're using Type Theme as a `remote_theme`, you can override variables and styles.
+To do so, simply create a `assets/css/main.scss` file on your website with the following content:
+
+```scss
+// assets/css/main.scss
+---
+---
+
+@import "type-theme";
+```
+
+`@import "type-theme";` is including the theme styles, so you can add custom imports before and after it, depending on your needs.
+Best practice is to put your custom files in the `_sass` folder of your progect. Jekyll will automatically look for them there.
+For example, say you wanted to override some theme variables and add some custom styles, you can create the following files:
+
+```scss
+// _sass/_variables.scss
+$background-color: black;
+```
 
-To change your favicon, usually displayed in the browser, place an ICO file named `favicon.ico` in the root directory of your blog.
+```sass
+// _sass/_custom.sass
+
+// SASS is supported as well, just note the file extension is .sass
+.feature-image header
+  height: 300px
+```
+
+Then import them both into `main.scss`:
+
+```scss
+// assets/css/main.scss
+---
+---
+
+@import "variables";
+@import "type-theme";
+@import "custom";
+```
 
 ## Posts and pages in Type Theme
 Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). Non-standard features are documented below.
@@ -140,13 +178,13 @@ Wrap math expressions with `$$` signs in your posts and make sure you have set t
 
 For inline math typesetting, type your math expression on the *same line* as your content. For example:
 
-```
+```latex
 Type math within a sentence $$2x^2 + x + c$$ to display inline
 ```
 
 For display math typesetting, type your math expression on a *new line*. For example:
 
-```
+```latex
 $$
   \bar{y} = {1 \over n} \sum_{i = 1}^{n}y_i
 $$
@@ -162,7 +200,7 @@ Add a feature image by specifying a path to an image in the [front matter](http:
 
 For example:
 
-```
+```yml
 ---
 layout: post
 title: Hello World
@@ -170,13 +208,24 @@ feature-img: "assets/img/sample_feature_img.png"
 ---
 ```
 
+By default, the page title is displayed on top of the feature image, as well as on the browser's tab. You can change the feature image's displayed title by specifying a `feature-title` in the front matter:
+
+```yml
+---
+layout: post
+title: Short title
+feature-title: A much longer title
+feature-img: "assets/img/sample_feature_img.png"
+---
+```
+
 ### Hiding pages from navigation
 
-In the Front Matter of a page, add `hide: true` to prevent the page from showing up in the header's navigation bar (visitors can still visit the URL through other means).
+In the front matter of a page, add `hide: true` to prevent the page from showing up in the header's navigation bar (visitors can still visit the URL through other means).
 
 For example:
 
-```
+```yml
 ---
 layout: page
 title: "Error 404: Page not found"
@@ -185,13 +234,31 @@ hide: true
 ---
 ```
 
+### Sorting pages in navigation
+
+You can configure this theme to **sort your pages** in the header's navigation bar.
+
+- Set `site_navigation_sort` in theme settings to a property name e.g. `'order'`
+- In the front matter of a non-hidden page, add `order: n`
+
+For example:
+
+```yml
+---
+layout: page
+title: Team
+permalink: /team/
+order: 4
+---
+```
+
 ### Tags
 
 Post tags should be placed between `[]` in your post metadata. Seperate each tag with a comma.
 
 For example:
 
-```
+```yml
 ---
 layout: post
 title: Markdown and HTML
@@ -201,6 +268,17 @@ tags: [sample, markdown, html]
 
 A tags listing will be automatically generated using the `tags.html` file provided in Type theme. If you're not using the tags feature it is safe to delete `tags.html`.
 
+### Search
+
+The search feature can be activated in the `_config.yml` file by changing its value from `false` to `true`.
+
+```yml
+  #Scripts
+  search: true
+```
+
+Once activated, the search bar will appear in the header. This feature uses [Lunr](https://lunrjs.com/) and searches through the title, tags and content of your posts.
+
 ### Subtitles
 A subtitle can be displayed below your title on permalink post pages.
 
@@ -208,7 +286,7 @@ To enable this feature, add `subtitle` to your post metadata.
 
 For example:
 
-```
+```yml
 ---
 layout: post
 title: "This is a title"

data/_includes/footer.html

@@ -1,5 +1,5 @@
-{% if site.theme_settings.katex %}
-<script src="{{ "/assets/js/katex_init.js" | prepend: site.baseurl }}"></script>
+{% if site.theme_settings.katex and page.id %}
+<script src="{{ "/assets/js/katex_init.js" | relative_url }}"></script>
 {% endif %}
 
 {% if site.theme_settings.footer_text %}

data/_includes/head.html

@@ -5,19 +5,19 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
 	<!-- CSS -->
-	<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
+	<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
 
 	<!--Favicon-->
-	<link rel="shortcut icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" type="image/x-icon">
+	<link rel="shortcut icon" href="{{ site.baseurl }}/{{ site.theme_settings.favicon }}" type="image/x-icon">
 
 	<!-- Canonical -->
-	<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+	<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
 
 	<!-- RSS -->
-	<link rel="alternate" type="application/atom+xml" title="{{ site.theme_settings.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+	<link rel="alternate" type="application/atom+xml" title="{{ site.theme_settings.title }}" href="{{ "/feed.xml" | relative_url }}" />
 
 	<!-- Font Awesome -->
-	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 
 	<!-- Google Fonts -->
 	{% if site.theme_settings.google_fonts %}
@@ -25,9 +25,9 @@
 	{% endif %}
 
 	<!-- KaTeX -->
-	{% if site.theme_settings.katex %}
-	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css">
-	<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js"></script>
+	{% if site.theme_settings.katex and page.id %}
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.css" integrity="sha384-BTL0nVi8DnMrNdMQZG1Ww6yasK9ZGnUxL1ZWukXQ7fygA1py52yPp9W4wrR00VML" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.js" integrity="sha384-y6SGsNt7yZECc4Pf86XmQhC4hG2wxL6Upkt9N1efhFxfh6wlxBH0mJiTE8XYclC1" crossorigin="anonymous"></script>
 	{% endif %}
 
 	<!-- Google Analytics -->

data/_includes/header.html

@@ -15,17 +15,35 @@
 	</div>
 	<nav class="site-nav">
 		<ul>
-			{% for page in site.pages %}
+			{% if site.theme_settings.site_navigation_sort %}
+				{% assign site_pages = site.pages | sort: site.theme_settings.site_navigation_sort %}
+			{% else %}
+				{% assign site_pages = site.pages %}
+			{% endif %}
+			{% for page in site_pages %}
 			{% if page.title and page.hide != true %}
 			<li>
-				<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">
+				<a class="page-link" href="{{ page.url | relative_url }}">
 					{{ page.title }}
 				</a>
 			</li>
 			{% endif %}
 			{% endfor %}
-			<!-- Social icons from Font Awesome, if enabled -->
+			<!-- Social icons from Font Awesome, if enabled  -->
 			{% include icons.html %}
+
+            <!-- Search bar -->
+            {% if site.theme_settings.search %}
+            <li>
+            <form action="{{ site.baseurl }}/search.html" method="get">
+                <input type="text" id="search-box" name="query" placeholder="Search" class="">
+                <button type="submit" class="">
+                    <i class="fa fa-fw fa-search"></i>
+                </button>
+            </form>
+            </li>
+            {% endif %}
 		</ul>
 	</nav>
+
 </header>

data/_includes/icons.html

@@ -1,7 +1,7 @@
 {% if site.theme_settings.rss %}
 <li>
-	<a href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" title="{{ site.theme_settings.str_rss_follow }}">
-		<i class="fa fa-fw fa-rss"></i>
+	<a href="{{ "/feed.xml" | relative_url }}" title="{{ site.theme_settings.str_rss_follow }}">
+		<i class="fas fa-fw fa-rss"></i>
 	</a>
 </li>
 {% endif %}
@@ -9,7 +9,7 @@
 {% if site.theme_settings.email_address %}
 <li>
 	<a href="mailto:{{ site.theme_settings.email_address }}" title="{{ site.theme_settings.str_email }}">
-		<i class="fa fa-fw fa-envelope"></i>
+		<i class="fas fa-fw fa-envelope"></i>
 	</a>
 </li>
 {% endif %}
@@ -17,7 +17,7 @@
 {% if site.theme_settings.behance %}
 <li>
 	<a href="https://www.behance.net/{{ site.theme_settings.behance }}" title="{{ site.theme_settings.str_follow_on }} Behance">
-		<i class="fa fa-fw fa-behance"></i>
+		<i class="fab fa-fw fa-behance"></i>
 	</a>
 </li>
 {% endif %}
@@ -25,7 +25,7 @@
 {% if site.theme_settings.bitbucket %}
 <li>
 	<a href="https://bitbucket.org/{{ site.theme_settings.bitbucket }}" title="{{ site.theme_settings.str_follow_on }} Bitbucket">
-		<i class="fa fa-fw fa-bitbucket"></i>
+		<i class="fab fa-fw fa-bitbucket"></i>
 	</a>
 </li>
 {% endif %}
@@ -33,7 +33,7 @@
 {% if site.theme_settings.dribbble %}
 <li>
 	<a href="https://dribbble.com/{{ site.theme_settings.dribbble }}" title="{{ site.theme_settings.str_follow_on }} Dribbble">
-		<i class="fa fa-fw fa-dribbble"></i>
+		<i class="fab fa-fw fa-dribbble"></i>
 	</a>
 </li>
 {% endif %}
@@ -41,7 +41,7 @@
 {% if site.theme_settings.facebook %}
 <li>
 	<a href="https://www.facebook.com/{{ site.theme_settings.facebook }}" title="{{ site.theme_settings.str_follow_on }} Facebook">
-		<i class="fa fa-fw fa-facebook"></i>
+		<i class="fab fa-fw fa-facebook"></i>
 	</a>
 </li>
 {% endif %}
@@ -49,7 +49,7 @@
 {% if site.theme_settings.flickr %}
 <li>
 	<a href="https://www.flickr.com/photos/{{ site.theme_settings.flickr }}" title="{{ site.theme_settings.str_follow_on }} Flickr">
-		<i class="fa fa-fw fa-flickr"></i>
+		<i class="fab fa-fw fa-flickr"></i>
 	</a>
 </li>
 {% endif %}
@@ -57,7 +57,7 @@
 {% if site.theme_settings.github %}
 <li>
 	<a href="https://github.com/{{ site.theme_settings.github }}" title="{{ site.theme_settings.str_follow_on }} GitHub">
-		<i class="fa fa-fw fa-github"></i>
+		<i class="fab fa-fw fa-github"></i>
 	</a>
 </li>
 {% endif %}
@@ -65,7 +65,7 @@
 {% if site.theme_settings.google_plus %}
 <li>
 	<a href="https://plus.google.com/{{ site.theme_settings.google_plus }}" title="{{ site.theme_settings.str_follow_on }} Google+">
-		<i class="fa fa-fw fa-google-plus"></i>
+		<i class="fab fa-fw fa-google-plus"></i>
 	</a>
 </li>
 {% endif %}
@@ -73,7 +73,7 @@
 {% if site.theme_settings.instagram %}
 <li>
 	<a href="http://instagram.com/{{ site.theme_settings.instagram }}" title="{{ site.theme_settings.str_follow_on }} Instagram">
-		<i class="fa fa-fw fa-instagram"></i>
+		<i class="fab fa-fw fa-instagram"></i>
 	</a>
 </li>
 {% endif %}
@@ -81,7 +81,7 @@
 {% if site.theme_settings.linkedin %}
 <li>
 	<a href="{{ site.theme_settings.linkedin }}" title="{{ site.theme_settings.str_follow_on }} LinkedIn">
-		<i class="fa fa-fw fa-linkedin"></i>
+		<i class="fab fa-fw fa-linkedin"></i>
 	</a>
 </li>
 {% endif %}
@@ -89,7 +89,7 @@
 {% if site.theme_settings.pinterest %}
 <li>
 	<a href="http://www.pinterest.com/{{ site.theme_settings.pinterest }}" title="{{ site.theme_settings.str_follow_on }} Pinterest">
-		<i class="fa fa-fw fa-pinterest"></i>
+		<i class="fab fa-fw fa-pinterest"></i>
 	</a>
 </li>
 {% endif %}
@@ -97,7 +97,7 @@
 {% if site.theme_settings.reddit %}
 <li>
 	<a href="https://www.reddit.com/user/{{ site.theme_settings.reddit }}" title="{{ site.theme_settings.str_follow_on }} Reddit">
-		<i class="fa fa-fw fa-reddit"></i>
+		<i class="fab fa-fw fa-reddit"></i>
 	</a>
 </li>
 {% endif %}
@@ -105,7 +105,7 @@
 {% if site.theme_settings.soundcloud %}
 <li>
 	<a href="https://soundcloud.com/{{ site.theme_settings.soundcloud }}" title="{{ site.theme_settings.str_follow_on }} SoundCloud">
-		<i class="fa fa-fw fa-soundcloud"></i>
+		<i class="fab fa-fw fa-soundcloud"></i>
 	</a>
 </li>
 {% endif %}
@@ -113,7 +113,7 @@
 {% if site.theme_settings.stack_exchange %}
 <li>
 	<a href="{{ site.theme_settings.stack_exchange }}" title="{{ site.theme_settings.str_follow_on }} Stack Exchange">
-		<i class="fa fa-fw fa-stack-exchange"></i>
+		<i class="fab fa-fw fa-stack-exchange"></i>
 	</a>
 </li>
 {% endif %}
@@ -121,7 +121,7 @@
 {% if site.theme_settings.steam %}
 <li>
 	<a href="http://steamcommunity.com/id/{{ site.theme_settings.steam }}" title="{{ site.theme_settings.str_follow_on }} Steam">
-		<i class="fa fa-fw fa-steam"></i>
+		<i class="fab fa-fw fa-steam"></i>
 	</a>
 </li>
 {% endif %}
@@ -129,7 +129,7 @@
 {% if site.theme_settings.tumblr %}
 <li>
 	<a href="http://{{ site.theme_settings.tumblr }}.tumblr.com/" title="{{ site.theme_settings.str_follow_on }} Tumblr">
-		<i class="fa fa-fw fa-tumblr"></i>
+		<i class="fab fa-fw fa-tumblr"></i>
 	</a>
 </li>
 {% endif %}
@@ -137,7 +137,7 @@
 {% if site.theme_settings.gitlab %}
 <li>
 	<a href="https://gitlab.com/{{ site.theme_settings.gitlab }}" title="{{ site.theme_settings.str_follow_on }} Gitlab">
-		<i class="fa fa-fw fa-gitlab"></i>
+		<i class="fab fa-fw fa-gitlab"></i>
 	</a>
 </li>
 {% endif %}
@@ -145,7 +145,7 @@
 {% if site.theme_settings.twitter %}
 <li>
 	<a href="https://twitter.com/{{ site.theme_settings.twitter }}" title="{{ site.theme_settings.str_follow_on }} Twitter">
-		<i class="fa fa-fw fa-twitter"></i>
+		<i class="fab fa-fw fa-twitter"></i>
 	</a>
 </li>
 {% endif %}
@@ -153,7 +153,7 @@
 {% if site.theme_settings.wordpress %}
 <li>
 	<a href="https://{{ site.theme_settings.wordpress }}.wordpress.com/" title="{{ site.theme_settings.str_follow_on }} WordPress">
-		<i class="fa fa-fw fa-wordpress"></i>
+		<i class="fab fa-fw fa-wordpress"></i>
 	</a>
 </li>
 {% endif %}
@@ -161,7 +161,15 @@
 {% if site.theme_settings.youtube %}
 <li>
 	<a href="https://www.youtube.com/user/{{ site.theme_settings.youtube }}" title="{{ site.theme_settings.str_follow_on }} YouTube">
-		<i class="fa fa-fw fa-youtube"></i>
+		<i class="fab fa-fw fa-youtube"></i>
+	</a>
+</li>
+{% endif %}
+
+{% if site.theme_settings.gitter %}
+<li>
+	<a href="https://gitter.im/{{ site.theme_settings.gitter }}" title="{{ site.theme_settings.str_follow_on }} Gitter">
+		<i class="fab fa-fw fa-gitter"></i>
 	</a>
 </li>
 {% endif %}

data/_includes/tags_list.html

@@ -2,7 +2,7 @@
 <footer>
   <div class="tags">
     {% for tag in include.tags %}
-    <a class="tag" href="{{site.baseurl}}/tags#{{tag}}">#{{tag}}</a>
+    <a class="tag" href="{{site.baseurl}}/tags#{{ tag | cgi_escape }}">#{{tag}}</a>
     {% endfor %}
   </div>
 </footer>

data/_layouts/home.html

@@ -15,7 +15,7 @@ layout: default
     <div class="post-teaser">
       <header>
         <h1>
-          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
+          <a class="post-link" href="{{ post.url | relative_url }}">
             {{ post.title }}
           </a>
         </h1>
@@ -25,7 +25,7 @@ layout: default
       </header>
       <div class="excerpt">
         {{ post.excerpt }}
-        <a class="button" href="{{ post.url | prepend: site.baseurl }}">
+        <a class="button" href="{{ post.url | relative_url }}">
           {{ site.theme_settings.str_continue_reading }}
         </a>
       </div>
@@ -36,13 +36,13 @@ layout: default
   {% if paginator.total_pages > 1 %}
   <div class="pagination">
     {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="button" >
+    <a href="{{ paginator.previous_page_path | relative_url | replace: '//', '/' }}" class="button" >
       <i class="fa fa-chevron-left"></i>
       {{ site.theme_settings.str_previous_page }}
     </a>
     {% endif %}
     {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="button" >
+    <a href="{{ paginator.next_page_path | relative_url | replace: '//', '/' }}" class="button" >
       {{ site.theme_settings.str_next_page }}
       <i class="fa fa-chevron-right"></i>
     </a>

data/_layouts/page.html

@@ -3,8 +3,8 @@ layout: default
 ---
 <article {% if page.feature-img %}class="feature-image"{% endif %}>
   <header style="background-image: url('{{ site.baseurl }}/{{ page.feature-img }}')">
-    <h1 class="title">{{ page.title }}</h1>
-    {% if page.subtitle %}<h2 class="subtitle">{{ page.subtitle }}</h3>{% endif %}
+    <h1 class="title">{{ page.feature-title | default: page.title }}</h1>
+    {% if page.subtitle %}<h2 class="subtitle">{{ page.subtitle }}</h2>{% endif %}
   </header>
   <section class="post-content">{{ content }}</section>
 </article>

data/_layouts/post.html

@@ -3,8 +3,8 @@ layout: default
 ---
 <article {% if page.feature-img %}class="feature-image"{% endif %}>
   <header style="background-image: url('{{ site.baseurl }}/{{ page.feature-img }}')">
-    <h1 class="title">{{ page.title }}</h1>
-    {% if page.subtitle %}<h2 class="subtitle">{{ page.subtitle }}</h3>{% endif %}
+    <h1 class="title">{{ page.feature-title | default: page.title }}</h1>
+    {% if page.subtitle %}<h2 class="subtitle">{{ page.subtitle }}</h2>{% endif %}
     <p class="meta">
       {{ page.date | date: "%B %-d, %Y" }}
       {% if page.author %} - {{ page.author }}{% endif %}

data/_layouts/tags.html

@@ -0,0 +1,31 @@
+---
+layout: page
+---
+
+{% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
+{% assign tag_words = site_tags | split:',' | sort %}
+
+<!-- cycles through tag list and creates subheader for each tag name -->
+{% for item in (0..site.tags.size) %}
+  {% unless forloop.last %}
+    {% capture this_word %}{{ tag_words[item] | strip_newlines }}{% endcapture %}
+    <h2 id="{{ this_word | cgi_escape }}" class="tag-title">
+      #{{ this_word }}
+    </h2>
+    <!-- lists all posts corresponding to specific tag -->
+    {% for post in site.tags[this_word] %}
+      {% if post.title != null %}
+        <div class="tagged-post">
+          <h3 class="title">
+            <a href="{{ post.url | relative_url }}">
+              {{ post.title }}
+            </a>
+          </h3>
+          <div class="meta">
+            {{ post.date | date: "%B %-d, %Y" }}
+          </div>
+        </div>
+      {% endif %}
+    {% endfor %}
+  {% endunless %}
+{% endfor %}

data/_sass/base/_variables.scss

@@ -1,33 +1,37 @@
 // Typography
-$font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
-$font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
-$font-size: 1.25em;
+$font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif !default;
+$font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif !default;
+$font-size: 1.25em !default;
 
 // Padding
-$padding-large: 20%;
-$padding-small: 5%;
-$padding-x-small: 3%;
+$padding-large: 20% !default;
+$padding-small: 5% !default;
+$padding-x-small: 3% !default;
 
 // Brand colours
-$brand-color: #fff;
-$background-color: #fff;
-$border-color: rgba(0, 0, 0, 0.1); // rgba recommended if using feature images
+$brand-color: #fff !default;
+$background-color: #fff !default;
+$border-color: rgba(0, 0, 0, 0.1) !default; // rgba recommended if using feature images
 
 // Typography colours
-$text-color: #383838;
-$link-color: #1ABC9C;
-$selection-color: #D4D4D4; // visible when highlighting text
+$text-color: #383838 !default;
+$link-color: #1ABC9C !default;
+$selection-color: #D4D4D4 !default; // visible when highlighting text
 
 // Tags color
-$tags-color: #b0b0b0;
+$tags-color: #b0b0b0 !default;
+
+//Search color
+$search-color: #999 !default;
 
 // Header colours
-$header-link-color: #383838;
+$header-link-color: #383838 !default;
 
 // Feature image for articles
-$feature-image-text-color: #fff;
-$feature-image-size: cover; // options include "cover", "contain", "auto"
+$feature-image-text-color: #fff !default;
+$feature-image-size: cover !default; // options include "cover", "contain", "auto"
 
 // Header description box
-$header-desc-background-color: #1ABC9C;
-$header-desc-text-color: #FFF;
+$header-desc-background-color: #1ABC9C !default;
+$header-desc-text-color: #FFF !default;
+$header-desc-link-color: #02453D !default;

data/_sass/includes/_header.scss

@@ -50,4 +50,40 @@
       }
     }
   }
+
+    /* --- Search form --- */
+    form {
+        border: 0;
+        border-bottom: 2px solid $search-color;
+        outline: 0;
+
+        *:focus {
+            outline: none;
+        }
+
+        input{
+            &[type=text] {
+                box-sizing: border-box;
+                border: 0;
+                outline: 0;
+                color: $search-color;
+            }
+
+            &::-moz-placeholder {
+                color: $search-color;
+                opacity: 1;
+            }
+
+            &:-ms-input-placeholder, &::-webkit-input-placeholder {
+                color: $search-color;
+            }
+        }
+
+        button {
+           border: none;
+           font-size: 0.9em;
+           background-color: $brand-color;
+           color: $search-color;
+        }
+    }
 }

data/_sass/layouts/_index.scss

@@ -12,6 +12,9 @@
 .call-out p:last-child {
   margin-bottom: 0;
 }
+.call-out a {
+  color: $header-desc-link-color
+}
 // Post listing
 .posts {
   .post-teaser {

data/_sass/layouts/_search.scss

@@ -0,0 +1,15 @@
+.search {
+    h1, h2, h3, h4, h5 {
+        margin-bottom: 0;
+    }
+    a.search-link {
+        &:hover {
+            text-decoration: none;
+            color: $text-color;
+        }
+    }
+    #not-found {
+      text-align: center;
+      font-weight: bold;
+    }
+}

data/_sass/type-theme.scss

@@ -11,6 +11,7 @@
 @import 'layouts/posts';
 @import 'layouts/index';
 @import 'layouts/tags';
+@import 'layouts/search';
 
 // Partials
 @import 'includes/header';

data/assets/js/katex_init.js

@@ -16,11 +16,12 @@ Array.prototype.forEach.call(elements, function(element) {
      if (element.type.indexOf('mode=display') != -1){
        katexElement.className += "math-display";
        textToRender = '\\displaystyle {' + textToRender + '}';
+       katex.render(textToRender, katexElement, {displayMode: true});
      } else {
        katexElement.className += "math-inline";
+       katex.render(textToRender, katexElement);
      }
 
-     katex.render(textToRender, katexElement);
      element.parentNode.insertBefore(katexElement, element);
   }
 });

data/assets/js/search.js

@@ -0,0 +1,93 @@
+(function () {
+    var SEARCH_BOX_ID = "search-box";
+    var NO_RESULTS_MESSAGE_ID = "not-found";
+    var SEARCH_RESULTS_CONTAINER_ID = "search-results";
+    var QUERY_VARIABLE_URL_STRING = "query";
+
+    function getQueryVariable(queryParam) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i = 0; i < vars.length; i++) {
+            var pair = vars[i].split("=");
+            var param = pair[0];
+            var value = pair[1];
+
+            if (param === queryParam) {
+                return decodeURIComponent(value.replace(/\+/g, "%20"));
+            }
+        }
+    }
+
+    function getSearchTerm() {
+      return getQueryVariable(QUERY_VARIABLE_URL_STRING);
+    }
+
+    function setSearchBoxValue(searchBoxValue) {
+      document.getElementById(SEARCH_BOX_ID).setAttribute("value", searchBoxValue);
+    }
+
+    function showNoResultsMessage() {
+      document.getElementById(NO_RESULTS_MESSAGE_ID).style.display = "block";
+    }
+
+    function setSearchResultsHTML(innerHTML) {
+      var searchResults = document.getElementById(SEARCH_RESULTS_CONTAINER_ID);
+      searchResults.innerHTML = innerHTML;
+    }
+
+    function createPostListingHTML(postItem) {
+      var headingHTML = "<h2><a  class='search-link' href='" + postItem.url + "''>" + postItem.title + "</a></h2>";
+      var metaHTML = "<div class='meta'>" + postItem.date + "</div>";
+      var descriptionHTML = "<p>" + postItem.content.substring(0, 150) + "...</p>";
+      return headingHTML + metaHTML + descriptionHTML;
+    }
+
+    function displaySearchResults(results, store) {
+        if (results.length) {
+            var postsListingHTML = "";
+            for (var i = 0; i < results.length; i++) {
+                var postItem = store[results[i].ref];
+                postsListingHTML += createPostListingHTML(postItem);
+            }
+            setSearchResultsHTML(postsListingHTML);
+        } else {
+          showNoResultsMessage();
+        }
+    }
+
+    function addPostToSearchIndex(lunrIndex, key, postJSON) {
+      lunrIndex.add({
+          "id": key,
+          "title": postJSON.title,
+          "author": postJSON.author,
+          "category": postJSON.category,
+          "content": postJSON.content
+      });
+    }
+
+    function search(searchTerm) {
+      setSearchBoxValue(searchTerm);
+
+      var lunrIndex = lunr(function () {
+          this.field("id");
+          this.field("title", {
+              boost: 10
+          });
+          this.field("author");
+          this.field("category");
+          this.field("content");
+      });
+
+      for (var key in window.store) {
+        addPostToSearchIndex(lunrIndex, key, window.store[key])
+      }
+
+      var results = lunrIndex.search(searchTerm);
+      displaySearchResults(results, window.store);
+    }
+
+    var searchTerm = getSearchTerm();
+    if (searchTerm) {
+      search(searchTerm);
+    }
+})();

data/search.html

@@ -0,0 +1,33 @@
+---
+layout: page
+title: Search
+hide: true
+---
+
+<div class="search">
+    <div id="search-results"></div>
+    <p id="not-found" style="display: none">
+        {{ site.theme_settings.str_search_no_results }}
+    </p>
+</div>
+
+
+<script>
+  window.store = {
+    {% for post in site.posts %}
+      "{{ post.url | slugify }}": {
+        "title": "{{ post.title | xml_escape }}",
+        "tags": "{{ post.tags | join: ', ' }}",
+        "date": "{{ post.date | date: '%B %-d, %Y' }}",
+        "author": "{{ post.author | xml_escape }}",
+        "category": "{{ post.category | xml_escape }}",
+        "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+        "url": "{{ site.baseurl }}/{{ post.url | xml_escape }}"
+      }
+      {% unless forloop.last %},{% endunless %}
+    {% endfor %}
+  };
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/0.7.1/lunr.min.js"></script>
+<script src="{{ site.baseurl }}/assets/js/search.js"></script>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-type
 version: !ruby/object:Gem::Version
-  version: '1.1'
+  version: '1.2'
 platform: ruby
 authors:
 - Rohan Chandra
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-17 00:00:00.000000000 Z
+date: 2019-07-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,56 +16,56 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.4'
+        version: 3.8.5
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.4'
+        version: 3.8.5
 - !ruby/object:Gem::Dependency
   name: jekyll-paginate
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.1'
+        version: 1.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.1'
+        version: 1.1.0
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.12'
+        version: 2.0.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.12'
+        version: 2.0.2
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: 12.3.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: 12.3.2
 description: 
 email:
 - hellorohan@outlook.com
@@ -86,6 +86,7 @@ files:
 - _layouts/home.html
 - _layouts/page.html
 - _layouts/post.html
+- _layouts/tags.html
 - _sass/base/_global.scss
 - _sass/base/_utility.scss
 - _sass/base/_variables.scss
@@ -97,14 +98,18 @@ files:
 - _sass/includes/_tag_list.scss
 - _sass/layouts/_index.scss
 - _sass/layouts/_posts.scss
+- _sass/layouts/_search.scss
 - _sass/layouts/_tags.scss
 - _sass/type-theme.scss
 - assets/css/main.scss
+- assets/favicon.ico
 - assets/img/avatar.png
 - assets/img/sample_feature_img.png
 - assets/img/sample_feature_img_2.png
 - assets/img/sample_feature_img_3.png
 - assets/js/katex_init.js
+- assets/js/search.js
+- search.html
 homepage: https://github.com/rohanchandra/type-theme
 licenses:
 - MIT
@@ -124,8 +129,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.8
+rubygems_version: 3.0.4
 signing_key: 
 specification_version: 4
 summary: A free and open-source Jekyll theme. Great for blogs and easy to customize.