oinam-jekyll 1.0.0 → 1.1.0

data/_includes/css/theme-toggle.css

@@ -0,0 +1,85 @@
+:root {
+	--toggle-width: 60px;
+	--toggle-height: 34px;
+	--toggle-button-size: 26px;
+	--toggle-transition-duration: var(--transition-duration);
+}
+
+.theme-switch-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.theme-switch {
+  display: inline-block;
+  position: relative;
+  height: var(--toggle-height);
+  width: var(--toggle-width);
+}
+
+.theme-switch input {
+  display: none;
+}
+
+.slider {
+  background: var(--background-color-highlight);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+  border-radius: var(--toggle-height);
+  transition: 0.4s;
+}
+
+.slider:before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  bottom: 4px;
+  background: var(--background-color);
+  width: var(--toggle-button-size);;
+  height: var(--toggle-button-size);
+  transition: var(--toggle-transition-duration);
+  border-radius: var(--border-radius-round);
+}
+
+input:checked + .slider {
+  background: var(--background-color-highlight);
+}
+
+input:checked + .slider:before {
+  transform: translateX(calc(1* var(--toggle-button-size)));
+}
+
+.slider svg {
+  color: var(--text-color);
+  position: absolute;
+  transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
+  pointer-events: none;
+}
+
+.feather-moon {
+  opacity: 0;
+  left: 9px;
+  bottom: 9px;
+  transform: translateX(4px);
+}
+
+.feather-sun {
+  opacity: 1;
+  right: 10px;
+  bottom: 9px;
+  transform: translateX(0px);
+}
+
+input:checked + .slider .feather-moon {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+input:checked + .slider .feather-sun {
+  opacity: 0;
+  transform: translateX(-4px);
+}

data/_includes/footer-ext.html

@@ -0,0 +1 @@
+{% comment %}<!-- Additional custom footer content -->{% endcomment %}

data/_includes/footer.html

@@ -1,12 +1,20 @@
-<hr>
-
-<footer>
-  <nav>
-    <a href="/">Home</a>
-    <a href="/about/">About</a>
-  </nav>
-  <p>
-    <small>© {{ "now" | date: "%Y" }} {{ site.title }}.</small>
-    <small>Jekyll Theme by <a href="https://oinam.com">Oinam</a>.</small>
-  </p>
-</footer>
+<footer class="footer">
+  {% include nav.html %}
+  <div class="footer__credit">
+    <div>
+      <p>
+        {% if site.footer.custom != false %}
+          <small>{{ site.footer_custom }}</small>
+        {% else %}
+          <small>Copyright © {{ "now" | date: "%Y" }} {{ site.title }}.</small>
+        {% endif %}
+        {% if site.footer.credit != false %}
+          <small><a href="https://oinam.github.io/oinam-jekyll/" target="_blank">Oinam Jekyll</a>.</small>
+        {% endif %}
+      </p>
+    </div>
+    {% if site.layout.theme_switch != false %}
+      {% include appearance.html %}
+    {% endif %}
+  </div>
+</footer>

data/_includes/head-custom.html

@@ -0,0 +1,2 @@
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="theme-color" content="#fafafa">

data/_includes/header.html

@@ -1,8 +1,5 @@
-<header>
-  <h1><a href="{{ site.baseurl }}/" title="{{ site.title }}">{{ site.title }}</a></h1>
-  <nav>
-    <a href="/about/">About</a>
-  </nav>
-</header>
-
-<hr>
+<header class="header">
+  <h1><a href="{{ site.baseurl | prepend: site.url }}/" title="{{ site.title }}">{{ site.title }}</a></h1>
+  {% if site.description %}<h2>{{ site.description | escape }}</h2>{% endif %}
+  {% include nav.html %}
+</header>

data/_includes/js/appearance.js

@@ -0,0 +1,32 @@
+// Get the theme toggle input
+const themeToggle = document.querySelector(
+  '.theme-switch input[type="checkbox"]'
+);
+
+// Get the current theme from local storage
+const currentTheme = localStorage.getItem("theme");
+
+// If the current local storage item can be found
+if (currentTheme) {
+  // Set the body data-theme attribute to match the local storage item
+  document.documentElement.setAttribute("data-theme", currentTheme);
+
+  // If the current theme is dark, check the theme toggle
+  if (currentTheme === "dark") {
+    themeToggle.checked = true;
+  }
+}
+
+// Function that will switch the theme based on the if the theme toggle is checked or not
+function switchTheme(e) {
+  if (e.target.checked) {
+    document.documentElement.setAttribute("data-theme", "dark");
+    localStorage.setItem("theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");
+    localStorage.setItem("theme", "light");
+  }
+}
+
+// Add an event listener to the theme toggle, which will switch the theme
+themeToggle.addEventListener("change", switchTheme, false);

data/_includes/js/link-ext.js

@@ -0,0 +1,11 @@
+function externalLinks() {
+  for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
+    var b = c[a];
+    b.getAttribute("href")
+    && b.hostname !== location.hostname
+    && (b.target = "_blank")
+    && (b.rel = "noopener")
+  }
+}
+;
+externalLinks();

data/_includes/nav.html

@@ -0,0 +1,7 @@
+{% if site.data.nav %}
+<nav>
+  {% for menu in site.data.nav -%}
+    <a href="{{ site.baseurl | prepend: site.url }}{{ menu.url }}">{{ menu.title }}</a>
+  {% endfor -%}
+</nav>
+{% endif %}

data/_includes/photos

@@ -0,0 +1,12 @@
+{% comment %}<!--
+USAGE
+{% include photos folder="folder_path_without_trailing_slashes" %}
+-->{% endcomment %}
+
+{% capture photo_folder %}{{ include.folder }}{% endcapture %}
+
+{%- for image in site.static_files -%}
+{%- if image.path contains photo_folder -%}
+<a href="{{ site.baseurl }}{{ image.path }}" target="_blank"><img src="{{ site.baseurl }}{{ image.path }}"></a>
+{% endif -%}
+{%- endfor -%}

data/_includes/posts-items.html

@@ -0,0 +1,8 @@
+<ul>
+  {%- for post in site.posts limit: site.layout.home_posts_no -%}
+  <li>
+    <a href="{{ site.baseurl | prepend: site.url }}{{ post.url }}">{{ post.title }}</a>
+    <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: '%b %-d, %Y' }}</time>
+  </li>
+  {%- endfor -%}
+</ul>

data/_includes/scripts.html

@@ -0,0 +1,3 @@
+{% if site.layout.link_new_tab != false %} {% include js/link-ext.js %} {% endif %}
+
+{% if site.layout.theme_switch != false %} {% include js/appearance.js %} {% endif %}

data/_includes/styles.html

@@ -0,0 +1,28 @@
+<style type="text/css">
+{%- capture include_to_scssify -%}
+
+  {% include css/settings.css %}
+
+  {% include css/color-theme-{{ site.layout.theme | default: 'default' }}.css %}
+
+  {% include css/styles.css %}
+
+  {% if site.styles.forms != false %} {% include css/forms.css %} {% endif %}
+  
+  {% include css/styles-extended.css %}
+  
+  {% if site.layout.theme_switch != false %} {% include css/theme-toggle.css %} {% endif %}
+  
+  {% if site.styles.syntax_highlighter != false %}
+    {% if page.type == posts %}
+      {% include css/styles-code.css %}
+    {% endif %}
+  {% endif %}
+
+  {% if jekyll.environment == "development" %}
+   {% include css/debug.css %}
+  {% endif %}
+
+{%- endcapture -%}
+{{- include_to_scssify | scssify | strip_newlines  -}}
+</style>

data/_includes/video

@@ -0,0 +1,25 @@
+{% comment %}
+USAGE
+{% include video source="youtube" id="dQw4w9WgXcQ" %}
+{% endcomment %}
+
+{% capture video_id %}{{ include.id }}{% endcapture %}
+{% capture video_source %}{{ include.source }}{% endcapture %}
+
+{% capture video_src %}
+  {% case video_source %}
+  {% when "vimeo" %}
+    https://player.vimeo.com/video/{{ video_id }}?dnt=true
+  {% when "youtube" %}
+    https://www.youtube-nocookie.com/embed/{{ video_id }}
+  {% when "google-drive" %}
+    https://drive.google.com/file/d/{{ video_id }}/preview
+  {% endcase %}
+{% endcapture %}
+
+{% assign video_src = video_src | strip %}
+{% unless video_src == "" %}
+  <div class="video-wrap">
+    <iframe src="{{ video_src }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
+  </div>
+{% endunless %}

data/_layouts/blog.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+{{ content }}
+
+<div class="items-list">
+{%- for post in site.posts -%}
+{%- assign currentdate = post.date | date: "%Y" -%}
+
+  {%- if currentdate != date -%}
+    {%- unless forloop.first -%}</ul>{% endunless %}
+    <h2 id="year-{{post.date | date: "%Y"}}">{{ currentdate }}</h2>
+    <ul>
+      {% assign date = currentdate %}
+    {%- endif -%}
+      <li class="one-liner">
+        <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: '%b %d' }}</time>
+        <a href="{{ site.baseurl | prepend: site.url }}{{ post.url }}">{{ post.title }}</a>
+      </li>
+    {%- if forloop.last -%}</ul>{% endif %}
+  {% endfor %}
+</div>

data/_layouts/default.html

@@ -1,3 +1,5 @@
+---
+---
 <!doctype html>
 <html lang="en">
 <head>
@@ -15,27 +17,21 @@
 <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
 <meta name="robots" content="index,follow">
 
-<style type="text/css">
-{%- capture include_to_scssify -%}
-  {% include css/settings.css %}
-  {% include css/styles.css %}
-  {% include css/styles-extended.css %}
-    {% if page.type == posts %}
-    {% include css/styles-code.css %}
-    {% endif %}
-{%- endcapture -%}
-{{- include_to_scssify | scssify | strip_newlines  -}}
-</style>
-<link rel="stylesheet" media="print" href="/print.css">
+{% include styles.html %}
+{% include head-custom.html %}
 
 </head>
 <body>
 
-<main>
-  {% include header.html %}
-  {{ content }}
-  {% include footer.html %}
-</main>
+{% include header.html %}
+
+<main>{{ content }}</main>
+
+{% include footer.html %}
+
+<script type="text/javascript">{% include scripts.html %}</script>
+
+{% include footer-ext.html %}
 
 </body>
 </html>

data/_layouts/home.html

@@ -4,19 +4,15 @@ layout: default
 
 {{ content }}
 
+<section class="home_posts">
+  <h3 class="home_posts__title">
+    {{ site.layout.home_postheader_title }}
+    {% if site.layout.posts_home %}
+      <a class="home_posts__meta" href="{{ site.baseurl | prepend: site.url }}{{ site.layout.posts_home }}">{{ site.layout.home_postmeta_title }}</a>
+    {% endif %}
+  </h3>
+</section>
 
-{%- for post in site.posts -%}
-{%- assign currentdate = post.date | date: "%Y" -%}
-
-{%- if currentdate != date -%}
-  {%- unless forloop.first -%}</ul>{% endunless %}
-  <h2 id="year-{{post.date | date: "%Y"}}">{{ currentdate }}</h2>
-  <ul class="blog-articles__list">
-    {% assign date = currentdate %}
-  {%- endif -%}
-    <li class="one-liner">
-      <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: '%b %d' }}</time>
-      <a href="{{ post.url }}">{{ post.title }}</a>
-    </li>
-  {%- if forloop.last -%}</ul>{% endif %}
-{% endfor %}
+<div class="items-list content-medium">
+  {% include posts-items.html %}
+</div>

data/_layouts/page.html

@@ -1,6 +1,7 @@
 ---
 layout: default
 ---
+
 <article>
   <h1>{{ page.title | escape }}</h1>
   {{ content }}

data/_layouts/post.html

@@ -3,7 +3,7 @@ layout: default
 ---
 
 <div class="post-meta">
-  <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ page.date | date: '%Y %b %-d %a' }}</time>
+  <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ page.date | date: '%a, %b %-d, %Y' }}</time>
   <span>{%- include read-time.html -%}</span>
 </div>
   
@@ -13,10 +13,14 @@ layout: default
 </article>
 
 <div class="post-nav">
-  {%- if page.previous.url -%} 
-  <a href="{{ page.previous.url | prepend: site.baseurl }}" class="post-nav__prev" title="{{ page.previous.title }}">← Prev</a>
-  {%- endif -%}
-  {%- if page.next.url -%}  
-  <a href="{{ page.next.url | prepend: site.baseurl }}" class="post-nav__next" title="{{ page.next.title }}">Next →</a>
-  {%- endif -%} 
+  <span>
+    {%- if page.previous.url -%} 
+    <a href="{{ page.previous.url | prepend: site.baseurl | prepend: site.url }}" class="post-nav__prev" title="{{ page.previous.title }}">← Prev</a>
+    {%- endif -%}
+  </span>
+  <span>
+    {%- if page.next.url -%}  
+    <a href="{{ page.next.url | prepend: site.baseurl | prepend: site.url }}" class="post-nav__next" title="{{ page.next.title }}">Next →</a>
+    {%- endif -%} 
+  </span>
 </div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: oinam-jekyll
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Oinam
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-08-21 00:00:00.000000000 Z
+date: 2021-09-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,7 +16,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: 3.9.0
     - - "<"
       - !ruby/object:Gem::Version
         version: '5.0'
@@ -26,24 +26,52 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: 3.9.0
     - - "<"
       - !ruby/object:Gem::Version
         version: '5.0'
 - !ruby/object:Gem::Dependency
-  name: jekyll-feed
+  name: kramdown-parser-gfm
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.9'
+        version: 1.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.9'
+        version: 1.1.0
+- !ruby/object:Gem::Dependency
+  name: jekyll-optional-front-matter
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.3.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.3.2
+- !ruby/object:Gem::Dependency
+  name: jekyll-titles-from-headings
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.5.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.5.3
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -59,22 +87,40 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 description: 
-email:
-- hi@oinam.com
+email: 
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- LICENSE.txt
+- LICENSE
 - README.md
+- _data/nav.yml
+- _includes/appearance.html
+- _includes/css/color-theme-default.css
+- _includes/css/color-theme-nord.css
+- _includes/css/color-theme-vintage.css
+- _includes/css/debug.css
+- _includes/css/forms.css
 - _includes/css/settings.css
 - _includes/css/styles-code.css
 - _includes/css/styles-extended.css
 - _includes/css/styles.css
+- _includes/css/theme-toggle.css
+- _includes/footer-ext.html
 - _includes/footer.html
+- _includes/gallery.html
+- _includes/head-custom.html
 - _includes/header.html
+- _includes/js/appearance.js
+- _includes/js/link-ext.js
+- _includes/nav.html
+- _includes/photos
+- _includes/posts-items.html
 - _includes/read-time.html
-- _includes/video.html
+- _includes/scripts.html
+- _includes/styles.html
+- _includes/video
+- _layouts/blog.html
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/page.html
@@ -99,7 +145,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.25
+rubygems_version: 3.2.26
 signing_key: 
 specification_version: 4
 summary: A simple, clean, and minimal Jekyll Theme.