being goofy and having fun

ewels · Feb 25, 2024 · 021c091 · 021c091
1 parent 94dcabc
commit 021c091
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 31 deletions.
diff --git a/docs/css/extra.css b/docs/css/extra.css
@@ -46,3 +46,22 @@ a.internal-link::after {
  */
  content: "\00A0↪";
 }
+
+@font-face {
+ font-family: "pixelmix";
+ src:
+ local("pixelmix"),
+ url("../fonts/pixelmix.ttf")
+}
+
+.md-header__topic, h1, h1 code {
+ font-family: "pixelmix";
+ font-size: 24px;
+ font-weight: normal;
+}
+
+.md-header__header {
+ font-family: "pixelmix";
+ font-size: 24px;
+ font-weight: normal;
+}
diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -1,3 +1,6 @@
+---
+title: "<b>rich-click</b>"
+---
 <style>
  .md-typeset h1 {
  display: none;

diff --git a/docs/editor.md b/docs/editor.md
@@ -1,11 +1,36 @@
 ---
-title: live editor
+title: 'rich-click: Live Style Editor'
 hide:
  - toc
  - navigation
 ---
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+const text = "Live Style Editor";
+let index = 0;
+
+type();
+</script>
 <style>
+ #terminal-header {
+ overflow: hidden;
+ border-right: .8em solid; /* Change color of cursor here */
+ white-space: nowrap;
+ margin: 0 auto;
+ padding: 10px;
+ display: inline-block;
+ animation:
+ typing 1s steps(15)
+ }
+
+ @keyframes typing {
+ from {
+ width: 0;
+ }
+ to {
+ width: 35%;
+ }
+ }
  [data-termynal] {
  width: 100%;
  padding: 75px 25px 25px;
@@ -86,7 +111,7 @@ hide:
  opacity: 75%;
  }
 </style>
-# Live Style Editor
+<h1 id="terminal-header" style="width: 35%;">Live Style Editor</h1>
 
 This page contains a live editor for `rich-click` styles.
 
@@ -115,8 +140,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_OPTION</label>
   </td>
   <td>
-  <select class="rccfg-style-option rccfg-selector" data-target="rccfg-style-option">
-  <option value="">(none)</option>
+  <select class="rccfg-style-option rccfg-selector" data-target="rccfg-style-option" data-default-index="5">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -138,8 +163,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_ARGUMENT</label>
   </td>
   <td>
-  <select class="rccfg-style-argument rccfg-selector" data-target="rccfg-style-argument">
-  <option value="">(none)</option>
+  <select class="rccfg-style-argument rccfg-selector" data-target="rccfg-style-argument" data-default-index="5">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -162,8 +187,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_COMMAND</label>
   </td>
   <td>
-  <select class="rccfg-style-command rccfg-selector" data-target="rccfg-style-command">
-  <option value="">(none)</option>
+  <select class="rccfg-style-command rccfg-selector" data-target="rccfg-style-command" data-default-index="5">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -186,8 +211,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_SWITCH</label>
   </td>
   <td>
-  <select class="rccfg-style-switch rccfg-selector" data-target="rccfg-style-switch">
-  <option value="">(none)</option>
+  <select class="rccfg-style-switch rccfg-selector" data-target="rccfg-style-switch" data-default-index="5">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -210,8 +235,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_METAVAR</label>
   </td>
   <td>
-  <select class="rccfg-style-metavar rccfg-selector" data-target="rccfg-style-metavar">
-  <option value="">(none)</option>
+  <select class="rccfg-style-metavar rccfg-selector" data-target="rccfg-style-metavar" data-default-index="4">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -234,8 +259,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_METAVAR_SEPARATOR</label>
   </td>
   <td>
-  <select class="rccfg-style-metavar-separator rccfg-selector" data-target="rccfg-style-metavar-separator">
-  <option value="" selected>(none)</option>
+  <select class="rccfg-style-metavar-separator rccfg-selector" data-target="rccfg-style-metavar-separator" data-default-index="0">
+  <option value="" selected>none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -258,8 +283,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_USAGE</label>
   </td>
   <td>
-  <select class="rccfg-style-usage rccfg-selector" data-target="rccfg-style-usage">
-  <option value="">(none)</option>
+  <select class="rccfg-style-usage rccfg-selector" data-target="rccfg-style-usage" data-default-index="4">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -282,8 +307,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_USAGE_COMMAND</label>
   </td>
   <td>
-  <select class="rccfg-style-usage-command rccfg-selector" data-target="rccfg-style-usage-command">
-  <option value="" selected>(none)</option>
+  <select class="rccfg-style-usage-command rccfg-selector" data-target="rccfg-style-usage-command" data-default-index="0">
+  <option value="" selected>none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -306,8 +331,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_REQUIRED_SHORT</label>
   </td>
   <td>
-  <select class="rccfg-style-required-short rccfg-selector" data-target="rccfg-style-required-short">
-  <option value="">(none)</option>
+  <select class="rccfg-style-required-short rccfg-selector" data-target="rccfg-style-required-short" data-default-index="8">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -330,8 +355,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_REQUIRED_LONG</label>
   </td>
   <td>
-  <select class="rccfg-style-required-long rccfg-selector" data-target="rccfg-style-required-long">
-  <option value="">(none)</option>
+  <select class="rccfg-style-required-long rccfg-selector" data-target="rccfg-style-required-long" data-default-index="8">
+  <option value="">none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -354,8 +379,8 @@ the colors in this page have been calibrated to better match how typical modern
   <label for="color-select">STYLE_PANEL_BORDER</label>
   </td>
   <td>
-  <select class="rccfg-style-panel-border rccfg-selector" data-target="rccfg-style-panel-border">
-  <option value="" selected>(none)</option>
+  <select class="rccfg-style-panel-border rccfg-selector" data-target="rccfg-style-panel-border" data-default-index="0">
+  <option value="" selected>none</option>
   <option value="black">black</option>
   <option value="blue">blue</option>
   <option value="green">green</option>
@@ -372,7 +397,6 @@ the colors in this page have been calibrated to better match how typical modern
   <button class="rc-button rccfg-style-panel-border rccfg-italic-button" data-target="rccfg-style-panel-border"><code>italic</code></button>
   </td>
   </tr>
-  
   </tbody>
   </table>
  </div>
@@ -417,8 +441,16 @@ the colors in this page have been calibrated to better match how typical modern
  </code></pre></div>
 
 <script>
+
  $(document).ready(function() {
 
+ $(".rccfg-selector").each(function() {
+ var defaultIndex = $(this).data("default-index");
+ if (!isNaN(defaultIndex) && defaultIndex >= 0 && defaultIndex < this.options.length) {
+ this.selectedIndex = parseInt(defaultIndex);
+ }
+ });
+
  $(".rc-button.rccfg-style-argument.rccfg-bold-button").each(function() {
  $(this).click();
  });
@@ -455,7 +487,7 @@ the colors in this page have been calibrated to better match how typical modern
  $("." + $(this).data("target")).removeClass(function(index, className) {
  return (className.match(/(^|\s)c-\S+/g) || []).join(' ');
  });
- if ($(this).val() != "") {
+ if ($(this).val() !== "") {
  $("span ." + $(this).data("target")).toggleClass("c-" + $(this).val());
  }
  }).change();

diff --git a/docs/fonts/LICENSE b/docs/fonts/LICENSE
@@ -0,0 +1,16 @@
+pixelmix
+
+Copyright (c) Andrew Tyler 2010
+
+https://andrewtyler.gumroad.com/l/pixelmix
+
+PixelMix is free for personal use. For commercial use, including apps, a commercial license is required. Upon payment of the nonrefundable license fee, you are granted you a nonexclusive, nontransferable, limited right to use the Font Software according to the included EULA. 
+
+Font EULA:
+
+https://docs.google.com/document/d/e/2PACX-1vRZasbum7bxVI7iCptrs99OgFTM5iOtGCC4gGjlC-2g4F9Q4uRv_O8ktPBsmibUFs-Bbi2wAZo1Lyaa/pub
+
+
+Webfont EULA:
+
+https://docs.google.com/document/d/e/2PACX-1vTw12GLAP2uPQROo0nSWfNyH9n3_0zHykfCJINlwr553jN4JgfDlRyeZvnVi-7CNUvEaavXqZS2bbpj/pub
diff --git a/docs/fonts/pixelmix.ttf b/docs/fonts/pixelmix.ttf
diff --git a/docs/index.md b/docs/index.md
@@ -1,4 +1,5 @@
 ---
+title: <b>rich-click</b>
 hide:
  - title
  - navigation

diff --git a/docs/js/termynal.js b/docs/js/termynal.js
@@ -113,18 +113,20 @@ class Termynal {
  * Start the animation and rener the lines depending on their data attributes.
  */
  async start() {
- this.addFinish();
+ if (this.container.static) {
+ this.addFinish();
+ }
  await this._wait(this.startDelay);
 
  for (let line of this.lines) {
  const type = line.getAttribute(this.pfx);
  const delay = line.getAttribute(`${this.pfx}-delay`) || this.lineDelay;
 
- if (type == "input") {
+ if (type === "input") {
  line.setAttribute(`${this.pfx}-cursor`, this.cursor);
  await this.type(line);
  await this._wait(delay);
- } else if (type == "progress") {
+ } else if (type === "progress") {
  await this.progress(line);
  await this._wait(delay);
  } else {
@@ -134,7 +136,9 @@ class Termynal {
 
  line.removeAttribute(`${this.pfx}-cursor`);
  }
- this.addRestart();
+ if (this.container.static) {
+ this.addRestart();
+ }
  this.finishElement.style.visibility = "hidden";
  this.lineDelay = this.originalLineDelay;
  this.typeDelay = this.originalTypeDelay;

diff --git a/docs/rich_click_cli.md b/docs/rich_click_cli.md
@@ -137,7 +137,7 @@ This works for RichCommands as well as normal click Commands.
 
 Notably, we used this functionality to help write these docs you are reading right now. :)
 
-<div class="termy">
+<div class="termy" static>
 ```console
 $ rich-click --output=html flask --help