Giter Club home page Giter Club logo

vuepress-plugin's Introduction

RPG Dice Roller

RPG Dice Roller Vuepress Plugin

npm (scoped) License

Plugin for VuePress v2 that allows rolling dice. For Vuepress v1, use version v0.1.* of this library.

This library enables adding a dice roller component anywhere within a markdown file, with a simple syntax.

It uses the Dice Roller Vue component, which is built upon the RPG dice roller, and is used in the Dice Roller documentation.

Dice Roller component

Install

Install the plugin:

npm install -D @dice-roller/vuepress-plugin-dice-roller

Then add the plugin to your Vuepress config file:

import { diceRollerPlugin } from '@dice-roller/vuepress-plugin-dice-roller';

export default defineUserConfig({
    ...
    plugins: [
        diceRollerPlugin()
    ]
});

Usage

You can add a die roller anywhere by using the following markdown syntax:

::: roll :::

You can even specify the default notation with:

::: roll {notation} :::

For example:

::: roll 4d6 ::

::: roll (2*6)d10 / (4 - d20) :::

Customise

Styles

You can customise the style of the dice roller component via CSS variables.

These are the variables, and their default values:

:root {
    --dice-roller-text-color: #2c3e50;

    --dice-roller-bg: #eeeeee;
    --dice-roller-border-radius: 0;
    --dice-roller-color: var(--dice-roller-text-color);

    --dice-roller-output-bg: #ffffff;
    --dice-roller-output-border-color: #d4f4c6;
    --dice-roller-output-border-radius: 0;
    --dice-roller-output-color: var(--dice-roller-text-color);
    --dice-roller-output-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

    --dice-roller-form-height: 2.75rem;

    --dice-roller-input-bg: #ffffff;
    --dice-roller-input-border: #eaecef;
    --dice-roller-input-border-focus: #d4f4c6;
    --dice-roller-input-color: var(--dice-roller-text-color);

    --dice-roller-button-bg: linear-gradient(to bottom right, #eda18b, #d4f4c6);
    --dice-roller-button-bg-active: linear-gradient(to bottom right, #d4f4c6, #eda18b);
    --dice-roller-button-border-color: rgb(209 213 219);
    --dice-roller-button-color: rgb(75 85 99);

    --dice-roller-error-color: rgb(220 38 38);
}

html.dark {
    --dice-roller-text-color: #adbac7;

    --dice-roller-bg: #2b313a;

    --dice-roller-output-bg: #22272e;

    --dice-roller-input-bg: #22272e;
    --dice-roller-input-border: #3e4c5a;

    --dice-roller-error-color: rgb(254 202 202);
}

Default Vuepress theme

If you're using the default Vuepress theme, we suggest the following overrides, to make it match your theme:

:root {
    --dice-roller-text-color: var(--c-text);

    --dice-roller-bg: var(--c-bg-lighter);
    --dice-roller-border-radius: 0;
    --dice-roller-color: var(--dice-roller-text-color);

    --dice-roller-output-bg: var(--c-bg);
    --dice-roller-output-border-color: var(--c-brand);
    --dice-roller-output-border-radius: 0;
    --dice-roller-output-color: var(--dice-roller-text-color);
    --dice-roller-output-font-family: var(--font-family-code);

    --dice-roller-form-height: 2.75rem;

    --dice-roller-input-bg: var(--c-bg);
    --dice-roller-input-border: var(--c-border);
    --dice-roller-input-border-focus: var(--c-brand);
    --dice-roller-input-color: var(--dice-roller-text-color);

    --dice-roller-button-bg: var(--c-brand);
    --dice-roller-button-bg-active: var(--c-brand-light);
    --dice-roller-button-border-color: var(--c-brand);
    --dice-roller-button-color: var(--c-bg);

    --dice-roller-error-color: var(--c-danger);
}

html.dark {
    --dice-roller-bg: var(--c-bg-light);
}

Custom styles not working

There is an issue with Vuepress, whereby Plugin styling can take precendent over custom styling, causing these CSS overrides to not work.

In this case, you may need to use !important to force your custom styling to take affect.

vuepress-plugin's People

Contributors

greenimp avatar

Watchers

avatar

vuepress-plugin's Issues

[Bug]: Syntax breaks Vuepress menu

This plugin is causing an issue which prevents headers from appearing in the menu, as mentioned here: vuepress/core#1329

The cause of this is how we're using the markdown-it-container plugin to render the dice roller.

The syntax for rolling is like:

::: roll 4d6 :::

However, the container plugin does not understand code fences (:::) on the same line.

If I change the markdown so that the closing fence is on the next line, then it works correctly:

::: roll 4d6
:::

There is a ticket for this on the container library, but it was closed as not a bug.
However, I'm not sure this is correct, because the spec seems to suggest that a closing fence on the same line should be closed correctly: https://spec.commonmark.org/0.18/#example-95

Suggested solution

In the short-term, we can make sure to use the multi-line syntax:

::: roll 4d6
:::

In the long-term, I don't think that I can get it working correctly with the container plugin, so it may be worth looking into building a custom markdown-it plugin.

Maybe basing it on another plugin like this: https://github.com/camelaissani/markdown-it-include

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.