Skip to content

Commit

Permalink
Merge pull request #66 from phun-ky/fix/readme
Browse files Browse the repository at this point in the history
Fix/readme
  • Loading branch information
phun-ky authored Oct 17, 2023
2 parents 0f3a896 + 6b18d60 commit c1c3b63
Show file tree
Hide file tree
Showing 7 changed files with 33 additions and 63 deletions.
23 changes: 14 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# @phun-ky/speccer

![logo](./public/logo-speccer-colored-dark.svg)
![logo](./public/logo-speccer-colored-package.svg)

> A zero dependency package to highlight elements
Expand All @@ -12,9 +12,10 @@
1. [About](#about)
2. [API](#api)
3. [Usage](#usage)
1. [ESM](#esm)
2. [Script](#script)
3. [React](#react)
1. [Typescript](#typescript)
2. [ESM](#esm)
3. [Script](#script)
4. [React](#react)
4. [Advanced usage](#advanced-usage)
1. [Lazy](#lazy)
5. [Features](#features)
Expand All @@ -24,26 +25,30 @@
3. [Highlight the anatomy of an element](#highlight-the-anatomy-of-an-element)
1. [Subtle anatomy](#subtle-anatomy)
4. [Curly brackets](#curly-brackets)
5. [Element typogpraphy](#element-typogpraphy)
5. [Element typography](#element-typography)
6. [Mark elements](#mark-elements)
6. [Customization](#customization)

## About

Speccer was created to make it easier to document components in a design system.
Speccer was originally created to make it easier to document components in a design system, but you can use it to whatever you like, if you are in the need to highlight any element!

```zsh
```shell-session
npm i @phun-ky/speccer
```

See demo here: <https://codepen.io/phun-ky/pen/xaOrYX>

## API

Go [here](api/README.md) to read the full API documentation.
Go [here](https://github.com/phun-ky/speccer/blob/main/api/README.md) to read the full API documentation.

## Usage

### Typescript

Types can be found in `@phun-ky/speccer/speccer.d.ts`.

### ESM

Either import and run the required functions:
Expand Down Expand Up @@ -239,7 +244,7 @@ The curly brackets are made with SVG paths, and it is required to have the follo

This will give a dashed border, and a more subtle pin style.

### Element typogpraphy
### Element typography

![Image of typography speccer](./public/typography.png)

Expand Down
52 changes: 0 additions & 52 deletions main.d.ts

This file was deleted.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
"/speccer.js",
"/speccer.js.map",
"/speccer.min.css",
"/speccer.css"
"/speccer.css",
"/speccer.d.ts"
],
"repository": {
"type": "git",
Expand Down
4 changes: 4 additions & 0 deletions public/logo-speccer-colored-package.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions public/logo-speccer-horizontal-colored-dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions public/logo-speccer-horizontal-colored-package.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit c1c3b63

Please sign in to comment.