From fbad5083aea932b4444fbc92a037fa85ab0094f5 Mon Sep 17 00:00:00 2001
From: "M. Umar Shahbaz" <68814294+KingHowler@users.noreply.github.com>
Date: Fri, 23 Aug 2024 21:12:34 +0500
Subject: [PATCH] Added gh-pages Formatter (#2649)

# Added prettier-hmtl.yml
## GitHub Workflow

## Purpose
The GitHub Workflow formats the html files on gh-pages. The html files
generated are always on a single line. This makes scaling programs a lot
more difficult. By formatting the HTML files, al-folio can now be used
to generate code which can then be modified to allow for using back-end.

## Errors found
I want to let you know that when I was using prettier for this, it kept
crashing and after some debugging I found out that al-folio was
generating an invalid tag ```</source>```. ```<source>``` is a
self-closing tag and doesn't have a separate closing tag.
Error: ```<source src="URL" type="type"></source>```
Correct: ```<source src="URL" type="type">```

## Workflow Description
1. The workflow starts by checking out the gh-pages branch.
2. Then it finds all ```</source>``` tags in all html files and deletes
them.
3. It Installs NodeJS and then Prettier. To make sure the code was
executed properly, the workflow checks if prettier is present.
4. Then the workflow runs prettier on all html files present in gh-pages
5. It ends by committing the changes and pushing them to the gh-pages
directory

# Example:
> Before
>
![image](https://github.com/user-attachments/assets/8f0f993a-1b18-4edf-9d62-2fe503af272a)

> After
>
![image](https://github.com/user-attachments/assets/0714a6c8-0b37-4aee-a4f0-4ce0a7a663a1)
---
 .github/workflows/prettier-html.yml | 36 +++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 .github/workflows/prettier-html.yml

diff --git a/.github/workflows/prettier-html.yml b/.github/workflows/prettier-html.yml
new file mode 100644
index 000000000000..3dc4326e12f8
--- /dev/null
+++ b/.github/workflows/prettier-html.yml
@@ -0,0 +1,36 @@
+name: Prettify gh-pages
+
+on:
+  workflow_dispatch:
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout gh-pages branch
+        uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+
+      - name: Find and Remove </source> Tags
+        run: find . -type f -name "*.html" -exec sed -i 's/<\/source>//g' {} +
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+
+      - name: Install Prettier
+        run: npm install -g prettier
+
+      - name: Check for Prettier
+        run: npx prettier --version || echo "Prettier not found"
+
+      - name: Run Prettier on HTML files
+        run: npx prettier --write '**/*.html'
+
+      - name: Commit and push changes
+        run: |
+          git config user.name "github-actions"
+          git config user.email "actions@github.com"
+          git add .
+          git commit -m "Formatted HTML files" || echo "No changes to commit"
+          git push