@leed-ai/cli 0.0.0-stage → 6.19.0

package/dist/static/site/_includes/leed/metadata/ogCard.hbs

@@ -0,0 +1,40 @@
+<meta property="og:locale" content="{{ siteLocale }}">
+<meta property="og:site_name" content="{{ siteTitle }}" />
+<meta property="og:site" content="{{ siteUrl }}" />
+{{#firstTruthy title ogCard.title }}
+    <meta property="og:title" content="{{ this }}" />
+{{/firstTruthy}}
+{{#firstTruthy summary ogCard.description }}
+    <meta property="og:description" content="{{ this }}" />
+{{/firstTruthy}}
+{{#firstTruthy featureImage ogCard.image }}
+    {{!-- The dimensions describe the Cloudflare Images "social" variant, which
+         is what absoluteImageUrl resolves a CMS asset to. A site passing its
+         own ogCard.image is not going through that variant, so it states its
+         own size; without that these two lines describe someone else's file. --}}
+    <meta property="og:image" content="{{ absoluteImageUrl this "social" }}" />
+    {{!-- `{{#if}\}`, and `../`, for two reasons that both bite here. firstTruthy
+         rebinds the block context to the value it matched — which is the image
+         path — so a bare `ogCard.imageWidth` resolves against the string and
+         comes back empty. And firstTruthy has no inverse: it returns "" when
+         nothing is truthy, so an `{{else}\}` inside it is never rendered and the
+         default below would never have shipped. --}}
+    {{#if ../ogCard.imageWidth}}<meta property="og:image:width" content="{{ ../ogCard.imageWidth }}" />{{else}}<meta property="og:image:width" content="800" />{{/if}}
+    {{#if ../ogCard.imageHeight}}<meta property="og:image:height" content="{{ ../ogCard.imageHeight }}" />{{else}}<meta property="og:image:height" content="413" />{{/if}}
+{{/firstTruthy}}
+<meta property="og:url" content="{{ url }}" />
+{{#if (pageType this.pageTypeId "includeInFeeds") }}
+    <meta property="og:type" content="article" />
+    <meta property="article:published_time" content="{{#date 'iso' }}{{ publishedAt }}{{/date}}" />
+    <meta property="article:modified_time" content="{{#date 'iso' }}{{ modifiedAt }}{{/date}}" />
+    <meta property="article:publisher" content="{{ siteTitle }}" />
+    {{#if authors}}
+    {{#Authors this true}}
+        <meta property="article:author" content="{{ fullName }}" />
+    {{/Authors}}
+    {{/if}}
+    <meta property="article:tag" content="{{ keywords }}" />
+{{else}}
+    <meta property="og:type" content="website" />
+{{/if}}
+<!-- Open Graph Card generated by https://leed.ai -->

package/dist/static/site/_includes/leed/metadata/siteMetadata.hbs

@@ -0,0 +1,24 @@
+<link rel="sitemap" title="{{ siteTitle }} - Sitemap" type="application/xml" href="{{ siteUrl }}/sitemap.xml">
+<link rel="alternate" title="{{ siteTitle }} - JSON Feed" type="application/feed+json" href="{{ siteUrl }}/feed.json" />
+<link rel="alternate" title="{{ siteTitle }} - RSS Feed" type="application/rss+xml" href="{{ siteUrl }}/rss.xml">
+<link rel="alternate" title="{{ siteTitle }} - Atom Feed" type="application/atom+xml" href="{{ siteUrl }}/atom.xml">
+<!-- Site Feeds generated by Leed AI -->
+
+{{#if favicon}}
+<link href="{{ favicon }}" rel="icon" as="image">
+{{/if}}
+<meta charset="UTF-8" />
+<meta name="generator" content="Leed Eleventy" />
+<meta name="title" content="{{ title }}" />
+{{#if keywords }}
+<meta name="keywords" content="{{ keywords }}" />
+{{/if}}
+{{#firstTruthy summary siteDescription }}
+<meta name="description" content="{{ this }}" />
+{{/firstTruthy}}
+{{!-- Only show canonical IF this is NOT a stub page, url is a shortcode, which is why it is wrapped in parens. --}}
+{{#not (has (url) "stubs")}}
+<link rel="canonical" href="{{#firstTruthy canonicalUrl (url) }}{{ this }}{{/firstTruthy}}">
+{{/not}}
+<meta property="published" content="{{#date 'iso' }}{{ publishedAt }}{{/date}}" />
+<!-- Site Metadata generated by https://leed.ai -->

package/dist/static/site/_includes/leed/metadata/twitterCard.hbs

@@ -0,0 +1,34 @@
+{{!-- The card type follows the image. A site whose ogCard.image is a wide
+     link preview wants summary_large_image; "summary" crops it to a square
+     thumbnail. Set ogCard.cardType in the site data file to choose; it
+     defaults to summary, which is what a square icon wants. --}}
+{{#if ogCard.cardType}}
+<meta name="twitter:card" content="{{ ogCard.cardType }}" />
+{{else}}
+<meta name="twitter:card" content="summary" />
+{{/if}}
+<meta name="twitter:url" content="{{ url }}" />
+{{#if twitterId}}
+<meta name="twitter:site" content="{{ twitterId }}" />
+{{/if}}
+{{#firstTruthy featureImage ogCard.image logo }}
+<meta name="twitter:image" content="{{ absoluteImageUrl this "social"  }}" />
+{{/firstTruthy}}
+{{#firstTruthy title ogCard.title }}
+<meta name="twitter:title" content="{{ this }}" />
+{{/firstTruthy}}
+{{#if summary}}
+<meta name="twitter:description" content="{{ summary }}" />
+{{/if}}
+{{#if (pageType this.pageTypeId "includeInFeeds") }}
+    {{#Authors this true}}
+        {{#if twitterId}}
+        <meta name="twitter:creator" content="{{ twitterId }}" />
+        {{/if}}
+    {{/Authors}}
+{{/if}}
+{{#if wordCount }}
+<meta name="twitter:label1" content="Est. reading time" />
+<meta name="twitter:data1" content="{{ readingTime }} minutes" />
+{{/if}}
+<!-- Twitter Card generated by https://leed.ai -->

package/dist/static/site/_includes/leed/popup-video.hbs

@@ -0,0 +1,21 @@
+<div x-data="{ showModal: false }">
+    <button class="{{ buttonClass }}" data-id="{{ data-id }}"
+        @click="showModal = true;">
+        {{{ buttonLabel }}}
+    </button>
+    <div x-cloak x-show="showModal"
+        @keydown.window.escape="showModal = false; leedPopupVideoPause('{{ videoAssetId }}');"
+        @click="showModal = false; leedPopupVideoPause('{{ videoAssetId }}');"
+        class="fixed z-[9999] inset-0 flex items-center justify-center bg-black/70">
+        <div class="video-player leed-mobile-video rounded shadow-xl sm:w-[75vw]"
+            @click.away="showModal = false; leedPopupVideoPause('{{ videoAssetId }}');">
+            <iframe data-assetid="{{ videoAssetId }}" data-cloudflare-video="true" data-popup="true"
+                :src="showModal ? '{{ buildUrl videoSrc "autoplay=true" }}' : ''"
+                @load="if(showModal) leedPopupVideoPlay('{{ videoAssetId }}')"
+                class="w-full h-full border-none"
+                loading="lazy"
+                allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+                allowfullscreen="true"></iframe>
+        </div>
+    </div>
+</div>

package/dist/static/site/_includes/leed/stub-template.hbs

@@ -0,0 +1,17 @@
+<a class="page-stub" data-leed-slot="url">
+    <div class="title" data-leed-slot="title"></div>
+    <div class="times">
+        <time class="published" data-leed-slot="publishedAt" data-leed-date-format="MMM D, YYYY"></time>
+        <time class="reading-time" data-leed-slot="readingTime"></time>
+    </div>
+    <div class="summary" data-leed-slot="summary"></div>
+    <div class="labels">
+        <ul>
+            <template data-leed-each="labels"><li data-leed-slot="name"></li></template>
+        </ul>
+    </div>
+    <div class="image"><img data-leed-slot="featureImage" data-leed-variant="medium"></div>
+    <div class="authors">
+        <template data-leed-each="authors"><span class="author" data-leed-slot="fullName"></span></template>
+    </div>
+</a>

package/dist/static/site/_includes/leed/unsubscribe-form.hbs

@@ -0,0 +1,30 @@
+<form id="unsubscribeForm" class="leed-form" onsubmit="return submitLeadUnsubscribe();">
+  <div class="leed-form-block explanation">
+    Select Reason
+  </div>
+  <div class="leed-form-block">
+    <input type="radio" id="too_many_emails" name="reason" value="too_many" required="true">
+    <label for="too_many_emails">Too many emails</label>
+  </div>
+  <div class="leed-form-block">
+    <input type="radio" id="irrelevant_content" name="reason" value="irrelevant">
+    <label for="irrelevant_content">Content does not meet my needs or interests</label>
+  </div>
+  <div class="leed-form-block">
+    <input type="radio" id="unmet_expectations" name="reason" value="mismatch">
+    <label for="unmet_expectations">Content was not what I expected</label>
+  </div>
+  <div class="leed-form-block">
+    <input type="radio" id="not_me" name="reason" value="not_me">
+    <label for="not_me">I never signed up for these emails</label>
+  </div>
+  <div class="leed-form-block">
+    <input type="radio" id="other" name="reason" value="other">
+    <label for="other">Other reason</label>
+  </div>
+  <div id="donotcontact-group" class="leed-form-block">
+    <input type="checkbox" id="donotcontact" name="donotcontact" value="true">
+    <label for="donotcontact">Remove me from all future communications</label>
+  </div>
+  <button id="unsubscribe-button" type="submit">Unsubscribe</button>
+</form>

package/dist/static/site/_layouts/leed-documentation.hbs

@@ -0,0 +1,12 @@
+{{#if (docsLayoutName) }}
+{{!--
+    THIS MUST START AT THE BEGINNING OF THE LINE!!!!
+    If this is indented ALL RENDERED output will be
+    indented, including code blocks!
+--}}
+{{> (docsLayoutTemplate) }}
+<!-- Generated by Leed AI - '{{ docsLayoutName }}' layout using '{{ docsColorTheme }}' theme -->
+
+{{else}}
+    <h1>documentationConfiguration is missing!</h1>
+{{/if}}

package/dist/static/site/leed-feed-atom.hbs

@@ -0,0 +1,42 @@
+---
+{
+  "permalink": "/atom.xml",
+  "eleventyExcludeFromCollections": true
+}
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ siteLocale }}">
+    <id>{{ siteUrl }}/</id>
+    <title>{{ siteTitle }}</title>
+    <subtitle>{{ siteDescription }}</subtitle>
+    <updated>{{#date 'Rfc3339' }}{{ latestDate "publishedAt" "all" }}{{/date}}</updated>
+    <link rel="self" href="{{ url }}" />
+    <link href="{{ siteUrl }}" />
+    {{#if logo }}
+    <logo>{{ siteUrl }}{{ logo }}</logo>
+    {{/if}}
+    {{#each (filterObject pageTypeList "includeInFeeds") }}
+    {{#forEach (collection (concat "pageTypeId-" @key ":unpaged")) }}
+    <entry>
+        <id>{{ url }}</id>
+        <title>{{ data.title }}</title>
+        <published>{{#date 'Rfc3339' }}{{ data.publishedAt }}{{/date}}</published>
+        <updated>{{#date 'Rfc3339' }}{{ data.modifiedAt }}{{/date}}</updated>
+        <link rel="alternate" href="{{ url }}" />
+        <content type="text">{{#firstTruthy data.summary "&nbsp;" }}{{ this }}{{/firstTruthy}}</content>
+        {{#gt (length data.labels) 0 }}
+        {{#Labels this true}}
+        <category term="{{ this.name }}" />
+        {{/Labels}}
+        {{/gt}}
+        {{#Authors this true}}
+        <author>
+            <name>{{ fullName }}</name>
+            <email>{{ email }}</email>
+        </author>
+        {{/Authors}}
+    </entry>
+    {{/forEach}}
+    {{/each}}
+</feed>
+<!-- Atom Feed generated by https://leed.ai -->

package/dist/static/site/leed-feed-json.hbs

@@ -0,0 +1,56 @@
+---
+{
+    "permalink": "feed.json",
+    "eleventyExcludeFromCollections": true
+}
+---
+{{!-- Every string that comes from site or page data goes through JSONsafe: it
+    quotes and escapes the value itself, where a hand-quoted "{{ value }\}" would
+    hand JSON whatever HTML escaping handlebars did to the quotes and
+    apostrophes inside it. --}}
+{
+  "version": "https://jsonfeed.org/version/1.1",
+  "title": {{ JSONsafe siteTitle }},
+  "language": {{ JSONsafe siteLocale }},
+  "home_page_url": "{{ siteUrl }}",
+  "feed_url": "{{ url }}",
+  "description": {{ JSONsafe siteDescription }},
+  {{#if logo }}
+  "icon": "{{ siteUrl }}{{ logo }}",
+  {{/if}}
+  "items": [
+    {{!-- One flat collection, so isLast is the last item in the whole feed. Do
+        not go back to a loop per page type: a feed-enabled page type that
+        contributes no pages leaves a stray comma behind. --}}
+    {{#forEach (collection "feedPages") }}
+        {
+            "id": {{ JSONsafe data.pageId }},
+            "url": "{{ url }}",
+            "title": {{ JSONsafe data.title }},
+            "content_text": {{ JSONsafe data.summary }},
+            {{#if data.featureImage.src }}
+            "banner_image": "{{ siteUrl }}{{ data.featureImage.src }}",
+            {{/if}}
+            "date_published": "{{#date 'Rfc3339' }}{{ data.publishedAt }}{{/date}}",
+            "date_modified": "{{#date 'Rfc3339' }}{{ data.modifiedAt }}{{/date}}"
+            {{#gt (length data.labels) 0 }}
+            , "tags": [
+                {{#Labels this true}}
+                    {{ JSONsafe this.name }}{{#unless isLast}}, {{/unless}}
+                {{/Labels}}
+            ]
+            {{/gt}}
+            {{#if data.authors }}
+            , "authors": [
+                {{#Authors this true}}
+                {
+                    "name": "{{ fullName }}"{{#if image }},
+                    "avatar": "{{ siteUrl }}{{ imageUrl image "profile" }}"{{/if}}
+                }{{#unless isLast}}, {{/unless}}
+                {{/Authors}}
+            ]
+            {{/if}}
+        }{{#unless isLast}}, {{/unless}}
+    {{/forEach}}
+  ]
+}

package/dist/static/site/leed-feed-rss.hbs

@@ -0,0 +1,39 @@
+---
+{
+    "permalink": "rss.xml",
+    "eleventyExcludeFromCollections": true
+}
+---
+<?xml version="1.0" encoding="utf-8"?>
+<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:base="{{ siteUrl }}" xmlns:atom="http://www.w3.org/2005/Atom">
+    <channel>
+        <atom:link href="{{ url }}" rel="self" type="application/rss+xml" />
+        <title>{{ siteTitle }}</title>
+        <link>{{ siteUrl }}</link>
+        <description>{{ siteDescription }}</description>
+        <language>{{ siteLocale }}</language>
+        {{#if logo }}
+        <image>{{ siteUrl }}{{ logo }}</image>
+        {{/if}}
+        {{#each (filterObject pageTypeList "includeInFeeds") }}
+            {{#forEach (collection (concat "pageTypeId-" @key ":unpaged")) }}
+            <item>
+                <title>{{ data.title }}</title>
+                <link>{{ url }}</link>
+                <description>{{ data.summary }}</description>
+                <pubDate>{{#date 'Rfc822' }}{{ data.publishedAt }}{{/date}}</pubDate>
+                <guid>{{ url }}</guid>
+                {{#gt (length data.labels) 0 }}
+                    {{#Labels this true}}
+                        <category>{{ this.name }}</category>
+                    {{/Labels}}
+                {{/gt}}
+                {{#Authors this true}}
+                <author>{{ email }} ({{ fullName }})</author>
+                {{/Authors}}
+            </item>
+            {{/forEach}}
+        {{/each}}
+    </channel>
+</rss>
+<!-- RSS Feed generated by https://leed.ai -->

package/dist/static/site/leed-headers.hbs

@@ -0,0 +1,38 @@
+---
+{
+    "permalink": "_headers",
+    "eleventyExcludeFromCollections": true
+}
+---
+{{! Headers documentation - https://developers.cloudflare.com/pages/platform/headers }}
+{{! siteUrl and pageUrl are calculate helpers in our 11ty configuration }}
+{{#if @root/leedSiteEnv.env.preview}}
+{{ siteUrl }}/*
+    X-Robots-Tag: noindex
+
+{{!-- Notice the following Url in parentheses. This is because they are shortCode / Helpers, they need to be evaluated before being tested --}}
+{{#unlessEq (siteUrl) (pagesUrl) }}
+{{ pagesUrl }}/*
+    X-Robots-Tag: noindex
+{{/unlessEq}}
+
+{{else}}
+{{ pagesUrl }}/*
+    X-Robots-Tag: noindex
+
+{{/if}}
+/*
+    Content-Security-Policy: frame-ancestors 'none'
+    X-Content-Type-Options: nosniff
+    Referrer-Policy: strict-origin-when-cross-origin
+
+/stubs/*
+    X-Robots-Tag: noindex
+
+{{#not @root/leedSiteEnv.env.preview }}
+/static/*
+    Cache-Control: public, max-age=31536000, immutable
+    X-Robots-Tag: noindex
+{{/not}}
+{{! Access-Control-Allow-Origin: siteUrl }}
+{{! Need to add rules to cover all the IMAGE, VIDEO and DOCS URLS from the DAM }}

package/dist/static/site/leed-redirects.hbs

@@ -0,0 +1,10 @@
+---
+{
+    "permalink": "_redirects",
+    "eleventyExcludeFromCollections": true
+}
+---
+{{! Redirects documentation - https://developers.cloudflare.com/pages/platform/redirects }}
+{{! serializeRedirects returns the COMPLETE file body, final newline included, so this }}
+{{! file deliberately ends without one: a trailing newline here would append a second. }}
+{{{ leedRedirects }}}

package/dist/static/site/leed-sitemap-pageType.hbs

@@ -0,0 +1,28 @@
+---
+{
+    "eleventyExcludeFromCollections": true,
+    "publishedAt": "item",
+    "modifiedAt": "item",
+    "pagination": {
+        "data": "collections.pageTypeIds",
+        "size": 1,
+        "alias": "item",
+        "addAllPagesToCollections": false,
+        "generatePageOnEmptyData": false,
+        "reverse": false
+    },
+    "permalink": "/sitemap-{{ pageTypeSlug item }}.xml"
+}
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+{{!-- The pageTypeId collection already holds this page type's pages, sorted the same way --}}
+{{#forEach (collection (concat "pageTypeId-" item)) }}
+    <url>
+        <loc>{{ url "absolute" }}</loc>
+        <lastmod>{{#date 'iso' }}{{ data.publishedAt }}{{/date}}</lastmod>
+        <priority>{{ data.sitemapPriority }}</priority>
+    </url>
+{{/forEach}}
+</urlset>
+<!-- XML Sitemap generated by https://leed.ai -->

package/dist/static/site/leed-sitemap.hbs

@@ -0,0 +1,19 @@
+---
+{
+    "eleventyExcludeFromCollections": true,
+    "permalink": "/sitemap.xml"
+}
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  {{#each pageTypeList }}
+    {{!-- We are getting the latest date from the pageTypeId-UUID collection --}}
+    {{#if (latestDate 'publishedAt' (concat "pageTypeId-" @key)) }}
+    <sitemap>
+      <loc>{{ siteUrl }}/sitemap-{{ pageTypeSlug this }}.xml</loc>
+      <lastmod>{{#date 'iso'}}{{ latestDate 'publishedAt' (concat "pageTypeId-" @key) }}{{/date}}</lastmod>
+    </sitemap>
+    {{/if}}
+  {{/each}}
+</sitemapindex>
+<!-- XML Sitemap generated by https://leed.ai -->

package/dist/static/site/leed-unsubscribe.hbs

@@ -0,0 +1,44 @@
+---
+{
+    "title": "Unsubscribe",
+    "eleventyExcludeFromCollections": true,
+    "pageId": "unsubscribe",
+    "pageTypeId": "###ROOT###",
+    "publishedAt": "2024-01-01T01:01:01.001Z",
+    "modifiedAt": "2024-01-01T01:01:01.001Z",
+    "permalink": "/stubs/unsubscribe.html",
+    "layout": null
+}
+---
+
+{{#if (useCustomTemplate "unsubscribe") }}
+    {{> unsubscribe }}
+{{else}}
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth js-focus-visible">
+
+<head>
+    <title>{{ title }} | {{ siteTitle }}</title>
+    <meta name="viewport" content="width=device-width">
+    {{> leed/head }}
+</head>
+
+<body class="flex flex-col h-screen antialiased text-base text-(--site-text-color) border-(--site-border-color) bg-(--site-bg-color)">
+
+<main class="mt-12 mx-6 lg:mx-16">
+    <section id="unsubscribe" class="mx-auto max-w-3xl lg:max-w-7xl">
+        <div class="relative place-items-center mx-4 sm:mx-8">
+            <div class="content-box">
+                <h1 class="mb-8 text-center">{{ title }}</h1>
+                <div class="">
+                    {{> leed/unsubscribe-form }}
+                </div>
+            </div>
+        </div>
+    </section>
+</main>
+
+</body>
+</html>
+<!-- Unsubscribe generated by https://leed.ai -->
+{{/if}}

package/dist/static/site/leed-unsubscribed.hbs

@@ -0,0 +1,40 @@
+---
+{
+    "title": "Unsubscribed",
+    "eleventyExcludeFromCollections": true,
+    "pageId": "unsubscribed",
+    "pageTypeId": "###ROOT###",
+    "publishedAt": "2024-01-01T01:01:01.001Z",
+    "modifiedAt": "2024-01-01T01:01:01.001Z",
+    "permalink": "/stubs/unsubscribed.html",
+    "layout": null
+}
+---
+
+{{#if (useCustomTemplate "unsubscribed") }}
+    {{> unsubscribed }}
+{{else}}
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth js-focus-visible">
+
+<head>
+    <title>{{ title }} | {{ siteTitle }}</title>
+    <meta name="viewport" content="width=device-width">
+    {{> leed/head }}
+</head>
+
+<body class="flex flex-col h-screen antialiased text-base text-(--site-text-color) border-(--site-border-color) bg-(--site-bg-color)">
+
+<main class="mt-12 mx-6 lg:mx-16">
+    <section id="unsubscribe" class="mx-auto max-w-5xl lg:max-w-8xl">
+        <div class="relative place-items-center mx-4 sm:mx-8">
+            <h1 class="mb-4 text-center">You've been unsubscribed.</h1>
+            <p class="text-center"><a href="/">Back to the homepage</a></p>
+        </div>
+    </section>
+</main>
+
+</body>
+</html>
+<!-- Unsubscribed generated by https://leed.ai -->
+{{/if}}

package/dist/static/tailwind/components/alerts.css

@@ -0,0 +1,132 @@
+:root {
+  /**
+   * alerts
+   */
+  --alert-note-border: var(--color-gray-300);
+  --alert-note-bg: var(--color-gray-50);
+  --alert-note-text: var(--color-gray-950);
+  --alert-note-code-bg: var(--color-gray-100);
+  --alert-note-code-border: var(--color-gray-300);
+
+  --alert-tip-border: var(--color-green-600);
+  --alert-tip-bg: var(--color-green-50);
+  --alert-tip-text: var(--color-green-950);
+  --alert-tip-code-bg: var(--color-green-100);
+  --alert-tip-code-border: var(--color-green-300);
+
+  --alert-info-border: var(--color-sky-500);
+  --alert-info-bg: var(--color-sky-50);
+  --alert-info-text: var(--color-sky-950);
+  --alert-info-code-bg: var(--color-sky-100);
+  --alert-info-code-border: var(--color-sky-300);
+
+  --alert-warning-border: var(--color-yellow-600);
+  --alert-warning-bg: var(--color-yellow-50);
+  --alert-warning-text: var(--color-yellow-950);
+  --alert-warning-code-bg: var(--color-yellow-100);
+  --alert-warning-code-border: var(--color-yellow-300);
+
+  --alert-danger-border: var(--color-red-700);
+  --alert-danger-bg: var(--color-red-50);
+  --alert-danger-text: var(--color-red-950);
+  --alert-danger-code-bg: var(--color-red-100);
+  --alert-danger-code-border: var(--color-red-300);
+
+  @media (prefers-color-scheme: dark) {
+    --alert-note-border: var(--color-gray-500);
+    --alert-note-bg: var(--color-gray-800);
+    --alert-note-text: var(--color-gray-200);
+    --alert-note-code-bg: var(--color-gray-700);
+    --alert-note-code-border: var(--color-gray-700);
+
+    --alert-tip-border: var(--color-green-500);
+    --alert-tip-bg: var(--color-green-950);
+    --alert-tip-text: var(--color-green-200);
+    --alert-tip-code-bg: var(--color-green-900);
+    --alert-tip-code-border: var(--color-green-700);
+
+    --alert-info-border: var(--color-sky-500);
+    --alert-info-bg: var(--color-sky-950);
+    --alert-info-text: var(--color-sky-200);
+    --alert-info-code-bg: var(--color-sky-900);
+    --alert-info-code-border: var(--color-sky-700);
+
+    --alert-warning-border: var(--color-yellow-500);
+    --alert-warning-bg: var(--color-yellow-950);
+    --alert-warning-text: var(--color-yellow-200);
+    --alert-warning-code-bg: var(--color-yellow-900);
+    --alert-warning-code-border: var(--color-yellow-700);
+
+    --alert-danger-border: var(--color-red-500);
+    --alert-danger-bg: var(--color-red-950);
+    --alert-danger-text: var(--color-red-200);
+    --alert-danger-code-bg: var(--color-red-900);
+    --alert-danger-code-border: var(--color-red-700);
+  }
+}
+/**
+ * Default alerts
+ */
+aside.alert {
+  @apply py-3 pl-4 pr-8 mt-6 border-l-6 shadow-sm rounded-lg;
+
+  > div.heading {
+    @apply flex mt-0 items-center;
+
+    > i {
+      @apply mr-2.5 text-xl;
+    }
+
+    > .description {
+      @apply uppercase font-bold text-sm;
+    }
+  }
+
+  div.content {
+    @apply mt-2;
+
+    a {
+      @apply text-current underline decoration-current hover:decoration-2;
+    }
+  }
+}
+
+aside.alert.alert-note {
+  @apply border-(--alert-note-border) bg-(--alert-note-bg) text-(--alert-note-text);
+
+  > .heading > i {
+    @apply fa-solid leed-icon-alert-note;
+  }
+}
+
+aside.alert.alert-tip {
+  @apply border-(--alert-tip-border) bg-(--alert-tip-bg) text-(--alert-tip-text);
+
+  > .heading > i {
+    @apply fa-solid leed-icon-alert-tip;
+  }
+}
+
+aside.alert.alert-info {
+  @apply border-(--alert-info-border) bg-(--alert-info-bg) text-(--alert-info-text);
+
+  > .heading > i {
+    @apply fa-regular leed-icon-alert-info;
+  }
+}
+
+aside.alert.alert-warning {
+  @apply border-(--alert-warning-border) bg-(--alert-warning-bg) text-(--alert-warning-text);
+
+  > .heading > i {
+    @apply fa-solid leed-icon-alert-warning;
+  }
+}
+
+aside.alert.alert-danger {
+  @apply border-(--alert-danger-border) bg-(--alert-danger-bg) text-(--alert-danger-text);
+
+  > .heading > i {
+    @apply fa-solid leed-icon-alert-danger;
+  }
+}