Merge pull request #14 from piazzai/develop

Improve theme customization

README.md

@@ -90,30 +90,36 @@ Finally, it is possible to render `value` as a hash, which is a list of key-valu
 
 You can customize the appearance of the rendered JSON object using site variables. These have default values that can be overridden by specifying a new value in your `_config.yml` file.
 
-| Variable      |       Default       | Purpose                                               |
-| ------------- | :-----------------: | ----------------------------------------------------- |
-| `lowercase`   |       `true`        | Set all keys and values to lowercase                  |
-| `color_bg`    | `var(--oc-gray-9)`  | Set the background color                              |
-| `color_punct` | `var(--oc-green-9)` | Set the color of quote marks, commas, and parentheses |
-| `color_key`   | `var(--oc-green-4)` | Set the color of all keys                             |
-| `color_val`   | `var(--oc-green-4)` | Set the color of all key values                       |
-| `color_hover` | `var(--oc-green-5)` | Set the color of values on hover (if they are links)  |
-| `show_quotes` |       `true`        | Display quote marks around keys and values            |
-| `show_commas` |       `true`        | Display commas between key-value pairs                |
-| `target`      |       `_self`       | Set the target tab/window of hyperlinks               |
-
-All color defaults use the naming convention of the Open Color library ([read here](https://yeun.github.io/open-color/documents.html)). You can change them to any other color in the library, any base CSS color, or any three or six-digit hex color. For example:
+| Variable      |  Default  | Purpose                                              |
+| ------------- | :-------: | ---------------------------------------------------- |
+| `color_bg`    | `gray-9`  | Set the background color                             |
+| `color_punct` | `green-9` | Set the color of quotes, commas, and brackets        |
+| `color_key`   | `green-4` | Set the color of keys                                |
+| `color_value` | `green-4` | Set the color of values                              |
+| `color_hover` | `green-5` | Set the color of values on hover (if they are links) |
+| `quotes`      |  `true`   | Display quote marks around keys and/or values        |
+| `commas`      |  `true`   | Display commas between key-value pairs               |
+| `lowercase`   |  `true`   | Transform all keys and/or values to lowercase        |
+| `newtab`      |  `false`  | Open links in a new tab                              |
+
+The `color_*` variables follow the Open Color library's naming convention ([read here](https://yeun.github.io/open-color/documents.html)). You can change them to any color in the library using the same convention. For example:
 
 ```yaml
-color_bg: var(--oc-indigo-8)
-color_punct: black
-color_key: '#fff'
-color_val: '#cc5de8'
+color_bg: indigo-5
+color_punct: teal-6
+color_key: grape-7
+color_value: lime-8
+color_hover: cyan-9
 ```
 
-If you use Open Color names, remember to wrap them in a CSS variable.
+The variables `quotes` and `lowercase` are true by default and can be set to false, but they can also be set to `keys` or `values` in order to restrict their effect to either keys or values. For example, the following code will display quote marks only around values and transform only keys to lowercase:
 
-Customizing the CSS is possible by creating a file `_sass/_custom.scss`. You can use this both to define new styles or to overwrite the theme's defaults. The file will be automatically compiled during build.
+```yaml
+quotes: values
+lowercase: keys
+```
+
+It is possible to customize the CSS by creating a file `_sass/_custom.scss`. You can use this to define new styles as well as overwrite the theme's defaults. The file will be automatically compiled during build.
 
 ## Bugs
 

_layouts/home.html

@@ -2,13 +2,32 @@
 layout: default
 ---
 
-{% if site.show_quotes -%}
-{% assign quote = '"' -%}
-{% endif -%}
-{% if site.show_commas -%}
+{% case site.quotes -%}
+{% when 'keys' -%}
+{% assign quote_key = '"' -%}
+{% assign quote_value = '' -%}
+{% when 'values' -%}
+{% assign quote_key = '' -%}
+{% assign quote_value = '"' -%}
+{% when false -%}
+{% assign quote_key = '' -%}
+{% assign quote_value = '' -%}
+{% else -%}
+{% assign quote_key = '"' -%}
+{% assign quote_value = '"' -%}
+{% endcase -%}
+
+{% if site.commas == false -%}
+{% assign comma = '' -%}
+{% else -%}
 {% assign comma = ',' -%}
 {% endif -%}
-{% assign target = site.target | prepend: 'target="' | append: '"' -%}
+
+{% if site.newtab == true -%}
+{% assign tab = '_blank' -%}
+{% else -%}
+{% assign tab = '_self' -%}
+{% endif -%}
 
 <div id="json">
   {% for pair in site.data.json %}
@@ -19,23 +38,23 @@
       <span>{{ value }}</span>
       {%- endfor %}
     </div>
-    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
-    {{ quote }}<span class="value"><span id="typed"></span></span>{{ quote }}
+    {{ quote_key }}<span class="key">{{ pair.key }}</span>{{ quote_key }}:
+    {{ quote_value }}<span class="value"><span id="typed"></span></span>{{ quote_value }}
     {%- elsif pair.value.first.key -%}
-    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
+    {{ quote_key }}<span class="key">{{ pair.key }}</span>{{ quote_key }}: [
     {% for value in pair.value -%}
     {% if value.url -%}
     <p class="ms">
-      {{ quote }}<span class="key">{{ value.key }}</span>{{ quote }}:
-      {{ quote }}<a class="value" href="{{ value.url | relative_url }}" {{ target }}>{{ value.value }}</a>{{ quote }}
+      {{ quote_key }}<span class="key">{{ value.key }}</span>{{ quote_key }}:
+      {{ quote_value }}<a class="value" href="{{ value.url | relative_url }}" target="{{ tab }}">{{ value.value }}</a>{{ quote_value }}
       {%- unless forloop.last -%}
       {{ comma }}
       {%- endunless %}
     </p>
     {% else -%}
     <p class="ms">
-      {{ quote }}<span class="key">{{ value.key }}</span>{{ quote }}:
-      {{ quote }}<span class="value">{{ value.value }}</span>{{ quote }}
+      {{ quote_key }}<span class="key">{{ value.key }}</span>{{ quote_key }}:
+      {{ quote_value }}<span class="value">{{ value.value }}</span>{{ quote_value }}
       {%- unless forloop.last -%}
       {{ comma }}
       {%- endunless %}
@@ -44,18 +63,18 @@
     {%- endfor -%}
     ]
     {%- elsif pair.value.first -%}
-    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
+    {{ quote_key }}<span class="key">{{ pair.key }}</span>{{ quote_key }}: [
     {% for value in pair.value -%}
     {% if value.url -%}
     <p class="ms">
-      {{ quote }}<a class="value" href="{{ value.url | relative_url }}" {{ target }}>{{ value.value }}</a>{{ quote }}
+      {{ quote_value }}<a class="value" href="{{ value.url | relative_url }}" target="{{ tab }}">{{ value.value }}</a>{{ quote_value }}
       {%- unless forloop.last -%}
       {{ comma }}
       {%- endunless %}
     </p>
     {% else -%}
     <p class="ms">
-      {{ quote }}<span class="value">{{ value }}</span>{{ quote }}
+      {{ quote_value }}<span class="value">{{ value }}</span>{{ quote_value }}
       {%- unless forloop.last -%}
       {{ comma }}
       {%- endunless %}
@@ -64,11 +83,11 @@
     {%- endfor -%}
     ]
     {%- elsif pair.url -%}
-    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
-    {{ quote }}<a class="value" href="{{ pair.url | relative_url }}" {{ target }}>{{ pair.value }}</a>{{ quote }}
+    {{ quote_key }}<span class="key">{{ pair.key }}</span>{{ quote_key }}:
+    {{ quote_value }}<a class="value" href="{{ pair.url | relative_url }}" target="{{ tab }}">{{ pair.value }}</a>{{ quote_value }}
     {%- else -%}
-    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
-    {{ quote }}<span class="value">{{ pair.value }}</span>{{ quote }}
+    {{ quote_key }}<span class="key">{{ pair.key }}</span>{{ quote_key }}:
+    {{ quote_value }}<span class="value">{{ pair.value }}</span>{{ quote_value }}
     {%- endif -%}
     {%- unless forloop.last -%}
     {{ comma }}

_sass/_default.scss

@@ -1,17 +1,17 @@
 @font-face {
   font-family: "hack";
-  src: url("../webfonts/hack-regular-subset.woff2") format("woff2");
+  font-display: swap;
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  src: url("../webfonts/hack-regular-subset.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "hack";
-  src: url("../webfonts/hack-italic-subset.woff2") format("woff2");
+  font-display: swap;
   font-style: italic;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  src: url("../webfonts/hack-italic-subset.woff2") format("woff2");
 }
 
 body {
@@ -86,15 +86,11 @@ a:active {
 
 .key {
   color: $color_key;
+  text-transform: $transform_key;
 }
 
 .error,
 .value {
-  color: $color_val;
-}
-
-.error,
-.key,
-.value {
-  text-transform: $transform_case;
+  color: $color_value;
+  text-transform: $transform_value;
 }

assets/css/styles.scss

@@ -1,17 +1,26 @@
 ---
 ---
 
-$color_bg: {{ site.color_bg | default: 'var(--oc-gray-9)' }};
-$color_punct: {{ site.color_punct | default: 'var(--oc-green-9)' }};
-$color_key: {{ site.color_key | default: 'var(--oc-green-4)' }};
-$color_val: {{ site.color_val | default: 'var(--oc-green-4)' }};
-$color_hover: {{ site.color_hover | default: 'var(--oc-green-5)' }};
+$color_bg: var(--oc-{{ site.color_bg | default: 'gray-9' }});
+$color_punct: var(--oc-{{ site.color_punct | default: 'green-9' }});
+$color_key: var(--oc-{{ site.color_key | default: 'green-4' }});
+$color_value: var(--oc-{{ site.color_value | default: 'green-4' }});
+$color_hover: var(--oc-{{ site.color_hover | default: 'green-5' }});
 
-{% if site.lowercase -%}
-$transform_case: lowercase;
+{% case site.lowercase -%}
+{% when 'keys' -%}
+$transform_key: lowercase;
+$transform_value: none;
+{% when 'values' -%}
+$transform_key: none;
+$transform_value: lowercase;
+{% when false -%}
+$transform_key: none;
+$transform_value: none;
 {% else -%}
-$transform_case: none;
-{% endif -%}
+$transform_key: lowercase;
+$transform_value: lowercase;
+{% endcase -%}
 
 @import "default";
 @import "custom";

demo/Gemfile

@@ -1,3 +1,3 @@
 source 'https://rubygems.org'
 
-gem 'hacked-jekyll', '~> 2.2'
+gem 'hacked-jekyll', '~> 3.0'

demo/_config.yml

@@ -8,3 +8,12 @@ theme: hacked-jekyll
 exclude:
   - LICENSE
   - README.md
+  - vendor/
+
+plugins:
+  - jekyll-seo-tag
+  - jekyll-sitemap
+
+sass:
+  sourcemap: never
+

docs/404.html

@@ -8,7 +8,7 @@
   <title>Hacked Jekyll</title>
 
 <!-- Begin Jekyll SEO tag v2.8.0 -->
-<meta name="generator" content="Jekyll v4.3.3" />
+<meta name="generator" content="Jekyll v3.9.5" />
 <meta property="og:title" content="Hacked Jekyll" />
 <meta property="og:locale" content="en_US" />
 <meta name="description" content="Jekyll microtheme that looks like JSON" />

docs/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'hacked-jekyll', '~> 3.0'