├── .nojekyll
├── .node-version
├── CNAME
├── .gitignore
├── _source
    ├── ios
    │   ├── ios.json
    │   ├── 01_getting_started.md
    │   ├── 02_path_configuration.md
    │   ├── 05_configuration.md
    │   ├── 04_native_screens.md
    │   ├── 06_reference.md
    │   └── 03_bridge_components.md
    ├── _assets
    │   ├── fonts
    │   │   ├── Jost-Italic.woff2
    │   │   ├── Jost-Roman.woff2
    │   │   ├── Bitter-Italic.woff2
    │   │   ├── Bitter-Roman.woff2
    │   │   ├── RobotoMono-Roman.woff2
    │   │   └── RobotoMono-Italic.woff2
    │   ├── images
    │   │   ├── bridge-examples.png
    │   │   ├── favicon-196x196.png
    │   │   ├── favicon-32x32.png
    │   │   ├── native-vs-web.jpg
    │   │   ├── basic-navigation.png
    │   │   ├── bridge-ios-button.png
    │   │   ├── native-vs-web-ios.jpg
    │   │   ├── new-xcode-project.png
    │   │   ├── xcode-add-package.png
    │   │   ├── xcode-search-package.png
    │   │   ├── bridge-android-button.png
    │   │   ├── xcode-choose-template.png
    │   │   ├── xcode-project-location.png
    │   │   ├── xcode-project-options.png
    │   │   ├── android-hotwire-native-demo.png
    │   │   ├── iphone-hotwire-native-demo.png
    │   │   ├── new-android-studio-project.png
    │   │   ├── android-studio-project-options.png
    │   │   ├── icon-guide.svg
    │   │   ├── icon-install.svg
    │   │   ├── icon-github.svg
    │   │   ├── icon-android.svg
    │   │   ├── icon-apple.svg
    │   │   ├── favicon.svg
    │   │   ├── logo.svg
    │   │   ├── logo-hey.svg
    │   │   ├── logo-basecamp.svg
    │   │   ├── logo-once.svg
    │   │   └── waves-pattern-4.svg
    │   ├── js
    │   │   └── main.js
    │   └── css
    │   │   ├── main.scss
    │   │   ├── components
    │   │       ├── _anchor.scss
    │   │       ├── _callout.scss
    │   │       ├── _page.scss
    │   │       ├── _foot.scss
    │   │       ├── _button.scss
    │   │       ├── _highlighter.scss
    │   │       ├── _jump.scss
    │   │       ├── _grid.scss
    │   │       ├── _docs.scss
    │   │       ├── _landing.scss
    │   │       └── _nav.scss
    │   │   └── base
    │   │       ├── _fonts.scss
    │   │       ├── _mixins.scss
    │   │       ├── _utilities.scss
    │   │       └── _elements.scss
    ├── android
    │   ├── android.json
    │   ├── 06_reference.md
    │   ├── 05_configuration.md
    │   ├── 02_path_configuration.md
    │   ├── 04_native_screens.md
    │   ├── 01_getting_started.md
    │   └── 03_bridge_components.md
    ├── reference
    │   ├── reference.json
    │   ├── bridge_installation.md
    │   ├── bridge_components.md
    │   ├── path_configuration.md
    │   └── navigation.md
    ├── community
    │   ├── community.json
    │   └── discussions.md
    ├── overview
    │   ├── overview.json
    │   ├── 05_native_screens.md
    │   ├── 01_how_it_works.md
    │   ├── 03_path_configuration.md
    │   ├── 02_basic_navigation.md
    │   └── 04_bridge_components.md
    ├── _layouts
    │   ├── base.html
    │   ├── default.html
    │   └── docs.html
    ├── _filters
    │   ├── sortBy.js
    │   ├── navPrefix.js
    │   ├── titleFromHeading.js
    │   ├── where.js
    │   └── fullDate.js
    ├── _data
    │   ├── ios_release.js
    │   ├── android_release.js
    │   └── site.json
    ├── _includes
    │   ├── jump.html
    │   ├── section-nav.html
    │   ├── footer.html
    │   ├── github-corner.html
    │   ├── navigation.html
    │   ├── head.html
    │   └── svg
    │   │   └── hotwire-native-logo.svg
    └── index.html
├── README.md
├── .github
    └── workflows
    │   └── eleventy_publish.yml
├── package.json
└── .eleventy.js


/.nojekyll:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 16.15.0
2 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | native.hotwired.dev
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | .netlify
3 | .jekyll-metadata
4 | .sass-cache
5 | _public
6 | _site
7 | node_modules
8 | tmp
9 | 


--------------------------------------------------------------------------------
/_source/ios/ios.json:
--------------------------------------------------------------------------------
1 | {
2 |   "tags": [
3 |     "ios"
4 |   ],
5 |   "layout": "docs.html",
6 |   "section_title": "iOS"
7 | }
8 | 


--------------------------------------------------------------------------------
/_source/_assets/fonts/Jost-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/fonts/Jost-Italic.woff2


--------------------------------------------------------------------------------
/_source/_assets/fonts/Jost-Roman.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/fonts/Jost-Roman.woff2


--------------------------------------------------------------------------------
/_source/_assets/fonts/Bitter-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/fonts/Bitter-Italic.woff2


--------------------------------------------------------------------------------
/_source/_assets/fonts/Bitter-Roman.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/fonts/Bitter-Roman.woff2


--------------------------------------------------------------------------------
/_source/_assets/images/bridge-examples.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/bridge-examples.png


--------------------------------------------------------------------------------
/_source/_assets/images/favicon-196x196.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/favicon-196x196.png


--------------------------------------------------------------------------------
/_source/_assets/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/favicon-32x32.png


--------------------------------------------------------------------------------
/_source/_assets/images/native-vs-web.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/native-vs-web.jpg


--------------------------------------------------------------------------------
/_source/android/android.json:
--------------------------------------------------------------------------------
1 | {
2 |   "tags": [
3 |     "android"
4 |   ],
5 |   "layout": "docs.html",
6 |   "section_title": "Android"
7 | }
8 | 


--------------------------------------------------------------------------------
/_source/reference/reference.json:
--------------------------------------------------------------------------------
1 | {
2 |   "tags": [
3 |     "reference"
4 |   ],
5 |   "layout": "docs.html",
6 |   "section_title": "Reference"
7 | }


--------------------------------------------------------------------------------
/_source/_assets/fonts/RobotoMono-Roman.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/fonts/RobotoMono-Roman.woff2


--------------------------------------------------------------------------------
/_source/_assets/images/basic-navigation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/basic-navigation.png


--------------------------------------------------------------------------------
/_source/_assets/images/bridge-ios-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/bridge-ios-button.png


--------------------------------------------------------------------------------
/_source/_assets/images/native-vs-web-ios.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/native-vs-web-ios.jpg


--------------------------------------------------------------------------------
/_source/_assets/images/new-xcode-project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/new-xcode-project.png


--------------------------------------------------------------------------------
/_source/_assets/images/xcode-add-package.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/xcode-add-package.png


--------------------------------------------------------------------------------
/_source/community/community.json:
--------------------------------------------------------------------------------
1 | {
2 |   "tags": [
3 |     "community"
4 |   ],
5 |   "layout": "docs.html",
6 |   "section_title": "Community"
7 | }
8 | 


--------------------------------------------------------------------------------
/_source/overview/overview.json:
--------------------------------------------------------------------------------
1 | {
2 |   "tags": [
3 |     "overview"
4 |   ],
5 |   "layout": "docs.html",
6 |   "section_title": "Overview"
7 | }
8 | 


--------------------------------------------------------------------------------
/_source/_assets/fonts/RobotoMono-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/fonts/RobotoMono-Italic.woff2


--------------------------------------------------------------------------------
/_source/_assets/images/xcode-search-package.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/xcode-search-package.png


--------------------------------------------------------------------------------
/_source/_assets/images/bridge-android-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/bridge-android-button.png


--------------------------------------------------------------------------------
/_source/_assets/images/xcode-choose-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/xcode-choose-template.png


--------------------------------------------------------------------------------
/_source/_assets/images/xcode-project-location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/xcode-project-location.png


--------------------------------------------------------------------------------
/_source/_assets/images/xcode-project-options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/xcode-project-options.png


--------------------------------------------------------------------------------
/_source/_assets/images/android-hotwire-native-demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/android-hotwire-native-demo.png


--------------------------------------------------------------------------------
/_source/_assets/images/iphone-hotwire-native-demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/iphone-hotwire-native-demo.png


--------------------------------------------------------------------------------
/_source/_assets/images/new-android-studio-project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/new-android-studio-project.png


--------------------------------------------------------------------------------
/_source/_assets/images/android-studio-project-options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hotwired/hotwire-native-site/HEAD/_source/_assets/images/android-studio-project-options.png


--------------------------------------------------------------------------------
/_source/_assets/js/main.js:
--------------------------------------------------------------------------------
1 | import "@hotwired/turbo"
2 | 
3 | // Are we in an <iframe>?
4 | if (window.top !== window) {
5 |   // 🎶 Never Gonna Give You Up 🎶
6 |   location.replace("https://www.youtube.com/embed/dQw4w9WgXcQ")
7 | }
8 | 


--------------------------------------------------------------------------------
/_source/_layouts/base.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 |   {% include head.html %}
 5 | 
 6 |   <body>
 7 | 
 8 |     {% include jump.html %}
 9 | 
10 |     {{ content }}
11 | 
12 |   </body>
13 | 
14 | </html>
15 | 


--------------------------------------------------------------------------------
/_source/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: base
 3 | ---
 4 | 
 5 | <header class="page-header">
 6 | 
 7 |   {% include navigation.html, type: "horizontal" %}
 8 |   
 9 | </header>
10 | 
11 | <main id="content" class="grid">
12 | 
13 |   {{ content }}
14 | 
15 | </main>
16 | 
17 | <footer class="page-footer">
18 |   
19 |   {% include footer.html %}
20 | 
21 | </footer>


--------------------------------------------------------------------------------
/_source/_filters/sortBy.js:
--------------------------------------------------------------------------------
 1 | /* ----------------------------------------------------------------------------
 2 | sort collection by an arbitrary key
 3 | ---------------------------------------------------------------------------- */
 4 | module.exports = {
 5 | 
 6 |   sortBy: (values, key) => {
 7 |     const vals = [...values];
 8 |     return vals.sort((a, b) => Math.sign(a.data[key] - b.data[key]));
 9 |   }
10 | 
11 | };
12 | 


--------------------------------------------------------------------------------
/_source/_assets/css/main.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | @import
 3 |   "base/mixins",
 4 |   "base/fonts",
 5 |   "base/elements",
 6 |   "base/utilities",
 7 |   "components/anchor",
 8 |   "components/button",
 9 |   "components/jump",
10 |   "components/nav",
11 |   "components/foot",
12 |   "components/page",
13 |   "components/docs",
14 |   "components/landing",
15 |   "components/highlighter",
16 |   "components/callout",
17 |   "components/grid";
18 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_anchor.scss:
--------------------------------------------------------------------------------
 1 | .anchor {
 2 |   float: left;
 3 |   margin: 0 0 0 -1em;
 4 |   padding: 0;
 5 |   font-size: $font-x-small;
 6 |   text-decoration: none;
 7 |   opacity: 0.5;
 8 | }
 9 | 
10 | @media(hover: hover) {
11 |   .anchor {
12 |     opacity: 0;
13 |     transition: opacity 60ms ease-in-out;
14 |   }
15 | 
16 |   [id]:hover > .anchor {
17 |     opacity: 0.7;
18 |     &:hover { opacity: 1; }
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/_source/_data/ios_release.js:
--------------------------------------------------------------------------------
 1 | const Cache = require("@11ty/eleventy-cache-assets");
 2 | 
 3 | module.exports = async function() {
 4 |   let json = await Cache("https://api.github.com/repos/hotwired/hotwire-native-ios/releases/latest", {
 5 |     duration: "1d",
 6 |     type: "json"
 7 |   });
 8 | 
 9 |   return {
10 |     url: json.html_url,
11 |     tag_name: json.tag_name.replace('v', ''),
12 |     created_at: json.created_at
13 |   };
14 | 
15 | };
16 | 


--------------------------------------------------------------------------------
/_source/_data/android_release.js:
--------------------------------------------------------------------------------
 1 | const Cache = require("@11ty/eleventy-cache-assets");
 2 | 
 3 | module.exports = async function() {
 4 |   let json = await Cache("https://api.github.com/repos/hotwired/hotwire-native-android/releases/latest", {
 5 |     duration: "1d",
 6 |     type: "json"
 7 |   });
 8 | 
 9 |   return {
10 |     url: json.html_url,
11 |     tag_name: json.tag_name.replace('v', ''),
12 |     created_at: json.created_at
13 |   };
14 | 
15 | };
16 | 


--------------------------------------------------------------------------------
/_source/_data/site.json:
--------------------------------------------------------------------------------
1 | {
2 |   "title": "Hotwire Native",
3 |   "description": "Build high-fidelity hybrid apps with native navigation and a single shared web view.",
4 |   "url": "https://native.hotwired.dev",
5 |   "android_github_url": "https://github.com/hotwired/hotwire-native-android",
6 |   "ios_github_url": "https://github.com/hotwired/hotwire-native-ios",
7 |   "hotwire_native_site_github_main_branch_url": "https://github.com/hotwired/hotwire-native-site/blob/main"
8 | }
9 | 


--------------------------------------------------------------------------------
/_source/_filters/navPrefix.js:
--------------------------------------------------------------------------------
 1 | /* ----------------------------------------------------------------------------
 2 | grabs the navigation prefix from a URL string
 3 | ---------------------------------------------------------------------------- */
 4 | module.exports = {
 5 | 
 6 |   navPrefix: (value) => {
 7 |     const numberString = value.replace(/\D/g,'');
 8 |     const number = parseInt(numberString, 10);
 9 |     if (number > 0) {
10 |       return number;
11 |     }
12 |   }
13 | 
14 | };
15 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_callout.scss:
--------------------------------------------------------------------------------
 1 | .callout {
 2 |   background-color: #fe8;
 3 |   color: #000;
 4 | }
 5 | 
 6 | .callout--avoid {
 7 |   text-decoration: line-through;
 8 |   color: #c00;
 9 | }
10 | 
11 | .callout--prefer {
12 |   color: #0a0;
13 | }
14 | 
15 | .callout--pink {
16 |   background-color: #fac;
17 |   color: #000;
18 | }
19 | 
20 | .callout--blue {
21 |   background-color: #8cf;
22 |   color: #000;
23 | }
24 | 
25 | .callout--green {
26 |   background-color: #afc;
27 |   color: #000;
28 | }
29 | 


--------------------------------------------------------------------------------
/_source/_filters/titleFromHeading.js:
--------------------------------------------------------------------------------
 1 | /* ----------------------------------------------------------------------------
 2 | grab the contents of the first element in a Markdown entry
 3 | ---------------------------------------------------------------------------- */
 4 | 
 5 | module.exports = {
 6 | 
 7 |   titleFromHeading: (value) => {
 8 |     const lines = value.split('\n');
 9 |     if (lines[0].includes("h1")) {
10 |       const heading = lines[0].replace(/(<([^>]+)>)/gi, "");
11 |       return heading;
12 |     }
13 |   }
14 | 
15 | };
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # The Hotwire Native website
 2 | 
 3 | This repository backs the website living at https://native.hotwired.dev.
 4 | 
 5 | To work on it locally:
 6 | 
 7 | 1. `npm install`
 8 | 2. `npm run serve`
 9 | 3.  (If you need it: `npm install markdown-it` and rerun step #2).
10 | 
11 | ## Copyright
12 | 
13 | The logo, design, and other aesthetic parts of this website is copyright 37signals, all rights reserved. Feel free to be inspired by the structure, but do not copy the specific design, anymore than you'd copy basecamp.com or hey.com.
14 | 
15 | 


--------------------------------------------------------------------------------
/_source/_filters/where.js:
--------------------------------------------------------------------------------
 1 | /* ----------------------------------------------------------------------------
 2 | filter collection by a key, like Jekyll's "where" filter
 3 | Liquid: {% assign foo = collections.bar | where: "title", "fizz" %}
 4 | ---------------------------------------------------------------------------- */
 5 | module.exports = {
 6 | 
 7 |   where: (array, key, value) => {
 8 |     return array.filter((item) => {
 9 |       const data = item && item.data ? item.data : item;
10 |       return typeof value === 'undefined' ? key in data : data[key] === value;
11 |     });
12 |   }
13 | 
14 | };
15 | 


--------------------------------------------------------------------------------
/_source/_includes/jump.html:
--------------------------------------------------------------------------------
 1 | <a class="nav-skip" href="#content">Skip to content</a>
 2 | 
 3 | <nav class="jump">
 4 |   <ul class="jump__list">
 5 |     <li><a class="jump__list-link jump__list-link--hotwire" href="https://hotwired.dev">Hotwire</a></li>
 6 |     <li><a class="jump__list-link hover:color-brand-turbo" href="https://turbo.hotwired.dev">Turbo</a></li>
 7 |     <li><a class="jump__list-link hover:color-brand-stimulus" href="https://stimulus.hotwired.dev">Stimulus</a></li>
 8 |     <li><a class="jump__list-link hover:color-brand-turbo jump__list-link--active" href="https://native.hotwired.dev">Native</a></li>
 9 |   </ul>
10 | </nav>
11 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_page.scss:
--------------------------------------------------------------------------------
 1 | .page-header {
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   align-items: center;
 5 |   padding: 0.75em 1em;
 6 | }
 7 | 
 8 | .page-footer {
 9 |   position: relative;
10 |   margin: 6em 0 0 0;
11 |   padding: 3em 0;
12 |   text-align: center;
13 | 
14 |   @include media(medium) {
15 |     &:before {
16 |       background: url('/assets/waves-pattern-6.svg') top left no-repeat;
17 |       background-size: 100% 230%;
18 |       content: '';
19 |       width: 50%;
20 |       height: 50%;
21 |       position: absolute;
22 |       z-index: -1;
23 |       left: 65%;
24 |       top: 50%;
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/_source/_assets/images/icon-guide.svg:
--------------------------------------------------------------------------------
1 | <svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M33.264 59.931a1.283 1.283 0 0 1-.764-1.18V12.5c0-.348.139-.626.347-.904 2.987-2.916 8.264-7.014 16.806-9.652C54.722.347 58.472 0 58.61 0c.348 0 .695.14.973.347.278.21.416.556.416.903V47.5c0 .625-.486 1.181-1.18 1.25-.14 0-14.653 1.32-24.167 10.903-.278.208-.556.347-.903.347-.14 0-.347 0-.486-.069m-7.917-.278C15.764 50.07 1.25 48.75 1.11 48.75A1.272 1.272 0 0 1 0 47.5V1.25C0 .903.139.556.417.347.625.07.972 0 1.32 0c.208 0 3.958.347 9.027 1.945 4.723 1.458 11.459 4.305 16.806 9.652.208.278.347.556.347.903v46.25c0 .487-.347.973-.763 1.181-.14.07-.348.07-.487.07-.347 0-.625-.14-.903-.348" fill="#D8C6A6" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/_source/_includes/section-nav.html:
--------------------------------------------------------------------------------
 1 | <ul class="nav__sublist {% if tags[0] == section %} active{% endif %}">
 2 |   {%- assign sortedEntries = collections[section] | sortBy: "order" -%}
 3 |   {%- for entry in sortedEntries -%}
 4 |     <li>
 5 |       <a class="nav__sublist-link{% if page.url == entry.url %} active{% endif %}" href="{{ entry.url | remove: ".html" }}">
 6 |         {%- assign autoPrefix = entry.filePathStem | navPrefix  -%}
 7 |         {%- if entry.data.nav_prefix %}{{ entry.data.nav_prefix }}: {% elsif autoPrefix %}{{ autoPrefix }}: {% endif %}{% if entry.data.title %}{{ entry.data.title }}{% else %}{{ entry.data.content | titleFromHeading }}{% endif %}
 8 |       </a>
 9 |     </li>
10 |   {%- endfor -%}
11 | </ul>
12 | 


--------------------------------------------------------------------------------
/_source/_includes/footer.html:
--------------------------------------------------------------------------------
 1 | <footer class="footer">
 2 |   <p class="footer__headline">Brought to you by the makers of:</p>
 3 |   <ul class="footer__links">
 4 |     <li><a href="https://basecamp.com" target="_blank" rel="noopener"><img width="145" height="32" src="/assets/logo-basecamp.svg" alt="Basecamp"></a></li>
 5 |     <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="123" height="57" src="/assets/logo-hey.svg" alt="HEY"></a></li>
 6 |     <li><a href="https://once.com" target="_blank" rel="noopener"><img width="72" height="72" src="/assets/logo-once.svg" alt="ONCE"></a></li>
 7 |   </ul>
 8 |   <p class="footer__copyright">&copy; {{ 'now' | date: '%Y' }} <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p>
 9 | </footer>
10 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_foot.scss:
--------------------------------------------------------------------------------
 1 | .footer {
 2 | 
 3 |   align-items: center;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 | 
 7 |   &__headline {
 8 |     font-size: 85%;
 9 |     font-style: italic;
10 |     margin: 0 0 0.7em 0;
11 |   }
12 | 
13 |   &__links {
14 | 
15 |     align-items: center;
16 |     display: flex;
17 |     gap: 1.1em;
18 |     margin: 0;
19 | 
20 |     li {
21 | 
22 |       display: flex;
23 |       margin: 0;
24 | 
25 |       a {
26 | 
27 |         display: flex;
28 | 
29 |         img {
30 |           display: block;
31 |           height: 1.7em;
32 |           width: auto;
33 |         }
34 | 
35 |       }
36 | 
37 |     }
38 | 
39 |   }
40 | 
41 |   &__copyright {
42 |     font-size: 85%;
43 |     margin: 2.5em 0 0 0;
44 |   }
45 | 
46 | }
47 | 


--------------------------------------------------------------------------------
/_source/_assets/images/icon-install.svg:
--------------------------------------------------------------------------------
1 | <svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g fill="#D8C6A6" fill-rule="evenodd"><path d="M9 4a5 5 0 0 0-5 5v46a5 5 0 0 0 5 5h46a5 5 0 0 0 5-5V9a5 5 0 0 0-5-5H9zm0-4h46a9 9 0 0 1 9 9v46a9 9 0 0 1-9 9H9a9 9 0 0 1-9-9V9a9 9 0 0 1 9-9z" fill-rule="nonzero"/><path d="M3 3h58v18H3V3zm6.5 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm9 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm9 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM13.43 50.04l-2.4-2.94c.96-.72 2.31-1.77 4.2-3.33l2.82-2.34-2.94-2.34c-1.5-1.2-3.27-2.52-4.11-3.06L13.4 33c1.35 1.08 8.43 6.81 9.51 7.59l.06 1.47c-1.05.81-8.76 7.32-9.54 7.98zM48.13 47c-.09 1.05-.15 2.64-.15 3.78-2.37-.03-4.68-.06-6.9-.06h-6.06c-2.58 0-4.95.03-7.02.06.06-.9.12-2.64.12-3.78 2.73.06 6.51.12 10.05.12 2.82 0 7.26-.06 9.96-.12z"/></g></svg>


--------------------------------------------------------------------------------
/.github/workflows/eleventy_publish.yml:
--------------------------------------------------------------------------------
 1 | name: Eleventy Publish
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 |   workflow_dispatch:
 7 |     inputs:
 8 |       confirmation:
 9 |         description: 'Are you sure you want to run the publish process manually?'
10 |         required: true
11 |         type: boolean
12 | jobs:
13 |   deploy:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v3
17 |       - name: Setup Node
18 |         uses: actions/setup-node@v3
19 |         with:
20 |           node-version: 18
21 |       - run: npm ci
22 |       - run: npm run publish
23 |       - name: Deploy
24 |         uses: peaceiris/actions-gh-pages@v3
25 |         with:
26 |           github_token: ${{ secrets.GITHUB_TOKEN }}
27 |           publish_dir: ./_public
28 |           cname: native.hotwired.dev
29 | 


--------------------------------------------------------------------------------
/_source/_filters/fullDate.js:
--------------------------------------------------------------------------------
 1 | /* ----------------------------------------------------------------------------
 2 | returns a formatted date - via https://stackoverflow.com/a/31615643
 3 | ---------------------------------------------------------------------------- */
 4 | const appendSuffix = (n) => {
 5 |   const s = ['th', 'st', 'nd', 'rd'];
 6 |   const v = n % 100;
 7 |   return n + (s[(v - 20) % 10] || s[v] || s[0]);
 8 | };
 9 | 
10 | module.exports = {
11 | 
12 |   fullDate: (value) => {
13 |     const dateObject = new Date(value);
14 |   
15 |     const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
16 |     const dayWithSuffix = appendSuffix(dateObject.getDate());
17 |   
18 |     return `${months[dateObject.getMonth()]} ${dayWithSuffix} ${dateObject.getFullYear()}`;
19 |   }
20 |   
21 | };
22 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_button.scss:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   transition: font-weight 0.1s ease, clip-path 0.2s ease, background-color 0.2s ease;
 3 |   display: inline-block;
 4 |   padding: 1em 1.5em;
 5 |   color: $color-white;
 6 |   font-family: $sans-stack;
 7 |   text-decoration: none;
 8 |   text-align: center;
 9 |   line-height: normal;
10 |   -webkit-appearance: none;
11 |   background-color: $color-brand;
12 |   border: 0;
13 |   box-shadow: none;
14 |   clip-path: polygon(5% 10%, 46% 1%, 46% 10%, 100% 0, 95% 90%, 31% 100%, 31% 90%, 0% 100%);
15 | 
16 |   &:visited {
17 |     color: $color-white;
18 |   }
19 | 
20 |   @media(hover: hover) {
21 |     &:hover {
22 |       color: $color-black;
23 |       background-color: $color-accent;
24 |       cursor: pointer;
25 |       text-decoration: none;
26 |       font-weight: 800;
27 |       clip-path: polygon(5% 10%, 66% 1%, 66% 10%, 100% 0, 95% 90%, 51% 100%, 51% 90%, 0% 100%);
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/_source/_assets/images/icon-github.svg:
--------------------------------------------------------------------------------
1 | <svg width="61" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M30.237.913C13.672.913.24 14.346.24 30.916c0 13.253 8.595 24.497 20.518 28.464 1.5.276 2.047-.65 2.047-1.446 0-.712-.026-2.598-.04-5.101-8.345 1.812-10.106-4.023-10.106-4.023-1.364-3.465-3.33-4.388-3.33-4.388-2.725-1.861.205-1.822.205-1.822 3.011.21 4.595 3.09 4.595 3.09 2.676 4.585 7.022 3.26 8.731 2.494.273-1.94 1.047-3.261 1.904-4.011-6.66-.758-13.665-3.331-13.665-14.828 0-3.274 1.17-5.953 3.088-8.05-.308-.759-1.338-3.809.295-7.94 0 0 2.518-.806 8.25 3.076 2.392-.665 4.958-.998 7.51-1.01 2.548.013 5.114.346 7.511 1.01 5.727-3.882 8.241-3.076 8.241-3.076 1.637 4.131.607 7.181.3 7.94 1.922 2.097 3.083 4.775 3.083 8.05 0 11.526-7.015 14.062-13.699 14.803 1.078.927 2.038 2.758 2.038 5.556 0 4.011-.038 7.246-.038 8.23 0 .803.541 1.736 2.064 1.444C51.651 55.4 60.24 44.165 60.24 30.915 60.24 14.346 46.806.913 30.237.913" fill="#D8C6A6" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/_source/_layouts/docs.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: base
 3 | ---
 4 | 
 5 | <div class="nav__github-corner">
 6 |   {% include github-corner.html %}
 7 | </div>
 8 | 
 9 | <main class="grid docs">
10 | 
11 |   <header class="docs__index grid__custom-item">
12 |     {% include navigation.html %}
13 |   </header>
14 | 
15 |   <section id="content" class="docs__content grid__custom-item">
16 | 
17 |     {{ content }}
18 | 
19 |     {%- assign current_collection = tags[0] -%}
20 |     {%- assign next_page = collections[current_collection] | getNextCollectionItem: page -%}
21 |     {%- if next_page -%}
22 |       <p><a class="button" href="{{ next_page.url | remove: ".html" }}">Next: {% if next_page.data.title %}{{ next_page.data.title }}{% else %}{{ next_page.data.content | titleFromHeading }}{% endif %}</a></p>
23 |     {%- endif -%}
24 | 
25 |   </section>
26 | 
27 |   <footer class="docs__footer grid__item grid__item--start-4 grid__item--span-8">
28 | 
29 |     {% include footer.html %}
30 | 
31 |   </footer>
32 | 
33 | </main>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "@hotwired/turbo": "^7.3.0"
 5 |   },
 6 |   "devDependencies": {
 7 |     "@11ty/eleventy": "^2.0.1",
 8 |     "@11ty/eleventy-cache-assets": "^2.3.0",
 9 |     "@11ty/eleventy-plugin-syntaxhighlight": "^3.2.2",
10 |     "del-cli": "^3.0.1",
11 |     "esbuild": "^0.25.0",
12 |     "markdown-it": "^12.3.2",
13 |     "markdown-it-anchor": "^7.1.0",
14 |     "markdown-it-toc-done-right": "^4.2.0",
15 |     "npm-run-all": "^4.1.5",
16 |     "sass": "^1.68.0"
17 |   },
18 |   "scripts": {
19 |     "serve": "npm-run-all -s clean build:11ty build:js build:css -p watch:** --silent",
20 |     "publish": "run-s build:**",
21 |     "clean": "del-cli \"_public/**\"",
22 |     "build:11ty": "eleventy",
23 |     "watch:11ty": "eleventy --serve --quiet",
24 |     "build:css": "sass --style=compressed _source/_assets/css/main.scss _public/assets/main.css",
25 |     "watch:css": "npm run build:css -- --watch",
26 |     "build:js": "esbuild _source/_assets/js/main.js --bundle --minify --sourcemap --outdir=_public/assets",
27 |     "watch:js": "npm run build:js -- --watch"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/_source/android/06_reference.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /android/reference.html
 3 | order: 06
 4 | title: "Reference"
 5 | description: "An reference guide to the Hotwire Native Android library."
 6 | ---
 7 | 
 8 | # Reference
 9 | 
10 | ## Navigator
11 | 
12 | The `Navigator` is the central coordinator in a Hotwire Native Android application. Each `NavigatorHost` in your Activity maintains a `Navigator` instance, which manages the stack of `HotwireFragment` screens with a single, shared `WebView` instance. It lets your app choose how to handle link taps, present new screens, and deal with errors.
13 | 
14 | ## Custom WebView
15 | 
16 | You can customize and subclass the `HotwireWebView` class to provide custom behaviors in your app:
17 | 
18 | ```kotlin
19 | Hotwire.config.makeCustomWebView = { context ->
20 |     MyCustomWebView(context, null)
21 | }
22 | ```
23 | 
24 | ## Custom HTML data attributes
25 | 
26 | - `data-native-prevent-pull-to-refresh`: Apply to any element in your web app whose touch events conflict with the native pull-to-refresh behavior in the `WebView`. By default, scrollable elements prevent pull-to-refresh, but you may need to apply this custom attribute to elements that have draggable or swipeable behaviors.
27 | 


--------------------------------------------------------------------------------
/_source/_includes/github-corner.html:
--------------------------------------------------------------------------------
 1 | <svg width="60" height="60" viewBox="0 0 250 250" version="1.1" xmlns="github-corner"
 2 | 	style="fill:#000000; color:#FFFFFF;"
 3 | 	aria-hidden="true">
 4 | 	<a href="{{site.hotwire_native_site_github_main_branch_url}}/{{page.inputPath}}" target="_blank" class="github-corner">
 5 | 		<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 6 | 		<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 7 | 			fill="#FFFFFF" style="transform-origin: 130px 106px;" class="octo-arm">
 8 | 		</path>
 9 | 		<path
10 | 			d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="#FFFFFF" class="octo-body">
11 | 		</path>
12 | 	</a>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/_source/overview/05_native_screens.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /overview/native-screens.html
 3 | order: 05
 4 | title: "Native Screens"
 5 | description: "Integrate fully native Kotlin and Swift screens in your Hotiwre Native app."
 6 | ---
 7 | 
 8 | # Native Screens
 9 | 
10 | There are times where neither web-based content nor [bridge components](/overview/bridge-components) are enough. Times where you need maximum fidelity or interaction with native SDKs and APIs. For these, you can build fully native screens in Kotlin and Swift.
11 | 
12 | There are a few things to note:
13 | 
14 | - It's strongly encouraged that each native screen has a corresponding URL, so it's easier to integrate into Hotwire Native's built-in navigation.
15 | - Purely native screens will likely take specialized experience from iOS and Android developers.
16 | - You'll need to write a version for every platform and go through the app store review process for any future changes.
17 | 
18 | Leveraging Hotwire Native allows you to build full products with smaller development teams. You can focus on high fidelity native development where it matters most and leverage your existing web app for everything else.
19 | 
20 | Check out the [iOS](/ios/native-screens)- and [Android](/android/native-screens)-specific pages for information and code snippets.
21 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_highlighter.scss:
--------------------------------------------------------------------------------
 1 | .token.comment,
 2 | .token.prolog,
 3 | .token.doctype,
 4 | .token.cdata {
 5 | 	color: rgba(0, 0, 0, 0.6);
 6 | 	font-style: italic;
 7 | }
 8 | 
 9 | .token.namespace {
10 | 	opacity: .7;
11 | }
12 | 
13 | .token.string,
14 | .token.attr-value,
15 | .token.attr-name {
16 |   color: #4070a0;
17 |   font-weight: normal;
18 | }
19 | 
20 | .token.punctuation,
21 | .token.operator {
22 | 	color: #393A34;
23 | }
24 | 
25 | .token.entity,
26 | .token.url,
27 | .token.symbol,
28 | .token.number,
29 | .token.variable,
30 | .token.constant,
31 | .token.property,
32 | .token.regex,
33 | .token.inserted {
34 |   color: #002070;
35 |   font-weight: bold;
36 | }
37 | 
38 | .token.boolean {
39 |   color: #007020;
40 |   font-weight: bold;
41 | }
42 | 
43 | .token.atrule,
44 | .token.keyword,
45 | .language-autohotkey .token.selector {
46 |   color: #007020;
47 |   font-weight: bold;
48 | }
49 | 
50 | .token.function,
51 | .token.deleted,
52 | .language-autohotkey .token.tag {
53 | 	color: #9a050f;
54 | }
55 | 
56 | .token.tag,
57 | .token.selector,
58 | .language-autohotkey .token.keyword {
59 |   color: #062873;
60 |   font-weight: bold;
61 | }
62 | 
63 | .token.important,
64 | .token.function,
65 | .token.bold {
66 | 	font-weight: bold;
67 | }
68 | 
69 | .token.italic {
70 | 	font-style: italic;
71 | }
72 | 


--------------------------------------------------------------------------------
/_source/_assets/images/icon-android.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-android2" viewBox="0 0 16 16">
2 |   <path d="m10.213 1.471.691-1.26q.069-.124-.048-.192-.128-.057-.195.058l-.7 1.27A4.8 4.8 0 0 0 8.005.941q-1.032 0-1.956.404l-.7-1.27Q5.281-.037 5.154.02q-.117.069-.049.193l.691 1.259a4.25 4.25 0 0 0-1.673 1.476A3.7 3.7 0 0 0 3.5 5.02h9q0-1.125-.623-2.072a4.27 4.27 0 0 0-1.664-1.476ZM6.22 3.303a.37.37 0 0 1-.267.11.35.35 0 0 1-.263-.11.37.37 0 0 1-.107-.264.37.37 0 0 1 .107-.265.35.35 0 0 1 .263-.11q.155 0 .267.11a.36.36 0 0 1 .112.265.36.36 0 0 1-.112.264m4.101 0a.35.35 0 0 1-.262.11.37.37 0 0 1-.268-.11.36.36 0 0 1-.112-.264q0-.154.112-.265a.37.37 0 0 1 .268-.11q.155 0 .262.11a.37.37 0 0 1 .107.265q0 .153-.107.264M3.5 11.77q0 .441.311.75.311.306.76.307h.758l.01 2.182q0 .414.292.703a.96.96 0 0 0 .7.288.97.97 0 0 0 .71-.288.95.95 0 0 0 .292-.703v-2.182h1.343v2.182q0 .414.292.703a.97.97 0 0 0 .71.288.97.97 0 0 0 .71-.288.95.95 0 0 0 .292-.703v-2.182h.76q.436 0 .749-.308.31-.307.311-.75V5.365h-9zm10.495-6.587a.98.98 0 0 0-.702.278.9.9 0 0 0-.293.685v4.063q0 .406.293.69a.97.97 0 0 0 .702.284q.42 0 .712-.284a.92.92 0 0 0 .293-.69V6.146a.9.9 0 0 0-.293-.685 1 1 0 0 0-.712-.278m-12.702.283a1 1 0 0 1 .712-.283q.41 0 .702.283a.9.9 0 0 1 .293.68v4.063a.93.93 0 0 1-.288.69.97.97 0 0 1-.707.284 1 1 0 0 1-.712-.284.92.92 0 0 1-.293-.69V6.146q0-.396.293-.68"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/_source/_assets/images/icon-apple.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple" viewBox="0 0 16 16">
2 |   <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282"/>
3 |   <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/_source/_assets/css/base/_fonts.scss:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'Bitter';
 3 |   font-weight: 100 900;
 4 |   font-stretch: normal;
 5 |   font-named-instance: 'Regular';
 6 |   src: url('/assets/fonts/Bitter-Roman.woff2') format('woff2');
 7 |   font-display: swap;
 8 | }
 9 | 
10 | @font-face {
11 |   font-family: 'Bitter';
12 |   font-weight: 100 900;
13 |   font-style: italic;
14 |   font-named-instance: 'Italic';
15 |   src: url('/assets/fonts/Bitter-Italic.woff2') format('woff2');
16 |   font-display: swap;
17 | }
18 | 
19 | @font-face {
20 |   font-family: 'Jost';
21 |   font-weight: 100 900;
22 |   font-stretch: normal;
23 |   font-named-instance: 'Regular';
24 |   src: url('/assets/fonts/Jost-Roman.woff2') format('woff2');
25 |   font-display: swap;
26 | }
27 | 
28 | @font-face {
29 |   font-family: 'Jost';
30 |   font-weight: 100 900;
31 |   font-style: italic;
32 |   font-named-instance: 'Italic';
33 |   src: url('/assets/fonts/Jost-Italic.woff2') format('woff2');
34 |   font-display: swap;
35 | }
36 | 
37 | @font-face {
38 |   font-family: 'RobotoMono';
39 |   font-weight: 100 800;
40 |   font-stretch: normal;
41 |   font-named-instance: 'Regular';
42 |   src: url('/assets/fonts/RobotoMono-Roman.woff2') format('woff2');
43 |   font-display: swap;
44 | }
45 | 
46 | @font-face {
47 |   font-family: 'RobotoMono';
48 |   font-weight: 100 800;
49 |   font-style: italic;
50 |   font-named-instance: 'Italic';
51 |   src: url('/assets/fonts/RobotoMono-Italic.woff2') format('woff2');
52 |   font-display: swap;
53 | }
54 | 


--------------------------------------------------------------------------------
/_source/community/discussions.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /community/discussions.html
 3 | order: 01
 4 | title: "Discussions & Issues"
 5 | description: "Start a discussion or report an issue on GitHub"
 6 | ---
 7 | 
 8 | # Discussions
 9 | 
10 | If you'd like to discuss a Hotwire Native topic or have questions about your application, please use GitHub Discussions for each platform:
11 | 
12 | <div class="docs-actions">
13 |   <a class="docs-actions__item" href="https://github.com/hotwired/hotwire-native-ios/discussions">
14 |     <div class="docs-actions__icon docs-actions__icon--github" aria-hidden="true"></div>
15 |     iOS: GitHub Discussions
16 |   </a>
17 |   
18 |   <a class="docs-actions__item" href="https://github.com/hotwired/hotwire-native-android/discussions">
19 |     <div class="docs-actions__icon docs-actions__icon--github" aria-hidden="true"></div>
20 |     Android: GitHub Discussions
21 |   </a>
22 | </div>
23 | 
24 | # Issues
25 | 
26 | If you'd like to report a Hotwire Native issue, please use GitHub Issues for each platform:
27 | 
28 | <div class="docs-actions">
29 |   <a class="docs-actions__item" href="https://github.com/hotwired/hotwire-native-ios/issues">
30 |     <div class="docs-actions__icon docs-actions__icon--github" aria-hidden="true"></div>
31 |     iOS: GitHub Issues
32 |   </a>
33 |   
34 |   <a class="docs-actions__item" href="https://github.com/hotwired/hotwire-native-android/issues">
35 |     <div class="docs-actions__icon docs-actions__icon--github" aria-hidden="true"></div>
36 |     Android: GitHub Issues
37 |   </a>
38 | </div>


--------------------------------------------------------------------------------
/_source/_includes/navigation.html:
--------------------------------------------------------------------------------
 1 | <a class="nav-logo" href="/" aria-label="Hotwire Native">
 2 |   {% include svg/hotwire-native-logo.svg %}
 3 | </a>
 4 | 
 5 | <input type="checkbox" id="hamburger" class="nav-checkbox"/>
 6 | <label class="nav-mobile-button" for="hamburger"><span></span> Menu</label>
 7 | 
 8 | <nav class="nav">
 9 | 
10 |   <label class="nav-mobile-button nav-mobile-button--close" for="hamburger"><span></span> close</label>
11 | 
12 |   <ul class="nav__list {% if type == "horizontal" %} nav__list--horizontal{% endif %}">
13 |     <li>
14 |       <a class="nav__list-link{% if section_title == "Overview" %} active{% endif %}" href="/overview/how-it-works">Overview</a>
15 | 
16 |       {% include section-nav.html, section: "overview" %}
17 |     </li>
18 |     <li>
19 |       <a class="nav__list-link{% if section_title == "iOS" %} active{% endif %}" href="/ios/getting-started">iOS</a>
20 | 
21 |       {% include section-nav.html, section: "ios" %}
22 |     </li>
23 |     <li>
24 |       <a class="nav__list-link{% if section_title == "Android" %} active{% endif %}" href="/android/getting-started">Android</a>
25 | 
26 |       {% include section-nav.html, section: "android" %}
27 |     </li>
28 |     <li>
29 |       <a class="nav__list-link{% if section_title == "Reference" %} active{% endif %}" href="/reference/navigation">Reference</a>
30 | 
31 |       {% include section-nav.html, section: "reference" %}
32 |     </li>
33 |     <li>
34 |       <a class="nav__list-link{% if section_title == "Community" %} active{% endif %}" href="/community/discussions">Community</a>
35 | 
36 |       {% include section-nav.html, section: "community" %}
37 |     </li>
38 |   </ul>
39 | 
40 | </nav>
41 | 


--------------------------------------------------------------------------------
/_source/_includes/head.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |   <meta charset="utf-8">
 3 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4 | 
 5 |   <title>{{ site.title }}{% if section_title %} {{ section_title }}{% endif %}{% if title %}: {{ title }}{% endif %}</title>
 6 |   {% if description -%}
 7 |     <meta name="description" content="{{ description }}">
 8 |   {% endif -%}
 9 |   <link rel="canonical" href="{{ page.url | remove: "index.html" | remove: ".html" | prepend: site.url }}">
10 | 
11 |   <link rel="alternate icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
12 |   <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
13 |   <link rel="mask-icon" href="/assets/favicon.svg" color="#000000">
14 |   <link rel="apple-touch-icon" href="/assets/favicon-196x196.png">
15 | 
16 |   <link rel="preload" href="/assets/fonts/Bitter-Roman.woff2" as="font" type="font/woff2" crossorigin>
17 |   <link rel="preload" href="/assets/fonts/Bitter-Italic.woff2" as="font" type="font/woff2" crossorigin>
18 |   <link rel="preload" href="/assets/fonts/Jost-Roman.woff2" as="font" type="font/woff2" crossorigin>
19 |   <link rel="preload" href="/assets/fonts/Jost-Italic.woff2" as="font" type="font/woff2" crossorigin>
20 |   <link rel="preload" href="/assets/fonts/RobotoMono-Roman.woff2" as="font" type="font/woff2" crossorigin>
21 |   <link rel="preload" href="/assets/fonts/RobotoMono-Italic.woff2" as="font" type="font/woff2" crossorigin>
22 | 
23 |   <link rel="stylesheet" href="/assets/main.css">
24 |   <script src="/assets/main.js" type="module"></script>
25 | 
26 |   <script defer data-domain="native.hotwired.dev" src="https://plausible.io/js/script.js"></script>
27 | 
28 | </head>
29 | 


--------------------------------------------------------------------------------
/_source/overview/01_how_it_works.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /overview/how-it-works.html
 3 | order: 01
 4 | title: "How it Works"
 5 | description: "How Hotwire Native renders web content in a native app."
 6 | ---
 7 | 
 8 | # How it works
 9 | 
10 | Hotwire Native displays whatever HTML and CSS your server renders within a native shell and will react to intercepted link taps. This makes your mobile web content feel at home on Android and iOS by using standard, platform-specific navigation and animations.
11 | 
12 | <figure>
13 |   <img src="/assets/native-vs-web-ios.jpg" width="1200" alt="Native vs. web">
14 |   Content is all web. Navigation is all native.
15 | </figure>
16 | 
17 | Hotwire Native intercepts link taps and passes control off to a native adapter. This adapter makes sure the experience is seamless: it screenshots the current page before pushing (or presenting) new screens on the native stack with a default, platform-specific animation. It will then request the web content for this new screen and render it via the web view.
18 | 
19 | If the user navigates "back" to a previous screen Hotwire Native will use cached screenshots, and because we are using native navigation controls, interactive pop gestures work exactly as expected. Even the most tech-savvy users will have a hard time believing it's not a fully native app!
20 | 
21 | Yet, the core of Hotwire Native is still a web browser which makes adding new screens as straightforward as building new pages in your web app. Your Android and iOS clients see updates as soon as you deploy. All without new submissions to the app stores.
22 | 
23 | Hotwire Native's web-first approach means upgrading to native isn’t an all-or-nothing decision. You are free to choose specific screens or even specific *components* to write natively in Swift or Kotlin when you’re ready. It truly is progressive enhancement.
24 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_jump.scss:
--------------------------------------------------------------------------------
 1 | .jump {
 2 |   width: 100%;
 3 |   margin: 0;
 4 |   padding: 0 1em;
 5 |   color: $color-white;
 6 |   background-color: $color-black;
 7 |   display: flex;
 8 |   align-items: center;
 9 |   justify-content: center;
10 |   font-family: $sans-stack;
11 |   text-transform: uppercase;
12 |   font-style: italic;
13 | 
14 |   @include media(medium) {
15 |     justify-content: flex-start;
16 |   }
17 | }
18 | 
19 | .jump__list {
20 |   list-style-type: none;
21 |   display: flex;
22 |   align-items: center;
23 |   justify-content: center;
24 |   flex-wrap: wrap;
25 |   margin: 0;
26 |   padding: 0;
27 | 
28 |   li {
29 |     margin: 0;
30 |     padding: 0;
31 | 
32 |     &::after {
33 |       content: "/";
34 |       display: inline-block;
35 |       margin: 0 0.25em 0 0.125em;
36 |     }
37 | 
38 |     &:first-child::after {
39 |       content: ":";
40 |     }
41 |   }
42 | }
43 | 
44 | .jump__list-link {
45 |   display: inline-block;
46 |   margin: 0;
47 |   padding: 0.5em 0.125em;
48 |   color: $color-white;
49 |   font-weight: 500;
50 |   text-decoration: none;
51 | 
52 |   @include media(medium) {
53 |     padding: 0.125em;
54 |     font-size: $font-small;
55 |   }
56 | 
57 |   &:visited {
58 |     color: $color-white;
59 |   }
60 | 
61 |   &:hover {
62 |     color: $color-accent;
63 |   }
64 | }
65 | 
66 | .jump__list-link--hotwire {
67 |   font-weight: 700;
68 | }
69 | 
70 | .jump__list-link--active {
71 |   color: $color-brand !important;
72 |   text-decoration: none;
73 |   pointer-events: none;
74 | }
75 | 
76 | .jump__list-link--disabled {
77 |   opacity: 0.5;
78 |   text-decoration: none;
79 |   pointer-events: none;
80 | }
81 | 
82 | .jump__list-info {
83 |   @include media(small) {
84 |     clip: rect(1px, 1px, 1px, 1px);
85 |     position: absolute !important;
86 |     height: 1px;
87 |     width: 1px;
88 |     overflow: hidden;
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_grid.scss:
--------------------------------------------------------------------------------
 1 | .grid {
 2 |   display: grid;
 3 |   grid-template-columns: 1fr minmax(80vw, 100%) 1fr;
 4 |   align-items: start;
 5 |   column-gap: unquote("min(5vw, 4rem)");
 6 | 
 7 |   > .grid {
 8 |     grid-column: 1 / -1;
 9 |   }
10 | 
11 |   > *:not([class*="grid"]) {
12 |     grid-column: 2;
13 |   }
14 | 
15 |   @include media(medium) {
16 |     grid-template-columns: 1fr repeat(12, minmax(2rem, 100%)) 1fr;
17 |     column-gap: unquote("min(3vw, 5rem)");
18 | 
19 |     > *:not([class*="grid"]) {
20 |       grid-column: 4 / span 8;
21 |     }
22 |   }
23 | 
24 |   @include media(x-large) {
25 |     grid-template-columns: 1fr repeat(12, 7.5rem) 1fr;
26 |     column-gap: 4rem;
27 |   }
28 | }
29 | 
30 | .grid__item {
31 |   grid-column-start: 2;
32 | 
33 |   &--bleed-left { grid-column: 1 / span 2; }
34 |   &--bleed-right { grid-column-end: -1; }
35 |   &--bleed-full { grid-column: 1 / -1; }
36 | 
37 |   @include media(medium) {
38 |     &--span-3 { grid-column-end: span 3; }
39 |     &--span-4 { grid-column-end: span 4; }
40 |     &--span-5 { grid-column-end: span 5; }
41 |     &--span-6 { grid-column-end: span 6; }
42 |     &--span-7 { grid-column-end: span 7; }
43 |     &--span-8 { grid-column-end: span 8; }
44 |     &--span-9 { grid-column-end: span 9; }
45 |     &--span-10 { grid-column-end: span 10; }
46 |     &--span-11 { grid-column-end: span 11; }
47 |     &--span-12 { grid-column: 2 / span 12; }
48 | 
49 |     &--start-1 { grid-column-start: 2; }
50 |     &--start-2 { grid-column-start: 3; }
51 |     &--start-3 { grid-column-start: 4; }
52 |     &--start-4 { grid-column-start: 5; }
53 |     &--start-5 { grid-column-start: 6; }
54 |     &--start-6 { grid-column-start: 7; }
55 |     &--start-7 { grid-column-start: 8; }
56 |     &--start-8 { grid-column-start: 9; }
57 |     &--start-9 { grid-column-start: 10; }
58 |     &--start-10 { grid-column-start: 11; }
59 |     &--start-auto { grid-column-start: auto; }
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/_source/_assets/css/base/_mixins.scss:
--------------------------------------------------------------------------------
 1 | $column-width: 30em;
 2 | 
 3 | $serif-stack: 'Bitter', serif;
 4 | $sans-stack: 'Jost', sans-serif;
 5 | $mono-stack: 'RobotoMono', monospace;
 6 | 
 7 | $font-base-small: 1.6em;
 8 | $font-base-medium: calc(1em + 0.55vw);
 9 | $font-base-large: 1.8em;
10 | 
11 | $font-xxx-small: 0.55em;
12 | $font-xx-small: 0.65em;
13 | $font-x-small: 0.75em;
14 | $font-small: 0.85em;
15 | $font-medium: 1em;
16 | $font-large: 1.125em;
17 | $font-x-large: 1.25em;
18 | $font-xx-large: 1.75em;
19 | $font-xxx-large: 2.25em;
20 | $font-xxxx-large: 3em;
21 | 
22 | $color-white: #FFF;
23 | $color-black: #000;
24 | $color-gray: #666;
25 | $color-accent: #FFE801;
26 | $color-tint: #FBF7F0;
27 | $color-brand-turbo: #5CD8E5;
28 | $color-brand-stimulus: #77E8B9;
29 | $color-brand-strada: #E76057;
30 | $color-brand-native: #C18BF4;
31 | $color-brand: $color-brand-native;
32 | 
33 | @mixin border-box {
34 |   -webkit-box-sizing: border-box;
35 |      -moz-box-sizing: border-box;
36 |           box-sizing: border-box;
37 | }
38 | 
39 | @mixin transform($attrs) {
40 |   -webkit-transform: $attrs;
41 |      -moz-transform: $attrs;
42 |       -ms-transform: $attrs;
43 |           transform: $attrs;
44 | }
45 | 
46 | @mixin transition($attrs...) {
47 |   -webkit-transition: $attrs;
48 |      -moz-transition: $attrs;
49 |       -ms-transition: $attrs;
50 |           transition: $attrs;
51 | }
52 | 
53 | @mixin clearfix {
54 |   zoom: 1;
55 | 
56 |   &:after {
57 |     content: ".";
58 |     display: block;
59 |     height: 0;
60 |     clear: both;
61 |     visibility: hidden;
62 |   }
63 | }
64 | 
65 | .clearfix { @include clearfix; }
66 | 
67 | @mixin media($query) {
68 |   @if $query == small {
69 |     @media(max-width: 39.99em) { @content; }
70 |   } @else if $query == medium {
71 |     @media(min-width: 40em) { @content; }
72 |   } @else if $query == large {
73 |     @media(min-width: 66em) { @content; }
74 |   } @else if $query == x-large {
75 |     @media(min-width: 90em) { @content; }
76 |   } @else {
77 |     @media(#{$query}) { @content; }
78 |   }
79 | }
80 | 
81 | @mixin retinafy($image, $width, $height) {
82 |   @media(min--moz-device-pixel-ratio: 1.3),
83 |         (-o-min-device-pixel-ratio: 2.6/2),
84 |         (-webkit-min-device-pixel-ratio: 1.3),
85 |         (min-device-pixel-ratio: 1.3),
86 |         (min-resolution: 1.3dppx) {
87 |     background-image: url($image);
88 |     background-size: $width $height;
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/_source/reference/bridge_installation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /reference/bridge-installation.html
 3 | order: 03
 4 | title: "Bridge Installation"
 5 | description: "Install Hotwire Native Bridge in your web app."
 6 | ---
 7 | 
 8 | # Installation
 9 | 
10 | To build Bridge Components in your native app, you'll need to first install the [Hotwire Native Bridge](https://github.com/hotwired/hotwire-native-bridge) javascript library in your web app. Hotwire Native Bridge can either be referenced in compiled form via the distributable script directly in the `<head>` of your application, or through npm via a bundler like esbuild.
11 | 
12 | ## Prerequisite: Install Stimulus
13 | 
14 | Bridge Components in your web app leverage [Stimulus](https://stimulus.hotwired.dev) and the core `BridgeComponent` class is an extension of a Stimulus `Controller`. You must have Stimulus installed in your web app before installing Hotwire Native Bridge. See the [Stimulus installation instructions](https://stimulus.hotwired.dev/handbook/installing).
15 | 
16 | ## In Compiled Form
17 | 
18 | If you're using [importmap-rails](https://github.com/rails/importmap-rails) you just need to pin Stimulus and Hotwire Native Bridge in your config/importmap.rb file:
19 | 
20 | ```sh
21 | ./bin/importmap pin @hotwired/stimulus @hotwired/hotwire-native-bridge
22 | ```
23 | 
24 | Alternatively, you can manually define importmap entries for both Hotwire Native Bridge and Stimulus, pointing to the latest versions of each:
25 | 
26 | ```html
27 | <head>
28 |   <script type="importmap">
29 |     {
30 |       "imports": {
31 |         "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@latest/dist/stimulus.min.js",
32 |         "@hotwired/hotwire-native-bridge": "https://cdn.jsdelivr.net/npm/@hotwired/hotwire-native-bridge@latest/dist/hotwire-native-bridge.min.js"
33 |       }
34 |     }
35 |   </script>
36 | </head>
37 | ```
38 | 
39 | Then you can import Hotwire Native Bridge anywhere in your application code:
40 | 
41 | ```js
42 | import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
43 | 
44 | class BridgeTest extends BridgeComponent {
45 |   // ...
46 | }
47 | ```
48 | 
49 | ## As An npm Package
50 | 
51 | You can install Hotwire Native Bridge [from npm](https://www.npmjs.com/package/@hotwired/hotwire-native-bridge) via the `npm` or `yarn` packaging tools and use a JavaScript bundler, like webpack or esbuild, to import it in your application.
52 | 
53 | ```javascript
54 | import "@hotwired/hotwire-native-bridge"
55 | ```
56 | 
57 | 
58 | 


--------------------------------------------------------------------------------
/_source/android/05_configuration.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /android/configuration.html
 3 | order: 05
 4 | title: "Configuration"
 5 | description: "How to customize a Hotwire Native Android app."
 6 | ---
 7 | 
 8 | # Configuration
 9 | 
10 | ## Create an Application Instance
11 | 
12 | Customize your app by configuring options before your `HotwireActivity` instance is created by the system. We recommend using an `Application` instance to place the configuration code.
13 | 
14 | 
15 | ```kotlin
16 | class MyApplication : Application() {
17 |     override fun onCreate() {
18 |         super.onCreate()
19 | 
20 |         // Set configuration options
21 |     }
22 | }
23 | ```
24 | 
25 | To ensure this invoked when the app starts, add the name of your `Application` instance to `AndroidManifest.xml` via the `android:name` property on the `<application>` node.
26 | p
27 | 
28 | ```xml
29 | <application android:name=".MyApplication">
30 |     <!-- ... -->
31 | </application>
32 | ```
33 | 
34 | ## Options
35 | 
36 | Enable debugging in debug builds:
37 | 
38 | ```kotlin
39 | Hotwire.config.debugLoggingEnabled = BuildConfig.DEBUG
40 | Hotwire.config.webViewDebuggingEnabled = BuildConfig.DEBUG
41 | ```
42 | 
43 | Set the default fragment destination:
44 | 
45 | ```kotlin
46 | Hotwire.defaultFragmentDestination = HotwireWebFragment::class
47 | ```
48 | 
49 | Register fragment destinations:
50 | 
51 | ```kotlin
52 | Hotwire.registerFragmentDestinations(
53 |     HotwireWebFragment::class, // Don't forget to register this for regular destinations
54 |     MyCustomFragment::class
55 | )
56 | ```
57 | 
58 | Register bridge components, where the first argument is the component name to match in Stimulus:
59 | 
60 | ```kotlin
61 | Hotwire.registerBridgeComponents(
62 |     BridgeComponentFactory("my-custom", ::MyCustomComponent)
63 | )
64 | ```
65 | 
66 | Set the JSON converter used for bridge components:
67 | 
68 | ```kotlin
69 | Hotwire.config.jsonConverter = KotlinXJsonConverter()
70 | ```
71 | 
72 | Set a custom user agent application prefix for every `WebView` instance. The library will automatically append a substring to your prefix which includes:
73 | * - `"Hotwire Native Android; Turbo Native Android;"` - for `hotwire_native_app?` on your [Rails server](https://github.com/hotwired/turbo-rails/blob/1aa7ba9d38dee1e1b4078a74404131122b907176/app/controllers/turbo/native/navigation.rb#L14)
74 | * - `"bridge-components: [your bridge components];"`
75 | * - The `WebView`'s default Chromium user agent string
76 | 
77 | ```kotlin
78 | Hotwire.config.applicationUserAgentPrefix = "My Application;"
79 | ```
80 | 


--------------------------------------------------------------------------------
/_source/overview/03_path_configuration.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /overview/path-configuration.html
 3 | order: 03
 4 | title: "Path Configuration"
 5 | description: "Customize app behavior remotely via the path configuration."
 6 | ---
 7 | 
 8 | # Path Configuration
 9 | 
10 | Advanced navigation in Hotwire Native apps can be configured via a JSON file called the *path configuration*. The *path configuration* is broken down into two top-level objects: `settings` and `rules`. An empty path configuration requires both keys, as follows:
11 | 
12 | ```json
13 | {
14 |   "settings": {},
15 |   "rules": []
16 | }
17 | ```
18 | 
19 | `settings` contains app-level configuration items. These settings can be read when the *path configuration* is first loaded; common use cases include feature-flags or custom app information that you want to control remotely.
20 | 
21 | `rules` contains entries that define navigation within the Hotwire app. Each entry contains regex patterns used to identify URLs and then apply the specified behavior on navigation. In the following example, all URLs matching the regex `/new$` will open up in a modal screen, rather than being pushed onto the default navigation stack:
22 | 
23 | ```json
24 | {
25 |   "settings": {
26 |     "feature_flags": [
27 |         {
28 |           "name": "new_onboarding_flow",
29 |           "enabled": true
30 |         }
31 |       ]
32 |   },
33 |   "rules": [
34 |     {
35 |       "patterns": [
36 |         "/new$"
37 |       ],
38 |       "properties": {
39 |         "context": "modal"
40 |       }
41 |     },
42 |   ]
43 | }
44 | ```
45 | 
46 | It's recommended that the *path configuration* file exists both locally (bundled with your app's binary) and remotely (on your server). The local *path configuration* ensures a smooth initial launch, while the remote *path configuration* unlocks a powerful perk: you can change the app's behavior from your server without needing to publish a new app update.
47 | 
48 | ## Versioning
49 | 
50 | It is recommended to version your path configuration file names and use a unique resource for each OS platform, like so:
51 | 
52 | * `/configurations/ios_v1.json`
53 | * `/configurations/android_v1.json`
54 | 
55 | This allows forward and backward compatibility with new app versions that you release. If you make breaking changes in a new version of your app, point to `*_v2.json` for the new build. Keep old versions available on your server so older clients can continue to work properly until the user's app is updated on their device.
56 | 
57 | See the [iOS](/ios/path-configuration)- and [Android](/android/path-configuration)-specific pages on path configuration for more details and examples.
58 | 
59 | The [path configuration reference](/reference/path-configuration) provides more information including all the behavior Hotwire Native provides out of the box.
60 | 


--------------------------------------------------------------------------------
/_source/android/02_path_configuration.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /android/path-configuration.html
 3 | order: 02
 4 | title: "Path Configuration"
 5 | description: "Customize Android app behavior via the path configuration."
 6 | ---
 7 | 
 8 | # Path Configuration
 9 | 
10 | Building on the [overview of path configuration](/overview/path-configuration), here's an example for an Android app.
11 | 
12 | ```json
13 | {
14 |   "settings": {},
15 |   "rules": [
16 |     {
17 |       "patterns": [
18 |         ".*"
19 |       ],
20 |       "properties": {
21 |         "context": "default",
22 |         "uri": "hotwire://fragment/web",
23 |         "pull_to_refresh_enabled": true
24 |       }
25 |     },
26 |     {
27 |       "patterns": [
28 |         "/new$"
29 |       ],
30 |       "properties": {
31 |         "context": "modal",
32 |         "uri": "hotwire://fragment/web/modal/sheet",
33 |         "pull_to_refresh_enabled": false
34 |       }
35 |     }
36 |   ]
37 | }
38 | ```
39 | 
40 | This configuration does two things:
41 | 
42 | 1. Sets *all* URL path patterns to render the default fragment with a `hotwire://fragment/web` URI with pull-to-refresh enabled.
43 | 1. Overrides URL path patterns *ending* in `/new` to be presented as a modal with pull-to-refresh disabled. It is helpful to disable pull-to-refresh in modals so it doesn't interfere with the dismiss gesture or clear form data that a user may have entered.
44 | 
45 | ## Location
46 | 
47 | Path configuration has a `location` that can be loaded from your app. You can configure the `location` to be a locally bundled file, a remote file available from your server, or both. We recommend always including a bundled version even when loading remotely, so it will be available in case your app is offline.
48 | 
49 | ```kotlin
50 | Hotwire.loadPathConfiguration(
51 |     context = this,
52 |     location = PathConfiguration.Location(
53 |         assetFilePath = "json/configuration.json",
54 |         remoteFileUrl = "https://example.com/configurations/android_v1.json"
55 |     )
56 | )
57 | ```
58 | 
59 | If you provide both a file and a server location, the path configuration will be loaded asynchronously in the following order:
60 | 1. The local file bundled with your app.
61 | 2. A locally cached copy of the server configuration (if a successful download occurred on a previous app launch).
62 | 3. A newly downloaded copy of the server configuration. (Once this has downloaded successfully, it will be cached and used in step 2 on the next app launch.) 
63 | 
64 | Providing a bundled file and a server location will cause the path configuration to immediately load from the bundled version and – if it exists – a cached version of the server file. Then it will begin downloading the server file. Once the server file is successfully downloaded, it is loaded and cached for further use.
65 | 
66 | The [path configuration reference](/reference/path-configuration) provides more information, including all the behavior Hotwire Native provides out of the box.
67 | 


--------------------------------------------------------------------------------
/_source/overview/02_basic_navigation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /overview/basic-navigation.html
 3 | order: 02
 4 | title: "Basic Navigation"
 5 | description: "How to navigate between pages in Hotwire Native."
 6 | ---
 7 | 
 8 | # Basic Navigation
 9 | 
10 | Being a web-first framework means Hotwire Native adapts to your web content and how users navigate between screens: via links. Like the web, every page can link to another. Hotwire Native intercepts link taps and hands them over to its native counterpart which presents them natively – with platform-specific animations.
11 | 
12 | When a user taps on a link, here's what's happening:
13 | 
14 | 1. A new screen is pushed onto the navigation stack with a native animation.
15 | 1. A spinner appears indicating the page is loading.
16 | 1. The page contents render inside the web view.
17 | 
18 | <figure>
19 |   <img src="/assets/basic-navigation.png" width="800" alt="Basic navigation">
20 |   Hotwire Native coordinates web-to-native navigation including gestures and animations.
21 | </figure>
22 | 
23 | ## Replacing Screens
24 | 
25 | By default, every tapped link _pushes_ a new screen onto the native stack. Hotwire Native uses platform-specific animations and native components so interactions feel smooth. To users, it feels like a native app because it _is_ a native app!
26 | 
27 | The framework also applies a few sane defaults. Navigating to the _current_ page's URL path (again) will _replace_ the screen on the stack. You can also manually trigger a _replace_ action by adding `data-turbo-action="replace"` to links and forms. This will cause the visited page to replace the current screen (rather than pushing a new one) and load the new contents.
28 | 
29 | ## Caching
30 | 
31 |  Navigating to the _previous_ page's URL path will _pop_ the screen off the stack back to the previous screen. This animation uses a cached screenshot, further blending the gap to native screens. On iOS, the interactive pop gesture – dragging your finger from the far left of the screen – is also supported and feels great.
32 | 
33 | ## External Links
34 | 
35 | Note that if the URL of a tapped link is _not_ on the same domain as the current page it is considered _external_. External links are not routed through Hotwire Native. They instead open via an in-app web browser. iOS uses an [`SFSafariViewController`](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller) and Android uses [Custom Tabs](https://developer.chrome.com/docs/android/custom-tabs).
36 | 
37 | See the <a href="/reference/navigation#route-decision-handlers">Route Decision Handler</a> documentation to learn how urls are routed and how to customize the default behavior.
38 | 
39 | ## Advanced Navigation
40 | 
41 | Hotwire Native supports a bunch of other navigation patterns like popping the entire stack and manually refreshing the current page. But individually decorating each link would create a maintenance nightmare.
42 | 
43 | So we've abstracted these _rules_ into something called the [Path Configuration](/overview/path-configuration).
44 | 


--------------------------------------------------------------------------------
/_source/_assets/images/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M60 50.852C60 50.3122 59.7835 49.7936 59.389 49.425C55.084 45.4031 49.8687 42.2528 44.0501 40.288C43.5744 40.1274 43.1945 40.7059 43.504 41.1013C47.458 46.1537 49.9206 52.7203 51.4118 59.2141C51.5171 59.6724 51.923 60.0001 52.3932 60.0001H58C59.1046 60.0001 60 59.1046 60 58.0001V50.852Z" fill="black"/>
3 | <path d="M43.9965 60C44.6129 60 45.083 59.4476 44.9753 58.8407C43.6865 51.578 41.4054 44.5095 37.5067 39.1855C37.2072 38.7766 36.7538 38.5096 36.252 38.4385C34.2142 38.1497 32.1267 38 30 38C27.8733 38 25.7858 38.1497 23.748 38.4385C23.2462 38.5096 22.7928 38.7766 22.4933 39.1855C18.5946 44.5095 16.3135 51.578 15.0247 58.8407C14.917 59.4476 15.3871 60 16.0035 60H43.9965Z" fill="black"/>
4 | <path d="M8.5882 59.2141C8.48295 59.6724 8.07703 60.0001 7.60682 60.0001H2C0.895432 60.0001 0 59.1046 0 58.0001V50.852C0 50.3122 0.216551 49.7936 0.61102 49.425C4.91604 45.4031 10.1313 42.2528 15.9499 40.288C16.4256 40.1274 16.8055 40.7059 16.4961 41.1013C12.542 46.1537 10.0795 52.7203 8.5882 59.2141Z" fill="black"/>
5 | <path d="M37.9182 30.6004C38.2232 30.6471 38.5 30.4124 38.5 30.1038V20C38.5 19.1716 37.8284 18.5 37 18.5H23C22.1716 18.5 21.5 19.1716 21.5 20V30.1038C21.5 30.4124 21.7768 30.6471 22.0818 30.6004C24.6631 30.2052 27.308 30 30 30C32.692 30 35.3369 30.2052 37.9182 30.6004Z" fill="black"/>
6 | <path d="M27 0C27.5523 0 28 0.447715 28 1V5C28 6.10457 28.8954 7 30 7C31.1046 7 32 6.10457 32 5V1C32 0.447715 32.4477 0 33 0H42.8723C43.274 0 43.5117 0.44992 43.2853 0.781811L39.348 6.55227C38.7254 7.46467 38.9604 8.70901 39.8728 9.33157C40.7852 9.95413 42.0295 9.71916 42.6521 8.80675L48.2145 0.654568C48.494 0.245008 48.9578 0 49.4536 0H58C59.1046 0 60 0.895431 60 2V4.72811C60 5.07166 59.8236 5.39117 59.5329 5.57426L47.2546 13.3076C46.32 13.8963 46.0395 15.1312 46.6282 16.0658C47.2168 17.0004 48.4517 17.2809 49.3864 16.6922L59.2335 10.4901C59.5665 10.2804 60 10.5197 60 10.9132V22C60 22.5523 59.5523 23 59 23H51C49.8954 23 49 23.8954 49 25C49 26.1046 49.8954 27 51 27H59C59.5523 27 60 27.4477 60 28V37.6469C60 38.4621 59.0732 38.9399 58.3937 38.4894C54.1069 35.6473 49.3393 33.4325 44.2389 31.9787C43.8039 31.8548 43.5 31.4598 43.5 31.0075V20C43.5 16.4101 40.5899 13.5 37 13.5H23C19.4101 13.5 16.5 16.4101 16.5 20V31.0075C16.5 31.4598 16.1961 31.8548 15.7611 31.9787C10.6607 33.4325 5.89308 35.6473 1.60631 38.4894C0.926837 38.9399 0 38.4621 0 37.6469V28C0 27.4477 0.447715 27 1 27H9C10.1046 27 11 26.1046 11 25C11 23.8954 10.1046 23 9 23H1C0.447715 23 0 22.5523 0 22V10.9133C0 10.5198 0.43351 10.2805 0.766469 10.4902L10.6136 16.6923C11.5483 17.281 12.7832 17.0005 13.3718 16.0659C13.9605 15.1312 13.68 13.8964 12.7454 13.3077L0.467061 5.57434C0.17636 5.39125 0 5.07175 0 4.72819V2C0 0.895432 0.895431 0 2 0H10.5465C11.0423 0 11.5061 0.245008 11.7855 0.654568L17.3479 8.80675C17.9705 9.71916 19.2148 9.95413 20.1272 9.33157C21.0397 8.70901 21.2746 7.46467 20.6521 6.55226L16.7148 0.781811C16.4883 0.44992 16.726 0 17.1278 0H27Z" fill="black"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/_source/_assets/images/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M60 50.852C60 50.3122 59.7835 49.7936 59.389 49.425C55.084 45.4031 49.8687 42.2528 44.0501 40.288C43.5744 40.1274 43.1945 40.7059 43.504 41.1013C47.458 46.1537 49.9206 52.7203 51.4118 59.2141C51.5171 59.6724 51.923 60.0001 52.3932 60.0001H58C59.1046 60.0001 60 59.1046 60 58.0001V50.852Z" fill="black"/>
3 | <path d="M43.9965 60C44.6129 60 45.083 59.4476 44.9753 58.8407C43.6865 51.578 41.4054 44.5095 37.5067 39.1855C37.2072 38.7766 36.7538 38.5096 36.252 38.4385C34.2142 38.1497 32.1267 38 30 38C27.8733 38 25.7858 38.1497 23.748 38.4385C23.2462 38.5096 22.7928 38.7766 22.4933 39.1855C18.5946 44.5095 16.3135 51.578 15.0247 58.8407C14.917 59.4476 15.3871 60 16.0035 60H43.9965Z" fill="black"/>
4 | <path d="M8.5882 59.2141C8.48295 59.6724 8.07703 60.0001 7.60682 60.0001H2C0.895432 60.0001 0 59.1046 0 58.0001V50.852C0 50.3122 0.216551 49.7936 0.61102 49.425C4.91604 45.4031 10.1313 42.2528 15.9499 40.288C16.4256 40.1274 16.8055 40.7059 16.4961 41.1013C12.542 46.1537 10.0795 52.7203 8.5882 59.2141Z" fill="black"/>
5 | <path d="M37.9182 30.6004C38.2232 30.6471 38.5 30.4124 38.5 30.1038V20C38.5 19.1716 37.8284 18.5 37 18.5H23C22.1716 18.5 21.5 19.1716 21.5 20V30.1038C21.5 30.4124 21.7768 30.6471 22.0818 30.6004C24.6631 30.2052 27.308 30 30 30C32.692 30 35.3369 30.2052 37.9182 30.6004Z" fill="black"/>
6 | <path d="M27 0C27.5523 0 28 0.447715 28 1V5C28 6.10457 28.8954 7 30 7C31.1046 7 32 6.10457 32 5V1C32 0.447715 32.4477 0 33 0H42.8723C43.274 0 43.5117 0.44992 43.2853 0.781811L39.348 6.55227C38.7254 7.46467 38.9604 8.70901 39.8728 9.33157C40.7852 9.95413 42.0295 9.71916 42.6521 8.80675L48.2145 0.654568C48.494 0.245008 48.9578 0 49.4536 0H58C59.1046 0 60 0.895431 60 2V4.72811C60 5.07166 59.8236 5.39117 59.5329 5.57426L47.2546 13.3076C46.32 13.8963 46.0395 15.1312 46.6282 16.0658C47.2168 17.0004 48.4517 17.2809 49.3864 16.6922L59.2335 10.4901C59.5665 10.2804 60 10.5197 60 10.9132V22C60 22.5523 59.5523 23 59 23H51C49.8954 23 49 23.8954 49 25C49 26.1046 49.8954 27 51 27H59C59.5523 27 60 27.4477 60 28V37.6469C60 38.4621 59.0732 38.9399 58.3937 38.4894C54.1069 35.6473 49.3393 33.4325 44.2389 31.9787C43.8039 31.8548 43.5 31.4598 43.5 31.0075V20C43.5 16.4101 40.5899 13.5 37 13.5H23C19.4101 13.5 16.5 16.4101 16.5 20V31.0075C16.5 31.4598 16.1961 31.8548 15.7611 31.9787C10.6607 33.4325 5.89308 35.6473 1.60631 38.4894C0.926837 38.9399 0 38.4621 0 37.6469V28C0 27.4477 0.447715 27 1 27H9C10.1046 27 11 26.1046 11 25C11 23.8954 10.1046 23 9 23H1C0.447715 23 0 22.5523 0 22V10.9133C0 10.5198 0.43351 10.2805 0.766469 10.4902L10.6136 16.6923C11.5483 17.281 12.7832 17.0005 13.3718 16.0659C13.9605 15.1312 13.68 13.8964 12.7454 13.3077L0.467061 5.57434C0.17636 5.39125 0 5.07175 0 4.72819V2C0 0.895432 0.895431 0 2 0H10.5465C11.0423 0 11.5061 0.245008 11.7855 0.654568L17.3479 8.80675C17.9705 9.71916 19.2148 9.95413 20.1272 9.33157C21.0397 8.70901 21.2746 7.46467 20.6521 6.55226L16.7148 0.781811C16.4883 0.44992 16.726 0 17.1278 0H27Z" fill="black"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/_source/overview/04_bridge_components.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /overview/bridge-components.html
 3 | order: 04
 4 | title: "Bridge Components"
 5 | description: "Build HTML-driven native bridge components."
 6 | ---
 7 | 
 8 | # Bridge Components
 9 | 
10 | Hotwire Native apps seamlessly display your mobile web content within a native container with fully native animations and behaviors. If we were to use this siloed web content approach exclusively, we'd quickly run into a major limitation: there’s no way for the native app to know what’s happening within the web view and adapt to the content that it’s displaying.
11 | 
12 | To overcome this gap in communication, your app can use Bridge Components.
13 | 
14 | *Note: Bridge Components were formerly called [Strada](https://dev.37signals.com/announcing-strada/) components and work exactly as they did before. However, the framework is now included out-of-the-box in Hotwire Native and doesn't require additional dependencies or integrations in your app*.
15 | 
16 | A Bridge Component is made up of two parts:
17 | - A __web component__ controller that leverages [Stimulus](https://stimulus.hotwired.dev/)
18 | - A __native component__ counterpart built in Swift or Kotlin.
19 | 
20 | Your web code and your native app code communicate through Hotwire Native's component-based framework that abstracts away the complexity of communicating with JavaScript code in a web view and native code in your app.
21 | 
22 | <figure>
23 |     <img src="/assets/bridge-ios-button.png" width="500" alt="Native button component on iOS">
24 |     "Profile" is declared by the web component and displayed natively by the native component.
25 | </figure>
26 | 
27 | This component-based framework allows some web features to break out of the web view container and drive native features — whether it’s displaying native buttons in the top app bar, displaying native menu sheets, or calling native platform APIs. Bridge components enable you to do all of this and give you the flexibility to build components that are specific to your app’s needs.
28 | 
29 | Example components include native buttons to submit forms, web dialogs rendered as a `UIActionSheet` on iOS or `BottomSheetDialog` on Android, and more. Check out the [iOS](/ios/bridge-components)- and [Android](/android/bridge-components)-specific pages for information and code snippets. And there's a guide for [installing the web library](/reference/bridge-installation) on your server.
30 | 
31 | <figure>
32 |     <img src="/assets/bridge-examples.png" width="600" alt="Web and Native Components">
33 |     Web content displayed natively as your app needs it.
34 | </figure>
35 | 
36 | Being web-first means that _you_ get to decide which parts of your web-app become native. You can choose to quickly ship a purely web screen and then progressively enhance specific features natively. Sometimes a feature requires a more responsive interaction and Bridge Components are the perfect solution. And other times a screen requires a fully native implementation for a high fidelity experience.
37 | 
38 | If that's the case, integrating fully native code is easy too.
39 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_docs.scss:
--------------------------------------------------------------------------------
  1 | .docs {
  2 |   position: relative;
  3 | }
  4 | 
  5 | .docs__content {
  6 |   grid-column-start: 2;
  7 | 
  8 |   @include media(medium) {
  9 |     grid-column: 6 / span 8;
 10 |   }
 11 | 
 12 |   @include media(large) {
 13 |     grid-column: 5 / span 8;
 14 |   }
 15 | 
 16 |   h1, h2, h3, h4, h5, h6 {
 17 |     text-align: left;
 18 |   }
 19 | 
 20 |   h1 {
 21 |     margin-top: 1.3em;
 22 |   }
 23 | 
 24 |   p > img:not([class]) {
 25 |     min-width: 15em;
 26 |   }
 27 | 
 28 |   figure {
 29 |     margin-bottom: 2em;
 30 |     color: $color-gray;
 31 |     text-align: center;
 32 | 
 33 |     img {
 34 |       display: block;
 35 |       margin-left: auto;
 36 |       margin-right: auto;
 37 |     }
 38 |   }
 39 | 
 40 |   img {
 41 |     max-width: 100%;
 42 |     height: auto;
 43 |     margin-bottom: 0.5em;
 44 |   }
 45 | 
 46 |   img.border {
 47 |     border: 0.5px solid rgba(0, 0, 0, 0.1);
 48 |     border-radius: 0.5em;
 49 |   }
 50 | }
 51 | 
 52 | .docs__index {
 53 |   grid-column-start: 2;
 54 |   margin: 0;
 55 |   text-align: left;
 56 |   overflow-y: auto;
 57 | 
 58 |   @include media(small) {
 59 |     display: flex;
 60 |     justify-content: space-between;
 61 |     align-items: center;
 62 |     padding: 1em 0;
 63 |   }
 64 | 
 65 |   @include media(medium) {
 66 |     grid-column: 2 / span 4;
 67 |     position: -webkit-sticky;
 68 |     position: sticky;
 69 |     top: 0;
 70 |     bottom: 0;
 71 |     min-height: 100vh;
 72 |     padding: 3.25em 0 0 0;
 73 |   }
 74 | 
 75 |   @include media(large) {
 76 |     grid-column: 2 / span 3;
 77 |   }
 78 | }
 79 | 
 80 | .docs__footer {
 81 |   margin: 4em 0 3em 0;
 82 | }
 83 | 
 84 | .docs__screenshot {
 85 |   max-width: 100%;
 86 |   height: auto;
 87 |   border: 0.2rem solid $color-white;
 88 |   border-radius: 5px;
 89 |   box-shadow: 0 0 1em rgba($color-black, 0.1);
 90 | }
 91 | 
 92 | .docs-actions {
 93 |   grid-column: 2/3;
 94 |   margin: 0;
 95 | 
 96 |   @include media(medium) {
 97 |     display: flex;
 98 |     justify-content: space-between;
 99 |     align-items: stretch;
100 |   }
101 | }
102 | 
103 | .docs-actions__item {
104 |   display: block;
105 |   margin-bottom: 1em;
106 |   padding: 1.5em 1em;
107 |   font-family: $sans-stack;
108 |   font-style: italic;
109 |   text-align: center;
110 |   line-height: 1.25;
111 |   background-color: $color-white;
112 |   box-shadow: 0 0 2em rgba($color-black, 0.075);
113 |   border-radius: 0.5em;
114 | 
115 |   @include media(small) {
116 |     max-width: 20em;
117 |     margin-left: auto;
118 |     margin-right: auto;
119 |   }
120 | 
121 |   @include media(medium) {
122 |     width: 49%;
123 |     margin-bottom: 0;
124 |   }
125 | }
126 | 
127 | .docs-actions__icon {
128 |   display: block;
129 |   width: 3.75em;
130 |   height: 3.75em;
131 |   margin: 0 auto 1em auto;
132 |   background-color: $color-brand;
133 | 
134 |   .docs-actions__item:hover & {
135 |     background-color: $color-accent;
136 |   }
137 | }
138 | 
139 | .docs-actions__icon--github {
140 |   -webkit-mask: url('/assets/icon-github.svg') center / 100% no-repeat;
141 |   mask: url('/assets/icon-github.svg') center / 100% no-repeat;
142 | }
143 | 


--------------------------------------------------------------------------------
/_source/_assets/css/base/_utilities.scss:
--------------------------------------------------------------------------------
 1 | .color-white { color: $color-white !important; }
 2 | .color-black { color: $color-black !important; }
 3 | .color-accent { color: $color-accent !important; }
 4 | .color-tint { color: $color-tint !important; }
 5 | .color-brand-turbo { color: $color-brand-turbo !important; }
 6 | .color-brand-stimulus { color: $color-brand-stimulus !important; }
 7 | .color-brand-strada { color: $color-brand-strada !important; }
 8 | .color-brand-native { color: $color-brand-native !important; }
 9 | .color-brand { color: $color-brand !important; }
10 | 
11 | .hover\:color-white:hover { color: $color-white !important; }
12 | .hover\:color-black:hover { color: $color-black !important; }
13 | .hover\:color-accent:hover { color: $color-accent !important; }
14 | .hover\:color-tint:hover { color: $color-tint !important; }
15 | .hover\:color-brand-turbo:hover { color: $color-brand-turbo !important; }
16 | .hover\:color-brand-stimulus:hover { color: $color-brand-stimulus !important; }
17 | .hover\:color-brand-strada:hover { color: $color-brand-strada !important; }
18 | .hover\:color-brand-native:hover { color: $color-brand-native !important; }
19 | .hover\:color-brand:hover { color: $color-brand !important; }
20 | 
21 | .bg-white { background-color: $color-white !important; }
22 | .bg-black { background-color: $color-black !important; }
23 | .bg-accent { background-color: $color-accent !important; }
24 | .bg-tint { background-color: $color-tint !important; }
25 | .bg-brand-turbo { background-color: $color-brand-turbo !important; }
26 | .bg-brand-stimulus { background-color: $color-brand-stimulus !important; }
27 | .bg-brand-strada { background-color: $color-brand-strada !important; }
28 | .bg-brand-native { background-color: $color-brand-native !important; }
29 | .bg-brand { background-color: $color-brand !important; }
30 | 
31 | .hover\:bg-white:hover { background-color: $color-white !important; }
32 | .hover\:bg-black:hover { background-color: $color-black !important; }
33 | .hover\:bg-accent:hover { background-color: $color-accent !important; }
34 | .hover\:bg-tint:hover { background-color: $color-tint !important; }
35 | .hover\:bg-brand-turbo:hover { background-color: $color-brand-turbo !important; }
36 | .hover\:bg-brand-stimulus:hover { background-color: $color-brand-stimulus !important; }
37 | .hover\:bg-brand-strada:hover { background-color: $color-brand-strada !important; }
38 | .hover\:bg-brand-native:hover { background-color: $color-brand-native !important; }
39 | .hover\:bg-brand:hover { background-color: $color-brand !important; }
40 | 
41 | ._placeholder,
42 | ._placeholder-s {
43 |   position: relative;
44 | 
45 |   &::after {
46 |     content: "[placeholder]";
47 |     display: block;
48 |     position: absolute;
49 |     z-index: 100;
50 |     left: 50%;
51 |     top: 50%;
52 |     background: $color-white;
53 |     color: $color-black;
54 |     font-family: $mono-stack;
55 |     font-size: 1.6rem;
56 |     font-style: normal;
57 |     font-weight: normal;
58 |     letter-spacing: 0;
59 |     line-height: 1;
60 |     white-space: nowrap;
61 |     transform: translate(-50%, -50%) rotate(-12deg);
62 |     mix-blend-mode: difference;
63 |   }
64 | }
65 | 
66 | ._placeholder-s {
67 |   &::after {
68 |     font-size: 1rem;
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/_source/ios/01_getting_started.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /ios/getting-started.html
 3 | order: 01
 4 | title: "Getting Started"
 5 | description: "How to create a new Hotwire Native app on iOS."
 6 | ---
 7 | 
 8 | # Getting Started
 9 | 
10 | Follow these steps to create a minimal Hotwire Native application on iOS with support for basic back/forward navigation and error handling.
11 | 
12 | ## New Project
13 | 
14 | First, download and install [Xcode 15+](https://developer.apple.com/xcode/).
15 | 
16 | Open Xcode and create a new iOS app via File → New → Project... and choose the default iOS "App" template.
17 | 
18 | <img src="/assets/xcode-choose-template.png" class="border" width="600" alt="New Xcode project" />
19 | 
20 | In the project creation dialog, enter a product name, then select “Swift” under “Language”, and “Storyboard” under “Interface” and click Next.
21 | 
22 | <img src="/assets/xcode-project-options.png" class="border" width="600" alt="Configure Xcode project" />
23 | 
24 | Select where to save the project and click Create.
25 | 
26 | <img src="/assets/xcode-project-location.png" class="border" width="600" alt="Configure Xcode project" />
27 | 
28 | ## Integrate Hotwire Native
29 | 
30 | Next, add the Hotwire Native package via File → Add Packages Dependencies... and enter `https://github.com/hotwired/hotwire-native-ios` in the search field.
31 | Make sure your project is correctly set under “Add to Project“ and click Add Package.
32 | 
33 | <img src="/assets/xcode-search-package.png" class="border" width="600" alt="Configure Xcode project" />
34 | 
35 | Once the package has been downloaded, select your app name under “Add to Target“ and click Add Package.
36 | 
37 | <img src="/assets/xcode-add-package.png" class="border" width="600" alt="Configure Xcode project" />
38 | 
39 | Finally, open `SceneDelegate` and replace the entire file with this code:
40 | 
41 | ```swift
42 | import HotwireNative
43 | import UIKit
44 | 
45 | let rootURL = URL(string: "https://hotwire-native-demo.dev")!
46 | 
47 | class SceneDelegate: UIResponder, UIWindowSceneDelegate {
48 |     var window: UIWindow?
49 | 
50 |     private let navigator = Navigator(configuration: .init(
51 |         name: "main",
52 |         startLocation: rootURL
53 |     ))
54 | 
55 |     func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
56 |         window?.rootViewController = navigator.rootViewController
57 |         navigator.start()
58 |     }
59 | }
60 | ```
61 | 
62 | ## Run!
63 | 
64 | Click Product → Run to launch the app in the simulator. You should see the following screen in the simulator.
65 | 
66 | <figure>
67 |     <img src="/assets/iphone-hotwire-native-demo.png" width="400" alt="Hotwire Native demo app" />
68 | </figure>
69 | 
70 | This example only touches on the core requirements of creating a `Navigator` and routing the root URL. Feel free to change the URL used for the initial visit to point to your web app.
71 | 
72 | And note that we are pointing to a demo application server that expects a bit more native functionality. Some of the links, like native controls, won't work out of the box. Check out the [Hotwire Native iOS demo app](https://github.com/hotwired/hotwire-native-ios/tree/main/Demo) for examples on how to add bridge components, native screens, and more.
73 | 


--------------------------------------------------------------------------------
/_source/android/04_native_screens.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /android/native-screens.html
 3 | order: 04
 4 | title: "Native Screens"
 5 | description: "Integrate fully native Kotlin screens in your Hotiwre Native app."
 6 | ---
 7 | 
 8 | # Native Screens
 9 | 
10 | To render a native screen on Android you need match an identifier in the [path configuration](/overview/path-configuration) with your fragment.
11 | 
12 | First, create a URL path pattern and set its `uri` property. This path configuration routes all URLs ending in `/numbers`. You can also set a `title` to set the native title when the fragment is presented.
13 | 
14 | ```json
15 | {
16 |   "settings": {},
17 |   "rules": [
18 |     {
19 |       "patterns": [
20 |         "/numbers$"
21 |       ],
22 |       "properties": {
23 |         "uri": "hotwire://fragment/numbers",
24 |         "title": "Numbers"
25 |       }
26 |     }
27 |   ]
28 | }
29 | ```
30 | 
31 | When a link is intercepted by Hotwire Native, it will go through its usual process of matching the link's URL path to all rules in the app's Path Configuration. When it matches the above rule, it will propose a `visit` and resolve the matching `HotwireDestination` whose `uri` matches `"hotwire://fragment/numbers"`.
32 | 
33 | Create a new fragment and provide a matching `HotwireDestinationDeepLink` annotation.
34 | 
35 | ```kotlin
36 | @HotwireDestinationDeepLink(uri = "hotwire://fragment/numbers")
37 | class NumbersFragment : HotwireFragment() {
38 |     // ...
39 | }
40 | ```
41 | 
42 | Finally, register this fragment with Hotwire Native to use it when the URL path matches. See the [configuration](/android/configuration) docs for a recommendation on where to register fragments in your code.
43 | 
44 | Note that if you decide to register your own fragments, you must also register `HotwireWebFragment` for URL paths that do not match your custom fragment's path.
45 | 
46 | ```kotlin
47 | Hotwire.registerFragmentDestinations(
48 |     HotwireWebFragment::class, // Don't forget to register this for regular destinations
49 |     NumbersFragment::class
50 | )
51 | ```
52 | 
53 | ## Progressive Rollout
54 | 
55 | In a purely native app, if a new screen presented an issue you'd be unable to react immediately. The usual process would be to rush out bug fixes and hope for a quick review. If the bug was severe or your team needed more time to fix a critical issue, you'd have to rollback to a previous app version and submit that to the Play Store for review.
56 | 
57 | Since even native screens are routed through Hotwire Native, the Path Configuration is a powerful ally when it comes to rolling out your native screens. If you were to find a critical issue with your native screen, you could easily update your remote Path Configuration and either point to your web content so users don't lose functionality, or immediately disable the screen altogether – no app store review required.
58 | 
59 | Simply remove the `"uri"` property and Hotwire Native will stop using your native screen, instead presenting a web view controller which loads `"/numbers"`: a web page you fully control.
60 | 
61 | ```json
62 | {
63 |   "settings": {},
64 |   "rules": [
65 |     {
66 |       "patterns": [
67 |         "/numbers$"
68 |       ],
69 |       "properties": { }
70 |     }
71 |   ]
72 | }
73 | ```
74 | 
75 | Check out the [demo app](https://github.com/hotwired/hotwire-native-android/tree/main/demo) to see how everything is wired up and for more complex examples.
76 | 


--------------------------------------------------------------------------------
/_source/ios/02_path_configuration.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /ios/path-configuration.html
 3 | order: 02
 4 | title: "Path Configuration"
 5 | description: "Customize iOS app behavior via the path configuration."
 6 | ---
 7 | 
 8 | # Path Configuration
 9 | 
10 | Building on the [overview of path configuration](/overview/path-configuration), here's an example for an iOS app.
11 | 
12 | ```json
13 | {
14 |   "settings": {},
15 |   "rules": [
16 |     {
17 |       "patterns": [
18 |         ".*"
19 |       ],
20 |       "properties": {
21 |         "context": "default",
22 |         "pull_to_refresh_enabled": true
23 |       }
24 |     },
25 |     {
26 |       "patterns": [
27 |         "/new$"
28 |       ],
29 |       "properties": {
30 |         "context": "modal",
31 |         "pull_to_refresh_enabled": false
32 |       }
33 |     }
34 |   ]
35 | }
36 | ```
37 | 
38 | This configuration does two things:
39 | 
40 | 1. Sets *all* URL path patterns with pull-to-refresh enabled.
41 | 1. Overrides URL path patterns *ending* in `/new` to be presented as a modal with pull-to-refresh disabled. It is helpful to disable pull-to-refresh in modals so it doesn't interfere with the dismiss gesture or clear form data that a user may have entered.
42 | 
43 | ## Sources
44 | 
45 | Path configuration has an array of `sources`. You can configure the source to be a locally bundled file, a remote file available from your server, or both. We recommend always including a bundled version even when loading remotely, so it will be available in case your app is offline.
46 | 
47 | Set up your path configuration in `AppDelegate.swift`. This ensures that Hotwire is configured before the first URL is routed.
48 | 
49 | ```swift
50 | import HotwireNative
51 | import UIKit
52 | 
53 | @main
54 | class AppDelegate: UIResponder, UIApplicationDelegate {
55 |     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
56 |         let localPathConfigURL = Bundle.main.url(forResource: "path-configuration", withExtension: "json")!
57 |         let remotePathConfigURL = URL(string: "https://example.com/configurations/ios_v1.json")!
58 | 
59 |         Hotwire.loadPathConfiguration(from: [
60 |             .file(localPathConfigURL),
61 |             .server(remotePathConfigURL)
62 |         ])
63 | 
64 |         return true
65 |     }
66 | }
67 | ```
68 | 
69 | If you provide both a file and a server location, the path configuration will be loaded asynchronously in the following order:
70 | 1. The local file bundled with your app.
71 | 2. A locally cached copy of the server configuration (if a successful download occurred on a previous app launch).
72 | 3. A newly downloaded copy of the server configuration. (Once this has downloaded successfully, it will be cached and used in step 2 on the next app launch.) 
73 | 
74 | ## Query String Matching
75 | 
76 | By default, path patterns match against the path component *and* query string of the URL.
77 | 
78 | To ensure the order of query string parameters don't affect matching, a wildcard `.*` before and after the match is recommended, like so:
79 | 
80 | ```
81 | {
82 |   "patterns": [".*\\?.*foo=bar.*"],
83 |   "properties": {
84 |     "foo": "bar"
85 |   }
86 | }
87 | ```
88 | 
89 | Disable query string matching via:
90 | 
91 | ```swift
92 | Hotwire.config.pathConfiguration.matchQueryStrings = false
93 | ```
94 | 
95 | The [path configuration reference](/reference/path-configuration) provides more information, including all the behavior Hotwire Native provides out of the box.
96 | 


--------------------------------------------------------------------------------
/_source/ios/05_configuration.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /ios/configuration.html
 3 | order: 05
 4 | title: "Configuration"
 5 | description: "How to customize a Hotwire Native iOS app."
 6 | ---
 7 | 
 8 | # Configuration
 9 | 
10 | Hotwire Native provides a few options to customize your iOS app. We recommend making all configuration changes *before* instantiating a `Navigator`, ideally in `AppDelegate.swift`.
11 | 
12 | ## General
13 | 
14 | * `Hotwire.config.debugLoggingEnabled` - Enable or disable debug logging for Turbo visits and bridge elements connecting, disconnecting, receiving/sending messages, and more.
15 | * `Hotwire.config.applicationUserAgentPrefix` - Set a custom user agent application prefix for every `WKWebView` instance. The library will automatically append a substring to your prefix which includes:
16 |     * `"Hotwire Native iOS; Turbo Native iOS;"` - for `hotwire_native_app?` on your [Rails server](https://github.com/hotwired/turbo-rails/blob/1aa7ba9d38dee1e1b4078a74404131122b907176/app/controllers/turbo/native/navigation.rb#L14)
17 |     * `"bridge-components: [your bridge components];"`
18 |     * `WKWebView`'s default user agent string (at the beginning of the user agent)
19 | * `Hotwire.config.showDoneButtonOnModals` - When enabled, adds a `UIBarButtonItem` of type `.done` to the left navigation bar button item on screens presented modally.
20 | * `Hotwire.config.backButtonDisplayMode` - Sets the back button display mode of `HotwireWebViewController`.
21 | 
22 | ## Turbo
23 | 
24 | * `Hotwire.config.defaultViewController` - The view controller used in `Navigator` for web requests. Must be a [`VisitableViewController`](https://github.com/hotwired/hotwire-native-ios/blob/main/Source/Turbo/Visitable/VisitableViewController.swift) or subclass. Defaults to an instance of [`HotwireWebViewController`](https://github.com/hotwired/hotwire-native-ios/blob/main/Source/Turbo/ViewControllers/HotwireWebViewController.swift).
25 | 
26 | ```swift
27 | Hotwire.config.defaultViewController = { url in
28 |     CustomViewController(url: url)
29 | }
30 | ```
31 | 
32 | * `Hotwire.config.defaultNavigationController` - The navigation controller used in `Navigator` for the main and modal stacks. Must be a [`UINavigationController`](https://developer.apple.com/documentation/uikit/uinavigationcontroller) or subclass. Defaults to an instance of [`HotwireNavigationController`](https://github.com/hotwired/hotwire-native-ios/blob/main/Source/Turbo/ViewControllers/HotwireNavigationController.swift).
33 | 
34 | ```swift
35 | Hotwire.config.defaultNavigationController = {
36 |     CustomNavigationController()
37 | }
38 | ```
39 | 
40 | * `Hotwire.config.makeCustomWebView` - Optionally customize the web views used by each Turbo Session. Ensure you return a new instance each time.
41 | 
42 | ## Path Configuration
43 | 
44 | * `Hotwire.config.pathConfiguration.matchQueryStrings` - Enable to match the query string when applying rules in addition to the path.
45 | 
46 | Load path configuration with `Hotwire.loadPathConfiguration(from:)`, like so:
47 | 
48 | ```swift
49 | let localPathConfigURL = Bundle.main.url(forResource: "path-configuration", withExtension: "json")!
50 | let remotePathConfigURL = URL(string: "https://example.com/configurations/ios_v1.json")!
51 | 
52 | Hotwire.loadPathConfiguration(from: [
53 |     .file(localPathConfigURL),
54 |     .server(remotePathConfigURL)
55 | ])
56 | ```
57 | 
58 | ## Bridge
59 | 
60 | * `Hotwire.config.jsonEncoder` - Set a custom JSON encoder when parsing bridge payloads. The custom encoder can be useful when you need to apply specific encoding strategies, like snake case vs. camel case.
61 | * `Hotwire.config.jsonDecoder` - Set a custom JSON decoder when parsing bridge payloads. The custom decoder can be useful when you need to apply specific decoding strategies, like snake case vs. camel case.
62 | 
63 | Register bridge components with `Hotwire.registerBridgeComponents()`, like so:
64 | 
65 | ```swift
66 | Hotwire.registerBridgeComponents([
67 |     FormComponent.self,
68 |     MenuComponent.self,
69 |     OverflowMenuComponent.self,
70 |     // ...
71 | ])
72 | ```
73 | 


--------------------------------------------------------------------------------
/_source/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Hotwire Native is a web-first framework for building native mobile apps.
 3 | description: >-
 4 |   Hotwire Native unlocks mobile apps for web developers. Build your web views once and deploy them across multiple platforms.
 5 | layout: default
 6 | ---
 7 | 
 8 | <div class="landing-intro grid">
 9 |   <h1 class="landing-intro__text grid__item grid__item--start-2 grid__item--span-10">
10 |     Hotwire Native is a web-first framework for building native mobile apps.
11 |   </h1>
12 | </div>
13 | 
14 | <div class="landing-hero grid__item grid__item--span-12">
15 |   <div class="landing-hero__step">
16 |     <img src="/assets/native-vs-web.jpg" alt="Native + web">
17 |   </div>
18 | </div>
19 | 
20 | <div class="landing-versions">
21 |   <a class="landing-version button" href="{{ ios_release.url }}">
22 |     Current iOS version: <em>{{ ios_release.tag_name }}</em> &mdash; released {{ ios_release.created_at | date: "%b %e, %Y" }}
23 |   </a>
24 | 
25 |   <a class="landing-version button" href="{{ android_release.url }}">
26 |     Current Android version: <em>{{ android_release.tag_name }}</em> &mdash; released {{ android_release.created_at | date: "%b %e, %Y" }}
27 |   </a>
28 | </div>
29 | 
30 | <section class="landing-summary">
31 |   <p>
32 |     Building fully native mobile apps can be a real pain. It often looks like this:
33 |     <ul>
34 |       <li>The development process is <b>very slow</b></li>
35 |       <li><b>Large teams</b> of specialized developers are required</li>
36 |       <li>Each feature must be <b>re-implemented</b> across every platform</li>
37 |       <li>Every update needs to wind its way through the app store <b>review process</b></li>
38 |     </ul>
39 |   </p>
40 | 
41 |   <p>
42 |     <b>Hotwire Native</b> provides an answer to all of these drawbacks with its web-first approach.</b> The framework enables you to build your screens once, in HTML and CSS, and reuse them across every platform. If you already have a <a href="https://hotwired.dev">Hotwire</a> web app, you can use the screens you've already built!
43 |   </p>
44 | 
45 |   <p>
46 |     It unlocks bug fixes and new features without having to go through app store review. And you have full access to underlying iOS and Android SDKs and APIs as soon as they are released.
47 |   </p>
48 | 
49 |   <p>
50 |     Small teams can build highly functional, beautiful, and sustainable mobile apps. All without the headache and rigmarole of traditional native development.
51 |   </p>
52 | 
53 |   <p>
54 |     Hotwire Native is a high-level native framework, available for iOS and Android, that provides you with all the tools you need to leverage your web app and build great mobile apps. It wraps a web view within a native shell and renders HTML from your server. Native navigation and transition animations between screens work automatically out-of-the-box.
55 |   </p>
56 | 
57 |   <p>
58 |     And for times when the web's not enough, you can upgrade with <a href="/overview/bridge-components">Bridge Components</a> or <a href="/overview/native-screens">fully native screens</a>.
59 |   </p>
60 | 
61 |   <p>
62 |     Learn <a href="/overview/how-it-works">how it works</a> or get started with an <a href="/ios/getting-started">iOS</a> or <a href="/android/getting-started">Android</a> app.
63 |   </p>
64 | </section>
65 | 
66 | <div class="landing-actions">
67 |   <a class="landing-actions__item" href="/overview/how-it-works">
68 |     <div class="landing-actions__icon landing-actions__icon--guide" aria-hidden="true"></div>
69 |     Overview
70 |   </a>
71 | 
72 |   <a class="landing-actions__item" href="/ios/getting-started">
73 |     <div class="landing-actions__icon landing-actions__icon--apple" aria-hidden="true"></div>
74 |     Build an iOS app
75 |   </a>
76 | 
77 |   <a class="landing-actions__item" href="/android/getting-started">
78 |     <div class="landing-actions__icon landing-actions__icon--android" aria-hidden="true"></div>
79 |     Build an Android app
80 |   </a>
81 | </div>
82 | 
83 | <p style="text-align: center; margin-top: 30px">
84 |   <a href="https://world.hey.com/hotwired">Subscribe to project updates over email</a>.
85 | </p>
86 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_landing.scss:
--------------------------------------------------------------------------------
  1 | .landing-intro {
  2 |   position: relative;
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   background-color: $color-tint;
  6 |   border-top: 0.4rem solid $color-brand;
  7 | }
  8 | 
  9 | .landing-intro__text {
 10 |   position: relative;
 11 |   z-index: 1;
 12 |   margin: 1.25em 0 2.25em 0;
 13 |   text-align: center;
 14 |   color: $color-black;
 15 |   font-weight: 800;
 16 |   line-height: 1.3;
 17 | 
 18 |   @include media(medium) {
 19 |     font-size: $font-xxxx-large;
 20 |   }
 21 | }
 22 | 
 23 | .landing-hero {
 24 |   position: relative;
 25 |   margin: -4em 0 0 0;
 26 | 
 27 |   &::before {
 28 |     content: "";
 29 |     display: block;
 30 |     width: 110%;
 31 |     height: 90%;
 32 |     position: absolute;
 33 |     z-index: -1;
 34 |     left: -5%;
 35 |     top: 2%;
 36 |     background: url('/assets/waves-pattern-4.svg') center no-repeat;
 37 |     background-size: 100% 100%;
 38 |   }
 39 | 
 40 |   @include media(medium) {
 41 |     display: flex;
 42 |     justify-content: space-between;
 43 | 
 44 |     &::before {
 45 |       width: 124%;
 46 |       height: 80%;
 47 |       left: -12%;
 48 |       top: 12%;
 49 |     }
 50 |   }
 51 | }
 52 | 
 53 | .landing-hero__step {
 54 |   overflow: hidden;
 55 |   aspect-ratio: 2/1;
 56 |   position: relative;
 57 |   width: 100%;
 58 |   margin-bottom: 2em;
 59 |   background-color: $color-tint;
 60 |   border: 0.25em solid $color-white;
 61 |   box-shadow: 0 0 2em rgba(0,0,0, 0.1);
 62 | 
 63 |   img {
 64 |     display: block;
 65 |     width: 100%;
 66 |     height: auto;
 67 |   }
 68 | }
 69 | 
 70 | .landing-summary {
 71 |   text-align: left;
 72 |   font-size: $font-large;
 73 | }
 74 | 
 75 | .landing-versions {
 76 |   display: flex;
 77 |   justify-content: space-around;
 78 |   margin: 0 auto;
 79 | }
 80 | 
 81 | .landing-version {
 82 |   padding: 1.5em 2em;
 83 |   position: relative;
 84 |   margin: 0 0 5em 0;
 85 |   font-weight: 600;
 86 |   font-style: italic;
 87 |   font-size: $font-small;
 88 | 
 89 |   em {
 90 |     text-decoration: underline;
 91 |   }
 92 | 
 93 |   &:hover {
 94 |     em {
 95 |       text-decoration-color: $color-brand;
 96 |     }
 97 |   }
 98 | 
 99 |   @include media(medium) {
100 |     margin-top: -4em;
101 |   }
102 | }
103 | 
104 | .landing-actions {
105 |   grid-column: 3/4;
106 |   margin: 0;
107 | 
108 |   @include media(medium) {
109 |     display: flex;
110 |     justify-content: space-between;
111 |     align-items: stretch;
112 |   }
113 | }
114 | 
115 | .landing-actions__item {
116 |   display: block;
117 |   margin-bottom: 1em;
118 |   padding: 1.5em 1em;
119 |   font-family: $sans-stack;
120 |   font-style: italic;
121 |   text-align: center;
122 |   line-height: 1.25;
123 |   background-color: $color-white;
124 |   box-shadow: 0 0 2em rgba($color-black, 0.075);
125 |   border-radius: 0.5em;
126 | 
127 |   @include media(small) {
128 |     max-width: 20em;
129 |     margin-left: auto;
130 |     margin-right: auto;
131 |   }
132 | 
133 |   @include media(medium) {
134 |     width: 32%;
135 |     margin-bottom: 0;
136 |   }
137 | }
138 | 
139 | .landing-actions__icon {
140 |   display: block;
141 |   width: 3.75em;
142 |   height: 3.75em;
143 |   margin: 0 auto 1em auto;
144 |   background-color: $color-brand;
145 | 
146 |   .landing-actions__item:hover & {
147 |     background-color: $color-accent;
148 |   }
149 | }
150 | 
151 | .landing-actions__icon--guide {
152 |   -webkit-mask: url('/assets/icon-guide.svg') center / 100% no-repeat;
153 |   mask: url('/assets/icon-guide.svg') center / 100% no-repeat;
154 | }
155 | 
156 | .landing-actions__icon--install {
157 |   -webkit-mask: url('/assets/icon-install.svg') center / 100% no-repeat;
158 |   mask: url('/assets/icon-install.svg') center / 100% no-repeat;
159 | }
160 | 
161 | .landing-actions__icon--apple {
162 |   -webkit-mask: url('/assets/icon-apple.svg') center / 100% no-repeat;
163 |   mask: url('/assets/icon-apple.svg') center / 100% no-repeat;
164 | }
165 | 
166 | .landing-actions__icon--android {
167 |   -webkit-mask: url('/assets/icon-android.svg') center / 100% no-repeat;
168 |   mask: url('/assets/icon-android.svg') center / 100% no-repeat;
169 | }
170 | 


--------------------------------------------------------------------------------
/_source/_includes/svg/hotwire-native-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg class="logo" width="290" height="60" viewBox="0 0 290 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_75_1510)">
 3 | <path d="M79.2359 6.19995L70.9399 53.8H83.4859L87.3279 31.734L99.6019 53.8H109.496L117.792 6.19995H105.246L101.37 28.368L89.0619 6.19995H79.2359Z" fill="black"/>
 4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M112.316 53.8L135.742 6.19995H148.322L155.19 53.8H141.556L140.808 47.952H128.704L125.848 53.8H112.316ZM133.09 38.398H139.856L138.632 26.43L133.09 38.398Z" fill="black"/>
 5 | <path d="M169.378 18.032L163.122 53.8H176.654L182.91 18.032H193.824L195.864 6.19995H160.504L158.464 18.032H169.378Z" fill="black"/>
 6 | <path d="M191.178 53.8L199.474 6.19995H213.006L204.71 53.8H191.178Z" fill="black"/>
 7 | <path d="M215.916 6.19995L223.26 53.8H233.732L257.464 6.19995H243.728L232.338 32.856L229.754 6.19995H215.916Z" fill="black"/>
 8 | <path d="M260.22 6.19995L251.924 53.8H282.49L284.394 42.852H267.36L268.788 34.658H281.674L283.442 24.492H270.556L271.848 17.148H288.372L290.276 6.19995H260.22Z" fill="black"/>
 9 | <path d="M60 50.852C60 50.3122 59.7835 49.7936 59.389 49.425C55.084 45.4031 49.8687 42.2528 44.0501 40.288C43.5744 40.1274 43.1945 40.7059 43.504 41.1013C47.458 46.1537 49.9206 52.7203 51.4118 59.2141C51.5171 59.6724 51.923 60.0001 52.3932 60.0001H58C59.1046 60.0001 60 59.1046 60 58.0001V50.852Z" fill="#C18BF4"/>
10 | <path d="M43.9965 60C44.6129 60 45.083 59.4476 44.9753 58.8407C43.6865 51.578 41.4054 44.5095 37.5067 39.1855C37.2072 38.7766 36.7538 38.5096 36.252 38.4385C34.2142 38.1497 32.1267 38 30 38C27.8733 38 25.7858 38.1497 23.748 38.4385C23.2462 38.5096 22.7928 38.7766 22.4933 39.1855C18.5946 44.5095 16.3135 51.578 15.0247 58.8407C14.917 59.4476 15.3871 60 16.0035 60H43.9965Z" fill="#C18BF4"/>
11 | <path d="M8.5882 59.2141C8.48295 59.6724 8.07703 60.0001 7.60682 60.0001H2C0.895432 60.0001 0 59.1046 0 58.0001V50.852C0 50.3122 0.216551 49.7936 0.61102 49.425C4.91604 45.4031 10.1313 42.2528 15.9499 40.288C16.4256 40.1274 16.8055 40.7059 16.4961 41.1013C12.542 46.1537 10.0795 52.7203 8.5882 59.2141Z" fill="#C18BF4"/>
12 | <path d="M37.9182 30.6004C38.2232 30.6471 38.5 30.4124 38.5 30.1038V20C38.5 19.1716 37.8284 18.5 37 18.5H23C22.1716 18.5 21.5 19.1716 21.5 20V30.1038C21.5 30.4124 21.7768 30.6471 22.0818 30.6004C24.6631 30.2052 27.308 30 30 30C32.692 30 35.3369 30.2052 37.9182 30.6004Z" fill="#C18BF4"/>
13 | <path d="M27 0C27.5523 0 28 0.447715 28 1V5C28 6.10457 28.8954 7 30 7C31.1046 7 32 6.10457 32 5V1C32 0.447715 32.4477 0 33 0H42.8723C43.274 0 43.5117 0.44992 43.2853 0.781811L39.348 6.55227C38.7254 7.46467 38.9604 8.70901 39.8728 9.33157C40.7852 9.95413 42.0295 9.71916 42.6521 8.80675L48.2145 0.654568C48.494 0.245008 48.9578 0 49.4536 0H58C59.1046 0 60 0.895431 60 2V4.72811C60 5.07166 59.8236 5.39117 59.5329 5.57426L47.2546 13.3076C46.32 13.8963 46.0395 15.1312 46.6282 16.0658C47.2168 17.0004 48.4517 17.2809 49.3864 16.6922L59.2335 10.4901C59.5665 10.2804 60 10.5197 60 10.9132V22C60 22.5523 59.5523 23 59 23H51C49.8954 23 49 23.8954 49 25C49 26.1046 49.8954 27 51 27H59C59.5523 27 60 27.4477 60 28V37.6469C60 38.4621 59.0732 38.9399 58.3937 38.4894C54.1069 35.6473 49.3393 33.4325 44.2389 31.9787C43.8039 31.8548 43.5 31.4598 43.5 31.0075V20C43.5 16.4101 40.5899 13.5 37 13.5H23C19.4101 13.5 16.5 16.4101 16.5 20V31.0075C16.5 31.4598 16.1961 31.8548 15.7611 31.9787C10.6607 33.4325 5.89308 35.6473 1.60631 38.4894C0.926837 38.9399 0 38.4621 0 37.6469V28C0 27.4477 0.447715 27 1 27H9C10.1046 27 11 26.1046 11 25C11 23.8954 10.1046 23 9 23H1C0.447715 23 0 22.5523 0 22V10.9133C0 10.5198 0.43351 10.2805 0.766469 10.4902L10.6136 16.6923C11.5483 17.281 12.7832 17.0005 13.3718 16.0659C13.9605 15.1312 13.68 13.8964 12.7454 13.3077L0.467061 5.57434C0.17636 5.39125 0 5.07175 0 4.72819V2C0 0.895432 0.895431 0 2 0H10.5465C11.0423 0 11.5061 0.245008 11.7855 0.654568L17.3479 8.80675C17.9705 9.71916 19.2148 9.95413 20.1272 9.33157C21.0397 8.70901 21.2746 7.46467 20.6521 6.55226L16.7148 0.781811C16.4883 0.44992 16.726 0 17.1278 0H27Z" fill="#C18BF4"/>
14 | </g>
15 | <defs>
16 | <clipPath id="clip0_75_1510">
17 | <rect width="290" height="60" fill="white"/>
18 | </clipPath>
19 | </defs>
20 | </svg>
21 | 


--------------------------------------------------------------------------------
/_source/android/01_getting_started.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /android/getting-started.html
 3 | order: 01
 4 | title: "Getting Started"
 5 | description: "How to create a new Hotwire Native app on Android."
 6 | ---
 7 | 
 8 | # Getting Started
 9 | 
10 | Follow these steps to create a minimal Hotwire Native application on Android with support for basic back/forward navigation and error handling.
11 | 
12 | ## New Project
13 | 
14 | First, download and install [Android Studio](https://developer.android.com/studio).
15 | 
16 | Open Android Studio and create a new Android app via File → New → New Project... and choose the "Empty Views Activity" template.
17 | 
18 | <img src="/assets/new-android-studio-project.png" class="border" width="600" alt="New Android Studio project" />
19 | 
20 | Then select API 28 or higher for the minimum SDK and Kotlin DSL for the build configuration language.
21 | 
22 | <img src="/assets/android-studio-project-options.png" class="border" width="600" alt="Configure Android Studio project" />
23 | 
24 | ## Integrate Hotwire Native
25 | 
26 | Add the Hotwire Native dependencies to your app's module (not top-level) `build.gradle.kts` file. You can find the latest version number from [github.com/hotwired/hotwire-native-android/releases](https://github.com/hotwired/hotwire-native-android/releases).
27 | 
28 | ```kotlin
29 | dependencies {
30 |     implementation("dev.hotwire:core:<latest-version>")
31 |     implementation("dev.hotwire:navigation-fragments:<latest-version>")
32 | }
33 | ```
34 | 
35 | Enable internet access for the app by opening `AndroidManifest.xml` and adding the following above the `<application>` node:
36 | 
37 | ```xml
38 | <uses-permission android:name="android.permission.INTERNET"/>
39 | ```
40 | 
41 | Set up the app's layout by opening `activity_main.xml` and replace the entire file with the following:
42 | 
43 | ```xml
44 | <?xml version="1.0" encoding="utf-8"?>
45 | <androidx.fragment.app.FragmentContainerView
46 |     xmlns:android="http://schemas.android.com/apk/res/android"
47 |     xmlns:app="http://schemas.android.com/apk/res-auto"
48 |     android:id="@+id/main_nav_host"
49 |     android:name="dev.hotwire.navigation.navigator.NavigatorHost"
50 |     android:layout_width="match_parent"
51 |     android:layout_height="match_parent"
52 |     app:defaultNavHost="false" />
53 | ```
54 | 
55 | Finally, open `MainActivity.kt` and replace the class with this code:
56 | 
57 | ```kotlin
58 | package com.example.myapplication // update to match your project
59 | 
60 | import android.os.Bundle
61 | import android.view.View
62 | import androidx.activity.enableEdgeToEdge
63 | import dev.hotwire.navigation.activities.HotwireActivity
64 | import dev.hotwire.navigation.navigator.NavigatorConfiguration
65 | import dev.hotwire.navigation.util.applyDefaultImeWindowInsets
66 | 
67 | class MainActivity : HotwireActivity() {
68 |     override fun onCreate(savedInstanceState: Bundle?) {
69 |         enableEdgeToEdge()
70 |         super.onCreate(savedInstanceState)
71 |         setContentView(R.layout.activity_main)
72 |         findViewById<View>(R.id.main_nav_host).applyDefaultImeWindowInsets()
73 |     }
74 | 
75 |     override fun navigatorConfigurations() = listOf(
76 |         NavigatorConfiguration(
77 |             name = "main",
78 |             startLocation = "https://hotwire-native-demo.dev",
79 |             navigatorHostId = R.id.main_nav_host
80 |         )
81 |     )
82 | }
83 | ```
84 | 
85 | ## Run!
86 | 
87 | Click Run → Run 'app' to launch the app in the emulator. You should see the following screen in the emulator:
88 | 
89 | <figure>
90 |     <img src="/assets/android-hotwire-native-demo.png" width="400" alt="Hotwire Native demo app" />
91 | </figure>
92 | 
93 | This example only touches on the core requirements of creating a `HotwireActivity` and routing start location. Feel free to change the URL used for the initial visit to point to your web app.
94 | 
95 | And note that we are pointing to a demo application server that expects a bit more native functionality. Some of the links, like native controls, won't work out of the box. Check out the [Hotwire Native Android demo app](https://github.com/hotwired/hotwire-native-android/tree/main/demo) for examples on how to add bridge components, native screens, and more.
96 | 


--------------------------------------------------------------------------------
/_source/ios/04_native_screens.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /ios/native-screens.html
 3 | order: 04
 4 | title: "Native Screens"
 5 | description: "Integrate fully native Swift screens in your Hotiwre Native app."
 6 | ---
 7 | 
 8 | # Native Screens
 9 | 
10 | If you need to go fully native, we've got you covered: it's easy to integrate native screens to Hotwire Native's navigation flow. Even though you may be tempted to get a reference to Hotwire Native's navigation controller and push/present yourself, we strongly advise against it. It's better to leverage the power of Hotwire Native's [Path Configuration](/ios/path-configuration), even for native screens.
11 | 
12 | First, conform your view controller to `PathConfigurationIdentifiable` and provide a matching `pathConfigurationIdentifier`. When Hotwire Native intercepts a link, the identifier is used to resolve that a native view controller was requested.
13 | 
14 | ```swift
15 | class NumbersViewController: UITableViewController, PathConfigurationIdentifiable {
16 |     static var pathConfigurationIdentifier: String { "numbers" }
17 | 
18 |     init(url: URL) {
19 |         self.url = url
20 |     }
21 | 
22 |     // ...
23 | }
24 | ```
25 | 
26 | Next, create a URL path pattern to match against, and set its `view_controller` property. This path configuration routes all URLs ending in `/numbers`:
27 | 
28 | ```json
29 | {
30 |   "settings": {},
31 |   "rules": [
32 |     {
33 |       "patterns": [
34 |         "/numbers$"
35 |       ],
36 |       "properties": {
37 |         "view_controller": "numbers"
38 |       }
39 |     }
40 |   ]
41 | }
42 | ```
43 | 
44 | When a link is intercepted by Hotwire Native, it will go through its usual process of matching the link's URL path to all rules in the app's Path Configuration. When it matches the above rule, it will create a `VisitProposal` and will set this `view_controller` property to `"numbers"`.
45 | 
46 | You can inspect this property when `handle(proposal:)` is called on `Navigator`'s delegate and instantiate your own view controller there. That's it! Hotwire Native will handle presentation (push/replace and animations) as if it were a web view controller.
47 | 
48 | ```swift
49 | class SceneDelegate: UIResponder, UIWindowSceneDelegate {
50 |     private lazy var navigator = Navigator(
51 |         configuration: .init(name: "main", startLocation: rootURL),
52 |         delegate: self
53 |     )
54 | 
55 |     // ...
56 | }
57 | 
58 | extension SceneDelegate: NavigatorDelegate {
59 |     func handle(proposal: VisitProposal, from navigator: Navigator) -> ProposalResult {
60 |         switch proposal.viewController {
61 |         case NumbersViewController.pathConfigurationIdentifier:
62 |             let numbersViewController = NumbersViewController(url: proposal.url)
63 |             return .acceptCustom(numbersViewController)
64 |         default:
65 |             return .accept
66 |         }
67 |     }
68 | }
69 | ```
70 | 
71 | ## Progressive Rollout
72 | 
73 | In a purely native app, if a new screen presented an issue you'd be unable to react immediately. The usual process would be to rush out bug fixes and hope for a quick review. If the bug was severe or your team needed more time to fix a critical issue, you'd have to rollback to a previous app version and submit that to the App Store, probably with an expedited review.
74 | 
75 | Since even native screens are routed through Hotwire Native, the Path Configuration is a powerful ally when it comes to rolling out your native screens. If you were to find a critical issue with your native screen, you could easily update your remote Path Configuration and either point to your web content so users don't lose functionality, or immediately disable the screen altogether – no app store review required.
76 | 
77 | Simply remove the `"view_controller"` property and Hotwire Native will stop using your native screen, instead presenting a web view controller which loads `"/numbers"`: a web page you fully control.
78 | 
79 | ```json
80 | {
81 |   "settings": {},
82 |   "rules": [
83 |     {
84 |       "patterns": [
85 |         "/numbers$"
86 |       ],
87 |       "properties": { }
88 |     }
89 |   ]
90 | }
91 | ```
92 | 
93 | Check out the [demo app](https://github.com/hotwired/hotwire-native-ios/tree/main/Demo) to see how everything is wired up and for more complex examples.
94 | 


--------------------------------------------------------------------------------
/_source/ios/06_reference.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /ios/reference.html
 3 | order: 06
 4 | title: "Reference"
 5 | description: "An reference guide to the Hotwire Native iOS library."
 6 | ---
 7 | 
 8 | # Reference
 9 | 
10 | There are a few main types in Hotwire Native iOS, most notably `Navigator` and `Visitable`.
11 | 
12 | ## Navigator
13 | 
14 | The `Navigator` is the central coordinator in a Hotwire Native iOS application. Each `Navigator` manages the stack of screens via a `UINavigationController` with a single, shared `WKWebView` instance. It lets your app choose how to handle link taps, present view controllers, and deal with errors.
15 | 
16 | ### Creating a `Navigator`
17 | 
18 | Create with no parameters to use the default configuration:
19 | 
20 | ```swift
21 | let navigator = Navigator()
22 | ```
23 | 
24 | Provide optional [path configuration](path-configuration) to configure settings and path rules:
25 | 
26 | ```swift
27 | let navigator = Navigator(pathConfiguration: pathConfiguration)
28 | ```
29 | 
30 | Provide an optional [delegate](#navigatordelegate) to configure how different URLs, errors, and external links are handled:
31 | 
32 | ```swift
33 | let navigator = Navigator(delegate: delegate)
34 | 
35 | extension SceneController: NavigatorDelgate {
36 |     // ...
37 | }
38 | ```
39 | 
40 | Customize the underlying `WKWebView` and configuration with a block. For example, to use a custom `WKProcessPool` to share cookies from web views outside of Hotwire Native:
41 | 
42 | ```swift
43 | Hotwire.config.makeCustomWebView = { config in
44 |     config.processPool = processPool
45 |     return WKWebView(frame: .zero, configuration: config)
46 | }
47 | ```
48 | 
49 | ## `NavigatorDelegate`
50 | 
51 | The delegate is an optional interface you can implement to customize behavior of the `Navigator`.
52 | 
53 | ### Handling Proposals
54 | 
55 | Hotwire Native iOS calls the `handle(proposal:)` method before every visit, such as when you tap a Turbo-enabled link or call `Turbo.visit(...)` in your web application. Implement this function to choose how to handle the specified URL and action. This is called a *proposal* since your application is not required to complete the visit.
56 | 
57 | Return one of the following three `ProposalResult` cases:
58 | * `accept`: Proposals are accepted and a new [`HotwireWebViewController`](#hotwirewebviewcontroller) is displayed.
59 | * `acceptCustom(UIViewController)`: Provide a custom view controller to be displayed.
60 | * `reject`: No changes to navigation occur, the visit is effectively cancelled.
61 | 
62 | ### Handling External URLs
63 | 
64 | Implement `handle(externalURL:)` to customize the behavior when an external URL is visited. URLs are considered "external" if they do not match the same domain as the first visited link. By default, this will present a [`SFSafariViewController`](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller) modally.
65 | 
66 | ### Handling Errors
67 | 
68 | Network errors and responses with HTTP status codes outside of the 200 range are considered errors. By default a native screen with the error's localized description and a Retry button is presented.
69 | 
70 | Customize this behavior by implementing `visitableDidFailRequest(_:error:retryHandler:)`. Call `retryHandler()` to attempt the network request again.
71 | 
72 | ## `HotwireWebViewController`
73 | 
74 | A `HotwireWebViewController` is a `UIViewController` that can be visited by a `Navigator`. Each view controller provides a `VisitableView` instance, which acts as a container for the shared `WKWebView`. The `VisitableView` optionally has a pull-to-refresh control and an activity indicator. It also automatically displays a screenshot of its contents when the web view moves to another `VisitableView`.
75 | 
76 | Most applications will probably want to subclass `HotwireWebViewController` to customize its layout or add additional views. If your application’s design prevents you from subclassing `HotwireWebViewController`, you can implement the `Visitable` and `BridgeDestination` protocols yourself.
77 | 
78 | Note: Custom `Visitable` view controllers must notify their delegate of their `viewWillAppear` and `viewDidAppear` methods through the `VisitableDelegate`'s `visitableViewWillAppear` and `visitableViewDidAppear` methods. The `Navigator` uses these hooks to know when it should move the `WKWebView` from one `VisitableView` to another.
79 | 


--------------------------------------------------------------------------------
/_source/_assets/images/logo-hey.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="57" viewBox="0 0 123 57" width="123" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path clip-rule="evenodd" d="m37.2954 19.3476c1.6893-1.7609 3.8254-3.0295 6.18-3.67 1.0463-.3233 2.1617-.3505 3.2225-.0787s2.0256.8321 2.7875 1.6187c3.46 3.94 2.66 13.3-2.54 27.83-.1391.372-.4183.6748-.7778.8436-.3596.1687-.7709.19-1.146.0594-.3751-.1307-.6841-.403-.8609-.7587-.1769-.3557-.2075-.7664-.0853-1.1443 6.51-18.22 4.36-23.39 3.13-24.76-.3823-.3892-.8662-.663-1.3967-.7903-.5304-.1273-1.086-.103-1.6033.0703-2.3996.7344-4.4861 2.2474-5.93 4.3 2.12 8.61 3.69 18.45 1 22.36-.3149.4923-.7362.9078-1.2329 1.2158s-1.0561.5008-1.6371.5642c-.4577.0492-.9206-.0165-1.3466-.1911s-.8018-.4526-1.0934-.8089c-2.84-3.34-1.42-15.91.1-21.42.2127-.7534.5148-1.4786.9-2.16-.15-.59-.31-1.19-.48-1.81-2.72-9.95-7.19-17.55004-8.77-17.55004-1.21.7-4.39 7.40004 2.93 27.40004.1158.3657.0899.7616-.0725 1.1091-.1624.3476-.4494.6215-.8041.7674-.3548.1459-.7515.1533-1.1114.0206-.3599-.1328-.6568-.3958-.832-.7371-7.55-16.43-11.15-21.2-12.49-22.56004-.53 2.47004-.84 10.02004 8.16 26.54004.1738.344.2112.741.1049 1.1116-.1063.3705-.3486.6872-.6783.8868-.3298.1996-.7227.2674-1.1003.1898-.3776-.0775-.7119-.2948-.9363-.6082-.3195-.476-.6463-.9633-.9786-1.4588-4.1917-6.2508-9.24956-13.7931-11.37136-15.9612-.26 2.44.5 9.59 8.31996 21.44.2225.3294.3081.7325.2385 1.1239-.0695.3914-.2886.7403-.6109.973-.3224.2326-.7226.3307-1.116.2734-.3933-.0573-.749-.2654-.9916-.5803-5.56996-7.13-8.40996-8.82-9.40996-9.21.12 1.87 2.19 8.02 6.94 13.13 3.16996 3.43 8.39996 7.24 15.33996 5.9.197-.0381.3996-.037.5961.0032.1966.0402.3833.1187.5495.231.1663.1124.3087.2564.4193.4238.1105.1674.1871.355.2251.552.0381.1969.037.3995-.0032.5961-.0402.1965-.1187.3832-.231.5495-.1124.1662-.2564.3086-.4238.4192s-.355.1871-.552.2252c-1.1426.2276-2.3049.3415-3.47.34-8.37 0-14.13996-6.03-16.99996-9.95-3.49-4.76-6.39-11.81-5.000003-14.32.200232-.3624.488323-.6686.837793-.8905.34948-.2219.74912-.3524 1.16221-.3795 1.53459.0813 2.99529.6847 4.14 1.71-3.41-7.66-3.51-12.85-2.41-14.85.17445-.3707.44596-.6873.78575-.9162.33979-.2288.73518-.3615 1.14425-.3838 1.28-.05 2.39.58 5.99996 5.52-2.94996-9.16-1.77-13.43004-1.15-14.80004.1638-.39993.4397-.74395.7946-.99058s.7735-.38535 1.2054-.39942h.0027c.9211-.00001 2.9028-.00003 8.5873 10.39004-1.49-9.16004.21-14.03004 2.79-15.490041.4172-.242949.8869-.3816281 1.3691-.40426025.4823-.02263215.9628.07145115 1.4009.27426025 4.11 1.730001 8.34 12.160041 10.28 19.070041zm-1.06 24.67c.226-.0744.4154-.2316.53-.44.55-.81 1.91-4.1-.42-15.29-1.23 6.48-1.22 14.4-.11 15.73z" fill-rule="evenodd"/><path d="m114.766 9.41738h6.61c.196-.02543.396.00525.576.0885.179.08324.332.21566.44.38194.107.16628.166.35968.168.55778.003.1981-.051.3929-.154.5618l-9.62 20.85c-.453 1.0789-.707 2.2307-.75 3.4v9.09c0 .4703-.187.9216-.518 1.2551-.332.3335-.782.5222-1.252.5249h-6.16c-.234 0-.466-.0461-.682-.1355-.216-.0895-.412-.2206-.577-.3859s-.296-.3615-.386-.5774c-.089-.216-.135-.4475-.135-.6812v-9.09c-.04-1.1687-.291-2.3206-.74-3.4l-5.8404-12.69c-.2421-.4686-.6034-.8651-1.0476-1.1495s-.9555-.4467-1.4824-.4705h-9c-.2337 0-.4652.046-.6811.1355-.216.0894-.4122.2205-.5775.3858s-.2964.3615-.3859.5775c-.0894.216-.1355.4474-.1355.6812v2.2c0 .4721.1876.9248.5214 1.2586s.7865.5214 1.2586.5214h6.66c.4721 0 .9249.1875 1.2587.5213s.5213.7866.5213 1.2587v4.59c-.0026.4713-.191.9225-.5242 1.2557-.3333.3333-.7845.5217-1.2558.5243h-6.64c-.4703 0-.9216.1861-1.2551.5178-.3335.3316-.5222.7818-.5249 1.2522v3c0 .4721.1876.9248.5214 1.2586s.7865.5214 1.2586.5214h11c.4617.0129.9002.2048 1.223.5351s.5046.7731.507 1.2349v4.57c.0002.4635-.1804.9089-.5035 1.2413s-.7631.5257-1.2265.5387h-20.72c-.4721 0-.9248-.1876-1.2586-.5214s-.5214-.7865-.5214-1.2586v-11c0-.4704-.1861-.9216-.5178-1.2552-.3316-.3335-.7818-.5222-1.2522-.5248h-7.44c-.2337 0-.4652.046-.6812.1355-.2159.0894-.4121.2205-.5774.3858s-.2964.3615-.3859.5775c-.0894.216-.1355.4474-.1355.6812v11c0 .4721-.1875.9248-.5213 1.2586s-.7866.5214-1.2587.5214h-6.17c-.4721 0-.9248-.1876-1.2586-.5214s-.5214-.7865-.5214-1.2586v-5.39c3.28-11.32 3.27-18.92 0-23.1v-4.66c0-.4721.1876-.9249.5214-1.25867.3338-.33382.7865-.52135 1.2586-.52135h6.17c.2371-.00533.4729.03677.6935.12384.2206.08706.4216.21733.5911.38315.1696.16583.3043.36383.3962.58243.092.2186.1393.4534.1392.6906v10.11c0 .4721.1876.9248.5214 1.2586s.7865.5214 1.2586.5214h7.4c.4616-.0156.8991-.21 1.2201-.5421.3209-.3322.5002-.7761.4999-1.2379v-10.11c0-.4721.1876-.9249.5214-1.25867.3338-.33382.7865-.52135 1.2586-.52135h25.43c.5144.02258 1.0124.19306 1.4324.49102.42.298.746.7108.938 1.189l1.53 4.32c.232.6472.558 1.5912.842 2.4145.12.3471.233.6727.328.9455l1.6 4.83c.169.5829.401 1.146.69 1.68.3-.5311.538-1.0948.71-1.68l1.7-4.84 1.2-3.35 1.53-4.32c.191-.4782.517-.891.937-1.189.421-.29796.918-.46844 1.433-.49102z"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/_source/_assets/css/base/_elements.scss:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   margin: 0;
  4 |   padding: 0;
  5 | }
  6 | 
  7 | html {
  8 |   font-size: 10px;
  9 | }
 10 | 
 11 | body {
 12 |   margin: 0;
 13 |   padding: 0;
 14 |   position: relative;
 15 |   overflow-x: hidden;
 16 |   background-color: $color-white;
 17 |   color: $color-black;
 18 |   font-family: $serif-stack;
 19 |   font-size: $font-base-small;
 20 |   font-style: normal;
 21 |   font-weight: 400;
 22 |   line-height: 1;
 23 | 
 24 |   @include media(large) {
 25 |     font-size: $font-base-medium;
 26 |   }
 27 | 
 28 |   @include media(x-large) {
 29 |     font-size: $font-base-large;
 30 |   }
 31 | }
 32 | 
 33 | a {
 34 |   color: $color-black;
 35 |   font-weight: 550;
 36 |   margin: -.2rem;
 37 |   padding: .2rem;
 38 |   text-decoration: underline;
 39 |   text-decoration-thickness: 0.1em;
 40 |   text-decoration-width: 0.1rem;
 41 | 
 42 |   &:visited {
 43 |     color: $color-black;
 44 |   }
 45 | 
 46 |   @media(hover: hover) {
 47 | 
 48 |     &:hover {
 49 |       text-decoration-color: $color-accent;
 50 |       text-decoration-thickness: 0.2em;
 51 |       text-decoration-width: 0.2em;
 52 |     }
 53 |   }
 54 | 
 55 |   &:active {
 56 |     color: $color-black;
 57 |   }
 58 | }
 59 | 
 60 | h1, h2, h3 {
 61 |   margin-top: 1.5em;
 62 |   margin-bottom: 0.75em;
 63 |   font-family: $sans-stack;
 64 |   font-weight: 600;
 65 |   letter-spacing: -.01em;
 66 |   line-height: 1.1em;
 67 |   text-align: center;
 68 |   word-wrap: break-word;
 69 | }
 70 | 
 71 | h1 {
 72 |   margin-top: 2em;
 73 |   font-size: $font-xxx-large;
 74 |   font-weight: 700;
 75 | }
 76 | 
 77 | h2 {
 78 |   margin-top: 2.5em;
 79 |   font-size: $font-xx-large;
 80 |   text-align: center;
 81 | }
 82 | 
 83 | h3 {
 84 |   margin-top: 2.5em;
 85 |   font-size: $font-x-large;
 86 |   font-weight: 500;
 87 |   letter-spacing: 0.01em;
 88 | }
 89 | 
 90 | ul,
 91 | ol {
 92 |   line-height: 1.6;
 93 |   margin-bottom: 1.5em;
 94 | }
 95 | 
 96 | li {
 97 |   margin-left: 1em;
 98 |   margin-bottom: 0.5em;
 99 | 
100 |   ul,
101 |   ol {
102 |     margin-top: 0.5em;
103 |     margin-bottom: 0;
104 |   }
105 | }
106 | 
107 | p {
108 |   line-height: 1.6;
109 |   margin-bottom: 1.5em;
110 | }
111 | 
112 | strong {
113 |   font-weight: 600;
114 | }
115 | 
116 | blockquote {
117 |   position: relative;
118 |   margin-bottom: 1.5em;
119 |   padding: 0 0 0 2em;
120 |   border-left: 2px solid $color-black;
121 |   text-align: left;
122 | 
123 |   &:before {
124 |     content: "";
125 |     position: absolute;
126 |     top: 0;
127 |     left: 0;
128 |     display: block;
129 |     width: 1.5rem;
130 |     height: 1.5rem;
131 |     background: url('/assets/logo.svg') left top / contain no-repeat;
132 |   }
133 | 
134 |   h1,
135 |   h2,
136 |   h3 {
137 |     margin-top: 2rem;
138 |     text-align: left;
139 |   }
140 | }
141 | 
142 | hr {
143 |   display: block;
144 |   height: 1px;
145 |   margin: 2em 0 3em 0;
146 |   padding: 0;
147 |   border: none;
148 |   border-top: 1px solid #f7f5f2;
149 | }
150 | 
151 | code,
152 | pre {
153 |   font-family: $mono-stack;
154 |   line-height: 1.25;
155 |   padding:  0 0.1em;
156 |   background-color: $color-tint;
157 |   direction: ltr;
158 |   text-align: left;
159 |   white-space: pre;
160 |   word-spacing: normal;
161 |   word-break: normal;
162 |   -moz-tab-size: 4;
163 |   -o-tab-size: 4;
164 |   tab-size: 4;
165 |   -webkit-hyphens: none;
166 |   -moz-hyphens: none;
167 |   -ms-hyphens: none;
168 |   hyphens: none;
169 | }
170 | 
171 | pre {
172 |   position: relative;
173 |   overflow: auto;
174 |   margin: 0 -1em 2em -1em;
175 |   margin: calc(min(5vw, 4rem)*-1);
176 |   margin-top: 0;
177 |   margin-bottom: 2em;
178 |   font-weight: 400;
179 |   background: $color-tint;
180 | 
181 |   @include media(medium) {
182 |     margin: 0 0 2em 0;
183 |   }
184 | 
185 |   &::after {
186 |     display: block;
187 |     content: "";
188 |     pointer-events: none;
189 |     position: absolute;
190 |     top: 0;
191 |     bottom: 0;
192 |     right: 0;
193 |     width: 2em;
194 |     background: linear-gradient(to right, rgba($color-tint, 0), $color-tint);
195 |   }
196 | }
197 | 
198 | code {
199 |   padding: 0.125em;
200 |   word-wrap: break-word;
201 | }
202 | 
203 | pre > code {
204 |   display: block;
205 |   max-width: 100%;
206 |   overflow: auto;
207 |   padding: 1em;
208 |   word-wrap: normal;
209 | }
210 | 
211 | table {
212 |   width: 100%;
213 |   border-collapse: collapse;
214 |   border-spacing: 0;
215 |   text-align: left;
216 | }
217 | 
218 | thead {
219 |   background-color: $color-tint;
220 |   font-family: $sans-stack;
221 | }
222 | 
223 | tr {
224 |   border-bottom: 0.125em solid $color-tint;
225 | }
226 | 
227 | th,
228 | td {
229 |   vertical-align: middle;
230 |   padding: 0.5em;
231 | }
232 | 
233 | input,
234 | select {
235 |   vertical-align: middle;
236 | }
237 | 


--------------------------------------------------------------------------------
/_source/_assets/images/logo-basecamp.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="32" viewBox="0 0 145 32" width="145" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m10.7011 30.145c2.6967 1.1888 5.6175 1.7839 8.5643 1.745 8.36 0 14.43-2.54 17.09-7.11.1692-.3048.2456-.6524.22-1-.61-9.2-5.9-23.78-17.31-23.78-8.74 0-15.19996 5.74-19.1999613 17.06-.1189506.4162-.07462805.8622.1239273 1.2469.198555.3846.536384.6791.944584.8232.40819.1442.856.1271 1.25209-.0476.39608-.1746.7106-.4939.8794-.8925 3.47-9.8 8.84996-14.8 15.99996-14.8 8.44 0 13.14 11.61 13.88 20.08-2.16 3.17-7.17 5-13.88 5-2.2975.048-4.5809-.3704-6.7121-1.2298-2.1313-.8594-4.06623-2.142-5.68786-3.7702 1.36-3.28 3.24996-6.27 4.11996-6.42.39 0 1.41 1.08 1.9 1.6l.0154.0162c1.0853 1.145 2.212 2.3338 3.7646 2.3338.7 0 2.84 0 6.84-8.57.1638-.4043.1659-.8561.0058-1.2619-.16-.4058-.4699-.7345-.8655-.9182-.3957-.1837-.8468-.2083-1.2601-.0686-.4132.1396-.757.4327-.9602.8187-1.0178 2.3209-2.3284 4.5019-3.9 6.49-.4211-.3608-.8186-.7482-1.19-1.16l-.0262-.0276c-1.1154-1.1754-2.4982-2.6324-4.3438-2.6324-3.65996.02-6.58996 6.72-7.65996 9.6-.10822.291-.13467.6061-.0765.9111.05818.3049.19876.5882.4065.8189 1.95924 2.2016 4.36888 3.9562 7.06566 5.145z"/><path clip-rule="evenodd" d="m42.5059 8.81006h6.08c3.37 0 5.12 1.39004 5.12 4.00004v.08c.0526.7604-.1715 1.5143-.6309 2.1226s-1.1233 1.03-1.8691 1.1874c.89.0789 1.7132.5051 2.2914 1.1863.5783.6812.8651 1.5626.7986 2.4537v.16c0 2.84-1.86 4.33-5.43 4.33h-6.36zm5.52 6.36004c1.68 0 2.35-.6 2.35-2v-.07c0-1.3-.73-1.89-2.38-1.89h-2.03v4zm.3 6.69c1.73 0 2.51-.78 2.51-2.19v-.08c0-1.43-.78-2.17-2.68-2.17h-2.19v4.44z" fill-rule="evenodd"/><path clip-rule="evenodd" d="m55.2061 21.14c0-2.64 2.42-3.63 5.89-3.63h1.27v-.46c0-1.34-.4-2.05-1.84-2.05-.2328-.0307-.4695-.0128-.695.0525-.2256.0653-.4351.1766-.6155.3269s-.3277.3364-.4326.5465c-.1049.21-.1651.4396-.1769.6741h-3c.2-2.68 2.32-3.87 5.09-3.87s4.73 1.12 4.73 4.19v7.38h-3v-1.38c-.3862.5463-.909.9816-1.5162 1.2624s-1.2775.3972-1.9438.3376c-2 0-3.76-1-3.76-3.38zm7.16-.82v-.95h-1.21c-1.82 0-2.88.39-2.88 1.6 0 .82.5 1.36 1.65 1.36 1.38 0 2.44-.75 2.44-2.01z" fill-rule="evenodd"/><path d="m69.7061 20.73h-2.92c.11 2.45 1.94 3.79 4.93 3.79s4.76-1.29 4.76-3.72-1.56-3.14-4.39-3.55c-1.65-.23-2.19-.53-2.19-1.23s.6-1.17 1.6-1.17c.2072-.0354.4195-.0276.6235.0227.2041.0503.3956.1421.5626.2697s.306.2883.4081.472c.1022.1836.1655.3864.1858.5956h2.88c-.28-2.6-2.16-3.5-4.67-3.5-2.31 0-4.48 1.31-4.48 3.52s1.18 3.07 4.18 3.53c1.62.24 2.29.56 2.29 1.34s-.56 1.23-1.77 1.23c-1.37 0-1.87-.6-2-1.6z"/><path clip-rule="evenodd" d="m77.2762 18.7602v-.17c-.038-.7771.0861-1.5536.3643-2.2802s.7045-1.3874 1.2519-1.9404c.5473-.553 1.2037-.9861 1.9274-1.2718.7237-.2856 1.499-.4176 2.2764-.3876 2.92 0 5.52 1.71 5.52 5.75v.87h-8.16c.09 1.88 1.11 3 2.81 3 1.45 0 2.17-.63 2.36-1.58h3c-.36 2.44-2.31 3.81-5.4 3.81-3.46-.04-5.95-2.18-5.95-5.8zm8.29-1.36c-.11-1.71-1-2.53-2.47-2.53-.6774-.0027-1.3287.2611-1.8133.7344-.4846.4734-.7635 1.1183-.7767 1.7956z" fill-rule="evenodd"/><path d="m89.4359 18.5901v.17c0 3.7 2.53 5.79 5.82 5.79s5.2401-1.86 5.4101-4.55h-2.8301c-.019.3045-.0982.6022-.2329.8759s-.3223.5181-.5519.7189c-.2297.2008-.4968.3541-.7861.4512-.2892.097-.5948.1357-.8991.114-1.77 0-2.77-1.17-2.77-3.44v-.17c0-2.17 1.09-3.38 2.71-3.38.2778-.0274.5583.0011.8249.0838.2666.0828.5139.2181.7274.398.2134.1799.3887.4007.5154.6495.1267.2487.2023.5203.2223.7987h3.0001c-.32-3.25-2.7001-4.39-5.3201-4.39-.7787-.0314-1.5555.0996-2.2809.3845s-1.3836.7176-1.9328 1.2706-.9774 1.2141-1.2574 1.9415c-.2799.7273-.4056 1.5049-.3689 2.2834z"/><path clip-rule="evenodd" d="m101.406 21.14c0-2.64 2.42-3.63 5.88-3.63h1.28v-.46c0-1.34-.41-2.07-1.84-2.07-.233-.0307-.47-.0128-.696.0524s-.437.1764-.618.3266c-.181.1501-.329.3361-.435.5462s-.168.4398-.181.6748h-3c.2-2.68 2.31-3.87 5.08-3.87s4.74 1.12 4.74 4.19v7.38h-3v-1.36c-.384.5387-.9.969-1.5 1.2493-.599.2804-1.26.4011-1.92.3507-2.06 0-3.79-1-3.79-3.38zm7.16-.82v-.95h-1.21c-1.82 0-2.88.39-2.88 1.6 0 .82.5 1.36 1.64 1.36 1.39 0 2.45-.75 2.45-2.01z" fill-rule="evenodd"/><path d="m116.756 12.9999h-3.13v11.27h3.13v-6.68c-.03-.3011.004-.6052.102-.8917.097-.2864.255-.5486.463-.7687.208-.22.46-.3928.741-.5066.28-.1138.582-.166.884-.153 1.1 0 1.77.65 1.77 2.1v6.9h3.12v-6.68c-.032-.3006.001-.6045.098-.891.096-.2865.253-.5488.46-.7691.207-.2202.459-.3932.739-.5071s.581-.166.883-.1528c1.13 0 1.78.65 1.78 2.1v6.9h3.11v-7.25c0-3-1.62-4.32-3.72-4.32-.752-.0132-1.495.1631-2.161.5126s-1.233.861-1.649 1.4874c-.237-.6302-.672-1.1662-1.24-1.527-.569-.3608-1.239-.5269-1.91-.473-.706-.0149-1.402.1637-2.014.5162s-1.115.8656-1.456 1.4838z"/><path clip-rule="evenodd" d="m132.556 13.0001h3.14v1.77c.379-.6152.911-1.1224 1.543-1.4727s1.344-.5319 2.067-.5273c2.77 0 4.93 2 4.93 5.79v.18c0 3.74-2.12 5.84-4.93 5.84-.727.0263-1.447-.1461-2.083-.4985s-1.164-.8715-1.527-1.5015v5.58h-3.14zm8.5 5.7v-.14c0-2.3-1.12-3.42-2.7-3.42s-2.77 1.14-2.77 3.42v.17c0 2.27 1.08 3.37 2.79 3.37s2.68-1.2 2.68-3.4z" fill-rule="evenodd"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
  1 | const glob = require('fast-glob');
  2 | const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
  3 | const markdownIt = require("markdown-it");
  4 | const markdownItAnchor = require('markdown-it-anchor');
  5 | const markdownItToc = require('markdown-it-toc-done-right');
  6 | 
  7 | module.exports = function(eleventyConfig) {
  8 | 
  9 |   /* --------------------------------------------------------------------------
 10 |   11ty plugins
 11 |   -------------------------------------------------------------------------- */
 12 |   eleventyConfig.addPlugin(syntaxHighlight);
 13 | 
 14 |   /* --------------------------------------------------------------------------
 15 |   filters
 16 |   -------------------------------------------------------------------------- */
 17 |   glob.sync(['_source/_filters/*.js']).forEach(file => {
 18 |     let filters = require('./' + file);
 19 |     Object.keys(filters).forEach(name => eleventyConfig.addFilter(name, filters[name]));
 20 |   });
 21 | 
 22 |   /* --------------------------------------------------------------------------
 23 |   BrowserSync settings
 24 |   -------------------------------------------------------------------------- */
 25 |   eleventyConfig.setBrowserSyncConfig({
 26 |     ui: false,
 27 |     logPrefix: false,
 28 |     files: [ // watch the files generated elsewhere
 29 |       '_public/assets/*.css',
 30 |       '_public/assets/*.js',
 31 |       '_public/assets',
 32 |       '!_public/assets/**/**.map'
 33 |     ],
 34 |     server: { // make URLs work without a .html extension
 35 |       baseDir: "_public",
 36 |       serveStaticOptions: {
 37 |           extensions: ["html"]
 38 |       }
 39 |     },
 40 |     snippetOptions: {
 41 |       rule: { // put the snippet in the head for Turbo happiness
 42 |         match: /<\/head>/i,
 43 |         fn: function (snippet, match) {
 44 |           return snippet + match;
 45 |         }
 46 |       }
 47 |     },
 48 |   });
 49 | 
 50 |   /* --------------------------------------------------------------------------
 51 |   MarkdownIt settings
 52 |   -------------------------------------------------------------------------- */
 53 |   const markdownItOptions = {
 54 |     html: true, // allow HTML markup
 55 |     typographer: true // fancy quotes
 56 |   };
 57 |   const markdownLib = markdownIt(markdownItOptions);
 58 |   markdownLib.use(markdownItAnchor, { // add anchors to headings
 59 |     level: '2',
 60 |     permalink: 'true',
 61 |     permalinkClass: 'anchor',
 62 |     permalinkSymbol: '﹟',
 63 |     permalinkBefore: 'true'
 64 |   });
 65 |   markdownLib.use(markdownItToc, { // make a TOC with ${toc}
 66 |     level: '2',
 67 |     listType: 'ul'
 68 |   });
 69 | 
 70 |   /* --------------------------------------------------------------------------
 71 |   LiquidJS settings
 72 |   -------------------------------------------------------------------------- */
 73 | 
 74 |   eleventyConfig.setLiquidOptions({
 75 |     dynamicPartials: false,
 76 |     strictFilters: false
 77 |   });
 78 | 
 79 |   /* --------------------------------------------------------------------------
 80 |   11ty settings
 81 |   -------------------------------------------------------------------------- */
 82 | 
 83 |   // overview collection - bake in ordering by 'order' front matter value
 84 |   eleventyConfig.addCollection("overview", function(collectionApi) {
 85 |     return collectionApi.getFilteredByTag("overview").sort((a, b) =>  {
 86 |       return a.data.order - b.data.order;
 87 |     });
 88 |   });
 89 | 
 90 |   // ios collection - bake in ordering by 'order' front matter value
 91 |   eleventyConfig.addCollection("ios", function(collectionApi) {
 92 |     return collectionApi.getFilteredByTag("ios").sort((a, b) =>  {
 93 |       return a.data.order - b.data.order;
 94 |     });
 95 |   });
 96 | 
 97 |   // android collection - bake in ordering by 'order' front matter value
 98 |   eleventyConfig.addCollection("android", function(collectionApi) {
 99 |     return collectionApi.getFilteredByTag("android").sort((a, b) =>  {
100 |       return a.data.order - b.data.order;
101 |     });
102 |   });
103 | 
104 |   // reference collection - bake in ordering by 'order' front matter value
105 |   eleventyConfig.addCollection("reference", function(collectionApi) {
106 |     return collectionApi.getFilteredByTag("reference").sort((a, b) =>  {
107 |       return a.data.order - b.data.order;
108 |     });
109 |   });
110 | 
111 |   eleventyConfig.setLibrary('md', markdownLib);
112 |   eleventyConfig.setDataDeepMerge(true);
113 |   eleventyConfig.addPassthroughCopy({ '_source/_assets/fonts': 'assets/fonts' });
114 |   eleventyConfig.addPassthroughCopy({ '_source/_assets/images': 'assets' });
115 | 
116 |   return {
117 |     dir: {
118 |       input: '_source',
119 |       output: '_public',
120 |       layouts: '_layouts',
121 |       includes: '_includes'
122 |     },
123 |     templateFormats: ['html', 'md', 'liquid', 'njk'],
124 |     htmlTemplateEngine: 'liquid'
125 |   };
126 | };


--------------------------------------------------------------------------------
/_source/reference/bridge_components.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: /reference/bridge-components.html
 3 | order: 04
 4 | title: "Bridge Components"
 5 | description: "Advanced details for Bridge Components"
 6 | ---
 7 | 
 8 | # Bridge Components
 9 | 
10 | ## Web Components
11 | 
12 | The `BridgeComponent` class is an extension of a Stimulus [Controller](https://stimulus.hotwired.dev/reference/controllers). You have everything available in a standard `Controller` in addition to the following Hotwire Native-specific bridge functionality:
13 | 
14 | * `static component`: The unique name of the component. This must match the name you use for the corresponding native component.
15 | * `this.platformOptingOut`: Specifies whether the controller is opted out for the current platform using the `data-controller-optout-<platform>` attribute.
16 | * `this.enabled`: Specifies whether the component is enabled and supported by the current version of the native app.
17 | * `this.bridgeElement`: Provides `this.element` for the component instance wrapped in a `BridgeElement`.
18 | * `this.send(event, data = {}, callback)`: Sends a message to the native component with the `event` name, optional JSON `data`, and a `callback` to be run when the native component replies to the message.
19 | 
20 | For example, to create a `"form"` component that displays a native submit button in your native app, you'd add the following controller, target, and title attributes to your web `<form>`:
21 | 
22 | ```html
23 | <form
24 |   method="post"
25 |   data-controller="bridge--form">
26 | 
27 |   <!-- form elements -->
28 | 
29 |   <button
30 |     class="button"
31 |     type="submit"
32 |     data-bridge--form-target="submit"
33 |     data-bridge-title="Submit">
34 |     Submit Form
35 |   </button>
36 | 
37 | </form>
38 | ```
39 | 
40 | Next, create a `BridgeComponent` with named `"form"` that sends a message to the native component with `data` that contains the form's `submitTitle`. Provide a callback to run when the native component replies to the message.
41 | 
42 | ```javascript
43 | // bridge/form_controller.js
44 | 
45 | import { BridgeComponent, BridgeElement } from "@hotwired/hotwire-native-bridge"
46 | 
47 | export default class extends BridgeComponent {
48 |   static component = "form"
49 |   static targets = [ "submit" ]
50 | 
51 |   submitTargetConnected(target) {
52 |     const submitButton = new BridgeElement(target)
53 |     const submitTitle = submitButton.title
54 | 
55 |     this.send("connect", { submitTitle }, () => {
56 |       target.click()
57 |     })
58 |   }
59 | }
60 | ```
61 | 
62 | _Note: It's recommended to place your bridge components in a `/bridge` subdirectory where your Stimulus controllers live to make them easily identifiable and isolated from your other Stimulus controllers._
63 | 
64 | ## Bridge Elements
65 | 
66 | The `BridgeElement` class lets you easily use bridge-specific data and behaviors on elements in your components. You can wrap any element in a `new BridgeElement(myElement)` within your bridge components to access the following:
67 | 
68 | * `title`: Returns the title of the element, attempting to use a `data-bridge-title` value first, the `aria-label` value second, then otherwise falling back to the element's `textContent` or `value`.
69 | * `disabled`: Returns whether the element is disabled with the `data-bridge-disabled` attribute.
70 | * `enabled`: Returns the opposite of `disabled`.
71 | * `enableForComponent(component)`: Removes the `data-bridge-disabled` attribute on the element.
72 | * `hasClass(className)`: Returns whether the element has a particular class in its `classList`.
73 | * `attribute(name)`: Returns the value of an attribute on the element.
74 | * `bridgeAttribute(name)`: Returns the value of a `data-bridge-<name>` attribute on the element.
75 | * `setBridgeAttribute(name, value)`: Sets the value of a `data-bridge-<name>` attribute on the element.
76 | * `removeBridgeAttribute(name)`: Removes the `data-bridge-<name>` attribute on the element.
77 | * `click()`: Performs a click on the element.
78 | 
79 | ## Data Attributes
80 | 
81 | The following data attributes can be applied to any element accessed via the `BridgeElement` class:
82 | 
83 | * `data-bridge-title="My Title"`: Specifies a custom bridge title for your element.
84 | * `data-bridge-disabled`: Specifies whether the bridge element should be enabled or disabled for a particular platform. Values must be `"true"`, `"false"`, `"ios"`, or `"android"`.
85 | * `data-bridge-*`: Specifies arbitrary attributes prefixed with `data-bridge-` whose values are accessible from a `BridgeElement`.
86 | 
87 | The following data attributes can be applied to elements associated with a `data-controller` and a `BridgeComponent` class:
88 | 
89 | * `data-controller-optout-ios`: Opt-out the component for your iOS app using [hotwire-native-ios](https://github.com/hotwired/hotwire-native-ios). Allows you to conditionally disable a component instance for iOS, even if the native app supports the component.
90 | * `data-controller-optout-android`: Opt-out the component for your Android app using [hotwire-native-android](https://github.com/hotwired/hotwire-native-android). Allows you to conditionally disable a component instance for Android, even if the native app supports the component.
91 | 


--------------------------------------------------------------------------------
/_source/ios/03_bridge_components.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | permalink: /ios/bridge-components.html
  3 | order: 03
  4 | title: "Bridge Components"
  5 | description: "Bridge the gap with native bridge components driven by the web on iOS."
  6 | ---
  7 | 
  8 | # Bridge Components
  9 | 
 10 | Hotwire Native abstracts the integration with its corresponding web bridge (formerly [Strada](https://dev.37signals.com/announcing-strada/)), making it even faster to get started. This assumes you've already installed the [Hotwire Native Bridge javaScript package](/reference/bridge-installation) on your server.
 11 | 
 12 | Let's walk through how to create a new component on iOS.
 13 | 
 14 | The component will add a native bar button item to the right side of the navigation bar. Tapping it will "click" the associated link in the HTML.
 15 | 
 16 | <figure>
 17 |     <img src="/assets/bridge-ios-button.png" width="500" alt="Native button component on iOS">
 18 |     Native button component on iOS
 19 | </figure>
 20 | 
 21 | Components are made of three parts: the HTML markup, a `BridgeComponent` [Stimulus](https://stimulus.hotwired.dev) controller, and the native code. The HTML configures Stimulus which passes messages to Swift.
 22 | 
 23 | ## Stimulus Controller
 24 | 
 25 | On your server, add the data attributes needed to wire up the Stimulus controller.
 26 | 
 27 | ```html
 28 | <a href="/profile" data-controller="button" data-bridge-title="Profile">
 29 |   View profile
 30 | </a>
 31 | ```
 32 | 
 33 | Then, create a new JavaScript `BridgeComponent` controller with the following.
 34 | 
 35 | ```javascript
 36 | import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
 37 | 
 38 | export default class extends BridgeComponent {
 39 |   static component = "button"
 40 | 
 41 |   connect() {
 42 |     super.connect()
 43 | 
 44 |     const element = this.bridgeElement
 45 |     const title = element.bridgeAttribute("title")
 46 |     this.send("connect", {title}, () => {
 47 |       this.element.click()
 48 |     })
 49 |   }
 50 | }
 51 | ```
 52 | 
 53 | This component identifies itself as `"button"` via the static `component` property. It will pass all messages to a native bridge component identified with the same name.
 54 | 
 55 | When `data-controller="button"` is found in the DOM then `connect()` is fired. This function calls `send()` which passes the `title` of the button in JSON to its native bridge component counterpart.
 56 | 
 57 | The third parameter of send, the callback block, is executed when the bridge component replies back to the message, which is explained below. Here, the button is clicked.
 58 | 
 59 | ## Swift Component
 60 | 
 61 | In Xcode, create a new Swift file with the following.
 62 | 
 63 | ```swift
 64 | import HotwireNative
 65 | import UIKit
 66 | 
 67 | final class ButtonComponent: BridgeComponent {
 68 |     override class var name: String { "button" }
 69 | 
 70 |     override func onReceive(message: Message) {
 71 |         guard let viewController else { return }
 72 |         addButton(via: message, to: viewController)
 73 |     }
 74 | 
 75 |     private var viewController: UIViewController? {
 76 |         delegate?.destination as? UIViewController
 77 |     }
 78 | 
 79 |     private func addButton(via message: Message, to viewController: UIViewController) {
 80 |         guard let data: MessageData = message.data() else { return }
 81 | 
 82 |         let action = UIAction { [unowned self] _ in
 83 |             self.reply(to: "connect")
 84 |         }
 85 |         let item = UIBarButtonItem(title: data.title, primaryAction: action)
 86 |         viewController.navigationItem.rightBarButtonItem = item
 87 |     }
 88 | }
 89 | 
 90 | private extension ButtonComponent {
 91 |     struct MessageData: Decodable {
 92 |         let title: String
 93 |     }
 94 | }
 95 | ```
 96 | 
 97 | First, the component identifies itself as `"button"` via `name` to match the Stimulus controller.
 98 | 
 99 | `onReceive(message:)` is called when a message is received from Stimulus. Here, the `{title}` object is unpacked to add a native button to the right side of the screen. When it's tapped, the `UIAction` is fired, replying to the message and calling the callback block, clicking the button.
100 | 
101 | Finally, register the component in `AppDelegate.swift`. This ensures that Hotwire is configured before the first URL is routed.
102 | 
103 | ```swift
104 | import HotwireNative
105 | import UIKit
106 | 
107 | @main
108 | class AppDelegate: UIResponder, UIApplicationDelegate {
109 |     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
110 |         Hotwire.registerBridgeComponents([
111 |             ButtonComponent.self
112 |         ])
113 |         return true
114 |     }
115 | }
116 | ```
117 | 
118 | ## Add CSS to Hide Bridged Elements
119 | 
120 | We've now set up `"button"` components in the web and native apps. Whenever a native app supports the `"button"` component, it'll receive a message from the web component and display its native button.
121 | 
122 | There's one final piece to finish. We want to hide the web button when a native button is being displayed in the native app. It's easy to write scoped css that is only applied if:
123 | - A particular version of the native app supports the `"button"` component
124 | - A particular element in your app is connected to a `"button"` component
125 | 
126 | ```css
127 | [data-bridge-components~="button"]
128 | [data-controller~="button"] {
129 |   display: none;
130 | }
131 | ```
132 | 


--------------------------------------------------------------------------------
/_source/android/03_bridge_components.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | permalink: /android/bridge-components.html
  3 | order: 03
  4 | title: "Bridge Components"
  5 | description: "Bridge the gap with native bridge components driven by the web on Android."
  6 | ---
  7 | 
  8 | # Bridge Components
  9 | 
 10 | Hotwire Native abstracts the integration with its corresponding web bridge (formerly [Strada](https://dev.37signals.com/announcing-strada/)), making it even faster to get started. This assumes you've already installed the [Hotwire Native Bridge javaScript package](/reference/bridge-installation) on your server.
 11 | 
 12 | Let's walk through how to create a new component on Android.
 13 | 
 14 | The component will add a native button item to the right side of the toolbar. Tapping it will "click" the associated link in the HTML.
 15 | 
 16 | <figure>
 17 |     <img src="/assets/bridge-android-button.png" width="500" alt="Native button component on Android">
 18 |     Native button component on Android
 19 | </figure>
 20 | 
 21 | Components are made of three parts: the HTML markup, a `BridgeComponent` [Stimulus](https://stimulus.hotwired.dev) controller, and the native code. The HTML configures Stimulus which passes messages to Kotlin.
 22 | 
 23 | ## Stimulus Controller
 24 | 
 25 | On your server, add the data attributes needed to wire up the Stimulus controller.
 26 | 
 27 | ```html
 28 | <a href="/profile" data-controller="button" data-bridge-title="Profile">
 29 |   View profile
 30 | </a>
 31 | ```
 32 | 
 33 | Then, create a new JavaScript `BridgeComponent` controller with the following.
 34 | 
 35 | ```javascript
 36 | import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
 37 | 
 38 | export default class extends BridgeComponent {
 39 |   static component = "button"
 40 | 
 41 |   connect() {
 42 |     super.connect()
 43 | 
 44 |     const element = this.bridgeElement
 45 |     const title = element.bridgeAttribute("title")
 46 |     this.send("connect", {title}, () => {
 47 |       this.element.click()
 48 |     })
 49 |   }
 50 | }
 51 | ```
 52 | 
 53 | This component identifies itself as `"button"` via the static `component` property. It will pass all messages to a native bridge component identified with the same name.
 54 | 
 55 | When `data-controller="button"` is found in the DOM then `connect()` is fired. This function calls `send()` which passes the `title` of the button in JSON to its native bridge component counterpart.
 56 | 
 57 | The third parameter of send, the callback block, is executed when the bridge component replies back to the message, which is explained below. Here, the button is clicked.
 58 | 
 59 | ## Kotlin Component
 60 | 
 61 | In Android Studio, create a new Kotlin file with the following.
 62 | 
 63 | ```kotlin
 64 | class ButtonComponent(
 65 |     name: String,
 66 |     private val delegate: BridgeDelegate<HotwireDestination>
 67 | ) : BridgeComponent<HotwireDestination>(name, delegate) {
 68 | 
 69 |     override fun onReceive(message: Message) {
 70 |         // Handle incoming messages based on the message `event`.
 71 |         when (message.event) {
 72 |             "connect" -> handleConnectEvent(message)
 73 |             else -> Log.w("ButtonComponent", "Unknown event for message: $message")
 74 |         }
 75 |     }
 76 | 
 77 |     private fun handleConnectEvent(message: Message) {
 78 |         val data = message.data<MessageData>() ?: return
 79 | 
 80 |         // Write native code to display a native submit button in the
 81 |         // toolbar displayed in the delegate.destination. Use the
 82 |         // incoming data.title to set the button title.
 83 |     }
 84 | 
 85 |     private fun performButtonClick(): Boolean {
 86 |         return replyTo("connect")
 87 |     }
 88 | 
 89 |     // Use kotlinx.serialization annotations to define a serializable
 90 |     // data class that represents the incoming message.data json.
 91 |     @Serializable
 92 |     data class MessageData(
 93 |         @SerialName("title") val title: String
 94 |     )
 95 | }
 96 | ```
 97 | 
 98 | This component subclasses the `BridgeComponent` available in the Android library.
 99 | 
100 | `onReceive(message)` is called when a message is received from Stimulus. Here, the `{title}` object is unpacked to add a native button to the right side of the screen. When it's tapped, the `performButtonClick()` is fired, replying to the message and calling the callback block, clicking the button.
101 | 
102 | Finally, register the component with the matching `"button"` name as the Stimulus controller. The best place for this is in an `Application` [subclass for your app](/android/configuration#create-an-application-instance), which runs immediately at app startup:
103 | 
104 | ```kotlin
105 | Hotwire.registerBridgeComponents(
106 |     BridgeComponentFactory("button", ::ButtonComponent)
107 | )
108 | ```
109 | 
110 | See the [Hotwire Native Android demo app](https://github.com/hotwired/hotwire-native-android/blob/main/demo/README.md) for a full implementation.
111 | 
112 | ## Add CSS to Hide Bridged Elements
113 | 
114 | We've now set up `"button"` components in the web and native apps. Whenever a native app supports the `"button"` component, it'll receive a message from the web component and display its native button.
115 | 
116 | There's one final piece to finish. We want to hide the web button when a native button is being displayed in the native app. It's easy to write scoped css that is only applied if:
117 | - A particular version of the native app supports the `"button"` component
118 | - A particular element in your app is connected to a `"button"` component
119 | 
120 | ```css
121 | [data-bridge-components~="button"]
122 | [data-controller~="button"] {
123 |   display: none;
124 | }
125 | ```
126 | 
127 | 


--------------------------------------------------------------------------------
/_source/_assets/css/components/_nav.scss:
--------------------------------------------------------------------------------
  1 | .nav-skip {
  2 |   clip: rect(1px, 1px, 1px, 1px);
  3 |   position: absolute !important;
  4 |   height: 1px;
  5 |   width: 1px;
  6 |   overflow: hidden;
  7 |   background-color: $color-white;
  8 | 
  9 |   &:hover,
 10 |   &:active,
 11 |   &:focus {
 12 |     clip: auto !important;
 13 |     top: 1rem;
 14 |     left: 1rem;
 15 |     width: auto;
 16 |     height: auto;
 17 |     z-index: 100000;
 18 |   }
 19 | }
 20 | 
 21 | .nav-logo {
 22 |   display: block;
 23 |   height: 2em;
 24 |   margin: 0;
 25 |   max-height: 100%;
 26 |   text-decoration: none;
 27 | 
 28 |   .logo {
 29 |     height: 100%;
 30 |     width: auto;
 31 |   }
 32 | 
 33 |   .logo__icon {
 34 |     fill: $color-brand;
 35 |   }
 36 | 
 37 |   path {
 38 |     transition: fill 0.2s ease;
 39 |   }
 40 | 
 41 |   @media(hover: hover) {
 42 | 
 43 |     &:hover path,
 44 |     &:hover rect {
 45 |       fill: $color-accent;
 46 |     }
 47 | 
 48 |     &:hover span {
 49 |       color: $color-accent;
 50 |     }
 51 |   }
 52 | 
 53 |   span {
 54 |     font-family: $mono-stack;
 55 |     font-size: $font-xxx-large;
 56 |     font-weight: 900;
 57 |     text-transform: uppercase;
 58 |     font-style: italic;
 59 |   }
 60 | }
 61 | 
 62 | .nav {
 63 | 
 64 |   @include media(small) {
 65 |     @include transform(translate(-100%, 0));
 66 |     @include transition(transform 0.3s ease-in-out);
 67 |     opacity: 0;
 68 |     position: fixed;
 69 |     overflow-y: auto;
 70 |     top: 0;
 71 |     left: 0;
 72 |     display: block;
 73 |     margin: 0;
 74 |     padding: 0 1.5em;
 75 |     width: 100%;
 76 |     height: 100%;
 77 |     z-index: 3000;
 78 |     text-align: right;
 79 |     background-color: $color-brand;
 80 |   }
 81 | 
 82 |   @include media(medium) {
 83 |     @include transform(translate(0, 0));
 84 |     @include transition(transform 0s ease-in-out);
 85 |     margin: 0;
 86 |     padding: 0;
 87 |     opacity: 1;
 88 |     background-color: $color-white;
 89 |   }
 90 | }
 91 | 
 92 | .nav__list {
 93 |   margin: 1em 0 0 0;
 94 |   text-align: right;
 95 |   list-style-type: none;
 96 |   border-top: 0.2rem solid $color-brand;
 97 | 
 98 |   @include media(medium) {
 99 |     text-align: left;
100 |   }
101 | 
102 |   &.active {
103 |     display: block;
104 |   }
105 | 
106 |   li {
107 |     margin: 0;
108 |     padding: 0;
109 |   }
110 | }
111 | 
112 | .nav__list--horizontal {
113 | 
114 |   @include media(small) {
115 |     font-size: $font-x-large;
116 |   }
117 | 
118 |   @include media(medium) {
119 |     display: flex;
120 |     margin: 0;
121 |     border: none;
122 | 
123 |     li {
124 |       margin: 0 0.25em;
125 |     }
126 |   }
127 | 
128 | }
129 | 
130 | .nav__list-link {
131 |   display: block;
132 |   margin: 0.5em 0;
133 |   padding: 0.25em 0;
134 |   font-size: $font-x-large;
135 |   font-family: $sans-stack;
136 |   font-weight: 600;
137 |   font-style: italic;
138 |   line-height: 1.25;
139 | 
140 |   &.active {
141 |     text-decoration: none;
142 |     pointer-events: none;
143 |     font-weight: 800;
144 |   }
145 | 
146 |   @include media(medium) {
147 |     line-height: 1.4;
148 |     font-size: $font-medium;
149 | 
150 |     .nav__list--horizontal & {
151 |       padding: 0;
152 |       margin: 0;
153 |     }
154 | 
155 |     .nav__list--horizontal li:not(:last-child) &::after {
156 |       display: inline-block;
157 |       margin-left: 0.5rem;
158 |       margin-right: -0.5rem;
159 |       content: "/";
160 |     }
161 |   }
162 | }
163 | 
164 | .nav__sublist {
165 |   display: none;
166 |   list-style-type: none;
167 |   margin: 0;
168 |   border-right: 0.2rem solid $color-black;
169 | 
170 |   @include media(medium) {
171 |     border-right: 0;
172 |     border-left: 0.2rem solid $color-black;
173 |   }
174 | 
175 |   &.active {
176 |     display: block;
177 |   }
178 | 
179 |   li {
180 |     margin: 0;
181 |     padding: 0 0.25em;
182 |   }
183 | }
184 | 
185 | .nav__sublist-link {
186 |   display: block;
187 |   margin: 0;
188 |   padding: 0.5em;
189 |   font-size: $font-large;
190 |   font-family: $sans-stack;
191 |   font-weight: 400;
192 |   line-height: 1.25;
193 | 
194 |   &.active {
195 |     text-decoration: none;
196 |     pointer-events: none;
197 |     font-weight: 800;
198 |   }
199 | 
200 |   @include media(medium) {
201 |     text-align: left;
202 |     margin-bottom: 0.5em;
203 |     padding: 0.25em;
204 |     font-size: $font-small;
205 |     line-height: 1.4;
206 | 
207 |     &.active {
208 |       color: $color-black;
209 |       background-color: $color-tint;
210 |       border-radius: 0.125em;
211 |     }
212 |   }
213 | }
214 | 
215 | .nav-checkbox {
216 |   display: none;
217 | }
218 | 
219 | .nav-checkbox:checked ~ .nav {
220 |   @include transform(translate(0, 0));
221 |   opacity: 1;
222 | }
223 | 
224 | .nav-mobile-button {
225 |   display: block;
226 |   margin: 0;
227 |   padding: 0.5em 1em;
228 |   cursor: pointer;
229 |   z-index: 2000;
230 |   font-family: $sans-stack;
231 |   font-size: $font-large;
232 |   font-weight: 800;
233 |   text-transform: uppercase;
234 |   background-color: $color-brand;
235 |   border-radius: 0.2rem;
236 | 
237 |   @include media(medium) {
238 |     display: none;
239 |   }
240 | 
241 |   span {
242 |     position: relative;
243 |     display: inline-flex;
244 |     top: -0.5rem;
245 |     width: 1.25em;
246 |     height: 0.2rem;
247 |     background-color: $color-white;
248 | 
249 |     &::after,
250 |     &::before {
251 |       content: '';
252 |       position: absolute;
253 |       display: block;
254 |       width: 1.25em;
255 |       height: 0.2rem;
256 |       background-color: $color-white;
257 |     }
258 | 
259 |     &::before {
260 |       margin-top: -0.3em;
261 |     }
262 | 
263 |     &::after {
264 |       margin-top: 0.3em;
265 |     }
266 |   }
267 | }
268 | 
269 | .nav-mobile-button--close {
270 |   margin: 1.5em auto 1.5em auto;
271 |   padding: 0;
272 |   background-color: $color-brand;
273 | 
274 |   span {
275 |     background-color: rgba(0, 0, 0, 0);
276 | 
277 |     &::before,
278 |     &::after {
279 |       background-color: $color-black;
280 |       margin-top: 0;
281 |     }
282 | 
283 |     &::before {
284 |       @include transform(rotate(45deg));
285 |     }
286 | 
287 |     &::after {
288 |       @include transform(rotate(-45deg));
289 |     }
290 |   }
291 | }
292 | 
293 | .nav__github-corner {
294 | 
295 |   @include media(small) {
296 |     display: none;
297 |   }
298 | 
299 |   position: absolute;
300 |   right: 0px;
301 |   z-index: 1;
302 | 
303 |   .github-corner:hover .octo-arm {
304 |     animation: octocat-wave 560ms ease-in-out
305 |   }
306 | 
307 |   @keyframes octocat-wave {
308 |     0%, 100% {
309 |       transform: rotate(0)
310 |     }
311 | 
312 |     20%, 60% {
313 |       transform: rotate(-25deg)
314 |     }
315 | 
316 |     40%, 80% {
317 |       transform: rotate(10deg)
318 |     }
319 |   }
320 | 
321 |   @media(max-width: 500px) {
322 |     .github-corner:hover .octo-arm {
323 |       animation: none
324 |     }
325 | 
326 |     .github-corner .octo-arm {
327 |       animation: octocat-wave 560ms ease-in-out
328 |     }
329 |   }
330 | 
331 |   @namespace svg url(github-corner);
332 | 
333 |   svg|a:link, svg|a:visited {
334 |     cursor: pointer;
335 |   }
336 | 
337 |   svg|a text,
338 |   text svg|a {
339 |     fill: blue;
340 |     text-decoration: underline;
341 |   }
342 | 
343 |   svg|a:hover, svg|a:active {
344 |     outline: dotted 1px blue;
345 |   }
346 | 
347 | }
348 | 


--------------------------------------------------------------------------------
/_source/reference/path_configuration.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | permalink: /reference/path-configuration.html
  3 | order: 02
  4 | title: "Path Configuration"
  5 | description: "Advanced navigation via the path configuration."
  6 | ---
  7 | 
  8 | # Path Configuration
  9 | 
 10 | The basics of *Path Configuration* are explained in the [overview](/overview/path-configuration). If you're ready to build your first Path Configuration, keep reading.
 11 | 
 12 | ## Settings
 13 | 
 14 | `settings` is your sandbox for App-level configuration. As explained in the overview, common use cases include feature flags or any additional information that your app may use to configure itself. Feel free to add or modify any objects or arrays here, always remembering to [version](/overview/path-configuration#versioning) your path configuration if you make breaking changes.
 15 | 
 16 | ```json
 17 | {
 18 |   "settings": {
 19 |     "use_local_db": true,
 20 |     "cable": {
 21 |       "script_url": "https://hotwire-native-demo.dev/configurations/action_cable.js"
 22 |     },
 23 |     "feature_flags": [
 24 |         {
 25 |           "name": "new_onboarding_flow",
 26 |           "enabled": true
 27 |         }
 28 |       ]
 29 |   }
 30 |   "rules": []
 31 | }
 32 | ```
 33 | 
 34 | ## Rules
 35 | 
 36 | `rules` contains individual entries that define how different URL path patterns should behave. Each rule consists of the `patterns` to match and the `properties` to apply.
 37 | 
 38 | ```json
 39 | {
 40 |   "settings": {},
 41 |   "rules": [
 42 |     {
 43 |       "patterns": "",
 44 |       "properties": {}
 45 |     }
 46 |   ]
 47 | }
 48 | ```
 49 | 
 50 | Entries in `rules` are read sequentially and are applied to the caught URL (via path pattern regex matching) as they are read. This means that rules earlier in the array can be overwritten by rules further down the array. It's recommended that the first rule should establish the default behavior for all patterns and subsequent rules can override this for specific behavior.
 51 | 
 52 | The following *Path Configuration* shows how a rule further down the array can override properties set by previous rules. Notice property `pull_to_refresh_enabled` is `true` for all URLs but `false` for URL path patterns matching `"/new$"`.
 53 | 
 54 | ```json
 55 | {
 56 |   "settings": {},
 57 |   "rules": [
 58 |     {
 59 |       "patterns": [
 60 |         ".*"
 61 |       ],
 62 |       "properties": {
 63 |         "context": "default",
 64 |         "pull_to_refresh_enabled": true
 65 |       }
 66 |     },
 67 |     {
 68 |       "patterns": [
 69 |         "/new$"
 70 |       ],
 71 |       "properties": {
 72 |         "context": "modal",
 73 |         "pull_to_refresh_enabled": false
 74 |       }
 75 |     }
 76 |   ]
 77 | }
 78 | ```
 79 | 
 80 | Using the above Path Configuration, when a navigation is requested to `"/"`:
 81 | 1. *Path Configuration* matches `"/"` to the first rule `".*"`
 82 | 2. *Path Configuration* sets `pull_to_refresh_enabled = true`
 83 | 3. Since the second rule does not match the URL path pattern, it is ignored.
 84 | 
 85 | However, when navigation is requested to `"/new"`:
 86 | 1. *Path Configuration* matches `"/new"` to the first rule `".*"`
 87 | 2. *Path Configuration* sets `pull_to_refresh_enabled = true`
 88 | 3. *Path Configuration* matches `"/new"` to the second rule `"/new$"`
 89 | 4. *Path Configuration* sets `pull_to_refresh_enabled = false`
 90 | 
 91 | A rule earlier in the array can be overwritten by rules further down the array.
 92 | 
 93 | 
 94 | ### Patterns
 95 | 
 96 | The `patterns` array defines regular expression patterns that will be used to match URL paths.
 97 | 
 98 | ### Properties
 99 | 
100 | The `properties` hash contains a handful of key/value pairs that Hotwire Native supports out of the box. 
101 | 
102 | * `context` — Specifies the presentation context in which the view should be displayed. Hotwire Native will determine what the navigation behavior should be based on this value and `presentation`.
103 | 	* Optional.
104 | 	* Possible values: `default` or `modal`. Defaults to `default`.
105 | * `presentation` — Specifies what style to use when presenting the given destination. Hotwire Native will determine what the navigation behavior should be based on this value and `context`.
106 | 	* Optional.
107 | 	* Possible values: `default`, `push`, `pop`, `replace`, `replace_root`, `clear_all`, `refresh`, `none`. Defaults to `default`.
108 | * `pull_to_refresh_enabled` — Whether or not pull-to-refresh should be enabled.
109 | 	* Optional.
110 | 	* Possible values: `true`, `false`. Defaults to `false` on Android and `true` on iOS.
111 | * `animated` — Specifies whether the navigation should be animated when pushing, popping, or presenting.
112 |     * Optional.
113 | 	* Possible values: `true`, `false`. Defaults to `true`.
114 |   
115 | You are free to add more properties as your app needs, but these are the ones the framework is aware of and will handle automatically.
116 | 
117 | ### Android-specific properties
118 | 
119 | * `uri` — The target destination URI to navigate to. Must map to an Activity or Fragment that has implemented the [`HotwireDestinationDeepLink`](https://github.com/hotwired/hotwire-native-android/blob/main/navigation-fragments/src/main/java/dev/hotwire/navigation/destinations/HotwireDestinationDeepLink.kt) annotation with a matching `uri` value.
120 | 	* **Required**. 
121 | 	* No explicit value options. No default value.
122 | * `fallback_uri` — Provides a fallback URI in case a destination cannot be found that maps to the `uri`. Can be useful in cases when pointing to a new `uri` that may not be available yet in older versions of the app.
123 | 	* Optional.
124 | 	* No explicit value options. No default value.
125 | * `title` —  Specifies a default title that will be displayed in the toolbar for the destination. This is most useful for native destinations, since web destinations will render their title from the web view page's `<title>` tag.
126 |     * Optional.
127 |     * No explicit value options. No default value.
128 | 
129 | ### iOS-specific properties
130 | 
131 | * `view_controller` — The identifier for a native `UIViewController` to navigate to. Conform your custom controller to `PathConfigurationIdentifiable` to it to this identifier.
132 |     * Optional.
133 |     * No explicit value options. No default value.
134 | * `modal_style` — Specifies how a modal should be presented. Make sure to set `context` to `modal`, too.
135 |     * Optional.
136 |     * Possible values (defaults to `large`):
137 |         * `large` — The default system presentation style, [*automatic*](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/automatic).
138 |         * `medium` — A half-sheet modal that can be expanded to full screen when dragged up, via [detents](https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/detents).
139 |         * [`full`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/fullscreen) — A full-screen modal, covering everything but the status bar.
140 |         * [`page_sheet`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/pagesheet) — On iPads, presents a modal that partially covers the underlying content. On iPhones, uses the default system presentation style.
141 |         * [`form_sheet`](https://developer.apple.com/documentation/uikit/uimodalpresentationstyle/formsheet) — On iPads, presents a modal centered in the screen. On iPhones, uses the default system presentation style.
142 | * `modal_dismiss_gesture_enabled` — Whether or not swiping down (or tapping outside the content on iPads) on a modal will dismiss it.
143 |     * Optional.
144 | 	* Possible values: `true`, `false`. Defaults to `true`.
145 | 


--------------------------------------------------------------------------------
/_source/reference/navigation.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | permalink: /reference/navigation.html
  3 | order: 01
  4 | title: "Navigation"
  5 | description: "How to navigate between screens with Hotwire Native."
  6 | ---
  7 | 
  8 | # Navigation
  9 | 
 10 | Navigating between screens is a core concept of building Hotwire Native apps. By default, all screens will be pushed onto the main navigation stack with animation. You can customize the navigation behavior by providing path configuration rules or manually routing in Swift or Kotlin.
 11 | 
 12 | ## Routing
 13 | 
 14 | Set `context` or `presentation` to a [path configuration](/reference/path-configuration) rule to apply the logic in the following table.
 15 | 
 16 | * **State** describes what state the app is currently in: `modal` if a modal is presented, `default` otherwise.
 17 | * **Context** is the value of the `context` property on the tapped link: `modal` or `default`. No value defaults to `default`.
 18 | * **Presentation** is the value of the `presentation` property on the tapped link: `replace`, `pop`, `refresh`, `clear_all`, `replace_root`, `none`, or `default`. No value defaults to `default`.
 19 | 
 20 | <table>
 21 |   <thead>
 22 |     <tr>
 23 |       <th>State</th>
 24 |       <th>Context</th>
 25 |       <th>Presentation</th>
 26 |       <th>Behavior</th>
 27 |     </tr>
 28 |   </thead>
 29 |   <tbody>
 30 |     <tr>
 31 |       <td><code>default</code></td>
 32 |       <td><code>default</code></td>
 33 |       <td><code>default</code></td>
 34 |       <td>
 35 |         Push on main stack (or)<br>
 36 |         Replace if visiting same page (or)<br>
 37 |         Pop then visit if previous screen is same URL
 38 |       </td>
 39 |     </tr>
 40 |     <tr>
 41 |       <td><code>default</code></td>
 42 |       <td><code>default</code></td>
 43 |       <td><code>replace</code></td>
 44 |       <td>Replace screen on main stack</td>
 45 |     </tr>
 46 |     <tr>
 47 |       <td><code>default</code></td>
 48 |       <td><code>modal</code></td>
 49 |       <td><code>default</code></td>
 50 |       <td>Present a modal with only this screen</td>
 51 |     </tr>
 52 |     <tr>
 53 |       <td><code>default</code></td>
 54 |       <td><code>modal</code></td>
 55 |       <td><code>replace</code></td>
 56 |       <td>Present a modal with only this screen</td>
 57 |     </tr>
 58 |     <tr>
 59 |       <td><code>modal</code></td>
 60 |       <td><code>default</code></td>
 61 |       <td><code>default</code></td>
 62 |       <td>Dismiss then Push on main stack</td>
 63 |     </tr>
 64 |     <tr>
 65 |       <td><code>modal</code></td>
 66 |       <td><code>default</code></td>
 67 |       <td><code>replace</code></td>
 68 |       <td>Dismiss then Replace on main stack</td>
 69 |     </tr>
 70 |     <tr>
 71 |       <td><code>modal</code></td>
 72 |       <td><code>modal</code></td>
 73 |       <td><code>default</code></td>
 74 |       <td>Push on the modal stack</td>
 75 |     </tr>
 76 |     <tr>
 77 |       <td><code>modal</code> </td>
 78 |       <td><code>modal</code></td>
 79 |       <td><code>replace</code></td>
 80 |       <td>Replace screen on modal stack</td>
 81 |     </tr>
 82 |     <tr>
 83 |       <td><code>default</code></td>
 84 |       <td>(any)</td>
 85 |       <td><code>pop</code></td>
 86 |       <td>Pop screen off main stack</td>
 87 |     </tr>
 88 |     <tr>
 89 |       <td><code>default</code></td>
 90 |       <td>(any)</td>
 91 |       <td><code>refresh</code></td>
 92 |       <td>Pop on main stack then</td>
 93 |     </tr>
 94 |     <tr>
 95 |       <td><code>modal</code></td>
 96 |       <td>(any)</td>
 97 |       <td><code>pop</code></td>
 98 |       <td>
 99 |         Pop screen off modal stack (or)<br>
100 |         Dismiss if one modal screen
101 |       </td>
102 |     </tr>
103 |     <tr>
104 |       <td><code>modal</code></td>
105 |       <td>(any)</td>
106 |       <td><code>refresh</code></td>
107 |       <td>
108 |         Pop screen off modal stack then<br>
109 |         Refresh last screen on modal stack<br>
110 |         (or)<br>
111 |         Dismiss if one modal screen then<br>
112 |         Refresh last screen on main stack
113 |       </td>
114 |     </tr>
115 |     <tr>
116 |       <td>(any)</td>
117 |       <td>(any)</td>
118 |       <td><code>clear_all</code></td>
119 |       <td>
120 |         Dismiss if modal screen then<br>
121 |         Pop to root then<br>
122 |         Refresh root screen on main stack
123 |       </td>
124 |     </tr>
125 |     <tr>
126 |       <td>(any)</td>
127 |       <td>(any)</td>
128 |       <td><code>replace_root</code></td>
129 |       <td>
130 |         Dismiss if modal screen then<br>
131 |         Pop to root then<br>
132 |         Replace root screen on main stack
133 |       </td>
134 |     </tr>
135 |     <tr>
136 |       <td>(any)</td>
137 |       <td>(any)</td>
138 |       <td><code>none</code></td>
139 |       <td>Nothing</td>
140 |     </tr>
141 |   </tbody>
142 | </table>
143 | 
144 | ### Server-Driven Routing in Rails
145 | 
146 | If you're using Ruby on Rails, the [turbo-rails](https://github.com/hotwired/turbo-rails) gem provides the following additional historical location routes. Use these to manipulate the navigation stack for Hotwire Native apps, falling back to redirecting elsewhere.
147 | 
148 | * `recede_or_redirect_to(url, **options)` - First, pops any modal screen (if present) off the navigation stack. Then, pops the visible screen off of the navigation stack.
149 | * `refresh_or_redirect_to(url, **options)` - First, pops any modal screen (if present) off the navigation stack. Then, reloads the visible screen by performing a new web request and invalidating the cache.
150 | * `resume_or_redirect_to(url **options)` - Pops any modal screen (if present) off the navigation stack. No further action is taken.
151 | 
152 | The iOS and Android frameworks (starting in version `1.2.0`) automatically support these historical location urls.
153 | 
154 | ## Route Decision Handlers
155 | 
156 | By default, all external urls outside of your app's domain open externally. The specific behavior can be customized, though. Out-of-the-box, Hotwire Native registers these route decision handlers to control how urls are routed:
157 | - `AppNavigationRouteDecisionHandler`: Routes all internal urls on your app's domain through your app.
158 | - `SafariViewControllerRouteDecisionHandler`: **(iOS Only)** Routes all external `http`/`https` urls to a [SFSafariViewController](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller) in your app.
159 | - `BrowserTabRouteDecisionHandler`: **(Android Only)** Routes all external `http`/`https` urls to a [Custom Tab](https://developer.chrome.com/docs/android/custom-tabs) in your app.
160 | - `SystemNavigationRouteDecisionHandler`: Routes all remaining external urls (such as `sms:` or `mailto:`) through device's system navigation.
161 | 
162 | If you'd like to customize this behavior you can subclass the `RouteDecisionHandler` class in your app to provide your own implementation(s). Register your app's decision handlers in order of importance. To decide how a url should be routed, the registered `RouteDecisionHandler` instances are called in order. When a matching `RouteDecisionHandler` is found for a given url, its `handle()` function is called and no other `RouteDecisionHandler` instances will be subsequently called.
163 | 
164 | **Example for iOS:**
165 | ```swift
166 | Hotwire.registerRouteDecisionHandlers([
167 |     AppNavigationRouteDecisionHandler(),
168 |     MyCustomExternalRouteDecisionHandler()
169 | ])
170 | ```
171 | 
172 | **Example for Android:**
173 | ```kotlin
174 | Hotwire.registerRouteDecisionHandlers(
175 |     AppNavigationRouteDecisionHandler(),
176 |     MyCustomExternalRouteDecisionHandler()
177 | )
178 | ```
179 | 
180 | ## Manual Navigation
181 | 
182 | `Navigator` can be used to navigate from a [native screen](/overview/native-screens) to another native screen or back to a web context.
183 | 
184 | ### iOS
185 | 
186 | ```swift
187 | let rootURL = URL(string: "...")!
188 | let navigator = Navigator()
189 | 
190 | // Visit a new page.
191 | navigator.route(rootURL.appending(path: "foo"))
192 | 
193 | // Pop the top controller off the stack.
194 | navigator.pop()
195 | 
196 | // Pop the entire stack of controllers.
197 | navigator.clearAll()
198 | ```
199 | 
200 | Disable the animation via the optional `animated` parameter.
201 | 
202 | ```swift
203 | navigator.route(rootURL.appending(path: "foo"), animated: false)
204 | navigator.pop(animated: false)
205 | navigator.clearAll(animated: false)
206 | ```
207 | 
208 | ### Android
209 | 
210 | Inside of a `HotwireActivity` class:
211 | 
212 | ```kotlin
213 | val location = "https://..."
214 | val navigator = delegate.currentNavigator
215 | 
216 | // Visit a new page.
217 | navigator?.route("$location/foo")
218 | 
219 | // Pop the backstack to the previous destination.
220 | navigator?.pop()
221 | 
222 | // Clear the navigation backstack to the start destination.
223 | navigator?.clearAll()
224 | ```
225 | 
226 | Inside of a `HotwireFragment` class:
227 | 
228 | ```kotlin
229 | val location = "https://..."
230 | 
231 | // Visit a new page.
232 | navigator.route("$location/foo")
233 | 
234 | // Pop the backstack to the previous destination.
235 | navigator.pop()
236 | 
237 | // Clear the navigation backstack to the start destination.
238 | navigator.clearAll()
239 | ```
240 | 


--------------------------------------------------------------------------------
/_source/_assets/images/logo-once.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="72" viewBox="0 0 72 72" width="72" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m2.13712 37.7018c-.15099.039-.79747.1913-1.422716-.2582-.441452-.3174-.612881-.7509-.6741265-1.0373-.0582003-.2722-.04098067-.5051-.0241841-.6394.0339006-.2708.1181596-.5181.1821156-.6865.137439-.3618.353043-.7948.599822-1.2508.503849-.931 1.264469-2.1876 2.178599-3.6371 2.16482-3.4327 7.27147-10.6805 10.64717-15.4255.9143-1.2852 1.3715-1.9279 1.3481-2.0077-.0202-.0689-.0792-.1169-.1508-.1226-.0829-.0067-.6206.5737-1.6961 1.7346-1.9243 2.0769-4.06845 4.3006-5.03708 4.9886-.11669.0828-.25029.1713-.39159.2485-.1147.0628-.35393.186-.65824.24-.2809.0498-1.14185.1068-1.70237-.6879-.426-.6039-.30178-1.2368-.27609-1.3677l.00035-.0018c.14092-.7182.734-1.2329 1.42567-1.3063 3.87835-3.1725 7.16065-7.07532 10.80535-10.50543.7088-.6671 1.3543-1.24814 1.8621-1.64969.2441-.193.5177-.39399.7835-.53901.1237-.06748.34-.17601.6074-.23496.2117-.04667.9153-.16119 1.5317.38115.5051.44441.5626 1.00931.5699 1.21655.0084.24114-.0343.43924-.0602.54291-.0548.21995-.1422.42806-.2118.58132-.1489.32772-.3708.73507-.6299 1.18185-.5262.90761-1.3046 2.14621-2.2364 3.58701-2.328 3.6002-6.4131 9.7634-8.7679 13.3072-.4896.7369-.7344 1.1053-.7098 1.1834.021.0668.0803.114.1501.1195.0816.0064.386-.3152.9948-.9582 4.199-4.4358 13.2889-13.9899 18.5742-19.18669 1.6482-1.62065 3.0776-2.97465 4.1486-3.89645.5276-.45416 1.0142-.843575 1.4194-1.109077.1922-.125947.4457-.277519.723-.37851.1376-.0500974.3638-.11894434.6401-.12685207.2845-.00814104.7451.04833397 1.1648.39298207.4494.369019.5869.849147.6214 1.153437.0328.28967-.0099.53426-.0426.67773-.0666.29212-.1887.56767-.2915.7767-.2179.44315-.5533.99028-.9521 1.59247-.8092 1.22206-2.0193 2.87908-3.4778 4.804-2.1604 2.85146-7.1188 9.07136-10.6881 13.52706-1.0813 1.3499-1.622 2.0248-1.6019 2.1068.0171.0701.0759.1217.1475.1297.084.0093.6844-.6145 1.8853-1.8621 3.6826-3.8257 8.6565-8.9647 10.9702-11.2315 1.6621-1.6283 3.1024-2.98716 4.179-3.90857.53-.45351 1.0201-.84298 1.4285-1.10654.1925-.12424.4531-.27774.7409-.37639.1428-.04894.3829-.1167.676-.11306.311.00385.7791.09396 1.1803.47293.553.52233.54 1.17505.5258 1.37525-.018.25324-.086.4616-.1273.57592-.0888.24527-.2195.49327-.3401.70452-.2532.44324-.6326 1.01714-1.0945 1.67784-.9328 1.334-2.3058 3.1682-3.957 5.3202-3.2212 4.1981-8.5901 11.0117-12.691 16.1948-1.5236 1.9257-2.2854 2.8885-2.264 2.971.0182.0704.0784.1215.1509.1278.0849.0075.908-.9011 2.5542-2.7183 5.7068-6.2996 14.0948-15.5046 19.2015-20.8596 2.1621-2.2673 4.0232-4.15428 5.4063-5.44002.6843-.63618 1.2931-1.16424 1.7833-1.52047.2347-.17051.5168-.35715.8109-.48512.144-.06263.378-.15046.6645-.17731.2895-.02714.8032-.0035 1.2744.37189.7158.57023.6383 1.37989.6216 1.52885-.0281.2508-.104.45698-.1469.56472-.095.23878-.2326.4897-.365.71396-.2771.46936-.6939 1.09197-1.2083 1.82319-1.037 1.47391-2.562 3.51791-4.4003 5.92871-4.7012 6.1652-12.8196 16.5878-17.6861 22.8214-1.0627 1.3611-1.594 2.0417-1.5728 2.1235.0181.0699.0778.1208.1496.1277.0842.0081.673-.6239 1.8506-1.888 5.323-5.7136 14.171-15.1793 19.4558-20.6629 2.0894-2.168 3.8656-3.9745 5.1552-5.2188.6401-.6177 1.1863-1.1221 1.602-1.4672.1993-.1654.4192-.3369.6306-.4663.0958-.0586.2747-.1621.4999-.2323l.0036-.0012c.1117-.0349.8881-.278 1.5907.2995.7165.589.6152 1.4111.597 1.5486-.0329.2484-.112.4528-.157.5609-.0998.2395-.2433.4933-.3833.7234-.2923.4805-.7314 1.1198-1.2743 1.873-1.0938 1.5176-2.7003 3.623-4.6357 6.1074-4.5553 5.8476-12.7144 16.0178-18.0754 22.6776-1.4105 1.7522-2.1157 2.6282-2.0952 2.7108.0174.0705.077.122.1493.1293.0846.0084.8511-.8151 2.3839-2.4622 5.0864-5.4654 12.3785-13.2503 16.6729-17.6081 2.0252-2.0552 3.7732-3.7651 5.0755-4.9252.6432-.5729 1.2231-1.0529 1.696-1.3751.2252-.1535.5077-.3282.8088-.443.1486-.0567.3914-.1342.6868-.1433.3087-.0095.798.0567 1.2284.4363.5168.4558.5756 1.0384.5762 1.2897.0006.2687-.059.4902-.0964.6114-.0791.256-.2022.5051-.3092.7039-.2263.4204-.5672.9532-.9766 1.554-.8287 1.216-2.0549 2.8789-3.5298 4.822-3.2696 4.3071-9.0656 11.669-12.8762 16.4883-1.0013 1.2664-1.502 1.8996-1.4816 1.9813.0174.0698.0763.1211.1478.1289.0838.0091.6428-.5725 1.761-1.7357 4.3806-4.5573 11.1753-11.5912 15.1744-15.5575 1.7642-1.7497 3.2769-3.2096 4.3897-4.2099.5501-.4945 1.0376-.9087 1.4248-1.1927.1835-.1346.4103-.2895.6465-.4029.111-.0534.3164-.1435.5753-.1842.2289-.0361.8385-.0832 1.3845.3828.5774.4929.6019 1.1428.5919 1.3785-.0113.268-.0806.4866-.1213.602-.0876.2483-.2182.4938-.3339.6947-.2444.4244-.6109.9695-1.0542 1.5915-.8962 1.2577-2.2182 2.985-3.8086 5.0092-3.7211 4.7358-10.4233 12.975-14.7701 18.2975-1.1093 1.3583-1.664 2.0375-1.6447 2.1197.0166.0703.0749.1224.1465.131.0839.0101.6986-.6182 1.9282-1.8748 3.8598-3.9447 9.2457-9.4182 12.4115-12.5013 1.6053-1.5634 2.9859-2.8705 4.0056-3.7665.5034-.4423.9558-.8172 1.3205-1.0759.1722-.1222.3926-.2677.6269-.374.1113-.0505.3149-.1341.5713-.1684.2343-.0314.802-.0571 1.3206.3692.4269.351.5645.8016.605 1.0805.039.269.0086.4952-.0151.6242-.0482.2617-.1427.4992-.214.6622-.1531.3498-.3858.7676-.6508 1.2083-.5407.8993-1.3484 2.1107-2.3152 3.5074-2.3545 3.4012-6.9977 9.6306-9.9876 13.6116-.7892 1.0508-1.1838 1.5762-1.1631 1.6561.0178.069.0744.1186.1451.1273.0819.01.5529-.4518 1.495-1.3753 1.5381-1.5079 3.2549-3.1242 4.2665-3.8648.1083-.0792.2287-.1626.3523-.236.092-.0547.312-.1822.5922-.251.1355-.0333.4473-.0953.8251-.0017.4678.1159.9008.4413 1.1223.9427.179.4054.1483.7676.1266.9244-.025.1811-.0738.3273-.1071.4162-.2098.559-.6942.9349-1.2425 1.0319-3.993 3.2327-7.4802 7.0759-11.3568 10.4469-.7508.6529-1.4398 1.2215-1.9873 1.6103-.2632.1869-.5622.3821-.856.5168-.1396.064-.3732.1596-.6567.1973-.2588.0344-.8859.059-1.4275-.4342-.4277-.3895-.5272-.8671-.549-1.1209-.022-.2565.016-.4695.0426-.5891.0547-.2453.1496-.4704.2229-.6297.1568-.3405.3915-.7517.6607-1.1909.5482-.8946 1.3618-2.1025 2.3345-3.4981 2.0999-3.0129 7.2364-9.6965 10.6802-14.1409.905-1.1679 1.3574-1.7518 1.3366-1.8331-.0178-.0695-.0766-.1203-.1479-.1279-.0835-.0088-.5951.5224-1.6183 1.5849-5.291 5.4942-14.7442 15.266-19.2574 19.6585-1.6082 1.5652-2.9923 2.8745-4.0164 3.7731-.5057.4437-.9603.8199-1.3272 1.0799-.1739.1232-.3941.2681-.6273.3745-.1115.0508-.3105.1326-.5601.1686-.2248.0323-.7734.0662-1.2913-.3285-.5309-.4046-.6522-.9636-.6712-1.269-.0184-.295.0392-.5398.0766-.6732.0783-.2796.2088-.5482.32-.7571.2363-.4438.597-1.0037 1.0304-1.6317.878-1.2724 2.1851-3.0113 3.7616-5.0418 3.0254-3.8968 9.3097-11.5438 13.9679-17.1756 1.5405-1.8624 2.3107-2.7936 2.2912-2.8765-.0166-.0708-.0756-.1231-.1479-.1312-.0846-.0094-.9164.8664-2.5799 2.6179-4.7504 5.0016-11.0344 11.5832-14.2276 14.7809-1.7539 1.7563-3.2514 3.2223-4.3452 4.23-.5415.4989-1.0144.9137-1.3832 1.1992-.175.1354-.385.2879-.5983.4031-.0974.0527-.2869.1486-.5284.2037-.1693.0387-.8709.1752-1.4934-.3621-.478-.4125-.577-.9402-.5925-1.2185-.0154-.2783.036-.5103.0713-.6422.0732-.2734.1954-.5358.3004-.7409.2222-.434.5603-.9774.9648-1.5836.8197-1.2283 2.0385-2.901 3.5065-4.8501 3.1347-4.1624 9.6454-12.2754 14.4157-18.1776 1.5298-1.8928 2.2948-2.8392 2.2743-2.9219-.0175-.0707-.0772-.1223-.1496-.1294-.0848-.0084-.909.8828-2.5574 2.6652-6.4096 6.9307-16.2147 17.5032-21.259 22.792-1.9897 2.0862-3.685 3.8268-4.9214 5.0245-.613.5938-1.1421 1.0824-1.5505 1.4172-.1952.16-.4182.3312-.639.4601-.1012.0591-.29.1623-.5291.2269-.156.0422-.87.2184-1.5244-.3094-.5385-.4343-.6319-1.0182-.6415-1.3045-.0098-.2905.0504-.5346.0913-.6748.0859-.2939.2279-.5889.3603-.8382.2778-.523.7057-1.1963 1.231-1.9686 1.0611-1.5601 2.6408-3.6997 4.5512-6.2065 3.9854-5.2298 12.1299-15.3049 17.7271-22.1859 1.5799-1.9423 2.3698-2.9134 2.3495-2.9962-.0173-.0707-.0769-.1226-.1493-.1299-.0848-.0085-.9357.9081-2.6374 2.7412-5.6334 6.0687-13.6084 14.6238-17.7223 18.8729-2.0928 2.1615-3.8743 3.9611-5.1707 5.197-.643.6131-1.1952 1.115-1.6188 1.4572-.2024.1635-.4315.3368-.6562.466-.1021.0587-.2957.1632-.5404.2266-.1558.0403-.913.2187-1.5709-.3692-.5729-.5121-.5762-1.1726-.5649-1.3848.0139-.2616.0813-.4791.1237-.6012.0907-.2612.2281-.5298.3589-.7647.2737-.4912.6881-1.1319 1.1976-1.8751 1.0278-1.4994 2.5455-3.5641 4.3764-5.9893 4.1679-5.5209 12.5257-16.0767 18.3491-23.3934 1.693-2.1271 2.5395-3.1907 2.5182-3.2734-.0182-.0706-.0787-.1218-.1513-.128-.0851-.0074-.9951 1.0047-2.8151 3.029-6.5217 7.2534-16.1303 17.8928-21.1858 23.2649-2.1487 2.2833-3.9897 4.187-5.3474 5.4931-.67295.6472-1.26164 1.1813-1.72616 1.5454-.22288.1748-.4802.3608-.74051.4961-.12446.0646-.33397.1629-.594.2141-.23154.0456-.80706.1117-1.36141-.2852-.49689-.3557-.6639-.8576-.70866-1.1866-.04163-.306.00225-.5657.03525-.7148.06771-.3059.19623-.5987.30658-.8247.23423-.4798.59963-1.0811 1.04001-1.7518.89272-1.3596 2.23309-3.2138 3.8541-5.376 4.191-5.5901 13.0756-16.6413 18.6405-23.5196 1.3052-1.6133 1.9578-2.4199 1.9377-2.5023-.0171-.0704-.0763-.1222-.1484-.1299-.0843-.009-.7975.7448-2.2237 2.2522-5.0255 5.3118-12.3312 12.9994-15.9476 16.6415-1.6399 1.6515-3.04492 3.0325-4.07714 3.9813-.51021.469-.96277.8635-1.32215 1.136-.16984.1288-.382.2793-.60376.3923-.1032.0525-.29984.1451-.55038.1924-.20912.0395-.84.1177-1.41177-.3583-.55005-.4579-.61145-1.065-.61097-1.3233.00051-.274.06379-.4982.10186-.617.08111-.2532.20599-.4987.31298-.6925.22708-.4113.56835-.9336.97774-1.5226.82886-1.1925 2.0547-2.8261 3.52865-4.7363 3.50874-4.5473 10.85144-13.5243 15.87054-19.6244 1.3864-1.6849 2.0796-2.5273 2.06-2.61-.0167-.0707-.0757-.1229-.1478-.131-.0845-.0094-.8357.7791-2.3382 2.3562-5.1487 5.4043-12.5116 13.1087-16.19567 16.8512-1.61935 1.6451-3.00428 3.0219-4.01928 3.9718-.50232.4701-.94371.8638-1.29077 1.1373-.16491.13-.36379.2773-.5673.3907-.09411.0525-.27145.145-.49726.2032z" fill="#000" fill-rule="evenodd"/></svg>
2 | 


--------------------------------------------------------------------------------
/_source/_assets/images/waves-pattern-4.svg:
--------------------------------------------------------------------------------
  1 | <svg width="1540" height="636" viewBox="0 0 1540 636" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 | <path d="M258 14C243.949 28.0514 217.557 29.7627 200.5 19.1339M161.5 2.00231C170.538 1.91862 179.608 4.10441 187 8.55968" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
  3 | <path d="M258 14C274 -2 306 -2 322 14C338 30 370 30 386 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
  4 | <path d="M386 14C402 -2 434 -2 450 14C466 30 498 30 514 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
  5 | <path d="M514 14C530 -2 562 -2 578 14C594 30 626 30 642 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
  6 | <path d="M642 14C658 -2 690 -2 706 14C722 30 754 30 770 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
  7 | <path d="M770 14C786 -2 818 -2 834 14C850 30 882 30 898 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
  8 | <path d="M898 14C914 -2 946 -2 962 14C978 30 1010 30 1026 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
  9 | <path d="M1026 14C1042 -2 1074 -2 1090 14C1106 30 1138 30 1154 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 10 | <path d="M1154 14C1170 -2 1202 -2 1218 14C1234 30 1266 30 1282 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 11 | <path d="M1282 14C1298 -2 1330 -2 1346 14C1362 30 1394 30 1410 14" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 12 | <path d="M1410 14C1424.05 -0.051384 1450.44 -1.76268 1467.5 8.86611M1538 14C1523.67 28.329 1496.51 29.8255 1479.5 18.4894" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 13 | <path d="M2 46C18 30 50 30 66 46C70.9508 50.9508 77.4334 54.3697 84.5 56.2567M130 46C123.788 52.2123 115.163 56.0126 106 57.4008" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 14 | <path d="M130 46C146 30 178 30 194 46C210 62 242 62 258 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 15 | <path d="M258 46C274 30 306 30 322 46C338 62 370 62 386 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 16 | <path d="M386 46C402 30 434 30 450 46C466 62 498 62 514 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 17 | <path d="M514 46C530 30 562 30 578 46C594 62 626 62 642 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 18 | <path d="M642 46C658 30 690 30 706 46C722 62 754 62 770 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 19 | <path d="M770 46C786 30 818 30 834 46C850 62 882 62 898 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 20 | <path d="M898 46C914 30 946 30 962 46C978 62 1010 62 1026 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 21 | <path d="M1026 46C1042 30 1074 30 1090 46C1106 62 1138 62 1154 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 22 | <path d="M1154 46C1170 30 1202 30 1218 46C1234 62 1266 62 1282 46" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 23 | <path d="M1282 46C1288.66 39.3375 1298.1 35.4493 1308 34.3354M1410 46C1394 62 1362 62 1346 46C1339.79 39.7877 1331.16 35.9875 1322 34.5993" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 24 | <path d="M1410 46C1426 30 1458 30 1474 46C1476.75 48.7486 1479.97 51.025 1483.5 52.8292M1506.5 57.9977C1502.8 58.032 1499.09 57.6858 1495.5 56.9592" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 25 | <path d="M130 78C121.778 86.2222 109.33 90.2192 97 89.9907" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 26 | <path d="M130 78C146 62 178 62 194 78C210 94 242 94 258 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 27 | <path d="M258 78C274 62 306 62 322 78C338 94 370 94 386 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 28 | <path d="M386 78C402 62 434 62 450 78C466 94 498 94 514 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 29 | <path d="M514 78C530 62 562 62 578 78C594 94 626 94 642 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 30 | <path d="M642 78C658 62 690 62 706 78C722 94 754 94 770 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 31 | <path d="M770 78C786 62 818 62 834 78C850 94 882 94 898 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 32 | <path d="M898 78C914 62 946 62 962 78C978 94 1010 94 1026 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 33 | <path d="M1026 78C1042 62 1074 62 1090 78C1106 94 1138 94 1154 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 34 | <path d="M1154 78C1170 62 1202 62 1218 78C1234 94 1266 94 1282 78" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 35 | <path d="M1282 78C1298 62 1330 62 1346 78C1352.33 84.3252 1361.15 88.1499 1370.5 89.4741M1410 78C1403.23 84.7746 1393.58 88.6807 1383.5 89.7184" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 36 | <path d="M130 110C146 94 178 94 194 110C210 126 242 126 258 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 37 | <path d="M258 110C274 94 306 94 322 110C338 126 370 126 386 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 38 | <path d="M386 110C402 94 434 94 450 110C466 126 498 126 514 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 39 | <path d="M514 110C530 94 562 94 578 110C594 126 626 126 642 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 40 | <path d="M642 110C658 94 690 94 706 110C722 126 754 126 770 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 41 | <path d="M770 110C786 94 818 94 834 110C850 126 882 126 898 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 42 | <path d="M898 110C914 94 946 94 962 110C978 126 1010 126 1026 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 43 | <path d="M1026 110C1042 94 1074 94 1090 110C1106 126 1138 126 1154 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 44 | <path d="M1154 110C1168.11 95.8899 1194.66 94.2232 1211.71 105M1282 110C1267.81 124.189 1241.04 125.795 1224 114.817" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 45 | <path d="M1282 110C1298 94 1330 94 1346 110" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 46 | <path d="M258 142C244.22 155.78 218.573 157.692 201.5 147.737M161.5 130.002C169.739 129.926 178.004 131.735 185 135.431" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 47 | <path d="M258 142C274 126 306 126 322 142C338 158 370 158 386 142" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 48 | <path d="M386 142C402 126 434 126 450 142C466 158 498 158 514 142" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 49 | <path d="M514 142C530 126 562 126 578 142C594 158 626 158 642 142" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 50 | <path d="M642 142C658 126 690 126 706 142C722 158 754 158 770 142" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 51 | <path d="M770 142C786 126 818 126 834 142C850 158 882 158 898 142" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 52 | <path d="M898 142C914 126 946 126 962 142C978 158 1010 158 1026 142" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 53 | <path d="M1026 142C1042 126 1074 126 1090 142C1106 158 1138 158 1154 142" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 54 | <path d="M1154 142C1170 126 1202 126 1218 142C1232.53 156.532 1260.26 157.865 1277.22 146" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 55 | <path d="M1410 142C1403 148.998 1392.94 152.936 1382.5 153.812M1286.5 138.2C1303.43 126.12 1331.39 127.387 1346 142C1352.55 148.55 1361.78 152.419 1371.5 153.606" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 56 | <path d="M1410 142C1418.11 133.889 1430.33 129.89 1442.5 130.002" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 57 | <path d="M130 174C114 190 82 190 66 174C57.8889 165.889 45.6659 161.89 33.5 162.002" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 58 | <path d="M130 174C146 158 178 158 194 174C199.758 179.758 207.589 183.444 216 185.058M258 174C252.242 179.758 244.411 183.444 236 185.058" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 59 | <path d="M258 174C274 158 306 158 322 174C338 190 370 190 386 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 60 | <path d="M386 174C402 158 434 158 450 174C466 190 498 190 514 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 61 | <path d="M514 174C530 158 562 158 578 174C594 190 626 190 642 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 62 | <path d="M642 174C658 158 690 158 706 174C722 190 754 190 770 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 63 | <path d="M770 174C786 158 818 158 834 174C850 190 882 190 898 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 64 | <path d="M898 174C914 158 946 158 962 174C978 190 1010 190 1026 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 65 | <path d="M1026 174C1042 158 1074 158 1090 174C1106 190 1138 190 1154 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 66 | <path d="M1154 174C1170 158 1202 158 1218 174C1234 190 1266 190 1282 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 67 | <path d="M1282 174C1298 158 1330 158 1346 174C1362 190 1394 190 1410 174" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 68 | <path d="M1410 174C1416.55 167.45 1425.78 163.581 1435.5 162.394M1474 174C1467.45 167.45 1458.22 163.581 1448.5 162.394" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 69 | <path d="M2 206C15.6458 192.354 40.9294 190.346 58 199.976M130 206C116.618 219.382 92.0447 221.572 75 212.569" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 70 | <path d="M130 206C146 190 178 190 194 206C210 222 242 222 258 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 71 | <path d="M258 206C274 190 306 190 322 206C338 222 370 222 386 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 72 | <path d="M386 206C402 190 434 190 450 206C466 222 498 222 514 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 73 | <path d="M514 206C530 190 562 190 578 206C594 222 626 222 642 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 74 | <path d="M642 206C658 190 690 190 706 206C722 222 754 222 770 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 75 | <path d="M770 206C786 190 818 190 834 206C850 222 882 222 898 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 76 | <path d="M898 206C914 190 946 190 962 206C978 222 1010 222 1026 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 77 | <path d="M1026 206C1042 190 1074 190 1090 206C1106 222 1138 222 1154 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 78 | <path d="M1154 206C1170 190 1202 190 1218 206C1234 222 1266 222 1282 206" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 79 | <path d="M1282 206C1288.55 199.45 1297.78 195.581 1307.5 194.394M1410 206C1394 222 1362 222 1346 206C1339.23 199.226 1329.58 195.319 1319.5 194.282" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 80 | <path d="M130 238C114 254 82 254 66 238C64.329 236.329 62.4835 234.833 60.5 233.511M34 226C37.8783 226 41.7567 226.418 45.5 227.253" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 81 | <path d="M130 238C135.644 232.356 143.279 228.703 151.5 227.041M258 238C242 254 210 254 194 238C188.356 232.356 180.721 228.703 172.5 227.041" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 82 | <path d="M258 238C274 222 306 222 322 238C338 254 370 254 386 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 83 | <path d="M386 238C402 222 434 222 450 238C466 254 498 254 514 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 84 | <path d="M514 238C530 222 562 222 578 238C594 254 626 254 642 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 85 | <path d="M642 238C658 222 690 222 706 238C722 254 754 254 770 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 86 | <path d="M770 238C786 222 818 222 834 238C850 254 882 254 898 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 87 | <path d="M898 238C914 222 946 222 962 238C978 254 1010 254 1026 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 88 | <path d="M1026 238C1042 222 1074 222 1090 238C1106 254 1138 254 1154 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 89 | <path d="M1154 238C1170 222 1202 222 1218 238C1234 254 1266 254 1282 238" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 90 | <path d="M1282 238C1296.61 223.387 1324.57 222.12 1341.5 234.2M1410 238C1403.23 244.775 1393.58 248.681 1383.5 249.718M1351 242.15C1357.15 246.392 1364.69 248.915 1372.5 249.718" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 91 | <path d="M1410 238C1426 222 1458 222 1474 238C1482 246 1494 250 1506 250" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 92 | <path d="M130 270C146 254 178 254 194 270C210 286 242 286 258 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 93 | <path d="M258 270C274 254 306 254 322 270C338 286 370 286 386 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 94 | <path d="M386 270C402 254 434 254 450 270C466 286 498 286 514 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 95 | <path d="M514 270C530 254 562 254 578 270C594 286 626 286 642 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 96 | <path d="M642 270C658 254 690 254 706 270C722 286 754 286 770 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 97 | <path d="M770 270C786 254 818 254 834 270C850 286 882 286 898 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 98 | <path d="M898 270C914 254 946 254 962 270C978 286 1010 286 1026 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
 99 | <path d="M1026 270C1042 254 1074 254 1090 270C1095.87 275.872 1103.9 279.589 1112.5 281.151M1154 270C1147.23 276.775 1137.58 280.681 1127.5 281.718" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
100 | <path d="M1154 270C1170 254 1202 254 1218 270C1234 286 1266 286 1282 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
101 | <path d="M1282 270C1298 254 1330 254 1346 270C1362 286 1394 286 1410 270" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
102 | <path d="M1410 270C1426 254 1458 254 1474 270C1480.55 276.55 1489.78 280.419 1499.5 281.606M1538 270C1531.11 276.886 1521.26 280.809 1511 281.768" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
103 | <path d="M66 302C79.3817 315.382 103.955 317.572 121 308.569" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
104 | <path d="M258 302C242 318 210 318 194 302C179.949 287.949 153.557 286.237 136.5 296.866" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
105 | <path d="M258 302C274 286 306 286 322 302C338 318 370 318 386 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
106 | <path d="M386 302C402 286 434 286 450 302C466 318 498 318 514 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
107 | <path d="M514 302C530 286 562 286 578 302C594 318 626 318 642 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
108 | <path d="M642 302C658 286 690 286 706 302C722 318 754 318 770 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
109 | <path d="M770 302C786 286 818 286 834 302C850 318 882 318 898 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
110 | <path d="M898 302C914 286 946 286 962 302C978 318 1010 318 1026 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
111 | <path d="M1026 302C1042 286 1074 286 1090 302C1106 318 1138 318 1154 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
112 | <path d="M1154 302C1170 286 1202 286 1218 302C1234 318 1266 318 1282 302" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
113 | <path d="M1282 302C1296.76 287.242 1325.13 286.096 1342 298.563M1410 302C1395.1 316.905 1366.31 317.925 1349.5 305.061" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
114 | <path d="M1410 302C1418.11 293.889 1430.33 289.89 1442.5 290.002" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
115 | <path d="M194 334C210 350 242 350 258 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
116 | <path d="M258 334C263.067 328.933 269.74 325.47 277 323.613M386 334C370 350 338 350 322 334C316.933 328.933 310.26 325.47 303 323.613" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
117 | <path d="M386 334C402 318 434 318 450 334C466 350 498 350 514 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
118 | <path d="M514 334C530 318 562 318 578 334C594 350 626 350 642 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
119 | <path d="M642 334C658 318 690 318 706 334C722 350 754 350 770 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
120 | <path d="M770 334C786 318 818 318 834 334C850 350 882 350 898 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
121 | <path d="M898 334C914 318 946 318 962 334C978 350 1010 350 1026 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
122 | <path d="M1026 334C1042 318 1074 318 1090 334C1106 350 1138 350 1154 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
123 | <path d="M1154 334C1170 318 1202 318 1218 334C1234 350 1266 350 1282 334" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
124 | <path d="M1282 334C1289.11 326.89 1299.38 322.94 1310 322.148M1410 334C1394 350 1362 350 1346 334C1339.56 327.562 1330.53 323.715 1321 322.457" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
125 | <path d="M130 366C122 374 110 378 98 378" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
126 | <path d="M130 366C146 350 178 350 194 366C210 382 242 382 258 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
127 | <path d="M258 366C274 350 306 350 322 366C338 382 370 382 386 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
128 | <path d="M386 366C402 350 434 350 450 366C466 382 498 382 514 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
129 | <path d="M514 366C519.414 360.586 526.661 357.003 534.5 355.253M642 366C626 382 594 382 578 366C572.586 360.586 565.339 357.003 557.5 355.253" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
130 | <path d="M642 366C658 350 690 350 706 366C722 382 754 382 770 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
131 | <path d="M770 366C786 350 818 350 834 366C850 382 882 382 898 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
132 | <path d="M898 366C914 350 946 350 962 366C978 382 1010 382 1026 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
133 | <path d="M1026 366C1042 350 1074 350 1090 366C1106 382 1138 382 1154 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
134 | <path d="M1154 366C1170 350 1202 350 1218 366C1234 382 1266 382 1282 366" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
135 | <path d="M1282 366C1298 350 1330 350 1346 366C1360.9 380.905 1389.69 381.925 1406.5 369.061" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
136 | <path d="M1505.5 377.998C1493.67 377.888 1481.89 373.889 1474 366C1466.89 358.89 1456.62 354.94 1446 354.148M1413.5 362.939C1420.28 357.748 1429.02 354.818 1438 354.148" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
137 | <path d="M66 398C82 414 114 414 130 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
138 | <path d="M130 398C142.867 385.133 166.081 382.614 183 390.441M258 398C245.633 410.367 223.708 413.175 207 406.425" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
139 | <path d="M258 398C274 382 306 382 322 398C338 414 370 414 386 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
140 | <path d="M386 398C402 382 434 382 450 398C466 414 498 414 514 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
141 | <path d="M514 398C530 382 562 382 578 398C594 414 626 414 642 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
142 | <path d="M642 398C658 382 690 382 706 398C722 414 754 414 770 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
143 | <path d="M770 398C786 382 818 382 834 398C850 414 882 414 898 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
144 | <path d="M898 398C914 382 946 382 962 398C978 414 1010 414 1026 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
145 | <path d="M1026 398C1040.05 383.949 1066.44 382.237 1083.5 392.866M1154 398C1139.81 412.189 1113.04 413.795 1096 402.817" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
146 | <path d="M1154 398C1170 382 1202 382 1218 398C1234 414 1266 414 1282 398" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
147 | <path d="M1282 398C1290.22 389.778 1302.67 385.781 1315 386.009" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
148 | <path d="M130 430C114 446 82 446 66 430C57.7778 421.778 45.3302 417.781 33 418.009" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
149 | <path d="M130 430C146 414 178 414 194 430C210 446 242 446 258 430" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
150 | <path d="M258 430C274 414 306 414 322 430C338 446 370 446 386 430" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
151 | <path d="M386 430C399.513 416.487 424.439 414.387 441.5 423.699M514 430C500.618 443.382 476.045 445.572 459 436.569" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
152 | <path d="M514 430C530 414 562 414 578 430C594 446 626 446 642 430" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
153 | <path d="M642 430C658 414 690 414 706 430C722 446 754 446 770 430" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
154 | <path d="M770 430C786 414 818 414 834 430C850 446 882 446 898 430" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
155 | <path d="M898 430C914 414 946 414 962 430C978 446 1010 446 1026 430" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
156 | <path d="M1026 430C1042 414 1074 414 1090 430C1106 446 1138 446 1154 430" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
157 | <path d="M1154 430C1170 414 1202 414 1218 430C1232.76 444.758 1261.13 445.904 1278 433.437" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
158 | <path d="M1378 442C1366 442 1354 438 1346 430C1331.53 415.53 1303.97 414.146 1287 425.85" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
159 | <path d="M2 462C5.13321 458.867 8.87997 456.347 13 454.441M130 462C114 478 82 478 66 462C56.6625 452.663 41.8757 448.774 28 450.335" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
160 | <path d="M130 462C135.986 456.014 144.211 452.268 153 450.761M258 462C242 478 210 478 194 462C188.701 456.701 181.647 453.157 174 451.368" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
161 | <path d="M258 462C274 446 306 446 322 462C338 478 370 478 386 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
162 | <path d="M386 462C402 446 434 446 450 462C466 478 498 478 514 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
163 | <path d="M514 462C530 446 562 446 578 462C594 478 626 478 642 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
164 | <path d="M642 462C658 446 690 446 706 462C722 478 754 478 770 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
165 | <path d="M770 462C786 446 818 446 834 462C850 478 882 478 898 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
166 | <path d="M898 462C914 446 946 446 962 462C978 478 1010 478 1026 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
167 | <path d="M1026 462C1042 446 1074 446 1090 462C1106 478 1138 478 1154 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
168 | <path d="M1154 462C1170 446 1202 446 1218 462C1234 478 1266 478 1282 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
169 | <path d="M1282 462C1298 446 1330 446 1346 462C1362 478 1394 478 1410 462" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
170 | <path d="M1410 462C1416.77 455.225 1426.42 451.319 1436.5 450.281M1538 462C1535.51 464.487 1532.64 466.587 1529.5 468.301M1446 450.148C1456.62 450.94 1466.89 454.89 1474 462C1485.4 473.402 1504.93 476.678 1521 471.83" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
171 | <path d="M130 494C146 478 178 478 194 494C210 510 242 510 258 494" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
172 | <path d="M258 494C274 478 306 478 322 494C338 510 370 510 386 494" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
173 | <path d="M386 494C402 478 434 478 450 494C466 510 498 510 514 494" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
174 | <path d="M514 494C530 478 562 478 578 494C591.646 507.646 616.929 509.654 634 500.024" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
175 | <path d="M770 494C754 510 722 510 706 494C692.085 480.085 666.069 478.272 649 488.56" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
176 | <path d="M770 494C786 478 818 478 834 494C850 510 882 510 898 494" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
177 | <path d="M898 494C914 478 946 478 962 494C978 510 1010 510 1026 494" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
178 | <path d="M1026 494C1042 478 1074 478 1090 494C1106 510 1138 510 1154 494" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
179 | <path d="M1154 494C1170 478 1202 478 1218 494C1234 510 1266 510 1282 494" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
180 | <path d="M1282 494C1289.22 486.779 1299.7 482.817 1310.5 482.114M1410 494C1394 510 1362 510 1346 494C1339.45 487.45 1330.22 483.581 1320.5 482.394" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
181 | <path d="M1410 494C1424.76 479.242 1453.13 478.096 1470 490.563M1506 506C1495.86 506 1485.73 503.146 1478 497.437" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
182 | <path d="M2 526C15.6458 512.354 40.9294 510.346 58 519.976M130 526C116.487 539.513 91.5609 541.613 74.5 532.301" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
183 | <path d="M130 526C146 510 178 510 194 526C210 542 242 542 258 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
184 | <path d="M258 526C274 510 306 510 322 526C338 542 370 542 386 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
185 | <path d="M386 526C402 510 434 510 450 526C456.099 532.099 464.523 535.873 473.5 537.323M514 526C507.901 532.099 499.477 535.873 490.5 537.323" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
186 | <path d="M514 526C530 510 562 510 578 526C594 542 626 542 642 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
187 | <path d="M642 526C658 510 690 510 706 526C722 542 754 542 770 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
188 | <path d="M770 526C775.986 520.014 784.211 516.268 793 514.761M898 526C882 542 850 542 834 526C828.014 520.014 819.789 516.268 811 514.761" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
189 | <path d="M898 526C914 510 946 510 962 526C978 542 1010 542 1026 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
190 | <path d="M1026 526C1042 510 1074 510 1090 526C1106 542 1138 542 1154 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
191 | <path d="M1154 526C1170 510 1202 510 1218 526C1234 542 1266 542 1282 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
192 | <path d="M1282 526C1298 510 1330 510 1346 526C1352.77 532.775 1362.42 536.681 1372.5 537.718M1410 526C1403.23 532.775 1393.58 536.681 1383.5 537.718" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
193 | <path d="M1410 526C1426 510 1458 510 1474 526" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
194 | <path d="M258 558C263.067 552.933 269.74 549.47 277 547.612M386 558C370 574 338 574 322 558C315.002 551.002 304.943 547.064 294.5 546.188" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
195 | <path d="M386 558C402 542 434 542 450 558C466 574 498 574 514 558" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
196 | <path d="M514 558C530 542 562 542 578 558C594 574 626 574 642 558" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
197 | <path d="M642 558C658 542 690 542 706 558C722 574 754 574 770 558" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
198 | <path d="M770 558C786 542 818 542 834 558C850 574 882 574 898 558" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
199 | <path d="M898 558C914 542 946 542 962 558C978 574 1010 574 1026 558" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
200 | <path d="M1026 558C1042 542 1074 542 1090 558C1106 574 1138 574 1154 558" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
201 | <path d="M1154 558C1170 542 1202 542 1218 558C1234 574 1266 574 1282 558" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
202 | <path d="M1282 558C1298 542 1330 542 1346 558C1360.76 572.758 1389.13 573.904 1406 561.437" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
203 | <path d="M1442.5 546.002C1431.94 545.905 1421.34 548.904 1413.42 555" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
204 | <path d="M194 590C210 606 242 606 258 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
205 | <path d="M258 590C274 574 306 574 322 590C338 606 370 606 386 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
206 | <path d="M386 590C402 574 434 574 450 590C466 606 498 606 514 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
207 | <path d="M514 590C530 574 562 574 578 590C594 606 626 606 642 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
208 | <path d="M642 590C658 574 690 574 706 590C722 606 754 606 770 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
209 | <path d="M770 590C786 574 818 574 834 590C850 606 882 606 898 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
210 | <path d="M898 590C914 574 946 574 962 590C978 606 1010 606 1026 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
211 | <path d="M1026 590C1042 574 1074 574 1090 590C1106 606 1138 606 1154 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
212 | <path d="M1154 590C1170 574 1202 574 1218 590C1234 606 1266 606 1282 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
213 | <path d="M1282 590C1298 574 1330 574 1346 590C1362 606 1394 606 1410 590" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
214 | <path d="M1410 590C1426 574 1458 574 1474 590C1482 598 1494 602 1506 602" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
215 | <path d="M258 622C251.788 628.212 243.163 632.013 234 633.401M162 610C174 610 186 614 194 622C200.212 628.212 208.837 632.013 218 633.401" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
216 | <path d="M258 622C274 606 306 606 322 622C338 638 370 638 386 622" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
217 | <path d="M386 622C402 606 434 606 450 622C466 638 498 638 514 622" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
218 | <path d="M514 622C527.78 608.22 553.427 606.308 570.5 616.263M642 622C628.354 635.646 603.071 637.654 586 628.024" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
219 | <path d="M642 622C658 606 690 606 706 622C722 638 754 638 770 622" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
220 | <path d="M770 622C786 606 818 606 834 622C850 638 882 638 898 622" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
221 | <path d="M898 622C914 606 946 606 962 622C978 638 1010 638 1026 622" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
222 | <path d="M1026 622C1042 606 1074 606 1090 622C1106 638 1138 638 1154 622" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
223 | <path d="M1154 622C1161 615.002 1171.06 611.064 1181.5 610.188M1282 622C1266 638 1234 638 1218 622C1211.45 615.45 1202.22 611.581 1192.5 610.394" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
224 | <path d="M1282 622C1298 606 1330 606 1346 622C1352.66 628.663 1362.1 632.551 1372 633.665M1410 622C1403.34 628.663 1393.9 632.551 1384 633.665" stroke="#C18BF4" stroke-width="4" stroke-linecap="round"/>
225 | </svg>
226 | 


--------------------------------------------------------------------------------