improve badges

Author: DylanVann

packages/docs/badge.pug

@@ -0,0 +1,17 @@
+mixin badge(name, text)
+    svg(xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='20' role='img' aria-label='#{name}: #{text}')
+        title #{name}: #{text}
+        lineargradient#s(x2='0' y2='100%')
+            stop(offset='0' stop-color='#bbb' stop-opacity='.1')
+            stop(offset='1' stop-opacity='.1')
+        clippath#r
+            rect(width='80' height='20' rx='3' fill='#fff')
+        g(clip-path='url(#r)')
+            rect(width='35' height='20' fill='#555')
+            rect(x='35' width='45' height='20' fill='black' class="background")
+            rect(width='80' height='20' fill='url(#s)')
+        g(fill='#fff' text-anchor='middle' font-family='Verdana,Geneva,DejaVu Sans,sans-serif' text-rendering='geometricPrecision' font-size='110')
+            text(aria-hidden='true' x='185' y='150' fill='#010101' fill-opacity='.3' transform='scale(.1)' textlength='250') #{name}
+            text(x='185' y='140' transform='scale(.1)' fill='#fff' textlength='250') #{name}
+            text(aria-hidden='true' x='565' y='150' fill='#010101' fill-opacity='.3' transform='scale(.1)' textlength='350') #{text}
+            text(x='565' y='140' transform='scale(.1)' fill='#fff' textlength='350' class="text") #{text}

packages/docs/data.js

@@ -0,0 +1,24 @@
+import * as path from 'path'
+import fs from 'fs-extra'
+import gzipSize from 'gzip-size'
+import pug from 'pug'
+
+const run = async () => {
+  const pkg = fs.readJSONSync(
+    path.join(path.resolve(), '../perfect-dark-mode/package.json'),
+  )
+  const fileContent = fs.readFileSync(
+    path.join(path.resolve(), 'dist/perfect-dark-mode/dist/index.js'),
+  )
+  const versionWithoutV = pkg.version
+  const sizeInBytes = gzipSize.sync(fileContent)
+
+  const version = `v${versionWithoutV}`
+  const size = `${sizeInBytes} B`
+  await fs.writeJSONSync(path.join(path.resolve(), 'data.json'), {
+    version,
+    size,
+  })
+}
+
+run()

packages/docs/data.json

@@ -0,0 +1 @@
+{"version":"v0.0.5","size":"574 B"}

packages/docs/index.css

@@ -70,12 +70,24 @@ button {
   font-weight: bold;
 }
 
-a.badge img {
+a.badge {
+  text-decoration: none;
+}
+
+a.badge svg {
   height: 20px;
   display: inline-block;
   margin: 0;
 }
 
+a.badge svg .background {
+  fill: var(--color);
+}
+
+a.badge svg .text {
+  fill: var(--background);
+}
+
 .npm {
   margin-right: 4px;
 }

packages/docs/index.pug

@@ -1,7 +1,9 @@
+include ./badge
 doctype html
 html
     head
         meta(name="viewport" content="width=device-width,initial-scale=1")
+        meta(charset="utf-8")
         title Perfect Dark Mode
         link(rel="icon" type="image/png" href="sun.png")
         script(src="perfect-dark-mode/dist/index.js")
@@ -11,10 +13,11 @@ html
             include ./index.css
     body.prose
         h1 🌚🌝 Perfect Dark Mode - <a href="https://github.com/DylanVann/perfect-dark-mode">GitHub</a>
+
         a.badge.npm(href='https://www.npmjs.com/package/perfect-dark-mode')
-            img(src='https://img.shields.io/npm/v/perfect-dark-mode.svg' alt='Version')
-        a.badge(href='https://bundlephobia.com/result?p=perfect-dark-mode')
-            img(src='https://img.shields.io/bundlephobia/minzip/perfect-dark-mode?label=size' alt='Size')
+            +badge("npm", version)
+        a.badge.size(href='https://bundlephobia.com/result?p=perfect-dark-mode')
+            +badge("size", size)
 
         include:markdown-it features.md
 

packages/docs/package.json

@@ -3,14 +3,18 @@
   "version": "0.0.1",
   "private": true,
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "build": "run-s build:copy-lib build:html",
+    "build": "run-s build:data build:copy-lib build:html",
     "build:copy-lib": "cpx \"../../node_modules/perfect-dark-mode/dist/**/*\" dist/perfect-dark-mode/dist",
-    "build:html": "pug index.pug --pretty --out dist",
+    "build:data": "node data.js",
+    "build:html": "pug index.pug --pretty --out dist --obj data.json",
     "serve": "serve dist"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
+    "fs-extra": "^9.0.1",
+    "gzip-size": "^5.1.1",
     "jstransformer-markdown-it": "^2.1.0",
     "npm-run-all": "^4.1.5",
     "perfect-dark-mode": "0.0.5",

yarn.lock

@@ -239,6 +239,11 @@ async-each@^1.0.0:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
 atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
@@ -958,6 +963,16 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+fs-extra@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+  integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1032,11 +1047,19 @@ glob@^7.0.5, glob@^7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+gzip-size@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^4.0.1"
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -1361,6 +1384,15 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+jsonfile@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
+  integrity sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==
+  dependencies:
+    universalify "^1.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jstransformer-markdown-it@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/jstransformer-markdown-it/-/jstransformer-markdown-it-2.1.0.tgz#69ec30ce4518bed5997b38f027648e8c285e92f7"
@@ -1818,6 +1850,11 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -2622,6 +2659,11 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
+universalify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
+  integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"