simple-material 0.0.4

data/_includes/nav_footer.html

@@ -0,0 +1,23 @@
+{% if site.navigation_footer %}
+{% if site.menu_main %}
+<nav>
+  <ul class="sitemap">
+    {% for item in site.menu_main %}
+
+    {% if item.url contains '://' %}
+    {% assign url = item.url %}
+    {% else %}
+    {% assign url = item.url | relative_url %}
+    {% endif %}
+
+    {% if item.title %}
+    <li>
+      <a class="muted" href="{{ url }}">{{ item.title }}</a>
+    </li>
+    {% endif %}
+
+    {% endfor %}
+  </ul>
+</nav>
+{% endif %}
+{% endif %}

data/_includes/nav_social.html

@@ -0,0 +1,71 @@
+{% if site.menu_social.dribbble %}
+<a href="https://dribbble.com/{{ site.menu_social.dribbble }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-dribbble-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.email %}
+<a href="mailto:{{ site.menu_social.email }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fas fa-envelope-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.facebook %}
+<a href="https://www.facebook.com/{{ site.menu_social.facebook }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-facebook-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.flickr %}
+<a href="https://www.flickr.com/{{ site.menu_social.flickr }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-flickr" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.github %}
+<a href="https://github.com/{{ site.menu_social.github }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-github-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.instagram %}
+<a href="https://instagram.com/{{ site.menu_social.instagram }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-instagram-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.linkedin %}
+<a href="https://www.linkedin.com/in/{{ site.menu_social.linkedin }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-linkedin" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.pinterest %}
+<a href="https://www.pinterest.com/{{ site.menu_social.pinterest }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-pinterest-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.twitter %}
+<a href="https://www.twitter.com/{{ site.menu_social.twitter }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-twitter-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.stackoverflow %}
+<a href="http://stackoverflow.com/users/{{ site.menu_social.stackoverflow }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-stack-overflow" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.youtube %}
+<a href="https://youtube.com/{{ site.menu_social.youtube }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-youtube-square" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}
+
+{% if site.menu_social.playconsole %}
+<a href="https://play.google.com/store/apps/dev?id={{ site.menu_social.playconsole }}" rel="noopener" target="_blank" style="padding-right: 4px;">
+  <i class="fab fa-google-play" style="color: var(--mdc-theme-on-surface)"></i>
+</a>
+{% endif %}

data/_includes/pullquote.html

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

data/_includes/widget_feedback.html

@@ -0,0 +1,15 @@
+{% if site.github %}
+<section class="mdc-card mdc-card--outlined">
+  <div class="mdc-card__content">
+    <p>
+      This page is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a> on GitHub{% if site.github.license.name %} under the {{ site.github.license.name }}{% endif %}.
+    </p>
+    {% unless site.github.private %}
+    <p>
+      Is there a problem? You can <a href="{{ site.github.issues_url }}" target="
+      ">submit an issue</a> or help us <a href="{{ site.github.repository_url }}/edit/{{ site.github.source.branch }}/{{ page.path }}" target="_blank">improve this page</a>.
+    </p>
+    {% endunless %}
+  </div>
+</section>
+{% endif %}

data/_includes/widget_github.html

@@ -0,0 +1,28 @@
+{% if site.menu_social.github and page.github_stats %}
+<section class="mdc-card mdc-card--outlined">
+  <div class="mdc-card__content">
+    <h2>Coding Stats</h2>
+    <p>
+      Summary of my recent activity on GitHub where I contribute to open-source projects and manage my workflow.
+    </p>
+    <div class="calendar"></div>
+  </div>
+  <div class="mdc-card__actions">
+    <div class="mdc-card__action-icons">
+      <a class="mdc-button mdc-card__action mdc-card__action--button" href="https://github.com/{{ site.menu_social.github }}/">
+        <span class="mdc-button__ripple"></span>
+        <span class="mdc-button__label">Visit my profile</span>
+      </a>
+    </div>
+  </div>
+</section>
+
+<script type="application/javascript">
+  (function() {
+    // Load GitHub contributions calendar
+    new GitHubCalendar(".calendar", "{{ site.menu_social.github }}", {
+      responsive: true
+    });
+  })();
+</script>
+{% endif %}

data/_includes/widget_goodreads.html

@@ -0,0 +1,50 @@
+{% if site.menu_social.goodreads %}
+<style type="text/css" media="screen">
+  .gr_custom_container_1614243637 {
+    /* customize your Goodreads widget container here*/
+    background-color: transparent;
+    color: var(--mdc-theme-on-surface);
+  }
+
+  .gr_custom_container_1614243637 * {
+    color: var(--mdc-theme-on-surface) !important;
+  }
+
+  .gr_custom_each_container_1614243637 {
+    /* customize each individual book container here */
+    border: 1px solid var(--mdc-theme-border);
+    border-radius: var(--card-radius);
+    width: 100%;
+    clear: both;
+    margin-bottom: 8px;
+    padding: 8px;
+    overflow: auto;
+    font-weight: bold;
+  }
+
+  .gr_custom_book_container_1614243637 {
+    /* customize your book covers here */
+    overflow: hidden;
+    height: 60px;
+    float: left;
+    margin-right: 4px;
+    width: 39px;
+  }
+
+  .gr_custom_author_1614243637 {
+    /* customize your author names here */
+    font-weight: 300 !important;
+  }
+
+  .gr_custom_rating_1614243637 {
+    /* customize your rating stars here */
+    float: right;
+  }
+</style>
+
+<section>
+  <script
+    src="https://www.goodreads.com/review/custom_widget/{{ site.menu_social.goodreads }}.Recently%20Read%20Books?cover_position=left&cover_size=small&num_books=5&order=d&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=0&show_tags=0&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=true&widget_border_width=1&widget_id=1614243637&widget_text_color=000000&widget_title_size=small&widget_width=full"
+    type="text/javascript" charset="utf-8"></script>
+</section>
+{% endif %}

data/_includes/widget_search.html

@@ -0,0 +1,15 @@
+<div id="search-container">
+  <input class="input" type="text" id="search-input" placeholder="Search for a post..." autocomplete="off">
+  <ul class="mdc-list mdc-list--two-line" id="results-container"></ul>
+</div>
+
+<script src="{{ site.baseurl }}/assets/scripts/simple-jekyll-search.min.js" type="text/javascript"></script>
+
+<script>
+  SimpleJekyllSearch({
+    searchInput: document.getElementById('search-input'),
+    resultsContainer: document.getElementById('results-container'),
+    searchResultTemplate: '<li class="mdc-list-item"><span class="mdc-list-item__ripple"></span><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text"><a href="{url}">{title}</a></span><span class="mdc-list-item__secondary-text">{date}</span></span></li>',
+    json: '{{ site.baseurl }}/assets/raw/search.json'
+  });
+</script>

data/_includes/widget_share.html

@@ -0,0 +1,14 @@
+<span class="mdc-touch-target-wrapper">
+  <a class="mdc-top-app-bar__action-item mdc-icon-button" aria-label="Share on Twitter" href="http://twitter.com/share?text={{ page.title }}&url={{ page.url | absolute_url }}" rel="noopner" target="_blank">
+    <span class="mdc-button__ripple"></span>
+    <span class="mdc-button__label"><i class="fab fa-twitter"></i></span>
+    <span class="mdc-button__touch"></span>
+  </a>
+</span>
+<span class="mdc-touch-target-wrapper">
+  <a class="mdc-top-app-bar__action-item mdc-icon-button" aria-label="Share on Facebook" href="https://www.facebook.com/sharer.php?u={{page.url | absolute_url }}" rel="noopner" target="_blank">
+    <span class="mdc-button__ripple"></span>
+    <span class="mdc-button__label"><i class="fab fa-facebook"></i></span>
+    <span class="mdc-button__touch"></span>
+  </a>
+</span>

data/_layouts/default.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="{{ site.data.manifest.lang | default: "en-US" }}">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
+
+  {% if site.data.manifest.name %}
+    {% assign title = site.data.manifest.name %}
+    {% if page.title and site.data.manifest.short_name %}
+      {% assign title = site.data.manifest.short_name %}
+    {% endif %}
+  {% else %}
+    {% assign title = site.title %}
+  {% endif %}
+  <title>{% if page.title %}{{ page.title }} | {% endif %}{{ title }}{% unless page.title %}{% if site.data.manifest.tagline %} - {{ site.data.manifest.tagline }}{% endif %}{% endunless %}</title>
+
+  {% seo title=false %}
+  {% include meta.html %}
+
+  <link rel="alternate" type="application/rss+xml" title="{{ title }}{% if site.data.manifest.tagline %} - {{ site.data.manifest.tagline }}{% endif %}" href="{{ site.baseurl }}/feed.xml" />
+
+  <!-- Website icon -->
+  <link rel="shortcut icon" href="{{ site.baseurl}}{% if site.data.manifest.icons[0] %}{{ site.data.manifest.icons[0].src }}{% else %}{{ site.logo }}{% endif %}">
+
+  <!-- Manifest -->
+  <link rel="manifest" href="{{ site.baseurl }}/manifest.json">
+  <meta name="theme-color" content="{{ site.data.manifest.theme_color | default: '#854fee' }}" />
+
+  <!-- Material Components for Web -->
+  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+
+  <!-- Icon Fonts (FontAwesome, Material Icons, etc.) -->
+  {% if site.icons or page.icons %}
+  <script async src="https://kit.fontawesome.com/a8beec66c1.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  {% endif %}
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/styles/app.css" />
+  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/styles/style.css" />
+
+  <!-- Installable PWA -->
+  {% if site.installable %}
+  <script async type="module" src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwainstall@latest/dist/pwa-install.min.js"></script>
+  {% endif %}
+
+  <!-- jQuery -->
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+
+  {% include github_head.html %}
+  {% include adsense_head.html %}
+  {% include analytics_head.html %}
+
+  <!-- Syntax Highlighting for Code Samples -->
+  {% if site.syntax or page.syntax %}
+  <script src="https://unpkg.com/@highlightjs/cdn-assets@10.5.0/highlight.min.js"></script>
+  <script>
+    hljs.initHighlightingOnLoad();
+  </script>
+  {% endif %}
+</head>
+
+<body class="layout-{{ page.layout }}{% if page.title %}  {{ page.title | slugify }}{% endif %}">
+  {% include appbar.html %}
+
+  <main class="mdc-top-app-bar--fixed-adjust">
+    {% unless page.id %}
+    {% include drawer.html %}
+    {% endunless %}
+
+    <!-- Content -->
+    <div class="main-content">
+      <article class="about-section">
+        <header>
+          {% if site.breadcrubms %}
+          <!-- Breadcrumbs -->
+          <section>
+            <nav class="breadcrumbs" aria-label="breadcrumb">
+              <li class='breadcrumb-item active'>{{ page.title }}</li>
+            </nav>
+          </section>
+          {% endif %}
+
+          <!-- Cover Image -->
+          {% if page.cover %}
+          {% if page.cover contains '://' %}
+          {% assign cover_url = page.cover %}
+          {% else %}
+          {% assign cover_url = page.cover | relative_url %}
+          {% endif %}
+          <div class="page-cover" style="background-image: url('{{ cover_url }}')">
+          {% endif %}
+
+          <!-- Summary -->
+          <section class="{% if page.cover %}align-bottom{% endif %}">
+            <div class="project-summary">
+              {% if page.icon %}
+              {% if page.icon contains '.' %}
+              <img class="project-logo" src="{{ site.baseurl}}{{ page.icon }}" alt="{{ page.title | slice: 0 }}" />
+              {% else %}
+              <span class="material-icons project-logo">{{ page.icon }}</span>
+              {% endif %}
+              {% endif %}
+              <div>
+                {% if page.title %}<h1 class="project-title">{{ page.title }}</h1>{% endif %}
+                {% unless page.icon %}
+                <span class="project-type">{% if page.date %}{{ page.date | date: "%B %e, %Y" }}{% endif %}</span>
+                {% endunless %}
+                <div class="project-tags">
+                  {% if post %}
+                  {% assign categories = post.categories %}
+                  {% else %}
+                  {% assign categories = page.categories %}
+                  {% endif %}
+                  {% for category in categories %}
+                  <a href="{{site.baseurl}}/categories/#{{category|slugify|replace:",",""}}"><span class="project-tag"><i class="material-icons">sell</i>{{ category | replace: ",", "" }}</span></a>
+                  {% endfor %}
+                </div>
+                {% if page.device %}
+                <p class="project-type"><span class="material-icons">devices</span>&nbsp; {{ page.device }}</p>
+                {% endif %}
+              </div>
+            </div>
+            {% if page.id %}
+            <div>
+              {% include widget_share.html %}
+            </div>
+            {% endif %}
+          </section>
+
+          {% if page.cover %}
+          </div>
+          {% endif %}
+        </header>
+
+        <!-- Page Content -->
+        {% if page.title %}
+        {{ content | replace_first: "h1", "h1 style='display: none;'" }}
+        {% else %}
+        {{ content }}
+        {% endif %}
+
+        <div id="status-bar" class="mdc-snackbar">
+          <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
+            <div class="mdc-snackbar__label" aria-atomic="false">
+            </div>
+            <div class="mdc-snackbar__actions" aria-atomic="true">
+              <button type="button" class="mdc-button mdc-snackbar__action">
+                <div class="mdc-button__ripple"></div>
+                <span class="mdc-button__label"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <script>
+          function showSnackbar(text, action = null, callback = null, timeout = 5000) {
+            const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'));
+            snackbar.timeoutMs = timeout
+            $('#status-bar .mdc-snackbar__label').text(text);
+            if (action != null && callback != null) {
+              $('#status-bar .mdc-snackbar__action').on('click', function() {
+                snackbar.close();
+                callback();
+              });
+              $('#status-bar .mdc-button__label').text(action);
+            }
+            snackbar.open();
+          }
+        </script>
+      </article>
+      {% include footer.html %}
+    </div>
+  </main>
+
+  <script>
+    $('#toc .mdc-list-item a').addClass('mdc-list-item__text');
+  </script>
+
+  <!-- user-defined JavaScript -->
+  <script async src="{{ site.baseurl }}/assets/scripts/script.js"></script>
+
+  <!-- Other global scripts -->
+  <script async src="{{ site.baseurl }}/assets/scripts/navigation.js"></script>
+</body>
+
+</html>

data/_layouts/page.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<!-- Page Content -->
+<div class="col-md-8">
+  {{ content }}
+</div>
+
+<aside class="col-md-4">
+  {% include list_posts.html %}
+  {% include widget_feedback.html %}
+</aside>

data/_layouts/post.html

@@ -0,0 +1,35 @@
+---
+layout: default
+---
+
+<style>
+    article img {
+      border-radius: 8px;
+      width: 100%;
+      margin: auto;
+    }
+</style>
+
+<!-- Page Content -->
+<div class="col-md-8">
+  {% if page.toc %}
+  <section>
+    <h2>Table of Contents</h2>
+    {{ content | toc_only }}
+  </section>
+
+  <script type="text/javascript">
+    findElementById("toc").addClass("mdc-list-item__text");
+  </script>
+  {% endif %}
+
+  <section>
+    {{ content | inject_anchors }}
+  </section>
+</div>
+
+<aside class="col-md-4">
+  {% include list_posts.html %}
+  <br>
+  {% include disqus.html %}
+</aside>

data/_layouts/project.html

@@ -0,0 +1,109 @@
+---
+layout: default
+---
+
+<!-- Page Content -->
+<div class="col-md-8">
+  <!-- Overview -->
+  <section>
+    <p>{{ page.description }}</p>
+  </section>
+
+  <!-- Media -->
+  {% if page.demo %}
+  <section class="embed-container">
+    <iframe src="https://www.youtube-nocookie.com/embed/{{ page.demo }}?controls=0" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
+  </section>
+  {% elsif page.image %}
+  {% if page.image contains '://' %}
+  {% assign image_url = page.image %}
+  {% else %}
+  {% assign image_url = page.image | relative_url %}
+  {% endif %}
+  <section>
+    <img class="project-portfolio-img" src="{{ image_url }}" alt="{{ page.title }}" />
+  </section>
+  {% endif %}
+
+  {{ content }}
+</div>
+
+<aside class="col-md-4">
+  <!-- Client-->
+  {% if page.client %}
+  <section>
+    <h2>About the Client</h2>
+    {{ page.client }}
+  </section>
+  {% endif %}
+
+  <!-- Source Code -->
+  {% if page.code %}
+  <section>
+    <h2>Source Code</h2>
+    <p>The source code of this project is publicly available on <a href="https://github.com/{{ page.code }}">Github</a>{% if page.license %} under {{ page.license }} License{% endif %}.</p>
+    <div class="github-card" data-github="{{ page.code }}" data-theme="medium" data-width="100%"></div>
+    <script src="https://cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
+  </section>
+  {% endif %}
+
+  <!-- Download -->
+  {% if page.download %}
+  <section>
+    <h2>Get it now</h2>
+    <div>
+      {% if page.download.android %}
+      <span>
+        <a href='https://play.google.com/store/apps/details?id={{ page.download.android }}&hl=en&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' rel="noopener" target="_blank">
+          <img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' height="64px" />
+        </a>
+      </span>
+      {% endif %}
+      {% if page.download.bintray %}
+      <p>This project can be used as a Maven and Gradle library via JCenter. It is published on Bintray.</p>
+      <a href='https://bintray.com/{{ page.download.bintray }}/_latestVersion' rel="noopener" target="_blank"><img src='https://api.bintray.com/packages/{{ page.download.bintray }}/images/download.svg'></a>
+      {% endif %}
+      {% if page.download.gem %}
+      <a href='https://badge.fury.io/rb/{{ page.download.gem }}' rel="noopener" target="_blank"><img src='https://badge.fury.io/rb/{{ page.download.gem }}.svg'></a>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {% include widget_feedback.html %}
+</aside>
+
+<script>
+  $(function() {
+    $('article ol').addClass('mdc-list');
+    $('article ol li').each(function(index) {
+      $(this).addClass('mdc-list-item');
+      $(this).html('<span class="mdc-list-item__text">' + $(this).text() + '</span>');
+    });
+
+    $('article ul').addClass('mdc-chip-set');
+    $('article ul li').each(function(index) {
+      $(this).addClass('mdc-chip');
+
+      var html = "<div class='mdc-chip__ripple'></div><span role='gridcell'>"
+      html += "<span role='button' class='mdc-chip__primary-action><span class='mdc-chip__text'>"
+      $(this).html(html + $(this).text() + '</span></span>');
+    });
+
+    $('.highlighter-rouge').each(function(index) {
+      var pre = $(this);
+      var code = $(this).find('code');
+
+      var classList = pre.attr('class').split(/\s+/);
+      $.each(classList, function(i, item) {
+        if (item.startsWith('language-')) {
+          code.addClass(item.substring(9));
+        }
+      });
+
+      $(this).removeClass();
+      $(this).children().removeClass();
+      $(this).find('pre').removeClass();
+    });
+  })
+</script>

data/_sass/_code.scss

@@ -0,0 +1,53 @@
+/*
+ *------------------------------------------------
+ * code syntax highlighting styles
+ *------------------------------------------------
+ */
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+@import url('https://unpkg.com/@highlightjs/cdn-assets@10.5.0/styles/dark.min.css');
+
+.code,
+.gist-file,
+code {
+  border-radius: 4px;
+}
+
+.code,
+.gist-file *,
+code {
+  font-family: 'Source Code Pro', monospace;
+  font-size: 11pt;
+}
+
+.code,
+code {
+  background-color: var(--mdc-theme-background);
+  padding: 2px 4px;
+  margin: 0 2px;
+}
+
+.gist-data,
+pre code {
+  border-radius: 8px;
+  background-color: var(--mdc-theme-background);
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: 16px !important;
+  margin-bottom: 16px;
+}
+
+.gist-file,
+.gist-file * {
+  background-color: var(--mdc-theme-background) !important;
+  border-color: var(--mdc-theme-border) !important;
+}
+
+.gist-data .blob-num,
+.gist-meta {
+  color: var(--mdc-theme-on-surface) !important;
+}
+
+.gist-meta {
+  display: none;
+}