chore: Added Prettier workflow for formatting (#152)

Co-authored-by: Jonah Lawrence <jonah@freshidea.com>

.github/workflows/prettier.yml

@@ -0,0 +1,43 @@
+name: Format with Prettier
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    paths:
+      - "**.php"
+      - "**.md"
+      - "**.js"
+      - "**.css"
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Pull Request
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: actions/checkout@v3
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.ref }}
+
+      - name: Checkout Push
+        if: ${{ github.event_name != 'pull_request' }}
+        uses: actions/checkout@v3
+
+      - name: Install prettier and plugin-php
+        run: npm install --global prettier @prettier/plugin-php
+
+      - name: Check formatting with Prettier
+        continue-on-error: true
+        run: composer format:check 
+
+      - name: Prettify code
+        run: composer format 
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        with:
+          message: "style: Formatted code with Prettier"
+          default_author: github_actions

.prettierignore

@@ -0,0 +1,2 @@
+vendor
+*.min.js

CONTRIBUTING.md

@@ -50,6 +50,19 @@ Before you can run tests, PHPUnit must be installed. You can install it using Co
 composer install
 ```
 
+### Format and test the code
+
+Run the following command to format the code with Prettier:
+```
+composer run format
+```
+
+Run the following command to check if your code is formatted properly:
+```
+composer run format:check
+```
+> **Note** You need to have [`prettier`](https://prettier.io/) and the [prettier-php plugin](https://github.com/prettier/plugin-php) installed globally in order to run this command.
+
 Run the following command to run the PHPUnit test script which will verify that the tested functionality is still working.
 
 ```bash

composer.json

@@ -28,6 +28,8 @@
   },
   "scripts": {
     "start": "php7 -S localhost:8000 -t src || php -S localhost:8000 -t src",
-    "test": "./vendor/bin/phpunit --testdox tests"
+    "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"
   }
 }

docs/faq.md

@@ -12,9 +12,11 @@ Markdown files on GitHub support embedded images using Markdown or HTML. You can
 
 ### HTML
 
+<!-- prettier-ignore-start -->
 ```html
-<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text"></a>
+<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text"/></a>
 ```
+<!-- prettier-ignore-end -->
 
 ## The text is getting cut off at the end, how do I fix it?
 
@@ -30,11 +32,13 @@ https://readme-typing-svg.demolab.com/?lines=Your+Long+Message+With+A+Long+Width
 
 To center align images, you must use the HTML syntax and wrap it in an element with the HTML attribute `align="center"`.
 
+<!-- prettier-ignore-start -->
 ```html
 <p align="center">
-  <a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com/?lines=This+image+is+center-aligned&font=Fira%20Code&center=true&width=380&height=50"></a>
+  <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>
 ```
+<!-- prettier-ignore-end -->
 
 ## How do I add multiple spaces in the middle of a line?
 
@@ -46,12 +50,14 @@ A workaround for adding extra spaces can be to use other whitespace characters (
 
 As of May 2022, you can now [specify theme context](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) using the `<picture>` and `<source>` elements as shown below. The dark mode version appears in the `srcset` of the `<source>` tag and the light mode version appears in the `src` of the `<img>` tag.
 
+<!-- prettier-ignore-start -->
 ```html
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://readme-typing-svg.demolab.com/?lines=You+are+using+dark+mode&color=FFFFFF">
-  <img src="https://readme-typing-svg.demolab.com/?lines=You+are+using+light+mode&color=000000">
+  <source media="(prefers-color-scheme: dark)" srcset="https://readme-typing-svg.demolab.com/?lines=You+are+using+dark+mode&color=FFFFFF" />
+  <img src="https://readme-typing-svg.demolab.com/?lines=You+are+using+light+mode&color=000000" />
 </picture>
 ```
+<!-- prettier-ignore-end -->
 
 ## How do I create a Readme for my profile?