better handling of emojis

cloudposse · Jan 18, 2024 · acdeb6d · acdeb6d
1 parent 75afd1c
commit acdeb6d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git a/.github/workflows/repo-banner.yml b/.github/workflows/repo-banner.yml
@@ -37,48 +37,71 @@ jobs:
       run: |
         ln -s ${{github.workspace}} ${{github.workspace}}/github
 
+    - uses: actions-tools/yaml-outputs@v2
+      id: readme
+      with:
+        file-path: 'README.yaml'
+        fail-on-file-not-found: 'false'
+
     - name: Format Repo Metadata
       id: meta
       run: |
-        name="${{ steps.metadata.outputs.repository_name }}"
+
+        # Pull the name from the README
+        name="${{ steps.readme.outputs.name }}"
+        if [ -z "${name}" ]; then
+          # If the name was empty, then default to the repository_name
+          name="${{ steps.metadata.outputs.repository_name }}"
+        fi
+
         type="Project"
         desc="${{ steps.metadata.outputs.repository_description }}"
+        output=.github/banner.png
 
         if [[ "${name}" == "terraform-*-provider" ]]; then
-          echo "type=Terraform Provider" >> $GITHUB_OUTPUT
-          echo "name=${name#terraform-}" >> $GITHUB_OUTPUT
+          type="Terraform Provider" 
+          echo "name=${name#terraform-}"
         elif [[ "${name}" == "terraform-aws*" ]]; then
-          echo "type=Terraform Module" >> $GITHUB_OUTPUT
-          echo "name=${name#terraform-}" >> $GITHUB_OUTPUT
+          echo "type=Terraform Module" 
+          echo "name=${name#terraform-}" 
         elif [[ "${name}" == "github-action-*" ]]; then
-          echo "type=GitHub Action" >> $GITHUB_OUTPUT
-          echo "name=${name#github-action-}" >> $GITHUB_OUTPUT
+          echo "type=GitHub Action"
+          echo "name=${name#github-action-}"
         elif [[ "${name}" == "example-*" ]]; then
-          echo "type=Example" >> $GITHUB_OUTPUT
-          echo "name=${name#example-}" >> $GITHUB_OUTPUT
+          type=Example"
+          name=${name#example-}"
         elif [[ "${name}" == "infra-*" ]]; then
-          echo "type=Infrastructure" >> $GITHUB_OUTPUT
-          echo "name=${name#infra-}" >> $GITHUB_OUTPUT
+          type=Infrastructure"
+          name=${name#infra-}"
+        elif [[ "${name}" == ".github" ]]; then
+          type=Organization
+          output="banner/image.png"
         else
           echo "Repo type is indeterminable"
-          echo "name=${name}" >> $GITHUB_OUTPUT
-          echo "type=${type}" >> $GITHUB_OUTPUT
         fi
 
         if [[ "${desc}" == "null" ]]; then
-          echo "desc=" >> $GITHUB_OUTPUT
+          # Change it to an empty string
+          desc=""
         else
-          # Only keep the first sentence
-          echo "desc=${desc/.*}" >> $GITHUB_OUTPUT
+          # Only keep the first sentence and wrap emojis in a <span/> tag.
+          # Ths span tag is added so we can style the emoji
+          desc="${desc/.*}"
         fi
+
+        echo "name=${name}" >> $GITHUB_OUTPUT
+        echo "type=${type}" >> $GITHUB_OUTPUT
+        echo "output=${output}" >> $GITHUB_OUTPUT
+        echo "desc=${desc}" | LANG=en_US.UTF-8 sed -e "s/\([$(printf $emoji)]\)/<span class=\"emoji\">\1<\/span>/g" >> $GITHUB_OUTPUT
+        
         cat ${GITHUB_OUTPUT}
 
     - name: Generate banner image
       id: screenshot
       uses: cloudposse-github-actions/screenshot@main
       with:
         url: "file://${{github.workspace}}/github/banner/index.html"
-        output: "banner/image.png"
+        output: "${{ steps.meta.outputs.output }}"
         customizations: |
           "#name": "${{ steps.meta.outputs.name }}"
           "#type": "${{ steps.meta.outputs.type }}"

diff --git a/banner/index.html b/banner/index.html
@@ -2,13 +2,13 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
-
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Colr+Emoji+Glyf" rel="stylesheet">
     <title>Cloud Posse</title>
     <style>
     body {
       overflow: hidden;
       font: 16px/1.4 'proxima-nova';
-      font-family: 'proxima-nova', sans-serif;
+      font-family: 'proxima-nova', sans-serif,  'Noto Colr Emoji Glyf';
       margin: 0;
       color: hsla(0, 0%, 100%, 0.85); 
       min-width: 100vw;
@@ -21,6 +21,11 @@
       color: #ffffff40;
     }
 
+    .emoji {
+      position: relative;
+      bottom: 7px;
+    }
+
     .break {
       flex-basis: 100%;
       height: 0;
@@ -120,9 +125,8 @@
 
     .project .description {
       line-height: 1em;
-      display: flex;
+      display: inline;
       min-width: 1px;
-      flex-grow: 1;
       margin-top: 0.3em;
     }