Merge pull request #6 from piazzai/develop

Merge develop branch

README.md

@@ -1,6 +1,6 @@
 # hacked-jekyll
 
-Hacked Jekyll is a responsive, minimalistic Jekyll theme for a tiny (163kb!) personal website. It consists of a homepage and a 404 page. The homepage lists information set within the configuration file in a format that resembles JSON, giving the website a "hacked" appearance. The user description features [typed.js](https://mattboldt.com/demos/typed-js/) to cycle through multiple lines of text, as long as multiple lines are provided in the configuration.
+Hacked Jekyll is a responsive, minimalistic Jekyll theme for a tiny personal website. It consists of a homepage and a 404 page. The homepage lists information about the user in a format that resembles JSON, giving the website a "hacked" appearance. As in JSON, elements can be strings, arrays, or hashes. One of the string elements, typically the user's description, can use [typed.js](https://mattboldt.com/demos/typed-js/) to cycle through multiple lines of text.
 
 The style is rebooted through [normalize.css](https://necolas.github.io/normalize.css/) and based on the [Open Color](https://yeun.github.io/open-color/) library. The monospaced typeface [Hack](https://sourcefoundry.org/hack/) is served together with the website. The favicons are generated by [favicon.io](https://favicon.io/).
 
@@ -38,31 +38,79 @@ To customize hidden files, you can create new files with the same names and path
 
 ## Usage
 
-All customization happens in the `json` section of `_config.yml`. Eight variables can be set, including the user's name and description (note that this is not the same as site description), path to the CV, address and contact details, homepage, repository, and social profiles. All of these variables are optional.
+You can input the content of your JSON object in `_data/json.yml`. This is a list of key-value pairs: you need to provide a `key` and a `value`, as in the example below.
 
-The user description and address variables can be set as arrays (default) or single strings. The contact variable can be set as a hash (default) or single string. The profiles variable must necessarily be a hash.
+```yaml
+- key: Name
+  value: Place Holder
+```
+
+In addition, you can provide a `url`, in which case `value` is rendered as a hyperlink. Here is an example:
+
+```yaml
+- key: Source
+  value: github.com/piazzai/hacked-jekyll
+  url: https://github.com/piazzai/hacked-jekyll
+```
+
+If `value` is a single line of text, the resulting JSON element will be rendered as a string. If `value` includes multiple lines of text, as in the example below, the resulting JSON element will be rendered as an array.
+
+```yaml
+- key: Address
+  value:
+    - University of Jekyll
+    - Department of Themes
+    - 123 Main St, Anytown, USA
+```
+
+An array can also consist of hyperlinks. In this case, each element of `value` should have its own `value` and `url`, as shown below.
+
+```yaml
+- key: Profiles
+  value:
+    - value: Facebook
+      url: https://www.facebook.com
+    - value: X
+      url: https://www.x.com
+```
 
-It is possible to set up the site so that all links open in the same tab (default) or in a new tab. To make links open in a new tab, just add the following line to your `_config.yml` file.
+Finally, it is possible to render `value` as a hash, which is a list of key-value pairs. This will happen automatically if the elements of `value` have their own `key` and `value` (and possibly a `url`).
 
 ```yaml
-newtab: true
+- key: Contact
+  value:
+    - key: Office
+      value: Foobar Hall 1.23
+    - key: Phone
+      value: +1 234 567 890
+    - key: Email
+      value: [email protected]
+      url: "mailto:[email protected]"
 ```
 
-It is also possible to change the color scheme. If you want to do so, you should create a file called `_sass/base.scss` with the following code:
+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.
 
-```scss
-body {
-  background-color: var(--oc-gray-9); // background color
-  color: var(--oc-green-4); // color of main text and links
-}
+|    Variable    |       Default       | Purpose                                               |
+| :------------: | :-----------------: | ----------------------------------------------------- |
+|  `lowercase`   |       `true`        | Set all 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_keyval` | `var(--oc-green-4)` | Set the color of all keys and 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               |
 
-a:hover,
-a:active {
-  color: var(--oc-green-5); // hover color of links
-}
+All color defaults use the naming convention of the Open Color library ([read here]([https://yeun](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, as shown below.
+
+```yaml
+color_bg: var(--oc-indigo-8)
+color_punct: black
+color_keyval: '#fff'
+color_hover: '#cc5de8'
 ```
 
-The values above are defaults. You can change them to any color you want using hexadecimal codes, base CSS names, or Open Color names as in the example above. In the latter case, please [read the docs](https://yeun.github.io/open-color/documents.html) of the Open Color library to familiarize with the naming convention.
+If you use Open Color names, remember to wrap them in a CSS variable.
 
 ## Bugs
 

_config.yml

@@ -3,19 +3,15 @@ description: ""
 baseurl: ""
 url: ""
 
-newtab: false
-
-exclude:
-  - demo/
-  - hacked-jekyll.gemspec
-  - LICENSE
-  - README.md
-  - screenshot.png
+lowercase: true
+color_bg: var(--oc-gray-9)
+color_punct: var(--oc-green-9)
+color_keyval: var(--oc-green-4)
+color_hover: var(--oc-green-5)
+show_quotes: true
+show_commas: true
+target: "_self"
 
 plugins:
   - jekyll-seo-tag
   - jekyll-sitemap
-
-sass:
-  style: compressed
-  sourcemap: never

_data/json.yml

@@ -0,0 +1 @@
+# empty

_layouts/404.html

@@ -2,13 +2,8 @@
 layout: default
 ---
 
-<main>
-    <div class="block">
-        <p>404</p>
-        <p>Page not found</p>
-    </div>
-    <div class="block">
-        {% assign home = site.url | split: "//" | slice: 1 %}
-        <a href="{{ site.url }}">{{ home }}</a>
-    </div>
-</main>
+<div class="error">
+    <h1>404</h1>
+    <p>Page not found</p>
+    <p class="mt"><a href="{{ site.url }}">{{ site.url | split: "//" | slice: 1 }}</a></p>
+</div>

_layouts/default.html

@@ -1,10 +1,40 @@
 <!DOCTYPE html>
 
 <html lang="en">
-{% include head.html %}
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ site.title }}</title>
+
+{% seo title=false %}
+  <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+  <link rel="manifest" href="assets/site.webmanifest">
+  <link rel="stylesheet" href="assets/css/normalize.css" />
+  <link rel="stylesheet" href="assets/css/open-color.css" />
+  <link rel="stylesheet" href="assets/css/styles.css" />
+  <script src="assets/js/typed.umd.js"></script>
+</head>
 
 <body>
-  {{ content }}
+  <main>
+
+{{ content }}
+
+  </main>
+  <script>
+    var typed = new Typed("#typed", {
+      stringsElement: "#strings",
+      backSpeed: 10,
+      typeSpeed: 30,
+      backDelay: 1000,
+      loop: true,
+      smartBackspace: true,
+    });
+  </script>
 </body>
 
 </html>

_layouts/home.html

@@ -2,87 +2,77 @@
 layout: default
 ---
 
-{% assign target = 'target="_self"' %}
-{% if site.newtab %}
-{% assign target = 'target="_blank"' %}
-{% endif %}
+{% if site.show_quotes -%}
+{% assign quote = '"' -%}
+{% endif -%}
+{% if site.show_commas -%}
+{% assign comma = ',' -%}
+{% endif -%}
+{% assign target = site.target | prepend: 'target="' | append: '"' -%}
 
-<main class="json">
-  <div class="block">
-    {% if site.json.name %}
-    <p><span class="key">name</span><span class="attr">{{ site.json.name }}</span></p>
-    {% else %}
-    <p><span class="key">name</span><span class="attr">{{ site.title }}</span></p>
-    {% endif %}
-    {% if site.json.description %}
-    {% if site.json.description.first %}
-    <div id="typed-strings">
-      {% for i in site.json.description %}
-      <span>{{ i | prepend: '"' | append: '",'}}</span>
-      {% endfor %}
+<div id="json">
+  {% for pair in site.data.json %}
+  <div class="my ms">
+    {% if pair.typed -%}
+    <div id="strings">
+      {% for value in pair.value -%}
+      <span>{{ value }}</span>
+      {%- endfor %}
     </div>
-    <p><span class="key">description</span>{% include typed.html %}</p>
-    {% else %}
-    <p><span class="key">description</span><span class="attr">{{ site.json.description }}</span></p>
-    {% endif %}
-    {% else %}
-    <p><span class="key">description</span><span class="attr">{{ site.description }}</span></p>
-    {% endif %}
-  </div>
-  <div class="block">
-    {% if site.json.cv %}
-    {% assign cv = site.json.cv | split: "/" | slice: -1 %}
-    <p><span class="key">cv</span><span class="attr"><a href="{{ site.json.cv }}" {{ target }}>{{ cv }}</a></span></p>
-    {% endif %}
-  </div>
-  <div class="block">
-    {% if site.json.address %}
-    {% if site.json.address.first %}
-    <p><span class="array-key">address</span></p>
-    <div class="array">
-      {% for i in site.json.address %}
-      <p class="array-attr">{{ i }}</p>
-      {% endfor %}
-    </div>
-    {% else %}
-    <p><span class="key">address</span><span class="attr">{{ site.json.address }}</span></p>
-    {% endif %}
-    {% endif %}
-  </div>
-  <div class="block">
-    {% if site.json.contact %}
-    {% if site.json.contact.first %}
-    <p><span class="list-key">contact</span></p>
-    <div class="list">
-      {% for i in site.json.contact %}
-      <p><span class="list-subkey">{{ i | slice: 0 }}</span><span class="list-attr">{{ i | slice: 1 }}</span></p>
-      {% endfor %}
-    </div>
-    {% else %}
-    <p><span class="key">contact</span><span class="attr">{{ site.json.contact }}</span></p>
-    {% endif %}
-    {% endif %}
-  </div>
-  <div class="block">
-    {% if site.json.demo %}
-    {% assign demo = site.json.demo | split: "//" | slice: 1 %}
-    <p><span class="key">demo</span><span class="attr"><a href="{{ site.json.demo }}" {{ target }}>{{ demo }}</a></span>
+    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
+    {{ quote }}<span class="value"><span id="typed"></span></span>{{ quote }}
+    {%- elsif pair.value.first.key -%}
+    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
+    {% 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 }}" {{ target }}>{{ value.value }}</a>{{ quote }}
+      {%- unless forloop.last -%}
+      {{ comma }}
+      {%- endunless %}
     </p>
-    {% endif %}
-    {% if site.json.source %}
-    {% assign source = site.json.source | split: "github.com/" | slice: 1 %}
-    <p><span class="key">source</span><span class="attr"><a href="{{ site.json.source }}" {{ target }}>{{ source
-          }}</a></span></p>
-    {% endif %}
-  </div>
-  <div class="block">
-    {% if site.json.profiles %}
-    <span class="array-key">profiles</span>
-    <div class="array">
-      {% for i in site.json.profiles %}
-      <p class="array-attr"><a href="{{ i | slice: 1 }}" {{ target }}>{{ i | slice: 0 }}</a></p>
-      {% endfor %}
-    </div>
-    {% endif %}
+    {% else -%}
+    <p class="ms">
+      {{ quote }}<span class="key">{{ value.key }}</span>{{ quote }}:
+      {{ quote }}<span class="value">{{ value.value }}</span>{{ quote }}
+      {%- unless forloop.last -%}
+      {{ comma }}
+      {%- endunless %}
+    </p>
+    {% endif -%}
+    {%- endfor -%}
+    ]
+    {%- elsif pair.value.first -%}
+    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
+    {% for value in pair.value -%}
+    {% if value.url -%}
+    <p class="ms">
+      {{ quote }}<a class="value" href="{{ value.url }}" {{ target }}>{{ value.value }}</a>{{ quote }}
+      {%- unless forloop.last -%}
+      {{ comma }}
+      {%- endunless %}
+    </p>
+    {% else -%}
+    <p class="ms">
+      {{ quote }}<span class="value">{{ value }}</span>{{ quote }}
+      {%- unless forloop.last -%}
+      {{ comma }}
+      {%- endunless %}
+    </p>
+    {% endif -%}
+    {%- endfor -%}
+    ]
+    {%- elsif pair.url -%}
+    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
+    {{ quote }}<a class="value" href="{{ pair.url }}" {{ target }}>{{ pair.value }}</a>{{ quote }}
+    {%- else -%}
+    {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
+    {{ quote }}<span class="value">{{ pair.value }}</span>{{ quote }}
+    {%- endif -%}
+    {%- unless forloop.last -%}
+    {{ comma }}
+    {%- endunless %}
   </div>
-</main>
+  {% endfor %}
+</div>