feat: moves learn styling to docs. Replaces unneeded shortcodes with …

…markdown hooks

README.md

@@ -26,15 +26,60 @@ This is done automatically through a github action, see `.github/worksflows/algo
 
 ## Docs, Learn & Guides
 
-Docs, Learn & Guides sections are open to contributions. If you find a mistake or you think that something could be improve, please open a PR 🙂
+Docs, Learn & Guides sections are open to contributions. If you find a mistake, or you think that something could be improved, please open a PR 🙂
 
 - Docs: `./site/content/docs`
 - Learn: `./site/content/learn`
 - Guides: `./site/content/guides`
 
+## Markdown extensions
+
+### Fancy fenced code blocks with title
+
+You can make fancy fenced code blocks as follows. We recognize any typescript and javascript code blocks and
+add a nice logo to them.
+
+````markdown
+```ts {title="src/index.ts"}
+console.log('hello world')
+```
+````
+
+You can also highlight certain lines in the code block by adding a `hl_lines` attribute to the code block.
+
+````markdown
+```ts {title="src/index.ts", hl_lines=[2]}
+console.log('hello world')
+console.log('this will be highlighted')
+console.log('goodbey world')
+``` 
+````
+
+### Alerts
+
+We removed all the custom Hugo shortcodes and replaced them with markdown alerts. You can use the following types:
+
+- `[!NOTE]` (default, same as not specifying any type) 
+- `[!WARNING]`
+- `[!CLI]`
+````markdown
+> This is a default note / info alert.
+
+> [!NOTE]
+> This is the same as the default note / info alert, just more explicit.
+
+> [!WARNING]
+> This is a warning.
+
+> [!CLI]
+> This adds a CLI tip!
+````
+
+
 ## Blog
 
-Do you want to share your use case and experience using Checkly with your product? Become a guest author. Reach us at [[email protected]](mailto:[email protected])
+Do you want to share your use case and experience using Checkly with your product? Become a guest author. 
+Reach us at [[email protected]](mailto:[email protected])
 
 ## License
 

site/content/_shared/checkly-playwright-helpers.md

@@ -23,24 +23,20 @@ const { getAPIResponseTime, markCheckAsDegraded } = require('@checkly/playwright
 {{< /tab >}}
 {{< /tabs >}}
 
-{{< info >}}
-`@checkly/playwright-helpers` is also available for use in Browser and Multistep checks.
-{{< /info >}}
+> `@checkly/playwright-helpers` is also available for use in Browser and Multistep checks.
 
 ### markCheckAsDegraded
 Marks a check as degraded if:
 - The check is failing with soft assertions, or
 - The check has no failures
 
-{{< info >}}
-If your check is failing due to a timeout or failed non-soft assertion it will be considered failing, even if `markCheckAsDegraded` is called.
-{{< /info >}}
+> If your check is failing due to a timeout or failed non-soft assertion it will be considered failing, even if `markCheckAsDegraded` is called.
 
 **Usage**
 ```ts
-    if (foo.length > 100) {
-      markCheckAsDegraded('Foo is too long.')
-    }
+if (foo.length > 100) {
+  markCheckAsDegraded('Foo is too long.')
+}
 ```
 
 **Arguments**
@@ -51,10 +47,10 @@ Gets the request response time.
 
 **Usage**
 ```ts
-    if (getAPIResponseTime(response) > 100) {
-      markCheckAsDegraded('Response was too slow.')
-    }
+if (getAPIResponseTime(response) > 100) {
+  markCheckAsDegraded('Response was too slow.')
+}
 ```
 
 **Arguments**
-- `response` [APIResponse](https://playwright.dev/docs/api/class-apiresponse) *(required)*. A response from a Playwright API request.
+- `response` [APIResponse](https://playwright.dev/docs/api/class-apiresponse) *(required)*. A response from a Playwright API request.

site/content/_shared/otel-api-and-endpoint.md

@@ -19,9 +19,7 @@ export OTEL_EXPORTER_OTLP_ENDPOINT="https://otel.eu-west-1.checklyhq.com"
 export OTEL_SERVICE_NAME="your-service-name"
 ```
 
-{{< info >}}
-During the beta we only have one region available: `eu-west-1`. We will expand to US regions soon.
-{{< /info >}}
+> During the beta we only have one region available: `eu-west-1`. We will expand to US regions soon.
 
 We are using the standard OpenTelemetry environment variables here to configure the OTLP exporter.
 

site/content/_shared/variables-and-secrets.md

@@ -7,11 +7,7 @@ There are two ways to store configuration information in Checkly: Variables and
 - **Variables** are used to store non-sensitive information. Variables are shown in plaintext when being edited, on the check result page and in logs. Variables can be accessed via the CLI and API.
 - **Secrets** allow you to store sensitive data for use in checks. Once saved secrets are never shown in the UI or in logs. The secret value cannot be accessed via the CLI or API.
 
-{{< warning >}}
-Note that for browser checks, secrets are only hidden in the Checkly native UI, not in any generated Playwright artifacts, such as Traces, Screenshots or Videos.
-{{< /warning >}}
-{{<info>}}
-Secrets are available for [Private Locations](/docs/private-locations/) on agent version `3.3.4` and later. Secrets are available on [CLI](/docs/cli/) version `4.9.0` and later.
-{{</info>}}
+> Note that for browser checks, secrets are only hidden in the Checkly native UI, not in any generated Playwright artifacts, such as Traces, Screenshots or Videos.
+> Secrets are available for [Private Locations](/docs/private-locations/) on agent version `3.3.4` and later. Secrets are available on [CLI](/docs/cli/) version `4.9.0` and later.
 
-From here on, in this document, we refer to both variables and secrets as 'variables' for ease of reading, unless explicitly mentioned.
+From here on, in this document, we refer to both variables and secrets as 'variables' for ease of reading, unless explicitly mentioned.

site/content/docs/CICD/github-actions.md

@@ -35,8 +35,7 @@ this comes with some peculiarities that are native to GH Actions and a bit diffe
 for instance.
 - We have no access to the original pull request that triggered the deployment event.
 
-```yaml
-# .github/checkly.yml
+```yaml {title="github/checkly.yml"}
 name: 'checkly'
 on: [deployment_status]
 

site/content/docs/CICD/github.md

@@ -39,11 +39,8 @@ Now, go to the **CI/CD tab** of the check you want to link to a GitHub repositor
 
 6. You will also get an overview of the check result in the *details* section
 ![set up GitHub integration step 6](/docs/images/cicd/github_setup_6.png)
-
-
-{{<info >}}
-You can hook up multiple checks to the same repo. We will just run all of them as a test suite.
-{{</info>}}
+
+> You can hook up multiple checks to the same repo. We will just run all of them as a test suite.
 
 ## Using environment URLs
 
@@ -73,7 +70,7 @@ variable in your code to replace any hardcoded URL you might have, i.e.:
 
 {{< tabs "Environment example" >}}
 {{< tab "Typescript" >}}
-```ts {hl_lines=[4]}
+```ts {title="test.spec.ts", hl_lines=[4]}
 import { expect, test } from '@playwright/test'
 
 test('assert response status of page', async ({ page }) => {
@@ -85,7 +82,7 @@ test('assert response status of page', async ({ page }) => {
 ```
 {{< /tab >}}
 {{< tab "Javascript" >}}
-```js {hl_lines=[4]}
+```js {title="test.spec.ts", hl_lines=[4]}
 const { expect, test } = require('@playwright/test')
 
 test('assert response status of page', async ({ page }) => {

site/content/docs/CICD/triggers.md

@@ -14,10 +14,9 @@ menu:
     parent: "CI/CD integration"
 ---
 
-{{< warning >}}
-Command line triggers are deprecated in favour of using the [Checkly CLI](/docs/cli). You can use the `npx checkly trigger` command
-as a drop-in replacement. [See the reference for `trigger` command](/docs/cli/command-line-reference/#npx-checkly-trigger)
-{{< /warning >}}
+>[!WARNING]
+> Command line triggers are deprecated in favour of using the [Checkly CLI](/docs/cli). You can use the `npx checkly trigger` command
+> as a drop-in replacement. [See the reference for `trigger` command](/docs/cli/command-line-reference/#npx-checkly-trigger)
 
 Triggers enable you to call a check from a CI/CD pipeline, a bash shell or programmatically in your code.
 
@@ -61,15 +60,11 @@ Date: Fri, 29 Jun 2018 12:05:17 GMT
 }
 ```
 
-{{< warning >}}
-The total run time of all checks cannot exceed **30 seconds** or you will receive a timeout error.
-{{< /warning >}}
-
-{{< warning >}}
-Triggers are rate limited to **10 requests / minute / trigger**.
-{{< /warning >}}
-
+>[!WARNING]
+> The total run time of all checks cannot exceed **30 seconds** or you will receive a timeout error.
 
+>[!WARNING]
+> Triggers are rate limited to **10 requests / minute / trigger**.
 
 ## Optional deployment parameters
 

site/content/docs/CICD/vercel-deployment-protection.md

@@ -59,10 +59,7 @@ request.headers['x-vercel-protection-bypass'] = process.env.VERCEL_BYPASS_TOKEN
 Vercel has a few different ways to authenticate your deployments. Each work a bit different and require a different approach
 to make them work with Checkly.
 
-{{<info>}}
-Vercel enables **Standard Protection** by default on all new deployments.
-{{</info>}}
-
+> Vercel enables **Standard Protection** by default on all new deployments.
 
 ### Standard Protection
 [Standard Protection](https://vercel.com/docs/concepts/deployments/deployment-protection#vercel-authentication)
@@ -81,7 +78,7 @@ if you are authenticating using GitHub. Note: if you have 2FA enabled on your Gi
 
 {{<tabs "vercel-authentication-1" >}}
 {{< tab "TypeScript" >}}
-```ts
+```ts {title="visit-protected.spec.ts"}
 import { expect, test } from '@playwright/test'
 test('visit protected deployment', async ({ page }) => {
   const response = await page.goto(process.env.ENVIRONMENT_URL || 'https://my-production-url.vercel.app/')
@@ -101,7 +98,7 @@ test('visit protected deployment', async ({ page }) => {
 ```
 {{< /tab >}}
 {{< tab "JavaScript" >}}
-```js
+```js {title="visit-protected.spec.js"}
 const { expect, test } = require('@playwright/test')
 test('visit protected deployment', async ({ page }) => {
   const response = await page.goto(process.env.ENVIRONMENT_URL || 'https://my-production-url.vercel.app/')
@@ -139,7 +136,7 @@ we know we are checking a Preview deployment and we can run the authentication c
 
 {{<tabs "vercel-authentication-2" >}}
 {{< tab "TypeScript" >}}
-```ts
+```ts {title="visit-protected.spec.ts"}
 import { expect, test } from '@playwright/test'
 test('visit protected deployment', async ({ page }) => {
   const response = await page.goto(process.env.ENVIRONMENT_URL || 'https://my-production-url.vercel.app/')
@@ -161,7 +158,7 @@ test('visit protected deployment', async ({ page }) => {
 ```
 {{< /tab >}}
 {{< tab "JavaScript" >}}
-```js
+```js {title="visit-protected.spec.js"}
 const { expect, test } = require('@playwright/test')
 test('visit protected deployment', async ({ page }) => {
   const response = await page.goto(process.env.ENVIRONMENT_URL || 'https://my-production-url.vercel.app/')
@@ -185,10 +182,9 @@ test('visit protected deployment', async ({ page }) => {
 {{< /tab >}}
 {{< /tabs >}}
 
-{{<warning>}}
-If you have 2FA enabled on your GitHub or other Vercel authentication methods, the above example will not work. You can
-explore bypassing 2FA using the `otpauth` library. [Check our blog post for more info](https://www.checklyhq.com/blog/how-to-bypass-totp-based-2fa-login-flows-with-playwright/).
-{{</warning>}}
+> [!WARNING]
+> If you have 2FA enabled on your GitHub or other Vercel authentication methods, the above example will not work. You can
+> explore bypassing 2FA using the `otpauth` library. [Check our blog post for more info](https://www.checklyhq.com/blog/how-to-bypass-totp-based-2fa-login-flows-with-playwright/).
 
 
 ## Password Protection

site/content/docs/CICD/vercel.md

@@ -19,10 +19,7 @@ The Vercel integration will help you by:
 1. Automatically creating a pre-scripted browser check to catch any errors and failed requests as your web page loads.
 2. Enabling you to run checks against preview and production deployments on Vercel.
 
-{{<info>}}
-Using Vercel deployment protection? Read [this section](/docs/cicd/vercel-deployment-protection/) on how to make this work with Checkly.
-{{</info>}}
-
+> Using Vercel deployment protection? Read [this section](/docs/cicd/vercel-deployment-protection/) on how to make this work with Checkly.
 
 ## Installation
 
@@ -85,7 +82,7 @@ Here is a full example that we use ourselves to monitor checklyhq.com which is a
 
 {{< tabs "Vercel example" >}}
 {{< tab "Typescript" >}}
-```ts {hl_lines=[4]}
+```ts {title="vercel.spec.ts", hl_lines=[4]}
 import { expect, test } from '@playwright/test'
 
 test('assert response status of page', async ({ page }) => {
@@ -97,7 +94,7 @@ test('assert response status of page', async ({ page }) => {
 ```
 {{< /tab >}}
 {{< tab "Javascript" >}}
-```js {hl_lines=[4]}
+```js {title="vercel.spec.js", hl_lines=[4]}
 const { expect, test } = require('@playwright/test')
 
 test('assert response status of page', async ({ page }) => {
@@ -165,9 +162,8 @@ Vercel deployment in two ways because the Reliability part and Performance part
 | Browser Check | Reliability Check | Blocks deployment when it fails due to > 399 HTTP response codes on the main HTML document, syntax errors in the script, or assertions using the `expect` or `assert` libraries in the browser check script. |
 |               | Performance Check | Blocks deployment when a degradation is registered in the aggregate **Virtual Experience Score** based on Web Vitals. Read below for more details.                                   |
 
-{{< info >}}
-Reliability and performance checks run against the [automatic deployment URL](https://vercel.com/docs/concepts/deployments/automatic-urls) Vercel generates. In case of failures or degradations, what _actually_ gets blocked is the deployment to all other URLs, e.g. branch URLs and user-assigned domains. 
-{{< /info >}}
+
+> Reliability and performance checks run against the [automatic deployment URL](https://vercel.com/docs/concepts/deployments/automatic-urls) Vercel generates. In case of failures or degradations, what _actually_ gets blocked is the deployment to all other URLs, e.g. branch URLs and user-assigned domains.
 
 ## Virtual Experience Score & Web Vitals
 
@@ -214,9 +210,7 @@ On Vercel, you will also see a breakdown of checks that were executed on a given
 
 ![vercel checks vitals](/docs/images/cicd/vercel/vercel_vitals.png)
 
-{{< info >}}
-Web vitals are available for Playwright-based browser checks using [runtime](/docs/runtimes/) 2021.06 or newer.
-{{< /info >}}
+> Web vitals are available for Playwright-based browser checks using [runtime](/docs/runtimes/) 2021.06 or newer.
 
 ### Deployments tab
 

site/content/docs/accounts-and-users/_index.md

@@ -29,9 +29,7 @@ When inviting a team member to join your account you can assign one of three rol
 Only the initial account creator has the **Owner** role. You can always change any assigned roles after a teammate has
 joined your team.
 
-{{< info >}}
-Roles are staggered, so any role higher up the totem pole has all the rights of the roles below him/her.
-{{< /info >}}
+> Roles are staggered, so any role higher up the totem pole has all the rights of the roles below him/her.
 
 ## Transferring ownership
 

site/content/docs/accounts-and-users/changing-your-email-password.md

@@ -26,9 +26,8 @@ The simplest way to achieve this is to:
 
 ## Changing your password
 
-{{<warning>}}
-Changing your password is not available on SSO connections or social login providers like Google and GitHub. Password changes are only available for users who have signed up with an email and password.
-{{</warning>}}
+> [!WARNING]
+> Changing your password is not available on SSO connections or social login providers like Google and GitHub. Password changes are only available for users who have signed up with an email and password.
 
 To change your password, follow these steps:
 

site/content/docs/accounts-and-users/creating-api-key.md

@@ -44,9 +44,8 @@ If you wish to revoke access of a user to an account, remove the user from the t
 Service API keys are specific to one account and are not tied to a user. This means that service API keys can be used to 
 access your account even if the user that created the API key is removed from your account.
 
-{{< info >}}
-Service API keys are available on the [Enterprise plan](https://www.checklyhq.com/pricing/) only
-{{< /info >}}
+> Service API keys are available on the [Enterprise plan](https://www.checklyhq.com/pricing/) only
+
 
 Service API keys allow you to set a role access level on the key itself, e.g. "read only", "admin" etc. 
 

site/content/docs/accounts-and-users/microsoft-azure-ad.md

@@ -28,6 +28,4 @@ After configuration has taken place on Checkly's side, you will receive confirma
 
 After submitting the Checkly login form, you should be redirected to your SSO login interface. Completing the login procedure will then lead you to your existing Checkly account, if you have one, or to the new account creation screen, in case you don't.
 
-{{< info >}}
-Once Microsoft Azure AD has been set up, you will still need to invite new users from your organization to your Checkly account, as they will not be added automatically.
-{{< /info >}}
+> Once Microsoft Azure AD has been set up, you will still need to invite new users from your organization to your Checkly account, as they will not be added automatically.

site/content/docs/accounts-and-users/multi-factor-authentication.md

@@ -30,6 +30,4 @@ From now on when logging in you will be asked to provide a one time password.
 - To stop using MFA, toggle the 'Enable multi-factor authentication' setting under User Settings.
 - If you have lost access to your authenticator app or removed the Checkly configuration from it, contact [[email protected]](mailto:[email protected]) for help with resetting your configration.
 
-{{< info >}}
-Multi-factor authentication is available on the Team and Enterprise plans.
-{{< /info >}}
+> Multi-factor authentication is available on the Team and Enterprise plans.

site/content/docs/accounts-and-users/saml.md

@@ -37,9 +37,7 @@ Ensure your SSO IdP is sending Checkly the correct email address. Checkly can th
 }
 ```
 
-{{< info >}}
-In case of issues, you might want to double-check your **Entity ID**, which should be: `urn:auth0:checkly:<YOUR_CONNECTION_ID>`
-{{< /info >}}
+> In case of issues, you might want to double-check your **Entity ID**, which should be: `urn:auth0:checkly:<YOUR_CONNECTION_ID>`
 
 ## Testing the integration