Upgrade documentation site

README.md

@@ -3,6 +3,8 @@
 [![CI](https://github.com/garraflavatra/alphabets/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/garraflavatra/alphabets/actions/workflows/test.yml)
 [![npm](https://img.shields.io/npm/v/alphabets)](https://www.npmjs.com/package/alphabets)
 [![npm bundle size](https://img.shields.io/bundlephobia/min/alphabets)](https://www.npmjs.com/package/alphabets)
+[![GitHub last commit](https://img.shields.io/github/last-commit/garraflavatra/alphabets)](https://github.com/garraflavatra/alphabets)
+[![Forum](https://img.shields.io/badge/-forum-blue)](https://github.com/garraflavatra/alphabets)
 
 
 A tiny JS dependency (<2kb!) which exports many alphabets for many use

docs/_config.yml

@@ -35,4 +35,6 @@ defaults:
     values:
       layout: single
       toc: true
+      sidebar:
+        nav: "docs"
     

docs/_data/navigation.yml

@@ -3,3 +3,23 @@ main:
     url: https://github.com/garraflavatra/alphabets/discussions
   - title: "GitHub"
     url: https://github.com/garraflavatra/alphabets
+
+docs:
+  - title: About
+    children:
+      - title: Why would I use this?
+        url: /about/why
+      - title: Alternatives
+        url: /about/alternatives
+  - title: Usage
+    children:
+      - title: Installation
+        url: /usage/installation
+      - title: Usage
+        url: /usage/usage
+      - title: Advanced
+        url: /usage/advanced
+  - title: API
+    children:
+      - title: Supported alphabets
+        url: /api/supported-alphabets

docs/about/alternatives.md

@@ -0,0 +1,29 @@
+---
+title: Alternatives to Alphabets
+---
+
+Know more alternatives? Please open an
+[issue](https://github.com/garraflavatra/alphabet.js/issues/new) or 
+[pull request](https://github.com/garraflavatra/alphabet.js)!
+{: .notice--info}
+
+## [alphabet](https://www.npmjs.com/package/alphabet)
+
+(whithout trailing `s`)
+
+I do not say this package doesn't work. I think it will work perfectly, but it
+has less features:
+{: .notice--warning}
+
+Seems a good alternative, right? But:
+
+* It only supports the Latin alphabet.
+* It is larger. (The size is equal to this package's size, but this package
+  includes more.)
+* It is only [CommonJS](https://en.wikipedia.org/wiki/CommonJS) and not 
+  [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) etc.
+* When did the author last update it? Right.
+  <figure>
+    <img src="/images/competitors/alphabet-last-publish.png" alt="Last updated: 6 years ago">
+    <figcaption>Hmmm...</figcaption>
+  </figure>

docs/about/why.md

@@ -0,0 +1,44 @@
+---
+title: Why would I use this?
+---
+
+I have seen developers doing this:
+
+```js
+const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+```
+
+Or worse:
+
+```js
+const alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
+```
+
+My opinion about this? 🙄. It's ugly, it makes your code less readable
+(read: ugly) and it's simply not something you should want to have in your 
+code! Instead, you should do it like so:
+
+```js
+import { latin } from 'alphabets';
+// or
+const alphabets = require('alphabets');
+```
+
+Much cleaner, right? That's why I made this package.
+
+## Why not?
+
+I see very few reasons not to use this package.
+
+### But doesn't it cost me performance?
+
+No. This package is only <800 bytes so it should not cost you any performance.
+Neither via [CDN](/usage/installation/#cdn) nor if you use a bundler like
+webpack, Parcel or Rollup.
+
+### Why not making an array on my own?
+
+It's a choice. This whole package is **opinionated**. *I* think you should not
+do `const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');` in your code. *I*
+think you should use a package for that. Do you think it's OK to define your own
+alphabet array? Do that!

docs/api/supported-alphabets.md

@@ -0,0 +1,17 @@
+---
+title: Supported alphabets
+toc: false
+---
+
+Usage: see [Usage](#usage).
+
+| Name | Export name |
+|------|-------------|
+| Danish | `danish` |
+| Faroese | `faroese` |
+| Greek (modern) | `greek` |
+| Greek (ancient/polytonic) | `greekPolytonic` |
+| Icelandic | `icelandic` |
+| Latin | `latin` |
+| Norwegian | `norwegian` |
+| Swedish | `swedish` |

docs/index.md

@@ -1,135 +1,16 @@
 ---
 title: Alphabets
+toc: false
 ---
 
-A tiny JS dependency (<2kb!) which exports many alphabets for many use
+A tiny JS dependency (<2kb!) which exports many alphabet arrays for many use
 cases.
 
 [![CI](https://github.com/garraflavatra/alphabets/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/garraflavatra/alphabets/actions/workflows/test.yml)
 [![npm](https://img.shields.io/npm/v/alphabets)](https://www.npmjs.com/package/alphabets)
 [![npm bundle size](https://img.shields.io/bundlephobia/min/alphabets)](https://www.npmjs.com/package/alphabets)
+[![GitHub last commit](https://img.shields.io/github/last-commit/garraflavatra/alphabets)](https://github.com/garraflavatra/alphabets)
+[![Forum](https://img.shields.io/badge/-forum-blue)](https://github.com/garraflavatra/alphabets)
 
-## Why would I use this?
+Are you convinced [why to use this](/about/why)? Get started
-
+[here](/usage/installation)!
-### Why?
-
-I have seen developers doing this:
-
-```js
-const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
-```
-
-Or worse:
-
-```js
-const alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
-```
-
-My opinion about this? 🙄. It's ugly, it makes your code less readable
-(read: ugly) and it's simply not something you should want to have in your 
-code! Instead, you should do it like so:
-
-```js
-import { latin } from 'alphabets';
-// or
-const alphabets = require('alphabets');
-```
-
-Much cleaner, right? That's why I made this package.
-
-### Why not?
-
-I see very few reasons not to use this package.
-
-#### But doesn't it cost me performance?
-
-No. This package is only <800 bytes so it should not cost you any performance.
-Neither via CDN nor if you use a bundler like webpack, Parcel or Rollup.
-
-#### Why not making an array on my own?
-
-It's a choice. This whole package is **opinionated**. *I* think you should not
-do `const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');` in your code. *I*
-think you should use a package for that. Do you think it's OK to define your own
-alphabet array? Do that!
-
-### Competitors
-
-Know more alternatives? Please open an
-[issue](https://github.com/garraflavatra/alphabet.js/issues/new) or 
-[pull request](https://github.com/garraflavatra/alphabet.js)!
-{: .notice--info}
-
-#### [alphabet](https://www.npmjs.com/package/alphabet)
-
-Seems a good alternative, right? But:
-
-* It only supports the Latin alphabet.
-* It is larger. (The size is equal to this package's size, but this package
-  includes more.)
-* It is only [CommonJS](https://en.wikipedia.org/wiki/CommonJS) and not 
-  [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) etc.
-* When did the author last update it? Right.
-  <figure>
-    <img src="/images/competitors/alphabet-last-publish.png" alt="Last updated: 6 years ago">
-    <figcaption>Hmmm...</figcaption>
-  </figure>
-
-I do not say this package doesn't work. I think it will work perfectly, but it
-has less features.
-{: .notice--warning}
-
-## Usage
-
-### Installation
-
-Use npm:
-
-```bash
-npm install alphabets --save
-```
-
-Or if you prefer Yarn:
-
-```bash
-yarn add alphabets
-```
-
-CDN, if that's more your style:
-
-```html
-<script src="https://unpkg.com/alphabet@1/dist/bundle.js"></script>
-```
-
-### Usage
-
-```js
-import { <alphabetYouWantToUse> } from 'alphabets';
-```
-
-or:
-
-```js
-const alphabets = require('alphabets');
-console.log(alphabets.<alphabetYouWantToUse>);
-```
-
-where `<alphabetYouWantToUse>` is an alphabet this package supports.
-[Here](#supported-alphabets) is a list from which you can choose.
-
-## API
-
-### Supported alphabets
-
-Usage: see [Usage](#usage).
-
-| Name | Export name |
-|------|-------------|
-| Danish | `danish` |
-| Faroese | `faroese` |
-| Greek (modern) | `greek` |
-| Greek (ancient/polytonic) | `greekPolytonic` |
-| Icelandic | `icelandic` |
-| Latin | `latin` |
-| Norwegian | `norwegian` |
-| Swedish | `swedish` |

docs/usage/advanced.md

@@ -0,0 +1,17 @@
+---
+title: Advanced usage
+---
+
+## Alphabet as a string
+
+```js
+alphabet.join('')[0];
+//=> 'abcdefghijklmnopqrstuvwxyz'
+```
+
+## Uppercase
+
+```js
+alphabet.toUpperCase();
+//=> ["Α", "Β", "Γ", "Δ", "Ε", "Ζ", "Η", "Θ", "Ι", "Κ", "Λ", "Μ", "Ν", "Ξ", "Ο", "Π", "Ρ", "Σ", "Τ", "Υ", "Φ", "Χ", "Ψ", "Ω"]
+```

docs/usage/installation.md

@@ -0,0 +1,21 @@
+---
+title: Installation
+---
+
+## npm
+
+```bash
+npm install alphabets --save
+```
+
+## Yarn
+
+```bash
+yarn add alphabets
+```
+
+## CDN
+
+```html
+<script src="https://unpkg.com/alphabet@1/dist/bundle.js"></script>
+```

docs/usage/usage.md

@@ -0,0 +1,18 @@
+---
+title: Usage
+toc: false
+---
+
+```js
+import { <alphabetYouWantToUse> } from 'alphabets';
+```
+
+or:
+
+```js
+const alphabets = require('alphabets');
+console.log(alphabets.<alphabetYouWantToUse>);
+```
+
+where `<alphabetYouWantToUse>` is an alphabet this package supports.
+[Here](/api/supported-alphabets) is a list from which you can choose.