simple-material 0.0.4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b520a79e5b73c585d4204d239124935000f91caa1a937f82b61ed62a7cb0dbad
+  data.tar.gz: 9e65eeb42ddce9d3b87e0e5bcc2c1f2c3bcb550e14a2c9937c90c64355de4483
+SHA512:
+  metadata.gz: fa71e7527e691bb31c5241905ed896c8ccbcad8cc3e7815b19b137f3a82a71f776d2b4d9d7d64f5b5f779c92e1bac323e453cd1a234e9dc68628b014b1bf3e01
+  data.tar.gz: 5eca8d8e0bdbe18c4c918c5eda170a79c65d17959dcae8618ed87f6f3d2ca9469406ab36378d49ff374f091471332975b0ec70fd9a04c6c1031457f8ccbda136

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Amit Merchant
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,181 @@
+---
+title: Getting Started
+icon: /assets/images/icons/192.png
+description: Simple Material is a Jekyll-powered theme with a clean design following Google's Material Design guidelines.
+categories: blog-theme, portfolio-theme, material-design, github-pages
+device: Jekyll Theme
+permalink: /getting-started/
+layout: page
+drawer: false
+---
+
+Simple Material is a Jekyll-powered theme with a clean design following Google's Material Design guidelines.
+
+It provides a a beautiful, clean and mobile-first fully-responsive interface for building your next website with minimal code. This is a plug-and-play Jekyll theme best suited to use on [GitHub Pages](https://pages.github.com) without even setting up a local environment.
+
+## Table of Contents
+1. [Key Features](#features)
+2. [Installation](#install)
+    - 2.1. [In a Jekyll Site](#install-jekyll)
+    - 2.2. [On GitHub Pages](#install-gh-pages)
+3. [Customizing the Theme](#customize)
+    - 3.1. [Setting up an Installable Web App](#webapp)
+4. [Layouts](#layouts)
+5. [Widgets](#widgets)
+    - 5.1. [Goodreads Books](#widget_goodreads)
+    - 5.2. [GitHub Contributions](#widget_github)
+    - 5.2. [Feedback](#widget_feedback)
+6. [Using Categories](#categories)
+
+## <i id="features"></i>Key Features
+
+<!-- TODO: Write a list of theme's key features -->
+
+## <i id='install'></i>Installation
+
+[![Gem Version](https://badge.fury.io/rb/simple-material.svg)](https://badge.fury.io/rb/simple-material)
+
+### <i id='install-jekyll'></i>In a Jekyll site
+
+Step 1: Create a new Jekyll site
+```
+jekyll new my-awesome-site
+cd ./my-awesome-site
+```
+
+Replace `my-awesome-site` with the name of your site.
+
+Step 2: Add the following lines in the `Gemfile`
+```
+source "https://rubygems.org"
+
+gem "jekyll", "~> 4.2.0"
+gem "simple-material", "~> 0.0.1"
+```
+
+And run `bundle install` to install the theme.
+
+Use the latest version of the theme (see top of this page) instead of `0.0.1`.
+
+Step 3: Set theme in the site's `_config.yml`
+```
+theme: simple-material
+```
+
+Now, you can build and run your website with `bundle exec jekyll serve --watch`.
+
+### <i id='install-gh-pages'></i>On GitHub Pages
+
+Simple Material can be used with GitHub Pages without any need to set up a local environment. To do this, simply add the following line in your site's `_config.yml`.
+
+```
+remote_theme: saifkhichi96/simple-material
+```
+
+You can also fork the [saifkhichi96/simple-material-demo](https://github.com/saifkhichi96/simple-material-demo) repository as a starting point if you are unable to set it up on your own.
+
+## <i id='customize'></i>Customizing the Theme
+
+Create a `manifest.json` file inside the `_data/` directory in your project root, and provide the following details:
+
+| Property     | Description                                    | Required | Default |
+| -----------: | ---------------------------------------------- | :------: | :-----: |
+| `name`       | The name of the site as displayed to the user. | &#x2713; | -       |
+| `icons`      | List of one or more app icons.                 | &#x2713; | -       |
+| `description`| Short description of the site.                 | &#x3F;   | -       |
+| `short_name` | Used in app launchers                          | &#x2717; | -       |
+| `tagline`    | Your site's tagline.                           | &#x2717; | -       |
+| `categories` | List of website categories.                    | &#x2717; | -       |
+| `lang`       | ISO code of primary language of your site.     | &#x2717; | en-US   |
+| `theme_color`| Hex value of your site's primary color.        | &#x2717; | #854fee |
+
+<br>
+You must provide the `name` of your site, and at least one icon in the [`icons`](https://developer.mozilla.org/en-US/docs/Web/Manifest/icons) list, preferably at least 192x192 pixel in size. The `description` tag is not required but recommended because it is used in your site's metadata description, and in case of PWAs, in store fronts and install dialogs.
+
+You can see a full example of a [`manifest.json` here](https://github.com/saifkhichi96/simple-material-demo/blob/main/_data/manifest.json).
+
+### <i id="webapp"></i>Setting up an [Installable Web App](https://www.pwabuilder.com)
+
+If you also provide values for the `background_color` and `start_url` fields, your site can be installed as a Progressive Web App. For a list of all supported fields, [see this page](https://developer.mozilla.org/en-US/docs/Web/Manifest/). A service worker and install buttons are automatically added to your site.
+
+Next, create a file called `pwabuilder-sw.js` in your site's root and copy the following code there:
+
+```
+const CACHE = "pwabuilder-offline";
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+workbox.routing.registerRoute(
+  new RegExp('/*'),
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: CACHE
+  })
+);
+
+```
+
+You can now install your website as a PWA on any device.
+
+## <i id="layouts"></i>Layouts
+
+Simple Material contains the following layouts:
+
+| Name      | Description                                                                 |
+| --------: | --------------------------------------------------------------------------- |
+| `default` | Base layout of the theme.                                                   |
+| `page`    | Layout for top-level or standalone pages in the website.                    |
+| `post`    | Layout for blog posts.                                                      |
+| `project` | Layout for project pages to show details of a single portfolio item.        |
+
+<br>
+To define a page layout, use `layout: name` in the page's YAML front matter. If none specified, `default` is used.
+
+## <i id="widgets"></i>Widgets
+
+Simple Material defines some view elements as reusable 'widgets'. If you are using a local Jekyll environment, you can include these widgets anywhere in your pages using the {% raw %}`{% include widget_name.html %}`{% endraw %} directive. Some of them are also used in the built-in layouts of the theme.
+
+### <i id="widget_goodreads"></i>Goodreads Books (`widget_goodreads`)
+
+Shows the recently read books of the specified Goodreads user. To link your profile, add your Goodreads user ID (an 8-digit number) in the `_config.yml` file.
+
+```
+menu_social:
+  goodreads: goodreads-user-id
+```
+
+{% include widget_goodreads.html %}
+
+### <i id="widget_github"></i>GitHub Contributions (`widget_github`)
+
+Shows the GitHub contribution chart of the specified GitHub user. To specify the user, add your GitHub username in the social menu in `_config.yml` file.
+
+```
+menu_social:
+  github: github-username
+```
+
+{% include widget_github.html %}
+
+### <i id="widget_feedback"></i>Feedback (`widget_feedback`)
+
+If your site's is open-source and hosted on GitHub, you can allow visitors to contribute to your site's source code or report issues using this widget. To use this,
+
+1. Include the widget in your page layout.
+2. Check that your project folder contains a `git` repository (i.e. `.git/` folder exists).
+3. Check that the `remote` is set to project's GitHub repository (use `git remote -v`), which must be owned by you.
+4. Get a [personal access token](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token#creating-a-token) from GitHub with the `repo` scope.
+5. Set the `JEKYLL_GITHUB_TOKEN` environment variable before building the Jekyll website. For example, by running `JEKYLL_GITHUB_TOKEN=token bundle exec jekyll build` where `token` is the PAT you created in Step 4 above.
+
+## <i id='categories'></i>Using Categories
+
+You can categorize your content based on categories. For this, you just need to add categories in front matter like below:
+
+For adding single category: `categories: JavaScript`
+
+For adding multiple categories: `categories: [PHP, Laravel]`

data/_includes/adsense_head.html

@@ -0,0 +1,3 @@
+{% if site.google_adsense %}
+<script data-ad-client="{{ site.google_adsense }}" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+{% endif %}

data/_includes/analytics_head.html

@@ -0,0 +1,13 @@
+{% if site.google_analytics_ga4 %}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_ga4 }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', '{{ site.google_analytics_ga4 }}');
+</script>
+{% endif %}
+{% include analytics_head_legacy.html %}

data/_includes/analytics_head_legacy.html

@@ -0,0 +1,25 @@
+{% if site.google_analytics %}
+<!-- Google Analytics -->
+<script>
+	(function(i, s, o, g, r, a, m) {
+		i['GoogleAnalyticsObject'] = r;
+		i[r] = i[r] || function() {
+			(i[r].q = i[r].q || []).push(arguments)
+		}, i[r].l = 1 * new Date();
+		a = s.createElement(o),
+			m = s.getElementsByTagName(o)[0];
+		a.async = 1;
+		a.src = g;
+		m.parentNode.insertBefore(a, m)
+	})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+
+	ga('create', '{{ site.google_analytics }}', 'auto');
+	ga('send', 'pageview', {
+		'page': '{{ site.baseurl }}{{ page.url }}',
+		'title': '{{ page.title | replace: "'
+		", "\\
+		'" }}'
+	});
+</script>
+<!-- End Google Analytics -->
+{% endif %}

data/_includes/appbar.html

@@ -0,0 +1,60 @@
+<!-- Top App Bar -->
+<header class="mdc-top-app-bar">
+  <div class="mdc-top-app-bar__row">
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+      {% unless page.drawer %}
+      <button class="material-icons mdc-icon-button"
+              aria-label="Go to previous page."
+              onclick="back();">arrow_back</button>
+      {% endunless %}
+
+      {% if page.drawer %}
+      {% if site.menu_main %}
+      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button"
+              aria-label="Open navigation menu">menu</button>
+      {% else %}
+      <button class="material-icons mdc-icon-button"
+              aria-label="Go to home page."
+              onclick="window.location.href='{{ site.baseurl }}/'">home</button>
+      {% endif %}
+      {% endif %}
+      <span class="mdc-top-app-bar__title">
+        <a href="{{ site.baseurl }}/">
+          {% if site.logo %}
+          <img src="{{ site.baseurl }}{{ site.logo }}" alt="{{ site.data.manifest.name }}" height="32" />
+          {% elsif site.data.manifest.short_name %}
+          {{ site.data.manifest.short_name }}
+          {% else %}
+          {{ site.data.manifest.name }}
+          {% endif %}
+        </a>
+      </span>
+    </section>
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+      {% if page.menuitem %}
+      {% if page.menuaction %}
+      <div class="mdc-touch-target-wrapper">
+        <button class="mdc-top-app-bar__action-item {% if page.menuicon %}mdc-icon-button{% else %}mdc-button mdc-button--outlined{% endif %}" onclick="{{ page.menuaction }}" aria-label="Download Transcript">
+          <span class="mdc-button__ripple"></span>
+          <span class="mdc-button__label">
+            {% if page.menuicon %}
+            <i class="material-icons">{{ page.menuicon }}</i>
+            {% else %}
+            {{ page.menuitem }}
+            {% endif %}
+          </span>
+          <span class="mdc-button__touch"></span>
+        </button>
+      </div>
+      {% endif %}
+      {% endif %}
+      <div class="mdc-touch-target-wrapper">
+        <pwa-install id="a2hs" installbuttontext="Install" manifestpath="{{ site.baseurl }}/manifest.json">
+          <span class="mdc-button__ripple"></span>
+          <i class="fas fa-arrow-circle-down"></i>
+          <span class="mdc-button__touch"></span>
+        </pwa-install>
+      </div>
+    </section>
+  </div>
+</header>

data/_includes/disqus.html

@@ -0,0 +1,18 @@
+{% if site.disqus %}
+<section class="comments">
+	<h2>Leave a Comment</h2>
+	<div id="disqus_thread"></div>
+	<script type="text/javascript">
+		var disqus_shortname = '{{ site.disqus }}';
+
+		(function() {
+			var dsq = document.createElement('script');
+			dsq.type = 'text/javascript';
+			dsq.async = true;
+			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+		})();
+	</script>
+	<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</section>
+{% endif %}

data/_includes/drawer.html

@@ -0,0 +1,10 @@
+<aside class="mdc-drawer mdc-drawer--modal">
+  <div class="mdc-drawer__header">
+    <h3 class="mdc-drawer__title">{{ site.data.manifest.name }}</h3>
+    <h6 class="mdc-drawer__subtitle">{{ site.data.manifest.tagline }}</h6>
+  </div>
+  <div class="mdc-drawer__content">
+    {% include nav_drawer.html %}
+  </div>
+</aside>
+<div class="mdc-drawer-scrim"></div>

data/_includes/footer.html

@@ -0,0 +1,64 @@
+<footer>
+  <div class="footnote">
+    {% if page.license.content or page.license.code %}
+    <p>
+      Except as otherwise noted,
+      {% if page.license.content and page.license.code %}
+
+        {% if page.license.content.name == page.license.code.name %}
+
+        the content and code samples on this page are licensed under <a href="{{ page.license.content.url }}" target="_blank">{{ page.license.content.name }}</a>.
+
+        {% else %}
+
+        the content of this page is licensed under <a href="{{ page.license.content.url }}" target="_blank">{{ page.license.content.name }}</a>, and the code samples are licensed under <a href="{{ page.license.code.url }}" target="_blank">{{ page.license.code.name }}</a>.
+
+        {% endif %}
+
+      {% elsif page.license.content %}
+
+        the content of this page is licensed under <a href="{{ page.license.content.url }}" target="_blank">{{ page.license.content.name }}</a>.
+
+      {% elsif page.license.code %}
+
+        the code samples on this page are licensed under <a href="{{ page.license.code.url }}" target="_blank">{{ page.license.code.name }}</a>.
+
+      {% endif %}
+    </p>
+    {% endif %}
+    <p>
+      Last updated <span id="last-modified"></span>
+    </p>
+  </div>
+
+  <div class="footer">
+    {% if site.data.manifest.name %}
+    {% assign title = site.data.manifest.name %}
+    {% else %}
+    {% assign title = site.title %}
+    {% endif %}
+    <p>
+      <a href="{{ site.baseurl }}/">
+       {% if site.logo %}
+       <img src="{{ site.baseurl }}{{ site.logo }}" alt="{{ title }}" height="32" />
+       {% elsif site.data.manifest.short_name %}
+       {{ site.data.manifest.short_name }}
+       {% else %}
+       {{ title }}
+       {% endif %}
+      </a>
+    </p>
+    <div class="text-left">
+      {% include nav_social.html %}
+    </div>
+    {% include nav_footer.html %}
+    <hr class="mdc-list-divider" />
+    <span class="copyright">
+      <p>
+        Copyright &copy; {{ title }} {{ site.time | date: '%Y' }}. All rights reserved.<br>
+        <small>This site uses the <a href="https://github.com/saifkhichi96/simple-material">Simple Material</a> theme by <a href="https://github.com/saifkhichi96">saifkhichi96</a></small>
+      </p>
+      {% if site.terms %}<a href="{{ site.baseurl }}{{ site.terms }}" class="muted">Terms</a> {% if site.privacy %}&nbsp;|&nbsp;{% endif %}{% endif %} {% if site.privacy %}<a href="{{ site.baseurl }}{{ site.privacy }}" class="muted">Privacy</a>{% endif %}
+    </span>
+  </div>
+</footer>

data/_includes/github_head.html

@@ -0,0 +1,6 @@
+{% if site.menu_social.github and page.github_stats %}
+<!-- Prepare a container for your calendar. -->
+<script src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
+<link href="{{ site.baseurl }}/assets/styles/github.css" rel="stylesheet">
+{% endif %}

data/_includes/list_blog_categories.html

@@ -0,0 +1,26 @@
+{% assign categories = site.categories | sort %}
+{% for category in categories %}
+<section class="mdc-card mdc-card--outlined">
+  <details class="mdc-card__content">
+    {% capture category_name %}{{ category | first }}{% endcapture %}
+    <summary>{{ category_name  }}</summary>
+    <i id="#{{ category_name | slugify }}"></i>
+    <a name="{{ category_name | slugify }}"></a>
+
+    <ol class="mdc-list mdc-list--two-line">
+      {% for post in site.categories[category_name] %}
+      <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="{{ site.baseurl }}{{ post.url }}">{% if post.title and post.title != "" %}{{post.title}}{% else %}{{post.excerpt |strip_html}}{%endif%}</a>
+          </span>
+          <span class="mdc-list-item__secondary-text">{{post.excerpt | strip_html | strip | slice: 0, 200 }}...</span>
+        </span>
+      </li>
+      <br>
+      {% endfor %}
+    </ol>
+  </details>
+</section>
+{% endfor %}

data/_includes/list_blog_posts.html

@@ -0,0 +1,74 @@
+{% if paginator.posts %}
+{% assign posts = paginator.posts %}
+{% else %}
+{% assign posts = site.posts %}
+{% endif %}
+
+{% for post in posts %}
+{% assign categories = post.categories %}
+<section class="post-container">
+  <div class="post">
+    {% if post.cover %}
+    {% assign post_image = post.cover %}
+    {% else %}
+    {% assign post_image = '/assets/images/blog/default.png' %}
+    {% endif %}
+
+    {% if post_image contains '://' %}
+    {% assign image_url = post_image %}
+    {% else %}
+    {% assign image_url = post_image | relative_url %}
+    {% endif %}
+    <div class="post-img" style="background-image: url('{{ image_url }}')"></div>
+    <div class="post-details">
+      <div class="project-tags">
+        {% assign categories = post.categories %}
+        {% for category in categories %}
+        <a href="{{site.baseurl}}/categories/#{{category|slugize|replace:",",""}}"><span class="project-tag"><i class="material-icons">sell</i>{{ category | replace: ",", "" }}</span></a>
+        {% endfor %}
+      </div>
+      <div class="post-date">{{ post.date | date: "%B %e, %Y" }}</div>
+      <h2 class="post-title">{{ post.title }}</h2>
+      <p class="post-excerpt">{{ post.description }}</p>
+      <div class="mdc-touch-target-wrapper">
+        <a class="mdc-button mdc-button--unelevated" href="{{ site.baseurl }}{{ post.url }}">
+          <span class="mdc-button__ripple"></span>
+          <span class="mdc-button__label">Read More</span>
+          <span class="mdc-button__touch"></span>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+{% endfor %}
+
+{% if paginator %}
+<!-- pagination -->
+{% if paginator.total_pages > 1 %}
+<ul class="pagination" style="display: flex; width: 100%; justify-content: space-evenly;">
+  <li>
+    {% if paginator.previous_page %}
+    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
+    {% else %}
+    <span>&laquo; Prev</span>
+    {% endif %}
+  </li>
+
+  {% if paginator.page_trail %}
+    {% for trail in paginator.page_trail %}
+      <li {% if page.url == trail.path %}class="selected"{% endif %}>
+          <a href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}">{{ trail.num }}</a>
+      </li>
+    {% endfor %}
+  {% endif %}
+
+  <li>
+    {% if paginator.next_page %}
+    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
+    {% else %}
+    <span>Next &raquo;</span>
+    {% endif %}
+  </li>
+</ul>
+{% endif %}
+{% endif %}

data/_includes/list_posts.html

@@ -0,0 +1,25 @@
+{% assign posts = site.posts %}
+{% if posts.size > 0 %}
+<section>
+  {% include widget_search.html %}
+
+  <h2>Recent posts</h2>
+  <div class="mdc-list mdc-list--two-line">
+    {% for post in posts limit:5 %}
+    {% assign categories = post.categories %}
+    <a class="mdc-list-item" href="{{ site.baseurl }}{{ post.url }}">
+      <span class="mdc-list-item__ripple"></span>
+      <span class="mdc-list-item__text">
+        <span class="mdc-list-item__primary-text">{{ post.title }}</span>
+        <span class="mdc-list-item__secondary-text">
+          {% for cat in categories limit:1 %}
+          <span class="project-tag">{{ cat | replace: ",", "" }}</span>
+          {% endfor %}
+          &nbsp; {{ post.date | date: "%B %e, %Y" }}</span>
+      </span>
+    </a>
+    {% endfor %}
+
+  </div>
+</section>
+{% endif %}

data/_includes/list_projects_featured.html

@@ -0,0 +1,14 @@
+<div>
+  {% for page in site.projects %}
+  {% assign categories = page.categories %}
+  {% if categories contains 'featured' %}
+  <section class="project-summary" style="display: flex;">
+    <img class="project-logo-featured" src="{{ site.baseurl}}{{ page.icon }}" alt="{{ page.title | slice: 0 }}" />
+    <div style="width: calc(100% - 72px)">
+      <h3 class="project-title"><a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a></h3>
+      <div>{{ page.description }}</div>
+    </div>
+  </section>
+  {% endif %}
+  {% endfor %}
+</div>

data/_includes/list_services.html

@@ -0,0 +1,13 @@
+<section class="mdc-layout-grid">
+  <div class="mdc-layout-grid__inner">
+    {% for service in site.services %}
+    <div class="mdc-layout-grid__cell mdc-card mdc-card--outlined service-item">
+      {% if service.icon %}
+      <span class="material-icons">{{ service.icon }}</span>
+      {% endif %}
+      <h2><a href="{{ site.baseurl }}{{ service.url }}">{{ service.title }}</a></h2>
+      <p>{{ service.description }}</p>
+    </div>
+    {% endfor %}
+  </div>
+</section>

data/_includes/meta.html

@@ -0,0 +1,47 @@
+{% if page.title %}
+<meta property="og:title" content="{{ page.title }}" />
+<meta property="twitter:title" content="{{ page.title }}" />
+{% endif %}
+
+{% assign keywords = '' %}
+
+{% if page.keywords %}
+{% assign keywords = keywords | append: page.keywords | append: ', ' %}
+{% endif %}
+
+{% if page.categories %}
+{% for category in page.categories %}
+{% assign keywords = keywords | append: category | append: ', ' %}
+{% endfor %}
+{% endif %}
+
+{% for category in site.data.manifest.categories %}
+{% assign keywords = keywords | append: category | append: ', ' %}
+{% endfor %}
+
+<meta name="keywords" content="{{ keywords }}">
+<meta property="og:keywords" content="{{ keywords }}" />
+<meta property="twitter:keywords" content="{{ keywords }}" />
+
+{% if page.cover %}
+{% if page.cover contains '://' %}
+{% assign cover_url = page.cover %}
+{% else %}
+{% assign cover_url = page.cover | absolute_url %}
+{% endif %}
+<meta property="og:image" content="{{ cover_url }}" />
+<meta property="twitter:image" content="{{ cover_url }}" />
+
+{% elsif page.icon %}
+{% if page.icon contains '://' %}
+{% assign icon_url = page.icon %}
+{% else %}
+{% assign icon_url = page.icon | absolute_url %}
+{% endif %}
+<meta property="og:image" content="{{ icon_url }}" />
+<meta property="twitter:image" content="{{ icon_url }}" />
+
+{% else %}
+<meta property="og:image" content="{{ site.logo | absolute_url }}" />
+<meta property="twitter:image" content="{{ site.logo | absolute_url }}" />
+{% endif %}

data/_includes/nav_drawer.html

@@ -0,0 +1,32 @@
+{% if site.menu_main %}
+<nav>
+  <ul class="mdc-list mdc-list--icon-list">
+    {% for item in site.menu_main %}
+    {% if item.url contains '://' %}
+    {% assign url = item.url %}
+    {% else %}
+    {% assign url = item.url | relative_url %}
+    {% endif %}
+
+    {% if item.url == page.url %}
+    <li class="mdc-list-item mdc-list-item--activated" aria-current="page">
+    {% else %}
+    <li class="mdc-list-item" {% if item.url %}onclick="window.location.href='{{ url }}'"{% endif %}>
+    {% endif %}
+      {% if item.title %}
+      <span class="mdc-list-item__ripple"></span>
+      <span class="mdc-list-item__text">
+        <i class="material-icons" style="opacity: 0.75; position: relative; top: 6px;">{{ item.icon }}</i>
+        {{ item.title }}
+      </span>
+      {% endif %}
+    </li>
+
+    {% endfor %}
+    <li class="mdc-list-item mdc-list-item--activated" style="opacity: 0;">
+      <span class="mdc-list-item__ripple"></span>
+      <span class="mdc-list-item__text"></span>
+    </li>
+  </ul>
+</nav>
+{% endif %}