Repository: DenverCoder1/readme-typing-svg
Branch: main
Commit: fd5b760501f9
Files: 41
Total size: 118.2 KB
Directory structure:
gitextract_lm_lbad9/
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── feature_request.md
│ │ └── question.md
│ ├── dependabot.yml
│ ├── pull_request_template.md
│ └── workflows/
│ ├── phpunit-ci-coverage.yml
│ ├── prettier.yml
│ └── release.yml
├── .gitignore
├── .prettierignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── Procfile
├── README.md
├── app.json
├── composer.json
├── docs/
│ └── faq.md
├── src/
│ ├── controllers/
│ │ └── RendererController.php
│ ├── demo/
│ │ ├── css/
│ │ │ ├── loader.css
│ │ │ ├── style.css
│ │ │ └── toggle-dark.css
│ │ ├── index.php
│ │ └── js/
│ │ ├── script.js
│ │ └── toggle-dark.js
│ ├── enums/
│ │ └── ResponseEnum.php
│ ├── exceptions/
│ │ └── UnprocessableEntityException.php
│ ├── index.php
│ ├── interfaces/
│ │ └── IStatusException.php
│ ├── models/
│ │ ├── ErrorModel.php
│ │ ├── GoogleFontConverter.php
│ │ └── RendererModel.php
│ ├── templates/
│ │ ├── error.php
│ │ └── main.php
│ └── views/
│ ├── ErrorView.php
│ └── RendererView.php
└── tests/
├── OptionsTest.php
├── RendererTest.php
└── phpunit/
└── phpunit.xml
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [DenverCoder1]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: jlawrence
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ""
labels: "bug"
assignees: ""
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ""
labels: "enhancement"
assignees: ""
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/ISSUE_TEMPLATE/question.md
================================================
---
name: Question
about: I have a question about this project
title: ""
labels: "question"
assignees: ""
---
**Description**
A brief description of the question or issue:
================================================
FILE: .github/dependabot.yml
================================================
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: "composer" # See documentation for possible values
directory: "/" # Location of package manifests
schedule:
interval: "daily"
================================================
FILE: .github/pull_request_template.md
================================================
## Summary
<!-- Please include a summary of the change and which issue is fixed. -->
## Type of change
<!-- Please delete options that are not relevant. -->
- [ ] Bug fix (added a non-breaking change which fixes an issue)
- [ ] New feature (added a non-breaking change which adds functionality)
- [ ] Updated documentation (updated the readme, templates, or other repo files)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
## How Has This Been Tested?
<!-- If you have changed or added a feature, please describe the tests you made to verify your changes. -->
- [ ] Ran tests with `composer test`
- [ ] Added or updated test cases to test new features
================================================
FILE: .github/workflows/phpunit-ci-coverage.yml
================================================
name: PHPUnit CI
on:
workflow_dispatch:
pull_request:
push:
branches:
- main
jobs:
build-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: php-actions/composer@9357db0fb3020086db5a9922354c8dc643927bcd
- name: PHPUnit Tests
uses: php-actions/phpunit@v4
with:
bootstrap: vendor/autoload.php
configuration: tests/phpunit/phpunit.xml
args: --testdox
env:
TOKEN: ${{ secrets.GITHUB_TOKEN }}
USERNAME: DenverCoder1
================================================
FILE: .github/workflows/prettier.yml
================================================
name: Format with Prettier
on:
push:
branches:
- main
pull_request:
paths:
- ".github/workflows/prettier.yml"
- "**.php"
- "**.md"
- "**.js"
- "**.css"
jobs:
prettier:
runs-on: ubuntu-latest
steps:
- name: Checkout Pull Request
if: ${{ github.event_name == 'pull_request' }}
uses: actions/checkout@v3
with:
repository: ${{ github.event.pull_request.head.repo.full_name }}
ref: ${{ github.event.pull_request.head.ref }}
- name: Checkout Push
if: ${{ github.event_name != 'pull_request' }}
uses: actions/checkout@v3
- name: Install prettier and plugin-php
run: npm install --global prettier@2.8.1 @prettier/plugin-php@0.18.9
- name: Check formatting with Prettier
continue-on-error: true
run: composer format:check
- name: Prettify code
run: |
composer format
git diff
- name: Commit changes
uses: EndBug/add-and-commit@v9
with:
message: "style: Formatted code with Prettier"
default_author: github_actions
================================================
FILE: .github/workflows/release.yml
================================================
name: Releases
on:
workflow_dispatch:
jobs:
changelog:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: conventional Changelog Action
id: changelog
uses: TriPSs/conventional-changelog-action@v3.7.1
with:
github-token: ${{ secrets.CHANGELOG_RELEASE }}
version-file: './composer.json'
output-file: 'false'
- name: create release
uses: actions/create-release@v1
if: ${{ steps.changelog.outputs.skipped == 'false' }}
env:
GITHUB_TOKEN: ${{ secrets.CHANGELOG_RELEASE }}
with:
tag_name: ${{ steps.changelog.outputs.tag }}
release_name: ${{ steps.changelog.outputs.tag }}
body: ${{ steps.changelog.outputs.clean_changelog }}
================================================
FILE: .gitignore
================================================
vendor/
.vscode/
.env
.idea
================================================
FILE: .prettierignore
================================================
vendor
*.min.js
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, caste, color, religion, or sexual
identity and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
- Focusing on what is best not just for us as individuals, but for the overall
community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or advances of
any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email address,
without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
jonah@freshidea.com.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series of
actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or permanent
ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within the
community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.1, available at
[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][mozilla coc].
For answers to common questions about this code of conduct, see the FAQ at
[https://www.contributor-covenant.org/faq][faq]. Translations are available at
[https://www.contributor-covenant.org/translations][translations].
[homepage]: https://www.contributor-covenant.org
[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
[mozilla coc]: https://github.com/mozilla/diversity
[faq]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations
================================================
FILE: CONTRIBUTING.md
================================================
## 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 8.1+](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
```
#### macOS
Using [Homebrew](https://brew.sh):
```bash
brew install php
brew install composer
```
PHP on macOS typically includes the curl extension. If you need to enable it, ensure `php.ini` has `extension=curl` uncommented (run `php --ini` to find your config file).
#### 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
```
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
```
### Format and test the code
Run the following command to format the code with Prettier:
```
composer run format
```
Run the following command to check if your code is formatted properly:
```
composer run format:check
```
> **Note** You need to have [`prettier`](https://prettier.io/) and the [prettier-php plugin](https://github.com/prettier/plugin-php) installed globally in order to run this command.
Run the following command to run the PHPUnit test script which will verify that the tested functionality is still working.
```bash
composer test
```
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021 Jonah Lawrence
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: Procfile
================================================
web: vendor/bin/heroku-php-apache2 src/
================================================
FILE: README.md
================================================
<!-- markdownlint-disable MD033 MD041 -->
<p align="center">
<h3 align="center">⌨️ Readme Typing SVG</h3>
</p>
<p align="center">
<img src="https://readme-typing-svg.demolab.com/?lines=Type+messages+everywhere!;Add+a+bio+to+your+profile!;Add+a+description+to+your+repo!;Make+your+readme+stand+out!&font=Fira%20Code¢er=true&width=380&height=50&duration=4000&pause=1000" alt="Example Usage - README Typing SVG">
</p>
<p align="center">
<a href="https://github.com/search?q=extension%3Amd+%22https+readme+typing+svg%22&type=Code" alt="Users" title="Repo users">
<img src="https://freshidea.com/jonah/app/github-search-results/readme-typing-svg/index.php"/></a>
<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 -->
## ⚡ 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. Adjust the width parameter (see below) to fit the full width of your text.
```md
[](https://git.io/typing-svg)
```
4. Star the repo 😄
## ⚙ Demo site
Here you can easily customize your Typing SVG with a live preview.
<https://readme-typing-svg.demolab.com/demo/>
[](https://readme-typing-svg.demolab.com/demo/)
## 🚀 Example usage
Below are links to profiles where you can see Readme Typing SVGs in action!
[](https://github.com/DenverCoder1 "Jonah Lawrence on GitHub")
[](https://jini.rentalz.com/ "Jini by Rentalz.com")
[](https://github.com/warengonzaga "Waren Gonzaga on GitHub")
[](https://github.com/8BitJonny "8BitJonny on GitHub")
[](https://github.com/adityaraute "Aditya Raute on GitHub")
[](https://github.com/ShivaSankeerth "Shiva Sankeerth Reddy on GitHub")
[](https://github.com/Tarun-Kamboj "Tarun Kamboj on GitHub")
[](https://github.com/tavignesh "T.A.Vignesh on GitHub")
[](https://github.com/trumbitta "William J. Ghelfi on GitHub")
[](https://github.com/ManoBharathi93 "Mano Bharathi M on GitHub")
[](https://github.com/sudoshivam "Shivam Yadav on GitHub")
[](https://github.com/PROxZIMA "Pratik Pingale on GitHub")
[](https://github.com/VydrOz "Vydr'Oz on GitHub")
[](https://github.com/Carol42 "Caroline Heloíse on GitHub")
[](https://github.com/PriyanshK09 "PriyanshK09 on GitHub")
[](https://github.com/thakurballary "Thakur Ballary on GitHub")
[](https://github.com/nicesapien "NiceSapien on GitHub")
[](https://github.com/manthanank "Manthan Ank on GitHub")
[](https://github.com/lertsoft "Ronny Coste on GitHub")
[](https://github.com/Vishal-beep136 "Vishal Beep on GitHub")
[](https://github.com/wiz64 "wiz64 on GitHub")
[](https://github.com/Aquarius-blake "Aquarian Blake on GitHub")
[](https://github.com/D3vil0p3r "D3vil0p3r on GitHub")
[](https://github.com/EliusHHimel "EliusHHimel on GitHub")
[](https://github.com/jcs090218 "jcs090218 on GitHub")
[](https://github.com/Rishabh2804 "Rishabh2804 on GitHub")
[](https://github.com/shalinibhatt "shalinibhatt on GitHub")
[](https://github.com/UlisesAlexanderAM "UlisesAlexanderAM on GitHub")
[](https://github.com/SpookyJelly "SpookyJelly on GitHub")
[](https://github.com/majidtdeni666 "majidtdeni666 on GitHub")
[](https://github.com/galexy727 "GalexY727 on GitHub")
[](https://github.com/HectorSaldes "HectorSaldes on GitHub")
[](https://github.com/Ash-codes18 "Ash-codes18 on GitHub")
[](https://github.com/Maagnitude "Maagnitude on GitHub")
[](https://github.com/cracker911181 "cracker911181 on GitHub")
[](https://github.com/quiet-node "quiet-node on GitHub")
[](https://github.com/kaustubh43 "kaustubh43 on GitHub")
[](https://github.com/kaisunoo "kaisunoo on GitHub")
[](https://github.com/meyer-pidiache "Meyer Pidiache on GitHub")
[](https://github.com/jeremiahseun "Jeremiah Erinola on GitHub")
[](https://github.com/creativepurus "Anand Purushottam 🇮🇳 on GitHub ☕")
[](https://github.com/Gchism94 "Greg Chism 🤘 on GitHub")
[](https://github.com/turbomaster95 "turbomaster95 🗿 🇮🇳 on GitHub ☕")
[](https://github.com/K1rsN7 "K1rsN7 on GitHub💪")
[](https://github.com/codesbyahsen "AHSEN ALEE on GitHub")
[](https://github.com/Freddywhest "Alfred Nti on GitHub")
[](https://github.com/Shiro-cha "Shiro Yukami on Github")
[](https://github.com/MohammedAbidNafi "Abid Nafi on Github")
[](https://github.com/Srijan-Baniyal "Srijan Baniyal on Github")
[](https://github.com/BrunoOliveiraS "Bruno Oliveira on Github")
[](https://github.com/zidk "Pablo Gonzalez on Github")
[](https://github.com/tshr-d-dragon "Tushar Patil on Github")
[](https://github.com/DeveshYadav13 "Devesh Yadav on Github")
[](https://github.com/HauseMasterZ "HauseMaster on Github")
[](https://github.com/hyskoniho "hyskoniho on Github")
[](https://github.com/elvisisvan "elvisisvan on Github")
[](https://github.com/Nquenan "Nquenan on Github")
[](https://github.com/akhilnev "Akhilesh Nevatia on Github")
[](https://github.com/mannysoft "Manny Isles on Github")
[](https://github.com/LinThitHtwe "LinThitHtwe on Github")
[](https://github.com/Elio-Aliaj "Elio-Aliaj on Github")
[](https://github.com/presentformyfriends "presentformyfriends on Github")
[](https://github.com/Ad7amstein "Ad7amstein on Github")
[](https://github.com/LakshmanKishore "LakshmanKishore on Github")
[](https://github.com/mateusadada "mateusadada on Github")
[](https://github.com/fasakinhenry "fasakinhenry on Github")
[](https://github.com/YousifAbozid "YousifAbozid on Github")
[](https://github.com/hheinsoee "hheinsoee on Github")
[](https://github.com/lucmsilva651 "lucmsilva651 on Github")
[](https://github.com/ashertenenbaum "ashertenenbaum on Github")
[](https://github.com/0dxplt "0dxplt on Github")
[](https://github.com/HerobrineTV "HerobrineTV on Github")
[](https://github.com/Borketh "Borketh on Github")
[](https://github.com/Callmeproteus "Callmeproteus on GitHub")
[](https://github.com/JotaP07 "JP on GitHub")
[](https://github.com/suzukimain "suzukimain on Github")
[](https://github.com/caesar013 "caesar013 on Github")
[](https://github.com/amir78729 "Amir on Github")
[](https://github.com/AJsuper007 "AJsuper007 on Github")
[](https://github.com/ABAN26 "ABAN26 on Github")
[](https://github.com/SohamMore100 "Soham More on GitHub")
[](https://github.com/Yobro7292 "Yogi Hariyani on GitHub")
[](https://github.com/Ninja1375 "Antônio Nascimento on GitHub")
[](https://github.com/TridentifyIshaan "Tridentify Ishaan on GitHub")
[](https://github.com/krimmyy "Eligijus Ciza on GitHub")
[](https://github.com/Ashish-CodeJourney "Ashish Vaghela on GitHub")
[](https://github.com/Snoopy1866 "Snoopy1866 on GitHub")
[](https://github.com/SarthakKrishak "Sarthak Krishak on GitHub")
[](https://github.com/AustinMusuya "Austin Musuya on GitHub")
[](https://github.com/EngineerRohit01 "Rohit on GitHub")
[](https://github.com/sandeep-Petwal "Sandeep Prasad on GitHub")
[](https://github.com/saadhusayn "Saad Hussain on Github")
[](https://github.com/Theglassofdata "Rahul Raj")
[](https://github.com/EchoSingh "Aditya Singh on Github")
[](https://github.com/Muhammad-Noraeii "Muhammad Noraeii on Github")
[](https://github.com/Harry-Skerritt "Harry-Skerritt on Github")
[](https://github.com/madhurimarawat "Madhurima Rawat on Github")
[](https://github.com/wfxey "wfxey on Github")
[](https://github.com/zhulixiao "Lixiao Zhu on Github")
[](https://github.com/AhmedNassar7 "Ahmed Nassar on Github")
Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issues/21#issue-870549556) 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` |
| `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 |
| `size` | Font size in pixels (default: `20`) | integer | Any positive number |
| `font` | Font family (default: `monospace`) | string | Any font from Google Fonts |
| `color` | Color of the text (default: `36BCF7`) | string | Hex code without # (eg. `F724A9`) |
| `background` | Background color of the text (default: `00000000`) | string | Hex code without # (eg. `FEFF4C`) |
| `center` | `true` to center text or `false` for left aligned (default: `false`) | boolean | `true` or `false` |
| `vCenter` | `true` to center vertically or `false`(default) to align above the center | boolean | `true` or `false` |
| `multiline` | `true` to wrap lines or `false` to retype on one line (default: `false`) | boolean | `true` or `false` |
| `duration` | Duration of the printing of a single line in milliseconds (default: `5000`) | integer | Any positive number |
| `pause` | Duration of the pause between lines in milliseconds (default: `0`) | integer | Any non-negative number |
| `repeat` | `true` to loop around to the first line after the last (default: `true`) | boolean | `true` or `false` |
| `separator` | Separator used between lines in the lines parameter (default: `;`) | string | `;`, `;;`, `/`, etc. |
| `letterSpacing` | Letter spacing (default: `normal`) | string | Any css values for the [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) property |
## 📤 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.
### Step-by-step instructions for deploying to Heroku
1. Sign in to **Heroku** or create a new account at <https://heroku.com>
2. Click the "Deploy to Heroku" button below
[](https://heroku.com/deploy?template=https://github.com/DenverCoder1/readme-typing-svg/tree/main)
3. On the page that comes up, click **"Deploy App"** at the end of the form
4. Once the app is deployed, click **"Manage App"** to go to the dashboard
5. Scroll down to the **Domains** section in the settings to find the URL you will use in place of `readme-typing-svg.demolab.com`
## 🤗 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.
Refer to [CONTRIBUTING.md](/CONTRIBUTING.md) for more details on contributing, installing requirements, and running the application.
## 🙋♂️ 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 -->
This project uses [Twemoji](https://github.com/twitter/twemoji), published under the [CC-BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)
================================================
FILE: app.json
================================================
{
"name": "Readme Typing SVG",
"description": "⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text. Typing SVGs can be used as a bio on your Github profile readme or repository.",
"repository": "https://github.com/DenverCoder1/readme-typing-svg/",
"keywords": ["github", "dynamic", "readme", "typing", "svg", "profile"],
"formation": {
"web": {
"quantity": 1,
"size": "basic"
}
}
}
================================================
FILE: composer.json
================================================
{
"name": "denvercoder1/readme-typing-svg",
"description": "⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text. Typing SVGs can be used as a bio on your Github profile readme or repository.",
"keywords": [
"github",
"dynamic",
"readme",
"typing",
"svg",
"profile"
],
"license": "MIT",
"version": "0.8.0",
"homepage": "https://github.com/DenverCoder1/readme-typing-svg/",
"autoload": {
"classmap": [
"src/models/",
"src/views/",
"src/controllers/",
"src/enums/",
"src/exceptions/",
"src/interfaces/"
]
},
"require": {
"php": "^8.1",
"vlucas/phpdotenv": "^5.3"
},
"require-dev": {
"phpunit/phpunit": "^11"
},
"scripts": {
"start": "php8 -S localhost:8000 -t src || php -S localhost:8000 -t src",
"test": "./vendor/bin/phpunit --testdox tests",
"format:check": "prettier --check *.md **/**/*.{php,md,js,css} --print-width 120",
"format": "prettier --write *.md **/**/*.{php,md,js,css} --print-width 120"
}
}
================================================
FILE: docs/faq.md
================================================
# FAQ
## How do I include Readme Typing SVG in my Readme?
Markdown files on GitHub support embedded images using Markdown or HTML. You can customize your SVG on the [demo site](https://readme-typing-svg.demolab.com/demo/) and use the image source in either of the following ways:
### Markdown
```md
[](https://git.io/typing-svg)
```
### HTML
<!-- prettier-ignore-start -->
```html
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text"/></a>
```
<!-- prettier-ignore-end -->
## The text is getting cut off at the end, how do I fix it?
The text rendered within the SVG can be any variable width, therefore you must specify the width manually to ensure the text will fit.
The `width` parameter in the URL should be increased such that the full width of the text is displayed properly.
```md
https://readme-typing-svg.demolab.com/?lines=Your+Long+Message+With+A+Long+Width&width=460
```
## How do I center the image on the page?
To center align images, you must use the HTML syntax and wrap it in an element with the HTML attribute `align="center"`.
<!-- prettier-ignore-start -->
```html
<p align="center">
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com/?lines=This+image+is+center-aligned&font=Fira%20Code¢er=true&width=380&height=50"/></a>
</p>
```
<!-- prettier-ignore-end -->
## How do I add multiple spaces in the middle of a line?
Similar to HTML, SVG/XML treats multiple consecutive spaces as a single space.
A workaround for adding extra spaces can be to use other whitespace characters (for example, you can copy-paste the en-space or other unusual spaces from https://qwerty.dev/whitespace). The alternate whitespace characters don't get ignored.
## How do I make different SVGs for dark mode and light mode?
As of May 2022, you can now [specify theme context](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) using the `<picture>` and `<source>` elements as shown below. The dark mode version appears in the `srcset` of the `<source>` tag and the light mode version appears in the `src` of the `<img>` tag.
<!-- prettier-ignore-start -->
```html
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://readme-typing-svg.demolab.com/?lines=You+are+using+dark+mode&color=FFFFFF" />
<img src="https://readme-typing-svg.demolab.com/?lines=You+are+using+light+mode&color=000000" />
</picture>
```
<!-- prettier-ignore-end -->
## How do I create a Readme for my profile?
A profile readme appears on your profile page when you create a repository with the same name as your username and add a `README.md` file to it. For example, the repository for the user [`DenverCoder1`](https://github.com/DenverCoder1) is located at [`DenverCoder1/DenverCoder1`](https://github.com/DenverCoder1/DenverCoder1).
================================================
FILE: src/controllers/RendererController.php
================================================
<?php declare(strict_types=1);
/**
* Controller for choosing model and rendering SVG outputs
*/
class RendererController
{
/**
* @var RendererModel $model
*/
private $model;
/**
* @var RendererView $view
*/
private $view;
/**
* @var array<string, string> $params
*/
private $params;
/**
* @var ResponseEnum $statusCode Response status code
*/
private ResponseEnum $statusCode = ResponseEnum::HTTP_OK;
/**
* Construct RendererController
*
* @param array<string, string> $params request parameters
*/
public function __construct(array $params)
{
$this->params = $params;
// set up model and view
try {
// create renderer model
$this->model = new RendererModel(__DIR__ . "/../templates/main.php", $params);
// create renderer view
$this->view = new RendererView($this->model);
} catch (Exception $error) {
// create error rendering model
$this->model = new ErrorModel(__DIR__ . "/../templates/error.php", $error->getMessage());
// create error rendering view
$this->view = new ErrorView($this->model);
// set status code
$this->statusCode =
$error instanceof IStatusException ? $error->getStatus() : ResponseEnum::HTTP_INTERNAL_SERVER_ERROR;
}
}
/**
* Redirect to the demo site
*/
private function redirectToDemo(): void
{
header("Location: demo/");
exit();
}
/**
* Set content type for page output
*/
private function setContentType($type): void
{
header("Content-type: {$type}");
}
/**
* Set cache to refresh periodically
* This ensures any updates will roll out to all profiles
*/
private function setCacheRefreshDaily(): void
{
// set cache to refresh once per day
$timestamp = gmdate("D, d M Y 23:59:00") . " GMT";
header("Expires: $timestamp");
header("Last-Modified: $timestamp");
header("Pragma: no-cache");
header("Cache-Control: no-cache, must-revalidate");
}
/**
* Set output headers
*/
public function setHeaders(): void
{
// redirect to demo site if no text is given
if (!isset($this->params["lines"])) {
$this->redirectToDemo();
}
// set the content type header
$this->setContentType("image/svg+xml");
// set cache headers
$this->setCacheRefreshDaily();
// set status code
http_response_code($this->statusCode->value);
}
/**
* Get the rendered SVG
*
* @return string The SVG to output
*/
public function render(): string
{
return $this->view->render();
}
}
================================================
FILE: src/demo/css/loader.css
================================================
.loader,
.loader:before,
.loader:after {
display: none;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: var(--blue-light);
font-size: 10px;
margin: 0 0 38px 15px;
position: relative;
text-indent: -9999em;
-webkit-transform: translateY(-4px) translateZ(0) scale(0.5);
-ms-transform: translateY(-4px) translateZ(0) scale(0.5);
transform: translateY(-4px) translateZ(0) scale(0.5);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: "";
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
.loading + .loader,
.loading + .loader:before,
.loading + .loader:after {
display: block;
}
.loading {
display: none;
}
================================================
FILE: src/demo/css/style.css
================================================
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
:root {
--background: #eee;
--card-background: white;
--text: #1a1a1a;
--border: #ccc;
--stroke: #a9a9a9;
--blue-light: #2196f3;
--blue-dark: #1e88e5;
--button-outline: black;
--red: #ff6464;
--red-alt: #e45353;
}
[data-theme="dark"] {
--background: #090d13;
--card-background: #0d1117;
--text: #efefef;
--border: #2a2e34;
--stroke: #737373;
--blue-light: #1976d2;
--blue-dark: #1565c0;
--button-outline: black;
--red: #ff6464;
--red-alt: #e45353;
}
body {
background: var(--background);
font-family: "Open Sans", Roboto, Arial, sans-serif;
padding-top: 10px;
color: var(--text);
}
.github {
text-align: center;
margin-bottom: 12px;
}
.github span {
margin: 0 2px;
}
.container {
margin: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.properties,
.output {
max-width: 550px;
margin: 10px;
background: var(--card-background);
padding: 25px;
padding-top: 0;
border: 1px solid var(--border);
border-radius: 6px;
}
@media only screen and (max-width: 1024px) {
.properties,
.output {
width: 100%;
}
}
h1 {
text-align: center;
}
h2 {
border-bottom: 1px solid var(--stroke);
}
:not(.btn):focus {
outline: var(--blue-light) auto 2px;
}
.btn {
max-width: 100%;
background-color: var(--blue-light);
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 0.2s ease-in-out;
}
.btn:focus {
outline: var(--button-outline) auto 2px;
}
.btn:not(:disabled):hover {
background-color: var(--blue-dark);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn:disabled {
opacity: 0.8;
box-shadow: none;
cursor: not-allowed;
}
.parameters {
margin: auto;
display: grid;
align-items: center;
justify-content: start;
text-align: left;
grid-gap: 8px;
}
.two-columns {
grid-template-columns: auto 1fr;
}
.three-columns {
grid-template-columns: auto 1fr auto;
}
.parameters .btn {
margin-top: 8px;
}
.parameters input[type="text"],
.parameters input[type="number"],
.parameters input.jscolor,
.parameters select {
padding: 10px 14px;
display: inline-block;
border: 1px solid var(--border);
border-radius: 6px;
box-sizing: border-box;
font-family: inherit;
background: var(--card-background);
width: 100%;
min-width: 70px;
color: inherit;
}
.param.inline {
max-width: 54px;
padding: 10px 6px !important;
}
.parameters input.jscolor {
font-size: 12px;
max-width: 218px;
}
@media only screen and (max-width: 1024px) {
.parameters input.jscolor {
max-width: none;
}
}
.parameters select {
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
}
[data-theme="dark"] .parameters select {
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
span[title="required"] {
color: var(--red);
}
input:invalid {
outline: 2px var(--red) auto;
}
input:focus:invalid {
outline: none;
box-shadow: 0 0 0 1px var(--blue-light), 0 0 0 3px var(--red);
}
.delete-line.btn {
margin: 0;
background: inherit;
color: inherit;
font-size: 22px;
padding: 0;
height: 40px;
width: 40px;
background: var(--card-background);
color: var(--red-alt);
box-shadow: none;
}
.delete-line.btn:not(:disabled):hover {
box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
background: #e4535314;
}
.delete-line.btn:disabled {
color: var(--stroke);
}
.add-line.btn {
width: 100px;
font-size: 1em;
padding: 6px 0;
margin-top: 0.8em;
}
.output img {
max-width: 100%;
}
.output img.outlined {
border: 1px dashed var(--red);
border-radius: 2px;
}
.output .code-container {
background: var(--border);
border-radius: 6px;
padding: 12px 16px;
word-break: break-all;
}
.output .btn {
margin-top: 16px;
}
label.show-border {
display: block;
margin-top: 8px;
}
.label-group {
display: flex;
gap: 0.5rem;
}
a.icon {
color: var(--blue-light);
}
.top-bottom-split {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* tooltips */
.tooltip {
display: inline-flex;
justify-content: center;
align-items: center;
}
/* tooltip bubble */
.tooltip:before {
content: attr(title);
position: absolute;
transform: translateY(-2.45rem);
height: auto;
width: auto;
background: #4a4a4afa;
border-radius: 4px;
color: white;
line-height: 30px;
font-size: 1em;
padding: 0 12px;
pointer-events: none;
opacity: 0;
}
/* tooltip bottom triangle */
.tooltip:after {
content: "";
position: absolute;
transform: translateY(-1.35rem);
border-style: solid;
border-color: #4a4a4afa transparent transparent transparent;
pointer-events: none;
opacity: 0;
}
/* show tooltip on hover */
.tooltip[title]:hover:before,
.tooltip[title]:hover:after,
.tooltip:disabled:hover:before,
.tooltip:disabled:hover:after {
transition: 0.2s ease-in opacity;
opacity: 1;
}
.tooltip:disabled:before {
content: "You must first input valid text.";
}
/* link underline effect */
a.underline-hover {
position: relative;
text-decoration: none;
color: var(--text);
margin-top: 2em;
display: inline-flex;
align-items: center;
gap: 0.25em;
}
.underline-hover::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 1px;
background-color: var(--blue-light);
transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) and (pointer: fine) {
.underline-hover:hover::before {
left: 0;
right: auto;
width: 100%;
}
}
================================================
FILE: src/demo/css/toggle-dark.css
================================================
a.darkmode {
position: fixed;
top: 2em;
right: 2em;
color: var(--text);
background: var(--background);
height: 3em;
width: 3em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 2px solid var(--border);
box-shadow: 0 0 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
transition: 0.2s ease-in box-shadow;
}
a.darkmode .icon-moon,
a.darkmode .icon-sun {
position: absolute;
width: 1.25em;
height: 1.25em;
}
a.darkmode .icon-moon svg,
a.darkmode .icon-sun svg {
width: 100%;
height: 100%;
}
a.darkmode .icon-moon {
display: block;
}
a.darkmode .icon-sun {
display: none;
}
[data-theme="dark"] a.darkmode .icon-moon {
display: none;
}
[data-theme="dark"] a.darkmode .icon-sun {
display: block;
}
a.darkmode:hover {
box-shadow: 0 0 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
}
@media only screen and (max-width: 600px) {
a.darkmode {
top: unset;
bottom: 1em;
right: 1em;
}
}
================================================
FILE: src/demo/index.php
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-48CYVH0XEF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-48CYVH0XEF');
</script>
<title>Readme Typing SVG - Demo Site</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/loader.css">
<link rel="stylesheet" href="./css/toggle-dark.css">
<script type="text/javascript" src="./js/script.js" defer></script>
<script type="text/javascript" src="./js/toggle-dark.js" defer></script>
<script type="text/javascript" src="./js/jscolor.min.js" defer></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body <?= isset($_COOKIE["darkmode"]) && $_COOKIE["darkmode"] == "on" ? 'data-theme="dark"' : "" ?>>
<h1>⌨️ Readme Typing SVG</h1>
<!-- GitHub badges/links section -->
<div class="github">
<!-- GitHub Sponsors -->
<a class="github-button" href="https://github.com/sponsors/denvercoder1" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @denvercoder1 on GitHub">Sponsor</a>
<!-- View on GitHub -->
<a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" aria-label="View denvercoder1/readme-typing-svg on GitHub">View on GitHub</a>
<!-- GitHub Star -->
<a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star denvercoder1/readme-typing-svg on GitHub">Star</a>
</div>
<div class="container">
<div class="properties">
<h2>Add your text</h2>
<form class="parameters three-columns lines">
<!-- Lines are added in JavaScript -->
</form>
<button class="add-line btn" onclick="return preview.addLines(1);">+ Add line</button>
<h2>Options</h2>
<form class="parameters two-columns options">
<div class="label-group">
<label for="font">Font</label>
<a href="https://fonts.google.com/" target="_blank" class="icon tooltip" title="Enter a font name from Google Fonts">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6C9.831 6 8.066 7.765 8.066 9.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626-.255.207-.496.404-.691.599C11.029 13.156 11 14.215 11 14.333V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182C15.934 7.765 14.169 6 12 6zM11 16H13V18H11z"></path>
<path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M12,20c-4.411,0-8-3.589-8-8s3.589-8,8-8 s8,3.589,8,8S16.411,20,12,20z"></path>
</svg>
</a>
</div>
<input class="param" type="text" id="font" name="font" alt="Font name" placeholder="Fira Code" value="Fira Code" pattern="^[A-Za-z0-9\- ]*$" title="Font from Google Fonts. Only letters, numbers, and spaces.">
<label for="weight">Font weight</label>
<input class="param" type="number" id="weight" name="weight" alt="Font weight" placeholder="400" value="400" min="100" max="900" step="100">
<label for="size">Font size</label>
<input class="param" type="number" id="size" name="size" alt="Font size" placeholder="20" value="20">
<div class="label-group">
<label for="letterSpacing">Letter spacing</label>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing" target="_blank" class="icon tooltip" title="Enter any css value for the letter-spacing property">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6C9.831 6 8.066 7.765 8.066 9.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626-.255.207-.496.404-.691.599C11.029 13.156 11 14.215 11 14.333V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182C15.934 7.765 14.169 6 12 6zM11 16H13V18H11z"></path>
<path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M12,20c-4.411,0-8-3.589-8-8s3.589-8,8-8 s8,3.589,8,8S16.411,20,12,20z"></path>
</svg>
</a>
</div>
<input class="param" type="text" id="letterSpacing" name="letterSpacing" alt="Letter spacing" placeholder="normal" value="normal">
<label for="duration">Duration (ms per line)</label>
<input class="param" type="number" id="duration" name="duration" alt="Print duration (ms)" placeholder="5000" value="5000">
<label for="pause">Pause (ms after line)</label>
<input class="param" type="number" id="pause" name="pause" alt="Pause duration (ms)" placeholder="1000" value="1000">
<label for="color">Font color</label>
<input class="param jscolor jscolor-active" id="color" name="color" alt="Font color" data-jscolor="{ format: 'hexa' }" value="#36BCF7">
<label for="background">Background color</label>
<input class="param jscolor jscolor-active" id="background" name="background" alt="Background color" data-jscolor="{ format: 'hexa' }" value="#00000000">
<label for="center">Horizontally Centered</label>
<select class="param" id="center" name="center" alt="Horizontally Centered">
<option value="false">false</option>
<option value="true">true</option>
</select>
<label for="vCenter">Vertically Centered</label>
<select class="param" id="vCenter" name="vCenter" alt="Vertically Centered">
<option value="false">false</option>
<option value="true">true</option>
</select>
<label for="multiline">Multiline</label>
<select class="param" id="multiline" name="multiline" alt="Multiline">
<option value="false">Type sentences on one line</option>
<option value="true">Each sentence on a new line</option>
</select>
<label for="repeat">Repeat</label>
<select class="param" id="repeat" name="repeat" alt="Repeat">
<option value="true">true</option>
<option value="false">false</option>
</select>
<label for="random">Random</label>
<select class="param" id="random" name="random" alt="Random">
<option value="false">false</option>
<option value="true">true</option>
</select>
<label for="dimensions" title="Width ✕ Height">Width ✕ Height</label>
<span id="dimensions">
<input class="param inline" type="number" id="width" name="width" alt="Width (px)" placeholder="435" value="435">
<label>✕</label>
<input class="param inline" type="number" id="height" name="height" alt="Height (px)" placeholder="50" value="50">
</span>
<input type="button" class="btn" value="Reset" onclick="preview.reset();">
<button type="button" class="copy-button btn tooltip" onclick="clipboard.copyPermalink(this);" onmouseout="tooltip.reset(this);" disabled>Copy Permalink</button>
</form>
</div>
<div class="output top-bottom-split">
<div class="top">
<h2>Preview</h2>
<img alt="Readme Typing SVG" src="/?lines=The+five+boxing+wizards+jump+quickly" onload="this.classList.remove('loading')" onerror="this.classList.remove('loading')" />
<div class="loader">Loading...</div>
<label class="show-border">
<input type="checkbox">
Show border
</label>
<div>
<h2>Markdown</h2>
<div class="code-container md">
<code></code>
</div>
<button class="copy-button btn tooltip" onclick="clipboard.copyCode(this);" onmouseout="tooltip.reset(this);" disabled>
Copy To Clipboard
</button>
</div>
<div>
<h2>HTML</h2>
<div class="code-container html">
<code></code>
</div>
<button class="copy-button btn tooltip" onclick="clipboard.copyCode(this);" onmouseout="tooltip.reset(this);" disabled>
Copy To Clipboard
</button>
</div>
</div>
<div class="bottom">
<a href="https://github.com/DenverCoder1/readme-typing-svg/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
Frequently Asked Questions
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z"></path>
</g>
</svg>
</a>
</div>
</div>
</div>
<a href="javascript:toggleTheme()" class="darkmode" title="toggle dark mode" aria-label="Toggle dark mode">
<span class="icon-moon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</span>
<span class="icon-sun" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</span>
</a>
</body>
</html>
================================================
FILE: src/demo/js/script.js
================================================
const preview = {
// default values for Readme Typing SVG parameters
defaults: {
font: "monospace",
weight: "400",
color: "36BCF7",
background: "00000000",
size: "20",
letterSpacing: "normal",
center: "false",
vCenter: "false",
multiline: "false",
width: "400",
height: "50",
duration: "5000",
pause: "0",
repeat: "true",
random: "false",
separator: ";",
},
// input field initial values that differ from the defaults
overrides: {
font: "Fira Code",
pause: "1000",
width: "435",
},
// dummy text for default line values
dummyText: [
"The five boxing wizards jump quickly",
"How vexingly quick daft zebras jump",
"Quick fox jumps nightly above wizard",
"Sphinx of black quartz, judge my vow",
"Waltz, bad nymph, for quick jigs vex",
"Glib jocks quiz nymph to vex dwarf",
"Jived fox nymph grabs quick waltz",
],
/**
* Get the current parameters from the form
* @returns {object} The current parameters
*/
getParams() {
// get all parameters from the .param fields
const params = Array.from(document.querySelectorAll(".param:not([data-index])")).reduce((acc, next) => {
// copy accumulator into local object
let obj = acc;
let value = next.value;
// remove hash from any colors and remove "FF" if full opacity
value = value.replace(/^#([A-Fa-f0-9]{6})(?:[Ff]{2})?/, "$1");
// add value to reduction accumulator
obj[next.id] = value;
return obj;
}, {});
// add lines to parameters
const lineInputs = Array.from(document.querySelectorAll(".param[data-index]"));
/**
* Merge an array of lines with a given separator
* @param {array<HTMLInputElement>} lines The line input fields to merge
* @param {string} separator The separator to insert between lines
* @returns The merged lines parameter string
*/
const mergeLines = function (lines, separator) {
return lines
.map((el) => el.value) // get values
.filter((val) => val.length) // skip blank entries
.join(separator); // join lines with separator
};
// change separator if it's included in the lines
params.separator = ";";
while (mergeLines(lineInputs, "").indexOf(params.separator) >= 0) {
// change last character to next ascii character (';' through '@'), otherwise add a semicolon
if (params.separator.charCodeAt(params.separator.length - 1) < "@".charCodeAt(0)) {
params.separator =
params.separator.slice(0, -1) +
String.fromCharCode(params.separator.charCodeAt(params.separator.length - 1) + 1);
} else {
params.separator += ";";
}
}
params.lines = mergeLines(lineInputs, params.separator);
return params;
},
/**
* Update the preview image and markdown
*/
update() {
const copyButtons = document.querySelectorAll(".copy-button");
// get parameter values
const params = this.getParams();
// convert parameters to query string
const query = Object.keys(params)
.filter((key) => params[key] !== this.defaults[key]) // skip if default value
.map((key) => this.customEncode(key) + "=" + this.customEncode(params[key])) // encode keys and values
.join("&"); // join lines with '&' delimiter
// generate links and markdown
const imageURL = `${window.location.origin}?${query}`;
const demoImageURL = `/?${query}`;
const repoLink = "https://git.io/typing-svg";
const md = `[](${repoLink})`;
const html = `<a href="${repoLink}"><img src="${imageURL}" alt="Typing SVG" /></a>`;
// don't update if nothing has changed
const mdElement = document.querySelector(".md code");
const htmlElement = document.querySelector(".html code");
const image = document.querySelector(".output img");
if (mdElement.innerText === md) {
return;
}
// update image preview
image.src = demoImageURL;
image.classList.add("loading");
// update markdown and html
mdElement.innerText = md;
htmlElement.innerText = html;
// disable copy button if no lines are filled in
copyButtons.forEach((el) => (el.disabled = !params.lines.length));
// update URL to match parameters
this.openPermalink();
},
/**
* Encode a string for use in a URL but keep semicolons as ';' and spaces as '+'
* @param {string} str The string to encode
* @returns The encoded string
*/
customEncode(str) {
return encodeURIComponent(str).replace(/%3B/g, ";").replace(/%20/g, "+");
},
/**
* Add new line input fields
* @param {number} count The number of lines to add
* @returns {false} Always returns false to prevent form submission
*/
addLines(count) {
for (let i = 0; i < count; i++) {
const parent = document.querySelector(".lines");
const index = parent.querySelectorAll("input").length + 1;
// label
const label = document.createElement("label");
label.innerText = `Line ${index}`;
label.setAttribute("for", `line-${index}`);
label.dataset.index = index;
// line input box
const input = document.createElement("input");
input.className = "param";
input.type = "text";
input.id = `line-${index}`;
input.name = `line-${index}`;
input.placeholder = "Enter text here";
input.value = this.dummyText[(index - 1) % this.dummyText.length];
input.dataset.index = index;
// removal button
const deleteButton = document.createElement("button");
deleteButton.className = "delete-line btn";
deleteButton.setAttribute("onclick", "return preview.removeLine(this.dataset.index);");
deleteButton.innerHTML =
'<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="0.85em" width="0.85em" xmlns="http://www.w3.org/2000/svg"> <path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"> </path> </svg>';
deleteButton.dataset.index = index;
// add elements
parent.appendChild(label);
parent.appendChild(input);
parent.appendChild(deleteButton);
// disable button if only 1
parent.querySelector(".delete-line.btn").disabled = index == 1;
}
// update and exit
this.update();
return false;
},
/**
* Remove a line input field
* @param {number} index The index of the line to remove
* @returns {false} Always returns false to prevent form submission
*/
removeLine(index) {
index = Number(index);
const parent = document.querySelector(".lines");
// remove all elements for given property
parent.querySelectorAll(`[data-index="${index}"]`).forEach((el) => {
parent.removeChild(el);
});
// update index numbers
const labels = parent.querySelectorAll("label");
labels.forEach((label) => {
const labelIndex = Number(label.dataset.index);
if (labelIndex > index) {
label.dataset.index = labelIndex - 1;
label.setAttribute("for", `line-${labelIndex - 1}`);
label.innerText = `Line ${labelIndex - 1}`;
}
});
const inputs = parent.querySelectorAll(".param");
inputs.forEach((input) => {
const inputIndex = Number(input.dataset.index);
if (inputIndex > index) {
input.dataset.index = inputIndex - 1;
input.setAttribute("id", `line-${inputIndex - 1}`);
input.setAttribute("name", `line-${inputIndex - 1}`);
}
});
const buttons = parent.querySelectorAll(".delete-line.btn");
buttons.forEach((button) => {
const buttonIndex = Number(button.dataset.index);
if (buttonIndex > index) {
button.dataset.index = buttonIndex - 1;
}
});
// disable button if only 1
buttons[0].disabled = buttons.length == 1;
// update and exit
this.update();
return false;
},
/**
* Reset all input fields to their initial values
* @returns {false} Always returns false to prevent form submission
*/
reset() {
// reset all inputs
const inputs = document.querySelectorAll(".param");
inputs.forEach((input) => {
let value = this.overrides[input.name] || this.defaults[input.name];
if (value) {
if (["color", "background"].includes(input.name)) {
input.jscolor.fromString(value);
} else {
input.value = value;
}
}
});
},
/**
* Get the current parameters in a permalink format
* @returns {string} The permalink URL
*/
getPermalink() {
// get parameters from form
const params = this.getParams();
// convert parameters to query string
const defaultInputs = { ...this.defaults, ...this.overrides };
defaultInputs.lines = this.dummyText[0];
const query = Object.keys(params)
.filter((key) => params[key] !== defaultInputs[key]) // skip if default value
.map((key) => this.customEncode(key) + "=" + this.customEncode(params[key])) // encode keys and values
.join("&"); // join lines with '&' delimiter
// return permalink
return `${window.location.origin}${window.location.pathname}` + (query ? `?${query}` : "");
},
/**
* Save the current parameters to the URL
*/
openPermalink() {
window.history.replaceState({}, "", this.getPermalink());
},
/**
* Restore the last saved parameters from the URL
*/
restore() {
// get parameters from URL
const urlParams = new URLSearchParams(window.location.search);
const params = { ...this.defaults, ...this.overrides, ...Object.fromEntries(urlParams) };
// set all parameters
const inputs = document.querySelectorAll(".param");
inputs.forEach((input) => {
let value = params[input.name];
if (value) {
if (["color", "background"].includes(input.name)) {
input.jscolor.fromString(value);
} else {
input.value = value;
}
}
});
// add lines
const lines = params.lines || this.dummyText[0];
const lineInputs = lines.split(params.separator);
this.addLines(lineInputs.length);
lineInputs.forEach((line, index) => {
document.querySelector(`#line-${index + 1}`).value = line;
});
},
};
const clipboard = {
/**
* Copy text to the clipboard
* @param {HTMLElement} btn The element that was clicked
* @param {String} text The text to copy
*/
copy(btn, text) {
navigator.clipboard.writeText(text).then(() => {
// set tooltip text
btn.title = "Copied!";
});
},
/**
* Copy the text from a code block to the clipboard
* @param {HTMLElement} btn The element that was clicked
*/
copyCode(btn) {
this.copy(btn, btn.parentElement.querySelector("code").innerText);
},
/**
* Copy the permalink to the clipboard
* @param {HTMLElement} btn The element that was clicked
*/
copyPermalink(btn) {
this.copy(btn, preview.getPermalink());
},
};
const tooltip = {
/**
* Reset the tooltip text
* @param {HTMLElement} el The element that was clicked
*/
reset(el) {
// remove tooltip text
el.removeAttribute("title");
},
};
// refresh preview on interactions with the page
document.addEventListener("keyup", () => preview.update(), false);
document.addEventListener("click", () => preview.update(), false);
// checkbox listener
document.querySelector(".show-border input").addEventListener("change", function () {
const img = document.querySelector(".output img");
this.checked ? img.classList.add("outlined") : img.classList.remove("outlined");
});
// when the page loads
window.addEventListener(
"load",
() => {
preview.restore(); // restore parameters
preview.update(); // update preview
},
false
);
================================================
FILE: src/demo/js/toggle-dark.js
================================================
// enable dark mode on load if user prefers dark themes and has not used the toggle
getCookie("darkmode") === null && window.matchMedia("(prefers-color-scheme: dark)").matches && darkmode();
function toggleTheme() {
// turn on dark mode
if (document.body.getAttribute("data-theme") !== "dark") {
darkmode();
}
// turn off dark mode
else {
lightmode();
}
}
function darkmode() {
setCookie("darkmode", "on", 9999);
document.body.setAttribute("data-theme", "dark");
}
function lightmode() {
setCookie("darkmode", "off", 9999);
document.body.removeAttribute("data-theme");
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return decodeURI(dc.substring(begin + prefix.length, end));
}
================================================
FILE: src/enums/ResponseEnum.php
================================================
<?php
/**
* Enumeration of HTTP response status codes.
*
* This enum represents the standard HTTP response status codes
* defined by the Internet Assigned Numbers Authority (IANA) in
* the Hypertext Transfer Protocol (HTTP) status code registry.
* Each status code is associated with an integer value and a
* descriptive name.
*
* Usage example:
* if (ResponseEnum::HTTP_OK->value === 200) {
* echo "Request was successful.";
* }
*/
enum ResponseEnum: int
{
// 1xx: Informational
case HTTP_CONTINUE = 100;
case HTTP_SWITCHING_PROTOCOLS = 101;
case HTTP_PROCESSING = 102;
// 2xx: Success
case HTTP_OK = 200;
case HTTP_CREATED = 201;
case HTTP_ACCEPTED = 202;
case HTTP_NON_AUTHORITATIVE_INFORMATION = 203;
case HTTP_NO_CONTENT = 204;
case HTTP_RESET_CONTENT = 205;
case HTTP_PARTIAL_CONTENT = 206;
case HTTP_MULTI_STATUS = 207;
case HTTP_ALREADY_REPORTED = 208;
case HTTP_IM_USED = 226;
// 3xx: Redirection
case HTTP_MULTIPLE_CHOICES = 300;
case HTTP_MOVED_PERMANENTLY = 301;
case HTTP_FOUND = 302;
case HTTP_SEE_OTHER = 303;
case HTTP_NOT_MODIFIED = 304;
case HTTP_USE_PROXY = 305;
case HTTP_SWITCH_PROXY = 306; // No longer used
case HTTP_TEMPORARY_REDIRECT = 307;
case HTTP_PERMANENT_REDIRECT = 308;
// 4xx: Client Error
case HTTP_BAD_REQUEST = 400;
case HTTP_UNAUTHORIZED = 401;
case HTTP_PAYMENT_REQUIRED = 402;
case HTTP_FORBIDDEN = 403;
case HTTP_NOT_FOUND = 404;
case HTTP_METHOD_NOT_ALLOWED = 405;
case HTTP_NOT_ACCEPTABLE = 406;
case HTTP_PROXY_AUTHENTICATION_REQUIRED = 407;
case HTTP_REQUEST_TIMEOUT = 408;
case HTTP_CONFLICT = 409;
case HTTP_GONE = 410;
case HTTP_LENGTH_REQUIRED = 411;
case HTTP_PRECONDITION_FAILED = 412;
case HTTP_PAYLOAD_TOO_LARGE = 413;
case HTTP_URI_TOO_LONG = 414;
case HTTP_UNSUPPORTED_MEDIA_TYPE = 415;
case HTTP_RANGE_NOT_SATISFIABLE = 416;
case HTTP_EXPECTATION_FAILED = 417;
case HTTP_IM_A_TEAPOT = 418;
case HTTP_MISDIRECTED_REQUEST = 421;
case HTTP_UNPROCESSABLE_ENTITY = 422;
case HTTP_LOCKED = 423;
case HTTP_FAILED_DEPENDENCY = 424;
case HTTP_TOO_EARLY = 425;
case HTTP_UPGRADE_REQUIRED = 426;
case HTTP_PRECONDITION_REQUIRED = 428;
case HTTP_TOO_MANY_REQUESTS = 429;
case HTTP_REQUEST_HEADER_FIELDS_TOO_LARGE = 431;
case HTTP_UNAVAILABLE_FOR_LEGAL_REASONS = 451;
// 5xx: Server Error
case HTTP_INTERNAL_SERVER_ERROR = 500;
case HTTP_NOT_IMPLEMENTED = 501;
case HTTP_BAD_GATEWAY = 502;
case HTTP_SERVICE_UNAVAILABLE = 503;
case HTTP_GATEWAY_TIMEOUT = 504;
case HTTP_HTTP_VERSION_NOT_SUPPORTED = 505;
case HTTP_VARIANT_ALSO_NEGOTIATES = 506;
case HTTP_INSUFFICIENT_STORAGE = 507;
case HTTP_LOOP_DETECTED = 508;
case HTTP_NOT_EXTENDED = 510;
case HTTP_NETWORK_AUTHENTICATION_REQUIRED = 511;
}
================================================
FILE: src/exceptions/UnprocessableEntityException.php
================================================
<?php
class UnprocessableEntityException extends InvalidArgumentException implements IStatusException
{
public function getStatus(): ResponseEnum
{
return ResponseEnum::HTTP_UNPROCESSABLE_ENTITY;
}
}
================================================
FILE: src/index.php
================================================
<?php declare(strict_types=1);
require "../vendor/autoload.php";
// load environment variables if .env exists
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->safeLoad();
$controller = new RendererController($_REQUEST);
$controller->setHeaders();
echo $controller->render();
================================================
FILE: src/interfaces/IStatusException.php
================================================
<?php
interface IStatusException
{
public function getStatus(): ResponseEnum;
}
================================================
FILE: src/models/ErrorModel.php
================================================
<?php declare(strict_types=1);
/**
* Model for error messages
*/
class ErrorModel
{
/** @var string $message Text to display */
public string $message;
/** @var string $template Path to template file */
public string $template;
/**
* Construct ErrorModel
*
* @param string $message Text to display
* @param string $template Path to the template file
*/
public function __construct(string $template, string $message)
{
$this->message = $message;
$this->template = $template;
}
}
================================================
FILE: src/models/GoogleFontConverter.php
================================================
<?php
declare(strict_types=1);
/**
* Class for converting Google Fonts to base 64 for displaying through SVG image
*/
class GoogleFontConverter
{
/**
* Fetch CSS from Google Fonts
*
* @param string $font Google Font to fetch
* @param string $text Text to display in font
* @return string The CSS for displaying the font
*/
public static function fetchFontCSS($font, $weight, $text): string
{
$url =
"https://fonts.googleapis.com/css2?" .
http_build_query([
"family" => $font . ":wght@" . $weight,
"text" => $text,
"display" => "fallback",
]);
try {
// get the CSS for the font
$response = self::curlGetContents($url);
// find all font files and convert them to base64 Data URIs
return self::encodeFonts($response);
} catch (InvalidArgumentException $error) {
return "";
}
}
/**
* Encode font urls in string as base 64
*
* @param string $css The CSS from Google Fonts
* @return string CSS with urls replaced with base 64 Data URIs
*/
private static function encodeFonts($css)
{
$urlRegex = '/\((https\:\/\/fonts\.gstatic\.com.+?)\) format\(\'(.*?)\'\)/';
preg_match_all($urlRegex, $css, $matches);
$urls = array_combine($matches[1], $matches[2]);
// go over all links and replace with data URI
foreach ($urls as $url => $fontType) {
$response = self::curlGetContents($url);
$dataURI = "data:font/{$fontType};base64," . base64_encode($response);
$css = str_replace($url, $dataURI, $css);
}
return $css;
}
/**
* Get the contents of a URL
*
* @param string $url The URL to fetch
* @return string Response from URL
*/
private static function curlGetContents($url): string
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_AUTOREFERER, true);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_VERBOSE, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode != ResponseEnum::HTTP_OK->value) {
throw new InvalidArgumentException("Failed to fetch Google Font from API.");
}
return $response;
}
}
================================================
FILE: src/models/RendererModel.php
================================================
<?php
declare(strict_types=1);
/**
* Model for SVG outputs
*/
class RendererModel
{
/** @var array<string> $lines text to display */
public $lines;
/** @var string $font Font family */
public $font;
/** @var string $font Font weight */
public $weight;
/** @var string $color Font color */
public $color;
/** @var string $background Background color */
public $background;
/** @var int $size Font size */
public $size;
/** @var bool $center Whether or not to center text horizontally */
public $center;
/** @var bool $vCenter Whether or not to center text vertically */
public $vCenter;
/** @var int $width SVG width (px) */
public $width;
/** @var int $height SVG height (px) */
public $height;
/** @var bool $multiline True = wrap to new lines, False = retype on same line */
public $multiline;
/** @var int $duration print duration in milliseconds */
public $duration;
/** @var int $pause pause duration between lines in milliseconds */
public $pause;
/** @var bool $repeat Whether to loop around to the first line after the last */
public $repeat;
/** @var string $separator Line separator */
public $separator;
/** @var bool $random True = Sort lines in random order */
public $random;
/** @var string $fontCSS CSS required for displaying the selected font */
public $fontCSS;
/** @var string $letterSpacing Letter spacing */
public $letterSpacing;
/** @var string $template Path to template file */
public $template;
/** @var array<string, string> $DEFAULTS */
private $DEFAULTS = [
"font" => "monospace",
"weight" => "400",
"color" => "#36BCF7",
"background" => "#00000000",
"size" => "20",
"center" => "false",
"vCenter" => "false",
"width" => "400",
"height" => "50",
"multiline" => "false",
"duration" => "5000",
"pause" => "0",
"repeat" => "true",
"separator" => ";",
"random" => "false",
"letterSpacing" => "normal",
];
/**
* Construct RendererModel
*
* @param string $template Path to the template file
* @param array<string, string> $params request parameters
*/
public function __construct($template, $params)
{
$this->template = $template;
$this->separator = $params["separator"] ?? $this->DEFAULTS["separator"];
$this->random = $this->checkBoolean($params["random"] ?? $this->DEFAULTS["random"]);
$this->lines = $this->checkLines($params["lines"] ?? "");
$this->font = $this->checkFont($params["font"] ?? $this->DEFAULTS["font"]);
$this->weight = $this->checkNumberPositive($params["weight"] ?? $this->DEFAULTS["weight"], "Font weight");
$this->color = $this->checkColor($params["color"] ?? $this->DEFAULTS["color"], "color");
$this->background = $this->checkColor($params["background"] ?? $this->DEFAULTS["background"], "background");
$this->size = $this->checkNumberPositive($params["size"] ?? $this->DEFAULTS["size"], "Font size");
$this->center = $this->checkBoolean($params["center"] ?? $this->DEFAULTS["center"]);
$this->vCenter = $this->checkBoolean($params["vCenter"] ?? $this->DEFAULTS["vCenter"]);
$this->width = $this->checkNumberPositive($params["width"] ?? $this->DEFAULTS["width"], "Width");
$this->height = $this->checkNumberPositive($params["height"] ?? $this->DEFAULTS["height"], "Height");
$this->multiline = $this->checkBoolean($params["multiline"] ?? $this->DEFAULTS["multiline"]);
$this->duration = $this->checkNumberPositive($params["duration"] ?? $this->DEFAULTS["duration"], "duration");
$this->pause = $this->checkNumberNonNegative($params["pause"] ?? $this->DEFAULTS["pause"], "pause");
$this->repeat = $this->checkBoolean($params["repeat"] ?? $this->DEFAULTS["repeat"]);
$this->fontCSS = $this->fetchFontCSS($this->font, $this->weight, $params["lines"]);
$this->letterSpacing = $this->checkLetterSpacing($params["letterSpacing"] ?? $this->DEFAULTS["letterSpacing"]);
}
/**
* Validate lines and return array of string
*
* @param string $lines Semicolon-separated lines parameter
* @return array<string> escaped array of lines
*/
private function checkLines($lines)
{
if (!$lines) {
throw new UnprocessableEntityException("Lines parameter must be set.");
}
if (strlen($this->separator) === 1) {
$lines = rtrim($lines, $this->separator);
}
$exploded = explode($this->separator, $lines);
if ($this->random) {
shuffle($exploded);
}
// escape special characters to prevent code injection
return array_map("htmlspecialchars", $exploded);
}
/**
* Validate font family and return valid string
*
* @param string $font Font name parameter
* @return string Sanitized font name
*/
private function checkFont($font)
{
// return sanitized font name
return preg_replace("/[^0-9A-Za-z\- ]/", "", $font);
}
/**
* Validate font color and return valid string
*
* @param string $color Color parameter
* @param string $field Field name for displaying in case of error
* @return string Sanitized color with preceding hash symbol
*/
private function checkColor($color, $field)
{
$sanitized = (string) preg_replace("/[^0-9A-Fa-f]/", "", $color);
// if color is not a valid length, use the default
if (!in_array(strlen($sanitized), [3, 4, 6, 8])) {
return $this->DEFAULTS[$field];
}
// return sanitized color
return "#" . $sanitized;
}
/**
* Validate positive numeric parameter and return valid integer
*
* @param string $num Parameter to validate
* @param string $field Field name for displaying in case of error
* @return int Sanitized digits and int
*/
private function checkNumberPositive($num, $field)
{
$digits = intval(preg_replace("/[^0-9\-]/", "", $num));
if ($digits <= 0) {
throw new UnprocessableEntityException("$field must be a positive number.");
}
return $digits;
}
/**
* Validate non-negative numeric parameter and return valid integer
*
* @param string $num Parameter to validate
* @param string $field Field name for displaying in case of error
* @return int Sanitized digits and int
*/
private function checkNumberNonNegative($num, $field)
{
$digits = intval(preg_replace("/[^0-9\-]/", "", $num));
if ($digits < 0) {
throw new UnprocessableEntityException("$field must be a non-negative number.");
}
return $digits;
}
/**
* Validate "true" or "false" value as string and return boolean
*
* @param string $bool Boolean parameter as string
* @return boolean Whether or not $bool is set to "true"
*/
private function checkBoolean($bool)
{
return strtolower($bool) == "true";
}
/**
* Fetch CSS with Base-64 encoding from Google Fonts
*
* @param string $font Google Font to fetch
* @param string $text Text to display in font
* @return string The CSS for displaying the font
*/
private function fetchFontCSS($font, $weight, $text)
{
// skip checking if left as default
if ($font != $this->DEFAULTS["font"]) {
// fetch and convert from Google Fonts
$from_google_fonts = GoogleFontConverter::fetchFontCSS($font, $weight, $text);
if ($from_google_fonts) {
// return the CSS for displaying the font
return "<style>\n{$from_google_fonts}</style>\n";
}
}
// font is not found
return "";
}
/**
* Validate unit for size properties
*
* This method validates if the given unit is a valid CSS size unit.
* It supports various units such as px, em, rem, pt, pc, in, cm, mm,
* ex, ch, vh, vw, vmin, vmax, and percentages.
*
* @param string $unit Unit for validation
* @return bool True if valid, false otherwise
*/
private function isValidUnit($unit)
{
return (bool) preg_match("/^(-?\\d+(\\.\\d+)?(px|em|rem|pt|pc|in|cm|mm|ex|ch|vh|vw|vmin|vmax|%))$/", $unit);
}
/**
* Validate letter spacing
*
* This method validates the letter spacing property for fonts.
* It allows specific keywords (normal, inherit, initial, revert, revert-layer, unset)
* and valid CSS size units.
*
* @param string $letterSpacing Letter spacing for validation
* @return string Validated letter spacing
*/
private function checkLetterSpacing($letterSpacing)
{
// List of valid keywords for letter-spacing
$keywords = "normal|inherit|initial|revert|revert-layer|unset";
// Check if the input matches one of the keywords or a valid unit
if (preg_match("/^($keywords)$/", $letterSpacing) || $this->isValidUnit($letterSpacing)) {
return $letterSpacing;
}
// Return the default letter spacing value if the input is invalid
return $this->DEFAULTS["letterSpacing"];
}
}
================================================
FILE: src/templates/error.php
================================================
<!-- https://github.com/DenverCoder1/readme-typing-svg/ -->
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
viewBox='0 0 400 50'
width='400px' height='50px'>
<text font-family='monospace' fill='#c00' font-size='18'
y="50%" x='50%' dominant-baseline='middle' text-anchor='middle'>
<?= $message . "\n" ?>
</text>
</svg>
================================================
FILE: src/templates/main.php
================================================
<!-- https://github.com/DenverCoder1/readme-typing-svg/ -->
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
viewBox='0 0 <?= "$width $height" ?>'
style='background-color: <?= $background ?>;'
width='<?= $width ?>px' height='<?= $height ?>px'>
<?= $fontCSS ?>
<?php $lastLineIndex = count($lines) - 1; ?>
<?php for ($i = 0; $i <= $lastLineIndex; ++$i): ?>
<path id='path<?= $i ?>'>
<?php if (!$multiline): ?>
<!-- Single line -->
<?php
// start after previous line
$begin = "d" . ($i - 1) . ".end";
if ($i == 0) {
// if this is the first line, start at 0 seconds
// and also after the last line if repeat is true
$begin = $repeat ? "0s;d$lastLineIndex.end" : "0s";
}
// don't delete text after typing the last line if repeat is false
$freeze = !$repeat && $i == $lastLineIndex;
// empty line values
$yOffset = $height / 2;
$emptyLine = "m0,$yOffset h0";
$fullLine = "m0,$yOffset h$width";
$values = [$emptyLine, $fullLine, $fullLine, $freeze ? $fullLine : $emptyLine];
// keyTimes for the animation
$keyTimes = [
"0",
(0.8 * $duration) / ($duration + $pause),
(0.8 * $duration + $pause) / ($duration + $pause),
"1",
];
?>
<animate id='d<?= $i ?>' attributeName='d' begin='<?= $begin ?>'
dur='<?= $duration + $pause ?>ms' fill='<?= $freeze ? "freeze" : "remove" ?>'
values='<?= implode(" ; ", $values) ?>' keyTimes='<?= implode(";", $keyTimes) ?>' />
<?php else: ?>
<!-- Multiline -->
<?php
$nextIndex = $i + 1;
$lineHeight = $size + 5;
$lineDuration = ($duration + $pause) * $nextIndex;
$yOffset = $nextIndex * $lineHeight;
$emptyLine = "m0,$yOffset h0";
$fullLine = "m0,$yOffset h$width";
$values = [$emptyLine, $emptyLine, $fullLine, $fullLine];
$keyTimes = ["0", $i / $nextIndex, $i / $nextIndex + $duration / $lineDuration, "1"];
?>
<animate id='d<?= $i ?>' attributeName='d' begin='0s<?= $repeat ? ";d$lastLineIndex.end" : "" ?>'
dur='<?= $lineDuration ?>ms' fill="freeze"
values='<?= implode(" ; ", $values) ?>' keyTimes='<?= implode(";", $keyTimes) ?>' />
<?php endif; ?>
</path>
<text font-family='"<?= $font ?>", monospace' fill='<?= $color ?>' font-size='<?= $size ?>'
dominant-baseline='<?= $vCenter ? "middle" : "auto" ?>'
x='<?= $center ? "50%" : "0%" ?>' text-anchor='<?= $center ? "middle" : "start" ?>'
letter-spacing='<?= $letterSpacing ?>'>
<textPath xlink:href='#path<?= $i ?>'>
<?= $lines[$i] . "\n" ?>
</textPath>
</text>
<?php endfor; ?>
</svg>
================================================
FILE: src/views/ErrorView.php
================================================
<?php declare(strict_types=1);
/**
* View for rendering error messages
*/
class ErrorView
{
/**
* @var ErrorModel $model
*/
private $model;
/**
* Constructor for Error View
* @param ErrorModel $model
*/
public function __construct($model)
{
$this->model = $model;
}
/**
* Render SVG Output
* @return string
*/
public function render()
{
// import variables into symbol table
extract(["message" => $this->model->message]);
// render SVG with output buffering
ob_start();
include $this->model->template;
$output = ob_get_contents();
ob_end_clean();
// return rendered output
return $output;
}
}
================================================
FILE: src/views/RendererView.php
================================================
<?php declare(strict_types=1);
/**
* View for rendering typing SVG
*/
class RendererView
{
/**
* @var RendererModel $model
*/
private $model;
/**
* Constructor for Renderer View
* @param RendererModel $model
*/
public function __construct($model)
{
$this->model = $model;
}
/**
* Render SVG Output
* @return string
*/
public function render()
{
// import variables into symbol table
extract([
"lines" => $this->model->lines,
"font" => $this->model->font,
"color" => $this->model->color,
"background" => $this->model->background,
"size" => $this->model->size,
"center" => $this->model->center,
"vCenter" => $this->model->vCenter,
"width" => $this->model->width,
"height" => $this->model->height,
"multiline" => $this->model->multiline,
"fontCSS" => $this->model->fontCSS,
"duration" => $this->model->duration,
"pause" => $this->model->pause,
"repeat" => $this->model->repeat,
"letterSpacing" => $this->model->letterSpacing,
]);
// render SVG with output buffering
ob_start();
include $this->model->template;
$output = ob_get_contents();
ob_end_clean();
// return rendered output
return $output;
}
}
================================================
FILE: tests/OptionsTest.php
================================================
<?php
declare(strict_types=1);
use PHPUnit\Framework\TestCase;
require "vendor/autoload.php";
final class OptionsTest extends TestCase
{
/**
* Test exception thrown when missing 'lines' parameter
*/
public function testMissingLines(): void
{
$this->expectException("InvalidArgumentException");
$this->expectExceptionMessage("Lines parameter must be set.");
$params = [
"center" => "true",
"width" => "380",
"height" => "50",
];
print_r(new RendererModel("src/templates/main.php", $params));
}
/**
* Test valid font
*/
public function testValidFont(): void
{
$params = [
"lines" => "text",
"font" => "Open Sans",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("Open Sans", $model->font);
}
/**
* Test valid font color
*/
public function testValidFontColor(): void
{
$params = [
"lines" => "text",
"color" => "000000",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("#000000", $model->color);
}
/**
* Test invalid font color
*/
public function testInvalidFontColor(): void
{
$params = [
"lines" => "text",
"color" => "00000",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("#36BCF7", $model->color);
}
/**
* Test valid background color
*/
public function testValidBackgroundColor(): void
{
$params = [
"lines" => "text",
"background" => "00000033",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("#00000033", $model->background);
}
/**
* Test invalid background color
*/
public function testInvalidBackgroundColor(): void
{
$params = [
"lines" => "text",
"background" => "00000",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("#00000000", $model->background);
}
/**
* Test valid font size
*/
public function testValidFontSize(): void
{
$params = [
"lines" => "text",
"size" => "18",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(18, $model->size);
}
/**
* Test exception thrown when font size is invalid
*/
public function testInvalidFontSize(): void
{
$this->expectException("InvalidArgumentException");
$this->expectExceptionMessage("Font size must be a positive number.");
$params = [
"lines" => "text",
"size" => "0",
];
print_r(new RendererModel("src/templates/main.php", $params));
}
/**
* Test valid height
*/
public function testValidHeight(): void
{
$params = [
"lines" => "text",
"height" => "80",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(80, $model->height);
}
/**
* Test exception thrown when height is invalid
*/
public function testInvalidHeight(): void
{
$this->expectException("InvalidArgumentException");
$this->expectExceptionMessage("Height must be a positive number.");
$params = [
"lines" => "text",
"height" => "x",
];
print_r(new RendererModel("src/templates/main.php", $params));
}
/**
* Test valid width
*/
public function testValidWidth(): void
{
$params = [
"lines" => "text",
"width" => "500",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(500, $model->width);
}
/**
* Test exception thrown when width is invalid
*/
public function testInvalidWidth(): void
{
$this->expectException("InvalidArgumentException");
$this->expectExceptionMessage("Width must be a positive number.");
$params = [
"lines" => "text",
"width" => "-1",
];
print_r(new RendererModel("src/templates/main.php", $params));
}
/**
* Test center set to true
*/
public function testCenterIsTrue(): void
{
$params = [
"lines" => "text",
"center" => "true",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(true, $model->center);
}
/**
* Test center not set to true
*/
public function testCenterIsNotTrue(): void
{
$params = [
"lines" => "text",
"center" => "other",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(false, $model->center);
}
/**
* Test vCenter set to true
*/
public function testVCenterIsTrue(): void
{
$params = [
"lines" => "text",
"vCenter" => "true",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(true, $model->vCenter);
}
/**
* Test vCenter not set to true
*/
public function testVCenterIsNotTrue(): void
{
$params = [
"lines" => "text",
"vCenter" => "other",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(false, $model->vCenter);
}
/**
* Test valid duration
*/
public function testValidDuration(): void
{
$params = [
"lines" => "text",
"duration" => "500",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(500, $model->duration);
}
/**
* Test exception thrown when duration is invalid
*/
public function testInvalidDuration(): void
{
$this->expectException("InvalidArgumentException");
$this->expectExceptionMessage("duration must be a positive number.");
$params = [
"lines" => "text",
"duration" => "-1",
];
print_r(new RendererModel("src/templates/main.php", $params));
}
/**
* Test valid pause
*/
public function testValidPause(): void
{
$params = [
"lines" => "text",
"pause" => "500",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(500, $model->pause);
}
/**
* Test valid pause at 0
*/
public function testValidPauseZero(): void
{
$params = [
"lines" => "text",
"pause" => "0",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(0, $model->pause);
}
/**
* Test exception thrown when pause is invalid
*/
public function testInvalidPause(): void
{
$this->expectException("InvalidArgumentException");
$this->expectExceptionMessage("pause must be a non-negative number.");
$params = [
"lines" => "text",
"pause" => "-1",
];
print_r(new RendererModel("src/templates/main.php", $params));
}
/**
* Test repeat set to true, false, other
*/
public function testRepeat(): void
{
// not set
$params = [
"lines" => "text",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(true, $model->repeat);
// true
$params = [
"lines" => "text",
"repeat" => "true",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(true, $model->repeat);
// other / false
$params = [
"lines" => "text",
"repeat" => "other",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(false, $model->repeat);
}
/**
* Test separator set to something other than ";"
*/
public function testSeparator(): void
{
$params = [
"lines" => "text;text2",
"separator" => ";;",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(";;", $model->separator);
$this->assertEquals(["text;text2"], $model->lines);
$params = [
"lines" => "text;;tex;t2",
"separator" => ";;",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(";;", $model->separator);
$this->assertEquals(["text", "tex;t2"], $model->lines);
}
/**
* Test random order
*/
public function testRandom(): void
{
// not set
$params = [
"lines" => "text",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(false, $model->random);
// true
$params = [
"lines" => "text",
"random" => "true",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(true, $model->random);
// other / false
$params = [
"lines" => "text",
"random" => "other",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals(false, $model->random);
}
/**
* Test Letter Spacing
*/
public function testLetterSpacing(): void
{
// default
$params = [
"lines" => "text",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("normal", $model->letterSpacing);
// invalid
$params = [
"lines" => "text",
"letterSpacing" => "invalid",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("normal", $model->letterSpacing);
// valid
$params = [
"lines" => "text",
"letterSpacing" => "10px",
];
$model = new RendererModel("src/templates/main.php", $params);
$this->assertEquals("10px", $model->letterSpacing);
}
}
================================================
FILE: tests/RendererTest.php
================================================
<?php
declare(strict_types=1);
use PHPUnit\Framework\TestCase;
require "vendor/autoload.php";
final class RendererTest extends TestCase
{
/**
* Static method to assert strings are equal while ignoring whitespace
*
* @param string $expected
* @param string $actual
*/
public static function compareNoCommentsOrWhitespace(string $expected, string $actual)
{
// remove comments and whitespace
$expected = preg_replace("/\s+/", " ", preg_replace("/<!--.*?-->/s", " ", $expected));
$actual = preg_replace("/\s+/", " ", preg_replace("/<!--.*?-->/s", " ", $actual));
// add newlines to make it easier to debug
$expected = str_replace(">", ">\n", $expected);
$actual = str_replace(">", ">\n", $actual);
// assert strings are equal
self::assertSame($expected, $actual);
}
/**
* Test normal card render
*/
public function testCardRender(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "50",
];
$controller = new RendererController($params);
$expectedSVG = file_get_contents("tests/svg/test_normal.svg");
$actualSVG = $controller->render();
$this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);
}
public function testMultilineCardRender(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "200",
"multiline" => "true",
];
$controller = new RendererController($params);
$this->assertStringContainsString("keyTimes='0;0;1;1'", $controller->render());
$this->assertStringContainsString(
"values='m0,25 h0 ; m0,25 h0 ; m0,25 h380 ; m0,25 h380'",
$controller->render()
);
$this->assertStringContainsString("keyTimes='0;0.5;1;1'", $controller->render());
$this->assertStringContainsString(
"values='m0,50 h0 ; m0,50 h0 ; m0,50 h380 ; m0,50 h380'",
$controller->render()
);
}
/**
* Test error card render
*/
public function testErrorCardRender(): void
{
// missing lines
$params = [
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "50",
];
$controller = new RendererController($params);
$this->assertStringContainsString("Lines parameter must be set.", $controller->render());
}
/**
* Test loading a valid Google Font
*/
public function testLoadingGoogleFont(): void
{
$params = [
"lines" => "text",
"font" => "Roboto",
];
$controller = new RendererController($params);
$this->assertStringContainsString("@font-face {", $controller->render());
$this->assertSame(
1,
preg_match(
"/src: url\(data:font\/truetype;base64,[a-zA-Z0-9\/+=]+\) format\('truetype'\);/",
$controller->render()
)
);
$this->assertStringContainsString("font-family='\"Roboto\", monospace'", $controller->render());
}
/**
* Test loading a valid Google Font
*/
public function testInvalidGoogleFont(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"font" => "Not-A-Font",
];
$controller = new RendererController($params);
$this->assertStringContainsString("font-family='\"Not-A-Font\", monospace'", $controller->render());
}
/**
* Test if a trailing ";" in lines is trimmed; see issue #25
*/
public function testLineTrimming(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
"",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "50",
];
$controller = new RendererController($params);
$expectedSVG = file_get_contents("tests/svg/test_normal.svg");
$actualSVG = $controller->render();
$this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);
}
/**
* Test normal vertical alignment
*/
public function testNormalVerticalAlignment(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"width" => "380",
"height" => "50",
];
$controller = new RendererController($params);
$this->assertStringContainsString("dominant-baseline='auto'", $controller->render());
}
/**
* Test pause parameter
*/
public function testPauseParameter(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "50",
"pause" => "1000",
];
$controller = new RendererController($params);
$this->assertStringContainsString("dur='6000ms'", $controller->render());
$this->assertStringContainsString("keyTimes='0;0.66666666666667;0.83333333333333;1'", $controller->render());
}
/**
* Test pause on multiline card
*/
public function testPauseMultiline(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "200",
"multiline" => "true",
"pause" => "1000",
];
$controller = new RendererController($params);
$this->assertStringContainsString("dur='6000ms'", $controller->render());
$this->assertStringContainsString("keyTimes='0;0;0.83333333333333;1'", $controller->render());
$this->assertStringContainsString("dur='12000ms'", $controller->render());
$this->assertStringContainsString("keyTimes='0;0.5;0.91666666666667;1'", $controller->render());
}
/**
* Test repeat set to false
*/
public function testRepeatFalse(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "50",
"repeat" => "false",
];
$controller = new RendererController($params);
$actualSVG = preg_replace("/\s+/", " ", $controller->render());
$this->assertStringContainsString("begin='0s'", $actualSVG);
$this->assertStringContainsString(
"begin='d2.end' dur='5000ms' fill='freeze' values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h380'",
$actualSVG
);
$this->assertStringNotContainsString(";d3.end", $actualSVG);
}
/**
* Test repeat set to false on multiline card
*/
public function testRepeatFalseMultiline(): void
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "200",
"multiline" => "true",
"repeat" => "false",
];
$controller = new RendererController($params);
$actualSVG = preg_replace("/\s+/", " ", $controller->render());
$this->assertStringContainsString("begin='0s'", $actualSVG);
$this->assertStringNotContainsString(";d3.end", $actualSVG);
}
/**
* Test separator set to something other than ";"
*/
public function testSeparator(): void
{
$params = [
"lines" => implode(";;", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"center" => "true",
"vCenter" => "true",
"width" => "380",
"height" => "50",
"separator" => ";;",
];
$controller = new RendererController($params);
$expectedSVG = file_get_contents("tests/svg/test_normal.svg");
$actualSVG = $controller->render();
$this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);
}
/**
* Test random
*/
public function testRandom(): void
{
$lines = [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
];
$params = [
"lines" => implode(";", $lines),
"random" => "true",
];
$controller = new RendererController($params);
$actualSVG = preg_replace("/\s+/", " ", $controller->render());
foreach ($lines as $line) {
$this->assertStringContainsString("> $line </textPath>", $actualSVG);
}
}
/**
* Test Letter Spacing
*/
public function testLetterSpacing()
{
$params = [
"lines" => implode(";", [
"Full-stack web and app developer",
"Self-taught UI/UX Designer",
"10+ years of coding experience",
"Always learning new things",
]),
"letterSpacing" => "10px",
];
$controller = new RendererController($params);
$actualSVG = preg_replace("/\s+/", " ", $controller->render());
$this->assertStringContainsString("letter-spacing='10px'", $actualSVG);
$this->assertStringNotContainsString("letter-spacing='normal'", $actualSVG);
}
}
================================================
FILE: tests/phpunit/phpunit.xml
================================================
<?xml version="1.0"?>
<phpunit colors="true">
<testsuites>
<testsuite name="main">
<directory suffix="Test.php">../</directory>
</testsuite>
</testsuites>
</phpunit>
gitextract_lm_lbad9/
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── feature_request.md
│ │ └── question.md
│ ├── dependabot.yml
│ ├── pull_request_template.md
│ └── workflows/
│ ├── phpunit-ci-coverage.yml
│ ├── prettier.yml
│ └── release.yml
├── .gitignore
├── .prettierignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── Procfile
├── README.md
├── app.json
├── composer.json
├── docs/
│ └── faq.md
├── src/
│ ├── controllers/
│ │ └── RendererController.php
│ ├── demo/
│ │ ├── css/
│ │ │ ├── loader.css
│ │ │ ├── style.css
│ │ │ └── toggle-dark.css
│ │ ├── index.php
│ │ └── js/
│ │ ├── script.js
│ │ └── toggle-dark.js
│ ├── enums/
│ │ └── ResponseEnum.php
│ ├── exceptions/
│ │ └── UnprocessableEntityException.php
│ ├── index.php
│ ├── interfaces/
│ │ └── IStatusException.php
│ ├── models/
│ │ ├── ErrorModel.php
│ │ ├── GoogleFontConverter.php
│ │ └── RendererModel.php
│ ├── templates/
│ │ ├── error.php
│ │ └── main.php
│ └── views/
│ ├── ErrorView.php
│ └── RendererView.php
└── tests/
├── OptionsTest.php
├── RendererTest.php
└── phpunit/
└── phpunit.xml
SYMBOL INDEX (94 symbols across 12 files)
FILE: src/controllers/RendererController.php
class RendererController (line 6) | class RendererController
method __construct (line 33) | public function __construct(array $params)
method redirectToDemo (line 58) | private function redirectToDemo(): void
method setContentType (line 67) | private function setContentType($type): void
method setCacheRefreshDaily (line 76) | private function setCacheRefreshDaily(): void
method setHeaders (line 89) | public function setHeaders(): void
method render (line 111) | public function render(): string
FILE: src/demo/js/script.js
method getParams (line 42) | getParams() {
method update (line 87) | update() {
method customEncode (line 126) | customEncode(str) {
method addLines (line 135) | addLines(count) {
method removeLine (line 180) | removeLine(index) {
method reset (line 224) | reset() {
method getPermalink (line 243) | getPermalink() {
method openPermalink (line 260) | openPermalink() {
method restore (line 267) | restore() {
method copy (line 299) | copy(btn, text) {
method copyCode (line 310) | copyCode(btn) {
method copyPermalink (line 318) | copyPermalink(btn) {
method reset (line 328) | reset(el) {
FILE: src/demo/js/toggle-dark.js
function toggleTheme (line 4) | function toggleTheme() {
function darkmode (line 15) | function darkmode() {
function lightmode (line 20) | function lightmode() {
function setCookie (line 25) | function setCookie(cname, cvalue, exdays) {
function getCookie (line 32) | function getCookie(name) {
FILE: src/exceptions/UnprocessableEntityException.php
class UnprocessableEntityException (line 3) | class UnprocessableEntityException extends InvalidArgumentException impl...
method getStatus (line 5) | public function getStatus(): ResponseEnum
FILE: src/interfaces/IStatusException.php
type IStatusException (line 3) | interface IStatusException
method getStatus (line 5) | public function getStatus(): ResponseEnum;
FILE: src/models/ErrorModel.php
class ErrorModel (line 6) | class ErrorModel
method __construct (line 20) | public function __construct(string $template, string $message)
FILE: src/models/GoogleFontConverter.php
class GoogleFontConverter (line 8) | class GoogleFontConverter
method fetchFontCSS (line 17) | public static function fetchFontCSS($font, $weight, $text): string
method encodeFonts (line 42) | private static function encodeFonts($css)
method curlGetContents (line 62) | private static function curlGetContents($url): string
FILE: src/models/RendererModel.php
class RendererModel (line 8) | class RendererModel
method __construct (line 93) | public function __construct($template, $params)
method checkLines (line 122) | private function checkLines($lines)
method checkFont (line 144) | private function checkFont($font)
method checkColor (line 157) | private function checkColor($color, $field)
method checkNumberPositive (line 175) | private function checkNumberPositive($num, $field)
method checkNumberNonNegative (line 191) | private function checkNumberNonNegative($num, $field)
method checkBoolean (line 206) | private function checkBoolean($bool)
method fetchFontCSS (line 218) | private function fetchFontCSS($font, $weight, $text)
method isValidUnit (line 243) | private function isValidUnit($unit)
method checkLetterSpacing (line 258) | private function checkLetterSpacing($letterSpacing)
FILE: src/views/ErrorView.php
class ErrorView (line 6) | class ErrorView
method __construct (line 17) | public function __construct($model)
method render (line 26) | public function render()
FILE: src/views/RendererView.php
class RendererView (line 6) | class RendererView
method __construct (line 17) | public function __construct($model)
method render (line 26) | public function render()
FILE: tests/OptionsTest.php
class OptionsTest (line 9) | final class OptionsTest extends TestCase
method testMissingLines (line 14) | public function testMissingLines(): void
method testValidFont (line 29) | public function testValidFont(): void
method testValidFontColor (line 42) | public function testValidFontColor(): void
method testInvalidFontColor (line 55) | public function testInvalidFontColor(): void
method testValidBackgroundColor (line 68) | public function testValidBackgroundColor(): void
method testInvalidBackgroundColor (line 81) | public function testInvalidBackgroundColor(): void
method testValidFontSize (line 94) | public function testValidFontSize(): void
method testInvalidFontSize (line 107) | public function testInvalidFontSize(): void
method testValidHeight (line 121) | public function testValidHeight(): void
method testInvalidHeight (line 134) | public function testInvalidHeight(): void
method testValidWidth (line 148) | public function testValidWidth(): void
method testInvalidWidth (line 161) | public function testInvalidWidth(): void
method testCenterIsTrue (line 175) | public function testCenterIsTrue(): void
method testCenterIsNotTrue (line 188) | public function testCenterIsNotTrue(): void
method testVCenterIsTrue (line 201) | public function testVCenterIsTrue(): void
method testVCenterIsNotTrue (line 214) | public function testVCenterIsNotTrue(): void
method testValidDuration (line 227) | public function testValidDuration(): void
method testInvalidDuration (line 240) | public function testInvalidDuration(): void
method testValidPause (line 254) | public function testValidPause(): void
method testValidPauseZero (line 267) | public function testValidPauseZero(): void
method testInvalidPause (line 280) | public function testInvalidPause(): void
method testRepeat (line 294) | public function testRepeat(): void
method testSeparator (line 323) | public function testSeparator(): void
method testRandom (line 345) | public function testRandom(): void
method testLetterSpacing (line 374) | public function testLetterSpacing(): void
FILE: tests/RendererTest.php
class RendererTest (line 9) | final class RendererTest extends TestCase
method compareNoCommentsOrWhitespace (line 17) | public static function compareNoCommentsOrWhitespace(string $expected,...
method testCardRender (line 32) | public function testCardRender(): void
method testMultilineCardRender (line 52) | public function testMultilineCardRender(): void
method testErrorCardRender (line 83) | public function testErrorCardRender(): void
method testLoadingGoogleFont (line 99) | public function testLoadingGoogleFont(): void
method testInvalidGoogleFont (line 120) | public function testInvalidGoogleFont(): void
method testLineTrimming (line 141) | public function testLineTrimming(): void
method testNormalVerticalAlignment (line 165) | public function testNormalVerticalAlignment(): void
method testPauseParameter (line 185) | public function testPauseParameter(): void
method testPauseMultiline (line 208) | public function testPauseMultiline(): void
method testRepeatFalse (line 234) | public function testRepeatFalse(): void
method testRepeatFalseMultiline (line 262) | public function testRepeatFalseMultiline(): void
method testSeparator (line 287) | public function testSeparator(): void
method testRandom (line 311) | public function testRandom(): void
method testLetterSpacing (line 333) | public function testLetterSpacing()
Condensed preview — 41 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (129K chars).
[
{
"path": ".gitattributes",
"chars": 66,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 619,
"preview": "# These are supported funding model platforms\n\ngithub: [DenverCoder1]\npatreon: # Replace with a single Patreon username\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 832,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"\"\nlabels: \"bug\"\nassignees: \"\"\n---\n\n**Describe the"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 605,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: \"\"\nlabels: \"enhancement\"\nassignees: \"\"\n---\n\n**I"
},
{
"path": ".github/ISSUE_TEMPLATE/question.md",
"chars": 174,
"preview": "---\nname: Question\nabout: I have a question about this project\ntitle: \"\"\nlabels: \"question\"\nassignees: \"\"\n---\n\n**Descrip"
},
{
"path": ".github/dependabot.yml",
"chars": 506,
"preview": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where "
},
{
"path": ".github/pull_request_template.md",
"chars": 715,
"preview": "## Summary\n\n<!-- Please include a summary of the change and which issue is fixed. -->\n\n## Type of change\n\n<!-- Please de"
},
{
"path": ".github/workflows/phpunit-ci-coverage.yml",
"chars": 551,
"preview": "name: PHPUnit CI\n\non:\n workflow_dispatch:\n pull_request:\n push:\n branches:\n - main\n\njobs:\n build-test:\n r"
},
{
"path": ".github/workflows/prettier.yml",
"chars": 1156,
"preview": "name: Format with Prettier\n\non:\n push:\n branches:\n - main\n pull_request:\n paths:\n - \".github/workflows"
},
{
"path": ".github/workflows/release.yml",
"chars": 796,
"preview": "name: Releases\n\non:\n workflow_dispatch:\n\njobs:\n changelog:\n runs-on: ubuntu-latest\n\n steps:\n - uses: action"
},
{
"path": ".gitignore",
"chars": 27,
"preview": "vendor/\n.vscode/\n.env\n.idea"
},
{
"path": ".prettierignore",
"chars": 16,
"preview": "vendor\n*.min.js\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5484,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participa"
},
{
"path": "CONTRIBUTING.md",
"chars": 2047,
"preview": "## Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request if you have a way to imp"
},
{
"path": "LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) 2021 Jonah Lawrence\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "Procfile",
"chars": 40,
"preview": "web: vendor/bin/heroku-php-apache2 src/\n"
},
{
"path": "README.md",
"chars": 19996,
"preview": "<!-- markdownlint-disable MD033 MD041 -->\n<p align=\"center\">\n <h3 align=\"center\">⌨️ Readme Typing SVG</h3>\n</p>\n\n<p ali"
},
{
"path": "app.json",
"chars": 458,
"preview": "{\n \"name\": \"Readme Typing SVG\",\n \"description\": \"⚡ Dynamically generated, customizable SVG that gives the appearance o"
},
{
"path": "composer.json",
"chars": 1075,
"preview": "{\n \"name\": \"denvercoder1/readme-typing-svg\",\n \"description\": \"⚡ Dynamically generated, customizable SVG that gives the"
},
{
"path": "docs/faq.md",
"chars": 3002,
"preview": "# FAQ\n\n## How do I include Readme Typing SVG in my Readme?\n\nMarkdown files on GitHub support embedded images using Markd"
},
{
"path": "src/controllers/RendererController.php",
"chars": 2878,
"preview": "<?php declare(strict_types=1);\n\n/**\n * Controller for choosing model and rendering SVG outputs\n */\nclass RendererControl"
},
{
"path": "src/demo/css/loader.css",
"chars": 1250,
"preview": ".loader,\n.loader:before,\n.loader:after {\n display: none;\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n -webk"
},
{
"path": "src/demo/css/style.css",
"chars": 6336,
"preview": "html {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::af"
},
{
"path": "src/demo/css/toggle-dark.css",
"chars": 990,
"preview": "a.darkmode {\n position: fixed;\n top: 2em;\n right: 2em;\n color: var(--text);\n background: var(--background);\n heigh"
},
{
"path": "src/demo/index.php",
"chars": 12305,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "src/demo/js/script.js",
"chars": 12074,
"preview": "const preview = {\n // default values for Readme Typing SVG parameters\n defaults: {\n font: \"monospace\",\n weight: "
},
{
"path": "src/demo/js/toggle-dark.js",
"chars": 1250,
"preview": "// enable dark mode on load if user prefers dark themes and has not used the toggle\ngetCookie(\"darkmode\") === null && wi"
},
{
"path": "src/enums/ResponseEnum.php",
"chars": 2927,
"preview": "<?php\n\n/**\n * Enumeration of HTTP response status codes.\n *\n * This enum represents the standard HTTP response status co"
},
{
"path": "src/exceptions/UnprocessableEntityException.php",
"chars": 221,
"preview": "<?php\n\nclass UnprocessableEntityException extends InvalidArgumentException implements IStatusException\n{\n public func"
},
{
"path": "src/index.php",
"chars": 289,
"preview": "<?php declare(strict_types=1);\n\nrequire \"../vendor/autoload.php\";\n\n// load environment variables if .env exists\n$dotenv "
},
{
"path": "src/interfaces/IStatusException.php",
"chars": 85,
"preview": "<?php\n\ninterface IStatusException\n{\n public function getStatus(): ResponseEnum;\n}\n"
},
{
"path": "src/models/ErrorModel.php",
"chars": 556,
"preview": "<?php declare(strict_types=1);\n\n/**\n * Model for error messages\n */\nclass ErrorModel\n{\n /** @var string $message Text"
},
{
"path": "src/models/GoogleFontConverter.php",
"chars": 2669,
"preview": "<?php\n\ndeclare(strict_types=1);\n\n/**\n * Class for converting Google Fonts to base 64 for displaying through SVG image\n *"
},
{
"path": "src/models/RendererModel.php",
"chars": 9482,
"preview": "<?php\n\ndeclare(strict_types=1);\n\n/**\n * Model for SVG outputs\n */\nclass RendererModel\n{\n /** @var array<string> $line"
},
{
"path": "src/templates/error.php",
"chars": 390,
"preview": "<!-- https://github.com/DenverCoder1/readme-typing-svg/ -->\n<svg xmlns='http://www.w3.org/2000/svg'\n xmlns:xlink='htt"
},
{
"path": "src/templates/main.php",
"chars": 3243,
"preview": "<!-- https://github.com/DenverCoder1/readme-typing-svg/ -->\n<svg xmlns='http://www.w3.org/2000/svg'\n xmlns:xlink='htt"
},
{
"path": "src/views/ErrorView.php",
"chars": 758,
"preview": "<?php declare(strict_types=1);\n\n/**\n * View for rendering error messages\n */\nclass ErrorView\n{\n /**\n * @var Error"
},
{
"path": "src/views/RendererView.php",
"chars": 1451,
"preview": "<?php declare(strict_types=1);\n\n/**\n * View for rendering typing SVG\n */\nclass RendererView\n{\n /**\n * @var Render"
},
{
"path": "tests/OptionsTest.php",
"chars": 10691,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\nrequire \"vendor/autoload.php\";\n\nfinal class OptionsTes"
},
{
"path": "tests/RendererTest.php",
"chars": 11784,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\nrequire \"vendor/autoload.php\";\n\nfinal class RendererTe"
},
{
"path": "tests/phpunit/phpunit.xml",
"chars": 184,
"preview": "<?xml version=\"1.0\"?>\n<phpunit colors=\"true\">\n <testsuites>\n <testsuite name=\"main\">\n <directory suffix=\"Test.p"
}
]
About this extraction
This page contains the full source code of the DenverCoder1/readme-typing-svg GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 41 files (118.2 KB), approximately 32.9k tokens, and a symbol index with 94 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.