#!/bin/bash

# Define your font directory
font_dir='./'

# Define the URL path to your fonts relative to the HTML file
font_url_path='./'

# Create or overwrite the style.css file
echo "" > style.css

# Create or overwrite the fonts.html file with its initial content
echo "<html><head><link rel=\"stylesheet\" href=\"style.css\"></head><body>" > fonts.html

# Find all the font files
for font_file in $(find $font_dir -type f \( -iname "*.ttf" -o -iname "*.otf" -o -iname "*.woff2" \)); do
    # Extract the base font file name
    base_font_file=$(basename $font_file)
    
    # Generate a font name from the file name by removing the extension
    font_name="${base_font_file%.*}"

    # Create a @font-face rule
    echo "
    @font-face {
        font-family: '$font_name';
        src: url('$font_url_path/$base_font_file');
    }" >> style.css
done

# Again, find all the font files
for font_file in $(find $font_dir -type f \( -iname "*.ttf" -o -iname "*.otf" -o -iname "*.woff2" \)); do
    # Generate a font name from the file name by removing the extension
    base_font_file=$(basename $font_file)
    font_name="${base_font_file%.*}"
    
    # Display the font name in its own font
    echo "<p class=\"$font_name\">$font_name</p>" >> fonts.html
done

# Close the HTML file
echo "</body></html>" >> fonts.html

# Add css classes for each font in style.css
for font_file in $(find $font_dir -type f \( -iname "*.ttf" -o -iname "*.otf" -o -iname "*.woff2" \)); do
    # Generate a font name from the file name by removing the extension
    base_font_file=$(basename $font_file)
    font_name="${base_font_file%.*}"

    echo "
    .$font_name {
        font-family: '$font_name';
    }" >> style.css
done