docs(README): updates readme with TOC and other things

wessberg · Feb 9, 2019 · 2838638 · 2838638
1 parent f2148f3
commit 2838638
Show file tree

Hide file tree

Showing 8 changed files with 660 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## [1.0.1](https://github.com/wessberg/color/compare/v1.0.0...v1.0.1) (2019-01-21)
+
+### Bug Fixes
+
+- **readme:** fix logo dimensions ([aac0acd](https://github.com/wessberg/color/commit/aac0acd))
+
 # [1.0.0](https://github.com/wessberg/color/compare/v0.0.2...v1.0.0) (2019-01-21)
 
 ### Bug Fixes

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting any of the code of conduct enforcers: [Frederik Wessberg](mailto:frederikwessberg@hotmail.com).
+reported by contacting any of the code of conduct enforcers: [Frederik Wessberg](mailto:frederikwessberg@hotmail.com) ([@FredWessberg](https://twitter.com/FredWessberg)) ([Website](https://github.com/wessberg)).
 All complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright © 2019 Frederik Wessberg <frederikwessberg@hotmail.com>
+Copyright © 2019 [Frederik Wessberg](mailto:frederikwessberg@hotmail.com) ([@FredWessberg](https://twitter.com/FredWessberg)) ([Website](https://github.com/wessberg))
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,17 +1,33 @@
-<img alt="Logo for @wessberg/color" src="https://raw.githubusercontent.com/wessberg/color/master/documentation/asset/logo.png" height="100"></img><br>
-<a href="https://npmcharts.com/compare/@wessberg/color?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/%40wessberg%2Fcolor.svg" height="20"></img></a>
-<a href="https://david-dm.org/wessberg/color"><img alt="Dependencies" src="https://img.shields.io/david/wessberg/color.svg" height="20"></img></a>
-<a href="https://www.npmjs.com/package/@wessberg/color"><img alt="NPM Version" src="https://badge.fury.io/js/%40wessberg%2Fcolor.svg" height="20"></img></a>
-<a href="https://github.com/wessberg/color/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/wessberg%2Fcolor.svg" height="20"></img></a>
-<a href="https://opensource.org/licenses/MIT"><img alt="MIT License" src="https://img.shields.io/badge/License-MIT-yellow.svg" height="20"></img></a>
-<a href="https://www.patreon.com/bePatron?u=11315442"><img alt="Support on Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" height="20"></img></a>
+<!-- SHADOW_SECTION_LOGO_START -->
 
-# `@wessberg/color`
+<div><img alt="Logo" src="https://raw.githubusercontent.com/wessberg/color/master/documentation/asset/logo.png" height="60"   /></div>
+
+<!-- SHADOW_SECTION_LOGO_END -->
+
+<!-- SHADOW_SECTION_DESCRIPTION_SHORT_START -->
 
 > A library of helper methods for working with colors.
 
+<!-- SHADOW_SECTION_DESCRIPTION_SHORT_END -->
+
+<!-- SHADOW_SECTION_BADGES_START -->
+
+<a href="https://npmcharts.com/compare/%40wessberg%2Fcolor?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/%40wessberg%2Fcolor.svg"    /></a>
+<a href="https://www.npmjs.com/package/%40wessberg%2Fcolor"><img alt="NPM version" src="https://badge.fury.io/js/%40wessberg%2Fcolor.svg"    /></a>
+<a href="https://david-dm.org/wessberg/color"><img alt="Dependencies" src="https://img.shields.io/david/wessberg%2Fcolor.svg"    /></a>
+<a href="https://github.com/wessberg/color/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/wessberg%2Fcolor.svg"    /></a>
+<a href="https://github.com/prettier/prettier"><img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"    /></a>
+<a href="https://opensource.org/licenses/MIT"><img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg"    /></a>
+<a href="https://www.patreon.com/bePatron?u=11315442"><img alt="Support on Patreon" src="https://img.shields.io/badge/patreon-donate-green.svg"    /></a>
+
+<!-- SHADOW_SECTION_BADGES_END -->
+
+<!-- SHADOW_SECTION_DESCRIPTION_LONG_START -->
+
 ## Description
 
+<!-- SHADOW_SECTION_DESCRIPTION_LONG_END -->
+
 This is a collection of helper functions for working with colors and converting between color systems. Simple functions are provided such as `toHex()`, `toHsl()`, `toHsv()`, `toRgb()`, `saturate()`, `lighten()` and much more.
 The library takes care of figuring out which color system your input string comes from, so you can just use the library and not care about the rest.
 
@@ -27,6 +43,70 @@ At the time of writing, 389 tests has been written for the library methods. I'd
 
 Have fun!
 
+<!-- SHADOW_SECTION_FEATURES_START -->
+
+### Features
+
+<!-- SHADOW_SECTION_FEATURES_END -->
+
+- Supports a large variety of color systems
+- Can automatically infer the color system of your input
+- Tree-shakeable
+- Tiny
+- Well-tested
+
+<!-- SHADOW_SECTION_FEATURE_IMAGE_START -->
+
+<!-- SHADOW_SECTION_FEATURE_IMAGE_END -->
+
+<!-- SHADOW_SECTION_TOC_START -->
+
+## Table of Contents
+
+- [Description](#description)
+  - [Features](#features)
+- [Table of Contents](#table-of-contents)
+- [Install](#install)
+  - [NPM](#npm)
+  - [Yarn](#yarn)
+- [Usage](#usage)
+- [Examples](#examples)
+- [Contributing](#contributing)
+- [Maintainers](#maintainers)
+- [Backers](#backers)
+  - [Patreon](#patreon)
+- [FAQ](#faq)
+  - [Converting from RGBa to color systems without alpha channels](#converting-from-rgba-to-color-systems-without-alpha-channels)
+- [Documentation](#documentation)
+  - [`#isLight()`](#%23islight)
+    - [Example](#example)
+  - [`#lighten()`](#%23lighten)
+    - [Example](#example-1)
+  - [`#saturate()`](#%23saturate)
+    - [Example](#example-2)
+  - [`#toHex()`](#%23tohex)
+    - [Example](#example-3)
+  - [`#toRgb()`](#%23torgb)
+    - [Example](#example-4)
+  - [`#toHsl()`](#%23tohsl)
+    - [Example](#example-5)
+  - [`#toHsv()`](#%23tohsv)
+    - [Example](#example-6)
+  - [`#randomHexColor()`](#%23randomhexcolor)
+    - [Example](#example-7)
+  - [`#randomRgbColor()`](#%23randomrgbcolor)
+    - [Example](#example-8)
+  - [`#randomHslColor()`](#%23randomhslcolor)
+    - [Example](#example-9)
+  - [`#randomHsvColor()`](#%23randomhsvcolor)
+    - [Example](#example-10)
+  - [Other methods](#other-methods)
+- [License](#license)
+
+<!-- SHADOW_SECTION_TOC_END -->
+
+<!-- SHADOW_SECTION_INSTALL_START -->
+
 ## Install
 
 ### NPM
@@ -41,8 +121,14 @@ $ npm install @wessberg/color
 $ yarn add @wessberg/color
 ```
 
+<!-- SHADOW_SECTION_INSTALL_END -->
+
+<!-- SHADOW_SECTION_USAGE_START -->
+
 ## Usage
 
+<!-- SHADOW_SECTION_USAGE_END -->
+
 Import it in your project like this:
 
 ```typescript
@@ -67,24 +153,42 @@ isLight("rgb(234, 205, 244)"); // returns true, that's a pretty light color.
 randomHexColor(); // returns a random hex color.
 ```
 
+<!-- SHADOW_SECTION_CONTRIBUTING_START -->
+
 ## Contributing
 
 Do you want to contribute? Awesome! Please follow [these recommendations](./CONTRIBUTING.md).
 
+<!-- SHADOW_SECTION_CONTRIBUTING_END -->
+
+<!-- SHADOW_SECTION_MAINTAINERS_START -->
+
 ## Maintainers
 
-- <a href="https://github.com/wessberg"><img alt="Frederik Wessberg" src="https://avatars2.githubusercontent.com/u/20454213?s=460&v=4" height="11"></img></a> [Frederik Wessberg](https://github.com/wessberg): _Maintainer_
+| <img alt="Frederik Wessberg" src="https://avatars2.githubusercontent.com/u/20454213?s=460&v=4" height="70"   />                   |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| [Frederik Wessberg](mailto:frederikwessberg@hotmail.com)<br>[@FredWessberg](https://twitter.com/FredWessberg)<br>_Lead Developer_ |
+
+<!-- SHADOW_SECTION_MAINTAINERS_END -->
+
+<!-- SHADOW_SECTION_BACKERS_START -->
+
+## Backers
 
-## Backers 🏅
+### Patreon
 
-[Become a backer](https://www.patreon.com/bePatron?u=11315442) and get your name, logo, and link to your site listed here.
+[Become a backer](https://www.patreon.com/bePatron?u=11315442) and get your name, avatar, and Twitter handle listed here.
 
-## License 📄
+<a href="https://www.patreon.com/bePatron?u=11315442"><img alt="Backers on Patreon" src="https://patreon-badge.herokuapp.com/11315442.png"  width="500"  /></a>
 
-MIT © [Frederik Wessberg](https://github.com/wessberg)
+<!-- SHADOW_SECTION_BACKERS_END -->
+
+<!-- SHADOW_SECTION_FAQ_START -->
 
 ## FAQ
 
+<!-- SHADOW_SECTION_FAQ_END -->
+
 #### Converting from RGBa to color systems without alpha channels
 
 Many color system conversion libraries will discard the alpha channel when converting from colors that has an alpha channel.
@@ -460,3 +564,11 @@ There's a lot of them. The above was the highlights. Everything is well-document
 - **`randomHslColor`:** - Generates a random HSL color and returns it.
 
 - **`randomHsvColor`:** - Generates a random HSV/HSB color and returns it.
+
+<!-- SHADOW_SECTION_LICENSE_START -->
+
+## License
+
+MIT © [Frederik Wessberg](mailto:frederikwessberg@hotmail.com) ([@FredWessberg](https://twitter.com/FredWessberg)) ([Website](https://github.com/wessberg))
+
+<!-- SHADOW_SECTION_LICENSE_END -->