# docsify-corner

> A plugin for setting corner of docsify.

Latest version **1.0.7** (published 2022-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install docsify-corner
pnpm add docsify-corner
yarn add docsify-corner
bun add docsify-corner
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-06-03 |
| First published | 2020-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Koy |
| Maintainers | koooooo-7 |
| Keywords | docsify, plugin, corner, docsift-plugin, docsify-corner |

## Links

- npm: https://www.npmjs.com/package/docsify-corner
- Repository: https://github.com/Koooooo-7/docsify-corner
- Homepage: https://github.com/Koooooo-7/docsify-corner#readme
- Issues: https://github.com/Koooooo-7/docsify-corner/issues
- npm.io page: https://npm.io/package/docsify-corner

## Recent versions

- 1.0.7 (latest) — 2022-06-03
- 1.0.6 — 2021-09-13
- 1.0.5 — 2021-09-13
- 1.0.3 — 2021-06-22
- 1.0.2 — 2020-08-18
- 1.0.1 — 2020-08-09
- 1.0.0 — 2020-08-09

## README

# docsify-corner

![docsify](https://github.com/docsifyjs/docsify/raw/develop/docs/_media/icon.svg)

*A [Docsify](https://docsify.js.org/) plugin for corner configuration enhancement based on [Docsify repo configuration](https://docsify.js.org/#/configuration?id=repo).*

- [x] support more icon ( `Gitlab`...）.
- [x] support customized image（`png`、`jpg`、`gif`）.
- [x] support more settings（`tooltip`、`color`）.

[![](https://data.jsdelivr.com/v1/package/npm/docsify-corner/badge)](https://www.jsdelivr.com/package/npm/docsify-corner)



<div align="center">
    <img src="https://user-images.githubusercontent.com/33706142/89785634-4e3ff300-db4d-11ea-9eb5-16ae5e1512ee.png" alt="gitlab" width=45%/>
    &emsp;&emsp;
    <img src="https://i.loli.net/2020/08/10/iEWkLXpRCSAv1IN.gif" alt="customer gif" width=45%/>
</div>

## Usage

### Import

Import one of the script in `index.html`.

```html
<script src="//cdn.jsdelivr.net/npm/docsify-corner/dist/docsify-corner.js"></script>
```

```html
<script src="//cdn.jsdelivr.net/npm/docsify-corner/dist/docsify-corner.min.js"></script>
```

### Configuration

Options:

| Option     | Description                         |
| ------     | ----------------------------------- |
| icon       | the icon you want show the corner.  |
| url        | the url for corner link to.         |
| target     | the url target for corner link to.  |
| width      | the width of the customized image.  |
| height     | the height of the customized image. |
| color      | the color of the icon.    |
| background | the background color of the customized icon. |
| title      | the text of the title attribute is displayed as a tooltip. |


#### Use the preset icons

Current support default corner types.

| Support Icon Type | Icon argument |
| ----------------- | ------------- |
| `Github`          | github        |
| `Gitlab`          | gitlab        |
| `Spring`          | spring        |
| `Golang`          | golang        |



```html
<script>
  window.$docsify = {
      repo:'true', // set the docsify show the corner
      corner: {
        // the icon link url to another site  
        url: "https://gitlab.com/gitlab-org/gitlab-svgs", 
        // the default preset icon in docsify-corner  
        icon: "gitlab", 
      },
  };
</script>
```

---

#### Use the customized image

You can set your own image in the corner.

```html
<script>
  window.$docsify = {
      repo:'true',
      corner: {
        url: "https://github.com/Koooooo-7/docsify-corner",
        // you can set the image link here  
        icon: "https://github.githubassets.com/images/icons/emoji/unicode/1f48a.png",
        // the size of the image  
        width: 80,
        height: 80
      },
  };
</script>
```

---

### Contribution

It is hard to adjust the icon to fit the corner, if you wanna add more preset icons, welcome **star** and send a **PR**!

This the current [svg icon resources](https://gitlab.com/gitlab-org/gitlab-svgs)  I' m working on.

Steps :

- Folk it !
- Install dependencies `npm install`.
- Create your feature branch: `git checkout -b my-new-feature`.
- Commit your changes: `git commit -am 'Add some feature'.`
- Push to the branch: `git push origin my-new-feature`.
- Submit a pull request.

---

### License

MIT [@Koy](https://github.com/Koooooo-7)

---
_Source: https://npm.io/package/docsify-corner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._