Generate CSS and JSON presentation for predefined fontname list

Question

I have a bunch of files in a folder. They are formatted in the following ways:

Font1-Regular.ttf
Font1-Bold.ttf
Font2-SomeString-Regular.ttf
Font3.ttf

My goal is to create CSS representation of each font and a JSON object for each font type. For the fonts above it would look like this:

@font-face {
    font-family: "Font1-Regular";
    src: url("../assets/fonts/Font1-Regular.ttf");
}
@font-face {
    font-family: "Font1-Bold";
    src: url("../assets/fonts/Font1-Bold.ttf");
}
@font-face {
    font-family: "Font2-SomeString-Regular";
    src: url("../assets/fonts/Font2-SomeString-Regular.ttf");
}
@font-face {
    font-family: "Font3-Regular";
    src: url("../assets/fonts/Font3-Regular.ttf");
}

And JSON representation of the fonts:

[
    {
      fontName: "Font1",
      fontTypes: ["Regular", "Bold"]
    },
    {
      fontName: "Font2-SomeString",
      fontTypes: ["Regular"]
    },
    {
      fontName: "Font3",
      fontTypes: ["Regular"]
    }
]

This is the logic diagram for @font-faces creation:

1. check if it contain - character
2. if it does, than get the string after the last - and remove .ttf. Also get the string before the last -. If it doesn't, rename file to {previusFontName}-Regular.ttf and repeat step 2.
3. crete new @font-face tag and append it to the file I am saving the results.

How do you check if a file contains character and then get the substring before and after the character?

I think I can handle the JSON part, once I learn how to create @font-faces.

Code so far (which returns some syntax errors)

find . -type f "*.ttf" -exec if [[{} =~ "-"]]; then echo {} else echo "FAIL" fi \;

Answer 1

I would use awk to manipulate and generate the output.

Here's an example of getting hold of the parts to get you going.

$:cat flist.fonts 
Font1-Regular.ttf
Font1-Bold.ttf
Font2-SomeString-Regular.ttf
Font3.ttf
a crap line

$:cat doit.awk
/^.*\.ttf/ {
 print NR, $0 # just prints the line number and line

 if (match($0,/([^-]+)-(.+)\.ttf/,arr)) { # find the 2 halves
 print "\tFirst part:", arr[1]
 print "\t2nd part:", arr[2] 
 if (match(arr[2],/([^-]+)-(.*)/,part2_arr)){ # check 2nd half for -
    print "\t\t2a:", part2_arr[1]
    print "\t\t2b:", part2_arr[2]
    } else {print "\t\tNo - in 2nd part"}
 } else 
 print "\tNo hyphen in name ??"
}

$:awk -f doit.awk flist.fonts
1 Font1-Regular.ttf
    First part: Font1
    2nd part: Regular
        No - in 2nd part
2 Font1-Bold.ttf
    First part: Font1
    2nd part: Bold
        No - in 2nd part
3 Font2-SomeString-Regular.ttf
    First part: Font2
    2nd part: SomeString-Regular
        2a: SomeString
        2b: Regular
4 Font3.ttf
    No hyphen in name ??
$:

You can use your original find command to generate the file list eg,

find . -type f "*.ttf" -print | awk -f doit.awk

Answer 2

Awk solution to obtain CSS presentation:

awk -F'.' '{ 
               fc=($1!~/-/? $1"-Regular":$1); 
               printf "@font-face {\n\tfont-family: \"%s\";\n\tsrc: url(\../assets/fonts/%s.%s\");\n}\n",fc,fc,$2 
           }' file

The output:

@font-face {
    font-family: "Font1-Regular";
    src: url("../assets/fonts/Font1-Regular.ttf");
}
@font-face {
    font-family: "Font1-Bold";
    src: url("../assets/fonts/Font1-Bold.ttf");
}
@font-face {
    font-family: "Font2-SomeString-Regular";
    src: url("../assets/fonts/Font2-SomeString-Regular.ttf");
}
@font-face {
    font-family: "Font3-Regular";
    src: url("../assets/fonts/Font3-Regular.ttf");
}

---

Bonus awk solution to obtain JSON presentation:

awk -F'.' '{ 
       if (/-/) { 
           len=split($1,a,"-"); 
           ft=a[len]; sub("-"ft,"",$1); ft="\""ft"\""; 
           if ($1 in fn) { fn[$1]=fn[$1]", "ft } else { fn[$1]=ft; c++ } 
       } else { 
           fn[$1]="\"Regular\""; c++ 
       } 
     }
     END{ 
         printf "[\n\t{\n"; 
         for (k in fn) printf "\t  fontName: \"%s\",\n\t  fontTypes: [%s]\n\t}%s\n",k, fn[k],(--c? ",":""); print "]" 
     }' file

The output:

[
    {
      fontName: "Font1",
      fontTypes: ["Regular", "Bold"]
    },
      fontName: "Font3",
      fontTypes: ["Regular"]
    },
      fontName: "Font2-SomeString",
      fontTypes: ["Regular"]
    }
]