add toc to readme

substrate-system · Jul 13, 2024 · 69eca36 · 69eca36
1 parent c0794ea
commit 69eca36
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # hamburger
-![tests](https://github.com/nichoth/hamburger/actions/workflows/nodejs.yml/badge.svg)
-[![types](https://img.shields.io/npm/types/@nichoth/hamburger?style=flat-square)](./dist/index.d.ts)
+![tests](https://github.com/substrate-system/hamburger/actions/workflows/nodejs.yml/badge.svg)
+[![types](https://img.shields.io/npm/types/@substrate-system/hamburger?style=flat-square)](./dist/index.d.ts)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
 [![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
@@ -11,10 +11,24 @@ A hamburger menu, implemented as a web component.
 ![Hamburger button closed](image.png)
 ![Hamburger button open](image-1.png)
 
+<!-- toc -->
+
+- [install](#install)
+- [use](#use)
+- [example](#example)
+  * [bundler](#bundler)
+  * [HTML only](#html-only)
+- [API](#api)
+  * [attributes](#attributes)
+  * [CSS variables](#css-variables)
+- [credits](#credits)
+
+<!-- tocstop -->
+
 ## install
 
 ```sh
-npm i -S @nichoth/hamburger
+npm i -S @substrate-system/hamburger
 ```
 
 ## use
@@ -24,15 +38,15 @@ in your HTML.
 ## example
 
 * see code in [./example](./example/)
-* [See a live demonstration](https://nichoth.github.io/hamburger/)
+* [See a live demonstration](https://substrate-system.github.io/hamburger/)
 
 ### bundler
 With a bundler such as [vite](https://vitejs.dev/),
 
 ```js
 // just import, then we can use the tag in HTML
-import '@nichoth/hamburger'
-import '@nichoth/hamburger/style.css'
+import '@sustrate-system/hamburger'
+import '@sustrate-system/hamburger/style.css'
 
 // import the application CSS, because we are defining some CSS variables
 import './index.css'
@@ -46,12 +60,12 @@ includes minified files.
 
 #### JS
 ```sh
-cp ./node_modules/@nichoth/hamburger/dist/index.min.js ./public/hamburger.js
+cp ./node_modules/@sustrate-system/hamburger/dist/index.min.js ./public/hamburger.js
 ```
 
 #### CSS
 ```sh
-cp ./node_modules/@nichoth/hamburger/dist/style.min.css ./public/style.css
+cp ./node_modules/@sustrate-system/hamburger/dist/style.min.css ./public/hamburger.css
 ```
 
 Then link to them in HTML:
@@ -60,7 +74,7 @@ Then link to them in HTML:
 <html lang="en">
 <head>
     <!-- the style -->
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/hamburger.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Example</title>
@@ -91,7 +105,7 @@ Default is 200ms.
 This corresponds to a CSS variable, `--hamburger-transition`, which is the
 transition time as a CSS property. Eg, in CSS,
 ```css
-:root {
+hamburger-menu {
   --hamburger-transition: .8s
 }
 ```
@@ -113,14 +127,14 @@ Define several CSS variables to customize the appearance.
 ```css
 :root {
   --hamburger-bgc: var(--white);  /* hamburger background color */
-  --hamburger-color: var(--purple);
-  --hamburger-hover-color: var(--bright-white);
-  --menu-bgc: var(--white);
-  --menu-color: var(--purple);
-  --menu-hover-bgc: var(--purple);
-  --menu-hover-color: var(--white);
+  --hamburger-color: var(--purple); /* hamburger text color */
+  --hamburger-hover-color: var(--bright-white); /* hover state text color */
+  --menu-bgc: var(--white);  /* background color for the expanded menu */
+  --menu-color: var(--purple);  /* text color for expanded menu */
+  --menu-hover-bgc: var(--purple); /* hover background color inside menu */
+  --menu-hover-color: var(--white); /* hover text color inside menu */
   --menu-width: 200px;
-  --hamburger-transition: .8s;  /* default is .2s */
+  --hamburger-transition: .2s;  /* default is .2s */
 }
 ```
 

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@nichoth/hamburger",
+  "name": "@substrate-system/hamburger",
   "description": "A hamburger menu, implemented as a web component",
   "directories": {
     "example": "example",
@@ -26,7 +26,8 @@
     "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-css && npm run build-css:min",
     "start": "vite",
     "preversion": "npm run lint",
-    "version": "auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md",
+    "toc": "markdown-toc --maxdepth 3 -i README.md",
+    "version": "npm run toc && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
     "postversion": "git push --follow-tags && npm publish",
     "prepublishOnly": "npm run build"
   },
@@ -41,6 +42,7 @@
     "esbuild": "^0.22.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
+    "markdown-toc": "^1.2.0",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-nesting": "^12.1.5",
@@ -80,15 +82,17 @@
   "types": "./dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nichoth/hamburger.git"
+    "url": "git+https://github.com/substrate-system/hamburger.git"
   },
   "keywords": [
     "hamburger",
     "menu",
-    "webcomponent"
+    "webcomponent",
+    "mobile",
+    "nav"
   ],
   "bugs": {
-    "url": "https://github.com/nichoth/hamburger/issues"
+    "url": "https://github.com/substrate-system/hamburger/issues"
   },
-  "homepage": "https://github.com/nichoth/hamburger#readme"
+  "homepage": "https://github.com/substrate-system/hamburger"
 }