fix: broken subgroups in emoji packages

.changeset/eighty-parents-travel.md

@@ -0,0 +1,10 @@
+---
+'svgmoji': minor
+'@svgmoji/blob': minor
+'@svgmoji/core': minor
+'@svgmoji/noto': minor
+'@svgmoji/openmoji': minor
+'@svgmoji/twemoji': minor
+---
+
+Improve `npm` package documentation and fix broken subgroup build.

.npmrc

@@ -1,6 +1,24 @@
+# Don't use the workspace protocol.
 save-workspace-protocol=false
-publish-branch="next"
+
+# This makes installations on branches that aren't up to date less stressful by
+# preserving the latest version in the current workspace.
+prefer-workspace-packages=true
+
+# Set the publish branch to prevent unintentional publishing.
+publish-branch="main"
 
 # Version 5.2.0 introduces automatic hoisting of `@types/*`. I'm turning it off
 # for now.
 shamefully-hoist=false
+
+# Support cross platform shell commands.
+shell-emulator=true
+
+# Added since the shell-emulator seems to remove colors from output. There is a
+# warning against using this setting in the docs.
+# https://pnpm.js.org/en/npmrc#color
+color=always
+
+# Don't check the workspace root when installing workspace dependencies
+ignore-workspace-root-check=true

package.json

@@ -24,7 +24,7 @@
     "docs:redirects": "cpy ./support/website/_redirects ./support/website/build/_redirects",
     "emoji:download": "pnpm ts support/scripts/emoji/download.ts",
     "emoji:sprites": "pnpm ts support/scripts/emoji/sprites.ts",
-    "fix": "run-s -c fix:*",
+    "fix": "run-s -c fix:\\*",
     "fix:build": "preconstruct fix",
     "fix:config": "pnpm ts -- support/scripts/generate-configs.ts",
     "fix:es": "pnpm lint:es -- --fix",
@@ -39,7 +39,7 @@
     "preinstall": "pnpm symlink:root && pnpm check:pnpm",
     "postinstall": "run-s build:dev",
     "is-logged-in": "npm whoami",
-    "lint": "run-s lint:*",
+    "lint": "run-s lint:\\*",
     "lint:build": "preconstruct validate",
     "lint:es": "cross-env FULL_ESLINT_CHECK=true eslint -f codeframe --ext=.tsx,.ts,.js .",
     "lint:exports": "pnpm run fix:exports -- --check",

packages/svgmoji/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svgmoji",
   "version": "0.1.0",
-  "description": "A sample package from `svgmoji/svgmoji`",
+  "description": "Consume svg sprites from popular open source emoji libraries.",
   "keywords": [],
   "homepage": "https://github.com/svgmoji/svgmoji/tree/HEAD/packages/svgmoji",
   "repository": "https://github.com/svgmoji/svgmoji/tree/HEAD/packages/svgmoji",

packages/svgmoji/readme.md

@@ -1,6 +1,6 @@
 # svgmoji
 
-> A sample package from `svgmoji/svgmoji`
+> Consume svg sprites from popular open source emoji libraries.
 
 <br />
 
@@ -30,3 +30,7 @@ npm install svgmoji
 ```
 
 <br />
+
+## Getting Started
+
+More docs to come.

packages/svgmoji__blob/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@svgmoji/blob",
   "version": "0.1.0",
-  "description": "A sample package from `svgmoji/svgmoji`",
-  "keywords": [],
+  "description": "The svgmoji sprites for the [`blobmoji`](https://github.com/c1710/blobmoji) library.",
+  "keywords": [
+    "emoji",
+    "svg",
+    "icons",
+    "google",
+    "blobmoji",
+    "gmail"
+  ],
   "homepage": "https://github.com/svgmoji/svgmoji/tree/HEAD/packages/@svgmoji/blob",
   "repository": "https://github.com/svgmoji/svgmoji/tree/HEAD/packages/svgmoji__blob",
   "license": "MIT",

packages/svgmoji__blob/readme.md

@@ -1,6 +1,6 @@
 # @svgmoji/blob
 
-> The svgmoji sprites for the [`blob-emoji`](https://github.com/googlefonts/blob-emoji) library provided by Google.
+> The svgmoji sprites for the [`blobmoji`](https://github.com/c1710/blobmoji) library.
 
 <br />
 
@@ -36,7 +36,7 @@ npm install @svgmoji/blob
 The following code creates an image with a src applied from the cdn. The first it is used it loads the sprite of all the emojis.
 
 ```ts
-import { Blobmoji } from '@svgmoji/blobmoji';
+import { Blobmoji } from '@svgmoji/blob';
 import data from 'svgmoji/emoji.json';
 
 const blobmoji = new Blobmoji({ data, type: 'all' });
@@ -45,3 +45,42 @@ image.src = blobmoji.getUrl('❤️');
 
 document.body.append(image);
 ```
+
+### html
+
+<br />
+<p align="center">
+  <a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F44D.svg" alt="thumbs up" title="thumbs up" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F600.svg" alt="grinning" title="grinning" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/2764.svg" alt="red heart" title="red heart" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F602.svg" alt="face with tears of joy" title="face with tears of joy" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F605.svg" alt="grinning face with sweat" title="grinning face with sweat" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F97A.svg" alt="pleading face" title="pleading face" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F4A9.svg" alt="pile of poo" title="pile of poo" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F62D.svg" alt="loudly crying face" title="loudly crying face" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F60E.svg" alt="smiling face with sunglasses" title="smiling face with sunglasses" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img width="40px" height="40px" src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F631.svg" alt="face screaming in fear" title="face screaming in fear" /></a>
+</p>
+
+```html
+<!-- Individual -->
+<img
+  width="40px"
+  height="40px"
+  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/svg/1F44D.svg"
+  alt="thumbs up"
+  title="thumbs up"
+/>
+
+<!-- Subgroup Bundle 36KB  -->
+<img
+  width="40px"
+  height="40px"
+  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/sprites/subgroups/face-affection.svg#1F385"
+/>
+
+<!-- Group Bundle 421KB -->
+<img
+  width="40px"
+  height="40px"
+  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
+/>
+
+<!-- Full Bundle 13.2MB -->
+<img
+  width="40px"
+  height="40px"
+  src="https://cdn.jsdelivr.net/npm/@svgmoji/blob/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
+/>
+```