A lot more style/content changes

This commit is contained in:
Ske 2020-06-12 15:18:51 +02:00
parent ead1ae4e7c
commit 3d7a6ec72f
18 changed files with 223 additions and 153 deletions

View file

@ -1,38 +1,30 @@
<template> <template>
<span class="command-argument"><slot/></span> <span class="cmd-arg"><slot/></span>
</template> </template>
<style lang="stylus"> <style lang="stylus">
.command-argument { .cmd-arg {
font-weight: bold;
line-height: 1.75;
display: inline-block; display: inline-block;
padding: 0 0.6rem;
font-size: $exampleFontSize; background-color: $argBgPlain;
font-family: $exampleFontFamily; border-radius: 3px;
border-bottom: 1px solid darken($exampleArgColor, 15%);
color: $exampleTextColor;
padding: 0 0.5rem;
background-color: $exampleArgColor;
border-radius: 4px;
line-height: 1.7;
} }
.custom-block.tip .command-argument { .cmd-inline .cmd-arg {
background-color: $exampleArgColorInTip; background-color: $argBgInline;
} }
.command-example .command-argument { .cmd-block .cmd-arg {
background-color: $exampleArgColorInExample; background-color: $argBgBlock;
}
.custom-block.tip .command-example .command-argument {
background-color: $exampleArgColorInBoth;
} }
</style> </style>
<script> <script>
export default { export default {
props: ["optional", "name", "edit", "value"], props: [],
} }
</script> </script>

View file

@ -1,55 +1,70 @@
<template> <template>
<p class="command-example"> <div v-bind:class="{ cmd: true, 'cmd-block': inline === undefined, 'cmd-inline': inline !== undefined }">
<span class="example-comment" v-if="comment">// {{ comment }}</span> <div class="comment" v-if="comment">// {{ comment }}</div>
<span class="bot-prefix">pk;</span><slot v-if="usage === undefined"/><span v-if="usage !== undefined"> <span class="prefix">pk;</span><slot v-if="usage === undefined"/><span v-if="usage !== undefined">
<span v-for="part in parse(usage)"> <span v-for="part in parse(usage)">
<span v-if="part.type === 'str'">{{ part.str }}</span> <span v-if="part.type === 'str'">{{ part.str }}</span>
<span v-else-if="part.type === 'arg'"><Arg>{{ part.arg }}</Arg></span> <span v-else-if="part.type === 'arg'"><Arg>{{ part.arg }}</Arg></span>
</span> </span>
</span> </span>
</p> </div>
</template> </template>
<style lang="stylus"> <style lang="stylus">
.command-example { .cmd {
font-size: $exampleFontSize; // Universal command styles (text)
font-family: $exampleFontFamily; line-height: 1.7;
color: $exampleTextColor;
background-color: $exampleBgColor; color: $cmdColor;
.comment {
font-weight: bold;
color: $accentColor;
}
.prefix {
font-weight: bold;
color: $accentColor;
}
}
.cmd-block {
// Base block command styles (also see CmdGroup)
background-color: $cmdBgBlock;
border-radius: 6px; border-radius: 6px;
margin: 0.5rem 0;
/*margin: 1rem 0;*/
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
clear: both;
margin-bottom: 10rem;
} }
.custom-block.tip .command-example { .details > .cmd-block {
background-color: $exampleBgColorInTip; margin-top: 1rem;
} }
.bot-prefix { .cmd-group .cmd-block {
color: $examplePrefixColor; // Disable most parameters above for grouped commands
// (they'll get added back by CmdGroup below)
background-color: transparent;
padding: 0.1rem 1.25rem;
} }
.example-comment { .cmd-inline {
color: $exampleCommentColor; display: inline-block;
//float: right;
//@media (max-width: $MQNarrow) { color: $textColor;
display: block; background-color: $cmdBgInline;
//float: none; border-radius: 3px;
margin-bottom: -0.15rem; padding: 0 0.7rem;
//} margin: 0 0.1rem;
}
.tip .cmd-inline {
background-color: $cmdBgInlineTip;
} }
</style> </style>
<script> <script>
export default { export default {
props: ["usage", "comment"], props: ["usage", "comment", "inline"],
methods: { methods: {
parse(usage) { parse(usage) {
const parts = []; const parts = [];

View file

@ -1,30 +1,18 @@
<template> <template>
<div class="command-example-group"> <div class="cmd-group">
<slot /> <slot />
</div> </div>
</template> </template>
<style lang="stylus"> <style lang="stylus">
.command-example-group { .cmd-group {
background-color: $exampleBgColor; background-color: $codeBgColor;
border-radius: 6px; border-radius: 6px;
margin: 0.5rem 0; margin: 0.5rem 0;
padding: 0.75rem 1.25rem; padding: 0.25rem 0;
clear: both;
} }
.custom-block.tip .command-example-group { .details .cmd-group {
background-color: $exampleBgColorInTip; margin-top: 1rem;
}
.command-example-group .command-example {
margin: 0;
padding: 0;
}
.command-example-group .command-example:not(:last-child) {
margin-bottom: 0.5rem;
} }
</style> </style>

View file

@ -1,24 +0,0 @@
<template>
<span class="example-inline"><span class="inline-bot-prefix">pk;</span><slot /></span>
</template>
<style lang="stylus">
.example-inline {
font-size: $exampleFontSize;
font-family: $exampleFontFamily;
background-color: $exampleArgColor;
color: $exampleTextColor;
padding: 0.2rem 0.4rem;
border-radius: 3px;
border-bottom: 1px solid darken($exampleArgColor, 15%);
}
.custom-block.tip .example-inline {
background-color: $exampleArgColorInTip;
}
.inline-bot-prefix {
color: $examplePrefixColor;
}
</style>

View file

@ -1,10 +1,10 @@
<template> <template>
<div class="command-info"> <div class="cmd-info">
<h3 :id="cmd"> <h3 :id="cmd">
<a class="header-anchor" :href="'#' + cmd">#</a> <a class="header-anchor" :href="'#' + cmd">#</a>
{{ command.title }} {{ command.title }}
</h3> </h3>
<p>{{ command.summary }}</p> <p class="summary">{{ command.summary }}</p>
<slot></slot> <slot></slot>
@ -21,8 +21,8 @@
<h4 v-if="command.arguments">Arguments <small>(fill in above)</small></h4> <h4 v-if="command.arguments">Arguments <small>(fill in above)</small></h4>
<div class="info-arg" v-for="(arg, key) in command.arguments"> <div class="info-arg" v-for="(arg, key) in command.arguments">
<Arg>{{ key }}</Arg> <Arg>{{ key }}</Arg>
(<strong v-if="arg.type === 'string'">text</strong><strong v-if="arg.type === 'system'">system (<span v-if="arg.type === 'string'">text</span><span v-if="arg.type === 'system'">system
ID</strong><span v-if="arg.optional">, <em>optional</em></span>) - {{ arg.desc }}. reference</span><span v-if="arg.optional">, <em>optional</em></span>) - {{ arg.desc }}.
</div> </div>
<h4 v-if="command.flags">Flags <small>(all optional, starts with a hyphen, place anywhere in the <h4 v-if="command.flags">Flags <small>(all optional, starts with a hyphen, place anywhere in the
@ -46,24 +46,14 @@
} }
</script> </script>
<style> <style lang="stylus">
.command-info { .cmd-info {
margin-bottom: 2.5rem; .summary { margin-top: 0; }
} h3, h4 { margin-bottom: 0.5rem; }
.command-info h3 {
margin-bottom: 0;
}
.command-info p {
margin-top: 0.25rem;
}
.command-info h4 {
margin-bottom: 0.75rem;
}
.info-arg, .info-flag { .info-arg, .info-flag {
margin-bottom: 0.5rem; line-height: 1.5;
margin: 0.5rem 0;
}
} }
</style> </style>

View file

@ -30,6 +30,8 @@ module.exports = {
collapsable: false, collapsable: false,
children: [ children: [
"/guide/quick-start", "/guide/quick-start",
"/guide/ids",
"/guide/listing",
"/guide/systems", "/guide/systems",
"/guide/members", "/guide/members",
"/guide/proxying", "/guide/proxying",

View file

@ -0,0 +1,34 @@
/* inconsolata-regular - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local(''),
url('/fonts/inconsolata-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inconsolata-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inconsolata-500 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 500;
src: local(''),
url('/fonts/inconsolata-v19-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inconsolata-v19-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inconsolata-600 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 600;
src: local(''),
url('/fonts/inconsolata-v19-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inconsolata-v19-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
.line-number, code, pre, kbd, .cmd, .cmd-arg {
font-family: $monoFont;
font-weight: $monoWeight;
}

View file

@ -1,18 +1,18 @@
// THEME // THEME
$textColor = #2c3e50; $textColor = #2c3e50;
$accentColor = darken(#e8a024, 10%); $accentColor = darken(#e8a024, 10%)
// CUSTOM // COMMANDS
$exampleBgColor = #f3f5f7; $cmdColor = #f8fafc;
$exampleBgColorInTip = darken($exampleBgColor, 4%);
$exampleTextColor = darken($textColor, 5%); $cmdBgBlock = #282c34;
$exampleArgColor = darken($exampleBgColor, 1%); $cmdBgInline = darken(#f3f5f7, 4%);
$exampleArgColorInExample = darken($exampleBgColor, 4%); $cmdBgInlineTip = darken(#f3f5f7, 5%);
$exampleArgColorInTip = darken($exampleBgColor, 3%);
$exampleArgColorInBoth = darken($exampleBgColor, 8%); $argBgPlain = darken(#f3f5f7, 4%);
$tipDarkenFactor = 3; $argBgInline = darken(#f3f5f7, 5%);
$exampleDarkenFactor = 5; $argBgBlock = lighten($cmdBgBlock, 15%);
$exampleCommentColor = darken($accentColor, 15%);
$examplePrefixColor = desaturate(lighten($exampleCommentColor, 20%), 10%); // FONTS
$exampleFontSize = 0.9rem; $monoFont = Inconsolata, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
$exampleFontFamily = source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; $monoWeight = 500;

View file

@ -1,24 +1,53 @@
# Command list # Command list
This page shows a list of all commands PluralKit supports.
::: tip HOW TO READ THIS PAGE ## How to read this page
Below is a list of all the commands the bot supports. The first block for each command, **Usage**, shows the format of each command. This is essentially a "template" you'll need to fill in.
The parts you can change are called **arguments**, and they're highlighted.
Highlighted spaces (eg. <Arg>system-name</Arg> ) are **arguments**, and you should **fill in the blank** with the relevant bit of text. ### Arguments
The **Arguments** section below each command describes how to fill it in, and what type of value goes there. The command's **Arguments** section will describe how to fill them in, and what you need to put there.
When an argument asks for a **system ID**, you can either fill in a system's [5-character ID](./ids.md), **or** you can fill in a Discord account ID, or even a @mention. For example: ::: details Example of a command with an argument
Here's an example of a command with an argument:
<Cmd>some-command <Arg>this-is-an-argument</Arg></Cmd>
When running this command, fill in the argument like so:
<Cmd>some-command <Arg>My cool text</Arg></Cmd>
:::
### Systems and members
Some commands accept a **target system or member**:
For **systems**, this can either be a [5-character ID](./ids.md), a `@mention`, or a [Discord user ID](https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-).
In many cases you can leave the system out entirely. Instead, it'll just use your own system.
For **members**, this can be the member's name or their [5-character ID](./ids).
::: details Example of referring to systems
<CmdGroup> <CmdGroup>
<Cmd comment="Looks up a system with the ID 'exmpl'">system <Arg>exmpl</Arg></Cmd> <Cmd comment="Own system">system list</Cmd>
<Cmd>system <Arg>466378653216014359</Arg> list</Cmd> <Cmd comment="By ID">system <Arg>abcde</Arg> list</Cmd>
<Cmd>system <Arg>@PluralKit#4020</Arg> fronter</Cmd> <Cmd comment="By @mention">system <Arg>@Myriad#1234</Arg> list</Cmd>
<Cmd comment="By Discord user ID">system <Arg>466378653216014359</Arg> list</Cmd>
</CmdGroup> </CmdGroup>
:::
When an argument asks for a **member ID**, you can either fill in a member's [5-character ID](./ids.md), or, *if the member is in your own system*, their name. This means that to target a member in another system, you **must** use their ID. ::: details Example of referring to members
<CmdGroup>
<Cmd comment="By name">member <Arg>Myriad</Arg> info</Cmd>
<Cmd comment="By name (with spaces)">member <Arg>"Myriad Kit"</Arg></Cmd>
<Cmd comment="By ID">member <Arg>zxcvb</Arg> info</Cmd>
</CmdGroup>
:::
::: warning
If you're trying to refer to a member with **spaces or emojis** in their name, you'll need to wrap the name in either 'single' or "double" quotes. Alternatively, you can use the [member ID](./ids).
::: :::
## System commands ## System commands
::: tip ::: tip
You can use <CmdInline>s</CmdInline> instead of <CmdInline>system</CmdInline> as a short-hand. You can use <Cmd inline>s</Cmd> instead of <Cmd inline>system</Cmd> as a short-hand.
::: :::
<CommandInfo cmd="systemInfo"></CommandInfo> <CommandInfo cmd="systemInfo"></CommandInfo>
@ -28,10 +57,10 @@ You can use <CmdInline>s</CmdInline> instead of <CmdInline>system</CmdInline> as
## Member commands ## Member commands
::: tip ::: tip
You can use <CmdInline>m</CmdInline> instead of <CmdInline>member</CmdInline> as a short-hand. You can use <Cmd inline>m</Cmd> instead of <Cmd inline>member</Cmd> as a short-hand.
::: :::
## Switch commands ## Switch commands
::: tip ::: tip
You can use <CmdInline>sw</CmdInline> instead of <CmdInline>switch</CmdInline> as a short-hand. You can use <Cmd inline>sw</Cmd> instead of <Cmd inline>switch</Cmd> as a short-hand.
::: :::

View file

@ -1,2 +1,45 @@
# System and member IDs # IDs
hi! Most "things" in PluralKit have a randomly assigned **5-character ID**. When you create a new system or a new member,
an ID will be generated for that system or member.
The IDs are always lowercase letters, and will look something like this: `zxcvb`. They generally won't spell anything readable,
but given their random nature, occasionally they'll produce a word. Consider it a bonus! (unless it's a slur or something rude, in which case [ask me to change it](../support-server.md))
## Finding your IDs
To find your own system ID, look up your own system card using the <Cmd inline>system</Cmd> command. The system ID will display in the card's footer, like so:
TODO: insert example with highlighted ID
To find a member ID, you can similarly look up the member by name using the <Cmd inline>member <Arg>member-name</Arg></Cmd> command, like so:
TODO: insert example with highlighted ID (showing command invocation)
You can also [look at your member list](./listing.md), and each member's ID will be shown on the left-hand side, like so:
TODO: insert example with highlighted ID (showing command invocation)
## Where can I use it?
IDs are the universal way of uniquely referring to a system or member. Most commands will allow you to enter a relevant ID:
<CmdGroup>
<Cmd>system <Arg>system-id</Arg></Cmd>
<Cmd>system <Arg>system-id</Arg> list</Cmd>
<Cmd>member <Arg>member-id</Arg></Cmd>
<Cmd>switch <Arg>member-id-1</Arg> <Arg>member-id-2</Arg></Cmd>
</CmdGroup>
**System IDs** can also be written as either an account `@mention` or a numeric [Discord user ID](https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-). This will refer to the system linked to that account.
**Member IDs** can be used instead of member names in most commands. This is especially useful if a member has spaces or symbols in the username; using the member ID lets you avoid messing with "quotes", emojis, special keyboards, etc.
::: details Example
Take a member with the name `Myriad "Big Boss" Kit ✨`. This member has the ID `asdfg`.
When running a command on this member (eg. changing their description), both of these will work:
<CmdGroup>
<Cmd>member <Arg>'Myriad "Big Boss" Kit ✨'</Arg> description <Arg>My new description!</Arg></Cmd>
<Cmd>member <Arg>asdfg</Arg> description <Arg>My new description!</Arg></Cmd>
</CmdGroup>
:::

View file

@ -0,0 +1 @@
# Listing members

View file

@ -8,10 +8,10 @@ A *system* is equivalent to an account. Every user of PluralKit must have a syst
## System IDs ## System IDs
Each system has a **system ID** - a randomly generated string of 5 letters. You can use this ID to unambiguously refer to a system in commands. Each system has a **system ID** - a randomly generated string of 5 letters. You can use this ID to unambiguously refer to a system in commands.
You can see your system ID by running <Cmd-inline>system</Cmd-inline> and looking at the embed footer (at the bottom of the response). You can see your system ID by running <Cmd inline>system</Cmd> and looking at the embed footer (at the bottom of the response).
## Creating a system ## Creating a system
To create a system, use the <Cmd-inline>system new</Cmd-inline> command with an optional system name: To create a system, use the <Cmd inline>system new</Cmd> command with an optional system name:
<CmdGroup> <CmdGroup>
<Cmd>system new</Cmd> <Cmd>system new</Cmd>
@ -37,7 +37,7 @@ Should you want to unlink an account, use the equivalent unlink account:
<Cmd>unlink <Arg>@NameOfAccount#1234</Arg></Cmd> <Cmd>unlink <Arg>@NameOfAccount#1234</Arg></Cmd>
You can unlink your own account too (both by mentioning, or using <Cmd-inline>unlink</Cmd-inline> with no account). While you can't unlink the only linked account, be careful not to lock yourself out of your system by other means :slightly_smiling_face: You can unlink your own account too (both by mentioning, or using <Cmd inline>unlink</Cmd> with no account). While you can't unlink the only linked account, be careful not to lock yourself out of your system by other means :slightly_smiling_face:
::: tip ::: tip
On both of these commands, you can also supply a user ID. This is useful when you want to unlink an already-deleted account, for example. On both of these commands, you can also supply a user ID. This is useful when you want to unlink an already-deleted account, for example.