[
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: [DenverCoder1]\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: jlawrence\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.md",
    "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"\"\nlabels: \"bug\"\nassignees: \"\"\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n\n- OS: [e.g. iOS]\n- Browser [e.g. chrome, safari]\n- Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n\n- Device: [e.g. iPhone6]\n- OS: [e.g. iOS8.1]\n- Browser [e.g. stock browser, safari]\n- Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature_request.md",
    "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: \"\"\nlabels: \"enhancement\"\nassignees: \"\"\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/question.md",
    "content": "---\nname: Question\nabout: I have a question about this project\ntitle: \"\"\nlabels: \"question\"\nassignees: \"\"\n---\n\n**Description**\n\nA brief description of the question or issue:\n"
  },
  {
    "path": ".github/dependabot.yml",
    "content": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where the package manifests are located.\n# Please see the documentation for all configuration options:\n# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates\n\nversion: 2\nupdates:\n  - package-ecosystem: \"composer\" # See documentation for possible values\n    directory: \"/\" # Location of package manifests\n    schedule:\n      interval: \"daily\"\n"
  },
  {
    "path": ".github/pull_request_template.md",
    "content": "## Summary\n\n<!-- Please include a summary of the change and which issue is fixed. -->\n\n## Type of change\n\n<!-- Please delete options that are not relevant. -->\n\n- [ ] Bug fix (added a non-breaking change which fixes an issue)\n- [ ] New feature (added a non-breaking change which adds functionality)\n- [ ] Updated documentation (updated the readme, templates, or other repo files)\n- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)\n\n## How Has This Been Tested?\n\n<!-- If you have changed or added a feature, please describe the tests you made to verify your changes. -->\n\n- [ ] Ran tests with `composer test`\n- [ ] Added or updated test cases to test new features\n"
  },
  {
    "path": ".github/workflows/phpunit-ci-coverage.yml",
    "content": "name: PHPUnit CI\n\non:\n  workflow_dispatch:\n  pull_request:\n  push:\n    branches:\n      - main\n\njobs:\n  build-test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: php-actions/composer@9357db0fb3020086db5a9922354c8dc643927bcd\n      - name: PHPUnit Tests\n        uses: php-actions/phpunit@v4\n        with:\n          bootstrap: vendor/autoload.php\n          configuration: tests/phpunit/phpunit.xml\n          args: --testdox\n        env:\n          TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          USERNAME: DenverCoder1\n"
  },
  {
    "path": ".github/workflows/prettier.yml",
    "content": "name: Format with Prettier\n\non:\n  push:\n    branches:\n      - main\n  pull_request:\n    paths:\n      - \".github/workflows/prettier.yml\"\n      - \"**.php\"\n      - \"**.md\"\n      - \"**.js\"\n      - \"**.css\"\n\njobs:\n  prettier:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout Pull Request\n        if: ${{ github.event_name == 'pull_request' }}\n        uses: actions/checkout@v3\n        with:\n          repository: ${{ github.event.pull_request.head.repo.full_name }}\n          ref: ${{ github.event.pull_request.head.ref }}\n\n      - name: Checkout Push\n        if: ${{ github.event_name != 'pull_request' }}\n        uses: actions/checkout@v3\n\n      - name: Install prettier and plugin-php\n        run: npm install --global prettier@2.8.1 @prettier/plugin-php@0.18.9\n\n      - name: Check formatting with Prettier\n        continue-on-error: true\n        run: composer format:check \n\n      - name: Prettify code\n        run: |\n          composer format \n          git diff\n\n      - name: Commit changes\n        uses: EndBug/add-and-commit@v9\n        with:\n          message: \"style: Formatted code with Prettier\"\n          default_author: github_actions\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: Releases\n\non:\n  workflow_dispatch:\n\njobs:\n  changelog:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v2\n\n      - name: conventional Changelog Action\n        id: changelog\n        uses: TriPSs/conventional-changelog-action@v3.7.1\n        with:\n          github-token: ${{ secrets.CHANGELOG_RELEASE }}\n          version-file: './composer.json'\n          output-file: 'false'\n\n      - name: create release\n        uses: actions/create-release@v1\n        if: ${{ steps.changelog.outputs.skipped == 'false' }}\n        env:\n          GITHUB_TOKEN: ${{ secrets.CHANGELOG_RELEASE }}\n        with:\n          tag_name: ${{ steps.changelog.outputs.tag }}\n          release_name: ${{ steps.changelog.outputs.tag }}\n          body: ${{ steps.changelog.outputs.clean_changelog }}\n"
  },
  {
    "path": ".gitignore",
    "content": "vendor/\n.vscode/\n.env\n.idea"
  },
  {
    "path": ".prettierignore",
    "content": "vendor\n*.min.js\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, caste, color, religion, or sexual\nidentity and orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n- Demonstrating empathy and kindness toward other people\n- Being respectful of differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Accepting responsibility and apologizing to those affected by our mistakes,\n  and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the overall\n  community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language or imagery, and sexual attention or advances of\n  any kind\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or email address,\n  without their explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\njonah@freshidea.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of\nactions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or permanent\nban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within the\ncommunity.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.1, available at\n[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].\n\nCommunity Impact Guidelines were inspired by\n[Mozilla's code of conduct enforcement ladder][mozilla coc].\n\nFor answers to common questions about this code of conduct, see the FAQ at\n[https://www.contributor-covenant.org/faq][faq]. Translations are available at\n[https://www.contributor-covenant.org/translations][translations].\n\n[homepage]: https://www.contributor-covenant.org\n[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html\n[mozilla coc]: https://github.com/mozilla/diversity\n[faq]: https://www.contributor-covenant.org/faq\n[translations]: https://www.contributor-covenant.org/translations\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "## Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.\n\nMake sure your request is meaningful and you have tested the app locally before submitting a pull request.\n\n### Installing Requirements\n\n#### Requirements\n\n- [PHP 8.1+](https://www.apachefriends.org/index.html)\n- [Composer](https://getcomposer.org)\n\n#### Linux\n\n```bash\nsudo apt-get install php\nsudo apt-get install php-curl\nsudo apt-get install composer\n```\n\n#### macOS\n\nUsing [Homebrew](https://brew.sh):\n\n```bash\nbrew install php\nbrew install composer\n```\n\nPHP 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).\n\n#### Windows\n\nInstall PHP from [XAMPP](https://www.apachefriends.org/index.html) or [php.net](https://windows.php.net/download)\n\n[▶ How to install and run PHP using XAMPP (Windows)](https://www.youtube.com/watch?v=K-qXW9ymeYQ)\n\n[📥 Download Composer](https://getcomposer.org/download/)\n\n### Clone the repository\n\n```\ngit clone https://github.com/DenverCoder1/readme-typing-svg.git\ncd readme-typing-svg\n```\n\n### Running the app locally\n\n```bash\ncomposer start\n```\n\nOpen http://localhost:8000/ and add parameters to run the project locally.\n\n### Running the tests\n\nBefore you can run tests, PHPUnit must be installed. You can install it using Composer by running the following command.\n\n```bash\ncomposer install\n```\n\n### Format and test the code\n\nRun the following command to format the code with Prettier:\n\n```\ncomposer run format\n```\n\nRun the following command to check if your code is formatted properly:\n\n```\ncomposer run format:check\n```\n\n> **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.\n\nRun the following command to run the PHPUnit test script which will verify that the tested functionality is still working.\n\n```bash\ncomposer test\n```\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Jonah Lawrence\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "Procfile",
    "content": "web: vendor/bin/heroku-php-apache2 src/\n"
  },
  {
    "path": "README.md",
    "content": "<!-- markdownlint-disable MD033 MD041 -->\n<p align=\"center\">\n  <h3 align=\"center\">⌨️ Readme Typing SVG</h3>\n</p>\n\n<p align=\"center\">\n  <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&center=true&width=380&height=50&duration=4000&pause=1000\" alt=\"Example Usage - README Typing SVG\">\n</p>\n\n<p align=\"center\">\n  <a href=\"https://github.com/search?q=extension%3Amd+%22https+readme+typing+svg%22&type=Code\" alt=\"Users\" title=\"Repo users\">\n    <img src=\"https://freshidea.com/jonah/app/github-search-results/readme-typing-svg/index.php\"/></a>\n  <a href=\"https://discord.gg/fPrdqh3Zfu\" alt=\"Discord\" title=\"Dev Pro Tips Discussion & Support Server\">\n    <img src=\"https://img.shields.io/discord/819650821314052106?color=7289DA&logo=discord&logoColor=white&style=for-the-badge\"/></a>\n</p>\n<!-- markdownlint-enable MD033 -->\n\n## ⚡ Quick setup\n\n1. Copy-paste the markdown below into your GitHub profile README\n2. Replace the value after `?lines=` with your text. Separate lines of text with semicolons and use `+` or `%20` for spaces.\n3. Adjust the width parameter (see below) to fit the full width of your text.\n\n```md\n[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)\n```\n\n4. Star the repo 😄\n\n## ⚙ Demo site\n\nHere you can easily customize your Typing SVG with a live preview.\n\n<https://readme-typing-svg.demolab.com/demo/>\n\n[![Demo Site](https://user-images.githubusercontent.com/20955511/183703055-42ec8754-d84c-414f-8132-a02974224aa1.gif \"Demo Site\")](https://readme-typing-svg.demolab.com/demo/)\n\n## 🚀 Example usage\n\nBelow are links to profiles where you can see Readme Typing SVGs in action!\n\n[![Jonah Lawrence](https://github.com/DenverCoder1.png?size=60)](https://github.com/DenverCoder1 \"Jonah Lawrence on GitHub\")\n[![Jini by Rentalz.com](https://i.imgur.com/TtuoKCs.png)](https://jini.rentalz.com/ \"Jini by Rentalz.com\")\n[![Waren Gonzaga](https://github.com/warengonzaga.png?size=60)](https://github.com/warengonzaga \"Waren Gonzaga on GitHub\")\n[![8BitJonny](https://github.com/8BitJonny.png?size=60)](https://github.com/8BitJonny \"8BitJonny on GitHub\")\n[![Aditya Raute](https://github.com/adityaraute.png?size=60)](https://github.com/adityaraute \"Aditya Raute on GitHub\")\n[![Shiva Sankeerth Reddy](https://github.com/ShivaSankeerth.png?size=60)](https://github.com/ShivaSankeerth \"Shiva Sankeerth Reddy on GitHub\")\n[![Tarun Kamboj](https://github.com/Tarun-Kamboj.png?size=60)](https://github.com/Tarun-Kamboj \"Tarun Kamboj on GitHub\")\n[![T.A.Vignesh](https://github.com/tavignesh.png?size=60)](https://github.com/tavignesh \"T.A.Vignesh on GitHub\")\n[![William J. Ghelfi](https://github.com/trumbitta.png?size=60)](https://github.com/trumbitta \"William J. Ghelfi on GitHub\")\n[![Mano Bharathi M](https://i.imgur.com/Audc6L9.png)](https://github.com/ManoBharathi93 \"Mano Bharathi M on GitHub\")\n[![Shivam Yadav](https://github.com/sudoshivam.png?size=60)](https://github.com/sudoshivam \"Shivam Yadav on GitHub\")\n[![Pratik Pingale](https://github.com/PROxZIMA.png?size=60)](https://github.com/PROxZIMA \"Pratik Pingale on GitHub\")\n[![Vydr'Oz](https://github.com/VydrOz.png?size=60)](https://github.com/VydrOz \"Vydr'Oz on GitHub\")\n[![Caroline Heloíse](https://github.com/Carol42.png?size=60)](https://github.com/Carol42 \"Caroline Heloíse on GitHub\")\n[![PriyanshK09](https://github.com/PriyanshK09.png?size=60)](https://github.com/PriyanshK09 \"PriyanshK09 on GitHub\")\n[![Thakur Ballary](https://github.com/thakurballary.png?size=60)](https://github.com/thakurballary \"Thakur Ballary on GitHub\")\n[![NiceSapien](https://github.com/nicesapien.png?size=60)](https://github.com/nicesapien \"NiceSapien on GitHub\")\n[![Manthan Ank](https://github.com/manthanank.png?size=60)](https://github.com/manthanank \"Manthan Ank on GitHub\")\n[![Ronny Coste](https://github.com/lertsoft.png?size=60)](https://github.com/lertsoft \"Ronny Coste on GitHub\")\n[![Vishal Beep](https://github.com/vishal-beep136.png?size=60)](https://github.com/Vishal-beep136 \"Vishal Beep on GitHub\")\n[![wiz64](https://github.com/wiz64.png?size=60)](https://github.com/wiz64 \"wiz64 on GitHub\")\n[![Aquarian Blake](https://github.com/Aquarius-blake.png?size=60)](https://github.com/Aquarius-blake \"Aquarian Blake on GitHub\")\n[![D3vil0p3r](https://github.com/D3vil0p3r.png?size=60)](https://github.com/D3vil0p3r \"D3vil0p3r on GitHub\")\n[![EliusHHimel](https://github.com/EliusHHimel.png?size=60)](https://github.com/EliusHHimel \"EliusHHimel on GitHub\")\n[![jcs090218](https://github.com/jcs090218.png?size=60)](https://github.com/jcs090218 \"jcs090218 on GitHub\")\n[![Rishabh2804](https://github.com/Rishabh2804.png?size=60)](https://github.com/Rishabh2804 \"Rishabh2804 on GitHub\")\n[![shalinibhatt](https://github.com/shalinibhatt.png?size=60)](https://github.com/shalinibhatt \"shalinibhatt on GitHub\")\n[![UlisesAlexanderAM](https://github.com/UlisesAlexanderAM.png?size=60)](https://github.com/UlisesAlexanderAM \"UlisesAlexanderAM on GitHub\")\n[![SpookyJelly](https://github.com/SpookyJelly.png?size=60)](https://github.com/SpookyJelly \"SpookyJelly on GitHub\")\n[![majidtdeni666](https://github.com/majidtdeni666.png?size=60)](https://github.com/majidtdeni666 \"majidtdeni666 on GitHub\")\n[![GalexY727](https://github.com/galexy727.png?size=60)](https://github.com/galexy727 \"GalexY727 on GitHub\")\n[![HectorSaldes](https://github.com/HectorSaldes.png?size=60)](https://github.com/HectorSaldes \"HectorSaldes on GitHub\")\n[![Ash-codes18](https://github.com/Ash-codes18.png?size=60)](https://github.com/Ash-codes18 \"Ash-codes18 on GitHub\")\n[![Maagnitude](https://github.com/Maagnitude.png?size=60)](https://github.com/Maagnitude \"Maagnitude on GitHub\")\n[![cracker911181](https://github.com/cracker911181.png?size=60)](https://github.com/cracker911181 \"cracker911181 on GitHub\")\n[![quiet-node](https://github.com/quiet-node.png?size=60)](https://github.com/quiet-node \"quiet-node on GitHub\")\n[![kaustubh43](https://github.com/kaustubh43.png?size=60)](https://github.com/kaustubh43 \"kaustubh43 on GitHub\")\n[![kaisunoo](https://github.com/kaisunoo.png?size=60)](https://github.com/kaisunoo \"kaisunoo on GitHub\")\n[![meyer-pidiache](https://github.com/meyer-pidiache.png?size=60)](https://github.com/meyer-pidiache \"Meyer Pidiache on GitHub\")\n[![jeremiahseun](https://github.com/jeremiahseun.png?size=60)](https://github.com/jeremiahseun \"Jeremiah Erinola on GitHub\")\n[![Anand Purushottam](https://github.com/creativepurus.png?size=60)](https://github.com/creativepurus \"Anand Purushottam 🇮🇳 on GitHub ☕\")\n[![Greg Chism](https://github.com/Gchism94.png?size=60)](https://github.com/Gchism94 \"Greg Chism 🤘 on GitHub\")\n[![turbomaster95](https://github.com/turbomaster95.png?size=60)](https://github.com/turbomaster95 \"turbomaster95 🗿 🇮🇳 on GitHub ☕\")\n[![K1rsN7](https://github.com/K1rsN7.png?size=60)](https://github.com/K1rsN7 \"K1rsN7 on GitHub💪\")\n[![codesbyahsen](https://github.com/codesbyahsen.png?size=60)](https://github.com/codesbyahsen \"AHSEN ALEE on GitHub\")\n[![Freddywhest](https://github.com/Freddywhest.png?size=60)](https://github.com/Freddywhest \"Alfred Nti on GitHub\")\n[![Shiro-cha](https://github.com/Shiro-cha.png?size=60)](https://github.com/Shiro-cha \"Shiro Yukami on Github\")\n[![Abid-Nafi](https://github.com/MohammedAbidNafi.png?size=60)](https://github.com/MohammedAbidNafi \"Abid Nafi on Github\")\n[![Srijan-Baniyal](https://github.com/Srijan-Baniyal.png?size=60)](https://github.com/Srijan-Baniyal \"Srijan Baniyal on Github\")\n[![BrunoOliveiraS](https://github.com/BrunoOliveiraS.png?size=60)](https://github.com/BrunoOliveiraS \"Bruno Oliveira on Github\")\n[![zidk](https://github.com/zidk.png?size=60)](https://github.com/zidk \"Pablo Gonzalez on Github\")\n[![tshr-d-dragon](https://github.com/tshr-d-dragon.png?size=60)](https://github.com/tshr-d-dragon \"Tushar Patil on Github\")\n[![DeveshYadav13](https://github.com/DeveshYadav13.png?size=60)](https://github.com/DeveshYadav13 \"Devesh Yadav on Github\")\n[![HauseMasterZ](https://github.com/HauseMasterZ.png?size=60)](https://github.com/HauseMasterZ \"HauseMaster on Github\")\n[![hyskoniho](https://github.com/hyskoniho.png?size=60)](https://github.com/hyskoniho \"hyskoniho on Github\")\n[![elvisisvan](https://github.com/elvisisvan.png?size=60)](https://github.com/elvisisvan \"elvisisvan on Github\")\n[![Nquenan](https://github.com/Nquenan.png?size=60)](https://github.com/Nquenan \"Nquenan on Github\")\n[![akhilnev](https://github.com/akhilnev.png?size=60)](https://github.com/akhilnev \"Akhilesh Nevatia on Github\")\n[![mannysoft](https://github.com/mannysoft.png?size=60)](https://github.com/mannysoft \"Manny Isles on Github\")\n[![LinThitHtwe](https://github.com/LinThitHtwe.png?size=60)](https://github.com/LinThitHtwe \"LinThitHtwe on Github\")\n[![Elio-Aliaj](https://github.com/Elio-Aliaj.png?size=60)](https://github.com/Elio-Aliaj \"Elio-Aliaj on Github\")\n[![presentformyfriends](https://github.com/presentformyfriends.png?size=60)](https://github.com/presentformyfriends \"presentformyfriends on Github\")\n[![Ad7amstein](https://github.com/Ad7amstein.png?size=60)](https://github.com/Ad7amstein \"Ad7amstein on Github\")\n[![LakshmanKishore](https://github.com/LakshmanKishore.png?size=60)](https://github.com/LakshmanKishore \"LakshmanKishore on Github\")\n[![mateusadada](https://github.com/mateusadada.png?size=60)](https://github.com/mateusadada \"mateusadada on Github\")\n[![fasakinhenry](https://github.com/fasakinhenry.png?size=60)](https://github.com/fasakinhenry \"fasakinhenry on Github\")\n[![YousifAbozid](https://github.com/YousifAbozid.png?size=60)](https://github.com/YousifAbozid \"YousifAbozid on Github\")\n[![hheinsoee](https://github.com/hheinsoee.png?size=60)](https://github.com/hheinsoee \"hheinsoee on Github\")\n[![lucmsilva651](https://github.com/lucmsilva651.png?size=60)](https://github.com/lucmsilva651 \"lucmsilva651 on Github\")\n[![ashertenenbaum](https://github.com/ashertenenbaum.png?size=60)](https://github.com/ashertenenbaum \"ashertenenbaum on Github\")\n[![0dxplt](https://github.com/0dxplt.png?size=60)](https://github.com/0dxplt \"0dxplt on Github\")\n[![HerobrineTV](https://github.com/HerobrineTV.png?size=60)](https://github.com/HerobrineTV \"HerobrineTV on Github\")\n[![Borketh](https://github.com/Borketh.png?size=60)](https://github.com/Borketh \"Borketh on Github\")\n[![Jafeth Yahuma](https://github.com/Callmeproteus.png?size=60)](https://github.com/Callmeproteus \"Callmeproteus on GitHub\")\n[![João Pedro](https://github.com/JotaP07.png?size=60)](https://github.com/JotaP07 \"JP on GitHub\")\n[![suzukimain](https://github.com/suzukimain.png?size=60)](https://github.com/suzukimain \"suzukimain on Github\")\n[![caesar013](https://github.com/caesar013.png?size=60)](https://github.com/caesar013 \"caesar013 on Github\")\n[![amir78729](https://github.com/amir78729.png?size=60)](https://github.com/amir78729 \"Amir on Github\")\n[![AJsuper007](https://github.com/AJsuper007.png?size=60)](https://github.com/AJsuper007 \"AJsuper007 on Github\")\n[![ABAN26](https://github.com/ABAN26.png?size=60)](https://github.com/ABAN26 \"ABAN26 on Github\")\n[![Soham More](https://github.com/SohamMore100.png?size=60)](https://github.com/SohamMore100 \"Soham More on GitHub\")\n[![Yogi Hariyani](https://github.com/yobro7292.png?size=60)](https://github.com/Yobro7292 \"Yogi Hariyani on GitHub\")\n[![Antônio Nascimento](https://github.com/Ninja1375.png?size=60)](https://github.com/Ninja1375 \"Antônio Nascimento on GitHub\")\n[![Ishaan Rastogi](https://github.com/TridentifyIshaan.png?size=60)](https://github.com/TridentifyIshaan \"Tridentify Ishaan on GitHub\")\n[![Eligijus Ciza](https://github.com/krimmyy.png?size=60)](https://github.com/krimmyy \"Eligijus Ciza on GitHub\")\n[![Ashish Vaghela](https://github.com/Ashish-CodeJourney.png?size=60)](https://github.com/Ashish-CodeJourney \"Ashish Vaghela on GitHub\")\n[![Snoopy1866](https://github.com/Snoopy1866.png?size=60)](https://github.com/Snoopy1866 \"Snoopy1866 on GitHub\")\n[![Sarthak Krishak](https://github.com/SarthakKrishak.png?size=60)](https://github.com/SarthakKrishak \"Sarthak Krishak on GitHub\")\n[![Austin Musuya](https://github.com/AustinMusuya.png?size=60)](https://github.com/AustinMusuya \"Austin Musuya on GitHub\")\n[![Rohit](https://github.com/EngineerRohit01.png?size=60)](https://github.com/EngineerRohit01 \"Rohit on GitHub\")\n[![Sandeep Prasad](https://github.com/Sandeep-Petwal.png?size=60)](https://github.com/sandeep-Petwal \"Sandeep Prasad on GitHub\")\n[![Saad Hussain](https://github.com/saadhusayn.png?size=60)](https://github.com/saadhusayn \"Saad Hussain on Github\")\n[![Rahul Raj](https://github.com/Theglassofdata.png?size=60)](https://github.com/Theglassofdata \"Rahul Raj\")\n[![Aditya Singh](https://github.com/EchoSingh.png?size=60)](https://github.com/EchoSingh \"Aditya Singh on Github\")\n[![Muhammad Noraeii](https://github.com/Muhammad-Noraeii.png?size=60)](https://github.com/Muhammad-Noraeii \"Muhammad Noraeii on Github\")\n[![Harry Skerritt](https://github.com/user-attachments/assets/392d404f-b0af-4fab-b4f7-120a36ffc3f4)](https://github.com/Harry-Skerritt \"Harry-Skerritt on Github\")\n[![Madhurima Rawat](https://github.com/madhurimarawat.png?size=60)](https://github.com/madhurimarawat \"Madhurima Rawat on Github\")\n[![wfxey](https://github.com/wfxey.png?size=60)](https://github.com/wfxey \"wfxey on Github\")\n[![Lixiao Zhu](https://github.com/zhulixiao.png?size=60)](https://github.com/zhulixiao \"Lixiao Zhu on Github\")\n[![Ahmed Nassar](https://github.com/AhmedNassar7.png?size=60)](https://github.com/AhmedNassar7 \"Ahmed Nassar on Github\")\n\nFeel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issues/21#issue-870549556) and add yours!\n\n## 🔧 Options\n\n|    Parameter    |                                   Details                                   |  Type   |                                                      Example                                                      |\n| :-------------: | :-------------------------------------------------------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------------: |\n|     `lines`     |       Text to display with lines separated by `;` and `+` for spaces        | string  |                                        `First+line;Second+line;Third+line`                                        |\n|    `height`     |             Height of the output SVG in pixels (default: `50`)              | integer |                                                Any positive number                                                |\n|     `width`     |             Width of the output SVG in pixels (default: `400`)              | integer |                                                Any positive number                                                |\n|     `size`      |                     Font size in pixels (default: `20`)                     | integer |                                                Any positive number                                                |\n|     `font`      |                     Font family (default: `monospace`)                      | string  |                                            Any font from Google Fonts                                             |\n|     `color`     |                    Color of the text (default: `36BCF7`)                    | string  |                                         Hex code without # (eg. `F724A9`)                                         |\n|  `background`   |             Background color of the text (default: `00000000`)              | string  |                                         Hex code without # (eg. `FEFF4C`)                                         |\n|    `center`     |    `true` to center text or `false` for left aligned (default: `false`)     | boolean |                                                 `true` or `false`                                                 |\n|    `vCenter`    |  `true` to center vertically or `false`(default) to align above the center  | boolean |                                                 `true` or `false`                                                 |\n|   `multiline`   |  `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |                                                 `true` or `false`                                                 |\n|   `duration`    | Duration of the printing of a single line in milliseconds (default: `5000`) | integer |                                                Any positive number                                                |\n|     `pause`     |     Duration of the pause between lines in milliseconds (default: `0`)      | integer |                                              Any non-negative number                                              |\n|    `repeat`     |  `true` to loop around to the first line after the last (default: `true`)   | boolean |                                                 `true` or `false`                                                 |\n|   `separator`   |     Separator used between lines in the lines parameter (default: `;`)      | string  |                                               `;`, `;;`, `/`, etc.                                                |\n| `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 |\n\n## 📤 Deploying it on your own\n\nIf you can, it is preferable to host the files on your own server.\n\nDoing this can lead to better uptime and more control over customization (you can modify the code for your usage).\n\nYou can deploy the PHP files on any website server with PHP installed or as a Heroku app.\n\n### Step-by-step instructions for deploying to Heroku\n\n1. Sign in to **Heroku** or create a new account at <https://heroku.com>\n2. Click the \"Deploy to Heroku\" button below\n\n[![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)\n\n3. On the page that comes up, click **\"Deploy App\"** at the end of the form\n4. Once the app is deployed, click **\"Manage App\"** to go to the dashboard\n5. Scroll down to the **Domains** section in the settings to find the URL you will use in place of `readme-typing-svg.demolab.com`\n\n## 🤗 Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.\n\nMake sure your request is meaningful and you have tested the app locally before submitting a pull request.\n\nRefer to [CONTRIBUTING.md](/CONTRIBUTING.md) for more details on contributing, installing requirements, and running the application.\n\n## 🙋‍♂️ Support\n\n💙 If you like this project, give it a ⭐ and share it with friends!\n\n<!-- markdownlint-disable MD033 -->\n<p align=\"left\">\n  <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>\n  <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>\n</p>\n<!-- markdownlint-enable MD033 -->\n\n[☕ Buy me a coffee](https://ko-fi.com/jlawrence)\n\n---\n\nMade with ❤️ and PHP\n\n<!-- markdownlint-disable MD033 -->\n\n<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>\n\n<!-- markdownlint-enable MD033 -->\n\nThis project uses [Twemoji](https://github.com/twitter/twemoji), published under the [CC-BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)\n"
  },
  {
    "path": "app.json",
    "content": "{\n  \"name\": \"Readme Typing SVG\",\n  \"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.\",\n  \"repository\": \"https://github.com/DenverCoder1/readme-typing-svg/\",\n  \"keywords\": [\"github\", \"dynamic\", \"readme\", \"typing\", \"svg\", \"profile\"],\n  \"formation\": {\n    \"web\": {\n      \"quantity\": 1,\n      \"size\": \"basic\"\n    }\n  }\n}\n"
  },
  {
    "path": "composer.json",
    "content": "{\n  \"name\": \"denvercoder1/readme-typing-svg\",\n  \"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.\",\n  \"keywords\": [\n    \"github\",\n    \"dynamic\",\n    \"readme\",\n    \"typing\",\n    \"svg\",\n    \"profile\"\n  ],\n  \"license\": \"MIT\",\n  \"version\": \"0.8.0\",\n  \"homepage\": \"https://github.com/DenverCoder1/readme-typing-svg/\",\n  \"autoload\": {\n    \"classmap\": [\n      \"src/models/\",\n      \"src/views/\",\n      \"src/controllers/\",\n      \"src/enums/\",\n      \"src/exceptions/\",\n      \"src/interfaces/\"\n    ]\n  },\n  \"require\": {\n    \"php\": \"^8.1\",\n    \"vlucas/phpdotenv\": \"^5.3\"\n  },\n  \"require-dev\": {\n    \"phpunit/phpunit\": \"^11\"\n  },\n  \"scripts\": {\n    \"start\": \"php8 -S localhost:8000 -t src || php -S localhost:8000 -t src\",\n    \"test\": \"./vendor/bin/phpunit --testdox tests\",\n    \"format:check\": \"prettier --check *.md **/**/*.{php,md,js,css} --print-width 120\",\n    \"format\": \"prettier --write *.md **/**/*.{php,md,js,css} --print-width 120\"\n  }\n}"
  },
  {
    "path": "docs/faq.md",
    "content": "# FAQ\n\n## How do I include Readme Typing SVG in my Readme?\n\nMarkdown 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:\n\n### Markdown\n\n```md\n[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)\n```\n\n### HTML\n\n<!-- prettier-ignore-start -->\n```html\n<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>\n```\n<!-- prettier-ignore-end -->\n\n## The text is getting cut off at the end, how do I fix it?\n\nThe text rendered within the SVG can be any variable width, therefore you must specify the width manually to ensure the text will fit.\n\nThe `width` parameter in the URL should be increased such that the full width of the text is displayed properly.\n\n```md\nhttps://readme-typing-svg.demolab.com/?lines=Your+Long+Message+With+A+Long+Width&width=460\n```\n\n## How do I center the image on the page?\n\nTo center align images, you must use the HTML syntax and wrap it in an element with the HTML attribute `align=\"center\"`.\n\n<!-- prettier-ignore-start -->\n```html\n<p align=\"center\">\n  <a href=\"https://git.io/typing-svg\"><img src=\"https://readme-typing-svg.demolab.com/?lines=This+image+is+center-aligned&font=Fira%20Code&center=true&width=380&height=50\"/></a>\n</p>\n```\n<!-- prettier-ignore-end -->\n\n## How do I add multiple spaces in the middle of a line?\n\nSimilar to HTML, SVG/XML treats multiple consecutive spaces as a single space.\n\nA 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.\n\n## How do I make different SVGs for dark mode and light mode?\n\nAs 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.\n\n<!-- prettier-ignore-start -->\n```html\n<picture>\n  <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://readme-typing-svg.demolab.com/?lines=You+are+using+dark+mode&color=FFFFFF\" />\n  <img src=\"https://readme-typing-svg.demolab.com/?lines=You+are+using+light+mode&color=000000\" />\n</picture>\n```\n<!-- prettier-ignore-end -->\n\n## How do I create a Readme for my profile?\n\nA 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).\n"
  },
  {
    "path": "src/controllers/RendererController.php",
    "content": "<?php declare(strict_types=1);\n\n/**\n * Controller for choosing model and rendering SVG outputs\n */\nclass RendererController\n{\n    /**\n     * @var RendererModel $model\n     */\n    private $model;\n\n    /**\n     * @var RendererView $view\n     */\n    private $view;\n\n    /**\n     * @var array<string, string> $params\n     */\n    private $params;\n\n    /**\n     * @var ResponseEnum $statusCode Response status code\n     */\n    private ResponseEnum $statusCode = ResponseEnum::HTTP_OK;\n\n    /**\n     * Construct RendererController\n     *\n     * @param array<string, string> $params request parameters\n     */\n    public function __construct(array $params)\n    {\n        $this->params = $params;\n\n        // set up model and view\n        try {\n            // create renderer model\n            $this->model = new RendererModel(__DIR__ . \"/../templates/main.php\", $params);\n            // create renderer view\n            $this->view = new RendererView($this->model);\n        } catch (Exception $error) {\n            // create error rendering model\n            $this->model = new ErrorModel(__DIR__ . \"/../templates/error.php\", $error->getMessage());\n            // create error rendering view\n            $this->view = new ErrorView($this->model);\n\n            // set status code\n            $this->statusCode =\n                $error instanceof IStatusException ? $error->getStatus() : ResponseEnum::HTTP_INTERNAL_SERVER_ERROR;\n        }\n    }\n\n    /**\n     * Redirect to the demo site\n     */\n    private function redirectToDemo(): void\n    {\n        header(\"Location: demo/\");\n        exit();\n    }\n\n    /**\n     * Set content type for page output\n     */\n    private function setContentType($type): void\n    {\n        header(\"Content-type: {$type}\");\n    }\n\n    /**\n     * Set cache to refresh periodically\n     * This ensures any updates will roll out to all profiles\n     */\n    private function setCacheRefreshDaily(): void\n    {\n        // set cache to refresh once per day\n        $timestamp = gmdate(\"D, d M Y 23:59:00\") . \" GMT\";\n        header(\"Expires: $timestamp\");\n        header(\"Last-Modified: $timestamp\");\n        header(\"Pragma: no-cache\");\n        header(\"Cache-Control: no-cache, must-revalidate\");\n    }\n\n    /**\n     * Set output headers\n     */\n    public function setHeaders(): void\n    {\n        // redirect to demo site if no text is given\n        if (!isset($this->params[\"lines\"])) {\n            $this->redirectToDemo();\n        }\n\n        // set the content type header\n        $this->setContentType(\"image/svg+xml\");\n\n        // set cache headers\n        $this->setCacheRefreshDaily();\n\n        // set status code\n        http_response_code($this->statusCode->value);\n    }\n\n    /**\n     * Get the rendered SVG\n     *\n     * @return string The SVG to output\n     */\n    public function render(): string\n    {\n        return $this->view->render();\n    }\n}\n"
  },
  {
    "path": "src/demo/css/loader.css",
    "content": ".loader,\n.loader:before,\n.loader:after {\n  display: none;\n  border-radius: 50%;\n  width: 2.5em;\n  height: 2.5em;\n  -webkit-animation-fill-mode: both;\n  animation-fill-mode: both;\n  -webkit-animation: load7 1.8s infinite ease-in-out;\n  animation: load7 1.8s infinite ease-in-out;\n}\n\n.loader {\n  color: var(--blue-light);\n  font-size: 10px;\n  margin: 0 0 38px 15px;\n  position: relative;\n  text-indent: -9999em;\n  -webkit-transform: translateY(-4px) translateZ(0) scale(0.5);\n  -ms-transform: translateY(-4px) translateZ(0) scale(0.5);\n  transform: translateY(-4px) translateZ(0) scale(0.5);\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n}\n\n.loader:before,\n.loader:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n}\n\n.loader:before {\n  left: -3.5em;\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n}\n\n.loader:after {\n  left: 3.5em;\n}\n\n@-webkit-keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em;\n  }\n\n  40% {\n    box-shadow: 0 2.5em 0 0;\n  }\n}\n\n@keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em;\n  }\n\n  40% {\n    box-shadow: 0 2.5em 0 0;\n  }\n}\n\n.loading + .loader,\n.loading + .loader:before,\n.loading + .loader:after {\n  display: block;\n}\n\n.loading {\n  display: none;\n}\n"
  },
  {
    "path": "src/demo/css/style.css",
    "content": "html {\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  -webkit-box-sizing: inherit;\n  -moz-box-sizing: inherit;\n  box-sizing: inherit;\n}\n\n:root {\n  --background: #eee;\n  --card-background: white;\n  --text: #1a1a1a;\n  --border: #ccc;\n  --stroke: #a9a9a9;\n  --blue-light: #2196f3;\n  --blue-dark: #1e88e5;\n  --button-outline: black;\n  --red: #ff6464;\n  --red-alt: #e45353;\n}\n\n[data-theme=\"dark\"] {\n  --background: #090d13;\n  --card-background: #0d1117;\n  --text: #efefef;\n  --border: #2a2e34;\n  --stroke: #737373;\n  --blue-light: #1976d2;\n  --blue-dark: #1565c0;\n  --button-outline: black;\n  --red: #ff6464;\n  --red-alt: #e45353;\n}\n\nbody {\n  background: var(--background);\n  font-family: \"Open Sans\", Roboto, Arial, sans-serif;\n  padding-top: 10px;\n  color: var(--text);\n}\n\n.github {\n  text-align: center;\n  margin-bottom: 12px;\n}\n\n.github span {\n  margin: 0 2px;\n}\n\n.container {\n  margin: auto;\n  max-width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.properties,\n.output {\n  max-width: 550px;\n  margin: 10px;\n  background: var(--card-background);\n  padding: 25px;\n  padding-top: 0;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n}\n\n@media only screen and (max-width: 1024px) {\n  .properties,\n  .output {\n    width: 100%;\n  }\n}\n\nh1 {\n  text-align: center;\n}\n\nh2 {\n  border-bottom: 1px solid var(--stroke);\n}\n\n:not(.btn):focus {\n  outline: var(--blue-light) auto 2px;\n}\n\n.btn {\n  max-width: 100%;\n  background-color: var(--blue-light);\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  font-family: inherit;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  transition: 0.2s ease-in-out;\n}\n\n.btn:focus {\n  outline: var(--button-outline) auto 2px;\n}\n\n.btn:not(:disabled):hover {\n  background-color: var(--blue-dark);\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n.btn:disabled {\n  opacity: 0.8;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n\n.parameters {\n  margin: auto;\n  display: grid;\n  align-items: center;\n  justify-content: start;\n  text-align: left;\n  grid-gap: 8px;\n}\n\n.two-columns {\n  grid-template-columns: auto 1fr;\n}\n\n.three-columns {\n  grid-template-columns: auto 1fr auto;\n}\n\n.parameters .btn {\n  margin-top: 8px;\n}\n\n.parameters input[type=\"text\"],\n.parameters input[type=\"number\"],\n.parameters input.jscolor,\n.parameters select {\n  padding: 10px 14px;\n  display: inline-block;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  box-sizing: border-box;\n  font-family: inherit;\n  background: var(--card-background);\n  width: 100%;\n  min-width: 70px;\n  color: inherit;\n}\n\n.param.inline {\n  max-width: 54px;\n  padding: 10px 6px !important;\n}\n\n.parameters input.jscolor {\n  font-size: 12px;\n  max-width: 218px;\n}\n\n@media only screen and (max-width: 1024px) {\n  .parameters input.jscolor {\n    max-width: none;\n  }\n}\n\n.parameters select {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  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>\");\n  background-repeat: no-repeat;\n  background-position-x: 100%;\n  background-position-y: 5px;\n}\n\n[data-theme=\"dark\"] .parameters select {\n  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>\");\n}\n\nspan[title=\"required\"] {\n  color: var(--red);\n}\n\ninput:invalid {\n  outline: 2px var(--red) auto;\n}\n\ninput:focus:invalid {\n  outline: none;\n  box-shadow: 0 0 0 1px var(--blue-light), 0 0 0 3px var(--red);\n}\n\n.delete-line.btn {\n  margin: 0;\n  background: inherit;\n  color: inherit;\n  font-size: 22px;\n  padding: 0;\n  height: 40px;\n  width: 40px;\n  background: var(--card-background);\n  color: var(--red-alt);\n  box-shadow: none;\n}\n\n.delete-line.btn:not(:disabled):hover {\n  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);\n  background: #e4535314;\n}\n\n.delete-line.btn:disabled {\n  color: var(--stroke);\n}\n\n.add-line.btn {\n  width: 100px;\n  font-size: 1em;\n  padding: 6px 0;\n  margin-top: 0.8em;\n}\n\n.output img {\n  max-width: 100%;\n}\n\n.output img.outlined {\n  border: 1px dashed var(--red);\n  border-radius: 2px;\n}\n\n.output .code-container {\n  background: var(--border);\n  border-radius: 6px;\n  padding: 12px 16px;\n  word-break: break-all;\n}\n\n.output .btn {\n  margin-top: 16px;\n}\n\nlabel.show-border {\n  display: block;\n  margin-top: 8px;\n}\n\n.label-group {\n  display: flex;\n  gap: 0.5rem;\n}\n\na.icon {\n  color: var(--blue-light);\n}\n\n.top-bottom-split {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n/* tooltips */\n.tooltip {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* tooltip bubble */\n.tooltip:before {\n  content: attr(title);\n  position: absolute;\n  transform: translateY(-2.45rem);\n  height: auto;\n  width: auto;\n  background: #4a4a4afa;\n  border-radius: 4px;\n  color: white;\n  line-height: 30px;\n  font-size: 1em;\n  padding: 0 12px;\n  pointer-events: none;\n  opacity: 0;\n}\n\n/* tooltip bottom triangle */\n.tooltip:after {\n  content: \"\";\n  position: absolute;\n  transform: translateY(-1.35rem);\n  border-style: solid;\n  border-color: #4a4a4afa transparent transparent transparent;\n  pointer-events: none;\n  opacity: 0;\n}\n\n/* show tooltip on hover */\n.tooltip[title]:hover:before,\n.tooltip[title]:hover:after,\n.tooltip:disabled:hover:before,\n.tooltip:disabled:hover:after {\n  transition: 0.2s ease-in opacity;\n  opacity: 1;\n}\n\n.tooltip:disabled:before {\n  content: \"You must first input valid text.\";\n}\n\n/* link underline effect */\na.underline-hover {\n  position: relative;\n  text-decoration: none;\n  color: var(--text);\n  margin-top: 2em;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25em;\n}\n.underline-hover::before {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 0;\n  height: 1px;\n  background-color: var(--blue-light);\n  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n}\n@media (hover: hover) and (pointer: fine) {\n  .underline-hover:hover::before {\n    left: 0;\n    right: auto;\n    width: 100%;\n  }\n}\n"
  },
  {
    "path": "src/demo/css/toggle-dark.css",
    "content": "a.darkmode {\n  position: fixed;\n  top: 2em;\n  right: 2em;\n  color: var(--text);\n  background: var(--background);\n  height: 3em;\n  width: 3em;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 2px solid var(--border);\n  box-shadow: 0 0 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);\n  transition: 0.2s ease-in box-shadow;\n}\n\na.darkmode .icon-moon,\na.darkmode .icon-sun {\n  position: absolute;\n  width: 1.25em;\n  height: 1.25em;\n}\n\na.darkmode .icon-moon svg,\na.darkmode .icon-sun svg {\n  width: 100%;\n  height: 100%;\n}\n\na.darkmode .icon-moon {\n  display: block;\n}\n\na.darkmode .icon-sun {\n  display: none;\n}\n\n[data-theme=\"dark\"] a.darkmode .icon-moon {\n  display: none;\n}\n\n[data-theme=\"dark\"] a.darkmode .icon-sun {\n  display: block;\n}\n\na.darkmode:hover {\n  box-shadow: 0 0 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);\n}\n\n@media only screen and (max-width: 600px) {\n  a.darkmode {\n    top: unset;\n    bottom: 1em;\n    right: 1em;\n  }\n}\n"
  },
  {
    "path": "src/demo/index.php",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <!-- Global site tag (gtag.js) - Google Analytics -->\n    <script async src=\"https://www.googletagmanager.com/gtag/js?id=G-48CYVH0XEF\"></script>\n    <script>\n        window.dataLayer = window.dataLayer || [];\n\n        function gtag() {\n            dataLayer.push(arguments);\n        }\n        gtag('js', new Date());\n        gtag('config', 'G-48CYVH0XEF');\n    </script>\n    <title>Readme Typing SVG - Demo Site</title>\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Open+Sans&display=swap\">\n    <link rel=\"stylesheet\" href=\"./css/style.css\">\n    <link rel=\"stylesheet\" href=\"./css/loader.css\">\n    <link rel=\"stylesheet\" href=\"./css/toggle-dark.css\">\n    <script type=\"text/javascript\" src=\"./js/script.js\" defer></script>\n    <script type=\"text/javascript\" src=\"./js/toggle-dark.js\" defer></script>\n    <script type=\"text/javascript\" src=\"./js/jscolor.min.js\" defer></script>\n    <script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n    <link rel=\"icon\" type=\"image/png\" href=\"favicon.png\">\n</head>\n\n<body <?= isset($_COOKIE[\"darkmode\"]) && $_COOKIE[\"darkmode\"] == \"on\" ? 'data-theme=\"dark\"' : \"\" ?>>\n    <h1>⌨️ Readme Typing SVG</h1>\n\n    <!-- GitHub badges/links section -->\n    <div class=\"github\">\n        <!-- GitHub Sponsors -->\n        <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>\n        <!-- View on GitHub -->\n        <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>\n        <!-- GitHub Star -->\n        <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>\n    </div>\n\n    <div class=\"container\">\n        <div class=\"properties\">\n            <h2>Add your text</h2>\n            <form class=\"parameters three-columns lines\">\n                <!-- Lines are added in JavaScript -->\n            </form>\n            <button class=\"add-line btn\" onclick=\"return preview.addLines(1);\">+ Add line</button>\n\n            <h2>Options</h2>\n            <form class=\"parameters two-columns options\">\n                <div class=\"label-group\">\n                    <label for=\"font\">Font</label>\n                    <a href=\"https://fonts.google.com/\" target=\"_blank\" class=\"icon tooltip\" title=\"Enter a font name from Google Fonts\">\n                        <svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <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>\n                            <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>\n                        </svg>\n                    </a>\n                </div>\n                <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.\">\n\n                <label for=\"weight\">Font weight</label>\n                <input class=\"param\" type=\"number\" id=\"weight\" name=\"weight\" alt=\"Font weight\" placeholder=\"400\" value=\"400\" min=\"100\" max=\"900\" step=\"100\">\n\n                <label for=\"size\">Font size</label>\n                <input class=\"param\" type=\"number\" id=\"size\" name=\"size\" alt=\"Font size\" placeholder=\"20\" value=\"20\">\n\n                <div class=\"label-group\">\n                    <label for=\"letterSpacing\">Letter spacing</label>\n                    <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\">\n                        <svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <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>\n                            <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>\n                        </svg>\n                    </a>\n                </div>\n                <input class=\"param\" type=\"text\" id=\"letterSpacing\" name=\"letterSpacing\" alt=\"Letter spacing\" placeholder=\"normal\" value=\"normal\">\n\n                <label for=\"duration\">Duration (ms per line)</label>\n                <input class=\"param\" type=\"number\" id=\"duration\" name=\"duration\" alt=\"Print duration (ms)\" placeholder=\"5000\" value=\"5000\">\n\n                <label for=\"pause\">Pause (ms after line)</label>\n                <input class=\"param\" type=\"number\" id=\"pause\" name=\"pause\" alt=\"Pause duration (ms)\" placeholder=\"1000\" value=\"1000\">\n\n                <label for=\"color\">Font color</label>\n                <input class=\"param jscolor jscolor-active\" id=\"color\" name=\"color\" alt=\"Font color\" data-jscolor=\"{ format: 'hexa' }\" value=\"#36BCF7\">\n\n                <label for=\"background\">Background color</label>\n                <input class=\"param jscolor jscolor-active\" id=\"background\" name=\"background\" alt=\"Background color\" data-jscolor=\"{ format: 'hexa' }\" value=\"#00000000\">\n\n                <label for=\"center\">Horizontally Centered</label>\n                <select class=\"param\" id=\"center\" name=\"center\" alt=\"Horizontally Centered\">\n                    <option value=\"false\">false</option>\n                    <option value=\"true\">true</option>\n                </select>\n\n                <label for=\"vCenter\">Vertically Centered</label>\n                <select class=\"param\" id=\"vCenter\" name=\"vCenter\" alt=\"Vertically Centered\">\n                    <option value=\"false\">false</option>\n                    <option value=\"true\">true</option>\n                </select>\n\n                <label for=\"multiline\">Multiline</label>\n                <select class=\"param\" id=\"multiline\" name=\"multiline\" alt=\"Multiline\">\n                    <option value=\"false\">Type sentences on one line</option>\n                    <option value=\"true\">Each sentence on a new line</option>\n                </select>\n\n                <label for=\"repeat\">Repeat</label>\n                <select class=\"param\" id=\"repeat\" name=\"repeat\" alt=\"Repeat\">\n                    <option value=\"true\">true</option>\n                    <option value=\"false\">false</option>\n                </select>\n\n                <label for=\"random\">Random</label>\n                <select class=\"param\" id=\"random\" name=\"random\" alt=\"Random\">\n                    <option value=\"false\">false</option>\n                    <option value=\"true\">true</option>\n                </select>\n\n                <label for=\"dimensions\" title=\"Width ✕ Height\">Width ✕ Height</label>\n                <span id=\"dimensions\">\n                    <input class=\"param inline\" type=\"number\" id=\"width\" name=\"width\" alt=\"Width (px)\" placeholder=\"435\" value=\"435\">\n                    <label>✕</label>\n                    <input class=\"param inline\" type=\"number\" id=\"height\" name=\"height\" alt=\"Height (px)\" placeholder=\"50\" value=\"50\">\n                </span>\n\n                <input type=\"button\" class=\"btn\" value=\"Reset\" onclick=\"preview.reset();\">\n\n                <button type=\"button\" class=\"copy-button btn tooltip\" onclick=\"clipboard.copyPermalink(this);\" onmouseout=\"tooltip.reset(this);\" disabled>Copy Permalink</button>\n            </form>\n        </div>\n\n        <div class=\"output top-bottom-split\">\n            <div class=\"top\">\n                <h2>Preview</h2>\n\n                <img alt=\"Readme Typing SVG\" src=\"/?lines=The+five+boxing+wizards+jump+quickly\" onload=\"this.classList.remove('loading')\" onerror=\"this.classList.remove('loading')\" />\n                <div class=\"loader\">Loading...</div>\n\n                <label class=\"show-border\">\n                    <input type=\"checkbox\">\n                    Show border\n                </label>\n\n                <div>\n                    <h2>Markdown</h2>\n                    <div class=\"code-container md\">\n                        <code></code>\n                    </div>\n\n                    <button class=\"copy-button btn tooltip\" onclick=\"clipboard.copyCode(this);\" onmouseout=\"tooltip.reset(this);\" disabled>\n                        Copy To Clipboard\n                    </button>\n                </div>\n\n                <div>\n                    <h2>HTML</h2>\n                    <div class=\"code-container html\">\n                        <code></code>\n                    </div>\n\n                    <button class=\"copy-button btn tooltip\" onclick=\"clipboard.copyCode(this);\" onmouseout=\"tooltip.reset(this);\" disabled>\n                        Copy To Clipboard\n                    </button>\n                </div>\n            </div>\n            <div class=\"bottom\">\n                <a href=\"https://github.com/DenverCoder1/readme-typing-svg/blob/main/docs/faq.md\" target=\"_blank\" class=\"underline-hover faq\">\n                    Frequently Asked Questions\n                    <svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n                            <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>\n                        </g>\n                    </svg>\n                </a>\n            </div>\n        </div>\n    </div>\n\n    <a href=\"javascript:toggleTheme()\" class=\"darkmode\" title=\"toggle dark mode\" aria-label=\"Toggle dark mode\">\n        <span class=\"icon-moon\" aria-hidden=\"true\">\n            <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\">\n                <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"></path>\n            </svg>\n        </span>\n        <span class=\"icon-sun\" aria-hidden=\"true\">\n            <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\">\n                <circle cx=\"12\" cy=\"12\" r=\"5\"></circle>\n                <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"></line>\n                <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"></line>\n                <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"></line>\n                <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"></line>\n                <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"></line>\n                <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"></line>\n                <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"></line>\n                <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"></line>\n            </svg>\n        </span>\n    </a>\n</body>\n\n</html>"
  },
  {
    "path": "src/demo/js/script.js",
    "content": "const preview = {\n  // default values for Readme Typing SVG parameters\n  defaults: {\n    font: \"monospace\",\n    weight: \"400\",\n    color: \"36BCF7\",\n    background: \"00000000\",\n    size: \"20\",\n    letterSpacing: \"normal\",\n    center: \"false\",\n    vCenter: \"false\",\n    multiline: \"false\",\n    width: \"400\",\n    height: \"50\",\n    duration: \"5000\",\n    pause: \"0\",\n    repeat: \"true\",\n    random: \"false\",\n    separator: \";\",\n  },\n  // input field initial values that differ from the defaults\n  overrides: {\n    font: \"Fira Code\",\n    pause: \"1000\",\n    width: \"435\",\n  },\n  // dummy text for default line values\n  dummyText: [\n    \"The five boxing wizards jump quickly\",\n    \"How vexingly quick daft zebras jump\",\n    \"Quick fox jumps nightly above wizard\",\n    \"Sphinx of black quartz, judge my vow\",\n    \"Waltz, bad nymph, for quick jigs vex\",\n    \"Glib jocks quiz nymph to vex dwarf\",\n    \"Jived fox nymph grabs quick waltz\",\n  ],\n\n  /**\n   * Get the current parameters from the form\n   * @returns {object} The current parameters\n   */\n  getParams() {\n    // get all parameters from the .param fields\n    const params = Array.from(document.querySelectorAll(\".param:not([data-index])\")).reduce((acc, next) => {\n      // copy accumulator into local object\n      let obj = acc;\n      let value = next.value;\n      // remove hash from any colors and remove \"FF\" if full opacity\n      value = value.replace(/^#([A-Fa-f0-9]{6})(?:[Ff]{2})?/, \"$1\");\n      // add value to reduction accumulator\n      obj[next.id] = value;\n      return obj;\n    }, {});\n    // add lines to parameters\n    const lineInputs = Array.from(document.querySelectorAll(\".param[data-index]\"));\n    /**\n     * Merge an array of lines with a given separator\n     * @param {array<HTMLInputElement>} lines The line input fields to merge\n     * @param {string} separator The separator to insert between lines\n     * @returns The merged lines parameter string\n     */\n    const mergeLines = function (lines, separator) {\n      return lines\n        .map((el) => el.value) // get values\n        .filter((val) => val.length) // skip blank entries\n        .join(separator); // join lines with separator\n    };\n    // change separator if it's included in the lines\n    params.separator = \";\";\n    while (mergeLines(lineInputs, \"\").indexOf(params.separator) >= 0) {\n      // change last character to next ascii character (';' through '@'), otherwise add a semicolon\n      if (params.separator.charCodeAt(params.separator.length - 1) < \"@\".charCodeAt(0)) {\n        params.separator =\n          params.separator.slice(0, -1) +\n          String.fromCharCode(params.separator.charCodeAt(params.separator.length - 1) + 1);\n      } else {\n        params.separator += \";\";\n      }\n    }\n    params.lines = mergeLines(lineInputs, params.separator);\n    return params;\n  },\n\n  /**\n   * Update the preview image and markdown\n   */\n  update() {\n    const copyButtons = document.querySelectorAll(\".copy-button\");\n    // get parameter values\n    const params = this.getParams();\n    // convert parameters to query string\n    const query = Object.keys(params)\n      .filter((key) => params[key] !== this.defaults[key]) // skip if default value\n      .map((key) => this.customEncode(key) + \"=\" + this.customEncode(params[key])) // encode keys and values\n      .join(\"&\"); // join lines with '&' delimiter\n    // generate links and markdown\n    const imageURL = `${window.location.origin}?${query}`;\n    const demoImageURL = `/?${query}`;\n    const repoLink = \"https://git.io/typing-svg\";\n    const md = `[![Typing SVG](${imageURL})](${repoLink})`;\n    const html = `<a href=\"${repoLink}\"><img src=\"${imageURL}\" alt=\"Typing SVG\" /></a>`;\n    // don't update if nothing has changed\n    const mdElement = document.querySelector(\".md code\");\n    const htmlElement = document.querySelector(\".html code\");\n    const image = document.querySelector(\".output img\");\n    if (mdElement.innerText === md) {\n      return;\n    }\n    // update image preview\n    image.src = demoImageURL;\n    image.classList.add(\"loading\");\n    // update markdown and html\n    mdElement.innerText = md;\n    htmlElement.innerText = html;\n    // disable copy button if no lines are filled in\n    copyButtons.forEach((el) => (el.disabled = !params.lines.length));\n    // update URL to match parameters\n    this.openPermalink();\n  },\n\n  /**\n   * Encode a string for use in a URL but keep semicolons as ';' and spaces as '+'\n   * @param {string} str The string to encode\n   * @returns The encoded string\n   */\n  customEncode(str) {\n    return encodeURIComponent(str).replace(/%3B/g, \";\").replace(/%20/g, \"+\");\n  },\n\n  /**\n   * Add new line input fields\n   * @param {number} count The number of lines to add\n   * @returns {false} Always returns false to prevent form submission\n   */\n  addLines(count) {\n    for (let i = 0; i < count; i++) {\n      const parent = document.querySelector(\".lines\");\n      const index = parent.querySelectorAll(\"input\").length + 1;\n      // label\n      const label = document.createElement(\"label\");\n      label.innerText = `Line ${index}`;\n      label.setAttribute(\"for\", `line-${index}`);\n      label.dataset.index = index;\n      // line input box\n      const input = document.createElement(\"input\");\n      input.className = \"param\";\n      input.type = \"text\";\n      input.id = `line-${index}`;\n      input.name = `line-${index}`;\n      input.placeholder = \"Enter text here\";\n      input.value = this.dummyText[(index - 1) % this.dummyText.length];\n      input.dataset.index = index;\n      // removal button\n      const deleteButton = document.createElement(\"button\");\n      deleteButton.className = \"delete-line btn\";\n      deleteButton.setAttribute(\"onclick\", \"return preview.removeLine(this.dataset.index);\");\n      deleteButton.innerHTML =\n        '<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>';\n      deleteButton.dataset.index = index;\n\n      // add elements\n      parent.appendChild(label);\n      parent.appendChild(input);\n      parent.appendChild(deleteButton);\n\n      // disable button if only 1\n      parent.querySelector(\".delete-line.btn\").disabled = index == 1;\n    }\n\n    // update and exit\n    this.update();\n    return false;\n  },\n\n  /**\n   * Remove a line input field\n   * @param {number} index The index of the line to remove\n   * @returns {false} Always returns false to prevent form submission\n   */\n  removeLine(index) {\n    index = Number(index);\n    const parent = document.querySelector(\".lines\");\n    // remove all elements for given property\n    parent.querySelectorAll(`[data-index=\"${index}\"]`).forEach((el) => {\n      parent.removeChild(el);\n    });\n    // update index numbers\n    const labels = parent.querySelectorAll(\"label\");\n    labels.forEach((label) => {\n      const labelIndex = Number(label.dataset.index);\n      if (labelIndex > index) {\n        label.dataset.index = labelIndex - 1;\n        label.setAttribute(\"for\", `line-${labelIndex - 1}`);\n        label.innerText = `Line ${labelIndex - 1}`;\n      }\n    });\n    const inputs = parent.querySelectorAll(\".param\");\n    inputs.forEach((input) => {\n      const inputIndex = Number(input.dataset.index);\n      if (inputIndex > index) {\n        input.dataset.index = inputIndex - 1;\n        input.setAttribute(\"id\", `line-${inputIndex - 1}`);\n        input.setAttribute(\"name\", `line-${inputIndex - 1}`);\n      }\n    });\n    const buttons = parent.querySelectorAll(\".delete-line.btn\");\n    buttons.forEach((button) => {\n      const buttonIndex = Number(button.dataset.index);\n      if (buttonIndex > index) {\n        button.dataset.index = buttonIndex - 1;\n      }\n    });\n    // disable button if only 1\n    buttons[0].disabled = buttons.length == 1;\n    // update and exit\n    this.update();\n    return false;\n  },\n\n  /**\n   * Reset all input fields to their initial values\n   * @returns {false} Always returns false to prevent form submission\n   */\n  reset() {\n    // reset all inputs\n    const inputs = document.querySelectorAll(\".param\");\n    inputs.forEach((input) => {\n      let value = this.overrides[input.name] || this.defaults[input.name];\n      if (value) {\n        if ([\"color\", \"background\"].includes(input.name)) {\n          input.jscolor.fromString(value);\n        } else {\n          input.value = value;\n        }\n      }\n    });\n  },\n\n  /**\n   * Get the current parameters in a permalink format\n   * @returns {string} The permalink URL\n   */\n  getPermalink() {\n    // get parameters from form\n    const params = this.getParams();\n    // convert parameters to query string\n    const defaultInputs = { ...this.defaults, ...this.overrides };\n    defaultInputs.lines = this.dummyText[0];\n    const query = Object.keys(params)\n      .filter((key) => params[key] !== defaultInputs[key]) // skip if default value\n      .map((key) => this.customEncode(key) + \"=\" + this.customEncode(params[key])) // encode keys and values\n      .join(\"&\"); // join lines with '&' delimiter\n    // return permalink\n    return `${window.location.origin}${window.location.pathname}` + (query ? `?${query}` : \"\");\n  },\n\n  /**\n   * Save the current parameters to the URL\n   */\n  openPermalink() {\n    window.history.replaceState({}, \"\", this.getPermalink());\n  },\n\n  /**\n   * Restore the last saved parameters from the URL\n   */\n  restore() {\n    // get parameters from URL\n    const urlParams = new URLSearchParams(window.location.search);\n    const params = { ...this.defaults, ...this.overrides, ...Object.fromEntries(urlParams) };\n    // set all parameters\n    const inputs = document.querySelectorAll(\".param\");\n    inputs.forEach((input) => {\n      let value = params[input.name];\n      if (value) {\n        if ([\"color\", \"background\"].includes(input.name)) {\n          input.jscolor.fromString(value);\n        } else {\n          input.value = value;\n        }\n      }\n    });\n    // add lines\n    const lines = params.lines || this.dummyText[0];\n    const lineInputs = lines.split(params.separator);\n    this.addLines(lineInputs.length);\n    lineInputs.forEach((line, index) => {\n      document.querySelector(`#line-${index + 1}`).value = line;\n    });\n  },\n};\n\nconst clipboard = {\n  /**\n   * Copy text to the clipboard\n   * @param {HTMLElement} btn The element that was clicked\n   * @param {String} text The text to copy\n   */\n  copy(btn, text) {\n    navigator.clipboard.writeText(text).then(() => {\n      // set tooltip text\n      btn.title = \"Copied!\";\n    });\n  },\n\n  /**\n   * Copy the text from a code block to the clipboard\n   * @param {HTMLElement} btn The element that was clicked\n   */\n  copyCode(btn) {\n    this.copy(btn, btn.parentElement.querySelector(\"code\").innerText);\n  },\n\n  /**\n   * Copy the permalink to the clipboard\n   * @param {HTMLElement} btn The element that was clicked\n   */\n  copyPermalink(btn) {\n    this.copy(btn, preview.getPermalink());\n  },\n};\n\nconst tooltip = {\n  /**\n   * Reset the tooltip text\n   * @param {HTMLElement} el The element that was clicked\n   */\n  reset(el) {\n    // remove tooltip text\n    el.removeAttribute(\"title\");\n  },\n};\n\n// refresh preview on interactions with the page\ndocument.addEventListener(\"keyup\", () => preview.update(), false);\ndocument.addEventListener(\"click\", () => preview.update(), false);\n\n// checkbox listener\ndocument.querySelector(\".show-border input\").addEventListener(\"change\", function () {\n  const img = document.querySelector(\".output img\");\n  this.checked ? img.classList.add(\"outlined\") : img.classList.remove(\"outlined\");\n});\n\n// when the page loads\nwindow.addEventListener(\n  \"load\",\n  () => {\n    preview.restore(); // restore parameters\n    preview.update(); // update preview\n  },\n  false\n);\n"
  },
  {
    "path": "src/demo/js/toggle-dark.js",
    "content": "// enable dark mode on load if user prefers dark themes and has not used the toggle\ngetCookie(\"darkmode\") === null && window.matchMedia(\"(prefers-color-scheme: dark)\").matches && darkmode();\n\nfunction toggleTheme() {\n  // turn on dark mode\n  if (document.body.getAttribute(\"data-theme\") !== \"dark\") {\n    darkmode();\n  }\n  // turn off dark mode\n  else {\n    lightmode();\n  }\n}\n\nfunction darkmode() {\n  setCookie(\"darkmode\", \"on\", 9999);\n  document.body.setAttribute(\"data-theme\", \"dark\");\n}\n\nfunction lightmode() {\n  setCookie(\"darkmode\", \"off\", 9999);\n  document.body.removeAttribute(\"data-theme\");\n}\n\nfunction setCookie(cname, cvalue, exdays) {\n  var d = new Date();\n  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);\n  var expires = \"expires=\" + d.toUTCString();\n  document.cookie = cname + \"=\" + cvalue + \";\" + expires + \";path=/\";\n}\n\nfunction getCookie(name) {\n  var dc = document.cookie;\n  var prefix = name + \"=\";\n  var begin = dc.indexOf(\"; \" + prefix);\n  if (begin == -1) {\n    begin = dc.indexOf(prefix);\n    if (begin != 0) return null;\n  } else {\n    begin += 2;\n    var end = document.cookie.indexOf(\";\", begin);\n    if (end == -1) {\n      end = dc.length;\n    }\n  }\n  return decodeURI(dc.substring(begin + prefix.length, end));\n}\n"
  },
  {
    "path": "src/enums/ResponseEnum.php",
    "content": "<?php\n\n/**\n * Enumeration of HTTP response status codes.\n *\n * This enum represents the standard HTTP response status codes\n * defined by the Internet Assigned Numbers Authority (IANA) in\n * the Hypertext Transfer Protocol (HTTP) status code registry.\n * Each status code is associated with an integer value and a\n * descriptive name.\n *\n * Usage example:\n * if (ResponseEnum::HTTP_OK->value === 200) {\n *     echo \"Request was successful.\";\n * }\n */\nenum ResponseEnum: int\n{\n    // 1xx: Informational\n    case HTTP_CONTINUE = 100;\n    case HTTP_SWITCHING_PROTOCOLS = 101;\n    case HTTP_PROCESSING = 102;\n\n    // 2xx: Success\n    case HTTP_OK = 200;\n    case HTTP_CREATED = 201;\n    case HTTP_ACCEPTED = 202;\n    case HTTP_NON_AUTHORITATIVE_INFORMATION = 203;\n    case HTTP_NO_CONTENT = 204;\n    case HTTP_RESET_CONTENT = 205;\n    case HTTP_PARTIAL_CONTENT = 206;\n    case HTTP_MULTI_STATUS = 207;\n    case HTTP_ALREADY_REPORTED = 208;\n    case HTTP_IM_USED = 226;\n\n    // 3xx: Redirection\n    case HTTP_MULTIPLE_CHOICES = 300;\n    case HTTP_MOVED_PERMANENTLY = 301;\n    case HTTP_FOUND = 302;\n    case HTTP_SEE_OTHER = 303;\n    case HTTP_NOT_MODIFIED = 304;\n    case HTTP_USE_PROXY = 305;\n    case HTTP_SWITCH_PROXY = 306; // No longer used\n    case HTTP_TEMPORARY_REDIRECT = 307;\n    case HTTP_PERMANENT_REDIRECT = 308;\n\n    // 4xx: Client Error\n    case HTTP_BAD_REQUEST = 400;\n    case HTTP_UNAUTHORIZED = 401;\n    case HTTP_PAYMENT_REQUIRED = 402;\n    case HTTP_FORBIDDEN = 403;\n    case HTTP_NOT_FOUND = 404;\n    case HTTP_METHOD_NOT_ALLOWED = 405;\n    case HTTP_NOT_ACCEPTABLE = 406;\n    case HTTP_PROXY_AUTHENTICATION_REQUIRED = 407;\n    case HTTP_REQUEST_TIMEOUT = 408;\n    case HTTP_CONFLICT = 409;\n    case HTTP_GONE = 410;\n    case HTTP_LENGTH_REQUIRED = 411;\n    case HTTP_PRECONDITION_FAILED = 412;\n    case HTTP_PAYLOAD_TOO_LARGE = 413;\n    case HTTP_URI_TOO_LONG = 414;\n    case HTTP_UNSUPPORTED_MEDIA_TYPE = 415;\n    case HTTP_RANGE_NOT_SATISFIABLE = 416;\n    case HTTP_EXPECTATION_FAILED = 417;\n    case HTTP_IM_A_TEAPOT = 418;\n    case HTTP_MISDIRECTED_REQUEST = 421;\n    case HTTP_UNPROCESSABLE_ENTITY = 422;\n    case HTTP_LOCKED = 423;\n    case HTTP_FAILED_DEPENDENCY = 424;\n    case HTTP_TOO_EARLY = 425;\n    case HTTP_UPGRADE_REQUIRED = 426;\n    case HTTP_PRECONDITION_REQUIRED = 428;\n    case HTTP_TOO_MANY_REQUESTS = 429;\n    case HTTP_REQUEST_HEADER_FIELDS_TOO_LARGE = 431;\n    case HTTP_UNAVAILABLE_FOR_LEGAL_REASONS = 451;\n\n    // 5xx: Server Error\n    case HTTP_INTERNAL_SERVER_ERROR = 500;\n    case HTTP_NOT_IMPLEMENTED = 501;\n    case HTTP_BAD_GATEWAY = 502;\n    case HTTP_SERVICE_UNAVAILABLE = 503;\n    case HTTP_GATEWAY_TIMEOUT = 504;\n    case HTTP_HTTP_VERSION_NOT_SUPPORTED = 505;\n    case HTTP_VARIANT_ALSO_NEGOTIATES = 506;\n    case HTTP_INSUFFICIENT_STORAGE = 507;\n    case HTTP_LOOP_DETECTED = 508;\n    case HTTP_NOT_EXTENDED = 510;\n    case HTTP_NETWORK_AUTHENTICATION_REQUIRED = 511;\n}\n"
  },
  {
    "path": "src/exceptions/UnprocessableEntityException.php",
    "content": "<?php\n\nclass UnprocessableEntityException extends InvalidArgumentException implements IStatusException\n{\n    public function getStatus(): ResponseEnum\n    {\n        return ResponseEnum::HTTP_UNPROCESSABLE_ENTITY;\n    }\n}\n"
  },
  {
    "path": "src/index.php",
    "content": "<?php declare(strict_types=1);\n\nrequire \"../vendor/autoload.php\";\n\n// load environment variables if .env exists\n$dotenv = Dotenv\\Dotenv::createImmutable(__DIR__);\n$dotenv->safeLoad();\n\n$controller = new RendererController($_REQUEST);\n$controller->setHeaders();\necho $controller->render();\n"
  },
  {
    "path": "src/interfaces/IStatusException.php",
    "content": "<?php\n\ninterface IStatusException\n{\n    public function getStatus(): ResponseEnum;\n}\n"
  },
  {
    "path": "src/models/ErrorModel.php",
    "content": "<?php declare(strict_types=1);\n\n/**\n * Model for error messages\n */\nclass ErrorModel\n{\n    /** @var string $message Text to display */\n    public string $message;\n\n    /** @var string $template Path to template file */\n    public string $template;\n\n    /**\n     * Construct ErrorModel\n     *\n     * @param string $message Text to display\n     * @param string $template Path to the template file\n     */\n    public function __construct(string $template, string $message)\n    {\n        $this->message = $message;\n        $this->template = $template;\n    }\n}\n"
  },
  {
    "path": "src/models/GoogleFontConverter.php",
    "content": "<?php\n\ndeclare(strict_types=1);\n\n/**\n * Class for converting Google Fonts to base 64 for displaying through SVG image\n */\nclass GoogleFontConverter\n{\n    /**\n     * Fetch CSS from Google Fonts\n     *\n     * @param string $font Google Font to fetch\n     * @param string $text Text to display in font\n     * @return string The CSS for displaying the font\n     */\n    public static function fetchFontCSS($font, $weight, $text): string\n    {\n        $url =\n            \"https://fonts.googleapis.com/css2?\" .\n            http_build_query([\n                \"family\" => $font . \":wght@\" . $weight,\n                \"text\" => $text,\n                \"display\" => \"fallback\",\n            ]);\n        try {\n            // get the CSS for the font\n            $response = self::curlGetContents($url);\n            // find all font files and convert them to base64 Data URIs\n            return self::encodeFonts($response);\n        } catch (InvalidArgumentException $error) {\n            return \"\";\n        }\n    }\n\n    /**\n     * Encode font urls in string as base 64\n     *\n     * @param string $css The CSS from Google Fonts\n     * @return string CSS with urls replaced with base 64 Data URIs\n     */\n    private static function encodeFonts($css)\n    {\n        $urlRegex = '/\\((https\\:\\/\\/fonts\\.gstatic\\.com.+?)\\) format\\(\\'(.*?)\\'\\)/';\n        preg_match_all($urlRegex, $css, $matches);\n        $urls = array_combine($matches[1], $matches[2]);\n        // go over all links and replace with data URI\n        foreach ($urls as $url => $fontType) {\n            $response = self::curlGetContents($url);\n            $dataURI = \"data:font/{$fontType};base64,\" . base64_encode($response);\n            $css = str_replace($url, $dataURI, $css);\n        }\n        return $css;\n    }\n\n    /**\n     * Get the contents of a URL\n     *\n     * @param string $url The URL to fetch\n     * @return string Response from URL\n     */\n    private static function curlGetContents($url): string\n    {\n        $ch = curl_init();\n        curl_setopt($ch, CURLOPT_AUTOREFERER, true);\n        curl_setopt($ch, CURLOPT_HEADER, false);\n        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n        curl_setopt($ch, CURLOPT_URL, $url);\n        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);\n        curl_setopt($ch, CURLOPT_VERBOSE, false);\n        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);\n        $response = curl_exec($ch);\n        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n        curl_close($ch);\n        if ($httpCode != ResponseEnum::HTTP_OK->value) {\n            throw new InvalidArgumentException(\"Failed to fetch Google Font from API.\");\n        }\n        return $response;\n    }\n}\n"
  },
  {
    "path": "src/models/RendererModel.php",
    "content": "<?php\n\ndeclare(strict_types=1);\n\n/**\n * Model for SVG outputs\n */\nclass RendererModel\n{\n    /** @var array<string> $lines text to display */\n    public $lines;\n\n    /** @var string $font Font family */\n    public $font;\n\n    /** @var string $font Font weight */\n    public $weight;\n\n    /** @var string $color Font color */\n    public $color;\n\n    /** @var string $background Background color */\n    public $background;\n\n    /** @var int $size Font size */\n    public $size;\n\n    /** @var bool $center Whether or not to center text horizontally */\n    public $center;\n\n    /** @var bool $vCenter Whether or not to center text vertically */\n    public $vCenter;\n\n    /** @var int $width SVG width (px) */\n    public $width;\n\n    /** @var int $height SVG height (px) */\n    public $height;\n\n    /** @var bool $multiline True = wrap to new lines, False = retype on same line */\n    public $multiline;\n\n    /** @var int $duration print duration in milliseconds */\n    public $duration;\n\n    /** @var int $pause pause duration between lines in milliseconds */\n    public $pause;\n\n    /** @var bool $repeat Whether to loop around to the first line after the last */\n    public $repeat;\n\n    /** @var string $separator Line separator */\n    public $separator;\n\n    /** @var bool $random True = Sort lines in random order */\n    public $random;\n\n    /** @var string $fontCSS CSS required for displaying the selected font */\n    public $fontCSS;\n\n    /** @var string $letterSpacing Letter spacing */\n    public $letterSpacing;\n\n    /** @var string $template Path to template file */\n    public $template;\n\n    /** @var array<string, string> $DEFAULTS */\n    private $DEFAULTS = [\n        \"font\" => \"monospace\",\n        \"weight\" => \"400\",\n        \"color\" => \"#36BCF7\",\n        \"background\" => \"#00000000\",\n        \"size\" => \"20\",\n        \"center\" => \"false\",\n        \"vCenter\" => \"false\",\n        \"width\" => \"400\",\n        \"height\" => \"50\",\n        \"multiline\" => \"false\",\n        \"duration\" => \"5000\",\n        \"pause\" => \"0\",\n        \"repeat\" => \"true\",\n        \"separator\" => \";\",\n        \"random\" => \"false\",\n        \"letterSpacing\" => \"normal\",\n    ];\n\n    /**\n     * Construct RendererModel\n     *\n     * @param string $template Path to the template file\n     * @param array<string, string> $params request parameters\n     */\n    public function __construct($template, $params)\n    {\n        $this->template = $template;\n        $this->separator = $params[\"separator\"] ?? $this->DEFAULTS[\"separator\"];\n        $this->random = $this->checkBoolean($params[\"random\"] ?? $this->DEFAULTS[\"random\"]);\n        $this->lines = $this->checkLines($params[\"lines\"] ?? \"\");\n        $this->font = $this->checkFont($params[\"font\"] ?? $this->DEFAULTS[\"font\"]);\n        $this->weight = $this->checkNumberPositive($params[\"weight\"] ?? $this->DEFAULTS[\"weight\"], \"Font weight\");\n        $this->color = $this->checkColor($params[\"color\"] ?? $this->DEFAULTS[\"color\"], \"color\");\n        $this->background = $this->checkColor($params[\"background\"] ?? $this->DEFAULTS[\"background\"], \"background\");\n        $this->size = $this->checkNumberPositive($params[\"size\"] ?? $this->DEFAULTS[\"size\"], \"Font size\");\n        $this->center = $this->checkBoolean($params[\"center\"] ?? $this->DEFAULTS[\"center\"]);\n        $this->vCenter = $this->checkBoolean($params[\"vCenter\"] ?? $this->DEFAULTS[\"vCenter\"]);\n        $this->width = $this->checkNumberPositive($params[\"width\"] ?? $this->DEFAULTS[\"width\"], \"Width\");\n        $this->height = $this->checkNumberPositive($params[\"height\"] ?? $this->DEFAULTS[\"height\"], \"Height\");\n        $this->multiline = $this->checkBoolean($params[\"multiline\"] ?? $this->DEFAULTS[\"multiline\"]);\n        $this->duration = $this->checkNumberPositive($params[\"duration\"] ?? $this->DEFAULTS[\"duration\"], \"duration\");\n        $this->pause = $this->checkNumberNonNegative($params[\"pause\"] ?? $this->DEFAULTS[\"pause\"], \"pause\");\n        $this->repeat = $this->checkBoolean($params[\"repeat\"] ?? $this->DEFAULTS[\"repeat\"]);\n        $this->fontCSS = $this->fetchFontCSS($this->font, $this->weight, $params[\"lines\"]);\n        $this->letterSpacing = $this->checkLetterSpacing($params[\"letterSpacing\"] ?? $this->DEFAULTS[\"letterSpacing\"]);\n    }\n\n    /**\n     * Validate lines and return array of string\n     *\n     * @param string $lines Semicolon-separated lines parameter\n     * @return array<string> escaped array of lines\n     */\n    private function checkLines($lines)\n    {\n        if (!$lines) {\n            throw new UnprocessableEntityException(\"Lines parameter must be set.\");\n        }\n        if (strlen($this->separator) === 1) {\n            $lines = rtrim($lines, $this->separator);\n        }\n        $exploded = explode($this->separator, $lines);\n        if ($this->random) {\n            shuffle($exploded);\n        }\n        // escape special characters to prevent code injection\n        return array_map(\"htmlspecialchars\", $exploded);\n    }\n\n    /**\n     * Validate font family and return valid string\n     *\n     * @param string $font Font name parameter\n     * @return string Sanitized font name\n     */\n    private function checkFont($font)\n    {\n        // return sanitized font name\n        return preg_replace(\"/[^0-9A-Za-z\\- ]/\", \"\", $font);\n    }\n\n    /**\n     * Validate font color and return valid string\n     *\n     * @param string $color Color parameter\n     * @param string $field Field name for displaying in case of error\n     * @return string Sanitized color with preceding hash symbol\n     */\n    private function checkColor($color, $field)\n    {\n        $sanitized = (string) preg_replace(\"/[^0-9A-Fa-f]/\", \"\", $color);\n        // if color is not a valid length, use the default\n        if (!in_array(strlen($sanitized), [3, 4, 6, 8])) {\n            return $this->DEFAULTS[$field];\n        }\n        // return sanitized color\n        return \"#\" . $sanitized;\n    }\n\n    /**\n     * Validate positive numeric parameter and return valid integer\n     *\n     * @param string $num Parameter to validate\n     * @param string $field Field name for displaying in case of error\n     * @return int Sanitized digits and int\n     */\n    private function checkNumberPositive($num, $field)\n    {\n        $digits = intval(preg_replace(\"/[^0-9\\-]/\", \"\", $num));\n        if ($digits <= 0) {\n            throw new UnprocessableEntityException(\"$field must be a positive number.\");\n        }\n        return $digits;\n    }\n\n    /**\n     * Validate non-negative numeric parameter and return valid integer\n     *\n     * @param string $num Parameter to validate\n     * @param string $field Field name for displaying in case of error\n     * @return int Sanitized digits and int\n     */\n    private function checkNumberNonNegative($num, $field)\n    {\n        $digits = intval(preg_replace(\"/[^0-9\\-]/\", \"\", $num));\n        if ($digits < 0) {\n            throw new UnprocessableEntityException(\"$field must be a non-negative number.\");\n        }\n        return $digits;\n    }\n\n    /**\n     * Validate \"true\" or \"false\" value as string and return boolean\n     *\n     * @param string $bool Boolean parameter as string\n     * @return boolean Whether or not $bool is set to \"true\"\n     */\n    private function checkBoolean($bool)\n    {\n        return strtolower($bool) == \"true\";\n    }\n\n    /**\n     * Fetch CSS with Base-64 encoding from Google Fonts\n     *\n     * @param string $font Google Font to fetch\n     * @param string $text Text to display in font\n     * @return string The CSS for displaying the font\n     */\n    private function fetchFontCSS($font, $weight, $text)\n    {\n        // skip checking if left as default\n        if ($font != $this->DEFAULTS[\"font\"]) {\n            // fetch and convert from Google Fonts\n            $from_google_fonts = GoogleFontConverter::fetchFontCSS($font, $weight, $text);\n            if ($from_google_fonts) {\n                // return the CSS for displaying the font\n                return \"<style>\\n{$from_google_fonts}</style>\\n\";\n            }\n        }\n        // font is not found\n        return \"\";\n    }\n\n    /**\n     * Validate unit for size properties\n     *\n     * This method validates if the given unit is a valid CSS size unit.\n     * It supports various units such as px, em, rem, pt, pc, in, cm, mm,\n     * ex, ch, vh, vw, vmin, vmax, and percentages.\n     *\n     * @param string $unit Unit for validation\n     * @return bool True if valid, false otherwise\n     */\n    private function isValidUnit($unit)\n    {\n        return (bool) preg_match(\"/^(-?\\\\d+(\\\\.\\\\d+)?(px|em|rem|pt|pc|in|cm|mm|ex|ch|vh|vw|vmin|vmax|%))$/\", $unit);\n    }\n\n    /**\n     * Validate letter spacing\n     *\n     * This method validates the letter spacing property for fonts.\n     * It allows specific keywords (normal, inherit, initial, revert, revert-layer, unset)\n     * and valid CSS size units.\n     *\n     * @param string $letterSpacing Letter spacing for validation\n     * @return string Validated letter spacing\n     */\n    private function checkLetterSpacing($letterSpacing)\n    {\n        // List of valid keywords for letter-spacing\n        $keywords = \"normal|inherit|initial|revert|revert-layer|unset\";\n\n        // Check if the input matches one of the keywords or a valid unit\n        if (preg_match(\"/^($keywords)$/\", $letterSpacing) || $this->isValidUnit($letterSpacing)) {\n            return $letterSpacing;\n        }\n\n        // Return the default letter spacing value if the input is invalid\n        return $this->DEFAULTS[\"letterSpacing\"];\n    }\n}\n"
  },
  {
    "path": "src/templates/error.php",
    "content": "<!-- https://github.com/DenverCoder1/readme-typing-svg/ -->\n<svg xmlns='http://www.w3.org/2000/svg'\n    xmlns:xlink='http://www.w3.org/1999/xlink'\n    viewBox='0 0 400 50'\n    width='400px' height='50px'>\n\n    <text font-family='monospace' fill='#c00' font-size='18'\n        y=\"50%\" x='50%' dominant-baseline='middle' text-anchor='middle'>\n        <?= $message . \"\\n\" ?>\n    </text>\n</svg>\n"
  },
  {
    "path": "src/templates/main.php",
    "content": "<!-- https://github.com/DenverCoder1/readme-typing-svg/ -->\n<svg xmlns='http://www.w3.org/2000/svg'\n    xmlns:xlink='http://www.w3.org/1999/xlink'\n    viewBox='0 0 <?= \"$width $height\" ?>'\n    style='background-color: <?= $background ?>;'\n    width='<?= $width ?>px' height='<?= $height ?>px'>\n\n    <?= $fontCSS ?>\n\n    <?php $lastLineIndex = count($lines) - 1; ?>\n    <?php for ($i = 0; $i <= $lastLineIndex; ++$i): ?>\n        <path id='path<?= $i ?>'>\n            <?php if (!$multiline): ?>\n                <!-- Single line -->\n                <?php\n                // start after previous line\n                $begin = \"d\" . ($i - 1) . \".end\";\n                if ($i == 0) {\n                    // if this is the first line, start at 0 seconds\n                    // and also after the last line if repeat is true\n                    $begin = $repeat ? \"0s;d$lastLineIndex.end\" : \"0s\";\n                }\n                // don't delete text after typing the last line if repeat is false\n                $freeze = !$repeat && $i == $lastLineIndex;\n                // empty line values\n                $yOffset = $height / 2;\n                $emptyLine = \"m0,$yOffset h0\";\n                $fullLine = \"m0,$yOffset h$width\";\n                $values = [$emptyLine, $fullLine, $fullLine, $freeze ? $fullLine : $emptyLine];\n                // keyTimes for the animation\n                $keyTimes = [\n                    \"0\",\n                    (0.8 * $duration) / ($duration + $pause),\n                    (0.8 * $duration + $pause) / ($duration + $pause),\n                    \"1\",\n                ];\n                ?>\n                <animate id='d<?= $i ?>' attributeName='d' begin='<?= $begin ?>'\n                    dur='<?= $duration + $pause ?>ms' fill='<?= $freeze ? \"freeze\" : \"remove\" ?>'\n                    values='<?= implode(\" ; \", $values) ?>' keyTimes='<?= implode(\";\", $keyTimes) ?>' />\n            <?php else: ?>\n                <!-- Multiline -->\n                <?php\n                $nextIndex = $i + 1;\n                $lineHeight = $size + 5;\n                $lineDuration = ($duration + $pause) * $nextIndex;\n                $yOffset = $nextIndex * $lineHeight;\n                $emptyLine = \"m0,$yOffset h0\";\n                $fullLine = \"m0,$yOffset h$width\";\n                $values = [$emptyLine, $emptyLine, $fullLine, $fullLine];\n                $keyTimes = [\"0\", $i / $nextIndex, $i / $nextIndex + $duration / $lineDuration, \"1\"];\n                ?>\n                <animate id='d<?= $i ?>' attributeName='d' begin='0s<?= $repeat ? \";d$lastLineIndex.end\" : \"\" ?>'\n                    dur='<?= $lineDuration ?>ms' fill=\"freeze\"\n                    values='<?= implode(\" ; \", $values) ?>' keyTimes='<?= implode(\";\", $keyTimes) ?>' />\n            <?php endif; ?>\n        </path>\n    <text font-family='\"<?= $font ?>\", monospace' fill='<?= $color ?>' font-size='<?= $size ?>'\n        dominant-baseline='<?= $vCenter ? \"middle\" : \"auto\" ?>'\n        x='<?= $center ? \"50%\" : \"0%\" ?>' text-anchor='<?= $center ? \"middle\" : \"start\" ?>'\n        letter-spacing='<?= $letterSpacing ?>'>\n        <textPath xlink:href='#path<?= $i ?>'>\n            <?= $lines[$i] . \"\\n\" ?>\n        </textPath>\n    </text>\n<?php endfor; ?>\n</svg>\n"
  },
  {
    "path": "src/views/ErrorView.php",
    "content": "<?php declare(strict_types=1);\n\n/**\n * View for rendering error messages\n */\nclass ErrorView\n{\n    /**\n     * @var ErrorModel $model\n     */\n    private $model;\n\n    /**\n     * Constructor for Error View\n     * @param ErrorModel $model\n     */\n    public function __construct($model)\n    {\n        $this->model = $model;\n    }\n\n    /**\n     * Render SVG Output\n     * @return string\n     */\n    public function render()\n    {\n        // import variables into symbol table\n        extract([\"message\" => $this->model->message]);\n        // render SVG with output buffering\n        ob_start();\n        include $this->model->template;\n        $output = ob_get_contents();\n        ob_end_clean();\n        // return rendered output\n        return $output;\n    }\n}\n"
  },
  {
    "path": "src/views/RendererView.php",
    "content": "<?php declare(strict_types=1);\n\n/**\n * View for rendering typing SVG\n */\nclass RendererView\n{\n    /**\n     * @var RendererModel $model\n     */\n    private $model;\n\n    /**\n     * Constructor for Renderer View\n     * @param RendererModel $model\n     */\n    public function __construct($model)\n    {\n        $this->model = $model;\n    }\n\n    /**\n     * Render SVG Output\n     * @return string\n     */\n    public function render()\n    {\n        // import variables into symbol table\n        extract([\n            \"lines\" => $this->model->lines,\n            \"font\" => $this->model->font,\n            \"color\" => $this->model->color,\n            \"background\" => $this->model->background,\n            \"size\" => $this->model->size,\n            \"center\" => $this->model->center,\n            \"vCenter\" => $this->model->vCenter,\n            \"width\" => $this->model->width,\n            \"height\" => $this->model->height,\n            \"multiline\" => $this->model->multiline,\n            \"fontCSS\" => $this->model->fontCSS,\n            \"duration\" => $this->model->duration,\n            \"pause\" => $this->model->pause,\n            \"repeat\" => $this->model->repeat,\n            \"letterSpacing\" => $this->model->letterSpacing,\n        ]);\n        // render SVG with output buffering\n        ob_start();\n        include $this->model->template;\n        $output = ob_get_contents();\n        ob_end_clean();\n        // return rendered output\n        return $output;\n    }\n}\n"
  },
  {
    "path": "tests/OptionsTest.php",
    "content": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\nrequire \"vendor/autoload.php\";\n\nfinal class OptionsTest extends TestCase\n{\n    /**\n     * Test exception thrown when missing 'lines' parameter\n     */\n    public function testMissingLines(): void\n    {\n        $this->expectException(\"InvalidArgumentException\");\n        $this->expectExceptionMessage(\"Lines parameter must be set.\");\n        $params = [\n            \"center\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n        ];\n        print_r(new RendererModel(\"src/templates/main.php\", $params));\n    }\n\n    /**\n     * Test valid font\n     */\n    public function testValidFont(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"font\" => \"Open Sans\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"Open Sans\", $model->font);\n    }\n\n    /**\n     * Test valid font color\n     */\n    public function testValidFontColor(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"color\" => \"000000\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"#000000\", $model->color);\n    }\n\n    /**\n     * Test invalid font color\n     */\n    public function testInvalidFontColor(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"color\" => \"00000\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"#36BCF7\", $model->color);\n    }\n\n    /**\n     * Test valid background color\n     */\n    public function testValidBackgroundColor(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"background\" => \"00000033\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"#00000033\", $model->background);\n    }\n\n    /**\n     * Test invalid background color\n     */\n    public function testInvalidBackgroundColor(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"background\" => \"00000\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"#00000000\", $model->background);\n    }\n\n    /**\n     * Test valid font size\n     */\n    public function testValidFontSize(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"size\" => \"18\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(18, $model->size);\n    }\n\n    /**\n     * Test exception thrown when font size is invalid\n     */\n    public function testInvalidFontSize(): void\n    {\n        $this->expectException(\"InvalidArgumentException\");\n        $this->expectExceptionMessage(\"Font size must be a positive number.\");\n        $params = [\n            \"lines\" => \"text\",\n            \"size\" => \"0\",\n        ];\n        print_r(new RendererModel(\"src/templates/main.php\", $params));\n    }\n\n    /**\n     * Test valid height\n     */\n    public function testValidHeight(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"height\" => \"80\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(80, $model->height);\n    }\n\n    /**\n     * Test exception thrown when height is invalid\n     */\n    public function testInvalidHeight(): void\n    {\n        $this->expectException(\"InvalidArgumentException\");\n        $this->expectExceptionMessage(\"Height must be a positive number.\");\n        $params = [\n            \"lines\" => \"text\",\n            \"height\" => \"x\",\n        ];\n        print_r(new RendererModel(\"src/templates/main.php\", $params));\n    }\n\n    /**\n     * Test valid width\n     */\n    public function testValidWidth(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"width\" => \"500\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(500, $model->width);\n    }\n\n    /**\n     * Test exception thrown when width is invalid\n     */\n    public function testInvalidWidth(): void\n    {\n        $this->expectException(\"InvalidArgumentException\");\n        $this->expectExceptionMessage(\"Width must be a positive number.\");\n        $params = [\n            \"lines\" => \"text\",\n            \"width\" => \"-1\",\n        ];\n        print_r(new RendererModel(\"src/templates/main.php\", $params));\n    }\n\n    /**\n     * Test center set to true\n     */\n    public function testCenterIsTrue(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"center\" => \"true\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(true, $model->center);\n    }\n\n    /**\n     * Test center not set to true\n     */\n    public function testCenterIsNotTrue(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"center\" => \"other\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(false, $model->center);\n    }\n\n    /**\n     * Test vCenter set to true\n     */\n    public function testVCenterIsTrue(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"vCenter\" => \"true\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(true, $model->vCenter);\n    }\n\n    /**\n     * Test vCenter not set to true\n     */\n    public function testVCenterIsNotTrue(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"vCenter\" => \"other\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(false, $model->vCenter);\n    }\n\n    /**\n     * Test valid duration\n     */\n    public function testValidDuration(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"duration\" => \"500\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(500, $model->duration);\n    }\n\n    /**\n     * Test exception thrown when duration is invalid\n     */\n    public function testInvalidDuration(): void\n    {\n        $this->expectException(\"InvalidArgumentException\");\n        $this->expectExceptionMessage(\"duration must be a positive number.\");\n        $params = [\n            \"lines\" => \"text\",\n            \"duration\" => \"-1\",\n        ];\n        print_r(new RendererModel(\"src/templates/main.php\", $params));\n    }\n\n    /**\n     * Test valid pause\n     */\n    public function testValidPause(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"pause\" => \"500\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(500, $model->pause);\n    }\n\n    /**\n     * Test valid pause at 0\n     */\n    public function testValidPauseZero(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"pause\" => \"0\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(0, $model->pause);\n    }\n\n    /**\n     * Test exception thrown when pause is invalid\n     */\n    public function testInvalidPause(): void\n    {\n        $this->expectException(\"InvalidArgumentException\");\n        $this->expectExceptionMessage(\"pause must be a non-negative number.\");\n        $params = [\n            \"lines\" => \"text\",\n            \"pause\" => \"-1\",\n        ];\n        print_r(new RendererModel(\"src/templates/main.php\", $params));\n    }\n\n    /**\n     * Test repeat set to true, false, other\n     */\n    public function testRepeat(): void\n    {\n        // not set\n        $params = [\n            \"lines\" => \"text\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(true, $model->repeat);\n\n        // true\n        $params = [\n            \"lines\" => \"text\",\n            \"repeat\" => \"true\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(true, $model->repeat);\n\n        // other / false\n        $params = [\n            \"lines\" => \"text\",\n            \"repeat\" => \"other\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(false, $model->repeat);\n    }\n\n    /**\n     * Test separator set to something other than \";\"\n     */\n    public function testSeparator(): void\n    {\n        $params = [\n            \"lines\" => \"text;text2\",\n            \"separator\" => \";;\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\";;\", $model->separator);\n        $this->assertEquals([\"text;text2\"], $model->lines);\n\n        $params = [\n            \"lines\" => \"text;;tex;t2\",\n            \"separator\" => \";;\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\";;\", $model->separator);\n        $this->assertEquals([\"text\", \"tex;t2\"], $model->lines);\n    }\n\n    /**\n     * Test random order\n     */\n    public function testRandom(): void\n    {\n        // not set\n        $params = [\n            \"lines\" => \"text\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(false, $model->random);\n\n        // true\n        $params = [\n            \"lines\" => \"text\",\n            \"random\" => \"true\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(true, $model->random);\n\n        // other / false\n        $params = [\n            \"lines\" => \"text\",\n            \"random\" => \"other\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(false, $model->random);\n    }\n\n    /**\n     * Test Letter Spacing\n     */\n    public function testLetterSpacing(): void\n    {\n        // default\n        $params = [\n            \"lines\" => \"text\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"normal\", $model->letterSpacing);\n\n        // invalid\n        $params = [\n            \"lines\" => \"text\",\n            \"letterSpacing\" => \"invalid\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"normal\", $model->letterSpacing);\n\n        // valid\n        $params = [\n            \"lines\" => \"text\",\n            \"letterSpacing\" => \"10px\",\n        ];\n        $model = new RendererModel(\"src/templates/main.php\", $params);\n        $this->assertEquals(\"10px\", $model->letterSpacing);\n    }\n}\n"
  },
  {
    "path": "tests/RendererTest.php",
    "content": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\nrequire \"vendor/autoload.php\";\n\nfinal class RendererTest extends TestCase\n{\n    /**\n     * Static method to assert strings are equal while ignoring whitespace\n     *\n     * @param string $expected\n     * @param string $actual\n     */\n    public static function compareNoCommentsOrWhitespace(string $expected, string $actual)\n    {\n        // remove comments and whitespace\n        $expected = preg_replace(\"/\\s+/\", \" \", preg_replace(\"/<!--.*?-->/s\", \" \", $expected));\n        $actual = preg_replace(\"/\\s+/\", \" \", preg_replace(\"/<!--.*?-->/s\", \" \", $actual));\n        // add newlines to make it easier to debug\n        $expected = str_replace(\">\", \">\\n\", $expected);\n        $actual = str_replace(\">\", \">\\n\", $actual);\n        // assert strings are equal\n        self::assertSame($expected, $actual);\n    }\n\n    /**\n     * Test normal card render\n     */\n    public function testCardRender(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n        ];\n        $controller = new RendererController($params);\n        $expectedSVG = file_get_contents(\"tests/svg/test_normal.svg\");\n        $actualSVG = $controller->render();\n        $this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);\n    }\n\n    public function testMultilineCardRender(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"200\",\n            \"multiline\" => \"true\",\n        ];\n        $controller = new RendererController($params);\n        $this->assertStringContainsString(\"keyTimes='0;0;1;1'\", $controller->render());\n        $this->assertStringContainsString(\n            \"values='m0,25 h0 ; m0,25 h0 ; m0,25 h380 ; m0,25 h380'\",\n            $controller->render()\n        );\n        $this->assertStringContainsString(\"keyTimes='0;0.5;1;1'\", $controller->render());\n        $this->assertStringContainsString(\n            \"values='m0,50 h0 ; m0,50 h0 ; m0,50 h380 ; m0,50 h380'\",\n            $controller->render()\n        );\n    }\n\n    /**\n     * Test error card render\n     */\n    public function testErrorCardRender(): void\n    {\n        // missing lines\n        $params = [\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n        ];\n        $controller = new RendererController($params);\n        $this->assertStringContainsString(\"Lines parameter must be set.\", $controller->render());\n    }\n\n    /**\n     * Test loading a valid Google Font\n     */\n    public function testLoadingGoogleFont(): void\n    {\n        $params = [\n            \"lines\" => \"text\",\n            \"font\" => \"Roboto\",\n        ];\n        $controller = new RendererController($params);\n        $this->assertStringContainsString(\"@font-face {\", $controller->render());\n        $this->assertSame(\n            1,\n            preg_match(\n                \"/src: url\\(data:font\\/truetype;base64,[a-zA-Z0-9\\/+=]+\\) format\\('truetype'\\);/\",\n                $controller->render()\n            )\n        );\n        $this->assertStringContainsString(\"font-family='\\\"Roboto\\\", monospace'\", $controller->render());\n    }\n\n    /**\n     * Test loading a valid Google Font\n     */\n    public function testInvalidGoogleFont(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"font\" => \"Not-A-Font\",\n        ];\n        $controller = new RendererController($params);\n        $this->assertStringContainsString(\"font-family='\\\"Not-A-Font\\\", monospace'\", $controller->render());\n    }\n\n    /**\n     * Test if a trailing \";\" in lines is trimmed; see issue #25\n     */\n    public function testLineTrimming(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n                \"\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n        ];\n        $controller = new RendererController($params);\n        $expectedSVG = file_get_contents(\"tests/svg/test_normal.svg\");\n        $actualSVG = $controller->render();\n        $this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);\n    }\n\n    /**\n     * Test normal vertical alignment\n     */\n    public function testNormalVerticalAlignment(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n        ];\n        $controller = new RendererController($params);\n        $this->assertStringContainsString(\"dominant-baseline='auto'\", $controller->render());\n    }\n\n    /**\n     * Test pause parameter\n     */\n    public function testPauseParameter(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n            \"pause\" => \"1000\",\n        ];\n        $controller = new RendererController($params);\n        $this->assertStringContainsString(\"dur='6000ms'\", $controller->render());\n        $this->assertStringContainsString(\"keyTimes='0;0.66666666666667;0.83333333333333;1'\", $controller->render());\n    }\n\n    /**\n     * Test pause on multiline card\n     */\n    public function testPauseMultiline(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"200\",\n            \"multiline\" => \"true\",\n            \"pause\" => \"1000\",\n        ];\n        $controller = new RendererController($params);\n        $this->assertStringContainsString(\"dur='6000ms'\", $controller->render());\n        $this->assertStringContainsString(\"keyTimes='0;0;0.83333333333333;1'\", $controller->render());\n        $this->assertStringContainsString(\"dur='12000ms'\", $controller->render());\n        $this->assertStringContainsString(\"keyTimes='0;0.5;0.91666666666667;1'\", $controller->render());\n    }\n\n    /**\n     * Test repeat set to false\n     */\n    public function testRepeatFalse(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n            \"repeat\" => \"false\",\n        ];\n        $controller = new RendererController($params);\n        $actualSVG = preg_replace(\"/\\s+/\", \" \", $controller->render());\n        $this->assertStringContainsString(\"begin='0s'\", $actualSVG);\n        $this->assertStringContainsString(\n            \"begin='d2.end' dur='5000ms' fill='freeze' values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h380'\",\n            $actualSVG\n        );\n        $this->assertStringNotContainsString(\";d3.end\", $actualSVG);\n    }\n\n    /**\n     * Test repeat set to false on multiline card\n     */\n    public function testRepeatFalseMultiline(): void\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"200\",\n            \"multiline\" => \"true\",\n            \"repeat\" => \"false\",\n        ];\n        $controller = new RendererController($params);\n        $actualSVG = preg_replace(\"/\\s+/\", \" \", $controller->render());\n        $this->assertStringContainsString(\"begin='0s'\", $actualSVG);\n        $this->assertStringNotContainsString(\";d3.end\", $actualSVG);\n    }\n\n    /**\n     * Test separator set to something other than \";\"\n     */\n    public function testSeparator(): void\n    {\n        $params = [\n            \"lines\" => implode(\";;\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"center\" => \"true\",\n            \"vCenter\" => \"true\",\n            \"width\" => \"380\",\n            \"height\" => \"50\",\n            \"separator\" => \";;\",\n        ];\n        $controller = new RendererController($params);\n        $expectedSVG = file_get_contents(\"tests/svg/test_normal.svg\");\n        $actualSVG = $controller->render();\n        $this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);\n    }\n\n    /**\n     * Test random\n     */\n    public function testRandom(): void\n    {\n        $lines = [\n            \"Full-stack web and app developer\",\n            \"Self-taught UI/UX Designer\",\n            \"10+ years of coding experience\",\n            \"Always learning new things\",\n        ];\n        $params = [\n            \"lines\" => implode(\";\", $lines),\n            \"random\" => \"true\",\n        ];\n        $controller = new RendererController($params);\n        $actualSVG = preg_replace(\"/\\s+/\", \" \", $controller->render());\n        foreach ($lines as $line) {\n            $this->assertStringContainsString(\"> $line </textPath>\", $actualSVG);\n        }\n    }\n\n    /**\n     * Test Letter Spacing\n     */\n    public function testLetterSpacing()\n    {\n        $params = [\n            \"lines\" => implode(\";\", [\n                \"Full-stack web and app developer\",\n                \"Self-taught UI/UX Designer\",\n                \"10+ years of coding experience\",\n                \"Always learning new things\",\n            ]),\n            \"letterSpacing\" => \"10px\",\n        ];\n        $controller = new RendererController($params);\n        $actualSVG = preg_replace(\"/\\s+/\", \" \", $controller->render());\n        $this->assertStringContainsString(\"letter-spacing='10px'\", $actualSVG);\n        $this->assertStringNotContainsString(\"letter-spacing='normal'\", $actualSVG);\n    }\n}\n"
  },
  {
    "path": "tests/phpunit/phpunit.xml",
    "content": "<?xml version=\"1.0\"?>\n<phpunit colors=\"true\">\n  <testsuites>\n    <testsuite name=\"main\">\n      <directory suffix=\"Test.php\">../</directory>\n    </testsuite>\n  </testsuites>\n</phpunit>\n"
  }
]