Merge branch 'main' into prod

Author: joaomoreno

.github/workflows/build.yml

@@ -6,11 +6,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Source
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           submodules: true
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: "14"
       - run: npm install
@@ -19,7 +19,7 @@ jobs:
         uses: ./.github/actions/build
       - name: Upload
         if: github.ref == 'refs/heads/prod'
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: |
@@ -38,12 +38,12 @@ jobs:
     if: github.ref == 'refs/heads/prod'
     steps:
       - name: Checkout Source
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           ref: gh-pages
           fetch-depth: 0
       - name: Download
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: .

main.css

@@ -240,3 +240,20 @@ input[type="range"] {
 #app:not(.home) h1 {
   display: none;
 }
+
+/* Onboarding image */
+
+.onboarding-gif {
+  border-radius: 8px;
+  padding-bottom: 20px;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Hide onboarding image on small screens */
+
+@media (max-width: 1000px) {
+  .onboarding-gif {
+    display: none;
+  }
+}

media/onboarding.gif

@@ -0,0 +1,17 @@
+import m from "mithril";
+
+interface OnboardingAttrs {
+  readonly src?: string;
+  readonly alt?: string;
+  readonly class?: string;
+}
+
+export default class Onboarding implements m.ClassComponent<OnboardingAttrs> {
+  view(vnode: m.Vnode<OnboardingAttrs>) {
+    return m("img", {
+      src: vnode.attrs.src || "media/onboarding.gif",
+      alt: vnode.attrs.alt || "Onboarding animation",
+      class: vnode.attrs.class || "onboarding-gif",
+    });
+  }
+}

src/components/onboarding.ts

@@ -2,6 +2,7 @@ import m from "mithril";
 import { App } from "../gifcap";
 import Button from "../components/button";
 import View from "../components/view";
+import Onboarding from "../components/onboarding";
 
 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
@@ -18,6 +19,7 @@ export default class StartView implements m.ClassComponent<StartViewAttrs> {
 
   view() {
     return m(View, [
+      m(Onboarding),
       m("p", "Create animated GIFs from a screen recording."),
       m("p", "Client-side only, no data is uploaded. Modern browser required."),
       isMobile ? m("p", "Sorry, mobile does not support screen recording.") : undefined,