fix: fixes gif and mp4. (#1185)

* fix: fixes gif and mp4.

* fix: inline syntax fix

* fix: remove unneeded external images

README.md

@@ -34,12 +34,12 @@ Docs, Learn & Guides sections are open to contributions. If you find a mistake,
 
 ## Markdown extensions
 
-### Using images
+### Using images & videos
 
 There are two places to store images:
 
 1.`/site/static` for any images that are used in the UI, chrome, menus etc. These are typically icons, logos etc.
-2.`/site/assets` for any images that are used in the content of the site. These are typically screenshots, diagrams etc.
+2.`/site/assets` for any images and videos (`.mp4`) that are used in the content of the site. These are typically screenshots, diagrams etc.
 
 The `/site/assets` directory is special, as Hugo can use it to get "resources" which are then fed into the assets
 processing pipeline, where they are optimized, transformed to `.webp` and some more magic.
@@ -53,6 +53,12 @@ The above markdown will trigger the `render-image.html` hook that does all the p
 
 > Note that you can leave out the `/site/assets` part of the path.
 
+For videos, you can use the same syntax, but with a `.mp4` file:
+
+```markdown
+![some alt text](/path/to/video.mp4 "optional title")
+```
+
 ### Fancy fenced code blocks with title
 
 You can make fancy fenced code blocks as follows. We recognize any typescript and javascript code blocks and

site/content/docs/analytics/_index.md

@@ -156,11 +156,11 @@ setting the required HTTP header and query parameters to fetch the JSON. You'll
 
 In the following image you'll see all required configuration for a component:
 
-- ![#cc66ff](https://placehold.co/15x15/cc66ff/cc66ff.png) `Fields`
-- ![#cc9900](https://placehold.co/15x15/cc9900/cc9900.png) `Path`
-- ![#3399ff](https://placehold.co/15x15/3399ff/3399ff.png) `Query parameters`
-- ![#ff0000](https://placehold.co/15x15/ff0000/ff0000.png) `Header`
-- ![#33cc66](https://placehold.co/15x15/33cc66/33cc66.png) `Variables` (optional)
+- `Fields`
+- `Path`
+- `Query parameters`
+- `Header`
+- `Variables` (optional)
 
 ![grafana component configuration](/docs/images/analytics/grafana-component-configuration.png)
 
@@ -199,7 +199,6 @@ script that does the following:
 
 ```bash
 #!
- 
 ACCOUNT_ID=<your account ID>
 TOKEN=<your API token>
 

site/content/docs/browser-checks/_index.md

@@ -207,8 +207,7 @@ Note that we are using Playwright Test's built-in expect, which is enriched with
 When an assertion fails, your check fails. Your check's result will show the log output for the error. Any configured
 alerting channels will be triggered, notifying your team that something is up.
 
-<video alt="Viewing a failed check" autoplay loop muted src="/docs/images/browser-checks/getting-started_pwt.mp4"></video>
-
+![Viewing a failed check](/docs/images/browser-checks/getting-started_pwt.mp4)
 
 ## Using other browsers
 

site/content/docs/browser-checks/multiple-tabs.md

@@ -60,7 +60,7 @@ test('Open new tab', async ({ context, page }) => {
 
 Playwright Test will record videos for each of your tabs. You can find them in your test result for failed checks or in the check editor for passing as well as failing checks for easy debugging.
 
-<video alt="Checkly Playwright Test UI" autoplay loop muted src="/docs/images/browser-checks/multiple-tabs-pwt-report.mp4"></video>
+![Checkly Playwright Test UI](/docs/images/browser-checks/multiple-tabs-pwt-report.mp4)
 
 Playwright's Trace Viewer displays your tabs conveniently in a waterfall timeline to access all neccessary information:
 ![mutiple tabs - trace viewer](/docs/images/browser-checks/multiple-tabs-trace-viewer.png)

site/content/docs/browser-checks/playwright-test.md

@@ -93,7 +93,7 @@ When a `@playwright/test` test case fails, Checkly will record and make its trac
 
 Using the Playwright Trace Viewer you can effortlessly view your test, skip back and forth between actions, view snapshots and metadata, and more. This makes it very easy to inspect individual traces and debug failing tests.
 
-<video alt="Viewing a Playwright Test trace file" autoplay loop muted src="/docs/images/browser-checks/pwt_traces.mp4"></video>
+![Viewing a Playwright Test trace file](/docs/images/browser-checks/pwt_traces.mp4)
 
 When running tests from the editor page, trace files are always available for download and preview,
 regardless of whether the check is passing or failing. For scheduled check runs traces are only preserved when the check failed.
@@ -103,7 +103,7 @@ When a `@playwright/test` test case fails, Checkly will record a video for each
 
 Here's an example of a Playwright Test script that fails, and provides a video of the test sequence.
 
-<video alt="Viewing a Playwright Test video" autoplay loop muted src="/docs/images/browser-checks/pwt_videos.mp4"></video>
+![Viewing a Playwright Test video](/docs/images/browser-checks/pwt_videos.mp4)
 
 When running tests from the editor page, video files are always available for download and preview, regardless of whether
 the check is passing or failing. For scheduled check runs videos are only preserved when the check failed.

site/content/docs/browser-checks/screenshots.md

@@ -31,7 +31,8 @@ Screenshots need to stick to the following specs:
 ![take screenshots with Playwright](/docs/images/browser-checks/screenshots.png)
 
 When using Playwright Test your screenshots are automatically mapped to their corresponding test cases. This is especially useful when running multiple test cases within a `test.describe` block.
-<img class="screenshot-partial" alt="Checkly UI showing sreenshots in multiple test cases" src="/docs/images/browser-checks/screenshots-describe.png"/>
+
+![Checkly UI showing sreenshots in multiple test cases](/docs/images/browser-checks/screenshots-describe.png)
 
 Read more about the options for `page.screenshot()` like transparency, clipping and quality settings in the official docs for [Playwright](https://playwright.dev/docs/screenshots).
 
@@ -78,8 +79,7 @@ test('Visit Checkly homepage and take a screenshot', async ({ page }) => {
 {{< /tabs >}}
 
 The code above snaps a picture of the headline on the Checkly homepage.
-
-<video alt="Taking a screenshot of Checkly's headline" autoplay loop muted src="/docs/images/browser-checks/screenshots-element.mp4"></video>
+![Taking a screenshot of Checkly's headline](/docs/images/browser-checks/screenshots-element.mp4)
 
 ## More resources
 

site/content/docs/browser-checks/visual-regression-snapshot-testing.md

@@ -72,7 +72,7 @@ Starting with visual regression testing takes just three easy steps:
 
 3. Generate a golden image / reference snapshot by clicking the "Run script and update golden image" option in the "run script" button.
 
-   <video alt="generate reference snapshot" autoplay loop muted src="/docs/images/browser-checks/visual_comparison_1st_run.mp4"></video>
+   ![generate reference snapshot](/docs/images/browser-checks/visual_comparison_1st_run.mp4)
 
    This will generate the golden image, which you can inspect in the "golden files" tab in the editor. You can now save 
    your check and on each check run the golden image will be compared to the actual screenshot.
@@ -88,8 +88,7 @@ Starting with visual regression testing takes just three easy steps:
 Now, when your check fails due to a visual difference, you will see a diff of the golden image and the actual screenshot
 in your check result.
 
-<video alt="inspect visual diff" autoplay loop muted src="/docs/images/browser-checks/visual_comparison_diff_modal.mp4"></video>
-
+![inspect visual diff](/docs/images/browser-checks/visual_comparison_diff_modal.mp4)
 
 ### Configuring visual regression testing 
 

site/content/docs/monitoring/check-results.md

@@ -20,7 +20,7 @@ Select a check and you will see a breakdown of its recent runs, together with ke
 
 The summary at the top of the page allows for filtering based on the page's data points and the selected timeframe and locations. Retried check runs do not influence this section; only the final results are considered.
 
-<img class="screenshot-partial" alt="check results overview summary" src="/docs/images/monitoring/check-overview-summary.png"/>
+![check results overview summary](/docs/images/monitoring/check-overview-summary.png)
 
 Based on the user's selection, the metrics in the summary will also be updated to show the most important numbers at a glance.
 
@@ -30,7 +30,8 @@ The monitoring results chart shows a summary of the run results in the selected
 
 Hovering a bar in the chart will show the results of all check runs executed during that time. You can quickly filter the check run results in the right sidepanel by clicking a bar in the chart.
 
-<img class="screenshot-partial" alt="check results overview time ribbon" src="/docs/images/monitoring/check-overview-monitoring-result-chart.png"/>
+![check results overview time ribbon](/docs/images/monitoring/check-overview-monitoring-result-chart.png)
+
 
 When retries are enabled, an additional icon highlights that the check result contains multiple check runs.
 
@@ -45,52 +46,59 @@ Depending on the type of check, different performance metrics will be shown in t
 For Browser checks, several performance metrics are shown in separate charts:
 
 1. The total duration of the check run
-<img class="screenshot-partial" alt="check overview browser session duration graph" src="/docs/images/monitoring/check-overview-performance-browser.png"/>
+![check overview browser session duration graph](/docs/images/monitoring/check-overview-performance-browser.png)
+
 
 2. [Load timings](/docs/browser-checks/tracing-web-vitals/#first-contentful-paint) for the first page navigation
-<img class="screenshot-partial" alt="check overview load timings graph" src="/docs/images/monitoring/check-overview-performance-loading.png"/>
+![check overview load timings graph](/docs/images/monitoring/check-overview-performance-loading.png)
 
 3. A breakdown of different error types
-<img class="screenshot-partial" alt="check overview errors graph" src="/docs/images/monitoring/check-overview-errors.png"/>
+![check overview errors graph](/docs/images/monitoring/check-overview-errors.png)
+
 
 4. An [interactivity](/docs/browser-checks/tracing-web-vitals/#total-blocking-time) summary
-<img class="screenshot-partial" alt="check overview interactivity graph" src="/docs/images/monitoring/check-overview-interactivity.png"/>
+![check overview interactivity graph](/docs/images/monitoring/check-overview-interactivity.png)
 
 5. A [visual stability](/docs/browser-checks/tracing-web-vitals/#cumulative-layout-shift) breakdown
-<img class="screenshot-partial" alt="check overview visual stability graph" src="/docs/images/monitoring/check-overview-visual-stability.png"/>
+![check overview visual stability graph](/docs/images/monitoring/check-overview-visual-stability.png)
 
 For API checks, a detailed response time breakdown is shown:
-<img class="screenshot-partial" alt="check overview api performance graph" src="/docs/images/monitoring/check-overview-performance-api.png"/>
+![check overview api performance graph](/docs/images/monitoring/check-overview-performance-api.png)
 
 For Multistep checks, a response time breakdown is shown per step:
-<img class="screenshot-partial" alt="check overview api performance graph" src="/docs/images/monitoring/check-overview-performance-multistep.png"/>
+![check overview multistep performance graph](/docs/images/monitoring/check-overview-performance-multistep.png)
 
 A performance comparison by location will also be included for both types of check:
-<img class="screenshot-partial" alt="check overview location performance graph" src="/docs/images/monitoring/check-overview-locations.png"/>
+![check overview location performance graph](/docs/images/monitoring/check-overview-locations.png)
 
 ## Navigating individual check results
 The check result page will contain results from multiple locations when using [parallel scheduling](/docs/monitoring/global-locations/#scheduling-strategies). Navigate between each location using the sidebar.
-<img alt="Viewing multiple attempts from the dropdown" autoplay loop src="/docs/images/monitoring/location-select.gif"></img>
-
+![Viewing multiple attempts from the dropdown](/docs/images/monitoring/location-select.gif)
 
 ## Browser check results
 
 Individual browser check results contain:
 
 1. A short check summary, including errors broken down by category.
-<img class="screenshot-partial" alt="check results browser summary" src="/docs/images/monitoring/check-results-browser-summary.png"/>
+![check results browser summary](/docs/images/monitoring/check-results-browser-summary.png)
+
 2. When using Playwright Test Runner you will have an additional section displaying the test steps, error message, and assets (traces, videos, screenshots). [Read more](/docs/browser-checks/playwright-test/) about the additonal functionalities of Playwright Test.
-<img class="screenshot-partial" alt="check results browser playwright test report" src="/docs/images/monitoring/check-results-browser-pwt-report.png"/>
+![check results browser playwright test report](/docs/images/monitoring/check-results-browser-pwt-report.png)
+
 3. An error log, only if your script failed.
-<img class="screenshot-partial" alt="check results browser error log" src="/docs/images/monitoring/check-results-browser-error-log.png"/>
+![check results browser error log](/docs/images/monitoring/check-results-browser-error-log.png)
+
 4. Expandable tabs on page your script navigated to.
-<img class="screenshot-partial" alt="check results browser page navigation" src="/docs/images/monitoring/check-results-browser-page-navigations.png"/>
+![check results browser page navigation](/docs/images/monitoring/check-results-browser-page-navigations.png)
+
 When expanded, each tab shows its own navigation/loading time ribbon and web vitals...
-<img class="screenshot-partial" alt="check results browser navigation top" src="/docs/images/monitoring/check-results-browser-navigation-top.png"/>
+![check results browser page navigation top](/docs/images/monitoring/check-results-browser-page-navigations-top.png)
+
 ...together with browser console logs, network logs and any screenshots that had been taken (including one screenshot taken automatically on failure).
-<img class="screenshot-partial" alt="check results browser navigation bottom" src="/docs/images/monitoring/check-results-browser-navigation-bottom.png"/>
+![check results browser page navigation bottom](/docs/images/monitoring/check-results-browser-navigation-bottom.png)
+
 5. A job log for the check.
-<img class="screenshot-partial" alt="check results browser job log" src="/docs/images/monitoring/check-results-browser-job-log.png"/>
+![check results browser job log](/docs/images/monitoring/check-results-browser-job-log.png)
 
 ## API check results
 
@@ -138,7 +146,7 @@ Currently, only requests done using the Playwright `request` are shown as nodes
 
 In the request details you will also find the result of any assertion done as part of the corresponding test step.
 
-<video alt="Using the Multistep check results view" autoplay loop muted src="/docs/images/monitoring/check-results-multistep.mp4"></video>
+![Using the Multistep check results view](/docs/images/monitoring/check-results-multistep.mp4)
 
 ## TCP check results
 
@@ -160,5 +168,5 @@ When checks are retried, a dropdown will indicate that the check result contains
 
 When selecting a check run, all data and assets are available for inspection for each attempt.
 
-<img alt="Viewing multiple attempts from the dropdown" autoplay loop src="/docs/images/monitoring/check-retries.gif"></img>
+![Viewing multiple attempts from the dropdown](/docs/images/monitoring/check-retries.gif)
 

site/layouts/_default/_markup/render-image.html

@@ -44,24 +44,36 @@
 
 {{- /* render the actual HTML tags */}}
 {{- $attrs := merge .Attributes (dict "alt" .Text "title" (.Title | transform.HTMLEscape) "src" $origUrl.String) }}
+{{- $imageExtension := path.Ext $origUrl }}
 
-<picture>
-{{- with $resource }}
-  {{- /* Set the original image type. */}}
-  {{- $imageExtension := path.Ext $origUrl }}
-  {{- $origType := (printf "image/%s" (strings.TrimLeft "." $imageExtension)) }}
-  {{- $origHashed := . | resources.Fingerprint "md5" }}
+{{- if eq $imageExtension ".mp4" }}
+  {{- with $resource -}}
+    <video alt="{{ $attrs.alt }}" autoplay loop muted src="{{ .RelPermalink  }}"></video>
+  {{- end -}}
+{{- else if eq $imageExtension ".gif" }}
+  {{- with $resource -}}
+    <img loading="lazy" class="markdown-responsive-img" src="{{ .RelPermalink }}" alt="{{ $attrs.alt }}" title="{{ $attrs.title }}" />
+  {{- end -}}
+{{- else -}}
+  <picture>
+  {{- with $resource }}
+    {{- /* Set the original image type. */}}
+    {{- $origType := (printf "image/%s" (strings.TrimLeft "." $imageExtension)) }}
 
-  {{- /* Create a webP version and grab width and height if possible */}}
-  {{- if not (eq .MediaType.SubType "svg") }}
-    {{- $webPResource := .Resize (printf "%dx%d webp q80" .Width .Height) }}
-    <source type="image/webp" srcset="{{ $webPResource.RelPermalink }}" />
-  {{- end }}
-  <source type="{{ $origType }}" srcset="{{ $origHashed.RelPermalink }}" />
-  {{- if not (eq .MediaType.SubType "svg") }}
-    <img loading="lazy" class="markdown-responsive-img" src="{{ $origHashed.RelPermalink  }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $attrs.alt }}" title="{{ $attrs.title }}" />
-  {{- else }}
-    <img loading="lazy" class="markdown-responsive-img" src="{{ $origHashed.RelPermalink }}"  alt="{{ $attrs.alt }}" title="{{ $attrs.title }}" />
+    {{- /* Create a hashed version of the original image. */}}
+    {{- $origHashed := . | resources.Fingerprint "md5" }}
+
+    {{- /* Create a webP version and grab width and height if possible */}}
+    {{- if not (eq .MediaType.SubType "svg") }}
+      {{- $webPResource := .Resize (printf "%dx%d webp q80" .Width .Height) }}
+      <source type="image/webp" srcset="{{ $webPResource.RelPermalink }}" />
+    {{- end }}
+    <source type="{{ $origType }}" srcset="{{ $origHashed.RelPermalink }}" />
+    {{- if not (eq .MediaType.SubType "svg") }}
+      <img loading="lazy" class="markdown-responsive-img" src="{{ $origHashed.RelPermalink  }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $attrs.alt }}" title="{{ $attrs.title }}" />
+    {{- else }}
+      <img loading="lazy" class="markdown-responsive-img" src="{{ $origHashed.RelPermalink }}"  alt="{{ $attrs.alt }}" title="{{ $attrs.title }}" />
+    {{- end }}
   {{- end }}
-{{- end }}
-</picture>
+  </picture>
+{{- end -}}

src/scss/_docs.scss

@@ -21,12 +21,6 @@
     font-size: 14px;
   }
 
-  img.screenshot-partial {
-    border-radius: 4px;
-    border: $gray-lightest 1px solid;
-    margin: 16px 0;
-  }
-
   &-menu {
     flex: 0 0 $menu-width;
     font-size: 1rem;

src/scss/_markdown.scss

@@ -116,6 +116,7 @@
 
   video {
     max-width: 100%;
+    border-radius: 4px;
   }
 
   code {