Git Product home page Git Product logo

jekyll-theme-console's Introduction

jekyll-theme-console

A jekyll theme with inspiration from linux consoles for hackers, developers and script kiddies.

Demo

dark style (source code):

light style (source code):

hacker style (source code):

Installation

First, follow the steps in this Quickstart Guide if you're starting with Jekyll from scratch. Skip this if you already have an existing jekyll project.

You can also use the demo site's source code as template for an easy start.

Remote theme method for GitHub Pages

Use this method for sites hosted with GitHub Pages only. To install:

  1. Set remote_theme in your project's Jekyll _config.yml file:

    remote_theme: b2a3e8/jekyll-theme-console

Gem-based method

With Gem-based themes, directories such as the assets, _layouts, _includes, and _sass are stored in the theme’s gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll’s build process.

This allows for easier installation and updating as you don't have to manage any of the theme files. To install:

  1. Add this line to your Jekyll site's Gemfile:

    gem "jekyll-theme-console"
  2. Fetch and update bundled gems by running the following Bundler command:

    bundle
  3. Set theme in your project's Jekyll _config.yml file:

    theme: jekyll-theme-console

To update the theme run bundle update.

Usage

_config.yaml

In addition to jekyll's default configuration options, you can provide:

  • header_pages to specify which pages should be displayed in navbar
  • footer string, which will be inserted on the end of the page (doesn't support markup, but html)
  • google_analytics tracking id (tracking will be enabled only in production environments and only if you set this option, no Google Analytics code will be loaded if you don't set this option)
  • listen_for_clients_preferred_style boolean, used to allow users to choose light or dark style based on their preferences (mostly affected by OS dark or light theme, details see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
  • style to specify which predefined style (colors) should be used
header_pages:
  - index.md
  - about.md

style: dark # dark (default), light or hacker
listen_for_clients_preferred_style: true # false (default) or true

footer: 'follow us on <a href="https://twitter.com/xxx">twitter</a>'

google_analytics: UA-NNNNNNNN-N

front matter variables

Besides the predefined front matter variables from jekyll this theme also supports following variables:

  • title to set a title for the page
  • lang to specify the language, defaults to 'en'
  • robots to control the robot meta tag (details) - this may be useful for example to set NOINDEX to tag pages

Customization

If you want to customize this theme, follow this steps:

  1. Fork this repository (you can use the fork as your own theme or directly as your website)
  2. Create or modify files in _layouts directory for html-based changes
  3. Create or modify files in _sass and assets for css-based changes
    • You can change things which are used in light and dark theme (like font-size) in _sass/base.scss. You'll find style variables at the top.
    • Style-specific definitions are in _sass/_dark.scss respectively in _sass/_light.scss. You can change things like background-color there.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/b2a3e8/jekyll-theme-console. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in jekyll-theme-console.gemspec accordingly.

License

The theme is available as open source under the terms of the MIT License.

jekyll-theme-console's People

Contributors

b2a3e8 avatar niclimcy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jekyll-theme-console's Issues

Undefined variable: "$base-font-weight". on line 17 on gitlab pages

Hello, I'm facing this issue when configuring the template using the gitlab pages:

Configuration file: /builds/id3s3c/id3s3c.gitlab.io/_config.yml
85             Source: /builds/id3s3c/id3s3c.gitlab.io
86        Destination: public
87  Incremental build: disabled. Enable with --incremental
88       Generating... 
89   Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/main-dark.scss':
90                     Undefined variable: "$base-font-weight". on line 17
91 jekyll 3.8.0 | Error:  Undefined variable: "$base-font-weight". on line 17
92 ERROR: Job failed: exit code 1

my _confg.yml file:

# Site settings
baseurl: "" # the subpath of your site, e.g. /blog
url: "https://id3s3c.gitlab.io" # the base hostname & protocol for your site

# Build settings
markdown: kramdown
exclude: ["README.md"]
theme: jekyll-theme-console

Gemfile:

source "https://rubygems.org"
ruby RUBY_VERSION

# This will help ensure the proper Jekyll version is running.
# gem "jekyll", "3.4.0"
gem "jekyll", "3.8"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem "jekyll-theme-console"

.gitlab-ci.yml:

image: ruby:2.3

variables:
  JEKYLL_ENV: production
  LC_ALL: C.UTF-8

before_script:
  - bundle install

test:
  stage: test
  script:
  - bundle exec jekyll build -d test
  artifacts:
    paths:
    - test
  except:
  - master

pages:
  stage: deploy
  script:
  - bundle exec jekyll build -d public
  artifacts:
    paths:
    - public
  only:
  - master

SEO error

Hi, after doing bundle update and the running bundle exec jekyll serve I get this error:
Liquid Exception: Liquid syntax error (../_includes/head.html line 6): Unknown tag 'seo' included in ../_layouts/default.html

Is it possible to link to directory through markdown on the index.md?

I don't want to be linking to just one thing on the index.md file and it will be nice to the whole directory like in the post format. I tried and researched different solutions but, I was not able to find the exact answer to this question. If you need me to explain more, I will happily to do so.

I was wondering if this is possible to be fixed because I really like this theme.

[Question] Adding a page from a different folder on _config_yml

Hi.
I really enjoy this project. Keep it up!
I have this question. I want to keep my repository clean, so I don't want to have everything in the root folder.
I would like to make an "index.md" page on the "guides" folder and put it on header_pages in _config.yml. But I can't get it working, I have tried writing something like this:

header_pages:
  - home.md
  - about.md
  - contact.md
  - /guides/index.

but, after build, it was not on the header.
Do you know any workaround?
Thanks.

Support user preference for light or dark mode

I think it would be nice to utilize the CSS query @media (prefers-color-scheme: dark) to enable the dark theme when the user prefers it, but still allow the site owner to enforce one or the other. Would this be something you would be open to considering? I would love to work on it.

RSS Feed?

How can I make an RSS feed for my blog with this theme?

Markdown or HTML images in posts

Hey there,
i'm having some trouble linking images in my blogposts. At least it looks like github won't load the images.

here is what i've tried so far
<img src="/content/january/df_map.png" alt="">
<img src="https://github.com/nothingAD/nothingAD.github.io/blob/master/files/dream1.PNG" alt=""/>
![](../files/dream1.PNG)

Is there something missing?
Best regards!

Changes for the VI/Blind

Hello,

Some changes I am trying to make and can not figure it out.
I was trying to find a way to change the background color to a slate / dark gray, (think parrot terminal)
Then also make the font just a little bigger maybe 2 points.

Slow Load Times

I would like to use the Console theme on my site, as it is perfectly minimal and hacker-esque. However, I notice that the page load time is quite slow, even with an empty blog. Is this a known issue, or does anyone have suspicions as to why?

Can't Get Google Analytics Working.

When I deploy my site, CSP is blocking google analytics. I found that you can add a csp nonce- but I have no idea where to put that.
Sorry for the pain.
image

Github Pages build fails with the new hacker style changes

Hi! Thanks for putting in the work for your theme, I love it.

The recent hacker style changes don't sit well with Github Pages - I'm seeing the following error on build:

Your SCSS file assets/main-hacker.scss has an error on line 16: Undefined variable: "$background-color".

Local build works perfectly fine.

Here's a link to the run page, but it doesn't have much more info. I'm pulling in the theme using remote_theme in _config.yml.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.