jekyll-theme-cheatsheet 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 880860da700aefbe00f99f33fc4d7bd1bf6c017974a48ff1d6c99ac372110985
+  data.tar.gz: aa40013d2744e825d05ccc894ef458996426d2ae5d56931723cd63f0b2c102e4
+SHA512:
+  metadata.gz: 4376b282baea4cd49f5c849304a03f620b60bb76b37084dbd2bbe6ebfcf2129c9918e766fe8e48bf35c07c221a1e7275e3a3564255c1c1497085e4098db88a2c
+  data.tar.gz: ca35ee94b815a6dcc4b0e0abc1370f6a84a453c61f50dea37b882d95c9a571cb0ca9c779061f95aa53e383d9111b744a4a74034900a9641c7703caf91508534b

data/README.md

@@ -0,0 +1,48 @@
+# jekyll-theme-cheatsheet
+
+Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+
+To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-theme-cheatsheet"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-cheatsheet
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll-theme-cheatsheet
+
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/jekyll-theme-cheatsheet. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-cheatsheet.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,12 @@
+name: My Cheatsheet
+url: https://localhost:4000
+lang: en
+# footer:
+#  - contact:
+#    url: https://github.com/j7k6
+#    display: GitHub
+base: /
+permalink: /:title/
+encoding: utf-8
+sass:
+  style: compressed

data/_includes/main.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const inputElement = document.querySelector('header.index h1 a');
+const allItems = [...document.querySelectorAll('ul.index li')];
+
+const siteTitle = inputElement.textContent;
+
+if (inputElement != null) {
+  let q = '';
+  let timeout;
+
+  document.addEventListener('keydown', function(e) {
+    if (e.keyCode === 32) {
+      e.preventDefault();
+    }
+  });
+
+  document.addEventListener('keyup', function(e) {
+    if (e.keyCode === 27) {
+      q = '';
+    } else if (e.keyCode === 8 || e.keyCode === 46 || e.keyCode === 32 || String.fromCharCode(e.keyCode).match(/[0-9a-z]/i)) {
+      if (e.keyCode === 8 || e.keyCode === 46) {
+        q = q.slice(0, -1);
+      } else { 
+        q += e.key;
+      }
+
+      inputElement.innerHTML = q;
+
+      let qc = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/(\s\s+|\s)/g, ' ').replace(/\\/, '');
+
+      if (qc.length === 1) {
+        allItems.forEach(el => el.style.display='block');
+      }
+
+      if (qc.length > 1) {
+        clearTimeout(timeout);
+
+        timeout = setTimeout(function() {
+          allItems.forEach(el => el.style.display='none');
+
+          let queryWords = q.split(' ').map(word => `(?=.*${word}.*)`).join('');
+          let matchItems = allItems.filter(el => el.querySelector('a').innerText.match(new RegExp(`^(${queryWords}.+)`, 'i')));
+
+          if (matchItems.length === 0) {
+            document.querySelector('div.nores').style.display = 'block';
+          } else {
+            document.querySelector('div.nores').style.display = 'none';
+          }
+
+          matchItems.forEach(el => el.style.display='block');
+          matchItems.forEach(el => el.querySelector('a').innerHTML = el.querySelector('a').innerText.replace(new RegExp(q.split(' ').join('|'), 'gi'), match => `<strong>${match}</strong>`));
+        }, 100);
+      }
+    }
+
+    if (q.length === 0) {
+      [...document.querySelectorAll('ul.index li a strong')].forEach(el => el.replaceWith(...el.childNodes));
+
+      allItems.forEach(el => el.style.display='none');
+      allItems.filter(el => el.classList.contains('fav')).forEach(el => el.style.display='block');
+
+      inputElement.innerHTML = siteTitle;
+    }
+  });
+}
+
+// variable highlighter
+[...document.querySelectorAll('article code')].forEach(el => el.innerHTML = el.innerText.replace(/<([^$].*)>/gi, '&lt;$1&gt;').replace(/<\$([A-Z0-9_]+)>/g, match => `<span class="var">${match}</span>`));

data/_includes/main.scss

@@ -0,0 +1,366 @@
+@-webkit-keyframes blinker {
+  from {opacity: 1.0;}
+  to {opacity: 0.0;}
+}
+
+@keyframes blinker {
+  from {opacity: 1.0;}
+  to {opacity: 0.0;}
+}
+
+$color1: #444;
+$color2: #666;
+$color3: #b8b8b8;
+$color4: #f8f8f8;
+
+$defaultFont: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+$codeFont: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+
+html {
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: $defaultFont;
+  color: $color1;
+  line-height: 1.75;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+ul, ol {
+  li {
+    & > ul, & > ol {
+      margin: 0 0 0 1.5rem;
+    }
+  }
+}
+
+ul.index {
+  margin: 1rem auto 2rem auto;
+  list-style-type: none;
+
+  li {
+    display: none;
+    overflow: hidden;
+
+    &.fav {
+      display: block;
+
+      a:before {
+        content: attr(data-date) '\00a0\002a\00a0' !important;
+      }
+    }
+
+    a {
+      display: block;
+      line-height: 2.5;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &:before {
+        font-style: normal;
+        font-size: 80%;
+        font-weight: 400 !important;
+        content: attr(data-date) '\00a0\00a0\00a0';
+        font-family: $codeFont;
+        display: inline-block;
+        color: $color1;
+      }
+    }
+  }
+}
+
+article {
+  overflow-x: hidden;
+  margin: 1rem auto;
+
+  & > * {
+    display: block;
+    margin: 0 auto 1rem auto;
+  }
+
+  div.date {
+    font-size: 80%;
+    font-family: $codeFont;
+    font-weight: normal;
+    margin: 1rem 0 0 0;
+  }
+
+  ul, ol {
+    margin-left: 2rem;
+
+    li {
+      margin: 1rem 0;
+
+      & > * {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  h1 {
+    margin-bottom: 1rem;
+
+    & + hr {
+      margin: 0 0 3rem 0 !important;
+      width: 10%;
+    }
+  }
+
+  hr {
+    margin: 2rem 0 1rem 0;
+    height: 0;
+    border: none;
+    border-top: 1px solid $color3;
+
+    &:last-of-type {
+      width: 10%;
+      margin-top: 3rem;
+
+      & + ol {
+        font-size: 90%;
+        margin: 0 0 1rem 0 !important;
+        color: $color3;
+        counter-reset: o-counter 0;
+
+        li {
+          margin: 0;
+          line-height: 1.25;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &:before {
+            color: $color3;
+            content: '[' counter(o-counter) '] ';
+            counter-increment: o-counter;
+            font-family: $codeFont;
+            font-size: 80%;
+          }
+        }
+      }
+    }
+  }
+
+  img {
+    max-width: 90% !important;
+    display: block;
+    margin: 1rem auto;
+  }
+
+  pre, code, blockquote {
+    border-radius: 3px;
+    background: $color4;
+    color: $color2;
+  }
+
+  pre, blockquote {
+    overflow: auto;
+    padding: .5rem 1rem;
+  }
+
+  blockquote {
+    font-style: italic;
+    border-left: 3px solid $color3;
+    display: flex;
+    align-items: center;
+
+    &:before {
+      content: '!';
+      color: $color3;
+      font-size: 250%;
+      font-weight: bold;
+      font-style: normal;
+      font-family: $codeFont;
+      margin-right: 1rem;
+      line-height: 1;
+    } 
+  }
+
+  code {
+    font-size: 90%;
+    font-family: $codeFont;
+    padding: 3px;
+  }
+
+  pre {
+    scrollbar-width: none;
+
+    & > code {
+      padding: 0;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+h1, h2, h3, h4, h5 {
+  line-height: 1.3;
+  margin: 3rem 0 1.38rem;
+
+  a {
+    color: inherit;
+  }
+}
+
+h1 + h2, h2 + h3, h3 + h4, h4 + h5 {
+  margin-top: 0;
+}
+
+h1 {
+  margin: 0 0 2rem 0;
+  font-size: 1.802rem;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+}
+
+h2 {font-size: 1.602rem;}
+h3 {font-size: 1.424rem;}
+h4 {font-size: 1.266rem;}
+h5 {font-size: 1.125rem;}
+
+@-webkit-keyframes blinker {
+  from {opacity: 1.0;}
+  to {opacity: 0.0;}
+}
+@keyframes blinker {
+  from {opacity: 1.0;}
+  to {opacity: 0.0;}
+}
+
+header {
+  font-family: $codeFont;
+  margin: 2rem auto 0 auto;
+
+  h1 {
+    margin: 0 0 2rem 0;
+    font-size: 1.2rem;
+    font-weight: normal;
+
+    a {
+      color: inherit;
+      padding-bottom: .25rem;
+      border-bottom: 1px solid $color1;
+    }
+  }
+
+  &.index h1 {
+    font-size: 1.602rem;
+
+    &:after {
+      content: '\00a0';
+      text-decoration: blink;
+      animation: blinker 0.7s infinite ease-in-out alternate;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVR4AWMwMTH5717gw8AAJMAcAC3GBT28lH6HAAAAAElFTkSuQmCC);
+      margin-left: .25rem;
+    }
+  }
+}
+
+footer {
+  margin: 1rem auto;
+  padding-bottom: 2rem;
+  color: $color3;
+  font-size: 90%;
+
+  a {
+    color: inherit;
+  }
+
+  ul {
+    list-style-type: none;
+
+    li {
+      display: inline-block;
+
+      &:not(:first-child):before {
+        content: '\00B7';
+        padding: 0 .5rem;
+      }
+    }
+  }
+}
+
+table {
+  tr {
+    th {
+      font-weight: bold;
+      text-align: left;
+      padding: .5em;
+    }
+
+    td {
+      padding: .5em;
+    }
+  }
+}
+
+.wrapper {
+  width: 600px;
+  max-width: 90vw;
+  margin: 2rem auto;
+  padding-bottom: 2rem;
+}
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+span.var {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVR4AWMwMTH5717gw8AAJMAcAC3GBT28lH6HAAAAAElFTkSuQmCC);
+  color: $color4;
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+div.nores {
+  display: none;
+}
+
+@media (pointer: coarse)  {
+  header.index h1 {
+    font-size: 1.5em;
+
+    &:after {
+      display: none;
+    }
+  }
+
+  ul.index li {
+    display: block !important;
+  }
+}

data/_layouts/default.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="{{ site.lang }}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% capture styles %}
+      {% include main.scss %}
+    {% endcapture %}
+    <style>{{ styles | scssify }}</style>
+    <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="/feed.xml" >
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <header{% if page.url == '/' %} class="index"{% endif %}>
+        <h1{% if page.url != '/' %} class="small"{% endif %}><a href="/">{{ site.name }}</a></h1>
+      </header>
+
+      <div class="content">
+        {{ content }}
+      </div>
+
+      {% assign now = 'now' | date: '%Y' %}
+
+      {% if site.posts.size > 0 %}
+      {% assign posts = site.posts | sort: 'date' %}
+      {% assign start_year = posts[0].date | date: "%Y" %}
+      {% else %}
+      {% assign start_year = now %}
+      {% endif %}
+      
+      {% if start_year == now %}
+      {% assign copyright_date = start_year %}
+      {% else %}
+      {% assign copyright_date = '–' | prepend: start_year | append: now %}
+      {% endif %}
+
+      <footer>
+        <ul>
+          <li>{{ copyright_date }}</li><!--
+          --><li><a href="/feed.xml">RSS</a></li><!--
+          -->{% for item in site.footer %}{% if item.url != nil and item.display != nil %}<li><a href="{{ item.url }}">{{ item.display }}</a></li>{% endif %}{% endfor %}
+        </ul>
+      </footer>
+    </div>
+
+    <script type="application/javascript">
+      {% include main.js %}
+    </script>
+  </body>
+</html>

data/_layouts/post.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+{% assign post = page %}
+<article class="post">
+  <div class="date">{{ page.date | date_to_string }}</div>
+  <h1><a href="{{ post.id }}/">{{ post.title }}</a></h1>
+  <hr>
+  {{ content }}
+</article>

metadata

@@ -0,0 +1,62 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-theme-cheatsheet
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- j7k6
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2025-04-25 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+description:
+email:
+- mail@j7k6.org
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- _config.yml
+- _includes/main.js
+- _includes/main.scss
+- _layouts/default.html
+- _layouts/post.html
+homepage: https://github.com/j7k6
+licenses: []
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.3
+signing_key:
+specification_version: 4
+summary: minimal
+test_files: []