jekyll-theme-schatten 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 14865e03608825e8d372d90d9a383d62920e171d9ce4162e81e625264edcb4e7
+  data.tar.gz: 102dd085eb21c52ecef5cc26acae074da5b50d59f21951867caa8a93a210fa24
+SHA512:
+  metadata.gz: 9e40ce99c00771a9c8d78eabe0d901dfe05c2a9cd5c4f30016d2b6c203a92c74932cf0ac6fd7dda474149dbdd3e2f615ea240fe463476fef5ea2f5292d7ca0af
+  data.tar.gz: 55e53951ffbe4f8092d8b9018eec4180de439aa04689a2ebe56e0f6b9c734c7f798f906fd28a44fc911ff1bce586fba9d7179c06a7b30676102646dd7f1e38f1

data/LICENSE.md

@@ -0,0 +1,22 @@
+# The MIT License (MIT)
+
+Copyright (c) 2021 Paul Le
+Copyright (c) 2023 Fabian Stadler
+
+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,109 @@
+# Schatten
+
+Schatten is a modern Jekyll theme for blogs or personal websites. See the [demo](https://schatten-ioch6.ondigitalocean.app/) for a live example.
+
+![A screenshot of the Shadow theme](/assets/img/preview.png)
+
+## Attribution
+
+This theme is based on [Len Paul's theme Lagrange](https://github.com/LeNPaul/Lagrange) published under the MIT License. In order to implement more features and add my own style, I developed this theme.
+
+## Intention
+
+Schatten's original goal is to offer the following features:
+
+  * SEO features
+  * SASS/SCSS support
+  * Responsive design
+  * Modern UI with e.g. dark mode
+  * Configurable code themes
+
+## Requirements
+
+  * Jekyll 3.9.3 or higher
+
+## Supported Platforms
+
+  * GitHub Pages (only partially, some plugins are not supported)
+  * DigitalOcean App Platform
+  * Netlify
+  * GitLab Pages
+  * Any static site hoster when building locally
+
+## Installation
+
+In order to run this theme, you need an environment with Ruby and Bundler installed. If you don't have Ruby installed, you can follow the instructions [here](https://www.ruby-lang.org/en/documentation/installation/). After you have Ruby installed, you can install Bundler with `gem install bundler`.
+
+### Local Installation
+
+To install and run this theme locally, clone this repository to your machine, `cd` into the directory, and run `bundle install` to install the necessary dependencies. Then, run `bundle exec jekyll serve` to start the Jekyll server. You should see the site locally at [http://localhost:4000](http://localhost:4000).
+
+In order to server this page incrementally, you can run `bundle exec jekyll serve --incremental`. This will rebuild the site when a file is changed.
+
+### Docker
+
+You can also run this theme in a Docker container. Clone the repo a machine with Docker installed, `cd` into the docker directory, and run `docker compose up`. You should see the site locally at [http://localhost:4000](http://localhost:4000).
+
+### Cloud Deployment
+
+Note that this theme is not compatible with GitHub Pages as they have a very strict plugin policy. If you want to use this theme on GitHub Pages, you must not use the toc plugin in any of your posts/pages and the archives plugin won't work as well. 
+
+If you want to use this theme to its fullest, you must host your site on another platform, such as DigitalOcean, Netlify, or GitLab Pages. You can also host your blog on a cloud file storage service such as Amazon S3 or Azure Blob Storage.
+
+#### DigitalOcean
+
+If you want to host your site on DigitalOcean, you can use the [DigitalOcean App Platform](https://www.digitalocean.com/products/app-platform/). Simply create a new app, select your GitHub repository and chose to deploy as a static site. You can then configure the build command to be `bundle exec jekyll build -d public` and the publish directory to be autodiscovered. You can then deploy your site with a single click. Everytime you push to your repository, the site will be rebuilt and redeployed.
+
+### Starting From Scratch
+
+To completely start from scratch, simply delete all the files in the `_posts`, `assets/img`, and `menu` folder, and add your own content. You may also replace the `README.md` file with your own README. Everything in the `_data` folder and `_config.yml` file can be edited to suit your needs. You may also add/change the `favicon.ico` file to your own favicon.
+
+## Configuration
+
+### Site Variables
+
+To change site build settings, edit the `_config.yml` file found in the root of your repository, which you can tweak however you like. More information on configuration settings and plugins can be found on [the Jekyll documentation site](https://jekyllrb.com/docs/configuration/). This is also where you will be able to customize the title, description, and the author/owner of your site.
+
+In the `settings.yml` file found in the `_data` folder, you will be able to customize your site settings, such as setting Disqus comments, Google Analytics, what shows up in your menu, and social media information.
+
+### Adding Menu Pages
+
+The menu pages are found in the `menu` folder in the root directory, and can be added to your menu in the `settings.yml` file.
+
+### Posts
+
+You will find example posts in your `_posts` directory. Go ahead and edit any post and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To add new posts, simply add a file in the `_posts` directory that follows the convention of `YYYY-MM-DD-name-of-post.md` and includes the necessary front matter. Take a look at any sample post to get an idea about how it works.
+
+### YAML Front Block Matter
+
+The recommended YAML front block is:
+
+```
+---
+layout:
+title:
+author:
+categories:
+tags: []
+image:
+image_title:
+---
+```
+
+`layout` specifies which layout to use, `title` is the page or post title, `categories` can be used to better organize your posts, `tags` are used when generating related posts based on the topic of the post, and `image` specifies which images to use. `image_title` adds a subtitle to the image of the post.
+
+## Jekyll
+
+Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
+
+[jekyll-docs]: http://jekyllrb.com/docs/home
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-talk]: https://talk.jekyllrb.com/
+
+## Contributing/Feature Requests
+
+If you would like to make a feature request or report a bug or typo in the documentation, submit a GitHub issue. To contribute, create a fork of this repo and make a pull request from a new feature branch to the official repo's main branch. 
+
+Bug fixing is always welcome, for feature requests please open an issue first to discuss what you would like to add. Since the goal of this theme is to be minimalistic, I do not intend to make it feature rich.

data/_includes/category-posts.html

@@ -0,0 +1,5 @@
+{% for post in site.posts %}
+  {% if post.categories contains page.title %}
+    {% include post-preview.html %}
+  {% endif %}
+{% endfor %}

data/_includes/footer.html

@@ -0,0 +1,42 @@
+<footer class="footer">
+  <div class="footer-description">
+    <a href="{{ site.github.url }}/">{{ site.data.settings.page-title }} | {{ site.data.settings.page-subtitle }} by {{site.author }}</a>
+    <br>
+    {% if site.data.settings.copyright %}
+      &copy; {{ site.data.settings.copyright }} {{ site.author }}
+    {% endif %}
+    <br>
+    {% if site.data.settings.license %}
+      All content<a href="{{ site.data.settings.license-link }}">{{ site.data.settings.license }}</a>
+    {% endif %}
+  </div>
+  <script>
+    // implement dark mode
+    let checkbox = document.getElementsByClassName("dark-mode-toggle")[0];
+    let body = document.body;
+
+    checkbox.addEventListener('click', function () {
+      if (localStorage.getItem('dark-mode') === 'true') {
+        localStorage.setItem('dark-mode', false);
+        body.classList.toggle('light-mode');
+        this.classList.toggle('fa-toggle-off');
+        this.classList.toggle('fa-toggle-on');
+      } else {
+        localStorage.setItem('dark-mode', true);
+        body.classList.toggle('light-mode');
+        this.classList.toggle('fa-toggle-off');
+        this.classList.toggle('fa-toggle-on');
+      }
+      body.classList.toggle('dark-mode');
+    });
+    if (localStorage.getItem('dark-mode') === 'true') {
+      body.classList.toggle('dark-mode');
+      checkbox.classList.toggle('fa-toggle-off');
+      checkbox.classList.toggle('fa-toggle-on');
+    } else {
+      body.classList.toggle('light-mode');
+      checkbox.classList.toggle('fa-toggle-off');
+      checkbox.classList.toggle('fa-toggle-on');
+    }
+  </script>
+</footer>

data/_includes/google-analytics.html

@@ -0,0 +1,8 @@
+<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.data.settings.google-ID }}', 'auto');
+  ga('send', 'pageview');
+</script>

data/_includes/head.html

@@ -0,0 +1,31 @@
+<head>
+  <title>
+    {% if page.title == "Home" %}
+      {{ site.data.settings.page-title }} | {{ site.data.settings.page-subtitle }}
+    {% else %}
+      {{ page.title }} | {{ site.data.settings.page-title }}
+    {% endif %}
+  </title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="{{ site.github.url }}/assets/css/main.css">
+  <!-- Use Atom -->
+  {% feed_meta %}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <script type="text/javascript" async
+    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
+    MathJax.Hub.Config({
+        tex2jax: {
+          inlineMath: [['$', '$'], ['\\(', '\\)']]
+        }
+      });
+    </script>
+  <!-- Add fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Joan&family=Pathway+Extreme:opsz@8..144&display=swap" rel="stylesheet">
+  <!-- Google Analytics -->
+  {% include google-analytics.html %}
+  <!-- Use Jekyll SEO plugin -->
+  {% seo %}
+</head>

data/_includes/header.html

@@ -0,0 +1,6 @@
+<header class="header">
+  <h3 class="header-title">
+    <a href="{{ site.github.url }}/">{{ site.data.settings.page-title }}</a>
+    <small class="header-subtitle">{{ site.data.settings.page-subtitle }}</small>
+  </h3>
+</header>

data/_includes/navbar.html

@@ -0,0 +1,10 @@
+<nav class="navbar">
+  <a href="{{ site.github.url }}/">
+    <icon class="fa fa-home"></icon>
+  </a>
+  {% for item in site.data.settings.pages %}
+    <a href="{{ site.github.url }}{{ item.link }}">
+      {{ item.name }}
+    </a>
+  {% endfor %}
+</nav>

data/_includes/post-preview.html

@@ -0,0 +1,20 @@
+<article class="post-preview">
+    <div class="post-preview-meta" {% if post.image %}{% else %}style="width:100%;"{% endif %}>
+      <h2>
+        <a href="{{ site.github.url }}{{ post.url }}">
+          {{ post.title }}
+        </a>
+      </h2>
+      <p class="post-date">
+        {{ post.date | date: "%B %-d, %Y" }} | {{ post.author }} | {{ post.content | number_of_words | divided_by: 200 | append: " min" }}
+      </p>
+      <p>
+      {{ post.excerpt | strip_html | truncatewords: 35 }}
+      </p>
+    </div>
+    {% if post.image %}
+    <div class="post-image-preview">
+        <a href="{{ site.github.url }}{{ post.url }}"><img src="{{ post.image }}" alt="{{ post.title }}"></a>
+    </div>
+    {% endif %}
+</article>

data/_includes/recent-posts.html

@@ -0,0 +1,3 @@
+{% for post in site.posts limit:5 %}
+  {% include post-preview.html %}
+{% endfor %}

data/_includes/related-posts.html

@@ -0,0 +1,13 @@
+<div class="related">
+  <h2>Related Posts</h2>
+  {% assign related_posts = site.posts | where:"categories", page.categories %}
+  {% if related_posts.size == 0 %}
+    {% assign related_posts = site.posts | where:"tags", page.tags %}
+  {% endif %}
+  {% if related_posts.size == 0 %}
+    {% assign related_posts = site.posts | sort: 'date' | reverse | limit: 3 %}
+  {% endif %}
+  {% for post in related_posts limit:3 %}
+    {% include post-preview.html %}
+  {% endfor %}
+</div>

data/_includes/sharing-links.html

@@ -0,0 +1,12 @@
+<div class="sharing">
+    <h2>Feel free to share this article</h2>
+    <div class="sharing-icons">
+      <a href="https://news.ycombinator.com/submitlink?u={{ site.url }}{{ page.url }}&amp;t={{ page.title }}" target="_blank"><i class="fa-brands fa-hacker-news" aria-hidden="true"></i></a>
+      <a href="https://www.reddit.com/submit?url={{ site.url }}{{ page.url }}&amp;title={{ page.title }}" target="_blank"><i class="fa-brands fa-reddit" aria-hidden="true"></i></a>
+      <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site.url }}{{ page.url }}" target="_blank"><i class="fa-brands fa-linkedin" aria-hidden="true"></i></a>
+      <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" target="_blank"><i class="fa-brands fa-facebook" aria-hidden="true"></i></a>
+      <a href="https://mastodon.social/share?text={{ page.title }}&amp;url={{ site.url }}{{ page.url }}" target="_blank"><i class="fa-brands fa-mastodon" aria-hidden="true"></i></a>
+      <a href="mailto:?subject={{ site.title }}&amp;body={{ site.url }}{{ page.url }}" target="_blank"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>
+      <a href="https://twitter.com/intent/tweet?text={{ page.title }}&amp;url={{ site.url }}{{ page.url }}" target="_blank"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a>
+    </div>
+  </div>

data/_includes/social-icons.html

@@ -0,0 +1,11 @@
+<nav class="social-icons">
+  {% for item in site.data.settings.social %}
+    {% assign first_char = item.link | slice: 0 %}
+    {% if item.icon == 'mastodon' %}
+      <a class="icon"  rel="me" href="{{ item.link }}" target="_blank"><i class="fa-brands fa-{{ item.icon }}" aria-hidden="true"></i></a>
+    {% else %}
+      <a class="icon" href="{{ item.link }}" target="_blank"><i class="fa-{{ item.icon-class }} fa-{{ item.icon }}" aria-hidden="true"></i></a>
+    {% endif %}
+  {% endfor %}
+  <i type="button" class="dark-mode-toggle fas fa-toggle-off"></i>
+</nav>

data/_includes/tag-posts.html

@@ -0,0 +1,6 @@
+
+{% for post in site.posts %}
+  {% if post.tags contains page.title %}
+    {% include post-preview.html %}
+  {% endif %}
+{% endfor %}

data/_includes/year-posts.html

@@ -0,0 +1,7 @@
+{% for post in site.posts %}
+  {% assign year = post.date | date: "%Y" %}
+  {% assign title = page.url | remove: "/" %}
+  {% if year == title %}
+    {% include post-preview.html %}
+  {% endif %}
+{% endfor %}

data/_layouts/archive.html

@@ -0,0 +1,39 @@
+---
+layout: default
+---
+
+<h1>
+  {{ page.title }}
+</h1>
+
+<div class="archive">
+  <h2>Years</h2>
+  <ul>
+  {% assign years = '' %}
+  {% for post in site.posts %}
+    {% assign year = post.date | date: "%Y" %}
+    {% assign years_split = years | split: ' - ' %}
+    {% if years_split contains year %}
+    {% else %}
+      <li><a href="{{ site.github.url }}/{{ year }}">{{ year }}</a></li>
+    {% endif %}
+    {% assign years = years | append: ' - ' | append: year %}
+  {% endfor %}
+  </ul>
+
+  <h2>Categories</h2>
+  <ul>
+  {% assign categories = site.categories | sort %}
+  {% for category in categories %}
+    <li><a href="{{ site.github.url }}/categories/{{ category | first }}">{{ category | first }}</a></li>
+  {% endfor %}
+  </ul>
+
+  <h2>Tags</h2>
+  <ul>
+  {% assign tags = site.tags | sort %}
+  {% for tag in tags %}
+    <li><a href="{{ site.github.url }}/tags/{{ tag | first }}">{{ tag | first }}</a></li>
+  {% endfor %}
+  </ul>
+</div>

data/_layouts/category-archive.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<h1>
+  Category: {{ page.title }}
+</h1>
+
+{% include category-posts.html %}

data/_layouts/default.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  {% include head.html %}
+  <body>
+    <div class="container">
+      {% include header.html %}
+      {% include social-icons.html %}
+      {% include navbar.html %}
+      <div class="content-container">
+        {{ content }}
+      </div>
+      {% include footer.html %}
+    </div>
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<h1>
+  Recent Posts
+</h1>
+
+{% include recent-posts.html %}

data/_layouts/page.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<h1>
+  {{ page.title }}
+</h1>
+<article>
+  {{ content }}
+</article>

data/_layouts/post.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+<h1>
+  {{ page.title }}
+</h1>
+{% if page.image %}
+  {% if page.image contains 'http' %}
+    <img class="post-image" src="{{ page.image }}" alt="{{ page.image_description }}">
+  {% else %}
+    <img class="post-image" src="{{ site.github.url }}/{{ page.image }}" alt="{{ page.image_description }}">
+  {% endif %}
+  {% if page.image_title %}
+    <p class="post-image-subtitle">{{ page.image_title }}</p>
+  {% endif %}
+{% endif %}
+<article class="post-content">
+  {{ content }}
+</article>
+
+<p class="post-date">
+  Written on {{ page.date | date: "%B %-d, %Y" }} by {{ page.author }}.
+</p>
+
+{% include sharing-links.html %}
+
+{% if site.hide_related_posts != true %}
+  {% include related-posts.html %}
+{% endif %}

data/_layouts/tag-archive.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<h1>
+  Category: {{ page.title }}
+</h1>
+
+{% include tag-posts.html %}

data/_layouts/year-archive.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<h1>
+  Posts written in {{ page.url | remove: "/"}}
+</h1>
+
+{% include year-posts.html %}

data/_sass/_-sections-dir.scss

@@ -0,0 +1,12 @@
+@import "base",
+        "code",
+        "container",
+        "post",
+        "social-icons",
+        "footer",
+        "header",
+        "navbar",
+        "archive",
+        "dark-mode",
+        "light-mode",
+        "mobile"

data/_sass/_archive.scss

@@ -0,0 +1,5 @@
+.archive {
+    a {
+        font-size: 16px;
+    }
+}

data/_sass/_base.scss

@@ -0,0 +1,122 @@
+/*
+  Base
+*/
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  display: flow-root;
+  font-family: $serif-font-family;
+  line-height: 1.75rem;
+  top: 0;
+  margin: 0;
+
+  // fade in effect; removed because can be annoying
+  // animation: body 2s;
+  // -webkit-animation: body 2s;
+  // -moz-animation: body 2s;
+  // -o-animation: body 2s;
+  // -ms-animation: body 2s;
+
+  @keyframes body {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+h1 {
+  font-size: 26px;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 21px;
+}
+
+h4 {
+  font-size: 19px;
+}
+
+h5 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+h1 a {
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $sans-serif-font-family;
+}
+
+p {
+  font-size: 16px;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  text-align: justify;
+}
+
+a {
+  text-decoration: underline;
+}
+
+a:hover {
+  transition: 0.3s;
+  border-bottom: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 5px;
+}
+
+blockquote {
+  margin: 10px 20px 10px;
+  padding: 0px 15px;
+  border-left: 0.25em solid;
+  line-height: 1.5;
+}
+
+hr {
+  border-top: 1px solid;
+}
+
+/*
+  Tables
+*/
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 30px;
+  width: 100%;
+}
+
+table,
+th,
+td {
+  border: 1px solid black;
+}
+
+th,
+td {
+  padding: 15px;
+  text-align: left;
+}