juicelang-theme 0.3.4 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d73b2f6ebdca5313c0cc02930600bbb6c32e3e331599b33c7f3da0c5daec3f3
-  data.tar.gz: 3907168273b4eef95b3fc3465dc1f785163803dd00aefb194f196bfdb824c695
+  metadata.gz: 611c546d0004cfb41f3627c1fa188ab79cf2ff4f864be6e67ab934bb5ae4ae5c
+  data.tar.gz: 7bb3f001686c7a4fb858a40951cc11f1428ac05b4f2d4cb35f300a8602abd2c3
 SHA512:
-  metadata.gz: 3ea9fd205da69b65afc67dff6379448f3f17b7f9dfca58ffdc9c3a5dc3e0399eb863d640327b84844894566361ae8a1ede91a0f84c63bc68b45f01720734af97
-  data.tar.gz: 4d626bab5570639a8325d39fd7d8fbb217b49252976ba2458ea4b7188526649d6956fc853fd0fa300c8b98bece0d477904789c3ae15ec5a36546b994def9b5ea
+  metadata.gz: '08837dd2c714ff87d9b6758448bf7f0275fb968cba6d764cd7c956feafcc9c1de28881a4d445d2970fcb8781875f3d760c8ac5db9f9f613d4adb90d1bbb4440d'
+  data.tar.gz: 3a2ca51818a9a649a440bfd07552bb4ad25398eac1cf27b743386e0ad63d59d7f9da753a5747c17aefcc255694694ea45226c5bd2ea04d44c712a03bc9bef9cd

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,7 @@
+<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>

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

@@ -4,4 +4,5 @@ layout: default
 
 <div class="uk-container uk-container-expand 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.0
 platform: ruby
 authors:
 - Josef Zoller
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-30 00:00:00.000000000 Z
+date: 2022-08-31 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