Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kawarimidoll/typograssy

Typography like GitHub-grass
https://github.com/kawarimidoll/typograssy

contribution-graph deno denodeploy github-profile github-readme pixel-art pixel-art-maker svg typescript typography

Last synced: 2 months ago
JSON representation

Typography like GitHub-grass

Awesome Lists containing this project

README

        


header

[![ci](https://github.com/kawarimidoll/typograssy/workflows/ci/badge.svg)](.github/workflows/ci.yml)
[![deno.land](https://img.shields.io/badge/deno-%5E1.14.0-green?logo=deno)](https://deno.land)
[![LICENSE](https://img.shields.io/badge/license-MIT-brightgreen)](LICENSE)

Generate SVG image like GitHub contribution graph (github-grass) with API.

You can configure the URL in [the online editor](https://typograssy.deno.dev/)
with seeing preview.

## Quick start

Markdown:

```md
[![typograssy](https://typograssy.deno.dev/api?text=Hello%20world!)](https://github.com/kawarimidoll/typograssy)
```

HTML:

```html
typograssy
```

## Features

### :gear: Configurable

![color](https://typograssy.deno.dev/api?text=Hello%20world!&l1=9ba8e9&l2=6d74d9&l3=5057b9&l4=21226e)

See [parameters](#parameters) section.

### :scroll: Auto-scrolling

![scroll](https://typograssy.deno.dev/api?text=Hello%20developer!%20)

The pixels will scroll if the text can't be show at once.

:bulb: You should put 'trailing space' to the URL to separate the last character
and the first one.

## :jp: Japanese support

![japanese](https://typograssy.deno.dev/api?text=東京スカイツリーの高さは634mです。)

You can check supported characters on [characters.ts](characters.ts).

## Parameters

:warning: Follow the [color value format](#color-value-format) when you change
the colors.

### text [required]

- type: `string`

The text that you want to show. It need to be less than 70 characters.

### l0, l1, l2, l3, l4

- type: `string`
- default:
- l0: `ebedf0`
- l1: `9be9a8`
- l2: `40c463`
- l3: `30a14e`
- l4: `216e39`

The color of the pixels. `l0` is used as base color, the others are used as font
color at random.

### bg

- type: `string`
- default: `ffffff`

The color of the background.

### frame

- type: `string`
- default: `000000`

The color of the frame.

### speed

- type: `number`
- default: `200`

The speed of scrolling. `200` means that move 1 pixel per 200 milliseconds.

### comment

- type: `string`
- default: `Generated by kawarimidoll/typograssy`

The comment on left bottom. It need to be less than 70 characters.

## Color value format

- hex value without hash symbol. e.g. `000`, `123abc`.
- [html color name](w3c_color_names.ts). e.g. `red`, `aqua`.
- `none`.

## Contribution

All contributions are welcome!

## Develop

See defined tasks to run `deno task`.

### Local run

```bash
deno task run
```

### Format files

```bash
deno task fmt
```

### Lint files

```bash
deno task lint
```

### Run tests

```bash
deno task test
```

## Related pages

- Runtime: [Deno](https://deno.land/), [Deno Deploy](https://deno.com/deploy)
- Font: [美咲フォント](https://littlelimit.net/misaki.htm)
- Style of GUI page: [Water.css](https://github.com/kognise/water.css)
- Inspired:
[Github Profile Trophy](https://github.com/ryo-ma/github-profile-trophy)