-{% endif %}
diff --git a/src/_backend/command-lanes.md b/src/_backend/command-lanes.md
index d13bf25..c677204 100644
--- a/src/_backend/command-lanes.md
+++ b/src/_backend/command-lanes.md
@@ -164,7 +164,7 @@ class CustomClient {
}
```
-{% include alert.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different command lanes within our UnitAgent with laneUri "takeAction"; how would the Swim runtime know which one to message? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
+{% include callout-warning.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different command lanes within our UnitAgent with laneUri "takeAction"; how would the Swim runtime know which one to message? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
Note that the `command()` signature only allows for `swim.structure.Value` payloads. Lanes internally use *forms* to handle any necessary conversions, allowing users to treat lanes as properly parametrized data types, provided that a form for that data type exists. Even a custom Java class can be a lane type, provided that a form for that class exists. We will further discuss this topic in a more advanced cookbook.
diff --git a/src/_backend/demand-map-lanes.md b/src/_backend/demand-map-lanes.md
index 3683b93..e064a34 100644
--- a/src/_backend/demand-map-lanes.md
+++ b/src/_backend/demand-map-lanes.md
@@ -84,7 +84,7 @@ public class UnitAgent extends AbstractAgent {
}
```
-{% include alert.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how does the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
+{% include callout-warning.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how does the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
### Linking to Map Lane and `cue(K key)`
diff --git a/src/_backend/demand-value-lanes.md b/src/_backend/demand-value-lanes.md
index 1d3e1ee..798aa91 100644
--- a/src/_backend/demand-value-lanes.md
+++ b/src/_backend/demand-value-lanes.md
@@ -79,7 +79,7 @@ public class UnitAgent extends AbstractAgent {
}
```
-{% include alert.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how does the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
+{% include callout-warning.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how does the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
### Linking to Value Lane and `cue()`
diff --git a/src/_backend/downlinks.md b/src/_backend/downlinks.md
index f7fbcc3..cc9057b 100644
--- a/src/_backend/downlinks.md
+++ b/src/_backend/downlinks.md
@@ -93,7 +93,7 @@ Server-side, downlinks are explained in the [Server Downlinks guide]({% link _ba
### JavaScript
-For details on using downlinks with JavaScript, visit the [**downlinks**]({% link _frontend/downlinks.md %}) article in our [**frontend documentation**](/frontend)
+For details on using downlinks with JavaScript, visit the [**downlinks**]({% link _frontend/downlinks.md %}) article in our [**frontend documentation**](https://www.swimos.org/frontend/)
Furthermore, the tutorial application demonstrates [using value downlinks](https://github.com/swimos/tutorial/blob/master/ui/pie.html#L58-L67){:data-proofer-ignore=''} and [map downlinks](https://github.com/swimos/tutorial/blob/master/ui/chart.html#L69-L79){:data-proofer-ignore=''} issued against a Swim client instance. Note the language-level loss of parametrization, but the otherwise-identical syntax to Java.
diff --git a/src/_backend/jms-ingestion.md b/src/_backend/jms-ingestion.md
index 237bce1..c3443db 100644
--- a/src/_backend/jms-ingestion.md
+++ b/src/_backend/jms-ingestion.md
@@ -141,7 +141,7 @@ public class JmsAgent extends AbstractAgent {
}
```
-{% include alert.html title='Warning' text='When we configure the Web Agent node URI routing paths (e.g. within server.recon), ensure that only one instance of JmsAgent can be instantiated.' %}
+{% include callout-warning.html title='Warning' text='When we configure the Web Agent node URI routing paths (e.g. within server.recon), ensure that only one instance of JmsAgent can be instantiated.' %}
### Step 3: `VehicleAgent` Implementation
diff --git a/src/_backend/join-value-lanes.md b/src/_backend/join-value-lanes.md
index fc2c1ac..296ad11 100644
--- a/src/_backend/join-value-lanes.md
+++ b/src/_backend/join-value-lanes.md
@@ -78,7 +78,7 @@ public class BuildingAgent extends AbstractAgent {
}
```
-{% include alert.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
+{% include callout-warning.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
### Aggregating value lanes
diff --git a/src/_backend/kafka-ingestion.md b/src/_backend/kafka-ingestion.md
index bd78626..054344a 100644
--- a/src/_backend/kafka-ingestion.md
+++ b/src/_backend/kafka-ingestion.md
@@ -142,7 +142,7 @@ public class KafkaConsumingAgent extends AbstractAgent {
_Note: because `KafkaConsumingAgent` is the only class that that actively uses the `KafkaConsumer` class, you may choose to instantiate the `KafkaConsumer` instance from `KafkaConsumingAgent` instead._
_The current approach has the advantage of "fast-failing" the process, avoiding any part of the Swim server from starting if there is an issue reaching the Kafka topic._
-{% include alert.html title='Warning' text='When we configure the Web Agent nodeUri routing paths (e.g. within server.recon), ensure that only one instance of KafkaConsumingAgent can be instantiated.' %}
+{% include callout-warning.html title='Warning' text='When we configure the Web Agent nodeUri routing paths (e.g. within server.recon), ensure that only one instance of KafkaConsumingAgent can be instantiated.' %}
### Step 3: `VehicleAgent` Implementation and Routing
diff --git a/src/_backend/map-lanes.md b/src/_backend/map-lanes.md
index bc78faa..e95626b 100644
--- a/src/_backend/map-lanes.md
+++ b/src/_backend/map-lanes.md
@@ -85,7 +85,7 @@ public class UnitAgent extends AbstractAgent {
}
```
-{% include alert.html title='Caution' text='If you have multiple lanes within an agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info". How will the Swim runtime know which one to set? That said, reusing laneUris **across** Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
+{% include callout-warning.html title='Caution' text='If you have multiple lanes within an agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info". How will the Swim runtime know which one to set? That said, reusing laneUris **across** Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
### External Addressability
diff --git a/src/_backend/mongodb-ingestion.md b/src/_backend/mongodb-ingestion.md
index 2b6626e..89a85bb 100644
--- a/src/_backend/mongodb-ingestion.md
+++ b/src/_backend/mongodb-ingestion.md
@@ -153,7 +153,7 @@ public class MongoDbPollingAgent extends AbstractAgent {
}
```
-{% include alert.html title='Warning' text='When we configure the Web Agent node URI routing paths (e.g. within server.recon), ensure that only one instance of MongoDbPollingAgent can be instantiated.' %}
+{% include callout-warning.html title='Warning' text='When we configure the Web Agent node URI routing paths (e.g. within server.recon), ensure that only one instance of MongoDbPollingAgent can be instantiated.' %}
### Step 3: `VehicleAgent` Implementation
diff --git a/src/_backend/value-lanes.md b/src/_backend/value-lanes.md
index 74700d0..83b2ad8 100644
--- a/src/_backend/value-lanes.md
+++ b/src/_backend/value-lanes.md
@@ -81,7 +81,7 @@ public class UnitAgent extends AbstractAgent {
}
```
-{% include alert.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how does the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
+{% include callout-warning.html title='Caution' text='If you have multiple lanes within an Agent type, ensure that their laneUris are not identical. Suppose we declare two different value lanes within our UnitAgent with laneUri "info"; how does the Swim runtime know which one to set? That said, reusing laneUris across Agent types is perfectly acceptable, as requests corresponding to these are guaranteed to have different nodeUris.' %}
### External Addressability
diff --git a/src/_backend/web-agents.md b/src/_backend/web-agents.md
index 17fc4e1..6e997f2 100644
--- a/src/_backend/web-agents.md
+++ b/src/_backend/web-agents.md
@@ -106,7 +106,7 @@ A Dynamic Web Agent is only instantiated when its `nodeUri` is invoked for the f
With the code we have so far, we can instantiate any number of `UnitAgent`s by either defining them in the configuration file or by invoking URIs with the `"/unit/"` prefix.
For example, if we invoke `"/unit/1"`, `"/unit/foo"`, and `"/unit/foo_1"`, three `UnitAgent`s will be instantiated, one for each URI.
-{% include alert.html title='Caution' text='If you have multiple agent types within a plane, ensure that their URI patterns do not **clash**. This is a stricter requirement than saying that the patterns are identical; for example, "/unit/:id" and "/unit/:foo" clash. Suppose these same patterns annotated different agent types; how would a plane know which type of Agent to seek or instantiate for the request "/unit/1"?' %}
+{% include callout-warning.html title='Caution' text='If you have multiple agent types within a plane, ensure that their URI patterns do not **clash**. This is a stricter requirement than saying that the patterns are identical; for example, "/unit/:id" and "/unit/:foo" clash. Suppose these same patterns annotated different agent types; how would a plane know which type of Agent to seek or instantiate for the request "/unit/1"?' %}
In addition to the `nodeUri()` method mentioned in the previous section, every Agent also has access to a `Value getProp(String prop)` convenience method.
This returns a `swim.structure.Text` object containing the value of the dynamic `nodeUri` component with the name `prop`, `absent()` if it doesn't exist.
diff --git a/src/_frontend/dataModel.md b/src/_frontend/dataModel.md
index b7cd5a2..a254c35 100644
--- a/src/_frontend/dataModel.md
+++ b/src/_frontend/dataModel.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
## Overview
diff --git a/src/_frontend/downlinks.md b/src/_frontend/downlinks.md
index 3881e63..357073d 100644
--- a/src/_frontend/downlinks.md
+++ b/src/_frontend/downlinks.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
A Downlink provides a virtual bidirectional stream between the client and a lane of a remote Web Agent. WARP clients transparently multiplex all links to [**Web Agents**]({% link _backend/web-agents.md %}) on a given host over a single WebSocket connection.
diff --git a/src/_frontend/eventDownlink.md b/src/_frontend/eventDownlink.md
index b992c32..a37f23c 100644
--- a/src/_frontend/eventDownlink.md
+++ b/src/_frontend/eventDownlink.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
`EventDownlink` is not so much a subtype of `Downlink` as it is the base type of all downlinks. While not literally a superclass of `ValueDownlink`, and `MapDownlink`, `EventDownlink` inherits from the same prototype as the others but contains no additional frills. For example, `MapDownlink` supports registering different callbacks for observing when a key-value pair has been added versus when one has been removed; and `ValueDownlink` has the `didSet` callback for when its synced value has been updated. `EventDownlink`, on the other hand, offers no specialized handling of WARP messages with respect to the type of Web Agent lane it is connected to. It provides a raw view of a WARP link, passing all received updates to a single `onEvent` callback.
diff --git a/src/_frontend/form.md b/src/_frontend/form.md
index 5f55501..3b83bec 100644
--- a/src/_frontend/form.md
+++ b/src/_frontend/form.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
A Form defines a conversion between a structural type, and some nominal JavaScript type. The `mold` method converts a nominal JavaScript type to an Item. And the `cast` method converts an Item to a nominal JavaScript type, if possible.
diff --git a/src/_frontend/gettingStarted.md b/src/_frontend/gettingStarted.md
index 0ce602a..9aae803 100644
--- a/src/_frontend/gettingStarted.md
+++ b/src/_frontend/gettingStarted.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
Swim is a full stack **streaming application platform** for building stateful services, streaming APIs, and real-time UIs. Streaming applications push differential state changes through the full application stack, eliminating the need for polling and streaming only what each client chooses to observe. Real-time UIs render live views of distributed application state.
diff --git a/src/_frontend/listDownlink.md b/src/_frontend/listDownlink.md
index 02fa4f7..030629c 100644
--- a/src/_frontend/listDownlink.md
+++ b/src/_frontend/listDownlink.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
--- -->
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
A ListDownlink synchronizes a shared real-time list with a remote list lane. In addition to the standard Downlink callbacks, ListDownlink supports registering `willUpdate`, `didUpdate`, `willMove`, `didMove`, `willRemove`, and `didRemove` callbacks to observe all changes to downlinked list state — whether remote or local.
diff --git a/src/_frontend/mapDownlink.md b/src/_frontend/mapDownlink.md
index facc478..3479cf8 100644
--- a/src/_frontend/mapDownlink.md
+++ b/src/_frontend/mapDownlink.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
A MapDownlink synchronizes a shared real-time key-value map with with any Web Agent lane backed by a map. In addition to [**map lanes**]({% link _backend/map-lanes.md %}), this includes [**join value lanes**]({% link _backend/join-value-lanes.md %}) and [**join map lanes**]({% link _backend/join-map-lanes.md %}), which are maps where each entry is its own value lane or maps lane, respectively. In addition to the standard Downlink callbacks, MapDownlink supports registering `didUpdate`, and `didRemove` callbacks for observing changes to downlinked map state — whether remote or local. `didUpdate` is invoked when an existing map key is updated or a new key is added. `didRemove` gets called when a map key is removed.
diff --git a/src/_frontend/structures.md b/src/_frontend/structures.md
index 840fe06..734a0c2 100644
--- a/src/_frontend/structures.md
+++ b/src/_frontend/structures.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
## Item
diff --git a/src/_frontend/valueDownlink.md b/src/_frontend/valueDownlink.md
index cd0cca5..ca104bb 100644
--- a/src/_frontend/valueDownlink.md
+++ b/src/_frontend/valueDownlink.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
A ValueDownlink synchronizes a shared real-time value with a remote value lane. In addition to the standard Downlink callbacks, ValueDownlink supports registering a `didSet` callback to observe changes to downlinked state — whether remote or local.
diff --git a/src/_frontend/warpClient.md b/src/_frontend/warpClient.md
index 3f9f5a1..c536785 100644
--- a/src/_frontend/warpClient.md
+++ b/src/_frontend/warpClient.md
@@ -7,7 +7,7 @@ layout: documentation
redirect_from:
---
-{% include alert.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
+{% include callout-warning.html title='Version Note' text='This documentation describes Swim JS packages v4.0.0-dev-20230923 or later. Users of earlier package versions may experience differences in behavior.' %}
**WarpClient** is the class which behaves as the primary mechanism for handling connection management and link routing. WARP clients transparently multiplex all links to [**Web Agents**]({% link _backend/web-agents.md %}) on a given host over a single WebSocket connection, and automatically manage the network connection to each host, including reconnection and resynchronization after a network failure. Key lifecycle events may also be observed through the registration of callbacks.
diff --git a/src/_meta/styles.md b/src/_meta/styles.md
index 9c69ca9..12b02d5 100644
--- a/src/_meta/styles.md
+++ b/src/_meta/styles.md
@@ -72,34 +72,71 @@ toc:
You can learn more about styling the TOC in the [jekyll-toc README](https://github.com/toshimaru/jekyll-toc#css-styling){:data-proofer-ignore=''}
-## Callouts & Alerts
+## Callouts
-### Alerts
+A number of different callout variants are available to choose depending on the urgency and content of the message. Each of them implements the base `callout-base.html` template.
-You can add alert callouts to any document by including the `alert.html` template located at `_includes/alert.html`.
+### Information
+
+You can add informational callouts to any document by including the `callout-info.html` template located at `_includes/callout-info.html`.
+
+{% raw %}
+```liquid
+{% include callout-info.html title='FYI' text='Here is something you might want to know. You can use HTML markup here to add emphasis, even links.' %}
+```
+{% endraw %}
+
+{% include callout-info.html title='FYI' text='Here is something you might want to know. You can use HTML markup here to add emphasis, even links.' %}
+
+### OK
+
+When things are going well you can call attention to it by including the `callout-ok.html` template located at `_includes/callout-ok.html`.
+
+{% raw %}
+```liquid
+{% include callout-ok.html title='Huzzah!' text='All of my code works and I actually understand why! You can use HTML markup here to add emphasis, even links.' %}
+```
+{% endraw %}
+
+{% include callout-ok.html title='Huzzah!' text='All of my code works and I actually understand why! You can use HTML markup here to add emphasis, even links.' %}
+
+### Warnings
+
+You can add warning callouts to any document by including the `callout-warning.html` template located at `_includes/callout-warning.html`.
+
+{% raw %}
+```liquid
+{% include callout-warning.html title='Look out!' text='This is the warning body text. You can use HTML markup here to add emphasis, even links.' %}
+```
+{% endraw %}
+
+{% include callout-warning.html title='Look out!' text='This is the warning body text. You can use HTML markup here to add emphasis, even links.' %}
+
+### Errors and Other Bad Stuff
+
+Inversely, when something is bad or has gone wrong, you can use the `callout-bad.html` template located at `_includes/callout-bad.html`.
{% raw %}
```liquid
-{% include alert.html title='Caution' text='This is the alert body text. You can use HTML markup in it to add emphasis.' %}
+{% include callout-bad.html title='Uh oh!' text='We need to fix something. Here is where you\'ll find more details. You can use HTML markup here to add emphasis, even links.' %}
```
{% endraw %}
-{% include alert.html title='Caution' text='This is the alert body text. You can use HTML markup in it to add emphasis.' %}
+{% include callout-bad.html title='Uh oh!' text='We need to fix something. Here is where you\'ll find more details. You can use HTML markup here to add emphasis, even links.' %}
-### Callouts
+### Custom Callouts
-You can also use a generic callout which has more subtle styling for less urgent messages. Include the `callout.html` template located at `_includes/callout.html`.
-The information icon can be optionally swapped out for another.
+For custom callouts you may use the base callout template located at `_includes/callout-base.html`. Since no pre-defined variant is being used, individual callout properties must each be provided, including: `icon`, `iconColor`, `border`, `backgroundColor`, `title`, `titleStyles`, `text`, and `textStyles`. For the `icon` property, provide the font-awesome CSS classes which correspond to the desired icon. Lastly, be aware that with some background colors you may encounter contrast issues with some of the markup text (e.g. links on a royal blue background), so please be sure to address that.
{% raw %}
```liquid
-{% include callout.html title='Tip' text='Don\'t forget to add text and body fields. You can still use HTML markup to add emphasis.' %}
+{% include callout-base.html icon='fa-solid fa-circle-question' iconColor='text-purple-500' border='border-purple-500 border-4 border-dashed' backgroundColor='bg-purple-300' title='A Special Case' text='Feel free to apply any combination of text, border, or background Tailwind styles here.' %}
```
{% endraw %}
-{% include callout.html title='Tip' text='Don\'t forget to add text and body fields. You can still use HTML markup to add emphasis.' %}
+{% include callout-base.html icon='fa-solid fa-circle-question' iconColor='text-purple-500' border='border-purple-500 border-4 border-dashed' backgroundColor='bg-purple-300' title='A Special Case' text='Feel free to apply any combination of text, border, or background Tailwind styles here.' %}
-### Cookbook Banner
+## Cookbook Banner
If `cookbook:` is set in a page's [front matter](https://jekyllrb.com/docs/front-matter/), a banner will render to tell readers that
a cookbook example exists and will link them to the cookbook repo. This banner is located in `_includes/cookbook.html` and is included in `_layouts/page.html` only if `page.cookbook` is set.
diff --git a/tailwind.config.js b/tailwind.config.js
index 1942dc9..22401bc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
'./_includes/**/*.html',
'./_layouts/**/*.html',
'./_posts/*.md',
+ './_meta/*.md',
'./*.md',
'./*.html',
],
@@ -55,6 +56,8 @@ module.exports = {
},
}),
colors: {
+ 'swim-body-text': '#3A3C3E',
+ 'swim-blue': '#32C5FF', // Apatite?
'swim-dark-blue': '#042256',
'swim-darker-blue': '#111827',
'swim-teal': '#66FFDD',
@@ -62,12 +65,10 @@ module.exports = {
'swim-darker-teal': 'RGBA(4, 42, 43, 0.85)', // This is greyish-green and used as header/body text in the features section
'swim-purple': '#BA62FF',
'swim-dark-purple': '#D651FF',
- 'swim-body-text': '#3A3C3E',
- 'swim-blue': '#32C5FF', // Apatite?
'swim-grey': '#C1C1C1',
+ 'swim-lighter-grey': '#E9EFF0',
'swim-darker-grey': '#A9A9A9', // Footer links
'swim-darkerish-grey': '#6D7278', // Footer headings
- 'swim-lighter-grey': '#E9EFF0',
"kaimurasaki": {
100: "#E8E8EA",
200: "#D3D2D6",
@@ -106,9 +107,45 @@ module.exports = {
950: "#7B0D52",
DEFAULT: "#740049",
},
+ "callout": {
+ "info": {
+ "fill": "transparent",
+ "border": "#00A9A5",
+ "icon": "#00A9A5",
+ "text": "#0A1215",
+ "text-accent": "#02372F",
+ },
+ "ok": {
+ "fill": "#00A9A5",
+ "border": "#00896A",
+ "icon": "#FFFFFF",
+ "text": "#0A1514",
+ "text-accent": "#66FFDD",
+ },
+ "warning": {
+ "fill": "#F9DB6D",
+ "border": "#F7B500",
+ "icon": "#FFFFFF",
+ "text": "#15120A",
+ "text-accent": "#FFFFFF",
+ },
+ "bad": {
+ "fill": "#FF8552",
+ "border": "#BC571A",
+ "icon": "#FFFFFF",
+ "text": "#150A0A",
+ "text-accent": "#FFE3E3",
+ },
+ },
},
},
},
+ safelist: [
+ // include all possible tailwind color and border options in production build; supports passing custom styles to callout-base.html
+ { pattern: /bg-+/ },
+ { pattern: /border-+/ },
+ { pattern: /text-+/ },
+ ],
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),