<!-- markdownlint - disable MD033 MD041 -->
< p align = "center" >
< h3 align = "center" > ⌨️ Readme Typing SVG< / h3 >
< / p >
< p align = "center" >
< img src = "https://readme-typing-svg.herokuapp.com/?lines=Type+messages+everywhere!;Add+a+bio+to+your+profile!;Add+a+description+to+your+repo!;Make+your+readme+stand+out!¢er=true&width=360&height=50" >
< / p >
< p align = "center" >
< a href = "https://discord.gg/fPrdqh3Zfu" alt = "Discord" title = "Dev Pro Tips Discussion & Support Server" >
< img src = "https://img.shields.io/discord/819650821314052106?color=7289DA&logo=discord&logoColor=white&style=for-the-badge" / > < / a >
< / p >
<!-- markdownlint - enable MD033 -->
## 📃 Table of contents
- [📃 Table of contents ](#-table-of-contents )
- [⚡ Quick setup ](#-quick-setup )
- [⚙ Demo site ](#-demo-site )
- [🚀 Example usage ](#-example-usage )
- [🔧 Options ](#-options )
- [📤 Deploying it on your own ](#-deploying-it-on-your-own )
- [🤗 Contributing ](#-contributing )
- [Installing requirements ](#installing-requirements )
- [Requirements ](#requirements )
- [Linux ](#linux )
- [Windows ](#windows )
- [Clone the repository ](#clone-the-repository )
- [Running the app locally ](#running-the-app-locally )
- [Running the tests ](#running-the-tests )
- [🙋♂️ Support ](#️ )
## ⚡ Quick setup
1. Copy-paste the markdown below into your GitHub profile README
2. Replace the value after `?lines=` with your text. Separate lines of text with semicolons and use `+` or `%20` for spaces.
3. (Optional) Adjust the width parameter (see below) to fit the full width of your text.
```md
[](https://git.io/typing-svg)
```
## ⚙ Demo site
Here you can easily customize your Typing SVG with a live preview.
< https: / / readme-typing-svg . herokuapp . com / demo / >
[](https://readme-typing-svg.herokuapp.com/demo/)
## 🚀 Example usage
- **[Jonah Lawrence](https://github.com/DenverCoder1)**
- **[Waren Gonzaga](https://github.com/warengonzaga)**
Feel free to open a PR and add yours!
## 🔧 Options
| Parameter | Details | Type | Example |
| :---------: | :----------------------------------------------------------------------: | :-----: | :---------------------------------: |
| `lines` | Text to display with lines separated by `;` and `+` for spaces | string | `First+line;Second+line;Third+line` |
| `center` | `true` to center text or `false` for left aligned (default: `false` ) | boolean | `true` or `false` |
| `height` | Height of the output SVG in pixels (default: `50` ) | integer | Any positive number |
| `width` | Width of the output SVG in pixels (default: `400` ) | integer | Any positive number |
| `font` | Font family (default: `monospace` ) | string | Any font from Google Fonts |
| `size` | Font size in pixels (default: `20` ) | integer | Any positive number |
| `color` | Color of the text (default: `36BCF7` ) | string | Hex code without # (eg. `00ff00` ) |
| `multiline` | `true` to wrap lines or `false` to retype on one line (default: `false` ) | boolean | `true` or `false` |
## 📤 Deploying it on your own
If you can, it is preferable to host the files on your own server.
Doing this can lead to better uptime and more control over customization (you can modify the code for your usage).
You can deploy the PHP files on any website server with PHP installed or as a Heroku app.
[](https://heroku.com/deploy?template=https://github.com/DenverCoder1/readme-typing-svg/tree/main)
## 🤗 Contributing
Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.
Make sure your request is meaningful and you have tested the app locally before submitting a pull request.
### Installing requirements
#### Requirements
- [PHP 7 ](https://www.apachefriends.org/index.html )
- [Composer ](https://getcomposer.org )
#### Linux
```bash
sudo apt-get install php
sudo apt-get install php-curl
sudo apt-get install composer
```
#### Windows
Install PHP from [XAMPP ](https://www.apachefriends.org/index.html ) or [php.net ](https://windows.php.net/download )
[▶ How to install and run PHP using XAMPP (Windows) ](https://www.youtube.com/watch?v=K-qXW9ymeYQ )
[📥 Download Composer ](https://getcomposer.org/download/ )
### Clone the repository
```bash
git clone https://github.com/DenverCoder1/readme-typing-svg.git
cd readme-typing-svg
```
### Running the app locally
```bash
composer start
```
Open < http: / / localhost:8000 / > and add parameters to run the project locally.
### Running the tests
Before you can run tests, PHPUnit must be installed. You can install it using Composer by running the following command.
```bash
composer install
```
Run the following command to run the PHPUnit test script which will verify that the tested functionality is still working.
```bash
composer test
```
## 🙋♂️ Support
💙 If you like this project, give it a ⭐ and share it with friends!
<!-- markdownlint - disable MD033 -->
< p align = "left" >
< a href = "https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg?sub_confirmation=1" > < img alt = "Youtube" title = "Youtube" src = "https://img.shields.io/badge/-Subscribe-red?style=for-the-badge&logo=youtube&logoColor=white" / > < / a >
< a href = "https://github.com/sponsors/DenverCoder1" > < img alt = "Sponsor with Github" title = "Sponsor with Github" src = "https://img.shields.io/badge/-Sponsor-ea4aaa?style=for-the-badge&logo=github&logoColor=white" / > < / a >
< / p >
<!-- markdownlint - enable MD033 -->
[☕ Buy me a coffee ](https://ko-fi.com/jlawrence )
---
Made with ❤️ and PHP
<!-- markdownlint - disable MD033 -->
< a href = "https://heroku.com/" > < img alt = "Powered by Heroku" title = "Powered by Heroku" src = "https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white" / > < / a >
<!-- markdownlint - enable MD033 -->
