build and upload built artifacts like mdn/content (#814)

* build and upload built artifacts like mdn/content

* remove {{languages}} macro call

* hardcode upload path

* use env var

* debuggin

* debuggin

* debuggin

* debuggin

* debuggin

* debugging rsync

* debug more

* debug more

* cleanup

* debugging

* try this

* try this

* use 'HEAD~1'

* try this

* debug this

* debug this

* debug this

* -l 1

* testing something

* testing something (2)

* testing something (3)

* try git fetch -n origin

* can git diff work now?

* trying something more

* trying something more (2)

* trying something more (3)

* try with the right working-directory

* better sha?

* fix a bunch of images in a Polish page

3 files changed, 81 insertions, 42 deletions

diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml
index e7627ef857..45701450ac 100644
--- a/.github/workflows/pr-test.yml
+++ b/.github/workflows/pr-test.yml
@@ -17,6 +17,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        # Needed otherswise it will check out a merge commit which means
+        # you can't get a `git diff` for this PR compared to its base.
+        # with:
+        #   ref: ${{ github.event.pull_request.head.sha }}
 
       - uses: actions/checkout@v2
         with:
@@ -74,25 +78,18 @@ jobs:
         env:
           CONTENT_ROOT: ${{ github.workspace }}/mdn/content/files
           CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/files
-        working-directory: ${{ github.workspace }}/mdn/content
-        run: |
-          echo ${{ env.GIT_DIFF_CONTENT }}
-
-          # Some day, when our number of flaws have reached 0 we'll change
-          # this to "*:error" which means the slightest flaw in the build
-          # will break the build.
-          # See https://github.com/mdn/yari/issues/715
-          export BUILD_FLAW_LEVELS="unsafe_html: error, *:ignore"
-
-          # Note, it might be interesting to explore building *some*
-          # pages in a PR build if the diff doesn't have any index.html
-          # files changed.
-          # Instead of building the git diff, you build some known typical
-          # folders that you know don't take too long and do cover a lot
-          # of interesting macros etc.
-          # This way, when an edit to the source code comes in, perhaps the
-          # functional tests have a gap in them but actually building
-          # real content exposes it.
+
+          # This is so that if there's a single 'unsafe_html' flaw, it
+          # completely fails the build.
+          # But all other flaws should be 'warn' so that we can include
+          # information about the flaws when we analyze the built PR.
+          BUILD_FLAW_LEVELS: "unsafe_html: error, *:warn"
+
+          # Because we build these pages in a way that you get a toolbar,
+          # so the flaws can be displayed, but we don't want any of the
+          # other toolbar features like "Fix fixable flaws" or "Quick-edit"
+          # we set this to disable that stuff.
+          REACT_APP_CRUD_MODE_READONLY: true
 
           # Setting this to an empty string effectively means that the
           # <iframe> src will end up being the relative URL of the current
@@ -104,24 +101,72 @@ jobs:
           # whatever code is inserted into the code example. But since the
           # whole (possible) domain for PR builds will never be somewhere
           # where there are interesting cookies, it's a safe choice.
-          export BUILD_LIVE_SAMPLES_BASE_URL=
+          BUILD_LIVE_SAMPLES_BASE_URL: ""
 
           # In these builds we never care for or need the ability to sign in.
           # This environment variable will disable that functionality entirely.
-          export REACT_APP_DISABLE_AUTH=true
+          REACT_APP_DISABLE_AUTH: true
+
+          # TODO: This should be implicit when `CI=true`
+          BUILD_NO_PROGRESSBAR: true
 
           # If we don't do this the built files will end up in
           # `node_modules/@mdn/yari/client/build/` and we don't want that
           # to get pushed into the cache.
-          export BUILD_OUT_ROOT=/tmp/
+          BUILD_OUT_ROOT: /tmp/build
+
+        working-directory: ${{ github.workspace }}/mdn/content
+        run: |
+          mkdir -p $BUILD_OUT_ROOT
+
+          # Don't use `yarn build` (from mdn/content) because that one hardcodes
+          # the BUILD_OUT_ROOT and CONTENT_ROOT env vars.
+          node node_modules/@mdn/yari/build/cli.js ${{ env.GIT_DIFF_CONTENT }}
+
+          echo "Disk usage size of build/"
+          du -sh $BUILD_OUT_ROOT
 
-          export BUILD_NO_PROGRESSBAR=true
-          # The reason this script isn't in `package.json` is because
-          # you don't need that script as a writer. It's only used in CI
-          # and it can't use the default CONTENT_ROOT that gets set in
-          # package.json.
+          # Save the PR number into the build
+          echo ${{ github.event.number }} > $BUILD_OUT_ROOT/NR
 
-          yarn build ${{ env.GIT_DIFF_CONTENT }}
+      - name: Generate the diff file
+        if: ${{ env.GIT_DIFF_CONTENT }}
+        env:
+          # This must match what we set in the "Build changed content" step above
+          BUILD_OUT_ROOT: /tmp/build
+        run: |
+          # Save the raw diff blob and store that inside the ./build/
+          # directory.
+          # The purpose of this is for the PR Review Companion to later
+          # be able to use this raw diff file for the benefit of analyzing.
+          git diff --diff-filter=ACMRT ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > $BUILD_OUT_ROOT/DIFF
+
+      - name: Merge static assets with built documents
+        if: ${{ env.GIT_DIFF_CONTENT }}
+        env:
+          # This must match what we set in the "Build changed content" step above
+          BUILD_OUT_ROOT: /tmp/build
+        run: |
+          rsync -a ${{ github.workspace }}/mdn/content/node_modules/@mdn/yari/client/build/ $BUILD_OUT_ROOT/
+
+          # Now that build/ directory contains everything you need to deploy
+          # that as a site. HTML, static assets, images, etc.
+          # However, that Yari static files is very heavy and it's in large
+          # part due to the .map files.
+          # In fact, as of March 2021, the client/build/static directory
+          # is 2.3MB but only 864KB without all the .map files.
+          # Let's delete those this time because this isn't the right time
+          # to debug JS or CSS.
+          find $BUILD_OUT_ROOT/static -type f -name "*.map" | xargs rm
+
+      - uses: actions/upload-artifact@v2
+        if: ${{ env.GIT_DIFF_CONTENT }}
+        env:
+          # This must match what we set in the "Build changed content" step above
+          BUILD_OUT_ROOT: /tmp/build
+        with:
+          name: build
+          path: ${{ env.BUILD_OUT_ROOT }}
 
       - uses: technote-space/get-diff-action@v4.1.1
         with:
diff --git a/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
index 87a1ed693b..e732e886c6 100644
--- a/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
+++ b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
@@ -188,9 +188,3 @@ function loadOnlyFirst() {
 <p>Les <a href="/fr/Construire_une_extension" title="fr/Construire_une_extension">extensions</a> pour Firefox 1.5 doivent prendre en compte cette fonctionnalité de mise en cache. Si vous développez une extension pour Firefox et que vous désirez qu'elle soit compatible à la fois avec la 1.5 et les versions antérieures, assurez-vous qu'elle écoute l'évènement <code>load</code> pour les déclencheurs qui peuvent être mis en cache et écoute l'évènement <code>pageshow</code> pour les déclencheurs qui ne doivent pas être mis en cache.</p>
 
 <p>Par exemple, la Barre d'outils Google pour Firefox doit écouter l'évènement <code>load</code> pour la fonction de liens automatiques et l'évènement <code>pageshow</code> pour la fonction PageRank afin d'être compatible à la fois avec la version 1.5 et les versions antérieures.</p>
-
-<p><span class="comment">Catégories</span></p>
-
-<p><span class="comment">Interwiki</span></p>
-
-<p>{{ languages( { "de": "de/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)", "en": "en/Using_Firefox_1.5_caching", "it": "it/Usare_il_caching_di_Firefox_1.5", "ja": "ja/Using_Firefox_1.5_caching" } ) }}</p>
diff --git a/files/pl/learn/common_questions/how_does_the_internet_work/index.html b/files/pl/learn/common_questions/how_does_the_internet_work/index.html
index 13f7ead9b9..9b5739003c 100644
--- a/files/pl/learn/common_questions/how_does_the_internet_work/index.html
+++ b/files/pl/learn/common_questions/how_does_the_internet_work/index.html
@@ -50,35 +50,35 @@ original_slug: Learn/Common_questions/Jak_dziala_Internet
 <p><strong>Uwaga:</strong> W dalszej części tego artykułu będziemy mówić tylko o kablach fizycznych, ale sieci bezprzewodowe działają tak samo.</p>
 </div>
 
-<p><img alt="Dwa komputery połączone razem" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+<p><img alt="Dwa komputery połączone razem" src="internet-schema-1.png"></p>
 
 <p>Taka sieć nie jest ograniczona do dwóch komputerów. Można podłączyć tyle komputerów, ile się chce. Ale to się szybko komplikuje. Jeśli próbujesz połączyć, powiedzmy dziesięć komputerów, potrzebujesz 45 kabli, z dziewięcioma wtyczkami na komputer!</p>
 
-<p><img alt="Dziesięć komputerów, wszystkie razem" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+<p><img alt="Dziesięć komputerów, wszystkie razem" src="internet-schema-2.png"></p>
 
 <p>Aby rozwiązać ten problem, każdy komputer w sieci jest podłączony do specjalnego malutkiego komputera zwanego <em>routerem</em>. Ten <em>router</em> ma tylko jedno zadanie: podobnie jak sygnalizator na stacji krajowej, dba o to, aby wiadomość wysłana z danego komputera dotarła do właściwego komputera docelowego. Aby wysłać wiadomość do komputera B, komputer A musi wysłać wiadomość do routera, który z kolei przekazuje wiadomość do komputera B i upewnia się, że wiadomość nie zostanie dostarczona do komputera C.</p>
 
 <p>Po dodaniu routera do systemu, nasza sieć składająca się z 10 komputerów wymaga tylko 10 kabli: jedna wtyczka na każdy komputer i router z 10 wtyczkami.</p>
 
-<p><img alt="Dziesięć komputerów z routerem" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+<p><img alt="Dziesięć komputerów z routerem" src="internet-schema-3.png"></p>
 
 <h3 id="Sieć_sieci">Sieć sieci</h3>
 
 <p>Na razie w porządku. Ale co z podłączeniem setek, tysięcy, miliardów komputerów? Oczywiście pojedynczy <em>router</em> nie działa na tak dużą skalę, ale jeśli uważnie czytasz, powiedzieliśmy, że <em>router</em> jest komputerem jak każdy inny, więc co powstrzymuje nas przed połączeniem dwóch <em>routerów</em>? Nic, więc zróbmy to.</p>
 
-<p><img alt="Dwa routery połączone razem" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+<p><img alt="Dwa routery połączone razem" src="internet-schema-4.png"></p>
 
 <p>Podłączając komputery do routerów, a następnie routery do routerów, jesteśmy w stanie skalować w nieskończoność.</p>
 
-<p><img alt="Routery połączone z routerami" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+<p><img alt="Routery połączone z routerami" src="internet-schema-5.png"></p>
 
 <p>Taka sieć jest bardzo zbliżona do tego, co nazywamy Internetem, ale czegoś nam brakuje. Zbudowaliśmy tę sieć dla naszych własnych celów. Są inne sieci: twoi przyjaciele, sąsiedzi, każdy może mieć swoją własną sieć komputerów. Ale tak naprawdę nie jest możliwe ułożenie kabli między domem a resztą świata, więc jak sobie z tym poradzić? Cóż, są już kable podłączone do twojego domu, na przykład zasilanie elektryczne i telefon. Infrastruktura telefoniczna już łączy Twój dom z kimkolwiek na świecie, więc jest to idealny przewód, którego potrzebujemy. Aby połączyć naszą sieć z infrastrukturą telefoniczną, potrzebujemy specjalnego urządzenia zwanego <em>modemem</em>. <em>Modem</em> ten zamienia informacje z naszej sieci w informacje zarządzane przez infrastrukturę telefoniczną i na odwrót.</p>
 
-<p><img alt="Router połączony z modemem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+<p><img alt="Router połączony z modemem" src="internet-schema-6.png"></p>
 
 <p>Więc jesteśmy podłączeni do infrastruktury telefonicznej. Następnym krokiem jest wysłanie wiadomości z naszej sieci do sieci, do której chcemy dotrzeć. W tym celu podłączymy naszą sieć do Dostawcy Usług Internetowych (ISP). Dostawca usług internetowych to firma, która zarządza kilkoma specjalnymi <em>routerami</em>, które są ze sobą połączone i mogą również uzyskać dostęp do routerów innych dostawców usług internetowych. Tak więc wiadomość z naszej sieci jest przekazywana przez sieć dostawców usług internetowych do sieci docelowej. Internet składa się z całej tej infrastruktury sieci.</p>
 
-<p><img alt="Pełny stos Internetowy" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+<p><img alt="Pełny stos Internetowy" src="internet-schema-7.png"></p>
 
 <h3 id="Wyszukiwanie_komputerów">Wyszukiwanie komputerów</h3>
 
@@ -86,7 +86,7 @@ original_slug: Learn/Common_questions/Jak_dziala_Internet
 
 <p>To doskonale pasuje do komputerów, ale my, ludzie, mamy problem z zapamiętywaniem tego typu adresów. Aby to ułatwić, możemy nadać adres IP z czytelną dla człowieka nazwą zwaną <em>nazwą domeny</em>. Na przykład (w momencie pisania; adresy IP mogą się zmieniać) <code>google.com</code> to nazwa domeny używana do adresu IP <code>172.217.165.131</code>. Tak więc używanie nazwy domeny jest dla nas najłatwiejszym sposobem dotarcia do komputera przez Internet.</p>
 
-<p><img alt="Pokazuje, jak nazwa domeny może zmienić adres IP na inny" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+<p><img alt="Pokazuje, jak nazwa domeny może zmienić adres IP na inny" src="dns-ip.png"></p>
 
 <h3 id="Internet_i_sieć">Internet i sieć</h3>