docs: README updates (#242)

* docs: README updates * docs: README updates
microsoft · Oct 5, 2022 · 48239dc · 48239dc
1 parent 4f7c10f
commit 48239dc
Show file tree

Hide file tree

Showing 10 changed files with 636 additions and 205 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,22 @@
-# ✏️ Griffel
-
-**CSS-in-JS with ahead-of-time compilation.**
+<!-- DOCTOC SKIP -->
+
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./ghdocs/images/griffel-light.png">
+    <img width="400" alt="Griffel's logo" src="./ghdocs/images/griffel-dark.png">
+  </picture>
+</div>
+
+<h2 align="center">CSS-in-JS with ahead-of-time compilation ⚡️</h2>
+<p align="center">
+  <a href="https://www.npmjs.com/package/@griffel/react">
+    <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@griffel/react.svg?style=flat"/>
+  </a>
+  <img alt="MIT License" src="https://img.shields.io/github/license/microsoft/griffel"/>
+  <a href="https://github.com/microsoft/griffel/discussions">
+    <img alt="Github discussions" src="https://img.shields.io/github/discussions/microsoft/griffel" />
+  </a>
+</p>
 
 Griffel ([_German for stylus/pen_](https://en.wiktionary.org/wiki/Griffel)) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.
 
@@ -30,8 +46,8 @@ yarn add @griffel/react
 
 Check series episodes of Fluent UI Insights related to styling issues and Griffel 🎥
 
-|                                                                                                           EP02: Styling                                                                                                           |                                                                                                  EP03: Griffel                                                                                                   |
-| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+|                                                                                                           EP02: Styling                                                                                                           |                                                                                                           EP03: Griffel                                                                                                           |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-styling?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep02-preview.gif" alt="Watch EP02: Styling" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-griffel?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep03-preview.gif" alt="Watch EP03: Griffel" width="240" /></a> |
 
 ## Contributing

diff --git a/ghdocs/images/griffel-dark.png b/ghdocs/images/griffel-dark.png
diff --git a/ghdocs/images/griffel-light.png b/ghdocs/images/griffel-light.png
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
   },
   "packageManager": "[email protected]",
   "nano-staged": {
-    "**/*.{js,json,ts,tsx}": "prettier --write"
+    "**/*.{js,json,ts,tsx}": "prettier --write",
+    "**/*.{md}": "doctoc"
   },
   "simple-git-hooks": {
     "pre-commit": "./node_modules/.bin/nano-staged"
@@ -74,6 +75,7 @@
     "beachball": "^2.20.0",
     "bestzip": "2.2.0",
     "d3-scale-chromatic": "^3.0.0",
+    "doctoc": "2.2.1",
     "esbuild": "^0.14.43",
     "esbuild-plugin-alias": "^0.2.1",
     "esbuild-plugin-import-glob": "^0.1.1",

diff --git a/packages/babel-preset/README.md b/packages/babel-preset/README.md
@@ -2,6 +2,22 @@
 
 A Babel preset that performs build time transforms for [`@griffel/react`](../react).
 
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Install](#install)
+- [When to use it?](#when-to-use-it)
+- [Usage](#usage)
+  - [Importing Griffel from custom packages](#importing-griffel-from-custom-packages)
+  - [Configuring Babel settings](#configuring-babel-settings)
+  - [Configuring module evaluation](#configuring-module-evaluation)
+- [Transforms](#transforms)
+- [Example](#example)
+- [Troubleshooting](#troubleshooting)
+  - [Module evaluation](#module-evaluation)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 ## Install
 
 ```bash

diff --git a/packages/next-extraction-plugin/README.md b/packages/next-extraction-plugin/README.md
@@ -2,6 +2,14 @@
 
 A plugin for NextJS 12.0.5 and newer that adds [`@griffel/webpack-extraction-plugin`](../webpack-extraction-plugin) to webpack loaders pipeline.
 
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Install](#install)
+- [Usage](#usage)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 ## Install
 
 ```bash