Skip to content

Instantly share code, notes, and snippets.

@Tolmark12

Tolmark12/cli-styleguide.vue

Created September 9, 2019 15:26
Show Gist options
  • Save Tolmark12/87a9b0bac12ee75d8ef7f036e2094b43 to your computer and use it in GitHub Desktop.
Save Tolmark12/87a9b0bac12ee75d8ef7f036e2094b43 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cli-styleguide.vue
<script lang="coffee">
export default
name: 'style-guide'
head:
class:"dark"
</script>
<template lang="pug">
.cli-style-guide
.section
.title Simple [Yes / No] Question
.description Asking the user a binary questions
.term
.etc
|<span class="green">?</span> Is this a nodejs app : <span class="blue">(Y/n)</span> _
.section
.title Select
.description Use this pattern when the user needs to select from multiple options.
.term
.etc
|<span class="green">?</span> Choose a configuration preference:
.blue › Automatic - heroku-style buildpacks
| Manual - custom Dockerfile
.section
.title User Input
.description When the user pastes info into the terminal.
.term
.etc
|<span class="green">+</span> Paste your token here: _
.section
.title Obfuscated Input
.description Passwords, API keys, etc..
.term
.etc
| <span class="green">+</span> API KEY : **************************
.section
.title Heading : Major
.description To denote a major section of tasks; analagous to a chapter heading in a book.
.term
.etc
.green ⠯⠕ ◳ ⠪⠽ BUILDING IMAGE : mickey-mouse-123
.green ---------------------------------------------------------------------------------
.etc
.comment # macro icons:
.green ⠯⠕ ◳ ⠪⠽ <span class="comment"># BUILDING / CLEANING</span>
.green ⣾ ⠕◳⠪ ⣷ <span class="comment"># PUSHING</span>
|
.comment # Micro icons:
| [> + <] Compressing image
| [>>> +] Uploading image
.section
.title Heading : minor
.description Use this pattern ifit helps denote a new monor section of tasks.
.term
.etc
.green Starting a somewhat important but not critical task
.green ----------------------------------------------------
.section
.title Task Complete : major
.description Think of this as the closing bookend that begins with a Major Heading.
.term
.etc
.green [ ✓ ] COMPLETE!
.section
.title Task Complete : core
.description These are shown after major tasks are complete
.term
.etc
.base <span class="blue"> /\\\ //\\ </span> Success!
.base <span class="blue">// \\\/ \\ </span> ---------------------------------------------------
.base <span class="blue">\\ \\\ // </span> Your app has been configured for deployment.
.base <span class="blue"> \\//\\\// </span> Find editable config files in the deploy/ folder.
br
br
br
.base <span class="blue"> /\ </span> App Deployed!
.base <span class="blue"> //\//\\/\\ </span> ---------------------------------------------------
.base <span class="blue"> \\/\\//\// </span> Admin : http://mako.digitalocean.com/snarky-snail
.base <span class="blue"> // \/ \\ </span> Dev URL : http://snarky-snail.makoapp.com
.section
.title Long running minor tasks
.term
.etc
| <span class="green">✓</span> Which version of node
.etc
.comment # Typical lifecycle of minor tasks:
.comment &nbsp;
.comment # In progress
| <span class="blue">⣾</span> Deploying Code
.comment # Complete
| <span class="green">✓</span> Deploying Code
.comment # Errored
| <span class="red">!</span> Deploying Code
.section
.title Sequence Viewer
.description Sequence viewer
.term
.etc
div <span class="blue">STACK BUNKHOUSE SCALE ACTIVATE</span> :: Activating a shared host <span class="blue">⣽ Processing</span>
.bar -------------------------------------------------------------------------------------------------
.bar <span class="green">████████░░░░░░░░░░░ 51%</span> : data.pulse.1 - creating new member
.bar <span class="green">████░░░░░░░░░░░░░░░ 29%</span> : data.portal.1 - creating new member
.bar <span class="green">█████░░░░░░░░░░░░░░ 36%</span> : data.mist.1 - creating new member
.bar <span class="green">███████░░░░░░░░░░░░ 48%</span> : data.hoarder.1 - creating new member
.bar <span class="green">█████░░░░░░░░░░░░░░ 35%</span> : data.logvac.1 - creating new member
.bar <span class="green">█████████░░░░░░░░░░ 49%</span> : web.admin - ordering server from DigitalOcean
.bar <span class="green">████░░░░░░░░░░░░░░░ 21%</span> : web.admin - launching new instances
.bar <span class="green">███░░░░░░░░░░░░░░░░ 18%</span> : web.admin.1 - creating new member host
.bar <span class="nonee">░░░░ (waiting) ░░░░ </span> : web.admin.1 - deleting server
.bar <span class="nonee">░░░░ (waiting) ░░░░ </span> : web.admin.1 - ordering server (nanobox.web.admin.12.1) from DigitalOcean
div <br/><br/>
.title Sequence Viewer
.description Sequence viewer
.term
.etc
div <span class="blue">STACK BUNKHOUSE SCALE ACTIVATE</span> :: Activating a shared host <span class="blue">⣽ Processing</span>
.bar -------------------------------------------------------------------------------------------------
.bar <span class="green">▓▓▓▓ COMPLETE! ▓▓▓▓ [√] : data.pulse.1 - creating new member </span>
.bar <span class="green">▓▓▓▓░░░░░░░░░░░░░░░ 29%</span> : data.portal.1 - creating new member
.bar <span class="green">▓▓▓▓▓░░░░░░░░░░░░░░ 36%</span> : data.mist.1 - creating new member
.bar <span class="green">▓▓▓▓▓▓▓░░░░░░░░░░░░ 48%</span> : data.hoarder.1 - creating new member
.bar <span class="green">▓▓▓▓▓░░░░░░░░░░░░░░ 35%</span> : data.logvac.1 - creating new member
.bar <span class="green">▓▓▓▓▓▓▓▓▓░░░░░░░░░░ 49%</span> : web.admin - ordering server from DigitalOcean
.bar <span class="green">▓▓▓▓░░░░░░░░░░░░░░░ 21%</span> : web.admin - launching new instances
.bar <span class="green">▓▓▓░░░░░░░░░░░░░░░░ 18%</span> : web.admin.1 - creating new member host
.bar <span class="nonee">░░░░ (waiting) ░░░░ </span> : web.admin.1 - deleting server
.bar <span class="nonee">░░░░ (waiting) ░░░░ </span> : web.admin.1 - ordering server (nanobox.web.admin.12.1) from DigitalOcean
div <br/><br/>
.description Errored action
.term
.etc
div <span class="blue">STACK BUNKHOUSE SCALE ACTIVATE</span> :: Activating a shared host <span class="red"> ! Error</span>
.bar -------------------------------------------------------------------------------------------------
.bar <span class="green">▓███████░░░░░░░░░░░ 51%</span> : data.pulse.1 - creating new member
.bar <span class="green">████░░░░░░░░░░░░░░░ 29%</span> : data.portal.1 - creating new member
.bar <span class="green">█████░░░░░░░░░░░░░░ 36%</span> : data.mist.1 - creating new member
.bar <span class="green">███████░░░░░░░░░░░░ 48%</span> : data.hoarder.1 - creating new member
.bar <span class="green">█████░░░░░░░░░░░░░░ 35%</span> : data.logvac.1 - creating new member
.bar <span class="green">█████████░░░░░░░░░░ 49%</span> : web.admin - ordering server from DigitalOcean
.bar <span class="green">████░░░░░░░░░░░░░░░ 21%</span> : web.admin - launching new instances
.bar <span class="green">███░░░░░░░░░░░░░░░░ 18%</span> : web.admin.1 - creating new member host
.bar <span class="red">░░░░ error ░░░░ (A)</span> : web.admin.1 - deleting server
.bar <span class="nonee">░░░░ (waiting) ░░░░ </span> : web.admin.1 - ordering server (nanobox.web.admin.12.1) from DigitalOcean
div &nbsp;
div <span class="red">(A) Error 1200 - server not ready to be deleted.</span> more -> <span class="yellow">http://do.co/e/1200/</span>
div &nbsp;
div Skip / Retry / Full output? (s/r/f) _
</template>
<style lang="scss" >
.cli-style-guide {background: #292C34; color:#CBCDCD; font-family: $code; line-height: 1.3; counter-increment: mycount 0;
.section {padding:30px;}
.title {font-size: 22px; border-bottom: solid 1px #586567; color:#FFFFFF; margin-bottom: 10px; padding-bottom:7px;
&:before {counter-increment: mycount 1; content: counters(mycount, ".") " - ";}
}
.description {font-size:16px;; font-style: italic; color:#8A999C; margin-bottom: 25px;}
.term {white-space: pre; font-size:13px; background: #1E212A; padding:20px}
.blue {color:#17BCD9}
.green {color:#54DD7A}
.red {color:#FF1B5F}
.base {color:#8A999C;}
.yellow {color:#E8D44D}
.orange {color:#FF9212}
.white {color: white;}
.comment {color:#5D6371}
.cmd:before {content:"$ "; color:#F07C3B}
.etc {margin:12px 16px;
&:after {content:"..."; color:#5D6371; }
}
.base {color:#CBCDCD}
.bar {}
.experiments{
.term {margin-bottom: 30px;}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment