docs: add demo links to recipes.md

README.md

@@ -19,6 +19,9 @@
     <a href="https://codecov.io/gh/arjunvegda/japanese-moji">
       <img src="https://codecov.io/gh/arjunvegda/japanese-moji/branch/main/graph/badge.svg?token=GZ8GBUVYD8"/>
     </a>
+    <a href="https://japanese-moji.vercel.app">
+        <img src="https://img.shields.io/badge/website-%F0%9F%8C%8E-green" alt="Website" />
+    </a>
     <a href="./LICENSE">
       <img src="https://badgen.net/npm/license/japanese-moji?color=blue"/>
     </a>
@@ -29,7 +32,6 @@ The word "Moji" translates to "Character" in English
 **Table of Contents**
 
 - [Features](#-features)
-- [Demo](#-demo)
 - [Install](#-install)
 - [Quick start](#-quick-start)
   - [Kanji](#kanji)
@@ -53,10 +55,6 @@ The word "Moji" translates to "Character" in English
 - ESM, CJS, and UMD builds
 - Only pay for what you use — its fully tree-shakable
 
-## 🚀 Demo
-
-Live demos are on this [website](https://japanese-moji.vercel.app)
-
 ## 📦 Install
 
 ### Yarn
@@ -75,7 +73,9 @@ npm install --save japanese-moji
 
 ### Kanji
 
-Validates Rare Kanji, Common and Uncommon Kanji, and Kanji compatibility ideographs
+Validates Rare Kanji, Common and Uncommon Kanji, and Kanji compatibility ideographs <br/><br/>
+<a href="https://japanese-moji.vercel.app/demos#kanji">
+<img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" /> </a>
 
 ```ts
 import { isValidKanji, isKanjiPresent, howMuchKanjiIsPresent } from 'japanese-moji';
@@ -92,7 +92,9 @@ const howMuchKanjiIsPresentResult = howMuchKanjiIsPresent('some string here');
 
 ### Kana
 
-Validates Katakana, Half-width Katakana, and Katakana phonetic extensions
+Validates Katakana, Half-width Katakana, and Katakana phonetic extensions <br/><br/>
+<a href="https://japanese-moji.vercel.app/demos#kana">
+<img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" /> </a>
 
 ```ts
 import { isValidKana, isKanaPresent, howMuchKanaIsPresent } from 'japanese-moji';
@@ -111,7 +113,8 @@ const howMuchKanaIsPresentResult = howMuchKanaIsPresent('some string here');
 
 Validates CJK punctuations, Hiragana, Katakana, Katakana phonetic extensions, Rare Kanji, Common and
 Uncommon Kanji, Kanji compatibility ideographs, Half-width Katakana forms, and Full-width (roman)
-forms including punctuations
+forms including punctuations <br/><br/> <a href="https://japanese-moji.vercel.app/demos#japanese">
+<img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" /> </a>
 
 ```ts
 import { isValidJapanese, isJapanesePresent, howMuchJapaneseIsPresent } from 'japanese-moji';
@@ -228,7 +231,9 @@ const howMuchIsCustomPresentResult = howMuchIsCustomPresent('some string here');
 ## 📚 Recipes
 
 Find code snippets containing variety of combinations that makes creating custom validators easy in
-[docs/RECIPES.md](./docs/RECIPES.md)
+[docs/RECIPES.md](./docs/RECIPES.md) <br/><br/>
+<a href="https://japanese-moji.vercel.app/demos#custom-recipes">
+<img src="https://img.shields.io/badge/demos-%F0%9F%9A%80-green" alt="Demo" /> </a>
 
 ## 🙌 Contributing
 

docs/RECIPES.md

@@ -1,5 +1,10 @@
 # 📚 Recipes
 
+<a href="https://japanese-moji.vercel.app/demos#custom-recipes">
+    <img src="https://img.shields.io/badge/demos-%F0%9F%9A%80-green" alt="Demo" />
+</a>
+<br/>
+
 A collection of code snippets to make creating
 [custom validators](../README.md#-build-your-own-validators) easy. These recipes could be supplied
 to create custom validators. [Kana](../README.md#kana), [Kanji](../README.md#kanji) and
@@ -43,6 +48,10 @@ const howMuchIsCustomPresent: MatchScoreCalculator = createMatchScoreCalculator(
 
 ## Hiragana
 
+<a href="https://japanese-moji.vercel.app/demos#hiragana">
+    <img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" />
+</a>
+
 ```ts
 const options: CreateValidatorOptions = {
   characterSets: [CharacterSet.Hiragana],
@@ -51,6 +60,10 @@ const options: CreateValidatorOptions = {
 
 ## Hiragana + CJK Symbols & Punctuations
 
+<a href="https://japanese-moji.vercel.app/demos#hiragana-cjk-punctuations">
+    <img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" />
+</a>
+
 ```ts
 const options: CreateValidatorOptions = {
   characterSets: [CharacterSet.Hiragana, CharacterSet.CJKPunctuations],
@@ -59,6 +72,10 @@ const options: CreateValidatorOptions = {
 
 ## Hiragana + All Katakana
 
+<a href="https://japanese-moji.vercel.app/demos#hiragana-katakana">
+    <img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" />
+</a>
+
 ```ts
 const options: CreateValidatorOptions = {
   characterSets: [
@@ -72,6 +89,10 @@ const options: CreateValidatorOptions = {
 
 ## Hiragana + All Kanji
 
+<a href="https://japanese-moji.vercel.app/demos#hiragana-kanji">
+    <img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" />
+</a>
+
 ```ts
 const options: CreateValidatorOptions = {
   characterSets: [
@@ -85,6 +106,10 @@ const options: CreateValidatorOptions = {
 
 ## All fullwidth letters
 
+<a href="https://japanese-moji.vercel.app/demos#fullwidth-letters">
+    <img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" />
+</a>
+
 ```ts
 const options: CreateValidatorOptions = {
   characterSets: [
@@ -98,6 +123,10 @@ const options: CreateValidatorOptions = {
 
 ## Latin punctuations + All Japanese
 
+<a href="https://japanese-moji.vercel.app/demos#latin-punctuations-japanese">
+    <img src="https://img.shields.io/badge/demo-%F0%9F%9A%80-green" alt="Demo" />
+</a>
+
 ```ts
 // includes: " " (space), !"#$%&'()*+,-./
 const LatinPunctuations: UnicodeRange = {