diff --git a/README.md b/README.md index a0ec71a..8b9e09c 100644 --- a/README.md +++ b/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 diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 5256dea..0000000 --- a/_config.yml +++ /dev/null @@ -1,16 +0,0 @@ -title: "" -description: "" -baseurl: "" -url: "" - -lowercase: true -show_quotes: true -show_commas: true -target: _self - -plugins: - - jekyll-seo-tag - - jekyll-sitemap - -sass: - sourcemap: never diff --git a/_layouts/home.html b/_layouts/home.html index 9238b3d..2d88724 100644 --- a/_layouts/home.html +++ b/_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 -%}
- {{ quote }}{{ value.key }}{{ quote }}: - {{ quote }}{{ value.value }}{{ quote }} + {{ quote_key }}{{ value.key }}{{ quote_key }}: + {{ quote_value }}{{ value.value }}{{ quote_value }} {%- unless forloop.last -%} {{ comma }} {%- endunless %}
{% else -%}- {{ quote }}{{ value.key }}{{ quote }}: - {{ quote }}{{ value.value }}{{ quote }} + {{ quote_key }}{{ value.key }}{{ quote_key }}: + {{ quote_value }}{{ value.value }}{{ quote_value }} {%- unless forloop.last -%} {{ comma }} {%- endunless %} @@ -44,18 +63,18 @@ {%- endfor -%} ] {%- elsif pair.value.first -%} - {{ quote }}{{ pair.key }}{{ quote }}: [ + {{ quote_key }}{{ pair.key }}{{ quote_key }}: [ {% for value in pair.value -%} {% if value.url -%}
- {{ quote }}{{ value.value }}{{ quote }} + {{ quote_value }}{{ value.value }}{{ quote_value }} {%- unless forloop.last -%} {{ comma }} {%- endunless %}
{% else -%}- {{ quote }}{{ value }}{{ quote }} + {{ quote_value }}{{ value }}{{ quote_value }} {%- unless forloop.last -%} {{ comma }} {%- endunless %} @@ -64,11 +83,11 @@ {%- endfor -%} ] {%- elsif pair.url -%} - {{ quote }}{{ pair.key }}{{ quote }}: - {{ quote }}{{ pair.value }}{{ quote }} + {{ quote_key }}{{ pair.key }}{{ quote_key }}: + {{ quote_value }}{{ pair.value }}{{ quote_value }} {%- else -%} - {{ quote }}{{ pair.key }}{{ quote }}: - {{ quote }}{{ pair.value }}{{ quote }} + {{ quote_key }}{{ pair.key }}{{ quote_key }}: + {{ quote_value }}{{ pair.value }}{{ quote_value }} {%- endif -%} {%- unless forloop.last -%} {{ comma }} diff --git a/_sass/_default.scss b/_sass/_default.scss index c6a2faa..0845255 100644 --- a/_sass/_default.scss +++ b/_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; } diff --git a/assets/css/styles.scss b/assets/css/styles.scss index b32dc98..eae6fe0 100644 --- a/assets/css/styles.scss +++ b/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"; diff --git a/demo/Gemfile b/demo/Gemfile index 8e580ab..651824a 100644 --- a/demo/Gemfile +++ b/demo/Gemfile @@ -1,3 +1,3 @@ source 'https://rubygems.org' -gem 'hacked-jekyll', '~> 2.2' +gem 'hacked-jekyll', '~> 3.0' diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock deleted file mode 100644 index 3dc4ba9..0000000 --- a/demo/Gemfile.lock +++ /dev/null @@ -1,82 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - addressable (2.8.6) - public_suffix (>= 2.0.2, < 6.0) - colorator (1.1.0) - concurrent-ruby (1.3.1) - em-websocket (0.5.3) - eventmachine (>= 0.12.9) - http_parser.rb (~> 0) - eventmachine (1.2.7) - ffi (1.16.3) - forwardable-extended (2.6.0) - google-protobuf (3.25.3-x86_64-linux) - hacked-jekyll (2.2.0) - jekyll (~> 4.3, >= 4.3.3) - jekyll-seo-tag (~> 2.8) - jekyll-sitemap (~> 1.4) - http_parser.rb (0.8.0) - i18n (1.14.5) - concurrent-ruby (~> 1.0) - jekyll (4.3.3) - addressable (~> 2.4) - colorator (~> 1.0) - em-websocket (~> 0.5) - i18n (~> 1.0) - jekyll-sass-converter (>= 2.0, < 4.0) - jekyll-watch (~> 2.0) - kramdown (~> 2.3, >= 2.3.1) - kramdown-parser-gfm (~> 1.0) - liquid (~> 4.0) - mercenary (>= 0.3.6, < 0.5) - pathutil (~> 0.9) - rouge (>= 3.0, < 5.0) - safe_yaml (~> 1.0) - terminal-table (>= 1.8, < 4.0) - webrick (~> 1.7) - jekyll-sass-converter (3.0.0) - sass-embedded (~> 1.54) - jekyll-seo-tag (2.8.0) - jekyll (>= 3.8, < 5.0) - jekyll-sitemap (1.4.0) - jekyll (>= 3.7, < 5.0) - jekyll-watch (2.2.1) - listen (~> 3.0) - kramdown (2.4.0) - rexml - kramdown-parser-gfm (1.1.0) - kramdown (~> 2.0) - liquid (4.0.4) - listen (3.9.0) - rb-fsevent (~> 0.10, >= 0.10.3) - rb-inotify (~> 0.9, >= 0.9.10) - mercenary (0.4.0) - pathutil (0.16.2) - forwardable-extended (~> 2.6) - public_suffix (5.0.5) - rake (13.2.1) - rb-fsevent (0.11.2) - rb-inotify (0.11.1) - ffi (~> 1.0) - rexml (3.2.8) - strscan (>= 3.0.9) - rouge (4.2.1) - safe_yaml (1.0.5) - sass-embedded (1.69.5) - google-protobuf (~> 3.23) - rake (>= 13.0.0) - strscan (3.1.0) - terminal-table (3.0.2) - unicode-display_width (>= 1.1.1, < 3) - unicode-display_width (2.5.0) - webrick (1.8.1) - -PLATFORMS - x86_64-linux - -DEPENDENCIES - hacked-jekyll (~> 2.2) - -BUNDLED WITH - 2.3.5 diff --git a/demo/_config.yml b/demo/_config.yml index d3ec2f8..5005358 100644 --- a/demo/_config.yml +++ b/demo/_config.yml @@ -8,3 +8,12 @@ theme: hacked-jekyll exclude: - LICENSE - README.md + - vendor/ + +plugins: + - jekyll-seo-tag + - jekyll-sitemap + +sass: + sourcemap: never + \ No newline at end of file diff --git a/docs/404.html b/docs/404.html index 94d0233..6cec1b6 100644 --- a/docs/404.html +++ b/docs/404.html @@ -8,7 +8,7 @@