Implement comments with Cusdis

README.md

@@ -18,6 +18,7 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 * 🖋 Nice fonts: [Font Awesome](https://fontawesome.com/), [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro), [Pacifico](https://fonts.google.com/specimen/Pacifico?selection.family=Pacifico) 
 * Seo Tags: [Jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
 * 🛠 Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)
+* 💡 Light and dark theme supported
 * Find free of rights images on [pexels](https://www.pexels.com/)
 
 > [Demo Site](https://sylhare.github.io/Type-on-Strap/)
@@ -44,7 +45,7 @@ Check out this tutorial: [Use as Ruby Gem](https://github.com/Sylhare/Type-on-St
 2. Install [Jekyll](https://jekyllrb.com/docs/installation/): `gem install jekyll`, check [#1](https://github.com/Sylhare/Type-on-Strap/issues/1) if you have a problem.
 3. Install the theme's dependencies: `bundle install`
 4. Customize the theme
-	- Github Page: [update `_config.yml`](https://github.com/Sylhare/Type-on-Strap#site-configuration)
+	- GitHub Page: [update `_config.yml`](https://github.com/Sylhare/Type-on-Strap#site-configuration)
 5. Run the Jekyll server: `bundle exec jekyll serve`
 
 ## Structure
@@ -87,7 +88,7 @@ If a variable in this document is marked as "optional", disable the feature by r
 
 ### Site configuration
 
-Configure Jekyll as your own blog or with a "baseurl" in in `_config.yml`:
+Configure Jekyll as your own blog or with a "baseurl" in `_config.yml`:
 
 Jekyll website *without* a "baseurl" (such as a GitHub Pages website for a given username):
 
@@ -117,9 +118,12 @@ title: My Jekyll Blog                 # Name of website
 avatar: assets/img/triangle.png       # Path of avatar image, to be displayed in the theme's header
 description: My blog posts            # Short description, primarily used by search engines
 favicon: assets/favicon.ico           # Icon displayed in the tab
+color_theme: auto                     # color theme auto, dark or light
 ```
 
 You can also customize the seo tags default option following the jekyll-seo-tag plugin [documentation](http://jekyll.github.io/jekyll-seo-tag/advanced-usage/).
+The color theme can be set to dark or light (customize it in _variables.scss_). 
+Using _auto_ you'll have a tiny icon in the navbar allowing the use to manually switch from dark to light theme.
 
 ### Theme customization 🎨
 
@@ -140,7 +144,7 @@ If you don't want anything, replace the value by `" "`.
 Localization string is a way to quickly change the template language for text like *Next Post* or *Follow on*, ...
 You can find all the properties in `_data/language.yml`.
 
-By default it is in english, but you can easily add your own language.
+By default, it is in english, but you can easily add your own language.
 
 ### Google Analytics
 
@@ -151,7 +155,9 @@ to `_config.yml` like so:
 google_analytics: UA-NNNNNNNN-N
 ```
 
-### Comments (via Disqus)
+### Comments 
+
+#### Disqus
 
 Optionally, if you have a [Disqus](https://disqus.com/) account, you can show a 
 comments section below each post.
@@ -163,12 +169,23 @@ to your project's `_config.yml` file:
 disqus_shortname: my_disqus_shortname
 ```
 
+#### Cusdis
+
+[Cusdis](https://cusdis.com/) is an open source alternative to Disqus.
+You can read more about it in the [documentation](https://cusdis.com/doc#/)
+
+To enable it, set your cusdis name in `_config.yml`:
+
+```yaml
+cusdis_app_id: my_data-app-id                                     
+```
+
 ### Math typesetting with KateX
 
 When KateX is set in `_config.yml`:
 
 ```yml
-katex: true # to Enable it
+katex: true # to enable it
 ```
 
 You can then wrap math expressions with `$$` signs in your posts and make sure you have set the `katex` variable 
@@ -254,7 +271,7 @@ Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/po
 
 #### Layout: Post
 
-This are the basic features you can use with the  `post` layout.
+These are the basic features you can use with the `post` layout.
 
 ```yml
 
@@ -305,7 +322,7 @@ some text in the excerpt
 ... rest of the text not shown in the excerpt ...
 ```
 
-The html is stripped out of the excerpt so it only display text.
+The html is stripped out of the excerpt, so it only displays text.
 
 #### Image aligner
 
@@ -315,8 +332,8 @@ To easily add align images side by side in your article using the `aligner.html`
 {% include aligner.html images="path/to/img1.png,path/to/img2.png,path/to/img3.png" column=3 %}
 ```
 
-Use it in any markdown file. There are two fields in the include you need to look into:
-  - _images_: Takes a string separated with `,` of all the images path. 
+Use it in any markdown file. There are two fields in the _include_ you need to look into:
+  - _images_: Takes a string separated with `,` of all the images' path. 
     - It by default look into `assets/img/` so give the path from there.
   - _column_: (OPTIONAL) Set the number of column you want your imaged displayed in.
     - default is 2 columns

_config.yml

@@ -27,6 +27,8 @@ mermaid: true                                           # Enable mermaid-js for
 google_analytics:                                       # Tracking ID, e.g. "UA-000000-01"
 cookie_consent: false                                   # To respect the usage of cookies
 disqus_shortname:                                       # Your discus shortname for comments
+cusdis_app_id:                                          # Your cusdis data-app-id
+color_theme: auto                                       # auto, dark or light
 
 # PAGINATION
 paginate: 5
@@ -40,7 +42,7 @@ collections:
 
 # BUILD SETTINGS
 plugins: [jekyll-paginate, jekyll-seo-tag, jekyll-feed]
-exclude: [".jekyll-cache", ".idea", "vendor/*", "assets/node_modules"]
+exclude: [".jekyll-cache", ".idea", "vendor/*", "assets/node_modules/*"]
 
 # theme: type-on-strap                                  # if using the theme as a jekyll theme gem
 remote_theme: sylhare/Type-on-Strap                     # If using as a remote_theme in github

_includes/cusdis.html

@@ -0,0 +1,9 @@
+<div class="comments" id="cusdis"
+  data-host="https://cusdis.com"
+  data-app-id="{{ site.cusdis_app_id }}"
+  data-page-id="{{ page.relative_path }}"
+  data-page-url="{{ page.url }}"
+  data-page-title="{{ page.title }}"
+></div>
+
+<script async src="https://cusdis.com/js/cusdis.es.js"></script>

_includes/head.html

@@ -2,6 +2,19 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5">
 
+    <!-- Theme Mode-->
+    {% if site.color_theme == 'auto' %}
+    <script>
+        const isAutoTheme = true;
+        document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme'))
+    </script>
+    {% else %}
+    <script>
+        const isAutoTheme = false;
+        document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}")
+    </script>
+    {% endif %}
+
     <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
 
@@ -13,7 +26,7 @@
 
     <!-- RSS -->
     <link rel="alternate" type="application/atom+xml" title="{{ site.title | default: 'Title' }}" href="{{ 'feed.xml' | absolute_url }}"/>
-    
+
     {% if page.bootstrap %}
     <!-- Bootstrap-4.1.3 isolation CSS -->
     <link rel="stylesheet" type="text/css" href="{{ '/assets/css/vendor/bootstrap-iso.min.css' | relative_url }}">

_includes/navbar.html

@@ -34,6 +34,11 @@
             {% endunless %}
             {% assign name_page = page.title | append: name_page %}
         {% endfor %}
+
+        {% if site.color_theme == 'auto' %}
+        <li class="separator"> | </li>
+        <li><a id="theme-toggle" title="{{ page.title }} "aria-label="{{ page.title }}" onclick="themeToggle()"></a></li>
+        {% endif %}
     </ul>
 
 	</nav>

_layouts/custom.html

@@ -4,10 +4,12 @@
 
 <article {% if page.feature-img %}class="feature-image" {% endif %} style="padding:0;">
     <header id="main" style="background-image: url('{{ page.feature-img | relative_url }}')">
+        {% unless page.hide_title %}
         <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
-        {% if include.is_post %}
+        {% endunless %}
+        {% if page.is_post %}
         {% include post_info.html author=page.author date=page.date %}
-        {% else %}
+        {% endif %}
     </header>
     <section class="post-content">{{ content }}</section>
 
@@ -24,7 +26,8 @@ <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
 
 <!-- Disqus -->
 {% if site.disqus_shortname or site.theme_settings.disqus_shortname %}
-{% include disqus.html %}{% endif %}
+{% include disqus.html %}
+{% endif %}
 
 <!-- Post navigation -->
 {% if site.post_navigation %}

_layouts/post.html

@@ -32,6 +32,9 @@ <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
 
 </article>
 
+<!-- Cusdis -->
+{% if site.cusdis_app_id %}{% include cusdis.html %}{% endif %}
+
 <!-- Disqus -->
 {% if site.disqus_shortname or site.theme_settings.disqus_shortname %}
 {% include disqus.html %}{% endif %}

_posts/2017-09-17-Use-Bootstrap.md

@@ -0,0 +1,115 @@
+---
+layout: post
+title: "Bootstrap"
+bootstrap: true
+tags: [bootstrap]
+---
+
+This theme is compatible with Bootstrap if you choose to use it in your pages or posts.
+Here is a little demo with a code snippet, look at the source to see how the HTML and markdown get tangled.
+
+## Use bootstrap
+
+Add some custom Bootstrap in the custom layout!
+
+<img src="https://startbootstrap.com/assets/img/sb-logo.svg" alt="startbootstrap" width="500">
+
+### Snippet example
+
+If you are new to Bootstrap you can  always check the [documentation](https://getbootstrap.com/docs/4.1/getting-started/introduction/).<br>
+Here is an example from [startbootstrap.com](https://startbootstrap.com/snippets/portfolio-two-column).
+
+<!-- Page Content -->
+<div class="container">
+
+  <div class="row">
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project One</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Two</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Three</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Four</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Five</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+      <div class="card h-100">
+        <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="#">Project Six</a>
+          </h4>
+          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /.row -->
+
+</div>
+<!-- /.container -->
+
+### Mix it with Markdown
+
+All the above was custom HTML with Bootstrap.
+You can also mix it up with some markdown.
+
+You can use the bootstrap's build in javascript API to control your event.
+Here is a code snippet for the [documentation](https://getbootstrap.com/docs/4.0/getting-started/javascript/):
+
+```js
+$('#myModal').on('show.bs.modal', function (e) {
+    if (!data) return e.preventDefault() // stops modal from being shown
+})
+```
+
+That's just for demo though, you would need to properly integrate your javascript in your page.
+Usually you would put any custom javascript script in the _assets_ folder under js and reference it in your page from there.
+
+So try it out using the `bootstrap: true` flag! 😉