Merge branch 'master' into dev-w3c

.gitignore

@@ -4,7 +4,9 @@ _site
 .jekyll-metadata
 .bundle
 .sass-cache
-Gemfile
 Gemfile.lock
 node_modules
 package.json
+*.gem
+*.gemspec
+.jekyll-cache

.ruby-version

@@ -0,0 +1 @@
+2.4.3

README.md

@@ -1,10 +1,13 @@
 <h1 align="center">
   <br>
-  <img src="/images/reverie-text.png" alt="Reverie" width="200">
+  <img src="/images/reverie-text.png" alt="Reverie" width="200"/>
   <br>
+  <p align="center">
+  <a href="https://ko-fi.com/Y8Y2QC9Y"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="Ko-fi" width="200"/></a>
+  </p>
 </h1>
 
-Reverie is a [Jekyll](https://jekyllrb.com/)-powered theme which is simple and opinionated. It's actually a fork of [jekyll-now](https://github.com/barryclark/jekyll-now) with some additional features and personal touches which I've implemented to suit my needs for [my blog](https://www.amitmerchant.com).
+Reverie is a [Jekyll](https://jekyllrb.com/)-powered theme which is simple and opinionated. It's actually a fork of [jekyll-now](https://github.com/barryclark/jekyll-now) with some additional features and personal touches which I've implemented to suit my needs for my blog.
 
 > [Theme demo](https://www.amitmerchant.com/reverie/introducing-reverie-jekyll-theme/)
 
@@ -18,23 +21,27 @@ This is a plug-and-play Jekyll theme best suited to use on [GitHub Pages](https:
 
 ## Features overview
 
+- Clean and minimal design
+- Single column post layout
 - Command-line free fork-first workflow, using GitHub.com to create, customize and post to your blog
-- Fully responsive and mobile optimized base theme
+- Fully responsive and mobile optimized theme
 - Sass/Coffeescript support using Jekyll 2.0
 - Free hosting on your GitHub Pages user site
-- All the SEO goodies comes in-built
+- All the SEO goodies come built-in
 - Markdown blogging
+- Supports [Pullquotes](https://en.wikipedia.org/wiki/Pull_quote)
 - Syntax highlighting using Pygments
     - [Dracula syntax theme](https://draculatheme.com/) included
 - Disqus commenting
+- Social media icons
 - Google Analytics integration
 - Fuzzy search across blog posts
-- Pagination of posts works out-of-the-box.
+- Blog with pagination
 - Categorize posts out-of-the box
 - RSS Feed
-- In-built sitemap
+- Built-in sitemap
 
-> <p><i>Like this theme?</i> Become a patreon to support my opensource work <p>
+> <p><i>Like this theme?</i> Become a patreon to support my open source work <p>
 > <a href="https://www.patreon.com/amitmerchant"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160"></a>
 
 ## Using Reverie on GitHub Pages
@@ -43,15 +50,15 @@ This is a plug-and-play Jekyll theme best suited to use on [GitHub Pages](https:
 
 Fork this repository, then rename the repository to `yourgithubusername.github.io`.
 
-Alternatively, you can use [`Use this template`](https://github.com/amitmerchant1990/reverie/generate) button if you want to create a repository with a clean commit history which will use Reverie as a template.
+Alternatively, you can click the [`Use this template`](https://github.com/amitmerchant1990/reverie/generate) button if you want to create a repository with a clean commit history which will use Reverie as a template.
 
-Your Jekyll blog will often be viewable immediately at <https://yourgithubusername.github.io> (if it's not, you can often force it to build by completing step 2.
+Your Jekyll blog will often be viewable immediately at <https://yourgithubusername.github.io> (if it's not, you can often force it to build by completing step 2).
 
 ### 2. Customize and view your site
 
 Enter your site name, description, avatar and many other options by editing the `_config.yml` file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here.
 
-Making a change to `_config.yml` (or any file in your repository) will force GitHub Pages to rebuild your site with jekyll. Your rebuilt site will be viewable a few seconds later at <https://yourgithubusername.github.io> - if not, give it ten minutes as GitHub suggests and it'll appear soon.
+Making a change to `_config.yml` (or any file in your repository) will force GitHub Pages to rebuild your site with Jekyll. Your rebuilt site will be viewable a few seconds later at <https://yourgithubusername.github.io> - if not, give it ten minutes as GitHub suggests and it'll appear soon.
 
 ### 3. Publish your first blog post
 
@@ -79,7 +86,7 @@ The categorized content can be shown over this URL: <https://yourgithubusername.
 
 ## Pagination
 
-Pagination of posts in Reverie works out-of-the-box. You only need to specify number of posts you want on a single page in `_config.yml` and Reverie will take care of the rest.
+Pagination of posts in Reverie works out-of-the-box. You only need to specify the number of posts you want on a single page in `_config.yml` and Reverie will take care of the rest.
 
 ```yml
 paginate: 6
@@ -87,11 +94,14 @@ paginate: 6
 
 ## RSS
 
-The generated [RSS feed](https://en.wikipedia.org/wiki/RSS) of your blog can be found at <https://yourgithubusername.github.io/feed>. You can see the example RSS feed over [here](https://www.amitmerchant.com/feed).
+The generated [RSS feed](https://en.wikipedia.org/wiki/RSS) of your blog can be found at <https://yourgithubusername.github.io/feed>. You can see the example RSS feed over [here](https://www.amitmerchant.com/reverie/feed.xml).
 
 ## Sitemap
 
-The generated sitemap of your blog can be found at <https://yourgithubusername.github.io/sitemap>. You can see the example sitemap feed over [here](https://www.amitmerchant.com/sitemap).
+The generated sitemap of your blog can be found at <https://yourgithubusername.github.io/sitemap>. You can see the example sitemap feed over [here](https://www.amitmerchant.com/reverie/sitemap).
+
+## Emailware
+Reverie is an [emailware](https://en.wiktionary.org/wiki/emailware). Meaning, if you liked using this theme or it has helped you in any way, I'd like you send me an email at <bullredeyes@gmail.com> about anything you'd want to say about this software. I'd really appreciate it!
 
 ## The name?
 

_config.yml

@@ -12,7 +12,7 @@ author: Amit Merchant
 description: An elegant Jekyll theme
 
 # URL of your avatar or profile pic (you could use your GitHub profile pic)
-avatar: /reverie/images/reverie.png
+avatar: /images/reverie.png
 
 #
 # Flags below are optional
@@ -41,7 +41,7 @@ footer-links:
 disqus: 
 
 # Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking
-google_analytics: UA-43339302-4
+google_analytics: UA-43339302-11
 
 # Your website URL (e.g. http://amitmerchant1990.github.io or http://www.amitmerchant.com)
 # Used for Sitemap.xml and your RSS feed

_includes/meta.html

@@ -20,7 +20,7 @@
     <meta property="og:image" content="{{ site.url }}{{ page.image }}"/>
     <meta property="twitter:image" content="{{ site.url }}{{ page.image }}"/>
     {% else %}
-    <meta property="og:image" content="https://avatars0.githubusercontent.com/u/3647841?v=3&s=460"/>
+    <meta property="og:image" content="{{ site.url }}{{ site.avatar }}"/>
-    <meta property="twitter:image" content="https://avatars0.githubusercontent.com/u/3647841?v=3&s=460"/>
+    <meta property="twitter:image" content="{{ site.url }}{{ site.avatar }}"/>
     {% endif %}
     <meta property="og:site_name" content="Amit Merchant - Software Engineer"/>

_includes/pullquote.html

@@ -0,0 +1 @@
+{{ include.quote }}<span data-pullquote="{{ include.quote }}"></span>

_layouts/default.html

@@ -5,17 +5,12 @@
     {% seo title=false %}
     {% include meta.html %}
 
-    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" />
+    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/style.css" />
     <link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
     <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
 
     <meta name="theme-color" content="#000000">
-    <link rel="icon" type="image/png" sizes="32x32" href="/reverie/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/images/favicon-32x32.png">
-    <script type="text/javascript">
-      var host = "www.amitmerchant.com";
-      if ((host == window.location.host) && (window.location.protocol != "https:"))
-          window.location.protocol = "https";
-    </script>
   </head>
 
   <body>
@@ -33,6 +28,7 @@
 
             <nav>
               <a href="{{ site.baseurl }}/">Home</a>
+              <a href="{{ site.baseurl }}/getting-started">Getting Started</a>
               <a href="{{ site.baseurl }}/search">Search</a>
               <a href="{{ site.baseurl }}/about">About</a>
             </nav>

_pages/categories.md

@@ -16,7 +16,7 @@ title: Categories
     <a name="{{ category_name | slugize }}"></a>
     {% for post in site.categories[category_name] %}
     <article class="archive-item">
-      <h4><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></h4>
+      <h4><a href="{{ site.baseurl }}{{ post.url }}">{% if post.title and post.title != "" %}{{post.title}}{% else %}{{post.excerpt |strip_html}}{%endif%}</a></h4>
     </article>
     {% endfor %}
   </div>

_pages/getting-started.md

@@ -0,0 +1,51 @@
+---
+layout: page
+title: Getting started with Reverie
+permalink: /getting-started/
+---
+
+### Step 1) Fork Reverie to your User Repository
+
+Fork [this repository](https://github.com/amitmerchant1990/reverie), then rename the repository to `yourgithubusername.github.io`.
+
+Alternatively, you can use [Use this template](https://github.com/amitmerchant1990/reverie/generate) button if you want to create a repository with a clean commit history which will use Reverie as a template.
+
+Your Jekyll blog will often be viewable immediately at <https://yourgithubusername.github.io> (if it's not, you can often force it to build by completing step 2)
+
+### Step 2) Customize and view your site
+
+Enter your site name, description, avatar and many other options by editing the `_config.yml` file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here.
+
+Making a change to `_config.yml` (or any file in your repository) will force GitHub Pages to rebuild your site with jekyll. Your rebuilt site will be viewable a few seconds later at <https://yourgithubusername.github.io> - if not, give it ten minutes as GitHub suggests and it'll appear soon.
+
+### Step 3) Publish your first blog post
+
+Create a new file called `/_posts/2019-2-13-Hello-World.md` to publish your first blog post. That's all you need to do to publish your first blog post! This [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) might come in handy while writing the posts.
+
+> You can add additional posts in the browser on GitHub.com too! Just hit the <kbd>Create new file</kbd> button in `/_posts/` to create new content. Just make sure to include the [front-matter](http://jekyllrb.com/docs/frontmatter/) block at the top of each new blog post and make sure the post's filename is in this format: year-month-day-title.md
+
+## Using Categories in Reverie
+
+You can categorize your content based on `categories` in Reverie. For this, you just need to add `categories` in front matter like below:
+
+For adding single category:
+
+```md
+categories: JavaScript
+```
+
+For adding multiple categories:
+
+```md
+categories: [PHP, Laravel]
+```
+
+The contegorized content can be shown over this URL: <https://yourgithubusername.github.io/categories/>
+
+## RSS
+
+The generated [RSS feed](https://en.wikipedia.org/wiki/RSS) of your blog can be found at <https://yourgithubusername.github.io/feed>. You can see the example RSS feed over [here](https://www.amitmerchant.com/reverie/feed).
+
+## Sitemap
+
+The generated sitemap of your blog can be found at <https://yourgithubusername.github.io/sitemap>. You can see the example sitemap feed over [here](https://www.amitmerchant.com/reverie/sitemap).

_pages/search.md

@@ -9,7 +9,7 @@ permalink: /search/
     <ul id="results-container"></ul>
 </div>
 
-<script src="{{ site.baseurl }}/js/simple-jekyll-search.min.js" type="text/javascript"></script>
+<script src="{{ site.baseurl }}/assets/simple-jekyll-search.min.js" type="text/javascript"></script>
 
 <script>
     SimpleJekyllSearch({

_posts/2019-02-13-introducing-reverie-jekyll-theme.md

@@ -4,7 +4,7 @@ title: Introducing Reverie - A ridiculously elegant Jekyll theme
 categories: [Miscellaneous, Jekyll]
 ---
 
-[Reverie](https://github.com/amitmerchant1990/reverie) is a [Jekyll](https://jekyllrb.com/)-powered theme which is simple and opinionated. It's actually a fork of [jekyll-now](https://github.com/barryclark/jekyll-now) with some additional features and personal touches which I've implemented to suit my needs for [my blog](https://www.amitmerchant.com).
+[Reverie](https://github.com/amitmerchant1990/reverie) is a [Jekyll](https://jekyllrb.com/)-powered theme which is simple and opinionated. It's actually a fork of [jekyll-now](https://github.com/barryclark/jekyll-now) with some additional features and personal touches which I've implemented to suit my needs for my blog.
 
 This is a plug-and-play Jekyll theme which you can use on GitHub Pages without even setting up a local environment.
 
@@ -29,7 +29,7 @@ This is a plug-and-play Jekyll theme which you can use on GitHub Pages without e
 - In-built sitemap
 
 <div style="text-align: center;">
-  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DK2QJ&placement=notepadjsorg" id="_carbonads_js"></script>
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7D6KJY&placement=wwwamitmerchantcom" id="_carbonads_js"></script>
 </div>
 
 ## Using Reverie on GitHub Pages
@@ -74,11 +74,11 @@ The contegorized content can be shown over this URL: <https://yourgithubusername
 
 ## RSS
 
-The generated [RSS feed](https://en.wikipedia.org/wiki/RSS) of your blog can be found at <https://yourgithubusername.github.io/feed>. You can see the example RSS feed over [here](https://www.amitmerchant.com/feed).
+The generated [RSS feed](https://en.wikipedia.org/wiki/RSS) of your blog can be found at <https://yourgithubusername.github.io/feed>. You can see the example RSS feed over [here](https://www.amitmerchant.com/reverie/feed).
 
 ## Sitemap
 
-The generated sitemap of your blog can be found at <https://yourgithubusername.github.io/sitemap>. You can see the example sitemap feed over [here](https://www.amitmerchant.com/sitemap).
+The generated sitemap of your blog can be found at <https://yourgithubusername.github.io/sitemap>. You can see the example sitemap feed over [here](https://www.amitmerchant.com/reverie/sitemap).
 
 ## License
 

_posts/2019-08-08-no-title-posts.md

@@ -0,0 +1,6 @@
+---
+layout: post
+title: ""
+categories: Miscellaneous
+---
+Sometimes, your post just stands for itself and doesn't need a title. And that's fine, too!

_posts/2019-12-11-pullquotes.md

@@ -0,0 +1,14 @@
+---
+layout: post
+title:  Pullquotes
+categories: [HTML,Code]
+excerpt: In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element, serving to entice readers into the article or to highlight a key topic.
+---
+
+In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element, serving to entice readers into the article or to highlight a key topic. {% include pullquote.html quote="It is typically placed in a larger or distinctive typeface and on the same page." %} Pull quotes are often used in magazine and newspaper articles, annual reports, and brochures, as well as on the web. They can add visual interest to text-heavy pages with few images or illustrations.
+
+Placement of a pull quote on a page may be defined in a publication's or website's style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown. Because the pull quote invites the reader to read about the highlighted material, the pull quote should appear before the text it cites and, generally, fairly close to it.
+
+Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication's house style, pull quotes may be abbreviated for space or paraphrased for clarity, with or without indication.
+
+A disadvantage of pull quotes as a design element is that they can disrupt the reading process of readers invested in reading the text sequentially by drawing attention to ghost fragments out of context. At the other extreme, when pull quotes are used to break up what would otherwise be a formless wall of text, pull quote can serve as visual landmarks to help the reader maintain a sense of sequence and place.

_posts/2019-8-12-code-snippets.md

@@ -0,0 +1,42 @@
+---
+layout: post
+title:  Code snippets in a blog post
+categories: [HTML,Code]
+---
+
+This post demonstrate the use of code snippets in the theme. The code snippets are powered by [Pygments](http://pygments.org/) and the code theme that is been used in Reverie is called [Draula](https://draculatheme.com/).
+
+This is a raw snippet:
+
+```
+hello world
+123
+This is a text snippet
+```
+
+This is a PHP snippet:
+
+```php
+<?php
+    echo 'Hello, World!';
+?>
+```
+
+This is a JavaScript snippet:
+
+```js
+const add = (a, b) => a + b
+const minus = (a, b) => a - b
+
+console.log(add(100,200))  // 300
+console.log(minus(100,200))  // -100
+```
+
+This is a Python snippet:
+
+```python
+def say_hello():
+    print("hello world!")
+
+say_hello()   // "hello world!"
+```

assets/style.scss

@@ -156,6 +156,26 @@ table tr td :last-child {
   color: #222;
 }
 
+span[data-pullquote] {
+  display: block;
+
+  @include mobile {
+    display: none;
+  }
+}
+
+span[data-pullquote]:before {
+  content: attr(data-pullquote);
+  float: right;
+  width: 200px;
+  margin: 0 0 0.5em 30px;
+  padding: 0 -5% 0 0;
+  font-size: 1.3em;
+  font-style: italic;
+  color: green;
+  text-align: center;
+}
+
 a {
   color: $blue;
   text-decoration: none;
@@ -292,6 +312,11 @@ p > img {
   font-weight: 300;
   font-size: 28px;
   letter-spacing: 1px;
+  text-align: left;
+
+  @include mobile {
+    text-align: center;
+  }
 }
 
 .site-description {

index.html

@@ -5,13 +5,13 @@ layout: default
 <div class="posts">
   {% for post in paginator.posts %}
     <article class="post">
+      <a href="{{ site.baseurl }}{{ post.url }}">
+        <h1>{{ post.title }}</h1>
 
-      <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
+        <div>
-
+          <p class="post_date">{{ post.date | date: "%B %e, %Y" }}</p>
-      <div>
+        </div>
-        <p class="post_date">{{ post.date | date: "%B %e, %Y" }}</p>
+      </a>
-      </div>
-
       <div class="entry">
         {{ post.excerpt }}
       </div>
@@ -33,7 +33,7 @@ layout: default
       {% if page == paginator.page %}
         <span class="webjeda">{{ page }}</span>
       {% elsif page == 1 %}
-        <a href="/">{{ page }}</a>
+        <a href="{{ '/' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
       {% else %}
         <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
       {% endif %}

search.json

@@ -4,7 +4,7 @@
   {% for post in site.posts %}
     {
 
-      "title"    : "{{ post.title | escape }}",
+      "title"    : "{% if post.title != "" %}{{ post.title | escape }}{% else %}{{ post.excerpt | strip_html |  escape | strip }}{%endif%}",
       "url"      : "{{ site.baseurl }}{{ post.url }}",
       "category" : "{{ post.categories | join: ', '}}",
       "date"     : "{{ post.date | date: "%B %e, %Y" }}"