summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorCarson Gross <carson@bigsky.software>2024-03-13 15:43:02 -0600
committerCarson Gross <carson@bigsky.software>2024-03-13 15:43:02 -0600
commitf1c3dc7cdc35bd0049fe57cd4daa0158cd984dfb (patch)
tree3b82b17e5c6e05250036d97985b293e4242a3665
parent4bbc9cfe431286f61a299b0d6545cbcf4f6ae927 (diff)
parent1e4b99de590d451306ea7f5e59a581060271fcf5 (diff)
downloadhtmx-f1c3dc7cdc35bd0049fe57cd4daa0158cd984dfb.tar.gz
htmx-f1c3dc7cdc35bd0049fe57cd4daa0158cd984dfb.zip
Merge branch 'master' into v2.0v2.0
# Conflicts: # www/content/docs.md
-rw-r--r--www/content/_index.md8
-rw-r--r--www/content/docs.md42
-rw-r--r--www/content/essays/web-security-basics-with-htmx.md2
-rw-r--r--www/content/examples/bulk-update.md5
-rw-r--r--www/content/extensions/server-sent-events.md1
-rw-r--r--www/content/migration-guide-hotwire-turbo.md20
-rw-r--r--www/content/server-examples.md7
-rw-r--r--www/content/talk/podcasts.csv3
-rw-r--r--www/content/webring.md2
-rw-r--r--www/static/img/llc-org.svg12
10 files changed, 88 insertions, 14 deletions
diff --git a/www/content/_index.md b/www/content/_index.md
index 0e38f079..7c08494e 100644
--- a/www/content/_index.md
+++ b/www/content/_index.md
@@ -27,12 +27,12 @@ IE11 compatible & has **reduced** code base sizes by [67% when compared with rea
<h2>motivation</h2>
-* Why should only [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) be able to make HTTP requests?
+* Why should only [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) & [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) be able to make HTTP requests?
* Why should only [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) & [`submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) events trigger them?
* Why should only [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) & [`POST`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) methods be [available](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)?
* Why should you only be able to replace the **entire** screen?
-By removing these arbitrary constraints, htmx completes HTML as a [hypertext](https://en.wikipedia.org/wiki/Hypertext)
+By removing these constraints, htmx completes HTML as a [hypertext](https://en.wikipedia.org/wiki/Hypertext)
<h2>quick start</h2>
@@ -177,7 +177,9 @@ Thank you to all our generous <a href="https://github.com/sponsors/bigskysoftwar
</a>
</td>
<td>
- <a href="https://bigsky.software"><img src="/img/bss-logo.png" alt="Big Sky Software" style="width:100%;max-width:150px"></a>
+ <a href="https://www.llc.org/">
+ <img alt="How to start an LLC - a guide from LLC.org, proud open source sponsor" src="/img/llc-org.svg" style="width:100%;max-width:250px">
+ </a>
</td>
<td>
</td>
diff --git a/www/content/docs.md b/www/content/docs.md
index d217294d..76266942 100644
--- a/www/content/docs.md
+++ b/www/content/docs.md
@@ -897,6 +897,41 @@ attribute to specify a different one.
Careful: this element will need to be on all pages or restoring from history won't work reliably.
+### Undoing DOM Mutations By 3rd Party Libraries
+
+If you are using a 3rd party library and want to use the htmx history feature, you will need to clean up the DOM before
+a snapshot is taken. Let's consider the [Tom Select](https://tom-select.js.org/) library, which makes select elements
+a much richer user experience. Let's set up TomSelect to turn any input element with the `.tomselect` class into a rich
+select element.
+
+First we need to initialize elements that have the class in new content:
+
+```javascript
+htmx.onLoad(function (target) {
+ // find all elements in the new content that should be
+ // an editor and init w/ quill
+ var editors = target.querySelectorAll(".tomselect")
+ .forEach(elt => new TomSelect(elt))
+});
+```
+
+This will create a rich selector for all input elements that have the `.tomselect` class on it. However, it mutates
+the DOM and we don't want that mutation saved to the history cache, since TomSelect will be reinitialized when the
+history content is loaded back into the screen.
+
+To deal with this, we need to catch the `htmx:beforeHistorySave` event and clean out the TomSelect mutations by calling
+`destroy()` on them:
+
+```javascript
+htmx.on('htmx:beforeHistorySave', function() {
+ // find all TomSelect elements
+ document.querySelectorAll('.tomSelect')
+ .forEach(elt => elt.tomselect.destroy()) // and call destroy() on them
+})
+```
+
+This will revert the DOM to the original HTML, thus allowing for a clean snapshot.
+
### Disabling History Snapshots
History snapshotting can be disabled for a URL by setting the [hx-history](@/attributes/hx-history.md) attribute to `false`
@@ -1291,11 +1326,7 @@ Here is an example of the code in action:
## Scripting {#scripting}
-While htmx encourages a hypermedia-based approach to building web applications, it does not preclude scripting and
-offers a few mechanisms for integrating scripting into your web application. Scripting was explicitly included in
-the REST-ful description of the web architecture in the [Code-On-Demand](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7)
-section. As much as is feasible, we recommend a [hypermedia-friendly](/essays/hypermedia-friendly-scripting) approach
-to scripting in your htmx-based web application:
+While htmx encourages a hypermedia approach to building web applications, it offers many options for client scripting. Scripting is included in the REST-ful description of web architecture, see: [Code-On-Demand](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7). As much as is feasible, we recommend a [hypermedia-friendly](/essays/hypermedia-friendly-scripting) approach to scripting in your web application:
* [Respect HATEOAS](/essays/hypermedia-friendly-scripting#prime_directive)
* [Use events to communicate between components](/essays/hypermedia-friendly-scripting#events)
@@ -1636,6 +1667,7 @@ listed below:
| `htmx.config.selfRequestsOnly` | defaults to `false`, if set to `true` will only allow AJAX requests to the same domain as the current document |
| `htmx.config.ignoreTitle` | defaults to `false`, if set to `true` htmx will not update the title of the document when a `title` tag is found in new content |
| `htmx.config.disableInheritance` | disables attribute inheritance in htmx, which can then be overridden by the [`hx-inherit`](@/attributes/hx-inherit.md) attribute |
+| `htmx.config.scrollIntoViewOnBoost` | defaults to `true`, whether or not the target of a boosted element is scrolled into the viewport. If `hx-target` is omitted on a boosted element, the target defaults to `body`, causing the page to scroll to the top. |
| `htmx.config.triggerSpecsCache` | defaults to `null`, the cache to store evaluated trigger specifications into, improving parsing performance at the cost of more memory usage. You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy) |
</div>
diff --git a/www/content/essays/web-security-basics-with-htmx.md b/www/content/essays/web-security-basics-with-htmx.md
index a1611017..f871e706 100644
--- a/www/content/essays/web-security-basics-with-htmx.md
+++ b/www/content/essays/web-security-basics-with-htmx.md
@@ -306,7 +306,7 @@ This is not one of the golden rules because it's not as easy to apply universall
You might reasonably wonder: if I didn't have to know these things when I was building SPAs, isn't htmx a step back in security? We would challenge both parts of that statement.
-This article is not intended to be a defense of htmx's security properties, but there are a lot of areas where hypermedia applications are, by default, a lot more secure than JSON-based frontends. HTML APIs only send back the information that's supposed to be rendered—it's a lot easier for unintended data to "hide" in a JSON response and leak to the user. Hypermdia APIs also don't lend themselves to implementing a generalized query language, like GraphQL, on the client, which [require a *massively* more complicated security model](https://intercoolerjs.org/2016/02/17/api-churn-vs-security.html). Flaws of all kinds hide in your application's complexity; hypermedia applications are, generally speaking, less complex, and therefore easier to secure.
+This article is not intended to be a defense of htmx's security properties, but there are a lot of areas where hypermedia applications are, by default, a lot more secure than JSON-based frontends. HTML APIs only send back the information that's supposed to be rendered—it's a lot easier for unintended data to "hide" in a JSON response and leak to the user. Hypermedia APIs also don't lend themselves to implementing a generalized query language, like GraphQL, on the client, which [require a *massively* more complicated security model](https://intercoolerjs.org/2016/02/17/api-churn-vs-security.html). Flaws of all kinds hide in your application's complexity; hypermedia applications are, generally speaking, less complex, and therefore easier to secure.
You also need to know about XSS attacks if you're putting dynamic content on the web, period. A developer who doesn't understand how XSS works won't understand what's dangerous about using React's [`dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html)—and they'll go ahead and set it the first time they need to render rich user-generated text. It is the library's responsibility to make those security basics as easy to find as possible; it has always been the developer's responsibility to learn and follow them.
diff --git a/www/content/examples/bulk-update.md b/www/content/examples/bulk-update.md
index 972d6372..85710b8e 100644
--- a/www/content/examples/bulk-update.md
+++ b/www/content/examples/bulk-update.md
@@ -8,7 +8,10 @@ accomplished by putting a form around a table, with checkboxes in the table, and
values in the form submission (`POST` request):
```html
-<form id="checked-contacts">
+<form id="checked-contacts"
+ hx-post="/users"
+ hx-swap="outerHTML settle:3s"
+ hx-target="#toast">
<table>
<thead>
<tr>
diff --git a/www/content/extensions/server-sent-events.md b/www/content/extensions/server-sent-events.md
index 181d47fb..7a17786a 100644
--- a/www/content/extensions/server-sent-events.md
+++ b/www/content/extensions/server-sent-events.md
@@ -12,6 +12,7 @@ Use the following attributes to configure how SSE connections behave:
* `sse-connect="<url>"` - The URL of the SSE server.
* `sse-swap="<message-name>"` - The name of the message to swap into the DOM.
+* `hx-swap` - You can control the swap strategy by using the [hx-swap](@/attributes/hx-swap.md) attribute, though note that modifiers like `scroll` are not supported.
* `hx-trigger="sse:<message-name>"` - SSE messages can also trigger HTTP callbacks using the [`hx-trigger`](@/attributes/hx-trigger.md) attribute.
## Install
diff --git a/www/content/migration-guide-hotwire-turbo.md b/www/content/migration-guide-hotwire-turbo.md
index 8956223a..4f945799 100644
--- a/www/content/migration-guide-hotwire-turbo.md
+++ b/www/content/migration-guide-hotwire-turbo.md
@@ -10,7 +10,7 @@ The purpose of this guide is to provide common practices for "Hotwire Equivalent
## Turbo Drive
* `<body hx-boost="true">` to enable a Turbo Drive-like experience. See: [hx-boost](@/attributes/hx-boost.md)
-* As with Turbo Drive, if the user does not have javascript enabled, the site will continue to work. See: [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement)
+* As with Turbo Drive, if the user has javascript disabled, `hx-boost` will continue to work. See: [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement)
* `hx-boost="false"` is equivalent to `data-turbo="false"` and used to disable boost on specific links or forms. See: [Handbook](https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms)
* Redirect after form submission (302, 303, 307, 3xx) `hx-target="body" hx-swap="outerHTML" hx-push-url="true"` See: [Handbook](https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission)
* Disable buttons on form submission See: [Handbook](https://turbo.hotwired.dev/handbook/drive#form-submissions)
@@ -23,12 +23,21 @@ addEventListener("htmx:afterOnLoad", (event) => {
event.target.querySelectorAll("button").forEach(node => { node.disabled = false })
})
```
+* Or, [hx-on](@/attributes/hx-on.md) may be used:
+ * `hx-on:submit= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'`
+ * `hx-on:htmx:afterOnLoad= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'`
* Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad"` See: [Cookbook](https://hyperscript.org/cookbook/)
## Turbo Frames
+* htmx combines all ideas of "Turbo Frames" into the base attributes. No `<turbo-frame>` required.
* Lazy loading: `hx-trigger="load, submit"` See: [Handbook](https://turbo.hotwired.dev/reference/frames#lazy-loaded-frame)
+## Turbo Streams
+
+* htmx combines all ideas of "Turbo Streams" into the base attributes. No `<turbo-stream>`, no `<template>` required.
+* Note: Turbo Streams can perform many actions anywhere on a page (similar to [hx-select-oob](@/attributes/hx-select-oob.md) and [hx-swap-oob](@/attributes/hx-swap-oob.md)) while Turbo Frames only update what is wrapped within `<turbo-frame> .. </turbo-frame>`
+
## Events
* Intercepting or Pausing Events. `htmx:config-request` is equivalent to `turbo:before-fetch-request` See: [Handbook](https://turbo.hotwired.dev/handbook/drive#pausing-requests)
@@ -40,11 +49,14 @@ document.body.addEventListener('htmx:configRequest', (event) => {
})
```
-* Or, a condition call may be used: `hx-trigger="submit[action(target)]"` See: [hx-trigger](@/attributes/hx-trigger.md)
- * Does not currently resolve async calls such as `fetch`. See: https://github.com/bigskysoftware/htmx/issues/912
-* Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit halt the event action(target) trigger ready"` `hx-trigger="ready"`
+* Or, use an [hx-trigger](@/attributes/hx-trigger.md) condition: `hx-trigger="submit[action(target)]"`
+ * Does not currently resolve async calls. See [issue](https://github.com/bigskysoftware/htmx/issues/912)
+* Or, use [hx-on](@/attributes/hx-on.md): `hx-on:click="event.preventDefault(); action(this); htmx.trigger(this, 'ready')"` `hx-trigger="ready"`
+* Or, use [hyperscript](https://hyperscript.org): `_="on submit halt the event action(target) trigger ready"` `hx-trigger="ready"`
* Will resolve async calls such as `fetch`. See: [async transparency](https://hyperscript.org/docs/#async)
## Stimulus
+* [hx-on](@/attributes/hx-on.md) provides an inline, vanilla substitute for a wide variety of use cases.
* [hyperscript](https://hyperscript.org) is a close analogue and an official companion project to htmx, but the two projects are entirely separated and can be used exclusively from each other or any other library.
+* For other options, see: [htmx: Scripting](/docs/#scripting)
diff --git a/www/content/server-examples.md b/www/content/server-examples.md
index 0d2270e6..fdc27d7c 100644
--- a/www/content/server-examples.md
+++ b/www/content/server-examples.md
@@ -49,6 +49,7 @@ These examples may make it a bit easier to get started using htmx with your plat
- <https://github.com/edmondchuc/flask-htmx>
- <https://github.com/cscortes/htmxflask>
+- <https://github.com/Konfuzian/htmx-examples-with-flask/>
### py4web
@@ -163,6 +164,12 @@ These examples may make it a bit easier to get started using htmx with your plat
- <https://github.com/lorantkurthy/todo-htmex>
+## F#
+
+### Giraffe
+
+- <https://hamy.xyz/labs/2023-12-fsharp-htmx>
+
## Go
### templ
diff --git a/www/content/talk/podcasts.csv b/www/content/talk/podcasts.csv
index 25ea3c4b..1ef336fb 100644
--- a/www/content/talk/podcasts.csv
+++ b/www/content/talk/podcasts.csv
@@ -20,3 +20,6 @@ GitHub - Accelerator: Open Source Demo Day,https://www.youtube.com/watch?v=Gj6Be
Unfiltered Build - The HOWL stack is your new tech stack,https://podcast.unfilteredbuild.com/episodes/ep24-howl-stack-and-htmx-carson-gross/
FrontendRheinMain - htmx: Building modern web applications without JS,https://www.youtube.com/watch?v=Jodkvyo5DbA
PodRocket by LogRocket,https://podrocket.logrocket.com/htmx-carson-gross
+Backend Banter - Behind htmx: the re-Rise of Hypermedia,https://www.backendbanter.fm/episodes/024-behind-htmx-carson-gross-on-the-re-rise-of-hypermedia
+Syntax - htmx Web Apps,https://syntax.fm/show/734/htmx-web-apps-with-carson-gross
+PodRocket - htmx v2,https://podrocket.logrocket.com/htmx-v2-carson-gross
diff --git a/www/content/webring.md b/www/content/webring.md
index bfb846e7..35a57a30 100644
--- a/www/content/webring.md
+++ b/www/content/webring.md
@@ -107,6 +107,8 @@ title = "htmx webring"
<tr><td><a rel="nofollow" target="_blank" href="https://xrss.infogulch.com">XRSS</a></td><td>A simple RSS reader inspired by Google Reader</td></tr>
<tr><td><a rel="nofollow" target="_blank" href="https://openunited.com/">OpenUnited</a></td><td>A Digital Talent match-making platform</td></tr>
<tr><td><a rel="nofollow" target="_blank" href="https://gophemeral.com">Gophemeral</a></td><td>Share secrets securely!</td></tr>
+ <tr><td><a rel="nofollow" target="_blank" href="https://signup.casa">Signup Casa</a></td><td>Simple, convenient sign-up forms.</td></tr>
+ <tr><td><a rel="nofollow" target="_blank" href="https://recipes.musicavis.ca">Recipya</a></td><td>A clean, simple and powerful recipe manager your whole family can enjoy.</td></tr>
</tbody>
</table>
</div>
diff --git a/www/static/img/llc-org.svg b/www/static/img/llc-org.svg
new file mode 100644
index 00000000..443fd529
--- /dev/null
+++ b/www/static/img/llc-org.svg
@@ -0,0 +1,12 @@
+<svg width="150" height="33" viewBox="0 0 150 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.5181 1.56982H50.7952V21.7883H63.0716V27.6344H43.5181V1.56982Z" fill="#1A3154"/>
+<path d="M65.5698 1.56982H72.8469V21.7883H85.1234V27.6344H65.5698V1.56982Z" fill="#1A3154"/>
+<path d="M92.7878 26.4226C90.6434 25.268 88.9588 23.6608 87.7339 21.6008C86.5089 19.5409 85.8965 17.2073 85.8965 14.6002C85.8965 11.9931 86.5089 9.66123 87.7339 7.59965C88.9588 5.53969 90.6434 3.93244 92.7878 2.77789C94.9322 1.62334 97.3515 1.04688 100.047 1.04688C102.399 1.04688 104.519 1.46864 106.406 2.31216C108.294 3.15568 109.861 4.37212 111.112 5.96146L106.48 10.2068C104.813 8.17123 102.793 7.15346 100.415 7.15346C99.0185 7.15346 97.7743 7.46449 96.6844 8.08492C95.5945 8.70535 94.749 9.58144 94.1477 10.7099C93.5465 11.8401 93.2476 13.1363 93.2476 14.6002C93.2476 16.0658 93.5482 17.362 94.1477 18.4905C94.7473 19.6207 95.5929 20.4951 96.6844 21.1156C97.7743 21.736 99.0185 22.047 100.415 22.047C102.791 22.047 104.813 21.0293 106.48 18.9937L111.112 23.239C109.863 24.8284 108.294 26.0448 106.406 26.8883C104.519 27.7318 102.401 28.1536 100.047 28.1536C97.3515 28.1536 94.9306 27.5771 92.7878 26.4226Z" fill="#1A3154"/>
+<path d="M112.933 26.3901C112.933 25.838 113.071 25.4472 113.347 25.2176C113.624 24.988 113.96 24.874 114.354 24.874C114.756 24.874 115.096 24.988 115.376 25.2176C115.656 25.4472 115.796 25.838 115.796 26.3901C115.796 26.9291 115.656 27.3215 115.376 27.5674C115.096 27.815 114.756 27.9387 114.354 27.9387C113.958 27.9387 113.624 27.815 113.347 27.5674C113.071 27.3199 112.933 26.9275 112.933 26.3901Z" fill="#1A3154"/>
+<path d="M128.985 21.6008C128.985 22.5892 128.858 23.4718 128.603 24.247C128.349 25.0221 127.979 25.6751 127.494 26.2108C127.01 26.745 126.426 27.1521 125.745 27.4322C125.063 27.7123 124.291 27.8523 123.43 27.8523C122.626 27.8523 121.888 27.7123 121.216 27.4322C120.544 27.1521 119.966 26.745 119.477 26.2108C118.988 25.6767 118.612 25.0221 118.347 24.247C118.082 23.4718 117.948 22.5909 117.948 21.6008C117.948 20.285 118.17 19.163 118.615 18.2348C119.061 17.3083 119.697 16.6031 120.527 16.1179C121.356 15.6342 122.345 15.3916 123.494 15.3916C124.586 15.3916 125.544 15.6359 126.368 16.1228C127.193 16.6097 127.836 17.3148 128.296 18.2397C128.755 19.1647 128.985 20.285 128.985 21.6008ZM120.167 21.6008C120.167 22.5241 120.284 23.3188 120.517 23.9848C120.75 24.6508 121.109 25.1605 121.594 25.5171C122.078 25.8738 122.705 26.0513 123.473 26.0513C124.227 26.0513 124.848 25.8738 125.336 25.5171C125.825 25.1605 126.183 24.6492 126.413 23.9848C126.643 23.3188 126.757 22.5257 126.757 21.6008C126.757 20.684 126.643 19.8991 126.413 19.2445C126.183 18.5898 125.827 18.0883 125.341 17.7398C124.857 17.3913 124.227 17.2171 123.451 17.2171C122.316 17.2171 121.486 17.6014 120.957 18.3684C120.43 19.1337 120.167 20.2117 120.167 21.6008Z" fill="#1A3154"/>
+<path d="M137.135 15.3931C137.351 15.3931 137.584 15.4061 137.835 15.4305C138.085 15.4566 138.301 15.4875 138.481 15.5233L138.254 17.5638C138.082 17.5198 137.883 17.484 137.656 17.4547C137.429 17.4253 137.221 17.4107 137.026 17.4107C136.566 17.4107 136.129 17.4986 135.713 17.6729C135.296 17.8471 134.93 18.0995 134.615 18.4317C134.298 18.7623 134.051 19.1661 133.872 19.6433C133.692 20.1188 133.604 20.6626 133.604 21.2733V27.6323H131.429V15.6113H133.173L133.432 17.782H133.528C133.772 17.3455 134.068 16.9466 134.417 16.5818C134.766 16.2187 135.168 15.9288 135.623 15.7139C136.078 15.5005 136.582 15.3931 137.135 15.3931Z" fill="#1A3154"/>
+<path d="M143.496 32.9996C141.91 32.9996 140.691 32.7048 139.841 32.1154C138.99 31.5259 138.564 30.7051 138.564 29.6499C138.564 28.9008 138.798 28.2658 139.264 27.7463C139.73 27.2268 140.384 26.8751 141.223 26.6943C140.907 26.5494 140.637 26.3247 140.41 26.0234C140.183 25.7222 140.071 25.3818 140.071 25.004C140.071 24.5611 140.194 24.1768 140.442 23.8527C140.69 23.5287 141.061 23.2144 141.556 22.9099C140.932 22.6477 140.429 22.2129 140.048 21.6071C139.667 20.9997 139.478 20.2897 139.478 19.4739C139.478 18.6092 139.659 17.8699 140.021 17.2592C140.383 16.6486 140.905 16.1829 141.588 15.8637C142.27 15.5445 143.099 15.3833 144.075 15.3833C144.29 15.3833 144.512 15.3931 144.742 15.411C144.972 15.4289 145.191 15.4566 145.4 15.4924C145.608 15.5282 145.776 15.5657 145.906 15.6015H149.999V16.8994L147.89 17.2267C148.097 17.5035 148.266 17.8308 148.396 18.2086C148.524 18.5864 148.59 19.0017 148.59 19.4527C148.59 20.674 148.179 21.6397 147.357 22.3497C146.536 23.0597 145.4 23.4131 143.95 23.4131C143.612 23.4065 143.271 23.3772 142.927 23.3251C142.619 23.5075 142.385 23.7045 142.228 23.9195C142.07 24.1344 141.992 24.3787 141.992 24.6555C141.992 24.8672 142.062 25.0366 142.202 25.1685C142.342 25.2988 142.545 25.3965 142.81 25.4567C143.075 25.5186 143.398 25.5495 143.779 25.5495H145.846C147.139 25.5495 148.129 25.8264 148.819 26.3784C149.508 26.9305 149.852 27.7381 149.852 28.7999C149.852 30.145 149.307 31.1806 148.216 31.9085C147.121 32.6364 145.549 32.9996 143.496 32.9996ZM143.572 31.3956C144.498 31.3956 145.271 31.3011 145.893 31.1122C146.514 30.9233 146.983 30.6547 147.298 30.3045C147.613 29.9561 147.772 29.5408 147.772 29.0604C147.772 28.624 147.669 28.2918 147.465 28.0622C147.261 27.8326 146.957 27.6779 146.555 27.5981C146.153 27.5183 145.658 27.4776 145.07 27.4776H143.11C142.607 27.4776 142.17 27.5574 141.797 27.717C141.424 27.8766 141.133 28.1078 140.924 28.4091C140.715 28.7103 140.612 29.0832 140.612 29.5278C140.612 30.1319 140.87 30.5928 141.382 30.9136C141.894 31.236 142.625 31.3956 143.572 31.3956ZM144.046 21.9165C144.843 21.9165 145.438 21.7032 145.834 21.2782C146.229 20.8532 146.425 20.2441 146.425 19.4511C146.425 18.6011 146.224 17.9611 145.822 17.5312C145.42 17.1029 144.824 16.888 144.035 16.888C143.266 16.888 142.68 17.1078 142.275 17.5475C141.869 17.9872 141.665 18.6287 141.665 19.4723C141.665 20.2507 141.869 20.8515 142.279 21.2782C142.689 21.7048 143.278 21.9165 144.046 21.9165Z" fill="#1A3154"/>
+<path d="M13.7056 0H5.771V24.8449H30.2965V16.807H13.7056V0Z" fill="#3D8AFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.7709 24.8449V0L0 7.30674V30.6909H21.6401L30.2964 24.8449H5.7709ZM27.9141 25.576H5.04914V2.08275L0.721764 7.56403V29.9614H21.4231L27.9141 25.576Z" fill="#3D8AFF"/>
+<path d="M30.2982 0H18.0347V12.4232H30.2982V0Z" fill="#FF813A"/>
+</svg>