juicelang-theme 0.3.4 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d73b2f6ebdca5313c0cc02930600bbb6c32e3e331599b33c7f3da0c5daec3f3
-  data.tar.gz: 3907168273b4eef95b3fc3465dc1f785163803dd00aefb194f196bfdb824c695
+  metadata.gz: 4e2847460c2f70f83c540e7eae4abd5ea93e6adcd3c028f99416b8849747301b
+  data.tar.gz: bb018cf890e58bbc704d5c9ba9f45099904a0f40e7d6c1b6ba941882295c2e85
 SHA512:
-  metadata.gz: 3ea9fd205da69b65afc67dff6379448f3f17b7f9dfca58ffdc9c3a5dc3e0399eb863d640327b84844894566361ae8a1ede91a0f84c63bc68b45f01720734af97
-  data.tar.gz: 4d626bab5570639a8325d39fd7d8fbb217b49252976ba2458ea4b7188526649d6956fc853fd0fa300c8b98bece0d477904789c3ae15ec5a36546b994def9b5ea
+  metadata.gz: 02d5ce05ffc73eb2af02ecd25a98b9fe9c5ee796161084c4c7ed42ac6bda0a5647ed08e38ae6387f6c55283dfe1e179099fc34df6ffca897594c17b1614c3561
+  data.tar.gz: d7cf5e0e84e02d7bba18fd2174bf48d4ac1396a0397f707ece42edf693adb604de74a79a22f5d16491e01d5bf755a535fa471d29ba192802b8b898d223dfcc8e

data/README.md

@@ -8,28 +8,34 @@ This is the theme of the website of the *juice* programming language ([juicelang
 Add this line to your Jekyll site's `Gemfile`:
 
 ```ruby
-gem "juicelang-theme"
+gem "juicelang-theme", "~> 0.4", group: :jekyll_plugins
 ```
 
-And add this line to your Jekyll site's `_config.yml`:
+And add the following lines to your Jekyll site's `_config.yml`:
 
 ```yaml
 theme: juicelang-theme
+plugins:
+  - juicelang-theme
 ```
 
-And then execute:
+Then execute:
 
-    $ bundle
+```bash
+$ bundle install
+```
 
-Or install it yourself as:
+Or install the gem yourself using:
 
-    $ gem install juicelang-theme
+```bash
+$ gem install juicelang-theme
+```
 
 ## Development
 
 To set up your environment to develop this theme, run `bundle install`.
 
- To test this 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 this theme's contents. As you make modifications to this theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+To test this theme, run `bundle exec jekyll serve --watch` 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 this theme's contents. As you make modifications to this theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
 
 ## License
 

data/_includes/nav.html

@@ -3,7 +3,7 @@
         <ul class="uk-nav-default" uk-nav='{"toggle": "> a.nav-parent-toggle"}''>
             {% assign navigation = site.data.navigation[include.navigation] %}
             {% assign indexPage = site.pages | find: "path", navigation.index_path %}
-            <li class="uk-nav-header"><a href="{{ indexPage.url | absolute_url }}">{{ navigation.title }}</a></li>
+            <li class="uk-nav-header"><a href="{{ indexPage | url_without_ext }}">{{ navigation.title }}</a></li>
             {% include nav_list.html menu=navigation.menu accordion=true %}
         </ul>
     </div>

data/_includes/nav_list.html

@@ -3,7 +3,7 @@
     {% if item.children %}
         {% assign active = itemPage | is_active?: item.children %}
         <li class="uk-parent{% if active %} uk-active uk-open{% endif %} uk-grid-collapse" uk-grid>
-            <a href="{{ itemPage.url | absolute_url }}">{{ itemPage.title }}</a>
+            <a href="{{ itemPage | url_without_ext }}">{{ itemPage.title }}</a>
             {% if include.accordion %}
                 <a href="#" class="nav-parent-toggle uk-width-expand"{% if active %} aria-expanded="true"{% endif %}><span uk-nav-parent-icon></span></a>
             {% endif %}
@@ -14,7 +14,7 @@
     {% else %}
         {% assign active = itemPage | is_active? %}
         <li{% if active %} class="uk-active"{% endif %}>
-            <a href="{{ itemPage.url | absolute_url }}">{{ itemPage.title }}</a>
+            <a href="{{ itemPage | url_without_ext }}">{{ itemPage.title }}</a>
         </li>
     {% endif %}
 {% endfor %}

data/_includes/previous_and_next.html

@@ -0,0 +1,23 @@
+{% if page.nav %}
+    {% assign previousAndNext = page | previous_and_next: site.data.navigation[page.nav] %}
+    {% assign previous = previousAndNext['previous'] %}
+    {% assign next = previousAndNext['next'] %}
+    <div class="uk-container uk-container-small uk-margin-medium-top">
+        <ul class="uk-pagination">
+            {% if previous %}
+                <li>
+                    <a href="{{ previous | url_without_ext }}">
+                        <span class="uk-margin-small-right" uk-pagination-previous></span> Previous
+                    </a>
+                </li>
+            {% endif %}
+            {% if next %}
+                <li class="uk-margin-auto-left">
+                    <a href="{{ next | url_without_ext }}">
+                        Next <span class="uk-margin-small-left" uk-pagination-next></span>
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+{% endif %}

data/_includes/toc.html

@@ -0,0 +1,9 @@
+{% unless page.no_toc %}
+    <div class="sidebar-right uk-visible@l">
+        <div uk-sticky="offset: 175">
+            <ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true; offset: 175">
+                {% toc %}
+            </ul>
+        </div>
+    </div>
+{% endunless %}

data/_layouts/default.html

@@ -10,20 +10,20 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-        <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/images/icons/apple-touch-icon.png' | relative_url }}">
-        <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/images/icons/favicon-32x32.png' | relative_url }}">
-        <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/images/icons/favicon-16x16.png' | relative_url }}">
-        <link rel="manifest" href="{{ '/assets/images/icons/site.webmanifest' | relative_url }}">
-        <link rel="mask-icon" href="{{ '/assets/images/icons/safari-pinned-tab.svg' | relative_url }}" color="#df8e15">
-        <link rel="shortcut icon" href="{{ '/assets/images/icons/favicon.ico' | relative_url }}">
+        <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/images/icons/apple-touch-icon.png' | absolute_url }}">
+        <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/images/icons/favicon-32x32.png' | absolute_url }}">
+        <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/images/icons/favicon-16x16.png' | absolute_url }}">
+        <link rel="manifest" href="{{ '/assets/images/icons/site.webmanifest' | absolute_url }}">
+        <link rel="mask-icon" href="{{ '/assets/images/icons/safari-pinned-tab.svg' | absolute_url }}" color="#df8e15">
+        <link rel="shortcut icon" href="{{ '/assets/images/icons/favicon.ico' | absolute_url }}">
         <meta name="apple-mobile-web-app-title" content="juicelang">
         <meta name="application-name" content="juicelang">
         <meta name="msapplication-TileColor" content="#df8e15">
-        <meta name="msapplication-config" content="{{ '/assets/images/icons/browserconfig.xml' | relative_url }}">
+        <meta name="msapplication-config" content="{{ '/assets/images/icons/browserconfig.xml' | absolute_url }}">
         <meta name="theme-color" content="#df8e15" media="(prefers-color-scheme: light)">
         <meta name="theme-color" content="#02020b" media="(prefers-color-scheme: dark)">
 
-        <link href="{{ '/assets/css/default.css' | relative_url }}" rel="stylesheet">
+        <link href="{{ '/assets/css/default.css' | absolute_url }}" rel="stylesheet">
     </head>
     <body>
         <nav class="uk-navbar-container uk-container uk-container-expand uk-navbar-transparent uk-light header" uk-navbar>

data/_layouts/fullwidth_page.html

@@ -2,6 +2,7 @@
 layout: default
 ---
 
-<div class="uk-container uk-container-expand content" uk-height-viewport="offset-top: true; offset-bottom: true">
+<div class="uk-container uk-container-expand uk-padding-remove content" uk-height-viewport="offset-top: true; offset-bottom: true">
     {{ content }}
+    {% include previous_and_next.html %}
 </div>

data/_layouts/page.html

@@ -4,4 +4,6 @@ layout: default
 
 <div class="uk-container uk-container-small content" uk-height-viewport="offset-top: true; offset-bottom: true">
     {{ content }}
+    {% include toc.html %}
+    {% include previous_and_next.html %}
 </div>

data/_sass/syntax-highlighting.scss

@@ -1,4 +1,4 @@
-$syntax-background-color: #272822;
+$syntax-background-color: #181e25;
 $syntax-comment-color: #75715e;
 $syntax-error-color: #960050;
 $syntax-error-background-color: #1e0010;
@@ -30,11 +30,11 @@ $syntax-name-color: #a6e22e;
     .k {
         color: $syntax-keyword-color;
     }
-    
+
     .l {
         color: $syntax-literal-color;
     }
-    
+
     .n {
         color: $syntax-color-light;
     }
@@ -66,7 +66,7 @@ $syntax-name-color: #a6e22e;
     .ge {
         font-style: italic
     }
-    
+
     .gs {
         font-weight: bold
     }
@@ -74,91 +74,91 @@ $syntax-name-color: #a6e22e;
     .kc {
         color: $syntax-keyword-color;
     }
-    
+
     .kd {
         color: $syntax-keyword-color;
     }
-    
+
     .kn {
         color: $syntax-operator-color;
     }
-    
+
     .kp {
         color: $syntax-keyword-color;
     }
-    
+
     .kr {
         color: $syntax-keyword-color;
     }
-    
+
     .kt {
         color: $syntax-keyword-color;
     }
-    
+
     .ld {
         color: $syntax-string-literal-color;
     }
-    
+
     .m {
         color: $syntax-literal-color;
     }
-    
+
     .s {
         color: $syntax-string-literal-color;
     }
-    
+
     .na {
         color: $syntax-name-color;
     }
-    
+
     .nb {
         color: $syntax-color-light;
     }
-    
+
     .nc {
         color: $syntax-name-color;
     }
-    
+
     .no {
         color: $syntax-keyword-color;
     }
-    
+
     .nd {
         color: $syntax-name-color;
     }
-    
+
     .ni {
         color: $syntax-color-light;
     }
-    
+
     .ne {
         color: $syntax-name-color;
     }
-    
+
     .nf {
         color: $syntax-name-color;
     }
-    
+
     .nl {
         color: $syntax-color-light;
     }
-    
+
     .nn {
         color: $syntax-color-light;
     }
-    
+
     .nx {
         color: $syntax-name-color;
     }
-    
+
     .py {
         color: $syntax-color-light;
     }
-    
+
     .nt {
         color: $syntax-operator-color;
     }
-    
+
     .nv {
         color: $syntax-color-light;
     }
@@ -166,87 +166,87 @@ $syntax-name-color: #a6e22e;
     .ow {
         color: $syntax-operator-color;
     }
-    
+
     .w {
         color: $syntax-color-light;
     }
-    
+
     .mf {
         color: $syntax-literal-color;
     }
-    
+
     .mh {
         color: $syntax-literal-color;
     }
-    
+
     .mi {
         color: $syntax-literal-color;
     }
-    
+
     .mo {
         color: $syntax-literal-color;
     }
-    
+
     .sb {
         color: $syntax-string-literal-color;
     }
-    
+
     .sc {
         color: $syntax-string-literal-color;
     }
-    
+
     .sd {
         color: $syntax-string-literal-color;
     }
-    
+
     .s2 {
         color: $syntax-string-literal-color;
     }
-    
+
     .se {
         color: $syntax-literal-color;
     }
-    
+
     .sh {
         color: $syntax-string-literal-color;
     }
-    
+
     .si {
         color: $syntax-string-literal-color;
     }
-    
+
     .sx {
         color: $syntax-string-literal-color;
     }
-    
+
     .sr {
         color: $syntax-string-literal-color;
     }
-    
+
     .s1 {
         color: $syntax-string-literal-color;
     }
-    
+
     .ss {
         color: $syntax-string-literal-color;
     }
-    
+
     .bp {
         color: $syntax-color-light;
     }
-    
+
     .vc {
         color: $syntax-color-light;
     }
-    
+
     .vg {
         color: $syntax-color-light;
     }
-    
+
     .vi {
         color: $syntax-color-light;
     }
-    
+
     .il {
         color: $syntax-literal-color;
     }
@@ -254,11 +254,11 @@ $syntax-name-color: #a6e22e;
     .gu {
         color: $syntax-comment-color;
     }
-    
+
     .gd {
         color: $syntax-operator-color;
     }
-    
+
     .gi {
         color: $syntax-name-color;
     }

data/assets/css/default.scss

@@ -14,6 +14,8 @@ $base-heading-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI
 $navbar-nav-item-font-family: $base-heading-font-family;
 $logo-font-family: $base-heading-font-family;
 
+$global-secondary-background: #181e25;
+
 $inverse-logo-hover-color: rgba(white, .85);
 $logo-font-size: 4rem;
 $navbar-gap: 0;
@@ -236,6 +238,56 @@ $languages: "ebnf", "juice";
         margin-top: $margin-large-margin;
     }
 
+    .sidebar-right {
+        position: absolute;
+        left: unquote('calc(50% + #{$half-container-small-width} + 25px)');
+        right: 10px;
+        top: 0;
+        max-width: 250px;
+
+        ul.uk-nav {
+            & > li {
+                & > a {
+                    position: relative;
+
+                    &::before, &::after {
+                        content: "";
+                        position: absolute;
+                        top: 100%;
+                        bottom: 0;
+                        left: -5px;
+                        transition: all .2s ease-in-out;
+                    }
+
+                    &::before {
+                        width: 0;
+                        border-left: 1px solid #df8e15;
+                    }
+
+                    &::after {
+                        right: 0;
+                        background: linear-gradient(to right, rgba(#df8e15, .3), transparent);
+                    }
+                }
+
+                &.uk-active {
+                    & > a {
+                        &::before, &::after {
+                            top: 0;
+                        }
+                    }
+
+                    & ~ li:not(.uk-active) > a {
+                        &::before, &::after {
+                            top: 0;
+                            bottom: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     .highlighter-rouge {
         position: relative;
 
@@ -256,7 +308,7 @@ $languages: "ebnf", "juice";
     }
 
     .header {
-        background: #181E25;
+        background: #181e25;
 
         .header-nav {
             color: #ee5a16;

data/lib/custom_filters.rb

@@ -13,13 +13,48 @@ module Jekyll
         end
 
         def find(input, property, targetValue = nil)
-            standardFilters = Class.new.extend(Liquid::StandardFilters)
-            standardFilters.first(standardFilters.where(input, property, targetValue))
+            first(where(input, property, targetValue))
+        end
+
+        def previous_and_next(pageHash, nav)
+            result = {'previous' => nil, 'next' => nil}
+            page = pageFromHash(pageHash)
+
+            indexPage = pageFromHash(nav, 'index_path')
+
+            if page.equal? indexPage
+                result['next'] = pageFromHash(nav['menu'].first)
+                return result
+            end
+
+            flattenedMenu = flattenMenu(nav['menu'])
+
+            for i in 0...flattenedMenu.count
+                pageI = flattenedMenu[i]
+
+                if page.equal? pageI
+                    result['previous'] = i == 0 ? indexPage : flattenedMenu[i - 1]
+                    result['next'] = flattenedMenu[i + 1] unless i == flattenedMenu.count - 1
+                    return result
+                end
+            end
+
+            result
+        end
+
+        def url_without_ext(pageHash)
+            page = pageFromHash(pageHash)
+            url = absolute_url(page.url)
+
+            return url.sub /\.x?html?$/, ''
         end
 
 
         private
 
+        include Liquid::StandardFilters
+        include Jekyll::Filters::URLFilters
+
         def currentPage
             pageFromHash(@context.registers[:page])
         end
@@ -28,10 +63,10 @@ module Jekyll
             @context.registers[:site]
         end
 
-        def pageFromHash(hash)
+        def pageFromHash(hash, pathKey = 'path')
             site.pages.find { |page|
-                page.path == hash['path']
-            }
+                page.path == hash[pathKey]
+            } unless hash.nil?
         end
 
         def isActiveRecursion?(children)
@@ -39,6 +74,19 @@ module Jekyll
                 pageFromHash(item).equal?(currentPage) || isActiveRecursion?(item['children'])
             }
         end
+
+        def flattenMenu(menu)
+            result = []
+
+            for item in menu
+                result.push(pageFromHash(item))
+                if item['children']
+                    result.concat(flattenMenu(item['children']))
+                end
+            end
+
+            result
+        end
     end
 end
 

data/lib/custom_tags.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require 'jekyll'
+require 'kramdown'
+require 'liquid'
+
+require_relative 'markdown_toc'
+
+
+class ToCTag < Liquid::Tag
+    def initialize(tag_name, input, tokens)
+        super
+    end
+
+    def render(context)
+        toc = Kramdown::Document.new(context.registers[:page]['content'], {
+            input: "GFM"
+        }).to_ToC
+        build_list(toc.select { |item| item[0] == 2 }, toc.first[1])
+    end
+
+    private
+
+    def build_list(toc, topLink)
+        result = '<li class="uk-active"><a href="#' + topLink + '">Top</a></li>' + "\n"
+
+        for i in 0...toc.count
+            item = toc[i]
+            result += '<li><a href="#' + item[1] + '">' + item[2][0].value + "</a></li>\n"
+        end
+
+        result
+    end
+end
+
+Liquid::Template.register_tag('toc', ToCTag)

data/lib/juicelang-theme.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative 'custom_filters'
+require_relative 'custom_tags'
 require_relative 'ebnf_lexer'
 require_relative 'juice_lexer'
 require_relative 'markdown'

data/lib/markdown_toc.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require 'jekyll'
+require 'kramdown'
+
+class Kramdown::Converter::ToC < Kramdown::Converter::Html
+    def convert(el, indent = -@indent)
+        result = super
+        return result unless el.type == :root
+
+        @toc
+    end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: juicelang-theme
 version: !ruby/object:Gem::Version
-  version: 0.3.4
+  version: 0.4.2
 platform: ruby
 authors:
 - Josef Zoller
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-30 00:00:00.000000000 Z
+date: 2022-09-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -92,6 +92,8 @@ files:
 - _includes/logo.html
 - _includes/nav.html
 - _includes/nav_list.html
+- _includes/previous_and_next.html
+- _includes/toc.html
 - _layouts/default.html
 - _layouts/fullwidth_page.html
 - _layouts/page.html
@@ -268,10 +270,12 @@ files:
 - assets/images/juice.svg
 - assets/js/default.js
 - lib/custom_filters.rb
+- lib/custom_tags.rb
 - lib/ebnf_lexer.rb
 - lib/juice_lexer.rb
 - lib/juicelang-theme.rb
 - lib/markdown.rb
+- lib/markdown_toc.rb
 homepage: https://github.com/juice-lang/juicelang-theme
 licenses:
 - MIT