From b7bf9ea1f000dd90cd29bda929c2988e5501fc2d Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 26 Nov 2020 11:51:24 -0800 Subject: [PATCH] Revise docs (#416) * chore: add license badge to README * perf(docs): ignore node_modules in markdown preprocessor * docs: remove tabs for install commands on homepage * docs(button-set): improve copy * docs(button): improve usage for icon-only, link buttons * docs: various copy improvements --- README.md | 8 ++-- docs/src/components/ComponentApi.svelte | 2 +- docs/src/components/Footer.svelte | 6 ++- docs/src/layouts/ComponentLayout.svelte | 2 +- docs/src/pages/components/Button.svx | 10 ++++- docs/src/pages/components/ButtonSet.svx | 6 ++- docs/src/pages/components/Search.svx | 2 +- docs/src/pages/index.svelte | 51 +++++++++---------------- docs/svelte.config.js | 2 + 9 files changed, 48 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 96a0c9fc..a830cdfd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # carbon-components-svelte [![NPM][npm]][npm-url] +![GitHub](https://img.shields.io/github/license/ibm/carbon-components-svelte?color=262626&style=for-the-badge) +![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge) [![Build][build]][build-badge] carbon-components-svelte is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM. @@ -9,7 +11,7 @@ A design system can facilitate frontend development and prototyping because it e ## [Documentation](http://ibm.biz/carbon-svelte) -Deploys by Vercel +Deploys by Vercel ## Getting started @@ -132,7 +134,7 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md). [Apache 2.0](LICENSE) -[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=%23161616 +[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge [npm-url]: https://npmjs.com/package/carbon-components-svelte -[build]: https://travis-ci.com/ibm/carbon-components-svelte.svg?branch=master&color=%230f62fe +[build]: https://img.shields.io/travis/com/ibm/carbon-components-svelte?color=24a148&style=for-the-badge [build-badge]: https://travis-ci.com/ibm/carbon-components-svelte diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index bc7eb193..d3b3376a 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -64,7 +64,7 @@

Component source code: - + {component.filePath} diff --git a/docs/src/components/Footer.svelte b/docs/src/components/Footer.svelte index c74fe3b7..4233f1ce 100644 --- a/docs/src/components/Footer.svelte +++ b/docs/src/components/Footer.svelte @@ -16,7 +16,11 @@ href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank" > - Deploys by Vercel + Deploys by Vercel diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index 1d462868..82640c3f 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -171,7 +171,7 @@

Component API

- Component documentation is + API documentation is auto-generated by sveld. diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index 10229c14..2507c9e0 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -42,10 +42,18 @@ description: High-level description ### Icon-only button - ### Custom element diff --git a/docs/src/pages/components/ButtonSet.svx b/docs/src/pages/components/ButtonSet.svx index 702d154c..bf4646a3 100644 --- a/docs/src/pages/components/ButtonSet.svx +++ b/docs/src/pages/components/ButtonSet.svx @@ -8,7 +8,9 @@ source: Button/ButtonSet.svelte import Preview from "../../components/Preview.svelte"; -### Default (juxtaposed) +### Default + +Buttons in a button set are juxtaposed by default. @@ -17,6 +19,8 @@ source: Button/ButtonSet.svelte ### Stacked +Set `stacked` to `true` to use the stacked variant. + diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx index eb8a0e64..f795a083 100644 --- a/docs/src/pages/components/Search.svx +++ b/docs/src/pages/components/Search.svx @@ -5,7 +5,7 @@ ### Default -The `Search` component is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants. +The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants. diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index a3b809b9..db977621 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -6,9 +6,6 @@ Column, CodeSnippet, Link, - Tabs, - Tab, - TabContent, } from "carbon-components-svelte"; import TileCard from "../components/TileCard.svelte"; import { metatags } from "@sveltech/routify"; @@ -28,8 +25,7 @@

Carbon Components Svelte

- carbon-components-svelte - is a + carbon-components-svelte is a -

Install

- + - - - -
- - - - - - -
- +

Install

+

Installing with yarn:

+ + +

Using npm:

+ + diff --git a/docs/svelte.config.js b/docs/svelte.config.js index c1ae0be0..cad6f06f 100644 --- a/docs/svelte.config.js +++ b/docs/svelte.config.js @@ -127,6 +127,7 @@ module.exports = { extensions: [".svelte", ".svx"], preprocess: [ require("svelte-preprocess")({ + typescript: false, replace: [ ["process.env.VERSION", JSON.stringify(pkg.version)], ["process.env.NODE_ENV", JSON.stringify(NODE_ENV)], @@ -148,6 +149,7 @@ module.exports = { }), { markup({ content, filename }) { + if (/node_modules/.test(filename)) return null; if (filename.endsWith(".svx") && filename.match(/pages\/(recipes)/)) { const toc = [];