Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/piazzai/hacked-jekyll
Jekyll microtheme that looks like JSON
https://github.com/piazzai/hacked-jekyll
css cv hack hack-typeface html javascript jekyll jekyll-site jekyll-template jekyll-theme jekyll-website json json-format minimalistic-theme normalize-css one-page-website open-color personal-webpage personal-website typed-js
Last synced: about 12 hours ago
JSON representation
Jekyll microtheme that looks like JSON
- Host: GitHub
- URL: https://github.com/piazzai/hacked-jekyll
- Owner: piazzai
- License: mit
- Created: 2023-02-25T08:20:19.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-29T13:38:27.000Z (3 months ago)
- Last Synced: 2024-09-19T02:06:01.927Z (6 days ago)
- Topics: css, cv, hack, hack-typeface, html, javascript, jekyll, jekyll-site, jekyll-template, jekyll-theme, jekyll-website, json, json-format, minimalistic-theme, normalize-css, one-page-website, open-color, personal-webpage, personal-website, typed-js
- Language: CSS
- Homepage: https://piazzai.github.io/hacked-jekyll/
- Size: 751 KB
- Stars: 114
- Watchers: 4
- Forks: 61
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hacked-jekyll
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/).
See the [demo](https://piazzai.github.io/hacked-jekyll) to check the end result.
## Installation
The theme can be installed as usual by cloning this repository and editing the files. However, it is far more convenient to install it as a gem, in which case all the files you do not want or need to customize remain hidden from view, but will still be read and processed during build.
To install the theme as a gem, you can then add this line to your `Gemfile`:
```ruby
gem "hacked-jekyll"
```
And this line to `_config.yml`:
```yaml
theme: hacked-jekyll
```
The easiest way to set up a new website in this way is to clone the contents of the `demo` folder. This provides a working set of files to get you started.
After you are done creating the basic files, run bundler:
$ bundle
Or install the gem yourself as:
$ gem install hacked-jekyll
To customize hidden files, you can create new files with the same names and paths. For example, to change the layout of the index page, you can create a `_layouts` folder and a file `index.html` within this folder that contains your custom code. During build, Jekyll will give priority to your files over the theme's.
## Usage
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.
```yaml
- key: Name
value: Place Holder
```
In addition, you can provide a `url`, in which case the value is rendered as a hyperlink. Here is an example:
```yaml
- key: Source
value: piazzai/hacked-jekyll
url: https://github.com/piazzai/hacked-jekyll
```
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.
```yaml
- key: Address
value:
- University of Jekyll
- Department of Themes
- 123 Main St, Anytown, USA
```
An array can also consist of hyperlinks. To achieve this, provide each line of `value` with its own `value` and `url`, like so:
```yaml
- key: Profiles
value:
- value: Instagram
url: https://www.instagram.com
- value: LinkedIn
url: https://www.linkedin.com
```
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
- 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]"
```
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 |
| ------------- | :-------: | ---------------------------------------------------- |
| `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: indigo-5
color_punct: teal-6
color_key: grape-7
color_value: lime-8
color_hover: cyan-9
```
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:
```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
If you find any problem using the theme, please [open an issue](https://github.com/piazzai/hacked-jekyll/issues).