1<!doctype html> 2 3 4 5 6<html 7 dir="ltr" 8 lang="en" 9 10> 11 <head> 12 <meta charset="utf-8"> 13 <meta name="viewport" content="width=device-width, initial-scale=1"> 14 <meta name="theme-color" content="rebeccapurple"> 15 <link rel="stylesheet" href="/assets/css/app.css"> 16 <link 17 rel="shortcut icon" 18 type="image/png" 19 20 href="/favicon.png" 21 22 > 23
23<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
23 24 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"> 25 26 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css"> 27 28 <!-- Begin Jekyll SEO tag v2.8.0 --> 29<title>olelo-honua | An i18n library designed to simplify the process of translating and managing locale files for applications.</title> 30<meta name="generator" content="Jekyll v3.10.0" /> 31<meta property="og:title" content="olelo-honua" /> 32<meta property="og:locale" content="en_US" /> 33<meta name="description" content="An i18n library designed to simplify the process of translating and managing locale files for applications." /> 34<meta property="og:description" content="An i18n library designed to simplify the process of translating and managing locale files for applications." /> 35<link rel="canonical" href="https://www.olelohonua.com/docs/remix_integrations.html" /> 36<meta property="og:url" content="https://www.olelohonua.com/docs/remix_integrations.html" /> 37<meta property="og:site_name" content="olelo-honua" /> 38<meta property="og:type" content="website" /> 39<meta name="twitter:card" content="summary" /> 40<meta property="twitter:title" content="olelo-honua" />
41<script type="application/ld+json"> 42{"@context":"https://schema.org","@type":"WebPage","description":"An i18n library designed to simplify the process of translating and managing locale files for applications.","headline":"olelo-honua","url":"https://www.olelohonua.com/docs/remix_integrations.html"}</script>
42 43<!-- End Jekyll SEO tag --> 44 45
45<script> 46 // Define dataLayer and the gtag function. 47 window.dataLayer = window.dataLayer || []; 48 function gtag() { 49 dataLayer.push(arguments); 50 } 51 52 // Set default consent to 'denied' as a placeholder 53 // Determine actual values based on your own requirements 54 gtag('consent', 'default', { 55 ad_storage: 'denied', 56 ad_user_data: 'denied', 57 ad_personalization: 'denied', 58 analytics_storage: 'denied', 59 }); 60</script>
60 61<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 61-62
61 62<script async src="https://www.googletagmanager.com/gtag/js?id=
62G-6JFSY25SGS
vendor: 12 bytes, line 62
62"></script>
63<script> 64
vendor: 155 bytes, lines 64-70
64window.dataLayer = window.dataLayer || []; 65 function gtag() { 66 dataLayer.push(arguments); 67 } 68 69 gtag('js', new Date()); 70 gtag('config', '
70G-6JFSY25SGS
vendor: 4 bytes, line 70
70');
71</script>
71 72
73<script> 74 function consentGrantedAdStorage() { 75 gtag('consent', 'update', { 76 ad_storage: 'granted', 77 ad_user_data: 'granted', 78 ad_personalization: 'granted', 79 analytics_storage: 'granted', 80 }); 81 } 82</script>
82 83<!-- Favicon --> 84<link 85 rel="icon" 86 href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>ðº</text></svg>" 87/> 88 89<!-- Additional Meta Tags --> 90<meta 91 name="keywords" 92 content="i18n, internationalization, automatic i18n, easy i18n, ai i18n, llm i18n, localization, l10n, translation, multilingual, language support, i18n java, i18n npm package, node.js i18n, node i18n, javascript i18n, typescript i18n, react i18n, react internationalization, react translation, nextjs i18n, nextjs internationalization, remix i18n, remix internationalization, remix translation, vue i18n, shopify i18n, shopify translation, i18n cli, website localization, global audience, Ê»Ålelo Honua, olelo honua" 93/> 94<meta name="author" content="brownrw8" /> 95
96<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
96 97 98<!-- GitHub Buttons -->
99<script async defer src="https://buttons.github.io/buttons.js"></script>
99 100</head> 101 102 <body> 103 104 <div class=""> 105 <div class="container py-6 px-4" id="cookieBanner"> 106 <div class="columns"> 107 <div class="column is-fullwidth"> 108 <div class="content"> 109 <p>This site uses cookies to enhance your user experience</p> 110 <p>By clicking the Accept button, you agree to us doing so.</p> 111 </div> 112 113 <div class="buttons mt-4"> 114 <button class="button is-primary" onclick="acceptCookies()"> 115 Accept all cookies 116 </button> 117 <button class="button is-primary" onclick="rejectCookies()"> 118 Reject all cookies 119 </button> 120 </div> 121 </div> 122 </div> 123 </div> 124 125
125<script> 126 function acceptCookies() { 127 128 consentGrantedAdStorage(); 129 130 Cookies.set('showCookieBanner', 'false', { expires: 365, path: '/' }); 131 Cookies.set('cookiesAccepted', 'true', {expires: 365, path: '/'}); 132 toggleCookieBanner(); 133 } 134 135 function rejectCookies() { 136 Cookies.set('showCookieBanner', 'false', { expires: 365, path: '/' }); 137 toggleCookieBanner(); 138 } 139 140 function toggleCookieBanner() { 141 var showBanner = Cookies.get('showCookieBanner'); 142 var banner = document.getElementById('cookieBanner'); 143 144 if (showBanner === 'false') { 145 banner.setAttribute('style', 'display: none;'); 146 } else { 147 banner.setAttribute('style', 'display: block;'); 148 } 149 } 150 151 toggleCookieBanner(); 152 </script>
152 153</div> 154 155 156 <nav 157 class="navbar is-primary " 158 x-data="{ openNav: false }" 159> 160 <div class="container"> 161 <div class="navbar-brand"> 162 <a href="/" class="navbar-item"> 163 olelo-honua 164 </a> 165 <a 166 role="button" 167 class="navbar-burger burger" 168 aria-label="menu" 169 aria-expanded="false" 170 data-target="navMenu" 171 :class="{ 'is-active': openNav }" 172 x-on:click="openNav = !openNav" 173 > 174 <span aria-hidden="true"></span> 175 <span aria-hidden="true"></span> 176 <span aria-hidden="true"></span> 177 </a> 178 </div> 179 <div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }"> 180 <div class="navbar-start"> 181 <a href="/" class="navbar-item ">Home</a> 182 183 184 185 <div class="navbar-item has-dropdown is-hoverable "> 186 <a 187 href="" 188 class="navbar-link " 189 >About</a> 190 <div class="navbar-dropdown"> 191 192 <a 193 href="/overview" 194 class="navbar-item " 195 >Overview</a> 196 197 <a 198 href="/docs/deep_dive.html" 199 class="navbar-item " 200 >Deep Dive</a> 201 202 </div> 203 </div> 204 205 206 207 <div class="navbar-item has-dropdown is-hoverable "> 208 <a 209 href="" 210 class="navbar-link " 211 >Integrations</a> 212 <div class="navbar-dropdown"> 213 214 <a 215 href="/docs/nextjs_integrations.html" 216 class="navbar-item " 217 >NextJS</a> 218 219 <a 220 href="/docs/remix_integrations.html" 221 class="navbar-item is-active" 222 >Remix</a> 223 224 <a 225 href="/docs/shopify_integrations.html" 226 class="navbar-item " 227 >Shopify</a> 228 229 </div> 230 </div> 231 232 233 234 <div class="navbar-item has-dropdown is-hoverable "> 235 <a 236 href="" 237 class="navbar-link " 238 >Quickstart Guides</a> 239 <div class="navbar-dropdown"> 240 241 <a 242 href="https://openrouter.ai/docs/quickstart" 243 class="navbar-item " 244 >OpenRouter</a> 245 246 <a 247 href="https://platform.openai.com/docs/quickstart?api-mode=chat" 248 class="navbar-item " 249 >OpenAI</a> 250 251 <a 252 href="https://cloud.google.com/translate/docs/basic/translate-text-basic" 253 class="navbar-item " 254 >Google Translate</a> 255 256 </div> 257 </div> 258 259 260 261 <div class="navbar-item has-dropdown is-hoverable "> 262 <a 263 href="" 264 class="navbar-link " 265 >Code</a> 266 <div class="navbar-dropdown"> 267 268 <a 269 href="https://github.com/brownrw8/olelo-honua" 270 class="navbar-item " 271 >Github Repository</a> 272 273 <a 274 href="https://github.com/brownrw8/olelo-honua/discussions" 275 class="navbar-item " 276 >Community</a> 277 278 <a 279 href="https://github.com/brownrw8/olelo-honua/issues" 280 class="navbar-item " 281 >Bug Reports</a> 282 283 <a 284 href="https://github.com/brownrw8/olelo-honua/pulls" 285 class="navbar-item " 286 >Feature Requests</a> 287 288 </div> 289 </div> 290 291 292 293 <div class="navbar-item has-dropdown is-hoverable "> 294 <a 295 href="" 296 class="navbar-link " 297 >Other</a> 298 <div class="navbar-dropdown"> 299 300 <a 301 href="/docs/contributing.md" 302 class="navbar-item " 303 >Contributing</a> 304 305 <a 306 href="/docs/code_of_conduct.md" 307 class="navbar-item " 308 >Code of Conduct</a> 309 310 </div> 311 </div> 312 313 314 315 <div class="navbar-item has-dropdown is-hoverable "> 316 <a 317 href="" 318 class="navbar-link " 319 >Simulations</a> 320 <div class="navbar-dropdown"> 321 322 <a 323 href="https://options.olelohonua.com" 324 class="navbar-item " 325 >Options Calculator</a> 326 327 <a 328 href="https://foil.olelohonua.com" 329 class="navbar-item " 330 >
330Aerodynamic Simulator</a> 331 332 </div> 333 </div> 334 335 336 337 </div> 338 339 <div class="navbar-end"> 340 341 <a class="navbar-item" href="https://github.com/sponsors/brownrw8"> 342 <span class="icon gh-sponsor"><i class="fas fa-heart"></i></span> 343 <span>Sponsor</span> 344 </a> 345 346 </div> 347 </div> 348 </div> 349</nav> 350 351 352 <section 353 class="hero is-medium is-bold is-primary" 354 355 style="background: url('/images/hero_80s.png') no-repeat center center; background-size: cover;" 356 357> 358 <div class="hero-body "> 359 <div class="container"> 360 <h1 class="title is-2"></h1> 361 <p class="subtitle is-3"></p> 362 363 </div> 364 </div> 365</section> 366 367 368 369 370 <section class="section"> 371 <div class="container"> 372 <div class="columns is-multiline"> 373 374 <div class="column is-12"> 375 376 377 378 379 380 381 382 383 384<div class="content"> 385 <h2 id="Ê»Ålelo-honua-with-remix">Ê»Ålelo Honua with Remix</h2> 386 387<p>Looking to make your Remix application multilingual? Ê»Ålelo Honua simplifies localization, allowing you to manage and sync translations effortlessly. Follow these steps to enable seamless internationalization in your Remix project.</p> 388 389<p>Steps:</p> 390 391<ol> 392 <li> 393 <p>Install Ê»Ålelo Honua CLI</p> 394 395 <p>Run the following command to install the CLI globally:</p> 396 397 <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">-g</span> npx <span class="o">&&</span> npx <span class="nt">--yes</span> olelo-honua 398</code></pre></div> </div> 399 </li> 400 <li> 401 <p>Initialize Localization in Your Remix Project</p> 402 403 <p>
403Inside your Remix project directory, run:</p> 404 405 <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx olelo-honua init 406</code></pre></div> </div> 407 </li> 408</ol> 409 410<p>This will generate a localization folder with default translation files.</p> 411 412<ol> 413 <li> 414 <p>Configure Localization in remix.config.js</p> 415 416 <p>Modify your remix.config.js to define supported languages:</p> 417 418 <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span> 419 <span class="na">future</span><span class="p">:</span> <span class="p">{},</span> 420 <span class="na">serverModuleFormat</span><span class="p">:</span> <span class="dl">"</span><span class="s2">cjs</span><span class="dl">"</span><span class="p">,</span> 421 <span class="na">i18n</span><span class="p">:</span> <span class="p">{</span> 422 <span class="na">locales</span><span class="p">:</span> <span class="p">[</span><span class="dl">"</span><span class="s2">en</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">es</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">fr</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">de</span><span class="dl">"</span><span class="p">],</span> <span class="c1">// Add your desired languages</span> 423 <span class="na">defaultLocale</span><span class="p">:</span> <span class="dl">"</span><span class="s2">en</span><span class="dl">"</span><span class="p">,</span> 424 <span class="p">},</span> 425<span class="p">};</span> 426</code></pre></div> </div> 427 </li> 428 <li> 429 <p>Create a Language Switcher Component</p> 430 431 <p>Use Remixâs useFetcher to switch locales dynamically:</p> 432 433 <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useFetcher</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@remix-run/react</span><span class="dl">"</span><span class="p">;</span> 434<span class="k">import</span> <span class="p">{</span> <span class="nx">useLocation</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react-router-dom</span><span class="dl">"</span><span class="p">;</span> 435 436<span class="k">export</span> <span class="kd">function</span> <span class="nx">LanguageSwitcher</span><span class="p">()</span> <span class="p">{</span> 437 <span class="kd">const</span> <span class="nx">fetcher</span> <span class="o">=</span> <span class="nx">useFetcher</span><span class="p">();</span> 438 <span class="kd">const</span> <span class="nx">location</span> <span class="o">=</span> <span class="nx">useLocation</span><span class="p">();</span> 439 440 <span class="kd">const</span> <span class="nx">changeLanguage</span> <span class="o">=</span> <span class="p">(</span><span class="nx">lang</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> 441 <span class="nx">fetcher</span><span class="p">.</span><span class="nx">submit</span><span class="p">(</span> 442 <span class="p">{</span> <span class="na">locale</span><span class="p">:</span> <span class="nx">lang</span> <span class="p">},</span> 443 <span class="p">{</span> <span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">post</span><span class="dl">"</span><span class="p">,</span> <span class="na">action</span><span class="p">:</span> <span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span> <span class="p">},</span> 444 <span class="p">);</span> 445 <span class="p">};</span> 446 447 <span class="k">return</span> <span class="p">(</span> 448 <span class="o"><</span><span class="nx">div</span><span class="o">></span> 449 <span class="o"><</span><span class="nx">button</span> <span class="nx">
449onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="nx">changeLanguage</span><span class="p">(</span><span class="dl">"</span><span class="s2">en</span><span class="dl">"</span><span class="p">)}</span><span class="o">></span><span class="nx">English</span><span class="o"><</span><span class="sr">/button</span><span class="err">> 450</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="nx">changeLanguage</span><span class="p">(</span><span class="dl">"</span><span class="s2">es</span><span class="dl">"</span><span class="p">)}</span><span class="o">></span><span class="nx">Español</span><span class="o"><</span><span class="sr">/button</span><span class="err">> 451</span> <span class="o"><</span><span class="sr">/div</span><span class="err">> 452</span> <span class="p">);</span> 453<span class="p">}</span> 454</code></pre></div> </div> 455 </li> 456 <li> 457 <p>Load Translations in Remix Loaders</p> 458 459 <p>Modify your route loaders to include translations:</p> 460 461 <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">translations</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">../locales/en.json</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// Load dynamically based on locale</span> 462 463<span class="k">export</span> <span class="k">async</span> <span class="kd">function</span> <span class="nx">loader</span><span class="p">({</span> <span class="nx">request</span> <span class="p">})</span> <span class="p">{</span> 464 <span class="kd">const</span> <span class="nx">
464url</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">URL</span><span class="p">(</span><span class="nx">request</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span> 465 <span class="kd">const</span> <span class="nx">locale</span> <span class="o">=</span> <span class="nx">url</span><span class="p">.</span><span class="nx">searchParams</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">"</span><span class="s2">locale</span><span class="dl">"</span><span class="p">)</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">en</span><span class="dl">"</span><span class="p">;</span> 466 467 <span class="k">return</span> <span class="p">{</span> <span class="na">translations</span><span class="p">:</span> <span class="nx">translations</span><span class="p">[</span><span class="nx">locale</span><span class="p">]</span> <span class="o">||</span> <span class="nx">translations</span><span class="p">[</span><span class="dl">"</span><span class="s2">en</span><span class="dl">"</span><span class="p">]</span> <span class="p">};</span> 468<span class="p">}</span> 469</code></pre></div> </div> 470 </li> 471 <li> 472 <p>Sync Translations</p> 473 474 <p>Whenever you update your translations, run:</p> 475 476 <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx olelo-honua <span class="nb">sync</span> 477</code></pre></div> </div> 478 </li> 479</ol> 480 481<p>This ensures your translation files stay updated.</p> 482 483</div> 484 485 </div> 486 487 </div> 488 </div> 489 </section> 490 491 <footer class="footer"> 492 <div class="container"> 493 494 <div class="columns is-multiline"> 495 496 <div class="column has-text-centered"> 497 <div> 498 <a href="https://github.com/brownrw8/olelo-honua" class="link">Github Repository</a> 499 </div> 500 </div> 501 502 <div class="column has-text-centered"> 503 <div> 504 <a href="https://www.pitchhut.com/project/olelo-honua-i18n-library" class="link">PitchHut Project</a> 505 </div> 506 </div> 507 508 <div class="column has-text-centered"> 509 <div> 510 <a href="https://openrouter.ai/docs/quickstart" class="link">OpenRouter Quickstart</a> 511 </div> 512 </div> 513 514 <div class="column has-text-centered"> 515 <div> 516 <a href="https://platform.openai.com/docs/quickstart?api-mode=chat" class="link">OpenAI Quickstart</a> 517 </div> 518 </div> 519 520 <div class="column has-text-centered"> 521 <div> 522 <a href="https://cloud.google.com/translate/docs/basic/translate-text-basic" class="link">Google Translate Quickstart</a> 523 </div> 524 </div> 525 526 <div class="column has-text-centered"> 527 <div> 528 <a href="https://options.olelohonua.com" class="link">Options Calculator</a> 529 </div> 530 </div> 531 532 <div class="column has-text-centered"> 533 <div> 534 <a href="https://foil.olelohonua.com" class="link">Aerodynamic Simulator</a> 535 </div> 536 </div> 537 538 </div> 539 540 541 <div class="content is-small has-text-centered"> 542 <p class="">Theme built by <a href="https://www.csrhymes.com">C.S. Rhymes</a></p> 543 </div> 544 </div> 545</footer> 546 547 548
548<script src="/assets/js/app.js" type="text/javascript"></script>
548<!-- footer scripts --> 549</body> 550</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.