hacked-jekyll 1.4.0 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e375f1b28fe1eb073433bb03923e55eb669cd66195697ef2796e656f9415b731
4
- data.tar.gz: 746b02eb3e4c69f9dd18f6c3be0d84e57108f36dc42b9164e014a5d232d4230e
3
+ metadata.gz: 8c50e8c315bc6f0d84d2bfae224fb8c6ebadaa0b9aa09712910893965fbf70aa
4
+ data.tar.gz: ad03b97a2b1934129981dc29a4a778980c1a9555d6900586e8fd264bdf668807
5
5
  SHA512:
6
- metadata.gz: e05223f4b14877872f9974c22ceae6099d29231ce1468a979b6a70a393121430f465c3e3ac8ce9336d68e7b2e60cadf2c8e734104260524c7f65c3965a1faf04
7
- data.tar.gz: 4e33e810b7f9b6de2e6791fa0fbbee4ffe171a8260f725d2661e4e60d6e89ee9ffc528710cfc9b4d4482d36b948865c8177243b030a78d7b5226955569ad3426
6
+ metadata.gz: 636600327a0e6cf07cef33db6f97475cb3e61edb264d624764e0b7346bba2511e81f5ba82841e1c6f0c805414652dc11813da3674133087058b2e0b49b7e8fa9
7
+ data.tar.gz: 91c5f61428af457a8cb485f3e9a3d8f30264cfb4c1275266b4a4f12dd2e727e77a3c151c87eaec336036b22d8111ed8d479fed0fbc8fc2da8713fc186ac4469f
data/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # hacked-jekyll
2
2
 
3
- 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.
3
+ 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.
4
4
 
5
5
  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/).
6
6
 
@@ -38,31 +38,79 @@ To customize hidden files, you can create new files with the same names and path
38
38
 
39
39
  ## Usage
40
40
 
41
- 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.
41
+ You can input the content of your JSON object in `_data/json.yml`. This is a list of key-value pairs: for each of them you need to provide `key` and `value`, as in the example below.
42
42
 
43
- 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.
43
+ ```yaml
44
+ - key: Name
45
+ value: Place Holder
46
+ ```
47
+
48
+ In addition, you can provide a `url`, in which case the value is rendered as a hyperlink. Here is an example:
49
+
50
+ ```yaml
51
+ - key: Source
52
+ value: piazzai/hacked-jekyll
53
+ url: https://github.com/piazzai/hacked-jekyll
54
+ ```
55
+
56
+ If `value` is a single line of text, the resulting JSON element will be a string. If `value` includes multiple lines of text, as in the code below, the resulting JSON element will be an array.
57
+
58
+ ```yaml
59
+ - key: Address
60
+ value:
61
+ - University of Jekyll
62
+ - Department of Themes
63
+ - 123 Main St, Anytown, USA
64
+ ```
65
+
66
+ An array can also consist of hyperlinks. To achieve this, provide each line of `value` with its own `value` and `url`, like so:
67
+
68
+ ```yaml
69
+ - key: Profiles
70
+ value:
71
+ - value: Instagram
72
+ url: https://www.instagram.com
73
+ - value: LinkedIn
74
+ url: https://www.linkedin.com
75
+ ```
44
76
 
45
- 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.
77
+ 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`).
46
78
 
47
79
  ```yaml
48
- newtab: true
80
+ - key: Contact
81
+ value:
82
+ - key: Office
83
+ value: Foobar Hall 1.23
84
+ - key: Phone
85
+ value: +1 234 567 890
86
+ - key: Email
87
+ value: username@domain.com
88
+ url: "mailto:username@domain.com"
49
89
  ```
50
90
 
51
- 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:
91
+ 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.
52
92
 
53
- ```scss
54
- body {
55
- background-color: var(--oc-gray-9); // background color
56
- color: var(--oc-green-4); // color of main text and links
57
- }
93
+ | Variable | Default | Purpose |
94
+ | -------------- | :-----------------: | ----------------------------------------------------- |
95
+ | `lowercase` | `true` | Set all keys and values to lowercase |
96
+ | `color_bg` | `var(--oc-gray-9)` | Set the background color |
97
+ | `color_punct` | `var(--oc-green-9)` | Set the color of quote marks, commas, and parentheses |
98
+ | `color_keyval` | `var(--oc-green-4)` | Set the color of all keys and values |
99
+ | `color_hover` | `var(--oc-green-5)` | Set the color of values on hover (if they are links) |
100
+ | `show_quotes` | `true` | Display quote marks around keys and values |
101
+ | `show_commas` | `true` | Display commas between key-value pairs |
102
+ | `target` | `_self` | Set the target tab/window of hyperlinks |
58
103
 
59
- a:hover,
60
- a:active {
61
- color: var(--oc-green-5); // hover color of links
62
- }
104
+ 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:
105
+
106
+ ```yaml
107
+ color_bg: var(--oc-indigo-8)
108
+ color_punct: black
109
+ color_keyval: '#fff'
110
+ color_hover: '#cc5de8'
63
111
  ```
64
112
 
65
- 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.
113
+ If you use Open Color names, remember to wrap them in a CSS variable.
66
114
 
67
115
  ## Bugs
68
116
 
data/_config.yml CHANGED
@@ -3,19 +3,15 @@ description: ""
3
3
  baseurl: ""
4
4
  url: ""
5
5
 
6
- newtab: false
7
-
8
- exclude:
9
- - demo/
10
- - hacked-jekyll.gemspec
11
- - LICENSE
12
- - README.md
13
- - screenshot.png
6
+ lowercase: true
7
+ color_bg: var(--oc-gray-9)
8
+ color_punct: var(--oc-green-9)
9
+ color_keyval: var(--oc-green-4)
10
+ color_hover: var(--oc-green-5)
11
+ show_quotes: true
12
+ show_commas: true
13
+ target: "_self"
14
14
 
15
15
  plugins:
16
16
  - jekyll-seo-tag
17
17
  - jekyll-sitemap
18
-
19
- sass:
20
- style: compressed
21
- sourcemap: never
data/_data/json.yml ADDED
@@ -0,0 +1 @@
1
+ # empty
data/_layouts/404.html CHANGED
@@ -2,13 +2,8 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <main>
6
- <div class="block">
7
- <p>404</p>
8
- <p>Page not found</p>
9
- </div>
10
- <div class="block">
11
- {% assign home = site.url | split: "//" | slice: 1 %}
12
- <a href="{{ site.url }}">{{ home }}</a>
13
- </div>
14
- </main>
5
+ <div class="error">
6
+ <h1>404</h1>
7
+ <p>Page not found</p>
8
+ <p class="mt"><a href="{{ site.url }}">{{ site.url | split: "//" | slice: 1 }}</a></p>
9
+ </div>
@@ -1,10 +1,40 @@
1
1
  <!DOCTYPE html>
2
2
 
3
3
  <html lang="en">
4
- {% include head.html %}
4
+
5
+ <head>
6
+ <meta charset="UTF-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <title>{{ site.title }}</title>
9
+
10
+ {% seo title=false %}
11
+ <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
12
+ <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
13
+ <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
14
+ <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
15
+ <link rel="manifest" href="assets/site.webmanifest">
16
+ <link rel="stylesheet" href="assets/css/normalize.css" />
17
+ <link rel="stylesheet" href="assets/css/open-color.css" />
18
+ <link rel="stylesheet" href="assets/css/styles.css" />
19
+ <script src="assets/js/typed.umd.js"></script>
20
+ </head>
5
21
 
6
22
  <body>
7
- {{ content }}
23
+ <main>
24
+
25
+ {{ content }}
26
+
27
+ </main>
28
+ <script>
29
+ var typed = new Typed("#typed", {
30
+ stringsElement: "#strings",
31
+ backSpeed: 10,
32
+ typeSpeed: 30,
33
+ backDelay: 1000,
34
+ loop: true,
35
+ smartBackspace: true,
36
+ });
37
+ </script>
8
38
  </body>
9
39
 
10
40
  </html>
data/_layouts/home.html CHANGED
@@ -2,87 +2,77 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- {% assign target = 'target="_self"' %}
6
- {% if site.newtab %}
7
- {% assign target = 'target="_blank"' %}
8
- {% endif %}
5
+ {% if site.show_quotes -%}
6
+ {% assign quote = '"' -%}
7
+ {% endif -%}
8
+ {% if site.show_commas -%}
9
+ {% assign comma = ',' -%}
10
+ {% endif -%}
11
+ {% assign target = site.target | prepend: 'target="' | append: '"' -%}
9
12
 
10
- <main class="json">
11
- <div class="block">
12
- {% if site.json.name %}
13
- <p><span class="key">name</span><span class="attr">{{ site.json.name }}</span></p>
14
- {% else %}
15
- <p><span class="key">name</span><span class="attr">{{ site.title }}</span></p>
16
- {% endif %}
17
- {% if site.json.description %}
18
- {% if site.json.description.first %}
19
- <div id="typed-strings">
20
- {% for i in site.json.description %}
21
- <span>{{ i | prepend: '"' | append: '",'}}</span>
22
- {% endfor %}
13
+ <div id="json">
14
+ {% for pair in site.data.json %}
15
+ <div class="my ms">
16
+ {% if pair.typed -%}
17
+ <div id="strings">
18
+ {% for value in pair.value -%}
19
+ <span>{{ value }}</span>
20
+ {%- endfor %}
23
21
  </div>
24
- <p><span class="key">description</span>{% include typed.html %}</p>
25
- {% else %}
26
- <p><span class="key">description</span><span class="attr">{{ site.json.description }}</span></p>
27
- {% endif %}
28
- {% else %}
29
- <p><span class="key">description</span><span class="attr">{{ site.description }}</span></p>
30
- {% endif %}
31
- </div>
32
- <div class="block">
33
- {% if site.json.cv %}
34
- {% assign cv = site.json.cv | split: "/" | slice: -1 %}
35
- <p><span class="key">cv</span><span class="attr"><a href="{{ site.json.cv }}" {{ target }}>{{ cv }}</a></span></p>
36
- {% endif %}
37
- </div>
38
- <div class="block">
39
- {% if site.json.address %}
40
- {% if site.json.address.first %}
41
- <p><span class="array-key">address</span></p>
42
- <div class="array">
43
- {% for i in site.json.address %}
44
- <p class="array-attr">{{ i }}</p>
45
- {% endfor %}
46
- </div>
47
- {% else %}
48
- <p><span class="key">address</span><span class="attr">{{ site.json.address }}</span></p>
49
- {% endif %}
50
- {% endif %}
51
- </div>
52
- <div class="block">
53
- {% if site.json.contact %}
54
- {% if site.json.contact.first %}
55
- <p><span class="list-key">contact</span></p>
56
- <div class="list">
57
- {% for i in site.json.contact %}
58
- <p><span class="list-subkey">{{ i | slice: 0 }}</span><span class="list-attr">{{ i | slice: 1 }}</span></p>
59
- {% endfor %}
60
- </div>
61
- {% else %}
62
- <p><span class="key">contact</span><span class="attr">{{ site.json.contact }}</span></p>
63
- {% endif %}
64
- {% endif %}
65
- </div>
66
- <div class="block">
67
- {% if site.json.demo %}
68
- {% assign demo = site.json.demo | split: "//" | slice: 1 %}
69
- <p><span class="key">demo</span><span class="attr"><a href="{{ site.json.demo }}" {{ target }}>{{ demo }}</a></span>
22
+ {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
23
+ {{ quote }}<span class="value"><span id="typed"></span></span>{{ quote }}
24
+ {%- elsif pair.value.first.key -%}
25
+ {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
26
+ {% for value in pair.value -%}
27
+ {% if value.url -%}
28
+ <p class="ms">
29
+ {{ quote }}<span class="key">{{ value.key }}</span>{{ quote }}:
30
+ {{ quote }}<a class="value" href="{{ value.url }}" {{ target }}>{{ value.value }}</a>{{ quote }}
31
+ {%- unless forloop.last -%}
32
+ {{ comma }}
33
+ {%- endunless %}
70
34
  </p>
71
- {% endif %}
72
- {% if site.json.source %}
73
- {% assign source = site.json.source | split: "github.com/" | slice: 1 %}
74
- <p><span class="key">source</span><span class="attr"><a href="{{ site.json.source }}" {{ target }}>{{ source
75
- }}</a></span></p>
76
- {% endif %}
77
- </div>
78
- <div class="block">
79
- {% if site.json.profiles %}
80
- <span class="array-key">profiles</span>
81
- <div class="array">
82
- {% for i in site.json.profiles %}
83
- <p class="array-attr"><a href="{{ i | slice: 1 }}" {{ target }}>{{ i | slice: 0 }}</a></p>
84
- {% endfor %}
85
- </div>
86
- {% endif %}
35
+ {% else -%}
36
+ <p class="ms">
37
+ {{ quote }}<span class="key">{{ value.key }}</span>{{ quote }}:
38
+ {{ quote }}<span class="value">{{ value.value }}</span>{{ quote }}
39
+ {%- unless forloop.last -%}
40
+ {{ comma }}
41
+ {%- endunless %}
42
+ </p>
43
+ {% endif -%}
44
+ {%- endfor -%}
45
+ ]
46
+ {%- elsif pair.value.first -%}
47
+ {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
48
+ {% for value in pair.value -%}
49
+ {% if value.url -%}
50
+ <p class="ms">
51
+ {{ quote }}<a class="value" href="{{ value.url }}" {{ target }}>{{ value.value }}</a>{{ quote }}
52
+ {%- unless forloop.last -%}
53
+ {{ comma }}
54
+ {%- endunless %}
55
+ </p>
56
+ {% else -%}
57
+ <p class="ms">
58
+ {{ quote }}<span class="value">{{ value }}</span>{{ quote }}
59
+ {%- unless forloop.last -%}
60
+ {{ comma }}
61
+ {%- endunless %}
62
+ </p>
63
+ {% endif -%}
64
+ {%- endfor -%}
65
+ ]
66
+ {%- elsif pair.url -%}
67
+ {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
68
+ {{ quote }}<a class="value" href="{{ pair.url }}" {{ target }}>{{ pair.value }}</a>{{ quote }}
69
+ {%- else -%}
70
+ {{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
71
+ {{ quote }}<span class="value">{{ pair.value }}</span>{{ quote }}
72
+ {%- endif -%}
73
+ {%- unless forloop.last -%}
74
+ {{ comma }}
75
+ {%- endunless %}
87
76
  </div>
88
- </main>
77
+ {% endfor %}
78
+ </div>