Cleanup snippet categories

README.md

@@ -81,25 +81,18 @@ import ReactDOM from 'react-dom';
 
 </details>
 
-###  Utility
-
-<details>
-<summary>View contents</summary>
-
-* [`AutoLink`](#autolink-)
-
-</details>
-
 ###  Visual
 
 <details>
 <summary>View contents</summary>
 
 * [`Accordion`](#accordion-)
+* [`AutoLink`](#autolink-)
 * [`Carousel`](#carousel)
 * [`Collapse`](#collapse)
 * [`CountDown`](#countdown-)
 * [`FileDrop`](#filedrop)
+* [`Mailto`](#mailto)
 * [`Modal`](#modal)
 * [`StarRating`](#starrating)
 * [`Tabs`](#tabs)
@@ -110,15 +103,6 @@ import ReactDOM from 'react-dom';
 
 </details>
 
-###  Viual
-
-<details>
-<summary>View contents</summary>
-
-* [`Mailto`](#mailto)
-
-</details>
-
 
 ---
 
@@ -954,50 +938,6 @@ ReactDOM.render(
 
 ---
 
-##  Utility
-
-
-### AutoLink ![advanced](/advanced.svg)
-
-Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
-
-- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
-- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
-
-```jsx
-function AutoLink({ text }) {
-  const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
-
-  return (
-    <React.Fragment>
-      {text.split(delimiter).map(word => {
-        let match = word.match(delimiter);
-        if (match) {
-          let url = match[0];
-          return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;
-        }
-        return word;
-      })}
-    </React.Fragment>
-  );
-}
-```
-
-<details>
-<summary>Examples</summary>
-
-```jsx
-ReactDOM.render(
-  <AutoLink text="foo bar baz http://example.org bar" />,
-  document.getElementById('root')
-);
-```
-</details>
-
-<br>[⬆ Back to top](#contents)
-
----
-
 ##  Visual
 
 
@@ -1087,6 +1027,45 @@ ReactDOM.render(
 
 <br>[⬆ Back to top](#contents)
 
+### AutoLink ![advanced](/advanced.svg)
+
+Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
+
+- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
+- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
+
+```jsx
+function AutoLink({ text }) {
+  const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
+
+  return (
+    <React.Fragment>
+      {text.split(delimiter).map(word => {
+        let match = word.match(delimiter);
+        if (match) {
+          let url = match[0];
+          return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;
+        }
+        return word;
+      })}
+    </React.Fragment>
+  );
+}
+```
+
+<details>
+<summary>Examples</summary>
+
+```jsx
+ReactDOM.render(
+  <AutoLink text="foo bar baz http://example.org bar" />,
+  document.getElementById('root')
+);
+```
+</details>
+
+<br>[⬆ Back to top](#contents)
+
 ### Carousel
 
 Renders a carousel component.
@@ -1405,6 +1384,36 @@ ReactDOM.render(<FileDrop handleDrop={console.log} />, document.getElementById('
 
 <br>[⬆ Back to top](#contents)
 
+### Mailto
+
+Renders a link formatted to send an email.
+
+- Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
+- Render the link with `props.children` as its content.
+
+```jsx
+function Mailto({ email, subject, body, ...props }) {
+  return (
+    <a href={`mailto:${email}?subject=${subject || ''}&body=${body || ''}`}>{props.children}</a>
+  );
+}
+```
+
+<details>
+<summary>Examples</summary>
+
+```jsx
+ReactDOM.render(
+  <Mailto email="foo@bar.baz" subject="Hello" body="Hello world!">
+    Mail me!
+  </Mailto>,
+  document.getElementById('root')
+);
+```
+</details>
+
+<br>[⬆ Back to top](#contents)
+
 ### Modal
 
 Renders a Modal component, controllable through events.
@@ -1974,41 +1983,6 @@ ReactDOM.render(<TreeView data={data} name="data" />, document.getElementById('r
 
 ---
 
-##  Viual
-
-
-### Mailto
-
-Renders a link formatted to send an email.
-
-- Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
-- Render the link with `props.children` as its content.
-
-```jsx
-function Mailto({ email, subject, body, ...props }) {
-  return (
-    <a href={`mailto:${email}?subject=${subject || ''}&body=${body || ''}`}>{props.children}</a>
-  );
-}
-```
-
-<details>
-<summary>Examples</summary>
-
-```jsx
-ReactDOM.render(
-  <Mailto email="foo@bar.baz" subject="Hello" body="Hello world!">
-    Mail me!
-  </Mailto>,
-  document.getElementById('root')
-);
-```
-</details>
-
-<br>[⬆ Back to top](#contents)
-
----
-
 _This repository is a work in progress. If you want to contribute, please check the open issues to see where and how you can help out!_
 
 _This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder)._

snippet_data/snippetList.json

@@ -24,7 +24,7 @@
       "attributes": {
         "text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n",
         "tags": [
-          "utility",
+          "visual",
           "string",
           "fragment",
           "regexp",
@@ -195,7 +195,7 @@
       "attributes": {
         "text": "Renders a link formatted to send an email.\n\n- Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.\n- Render the link with `props.children` as its content.\n\n",
         "tags": [
-          "viual",
+          "visual",
           "beginner"
         ]
       },

snippet_data/snippets.json

@@ -36,7 +36,7 @@
           "example": "ReactDOM.render(\r\n  <AutoLink text=\"foo bar baz http://example.org bar\" />,\r\n  document.getElementById('root')\r\n);"
         },
         "tags": [
-          "utility",
+          "visual",
           "string",
           "fragment",
           "regexp",
@@ -267,7 +267,7 @@
           "example": "ReactDOM.render(\r\n  <Mailto email=\"foo@bar.baz\" subject=\"Hello\" body=\"Hello world!\">\r\n    Mail me!\r\n  </Mailto>,\r\n  document.getElementById('root')\r\n);"
         },
         "tags": [
-          "viual",
+          "visual",
           "beginner"
         ]
       },

snippets/AutoLink.md

@@ -1,6 +1,6 @@
 ---
 title: AutoLink
-tags: utility,string,fragment,regexp,advanced
+tags: visual,string,fragment,regexp,advanced
 ---
 
 Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.

snippets/Mailto.md

@@ -1,6 +1,6 @@
 ---
 title: Mailto
-tags: viual,beginner
+tags: visual,beginner
 ---
 
 Renders a link formatted to send an email.