moonwalk 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b824a918995982654ff750310424a3f6e24fe8de33abd654107124c28214b38e
+  data.tar.gz: 853a3bdae09be4088f51e0d000989c81e203de813d99e80d72cb4402ef94302b
+SHA512:
+  metadata.gz: 4b3d9b1772cb422833b78d6fbc88615fd0f6da36fbcd229c07b75069dea80ab89978e9d4a6432813a9bbacb2011481af45232074f6a224c72dc03edb9da2a2f5
+  data.tar.gz: 155f708cd9fb095dd9ac7e7296252fe12f9aa835d3c9c6cf65094c5f7dd778a4db4502115d1e29ce3b354e9b2750bcd0d3b6f61265028dcb8e606a1f511be987

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Abhinav Saxena
+
+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,137 @@
+# moonwalk
+
+<img src="https://raw.githubusercontent.com/abhinavs/moonwalk/master/logo.png" width="32" align="left" />A fast and minimalistic blog with clean dark mode. Based on [no style please!](https://riggraz.dev/no-style-please/) 
+
+<h3 align="center"><a href="https://abhinavs.github.io/moonwalk/">Try the Demo</a></h3>
+
+<img src="https://raw.githubusercontent.com/abhinavs/moonwalk/master/_screenshots/moonwalk.png" />
+
+## Features
+* Light & dark mode with theme switcher
+* Vertical list, horizontal list, card list
+* Landing page with navbar, footer, portfolio
+* Fast (very minimal CSS) - for more information on performance see [Lighthouse report](https://raw.githubusercontent.com/abhinavs/moonwalk/master/_screenshots/lighthouse-report.png)
+* Responsive and mobile friendly
+* SEO optimized (uses [Jekyll SEO Tag](https://github.com/jekyll/jekyll-seo-tag))
+* RSS feed (uses [Jekyll Feed](https://github.com/jekyll/jekyll-feed))
+* Easy to extend
+* Fully compatible with [GitHub Pages](https://pages.github.com/) (see [GitHub Pages installation](#github-pages-installation))
+
+## Installation
+
+If you haven't already created your blog using Jekyll, follow the [instructions](https://jekyllrb.com/docs/) to do so from Jekyll's documentation.
+
+NOTE: if you are using Jekyll with GitHub Pages, see the [GitHub Pages installation section](#github-pages-installation).
+
+Then, to style your blog with this theme, add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "moonwalk"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: moonwalk
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install moonwalk
+
+### GitHub Pages installation
+
+If you want to use this theme for your Jekyll's site deployed on [GitHub Pages](https://pages.github.com/), follow the instructions on [this page](https://docs.github.com/en/github/working-with-github-pages/adding-a-theme-to-your-github-pages-site-using-jekyll#adding-a-theme).
+
+## Usage
+
+You can edit `_config.yml` file to customize your blog. You can change things such as the name of the blog, the author, the appearance of the theme (light, dark or auto), how dates are formatted, etc. Customizable fields should be straightforward to understand. Still, `_config.yml` contains some comments to help you understand what each field does.
+
+For further customization (e.g. layout, CSS) see the [official Jekyll's documentation](https://jekyllrb.com/docs/themes/#overriding-theme-defaults) on customizing gem-based themes.
+
+### Customize the menu
+
+In order to add/edit/delete entries in the home page, you can copy the `home.yml` file inside `_data` folder. Through that file you can define the structure of the menu and add data for navbar, footer, portfolio or simply remove all of that and use simple blog layout. Take a look at the default configuration to get an idea of how it works and read on for a more comprehensive explaination.
+
+The `home.yml` file accepts the following fields:
+
+1. Vertical list
+  - `entries` define a new unordered list that will contain menu entries
+  - each entry is marked by a `-` at the beginning of the line
+  - each entry has the following attributes:
+    - `title`, which defines the text to render for that menu entry
+    - `url`, which can either be a URL or `false`. If it is `false`, the entry will be rendered as plain text; otherwise the entry will be rendered as a link pointing to the specified URL. Note that the URL can either be relative or absolute.
+    - `post_list`, which can be `true` or `false`. If it is true, the entry will have all posts in the site as subentries. This is used to render your post list.
+    - `entries`, yes, you can have entries inside entries. In this way you can create nested sublists!
+2. Card list - cards are used to showcase portfolio projects. Please see `project_entries` in `_data/home.yml` file
+  - each entry is marked by a `-` at the beginning of the line
+  - each entry has the following attributes:
+    - `title` defines the header of the card
+    - `desc` is the body of the card
+    - `url` is a relative or absolute link which this card can point to.
+    - `highlight` in case you want to highlight something, keep the text short though
+3. Horizontal list - moonwalk uses horizontal lists to create navbar and footer. Please see `navbar_entries` and `footer_entries` in `data/home.yml` file
+  - each entry is marked by a `-` at the beginning of the line
+  - each entry has the following attributes:
+    - `title` defines the header of the card
+    - `url` is a relative or absolute link which this card can point to.
+
+
+### Pro tips
+1. Moonwalk has 3 in-built layouts:
+  - post - for content
+  - blog - for listing blog posts
+  - home - for landing page
+  you can change your `index.md` file to use either home or blog layout.
+
+2. It is extremely easy to tweak the color scheme. 
+  - for light mode, customize these css variables
+```css
+html {
+    --bg: #fff;
+    --bg-secondary: #f8f9fa;
+    --headings: #000;
+    --text: #333;
+    --links: blue;
+    --highlight: #ffecb2; // light yellow
+}
+```
+  - for dark mode customize these css variables
+```css
+@mixin dark-appearance {
+  html, body  {
+      --bg: #1f242A;
+      --bg-secondary: #323945;
+      --headings: #3D9970;
+      --text: #adb5bd;
+      --links: #91a7ff;
+      --highlight: #ffd8a8;
+      --highlight: #ffd43b;
+  };
+}
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/abhinavs/moonwalk.
+
+## 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 `moonwalk.gemspec` accordingly.
+
+## Acknowledgement
+This theme's original base is [no style please!](https://github.com/riggraz/no-style-please) theme created by  [Riccardo Graziosi](https://riggraz.dev/) - many thanks to him for creating a wonderful theme with nearly no css. 
+
+## 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,32 @@
+title: Moonwalk
+author: Abhinav Saxena
+url: https://www.abhinav.co # root address of the site
+description: > # description of the site (multiple lines allowed)
+  Moonwalk is a fast and elegant Jekyll theme with a clean dark mode. It comes with horizontal list (for navbar and footer), card list (for portfolio), and a generic vertical list. It is very easy to modify in case you want to build over it - please see _layouts/home.html to do that.
+
+permalink: /:slug.html
+
+favicon: "./logo.png" # relative path to site's favicon
+# goat_counter: "yoursitename" # put your GoatCounter name if you want to use GoatCounter analytics
+
+#theme: moonwalk # if you are using GitHub Pages, change it to remote_theme: abhinavs/moonwalk
+remote_theme: abhinavs/moonwalk
+
+theme_config:
+  appearance: "dark" # can be "light", "dark" or "auto"
+  back_home_text: "home.." # customize text for homepage link in post layout
+  date_format: "%Y-%m-%d" # customize how date is formatted
+  show_description: true # show blog description in home page
+  show_navbar: true # show horizontal navbar in home page
+  show_footer: true # show footer links in home page,add in _data/home.yml
+  show_projects: true # show projects as cards, add in _data/home.yml
+  show_old_projects: true # show old projects as cards, add in _data/home.yml
+  show_misc_list: true # show generic vertical list for misc details, add _data/home.yml
+
+
+sass:
+  style: :compressed
+
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag

data/_includes/card_list.html

@@ -0,0 +1,26 @@
+<ul class="horizontal-list">
+  {% for item in include.collection %}
+
+    <li class="card">
+      <a href="{{ item.url }}">
+        <span class="header">
+          {{ item.title }}
+
+          {% if item.highlight %}
+            <mark>{{ item.highlight }}</mark>
+          {% endif %}
+
+        </span>
+
+        <hr />
+
+        {% if item.desc != false %}
+        <p class="body">
+          {{ item.desc }}
+        </p>
+        {% endif %}
+      </a>
+    </li>
+
+  {% endfor %}
+</ul>

data/_includes/goat_counter.html

@@ -0,0 +1,6 @@
+<script data-goatcounter="https://{{ site.goat_counter }}.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
+
+<noscript>
+  <img src="https://{{ site.goat_counter }}.goatcounter.com/count?p=/test-img">
+</noscript>

data/_includes/head.html

@@ -0,0 +1,20 @@
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <title>
+    {% if page.title %}
+      {{ page.title }}
+    {% else %}
+      {{ site.title }}
+    {% endif %}
+  </title>
+
+  {% seo title=false %}
+  {% feed_meta %}
+
+  <link rel="shortcut icon" type="image/x-icon" href="/{{ site.favicon }}" />
+  <link rel="stylesheet" href="{{ site.url }}/assets/css/main.css" />
+  {% include toggle_theme_js.html %}
+</head>

data/_includes/horizontal_list.html

@@ -0,0 +1,10 @@
+<ul class="horizontal-list">
+  {% for item in include.collection %}
+    <li>
+      <a href="{{ item.url }}">
+        {{ item.title }}
+      </a>
+      &nbsp;&nbsp;
+    </li>
+  {% endfor %}
+</ul>

data/_includes/post_list.html

@@ -0,0 +1,9 @@
+{% if site.posts.size > 0 %}
+  <ul>
+    {% for post in site.posts %}
+      <li>
+        {{ post.date | date: site.theme_config.date_format }} <a href="{{ post.url | relative_url }}">{{ post.title | downcase }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}

data/_includes/toggle_theme_button.html

@@ -0,0 +1,10 @@
+<button title="Toggle Theme" class="theme-toggle">
+  <svg viewBox="0 0 32 32" width="24" height="24" fill="currentcolor">
+    <circle cx="16" cy="16" r="14" fill="none" stroke="currentcolor" stroke-width="4"></circle>
+    <path d="
+             M 16 0
+             A 16 16 0 0 0 16 32
+             z">
+    </path>
+  </svg>
+</button>

data/_includes/toggle_theme_js.html

@@ -0,0 +1,27 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" defer></script>
+<script type="text/javascript">
+  document.addEventListener('turbolinks:load', themeChange);
+    function themeChange(){
+        let button = document.querySelector('.theme-toggle');
+
+        button.addEventListener('click', function(e){
+            let currentTheme = document.documentElement.getAttribute('data-theme');
+            if(currentTheme === 'dark') {
+                transition();
+                document.documentElement.setAttribute('data-theme','light');
+            } else {
+                transition();
+                document.documentElement.setAttribute('data-theme', 'dark');
+              }
+          });
+
+        // Adds the 'transition' class to <html> for CSS fun
+        let transition = () =>{
+            document.documentElement.classList.add('transition');
+            window.setTimeout(()=>{
+                document.documentElement.classList.remove('transition');
+              }, 1000);
+          }
+      }
+</script>
+

data/_includes/vertical_list.html

@@ -0,0 +1,19 @@
+<ul>
+  {% for item in include.collection %}
+    <li>
+    {% if item.url != false %}
+      <a href="{{ item.url }}">{{ item.title }}</a>
+    {% else %}
+      {{ item.title }}
+    {% endif %}
+
+    {% if item.post_list == true %}
+      {% include post_list.html %}
+    {% endif %}
+
+    {% if item.entries %}
+      {% include vertical_list.html collection=item.entries %}
+    {% endif %}
+    </li>
+  {% endfor %}
+</ul>

data/_layouts/blog.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+<a href="{{ site.url }}">{{ site.theme_config.back_home_text }}</a>
+
+<header>
+  <h1>{{ site.title }}</h1>
+</header>
+
+{% include post_list.html %}

data/_layouts/default.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: "en" }}" class="html" data-theme="{{ site.theme_config.appearance | default: "auto" }}">
+        {%- include head.html -%}
+  <body>
+    <main class="page-content" aria-label="Content">
+        <div class="w">
+            {{ content }}
+            {% include toggle_theme_button.html %}
+        </div>
+    </main>
+
+    {% if site.goat_counter and jekyll.environment == "production" %}
+        {% include goat_counter.html %}
+    {% endif %}
+
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,42 @@
+---
+layout: default
+---
+
+<header>
+{% if site.theme_config.show_navbar == true %}
+  {% include horizontal_list.html collection=site.data.home.navbar_entries %}
+  <div class="dashed" />
+{% endif %}
+
+  <h1>{{ site.title }}</h1>
+  {% if site.theme_config.show_description == true %}
+    <p>{{ site.description }}</p>
+  {% endif %}
+</header>
+
+{% if site.theme_config.show_projects == true %}
+  <h2>Portfolio</h2>
+  {% include card_list.html collection=site.data.home.project_entries %}
+{% endif %}
+
+{% if site.theme_config.show_misc_list == true %}
+  <h2>Details</h2>
+  {% include vertical_list.html collection=site.data.home.misc_entries %}
+{% endif %}
+
+
+<h2>Blog</h2>
+{% include post_list.html %}
+
+{% if site.theme_config.show_old_projects == true %}
+  <h2>Old Projects</h2>
+  {% include card_list.html collection=site.data.home.old_project_entries %}
+{% endif %}
+
+
+{% if site.theme_config.show_footer == true %}
+  <footer>
+    <div class="dashed" />
+    {% include horizontal_list.html collection=site.data.home.footer_entries %}
+  </footer>
+{% endif %}

data/_layouts/post.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<a href="{{ site.url }}">{{ site.theme_config.back_home_text }}</a>
+<h1>{{ page.title }}</h1>
+{{ content }}

data/_sass/list.scss

@@ -0,0 +1,56 @@
+ul.horizontal-list {
+  display: flex;
+  //justify-content: space-between;
+  margin-top: 0em;
+  margin-left: -40px;
+  flex-wrap: wrap;
+
+  li {
+    display:inline;
+    margin-right: 1em;
+  }
+
+  li a {
+    text-decoration: none;
+    font-weight: normal
+  }
+
+}
+
+.card {
+  padding: 1em;
+  border: 1px var(--text) solid;
+  width: 10em;
+  height: 10em;
+  text-align: center;
+  font-size: 1em;
+  align-items: center;
+  background-color: var(--bg-secondary);
+  margin-bottom: 0.8em;
+
+  .header {
+    color: var(--links);
+  }
+
+  .body {
+    font-size: 0.8em;
+  }
+
+  hr {
+    margin: 0.5em 0;
+  }
+
+}
+
+/* Responsive cards - one column layout on small screens */
+@media screen and (max-width: 600px) {
+  ul.horizontal-list li.card {
+    width: 100%;
+    display: block;
+    margin-bottom: 1em;
+    margin-left: 1em;
+    a, .header {
+      font-size: 1em;
+    }
+  }
+}

data/_sass/moonwalk.scss

@@ -0,0 +1,132 @@
+html {
+    --bg: #fff;
+    --bg-secondary: #f8f9fa;
+    --headings: #000;
+    --text: #333;
+    --links: blue;
+    --highlight: #ffecb2; // light yellow
+}
+@mixin dark-appearance {
+  html, body  {
+      --bg: #1f242A;
+      --bg-secondary: #323945;
+      --headings: #3D9970;
+      --text: #adb5bd;
+      --links: #91a7ff;
+      --highlight: #ffd8a8;
+      --highlight: #ffd43b;
+  };
+}
+html[data-theme="dark"] { @include dark-appearance; }
+
+@media (prefers-color-scheme: dark) {
+  body[data-theme="auto"] { @include dark-appearance; }
+}
+
+html { height: 100%; }
+
+body {
+  font-family: monospace;
+  font-size: 1rem;
+  line-height: 1.5;
+  margin: 0;
+  min-height: 100%;
+}
+
+h2, h3, h4, h5 { margin-top: 1.5em; }
+
+hr { margin: 1em 0; }
+
+p { margin: 1em 0; }
+
+li { margin: 0.4em 0; }
+
+.w {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 4em 2em;
+}
+
+table, th, td {
+  width: 100%;
+  border: thin solid black;
+  border-collapse: collapse;
+  padding: 0.4em;
+}
+
+div.highlighter-rouge code, code.highlighter-rouge {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+blockquote {
+  font-style: italic;
+  border: thin solid black;
+  padding: 1em;
+
+  p { margin: 0; }
+}
+
+img {
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+
+html, body {
+    background-color: var(--bg);
+    color: var(--text);
+}
+h1, h2, h3, h4, h5, h6 {
+    color: var(--headings);
+}
+p, strong, b, em, span, small, li, hr, table, code, figcaption {
+    color: var(--text);
+}
+code, blockquote {
+  background-color: var(--bg-secondary);
+  border: 1px var(--text) solid;
+}
+a {
+  color: var(--links);
+}
+*:target { background-color: var(--bg-secondary); }
+
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+    transition: all 250ms !important;
+    transition-delay: 0 !important;
+}
+
+.theme-toggle {
+  color: var(--text);
+  background-color: transparent;
+  padding: 4px;
+  cursor: pointer;
+  margin: 1em;
+  position: fixed;
+  right: 0;
+  top: 0;
+  border: 2px transparent solid;
+  outline: none;
+}
+
+.theme-toggle:hover {
+  color: var(--links);
+  outline: none;
+}
+.theme-toggle:focus {
+  outline: none;
+}
+.dashed {
+  border-top: 1px var(--text) dashed;
+  margin: 0.5em 0;
+}
+mark {
+  padding: 0.4em;
+  background-color: var(--highlight);
+  font-size: 0.8em;
+}

data/assets/css/main.scss

@@ -0,0 +1,5 @@
+---
+---
+
+@import "moonwalk";
+@import "list";

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: moonwalk
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Abhinav Saxena
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2020-10-29 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.1.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.1.1
+- !ruby/object:Gem::Dependency
+  name: jekyll-feed
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.15.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.15.0
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.7.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.7.1
+description:
+email:
+- abhinav061@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- _config.yml
+- _includes/card_list.html
+- _includes/goat_counter.html
+- _includes/head.html
+- _includes/horizontal_list.html
+- _includes/post_list.html
+- _includes/toggle_theme_button.html
+- _includes/toggle_theme_js.html
+- _includes/vertical_list.html
+- _layouts/blog.html
+- _layouts/default.html
+- _layouts/home.html
+- _layouts/post.html
+- _sass/list.scss
+- _sass/moonwalk.scss
+- assets/css/main.scss
+homepage: https://github.com/abhinavs/apic-simple-blog
+licenses:
+- MIT
+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.1.4
+signing_key:
+specification_version: 4
+summary: A fast and minimalist Jekyll theme with clean dark mode.
+test_files: []