#11 add preview view CI

.github/create-invalidate-preview.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+# 0. check if cloudfront exists with this prefix folder
+# if exists
+#   invalidate
+# else
+#   create cloudfront distribution
+# echo cloudfront_domain=domain >> $GITHUB_OUTPUT
+prefix=$1
+rm ./test.json
+echo $(aws cloudfront list-distributions --output json) >> ./test.json
+
+data=$(cat ./test.json)
+distribution_id="NONE"
+for row in $(jq '.DistributionList.Items[] | @base64' < './test.json'); do
+    _jq() {
+        echo $row | tr -d '"' | base64 --decode | jq -r "${1}" | tr -d '"'
+    }
+    comment=$(_jq '.Comment')
+    if [[ $comment = $prefix ]]
+    then
+        distribution_id=$(_jq '.Id')
+    fi
+done
+
+# echo $distribution_id
+
+domain=""
+
+if [[ $distribution_id = NONE ]]
+then
+    # config vars: TargetOriginId, Origin.Items.Id, Origin.Items.OriginPath, CallerReference, Comment 
+    config=$(cat .github/template.json)
+    config=$(echo $config | sed  -e "s/{{prefix}}/$prefix/g" | sed  -e "s/{{caller_reference}}/$prefix/g")
+
+    new_config=$(aws cloudfront create-distribution --distribution-config "$config")
+
+    distribution_id=$(echo $new_config | jq '.Distribution.Id' | tr -d '"')
+    domain=$(echo $new_config | jq '.Distribution.DomainName' | tr -d '"')
+    aws cloudfront wait distribution-deployed --id $distribution_id
+else
+    invalidation_id=$(aws cloudfront create-invalidation --distribution-id $distribution_id --paths /* | jq '.Invalidation.Id' | tr -d '"') 
+    aws cloudfront wait invalidation-completed --distribution-id $distribution_id --id $invalidation_id
+fi
+
+echo "domain=$domain" >> $GITHUB_OUTPUT

.github/template.json

@@ -0,0 +1,83 @@
+{
+    "Comment": "{{prefix}}",
+    "CacheBehaviors": {
+        "Quantity": 0
+    },
+    "Origins": {
+        "Items": [
+            {
+                "Id": "preview.gui.tea.xyz.s3-website.us-east-1.amazonaws.com-{{prefix}}",
+                "DomainName": "preview.gui.tea.xyz.s3-website.us-east-1.amazonaws.com",
+                "OriginPath": "/{{prefix}}",
+                "CustomHeaders": {
+                    "Quantity": 0
+                },
+                "CustomOriginConfig": {
+                    "HTTPPort": 80,
+                    "HTTPSPort": 443,
+                    "OriginProtocolPolicy": "http-only",
+                    "OriginSslProtocols": {
+                        "Quantity": 1,
+                        "Items": [
+                            "TLSv1.2"
+                        ]
+                    },
+                    "OriginReadTimeout": 30,
+                    "OriginKeepaliveTimeout": 5
+                },
+                "ConnectionAttempts": 3,
+                "ConnectionTimeout": 10,
+                "OriginShield": {
+                    "Enabled": false
+                }
+            }
+        ],
+        "Quantity": 1
+    },
+    "DefaultRootObject": "index.html",
+    "PriceClass": "PriceClass_All",
+    "Enabled": true,
+    "DefaultCacheBehavior": {
+        "TrustedSigners": {
+            "Enabled": false,
+            "Quantity": 0
+        },
+        "TargetOriginId": "preview.gui.tea.xyz.s3-website.us-east-1.amazonaws.com-{{prefix}}",
+        "ViewerProtocolPolicy": "allow-all",
+        "ForwardedValues": {
+            "Headers": {
+                "Quantity": 0
+            },
+            "Cookies": {
+                "Forward": "none"
+            },
+            "QueryString": false
+        },
+        "SmoothStreaming": false,
+        "AllowedMethods": {
+            "Items": [
+                "GET",
+                "HEAD"
+            ],
+            "Quantity": 2
+        },
+        "MinTTL": 0
+    },
+    "CallerReference": "{{caller_reference}}",
+    "ViewerCertificate": {
+        "CloudFrontDefaultCertificate": true
+    },
+    "CustomErrorResponses": {
+        "Quantity": 0
+    },
+    "Restrictions": {
+        "GeoRestriction": {
+            "RestrictionType": "none",
+            "Quantity": 0
+        }
+    },
+    "Aliases": {
+        "Quantity": 0
+    }
+}
+        

.github/workflows/ci.yml

@@ -63,6 +63,22 @@ jobs:
         run: |
           aws s3 sync ./packages/gui/build \
             "s3://preview.gui.tea.xyz/$prefix"
+      - name: setup preview
+        uses: getneil/jq-action@v1
+        id: preview_setup
+        with:
+          cmd: .github/create-invalidate-preview.sh ${{ needs.changes.outputs.preview_folder }}
+      - name: comment preview site
+        uses: mshick/add-pr-comment@v2
+        with:
+          message-id: preview-comment-${{needs.changes.outputs.preview_folder}}
+          message: |
+            **preview is at**: [https://${{steps.preview_setup.outputs.domain}}](https://${{steps.preview_setup.outputs.domain}})
+            ```bash
+            https://${{steps.preview_setup.outputs.domain}}
+            ```
+            copy-paste into a browser to view
+
   build_tauri:
     needs: changes
     if: needs.changes.outputs.tauri == 'true'

packages/ui/README.md

@@ -1,4 +1,4 @@
-# Tea UI
+# @tea/ui
 Isolated set of UI elements/components that can be reused across all svelte related apps of tea. Components here have to be maintained as much as possible as a [dumb/presentational components](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43). 
 
 ## Developing