Diz-theme-minimalist NPM

Minimalist

Dix and React

A Diz theme. [demo]

Dependencies Status

Install

yarn add -D diz-theme-minimalist
npm i -D diz-theme-minimalist

Customize

Clone this.

git clone git@github.com:nju33/diz-theme-minimalist.git
# or git clone https://github.com/nju33/diz-theme-minimalist.git

To prepare the environment.

cd <cloned directory path>
<npm or yarn> install

Edit theme/**/*.jsx files.

Then read in config.js.

const CustomTheme = require('./path/to/custom-theme');

module.exports = {
  title: '...',
  url: '...',
  theme: {
    Renderer: CustomTheme,
    config: {base: '...'}
  }
}

:tada::clap::clap::clap::clap::clap:

Options

{
  theme: {
    Renderer: Minimalist
    config: {
      //* option
      // Specify the path to the scripts directory
      // (e.g.)
      // When the blog's URL is like this
      // http://example.com/foo/
      // It is good to specify `/foo`
      base: null // default

      //* option
      // Whether to output CSS directly to the style tag of head
      // If wanna use it with your CSS, set it to false
      inlineCSS: true // default
      //* option
      // When A is false,
      // specify the public path up to
      // the CSS that you made
      stylesheetPath: '/styles/index.css' // default

      //* option
      // Whether to make twemoji available
      twemoji: false // default

      //* option
      // <html lang={lang}>
      lang: null // default
    }
  }
}

Tips

Import CSS of this theme to your CSS.

PostCSS

Let's install 2 packages

yarn add -D postcss postcss-import

Setup

const postcss = require('postcss');
const atImport = require('postcss-import');

postcss([atImport])
  .process(cssContents)
  .then(...);

Import it at the beginning of the .css file.

@import "diz-theme-minimalist";
/* == @import "./node_modules/diz-theme-minimalist/minimalist.css"; */

Less

Let's install 2 packages

yarn add -D less less-plugin-npm-import

Setup

const less = require('less');
const NpmImportPlugin = require('less-plugin-npm-import');

less.render(lessContents, {plugins: [new NpmImportPlugin()]})
  .then(...);

Import it at the beginning of the *.less file.

@import (less) "npm://diz-theme-minimalist/minimalist.css";

Sass

Let's install 2 packages

yarn add -D node-sass sass-module-importer

Setup

const sass = require('node-sass');
const moduleImporter = require('sass-module-importer');

sass.render({
  file: 'path/to/*.scss',
  importer: moduleImporter()
}, callback);

Import it at the beginning of the *.scss or *.sass file.