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 ## Type of change - [ ] 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? - [ ] 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 ================================================

⌨️ Readme Typing SVG

Example Usage - README Typing SVG

## ⚡ 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 [![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg) ``` 4. Star the repo 😄 ## ⚙ Demo site Here you can easily customize your Typing SVG with a live preview. [![Demo Site](https://user-images.githubusercontent.com/20955511/183703055-42ec8754-d84c-414f-8132-a02974224aa1.gif "Demo Site")](https://readme-typing-svg.demolab.com/demo/) ## 🚀 Example usage Below are links to profiles where you can see Readme Typing SVGs in action! [![Jonah Lawrence](https://github.com/DenverCoder1.png?size=60)](https://github.com/DenverCoder1 "Jonah Lawrence on GitHub") [![Jini by Rentalz.com](https://i.imgur.com/TtuoKCs.png)](https://jini.rentalz.com/ "Jini by Rentalz.com") [![Waren Gonzaga](https://github.com/warengonzaga.png?size=60)](https://github.com/warengonzaga "Waren Gonzaga on GitHub") [![8BitJonny](https://github.com/8BitJonny.png?size=60)](https://github.com/8BitJonny "8BitJonny on GitHub") [![Aditya Raute](https://github.com/adityaraute.png?size=60)](https://github.com/adityaraute "Aditya Raute on GitHub") [![Shiva Sankeerth Reddy](https://github.com/ShivaSankeerth.png?size=60)](https://github.com/ShivaSankeerth "Shiva Sankeerth Reddy on GitHub") [![Tarun Kamboj](https://github.com/Tarun-Kamboj.png?size=60)](https://github.com/Tarun-Kamboj "Tarun Kamboj on GitHub") [![T.A.Vignesh](https://github.com/tavignesh.png?size=60)](https://github.com/tavignesh "T.A.Vignesh on GitHub") [![William J. Ghelfi](https://github.com/trumbitta.png?size=60)](https://github.com/trumbitta "William J. Ghelfi on GitHub") [![Mano Bharathi M](https://i.imgur.com/Audc6L9.png)](https://github.com/ManoBharathi93 "Mano Bharathi M on GitHub") [![Shivam Yadav](https://github.com/sudoshivam.png?size=60)](https://github.com/sudoshivam "Shivam Yadav on GitHub") [![Pratik Pingale](https://github.com/PROxZIMA.png?size=60)](https://github.com/PROxZIMA "Pratik Pingale on GitHub") [![Vydr'Oz](https://github.com/VydrOz.png?size=60)](https://github.com/VydrOz "Vydr'Oz on GitHub") [![Caroline Heloíse](https://github.com/Carol42.png?size=60)](https://github.com/Carol42 "Caroline Heloíse on GitHub") [![PriyanshK09](https://github.com/PriyanshK09.png?size=60)](https://github.com/PriyanshK09 "PriyanshK09 on GitHub") [![Thakur Ballary](https://github.com/thakurballary.png?size=60)](https://github.com/thakurballary "Thakur Ballary on GitHub") [![NiceSapien](https://github.com/nicesapien.png?size=60)](https://github.com/nicesapien "NiceSapien on GitHub") [![Manthan Ank](https://github.com/manthanank.png?size=60)](https://github.com/manthanank "Manthan Ank on GitHub") [![Ronny Coste](https://github.com/lertsoft.png?size=60)](https://github.com/lertsoft "Ronny Coste on GitHub") [![Vishal Beep](https://github.com/vishal-beep136.png?size=60)](https://github.com/Vishal-beep136 "Vishal Beep on GitHub") [![wiz64](https://github.com/wiz64.png?size=60)](https://github.com/wiz64 "wiz64 on GitHub") [![Aquarian Blake](https://github.com/Aquarius-blake.png?size=60)](https://github.com/Aquarius-blake "Aquarian Blake on GitHub") [![D3vil0p3r](https://github.com/D3vil0p3r.png?size=60)](https://github.com/D3vil0p3r "D3vil0p3r on GitHub") [![EliusHHimel](https://github.com/EliusHHimel.png?size=60)](https://github.com/EliusHHimel "EliusHHimel on GitHub") [![jcs090218](https://github.com/jcs090218.png?size=60)](https://github.com/jcs090218 "jcs090218 on GitHub") [![Rishabh2804](https://github.com/Rishabh2804.png?size=60)](https://github.com/Rishabh2804 "Rishabh2804 on GitHub") [![shalinibhatt](https://github.com/shalinibhatt.png?size=60)](https://github.com/shalinibhatt "shalinibhatt on GitHub") [![UlisesAlexanderAM](https://github.com/UlisesAlexanderAM.png?size=60)](https://github.com/UlisesAlexanderAM "UlisesAlexanderAM on GitHub") [![SpookyJelly](https://github.com/SpookyJelly.png?size=60)](https://github.com/SpookyJelly "SpookyJelly on GitHub") [![majidtdeni666](https://github.com/majidtdeni666.png?size=60)](https://github.com/majidtdeni666 "majidtdeni666 on GitHub") [![GalexY727](https://github.com/galexy727.png?size=60)](https://github.com/galexy727 "GalexY727 on GitHub") [![HectorSaldes](https://github.com/HectorSaldes.png?size=60)](https://github.com/HectorSaldes "HectorSaldes on GitHub") [![Ash-codes18](https://github.com/Ash-codes18.png?size=60)](https://github.com/Ash-codes18 "Ash-codes18 on GitHub") [![Maagnitude](https://github.com/Maagnitude.png?size=60)](https://github.com/Maagnitude "Maagnitude on GitHub") [![cracker911181](https://github.com/cracker911181.png?size=60)](https://github.com/cracker911181 "cracker911181 on GitHub") [![quiet-node](https://github.com/quiet-node.png?size=60)](https://github.com/quiet-node "quiet-node on GitHub") [![kaustubh43](https://github.com/kaustubh43.png?size=60)](https://github.com/kaustubh43 "kaustubh43 on GitHub") [![kaisunoo](https://github.com/kaisunoo.png?size=60)](https://github.com/kaisunoo "kaisunoo on GitHub") [![meyer-pidiache](https://github.com/meyer-pidiache.png?size=60)](https://github.com/meyer-pidiache "Meyer Pidiache on GitHub") [![jeremiahseun](https://github.com/jeremiahseun.png?size=60)](https://github.com/jeremiahseun "Jeremiah Erinola on GitHub") [![Anand Purushottam](https://github.com/creativepurus.png?size=60)](https://github.com/creativepurus "Anand Purushottam 🇮🇳 on GitHub ☕") [![Greg Chism](https://github.com/Gchism94.png?size=60)](https://github.com/Gchism94 "Greg Chism 🤘 on GitHub") [![turbomaster95](https://github.com/turbomaster95.png?size=60)](https://github.com/turbomaster95 "turbomaster95 🗿 🇮🇳 on GitHub ☕") [![K1rsN7](https://github.com/K1rsN7.png?size=60)](https://github.com/K1rsN7 "K1rsN7 on GitHub💪") [![codesbyahsen](https://github.com/codesbyahsen.png?size=60)](https://github.com/codesbyahsen "AHSEN ALEE on GitHub") [![Freddywhest](https://github.com/Freddywhest.png?size=60)](https://github.com/Freddywhest "Alfred Nti on GitHub") [![Shiro-cha](https://github.com/Shiro-cha.png?size=60)](https://github.com/Shiro-cha "Shiro Yukami on Github") [![Abid-Nafi](https://github.com/MohammedAbidNafi.png?size=60)](https://github.com/MohammedAbidNafi "Abid Nafi on Github") [![Srijan-Baniyal](https://github.com/Srijan-Baniyal.png?size=60)](https://github.com/Srijan-Baniyal "Srijan Baniyal on Github") [![BrunoOliveiraS](https://github.com/BrunoOliveiraS.png?size=60)](https://github.com/BrunoOliveiraS "Bruno Oliveira on Github") [![zidk](https://github.com/zidk.png?size=60)](https://github.com/zidk "Pablo Gonzalez on Github") [![tshr-d-dragon](https://github.com/tshr-d-dragon.png?size=60)](https://github.com/tshr-d-dragon "Tushar Patil on Github") [![DeveshYadav13](https://github.com/DeveshYadav13.png?size=60)](https://github.com/DeveshYadav13 "Devesh Yadav on Github") [![HauseMasterZ](https://github.com/HauseMasterZ.png?size=60)](https://github.com/HauseMasterZ "HauseMaster on Github") [![hyskoniho](https://github.com/hyskoniho.png?size=60)](https://github.com/hyskoniho "hyskoniho on Github") [![elvisisvan](https://github.com/elvisisvan.png?size=60)](https://github.com/elvisisvan "elvisisvan on Github") [![Nquenan](https://github.com/Nquenan.png?size=60)](https://github.com/Nquenan "Nquenan on Github") [![akhilnev](https://github.com/akhilnev.png?size=60)](https://github.com/akhilnev "Akhilesh Nevatia on Github") [![mannysoft](https://github.com/mannysoft.png?size=60)](https://github.com/mannysoft "Manny Isles on Github") [![LinThitHtwe](https://github.com/LinThitHtwe.png?size=60)](https://github.com/LinThitHtwe "LinThitHtwe on Github") [![Elio-Aliaj](https://github.com/Elio-Aliaj.png?size=60)](https://github.com/Elio-Aliaj "Elio-Aliaj on Github") [![presentformyfriends](https://github.com/presentformyfriends.png?size=60)](https://github.com/presentformyfriends "presentformyfriends on Github") [![Ad7amstein](https://github.com/Ad7amstein.png?size=60)](https://github.com/Ad7amstein "Ad7amstein on Github") [![LakshmanKishore](https://github.com/LakshmanKishore.png?size=60)](https://github.com/LakshmanKishore "LakshmanKishore on Github") [![mateusadada](https://github.com/mateusadada.png?size=60)](https://github.com/mateusadada "mateusadada on Github") [![fasakinhenry](https://github.com/fasakinhenry.png?size=60)](https://github.com/fasakinhenry "fasakinhenry on Github") [![YousifAbozid](https://github.com/YousifAbozid.png?size=60)](https://github.com/YousifAbozid "YousifAbozid on Github") [![hheinsoee](https://github.com/hheinsoee.png?size=60)](https://github.com/hheinsoee "hheinsoee on Github") [![lucmsilva651](https://github.com/lucmsilva651.png?size=60)](https://github.com/lucmsilva651 "lucmsilva651 on Github") [![ashertenenbaum](https://github.com/ashertenenbaum.png?size=60)](https://github.com/ashertenenbaum "ashertenenbaum on Github") [![0dxplt](https://github.com/0dxplt.png?size=60)](https://github.com/0dxplt "0dxplt on Github") [![HerobrineTV](https://github.com/HerobrineTV.png?size=60)](https://github.com/HerobrineTV "HerobrineTV on Github") [![Borketh](https://github.com/Borketh.png?size=60)](https://github.com/Borketh "Borketh on Github") [![Jafeth Yahuma](https://github.com/Callmeproteus.png?size=60)](https://github.com/Callmeproteus "Callmeproteus on GitHub") [![João Pedro](https://github.com/JotaP07.png?size=60)](https://github.com/JotaP07 "JP on GitHub") [![suzukimain](https://github.com/suzukimain.png?size=60)](https://github.com/suzukimain "suzukimain on Github") [![caesar013](https://github.com/caesar013.png?size=60)](https://github.com/caesar013 "caesar013 on Github") [![amir78729](https://github.com/amir78729.png?size=60)](https://github.com/amir78729 "Amir on Github") [![AJsuper007](https://github.com/AJsuper007.png?size=60)](https://github.com/AJsuper007 "AJsuper007 on Github") [![ABAN26](https://github.com/ABAN26.png?size=60)](https://github.com/ABAN26 "ABAN26 on Github") [![Soham More](https://github.com/SohamMore100.png?size=60)](https://github.com/SohamMore100 "Soham More on GitHub") [![Yogi Hariyani](https://github.com/yobro7292.png?size=60)](https://github.com/Yobro7292 "Yogi Hariyani on GitHub") [![Antônio Nascimento](https://github.com/Ninja1375.png?size=60)](https://github.com/Ninja1375 "Antônio Nascimento on GitHub") [![Ishaan Rastogi](https://github.com/TridentifyIshaan.png?size=60)](https://github.com/TridentifyIshaan "Tridentify Ishaan on GitHub") [![Eligijus Ciza](https://github.com/krimmyy.png?size=60)](https://github.com/krimmyy "Eligijus Ciza on GitHub") [![Ashish Vaghela](https://github.com/Ashish-CodeJourney.png?size=60)](https://github.com/Ashish-CodeJourney "Ashish Vaghela on GitHub") [![Snoopy1866](https://github.com/Snoopy1866.png?size=60)](https://github.com/Snoopy1866 "Snoopy1866 on GitHub") [![Sarthak Krishak](https://github.com/SarthakKrishak.png?size=60)](https://github.com/SarthakKrishak "Sarthak Krishak on GitHub") [![Austin Musuya](https://github.com/AustinMusuya.png?size=60)](https://github.com/AustinMusuya "Austin Musuya on GitHub") [![Rohit](https://github.com/EngineerRohit01.png?size=60)](https://github.com/EngineerRohit01 "Rohit on GitHub") [![Sandeep Prasad](https://github.com/Sandeep-Petwal.png?size=60)](https://github.com/sandeep-Petwal "Sandeep Prasad on GitHub") [![Saad Hussain](https://github.com/saadhusayn.png?size=60)](https://github.com/saadhusayn "Saad Hussain on Github") [![Rahul Raj](https://github.com/Theglassofdata.png?size=60)](https://github.com/Theglassofdata "Rahul Raj") [![Aditya Singh](https://github.com/EchoSingh.png?size=60)](https://github.com/EchoSingh "Aditya Singh on Github") [![Muhammad Noraeii](https://github.com/Muhammad-Noraeii.png?size=60)](https://github.com/Muhammad-Noraeii "Muhammad Noraeii on Github") [![Harry Skerritt](https://github.com/user-attachments/assets/392d404f-b0af-4fab-b4f7-120a36ffc3f4)](https://github.com/Harry-Skerritt "Harry-Skerritt on Github") [![Madhurima Rawat](https://github.com/madhurimarawat.png?size=60)](https://github.com/madhurimarawat "Madhurima Rawat on Github") [![wfxey](https://github.com/wfxey.png?size=60)](https://github.com/wfxey "wfxey on Github") [![Lixiao Zhu](https://github.com/zhulixiao.png?size=60)](https://github.com/zhulixiao "Lixiao Zhu on Github") [![Ahmed Nassar](https://github.com/AhmedNassar7.png?size=60)](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 2. Click the "Deploy to Heroku" button below [![Deploy](https://www.herokucdn.com/deploy/button.svg "Deploy to Heroku")](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!

Youtube Sponsor with Github

[☕ Buy me a coffee](https://ko-fi.com/jlawrence) --- Made with ❤️ and PHP Powered by Heroku 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 [![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg) ``` ### HTML ```html ``` ## 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"`. ```html

``` ## 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 `` and `` elements as shown below. The dark mode version appears in the `srcset` of the `` tag and the light mode version appears in the `src` of the `` tag. ```html ``` ## 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 ================================================ $params */ private $params; /** * @var ResponseEnum $statusCode Response status code */ private ResponseEnum $statusCode = ResponseEnum::HTTP_OK; /** * Construct RendererController * * @param array $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,"); 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,"); } 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 ================================================ Readme Typing SVG - Demo Site >

⌨️ Readme Typing SVG

Sponsor View on GitHub Star

Add your text

Options

Preview

Readme Typing SVG
Loading...

Markdown

HTML

Frequently Asked Questions
================================================ 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} 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 = `[![Typing SVG](${imageURL})](${repoLink})`; const html = `Typing SVG`; // 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 = ' '; 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 ================================================ 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 ================================================ safeLoad(); $controller = new RendererController($_REQUEST); $controller->setHeaders(); echo $controller->render(); ================================================ FILE: src/interfaces/IStatusException.php ================================================ message = $message; $this->template = $template; } } ================================================ FILE: src/models/GoogleFontConverter.php ================================================ $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 ================================================ $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 $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 $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 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 "\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 ================================================ ================================================ FILE: src/templates/main.php ================================================ ================================================ FILE: src/views/ErrorView.php ================================================ 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 ================================================ 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 ================================================ 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 ================================================ /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 ", $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 ================================================ ../