Giter Club home page Giter Club logo

hexo-renderer-stylus's Introduction

hexo-renderer-stylus

Build Status NPM version Coverage Status

Add support for Stylus with nib and other plugins.

Install

Prerequisites:

  • Hexo 3: >= 0.2
  • Hexo 2: 0.1.x
$ npm install hexo-renderer-stylus --save

Options

You can configure this plugin in _config.yml.

stylus:
  compress: false
  sourcemaps:
    comment: true
    inline: true
    sourceRoot: ''
    basePath: .
  plugins: 'nib'
  • compress - Compress generated CSS (default: false)
  • sourcemaps
    • comment - Adds a comment with the sourceMappingURL to the generated CSS (default: true)
    • inline - Inlines the sourcemap with full source text in base64 format (default: false)
    • sourceRoot - sourceRoot property of the generated sourcemap
    • basePath - Base path from which sourcemap and all sources are relative (default: .)
  • plugins - Stylus plugin(s) (default: nib)

Setting Stylus variables

It is possible to set variables that can be used in Stylus. The purpose of setting variable is to avoid direct modification of the Stylus code, and thus to make themes more generic

For example, instead of hardcoding:

div
 color #FFCC44

You can refer to a variable:

div
 color convert(hexo-config("moody_red"))

And in your theme's configuration, you can define this variable:

moody_red: "#8B0001"

(The "convert" function above is here to convert the string into an actual stylus color)

You can also use the theme_config variable in the main _config.yml:

theme_config:
  moody_red: "#8B0001"

Extensibility

This plugin provide a filter stylus:renderer to allows you extend it. When there's something you cannot do in Stylus, define it in JavaScript!

For example, to define some global variable:

hexo.extend.filter.register('stylus:renderer', function(style) {
  style
    // we may define a global variable by passing a `Node`
    .define('has-canvas', require('stylus').nodes.false);
    // stylus also casts JavaScript values to their Stylus equivalents when possible
    .define('families', ['Helvetica Neue', 'Helvetica', 'sans-serif'])
    // also allows you to provide a JavaScript-defined function to Stylus
    .define('get-list', function(){
      return ['foo', 'bar', 'baz'];
    });
})

Save the file in "scripts/" folder and run Hexo as usual.

Notice: for more JavaScript api, refer to stylus's documentation.

hexo-renderer-stylus's People

Contributors

abylaw avatar curbengh avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar futekov avatar ichenlei avatar iissnan avatar jakschu avatar jiangtj avatar kusurin avatar lzjqsdd avatar mamboer avatar segayuu avatar stevenjoezhang avatar sukkaw avatar tomap avatar tommy351 avatar uiolee avatar yoshinorin avatar

Stargazers

 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  avatar  avatar  avatar

hexo-renderer-stylus's Issues

I can't compress and show sourcemaps

Hi everyone!

I can't compress and show sourcemaps. My _config.yml looks like:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: my-theme

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

stylus:
  compress: true
  sourcemaps:
    comment: true
    inline: true
    sourceRoot: ''
    basePath: .

And my stylus sources are in themes/my-themes/source/css folder!

Someone can help me?

Cannot ignore single-line comments correctly

Environment

Gemini scheme in NexT theme is used.

Description

I was editing sources/_data/mixins.styl to prettify my site. The original values were copied from the source as a reference.

When I use single line comments, the page glitches. The white background of posts and sidebar disappears, but the exact glitch behavior may change depends on what is commented in which file. The comments do not appear in main.css after hexo clean && hexo build

//original values:
// desktop() {
//  @media (min-width: 992px) {
//    {block};
//  }
//}

But when I use block comments, the page is rendered correctly. After clean and build, the comments appear in the beginning of main.css.

/*original values:
 desktop() {
  @media (min-width: 992px) {
    {block};
  }
}
 */

I looked into documents of stylus and it says line comments is allowed, thus I think the renderer went into error.

if hexo-config support get attr from site config file

When i call hexo-config('root') from styl file, it return empty because theme lack of 'root' attr. So i think that if hexo-config shoud support get attr from site config file again, or how to handle the root problem?

won't detect changes to imported files

When I use "hexo generate", changes to files that are @import into the main .styl file aren't detected. If I edit the main .styl file and "hexo generate", then change it back and "hexo generate" again, I can get it to work, but it just seems like extra work. Is there a setting that I'm missing that tells it to watch for changes to all files?

Thanks, and sorry for the noob question.

Please pubish it to npm.

Now I should do some work based on stylus latest version.
Or others can not use my theme.
Thanks.

Jeet and rupture support

Can this be configured to support Jeet and Rupture without having to hack the renderer.js file?

minimatch deprecated, update possible?

Hi, would it be possible to update minimatch? it is used in the glob module. However glob needs to be updated to. thank you

fryhexo ❯ npm ls minimatch
[email protected] /Users/fry/fryhexo
├─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
  ├─┬ [email protected]
  │ └─┬ [email protected]
  │   └─┬ [email protected]
  │     └── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └── [email protected]

fryhexo ❯ npm install hexo-renderer-stylus --save
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[email protected] /Users/fry/fryhexo
└── [email protected]

block in lib/renderer.js

I can't GET css/style.css when I use [email protected], and I check the code found it block at hexo-renderer-stylus/lib/renderer.js:18&19, the code is var config = this.config.stylus || {}; var self = this.hexo;, it work s after I change this to this.hexo

Publish the latest version to NPM registry?

Could you please publish the latest version (0.3.2) to the NPM registry?
And is it possible to publish the newest version to NPM registry when a new version is bumped?

Thanks.

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.