Merge branch 'main' into backdrop-marker

mdn · Jul 26, 2023 · b7b8ffd · b7b8ffd
2 parents 47834dc + 9240bfd
commit b7b8ffd
Show file tree

Hide file tree

Showing 160 changed files with 2,883 additions and 1,460 deletions.
diff --git a/.github/workflows/prod-deploy.yml b/.github/workflows/prod-deploy.yml
@@ -1,25 +1,36 @@
-name: prod-deploy
+name: Prod Deployment
 
 on:
   push:
     branches:
-      - 'main'
-    paths:
-      - 'bin/**'
-      - 'live-examples/**'
-      - 'media/**'
-      - 'Jenkinsfile'
-      - 'package.json'
+      - main
+
   workflow_dispatch:
+    inputs:
+      notes:
+        description: 'Notes'
+        required: false
+        default: ''
+
+  workflow_call:
+    secrets:
+      GCP_PROJECT_NAME:
+        required: true
+      WIP_PROJECT_ID:
+        required: true
 
 jobs:
-  deploy:
+  build:
+    environment: prod
+    permissions:
+      contents: read
+      id-token: write
+
     runs-on: ubuntu-latest
     if: github.triggering_actor != 'dependabot[bot]'
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
@@ -33,14 +44,16 @@ jobs:
       - name: Build all
         run: npm run build
 
-      - name: Deploy pages
-        run: |
-          git init
-          git config user.name "schalkneethling"
-          git config user.email "sneethling@mozilla.com"
-          git checkout -b prod
-          git add .
-          git commit --allow-empty -m "Deploying latest generated pages"
-          git remote add mdn "https://$GITHUB_TOKEN@github.com/mdn/interactive-examples.git"
-          # Eat output so it doesn't spit out the sensitive GITHUB_TOKEN if something goes wrong:
-          git push -q -f mdn prod > /dev/null 2>&1
+      - name: Authenticate with GCP
+        uses: google-github-actions/auth@v1
+        with:
+          token_format: access_token
+          service_account:  deploy-prod-interactive-exampl@${{ secrets.GCP_PROJECT_NAME }}.iam.gserviceaccount.com
+          workload_identity_provider: projects/${{ secrets.WIP_PROJECT_ID }}/locations/global/workloadIdentityPools/github-actions/providers/github-actions
+
+      - name: Setup gcloud
+        uses: google-github-actions/setup-gcloud@v1
+
+      - name: Deploy pages to GCP
+        run: |-
+          gsutil -m rsync -d -r docs/ gs://interactive-examples-prod-mdn/
diff --git a/.github/workflows/stage-deploy.yml b/.github/workflows/stage-deploy.yml
@@ -12,8 +12,19 @@ on:
         required: false
         default: ''
 
+  workflow_call:
+    secrets:
+      GCP_PROJECT_NAME:
+        required: true
+      WIP_PROJECT_ID:
+        required: true
+
 jobs:
   build:
+    environment: stage
+    permissions:
+      contents: read
+      id-token: write
     runs-on: ubuntu-latest
     if: github.triggering_actor != 'dependabot[bot]'
 
@@ -32,12 +43,16 @@ jobs:
       - name: Build all
         run: npm run build
 
-      - name: Configure AWS credentials for stage
-        uses: aws-actions/configure-aws-credentials@v1-node16
+      - name: Authenticate with GCP
+        uses: google-github-actions/auth@v1
         with:
-          aws-access-key-id: ${{ secrets.STAGE_AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.STAGE_AWS_ACCESS_KEY_SECRET }}
-          aws-region: us-east-1
+          token_format: access_token
+          service_account:  deploy-stage-interactive-examp@${{ secrets.GCP_PROJECT_NAME }}.iam.gserviceaccount.com
+          workload_identity_provider: projects/${{ secrets.WIP_PROJECT_ID }}/locations/global/workloadIdentityPools/github-actions/providers/github-actions
+
+      - name: Setup gcloud
+        uses: google-github-actions/setup-gcloud@v1
 
-      - name: Deploy pages
-        run: aws s3 sync docs/ s3://interactive-examples-stage-ce3e7ea385c68f44/
+      - name: Deploy pages to GCP
+        run: |-
+          gsutil -m rsync -d -r docs/ gs://interactive-examples-stage-mdn/
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,75 +1,32 @@
 {
     "extends": ["stylelint-prettier/recommended"],
     "rules": {
-        "at-rule-name-case": "lower",
-        "at-rule-name-space-after": "always-single-line",
-        "at-rule-semicolon-newline-after": "always",
-        "block-closing-brace-empty-line-before": "never",
-        "block-closing-brace-newline-after": "always",
-        "block-closing-brace-newline-before": "always",
         "block-no-empty": true,
-        "block-opening-brace-newline-after": "always",
-        "block-opening-brace-space-before": "always",
-        "color-hex-case": "lower",
         "color-named": null,
         "color-no-invalid-hex": true,
         "comment-no-empty": true,
-        "declaration-bang-space-after": "never",
-        "declaration-bang-space-before": "always",
         "declaration-block-no-shorthand-property-overrides": true,
-        "declaration-block-semicolon-newline-after": "always-multi-line",
-        "declaration-block-semicolon-newline-before": "never-multi-line",
         "declaration-block-single-line-max-declarations": 1,
-        "declaration-block-trailing-semicolon": "always",
-        "declaration-colon-space-after": "always-single-line",
-        "declaration-colon-space-before": "never",
         "declaration-empty-line-before": ["never", { "ignore": ["after-comment", "after-declaration"] }],
         "declaration-no-important": true,
         "font-family-name-quotes": "always-where-recommended",
         "font-family-no-duplicate-names": true,
-        "function-comma-space-after": "always-single-line",
         "function-name-case": "lower",
         "function-url-no-scheme-relative": true,
         "function-url-quotes": "always",
-        "indentation": [4, { "ignore": ["value"] }],
         "keyframe-declaration-no-important": true,
         "length-zero-no-unit": true,
-        "max-empty-lines": 2,
         "max-nesting-depth": 5,
-        "media-feature-colon-space-after": "always",
-        "media-feature-colon-space-before": "never",
-        "media-feature-name-case": "lower",
         "media-feature-name-no-unknown": [true, { "ignoreMediaFeatureNames": ["min--moz-device-pixel-ratio"]}],
-        "media-feature-parentheses-space-inside": "never",
-        "media-feature-range-operator-space-after": "always",
-        "media-feature-range-operator-space-before": "always",
-        "media-query-list-comma-newline-after": "always-multi-line",
-        "media-query-list-comma-newline-before": "never-multi-line",
-        "media-query-list-comma-space-after": "always-single-line",
-        "media-query-list-comma-space-before": "never",
-        "no-eol-whitespace": true,
-        "no-extra-semicolons": true,
         "no-invalid-double-slash-comments": true,
-        "no-missing-end-of-source-newline": true,
         "no-unknown-animations": true,
-        "number-no-trailing-zeros": true,
-        "property-case": "lower",
         "property-no-unknown": true,
         "rule-empty-line-before": ["always", { "ignore": ["after-comment", "inside-block"] }],
-        "selector-combinator-space-after": "always",
-        "selector-combinator-space-before": "always",
-        "selector-list-comma-newline-after": "always",
-        "selector-list-comma-newline-before": "never-multi-line",
-        "selector-max-empty-lines": 0,
-        "selector-pseudo-class-case": "lower",
         "selector-pseudo-class-no-unknown": true,
-        "selector-pseudo-element-case": "lower",
         "selector-pseudo-element-no-unknown": true,
         "selector-type-case": "lower",
         "selector-type-no-unknown": true,
         "string-no-newline": true,
-        "string-quotes": "single",
-        "unit-case": "lower",
         "unit-no-unknown": true,
         "value-keyword-case": "lower"
     }

diff --git a/Jenkinsfile b/Jenkinsfile
diff --git a/README.md b/README.md
@@ -32,7 +32,6 @@ The following is a list of browser/version combinations that are supported by th
 - Chrome - Latest three release versions.
 - Opera - Latest two release versions.
 - Safari - Latest two release versions.
-- Internet Explorer - version 11.
 - Edge - Latest release version.
 
 ## Contributing

diff --git a/bin/s3-sync.sh b/bin/s3-sync.sh
diff --git a/live-examples/css-examples/backgrounds-and-borders/background-attachment.css b/live-examples/css-examples/backgrounds-and-borders/background-attachment.css
@@ -11,7 +11,7 @@
     height: 100%;
     background: url('/media/examples/lizard.png') right 3rem top 1rem / 15rem no-repeat,
         url('/media/examples/moon.jpg') center / 10rem;
-    color: #fff;
+    color: #ff5454;
     font-size: 1.5em;
     font-weight: bold;
     overflow: auto;

diff --git a/live-examples/css-examples/backgrounds-and-borders/background-clip.css b/live-examples/css-examples/backgrounds-and-borders/background-clip.css
@@ -1,6 +1,7 @@
 #example-element {
-    background-image: url('/media/examples/hand.jpg');
-    color: #fff;
+    background-image: url('/media/examples/leopard.jpg');
+    color: #d73611;
+    text-shadow: 2px 2px black;
     padding: 20px;
     border: 10px dashed #333;
     font-size: 2em;

diff --git a/live-examples/css-examples/basic-box-model/clear.css b/live-examples/css-examples/basic-box-model/clear.css
@@ -7,14 +7,14 @@
 
 .floated-left {
     border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    background-color: rgba(81, 81, 81, 0.6);
     padding: 1em;
     float: left;
 }
 
 .floated-right {
     border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    background-color: rgba(81, 81, 81, 0.6);
     padding: 1em;
     float: right;
     height: 150px;

diff --git a/live-examples/css-examples/basic-box-model/float.css b/live-examples/css-examples/basic-box-model/float.css
@@ -7,8 +7,9 @@
 }
 
 #example-element {
-    border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    border: solid 10px #efac09;
+    background-color: #040d46;
+    color: white;
     padding: 1em;
     width: 40%;
 }
diff --git a/live-examples/css-examples/basic-box-model/margin.css b/live-examples/css-examples/basic-box-model/margin.css
@@ -10,12 +10,12 @@
 .row {
     height: 33.33%;
     display: inline-block;
-    border: solid #5b6dcd 10px;
-    background-color: rgba(229, 232, 252, 0.6);
+    border: solid #ce7777 10px;
+    background-color: #2b3a55;
     flex-shrink: 0;
 }
 
 #example-element {
-    border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    border: solid 10px #ffbf00;
+    background-color: #2b3a55;
 }
diff --git a/live-examples/css-examples/basic-box-model/meta.json b/live-examples/css-examples/basic-box-model/meta.json
@@ -7,13 +7,6 @@
             "title": "CSS Demo: clear",
             "type": "css"
         },
-        "contain": {
-            "cssExampleSrc": "./live-examples/css-examples/basic-box-model/contain.css",
-            "exampleCode": "./live-examples/css-examples/basic-box-model/contain.html",
-            "fileName": "contain.html",
-            "title": "CSS Demo: contain",
-            "type": "css"
-        },
         "display": {
             "cssExampleSrc": "./live-examples/css-examples/basic-box-model/display.css",
             "exampleCode": "./live-examples/css-examples/basic-box-model/display.html",
@@ -155,6 +148,13 @@
             "title": "CSS Demo: overflow-block",
             "type": "css"
         },
+        "overflowClipMargin": {
+            "cssExampleSrc": "./live-examples/css-examples/basic-box-model/overflow-clip-margin.css",
+            "exampleCode": "./live-examples/css-examples/basic-box-model/overflow-clip-margin.html",
+            "fileName": "overflow-clip-margin.html",
+            "title": "CSS Demo: overflow-clip-margin",
+            "type": "css"
+        },
         "overflowInline": {
             "cssExampleSrc": "./live-examples/css-examples/basic-box-model/overflow.css",
             "exampleCode": "./live-examples/css-examples/basic-box-model/overflow-inline.html",

diff --git a/live-examples/css-examples/basic-box-model/overflow-block.html b/live-examples/css-examples/basic-box-model/overflow-block.html
@@ -14,6 +14,13 @@
         </button>
     </div>
 
+    <div class="example-choice">
+        <pre><code class="language-css">overflow-block: clip;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+
     <div class="example-choice">
         <pre><code class="language-css">overflow-block: scroll;</code></pre>
         <button type="button" class="copy hidden" aria-hidden="true">