Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/kawarimidoll/typograssy
- Owner: kawarimidoll
- License: mit
- Created: 2021-02-06T02:16:26.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-02T11:57:10.000Z (8 months ago)
- Last Synced: 2024-06-02T13:15:52.752Z (8 months ago)
- Topics: contribution-graph, deno, denodeploy, github-profile, github-readme, pixel-art, pixel-art-maker, svg, typescript, typography
- Language: TypeScript
- Homepage: https://typograssy.deno.dev
- Size: 208 KB
- Stars: 81
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![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:
## 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)