readme-typing-svg Documentation

File: README.md Copy Chapter

⚡ Quick setup Copy Chapter

1. Copy-paste the markdown below into your GitHub profile README
2. Replace the value after ?lines= with your text. Separate lines of text with semicolons and use + or %20 for spaces.
3. Adjust the width parameter (see below) to fit the full width of your text.

[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)

4. Star the repo 😄

⚙ Demo site Copy Chapter

Here you can easily customize your Typing SVG with a live preview.

https://readme-typing-svg.demolab.com/demo/

🚀 Example usage Copy Chapter

Below are links to profiles where you can see Readme Typing SVGs in action!

Feel free to open a PR and add yours!

🔧 Options Copy Chapter

📤 Deploying it on your own Copy Chapter

If you can, it is preferable to host the files on your own server.

Doing this can lead to better uptime and more control over customization (you can modify the code for your usage).

You can deploy the PHP files on any website server with PHP installed or as a Heroku app.

Step-by-step instructions for deploying to Heroku Copy Section

1. Sign in to Heroku or create a new account at https://heroku.com
2. Click the "Deploy to Heroku" button below

3. On the page that comes up, click "Deploy App" at the end of the form
4. Once the app is deployed, click "Manage App" to go to the dashboard
5. Scroll down to the Domains section in the settings to find the URL you will use in place of readme-typing-svg.demolab.com

🤗 Contributing Copy Chapter

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

Make sure your request is meaningful and you have tested the app locally before submitting a pull request.

Refer to CONTRIBUTING.md for more details on contributing, installing requirements, and running the application.

🙋‍♂️ Support Copy Chapter

💙 If you like this project, give it a ⭐ and share it with friends!

☕ Buy me a coffee

Made with ❤️ and PHP

This project uses Twemoji, published under the CC-BY 4.0 License

File: app.json Copy Chapter

{
"name": "Readme Typing SVG",
"description": "⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text. Typing SVGs can be used as a bio on your Github profile readme or repository.",
"repository": "https://github.com/DenverCoder1/readme-typing-svg/",
"keywords": ["github", "dynamic", "readme", "typing", "svg", "profile"],
"formation": {
"web": {
"quantity": 1,
"size": "basic"
}
}
}

File: CODE_OF_CONDUCT.md Copy Chapter

Contributor Covenant Code of Conduct

Our Pledge Copy Chapter

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, caste, color, religion, or sexual
identity and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

Our Standards Copy Chapter

Examples of behavior that contributes to a positive environment for our
community include:

• Demonstrating empathy and kindness toward other people
• Being respectful of differing opinions, viewpoints, and experiences
• Giving and gracefully accepting constructive feedback
• Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
• Focusing on what is best not just for us as individuals, but for the overall
  community

Examples of unacceptable behavior include:

• The use of sexualized language or imagery, and sexual attention or advances of
  any kind
• Trolling, insulting or derogatory comments, and personal or political attacks
• Public or private harassment
• Publishing others' private information, such as a physical or email address,
  without their explicit permission
• Other conduct which could reasonably be considered inappropriate in a
  professional setting

Enforcement Responsibilities Copy Chapter

Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.

Scope Copy Chapter

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.

Enforcement Copy Chapter

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
[email protected].
All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the
reporter of any incident.

Enforcement Guidelines Copy Chapter

Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:

1. Correction Copy Section

Community Impact: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.

Consequence: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.

2. Warning Copy Section

Community Impact: A violation through a single incident or series of
actions.

Consequence: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or permanent
ban.

3. Temporary Ban Copy Section

Community Impact: A serious violation of community standards, including
sustained inappropriate behavior.

Consequence: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.

4. Permanent Ban Copy Section

Community Impact: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.

Consequence: A permanent ban from any sort of public interaction within the
community.

Attribution Copy Chapter

This Code of Conduct is adapted from the Contributor Covenant,
version 2.1, available at
https://www.contributor-covenant.org/version/2/1/code_of_conduct.html.

Community Impact Guidelines were inspired by
Mozilla's code of conduct enforcement ladder.

For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.

File: composer.json Copy Chapter

{
"name": "denvercoder1/readme-typing-svg",
"description": "⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text. Typing SVGs can be used as a bio on your Github profile readme or repository.",
"keywords": [
"github",
"dynamic",
"readme",
"typing",
"svg",
"profile"
],
"license": "MIT",
"version": "0.10.0",
"homepage": "https://github.com/DenverCoder1/readme-typing-svg/",
"autoload": {
"classmap": [
"src/models/",
"src/views/",
"src/controllers/",
"src/enums/",
"src/exceptions/",
"src/interfaces/"
]
},
"require": {
"php": "^8.1",
"vlucas/phpdotenv": "^5.3"
},
"require-dev": {
"phpunit/phpunit": "^11"
},
"scripts": {
"start": "php8 -S localhost:8000 -t src || php -S localhost:8000 -t src",
"test": "./vendor/bin/phpunit --testdox tests",
"format:check": "prettier --check *.md //*.{php,md,js,css} --print-width 120",
"format": "prettier --write *.md //*.{php,md,js,css} --print-width 120"
}
}

File: CONTRIBUTING.md Copy Chapter

Contributing Copy Chapter

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

Make sure your request is meaningful and you have tested the app locally before submitting a pull request.

Installing Requirements Copy Section

Requirements

• PHP 8.1+
• Composer

Linux

sudo apt-get install php
sudo apt-get install php-curl
sudo apt-get install composer

macOS

Using Homebrew:

brew install php
brew install composer

PHP on macOS typically includes the curl extension. If you need to enable it, ensure php.ini has extension=curl uncommented (run php --ini to find your config file).

Windows

Install PHP from XAMPP or php.net

▶ How to install and run PHP using XAMPP (Windows)

📥 Download Composer

Clone the repository Copy Section

git clone https://github.com/DenverCoder1/readme-typing-svg.git
cd readme-typing-svg

Running the app locally Copy Section

composer start

Open http://localhost:8000/ and add parameters to run the project locally.

Running the tests Copy Section

Before you can run tests, PHPUnit must be installed. You can install it using Composer by running the following command.

composer install

Format and test the code Copy Section

Run the following command to format the code with Prettier:

composer run format

Run the following command to check if your code is formatted properly:

composer run format:check

Note You need to have prettier and the prettier-php plugin installed globally in order to run this command.

Run the following command to run the PHPUnit test script which will verify that the tested functionality is still working.

composer test

File: SECURITY.md Copy Chapter

Security

Security updates are provided for the latest version of Readme Typing SVG.

Reporting a vulnerability Copy Chapter

You may report suspected minor vulnerabilities through a GitHub issue or the project's Discord. Include the affected endpoint or feature and steps to reproduce the issue. For sensitive issues, use GitHub's Security Advisories reporting feature through the Security and Quality tab of the repository.

File: docs/faq.md Copy Chapter

FAQ

How do I include Readme Typing SVG in my Readme? Copy Chapter

Markdown files on GitHub support embedded images using Markdown or HTML. You can customize your SVG on the demo site and use the image source in either of the following ways:

Markdown Copy Section

[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)

HTML Copy Section

<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>

The text is getting cut off at the end, how do I fix it? Copy Chapter

The text rendered within the SVG can be any variable width, therefore you must specify the width manually to ensure the text will fit.

The width parameter in the URL should be increased such that the full width of the text is displayed properly.

https://readme-typing-svg.demolab.com/?lines=Your+Long+Message+With+A+Long+Width&width=460

How do I center the image on the page? Copy Chapter

To center align images, you must use the HTML syntax and wrap it in an element with the HTML attribute align="center".

<p align="center">
  <a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com/?lines=This+image+is+center-aligned&font=Fira%20Code&center=true&width=380&height=50"/></a>
</p>

How do I add multiple spaces in the middle of a line? Copy Chapter

Similar to HTML, SVG/XML treats multiple consecutive spaces as a single space.

A workaround for adding extra spaces can be to use other whitespace characters (for example, you can copy-paste the en-space or other unusual spaces from https://qwerty.dev/whitespace). The alternate whitespace characters don't get ignored.

How do I make different SVGs for dark mode and light mode? Copy Chapter

As of May 2022, you can now specify theme context using the and elements as shown below. The dark mode version appears in the srcset of the tag and the light mode version appears in the `src` of the tag.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://readme-typing-svg.demolab.com/?lines=You+are+using+dark+mode&color=FFFFFF" />
  <img src="https://readme-typing-svg.demolab.com/?lines=You+are+using+light+mode&color=000000" />
</picture>

How do I create a Readme for my profile? Copy Chapter

A profile readme appears on your profile page when you create a repository with the same name as your username and add a README.md file to it. For example, the repository for the user DenverCoder1 is located at DenverCoder1/DenverCoder1.

File: .github/dependabot.yml Copy Chapter

To get started with Dependabot version updates, you'll need to specify which

package ecosystems to update and where the package manifests are located.

Please see the documentation for all configuration options:

https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

version: 2
updates:

• package-ecosystem: "composer" # See documentation for possible values
  directory: "/" # Location of package manifests
  schedule:
  interval: "daily"

File: .github/FUNDING.yml Copy Chapter

These are supported funding model platforms

github: [DenverCoder1]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: jlawrence
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

File: .github/pull_request_template.md Copy Chapter

Summary Copy Chapter

Type of change Copy Chapter

• Bug fix (added a non-breaking change which fixes an issue)
• New feature (added a non-breaking change which adds functionality)
• Updated documentation (updated the readme, templates, or other repo files)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested? Copy Chapter

• Ran tests with composer test
• Added or updated test cases to test new features

File: .github/ISSUE_TEMPLATE/bug_report.yml Copy Chapter

name: Bug Report
title: "[Bug]: "
labels: ["bug"]
body:

• type: textarea
  id: description
  attributes:
  label: Describe the bug
  placeholder: Tell us what happened
  validations:
  required: true
• type: textarea
  id: reproduction
  attributes:
  label: To Reproduce
  placeholder: |
  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error
  
  validations:
  required: true
• type: textarea
  id: expected
  attributes:
  label: Expected behavior
  placeholder: It should...
  validations:
  required: true
• type: textarea
  id: screenshots
  attributes:
  label: Screenshots
  placeholder: Drag and drop screenshots here
• type: dropdown
  id: os
  attributes:
  label: OS
  options:
  - macOS
  - Windows
  - Linux
  - Other
• type: dropdown
  id: browser
  attributes:
  label: Browser
  options:
  - Chrome
  - Firefox
  - Safari
  - Edge
  - Other
• type: input
  id: version
  attributes:
  label: Version
  placeholder: e.g. v1.0.0
• type: textarea
  id: context
  attributes:
  label: Additional context

File: .github/ISSUE_TEMPLATE/config.yml Copy Chapter

blank_issues_enabled: false

File: .github/ISSUE_TEMPLATE/feature_request.yml Copy Chapter

name: Feature Request
title: "[Feature]: "
labels: ["enhancement"]
body:

• type: textarea
  id: problem
  attributes:
  label: Is your feature request related to a problem?
  placeholder: I'm always frustrated when...
• type: textarea
  id: solution
  attributes:
  label: Describe the solution you'd like
  placeholder: It should work like...
  validations:
  required: true
• type: textarea
  id: alternatives
  attributes:
  label: Describe alternatives you've considered
  placeholder: I've also thought about...
• type: textarea
  id: context
  attributes:
  label: Additional context

File: .github/ISSUE_TEMPLATE/question.yml Copy Chapter

name: Question
title: "[Question]: "
labels: ["question"]
body:

• type: textarea
  id: question
  attributes:
  label: Your Question
  placeholder: How do I...
  validations:
  required: true

File: .github/workflows/phpunit-ci-coverage.yml Copy Chapter

name: PHPUnit CI

on:
workflow_dispatch:
pull_request:
push:
branches:
- main

jobs:
build-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: php-actions/composer@9357db0fb3020086db5a9922354c8dc643927bcd
- name: PHPUnit Tests
uses: php-actions/phpunit@v4
with:
bootstrap: vendor/autoload.php
configuration: tests/phpunit/phpunit.xml
args: --testdox
env:
TOKEN: ${{ secrets.GITHUB_TOKEN }}
USERNAME: DenverCoder1

File: .github/workflows/prettier.yml Copy Chapter

name: Format with Prettier

on:
push:
branches:
- main
pull_request:
paths:
- ".github/workflows/prettier.yml"
- ".php"
- ".md"
- ".js"
- ".css"

jobs:
prettier:
runs-on: ubuntu-latest
steps:
- name: Checkout Pull Request
if: ${{ github.event_name == 'pull_request' }}
uses: actions/checkout@v3
with:
ref: ${{ github.event.pull_request.head.ref }}

- name: Checkout Push
    if: ${{ github.event_name != 'pull_request' }}
    uses: actions/checkout@v3

  - name: Install prettier and plugin-php
    run: npm install [email protected] @prettier/[email protected]

  - name: Check formatting with Prettier
    continue-on-error: true
    run: composer format:check 

  - name: Prettify code
    run: |
      composer format 
      git diff

  - name: Commit changes
    uses: EndBug/add-and-commit@v9
    with:
      message: "style: Formatted code with Prettier"
      default_author: github_actions

File: .github/workflows/release.yml Copy Chapter

name: Releases

on:
workflow_dispatch:

jobs:
changelog:
runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v2

  - name: conventional Changelog Action
    id: changelog
    uses: TriPSs/[email protected]
    with:
      github-token: ${{ secrets.CHANGELOG_RELEASE }}
      version-file: './composer.json'
      output-file: 'false'

  - name: create release
    uses: actions/create-release@v1
    if: ${{ steps.changelog.outputs.skipped == 'false' }}
    env:
      GITHUB_TOKEN: ${{ secrets.CHANGELOG_RELEASE }}
    with:
      tag_name: ${{ steps.changelog.outputs.tag }}
      release_name: ${{ steps.changelog.outputs.tag }}
      body: ${{ steps.changelog.outputs.clean_changelog }}