Rename all tags with hyphens

As specified by the w3c convention.
https://www.w3.org/TR/custom-elements/

index.html

@@ -21,7 +21,7 @@
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <div class='container'>
       <div class='console-outer'>
-        <div class='console-inner'><terminal shell='pgsh'></terminal></div>
+        <div class='console-inner'><terminal-ui shell='pgsh'></terminal-ui></div>
       </div>
     </div>
 
@@ -29,7 +29,7 @@
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <script src='js/vendor/riot+compiler.min.js'></script>
     <script src='js/pgsh.js'></script>
-    <script src='tags/terminal.tag' type='riot/tag'></script>
-    <script>riot.mount('terminal')</script>
+    <script src='tags/terminal-ui.tag' type='riot/tag'></script>
+    <script>riot.mount('*')</script>
   </body>
 </html>

tags/terminal.md → tags/terminal-ui.md

@@ -1,6 +1,6 @@
-# Terminal Riot Tag
+# Terminal UI Riot Tag
 
-A pretend commandline interface capable of displaying output from a "shell"
+A pretend terminal/console interface capable of displaying output from a "shell"
 Javascript class. Multiple tags can be used on a page, each will work completely
 independently.
 
@@ -10,22 +10,22 @@ independently.
 
 ## Usage
 
-    <terminal shell='myshellclass' welcome='text' prompt='text'></terminal>
+    <terminal-ui shell='myshellclass' welcome='text' prompt='text'></terminal-ui>
 
     <script src='riot+compiler.min.js'></script>
     <script src='myshell.js'></script>
-    <script src='terminal.tag' type='riot/tag'></script>
-    <script>riot.mount('terminal')</script>
+    <script src='terminal-ui.tag' type='riot/tag'></script>
+    <script>riot.mount('terminal-ui')</script>
 
-## Configuring
+## Configuring the Terminal
 
-The terminal tag accepts 3 optional parameters:
+The terminal-ui tag accepts 3 optional parameters:
 
 - `shell` - Text specifying the shell class to interact with.
-- `welcome` - Text/HTML displayed when a terminal is first mounted.
+- `welcome` - Text/HTML displayed when a terminal-ui is first mounted.
 - `prompt` - Text/HTML before the command line input. Defaults to `'$ '`.
 
-With no shell logic, the terminal tag will simply print commands entered.
+With no shell logic, the terminal-ui tag will simply print commands entered.
 
 Note: `welcome` and `prompt` can also be specified in the shell. Shell values
 take priority over parameter values.
@@ -33,7 +33,7 @@ take priority over parameter values.
 ## Making A Shell Class
 
 A shell class should be defined before the tag is mounted by riot. It should
-expect a single parameter (the terminal tag itself) which will be an observable
+expect a single parameter (the terminal-ui tag itself) which will be an observable
 object.
 
 This observable will emit `'cmd_entered'` events containing input for
@@ -75,7 +75,7 @@ The starting context name is `'default'`. Calling `'context_swap'` with:
 
 ### Terminal ID
 
-The observable also provides the id of the terminal tag via an `id` property.
+The observable also provides the id of the terminal-ui tag via an `id` property.
 This can be used, for example, for attaching handlers:
 
     document.getElementById(events.id).onkeypress = function() {}

tags/terminal.tag → tags/terminal-ui.tag

@@ -1,25 +1,25 @@
-<terminal id={ id } tabindex='1'>
-  <display welcome={ welcome } events={ this } />
-  <commandline prompt={ prompt } events={ this } />
+<terminal-ui id={ id } tabindex='1'>
+  <display-buffer welcome={ welcome } events={ this } />
+  <command-line prompt={ prompt } events={ this } />
 
   <style>
-    terminal { outline: none; }
-    terminal * { padding: 0; margin: 0; line-height: normal; font-size: 100%; }
+    terminal-ui { outline: none; }
+    terminal-ui * { padding: 0; margin: 0; line-height: normal; font-size: 100%; }
   </style>
 
   /**
-   * Create a new shell with the class name given to the terminal tag.
-   * The terminal tag object passes events between the shell and the other tags.
+   * Create a new shell with the class name given to the terminal-ui tag.
+   * The terminal-ui tag object passes events between the shell and the other tags.
    */
   var shell = window[opts.shell] ? new window[opts.shell](this) : {}
   this.welcome = shell.welcome || opts.welcome
   this.prompt = shell.prompt || opts.prompt
   this.id = 'term-' + Math.floor(Math.random() * 10000)
-</terminal>
+</terminal-ui>
 
-<display>
+<display-buffer>
   <div each={ output }>
-    <raw content={ content } />
+    <raw-html content={ content } />
   </div>
 
   var ev = opts.events, self = this
@@ -58,18 +58,18 @@
     this.output.length = 0
     this.update()
   }
-</display>
+</display-buffer>
 
-<commandline>
+<command-line>
   <form autocomplete='off' onsubmit={ process } show={ visible }>
-    <raw name='lhs' content={ prompt } show={ prompt_visible }>
-    </raw><input type='text' name='command' />
+    <raw-html name='lhs' content={ prompt } show={ prompt_visible }>
+    </raw-html><input type='text' name='command' />
   </form>
 
   <style>
-    commandline input[name='command'],
-    commandline input[name='command']:hover,
-    commandline input[name='command']:focus {
+    command-line input[name='command'],
+    command-line input[name='command']:hover,
+    command-line input[name='command']:focus {
       padding: 0; margin: 0; line-height: normal; font-size: 100%;
       background-color: transparent; border: none; outline: none;
       height: auto; width: 70%;
@@ -139,13 +139,13 @@
   encode(text) {
     return text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
   }
-</commandline>
+</command-line>
 
-<raw>
+<raw-html>
   <span></span>
 
   <style>
-    raw { white-space: pre-wrap }
+    raw-html { white-space: pre-wrap }
   </style>
 
   // Set initial html using `content` option, and...
@@ -153,4 +153,4 @@
 
   // Call `write()` manually to update the html.
   write(text) { this.root.innerHTML = text }
-</raw>
+</raw-html>