PageSourceSearch

https://www.olelohonua.com/docs/remix_integrations.html

html olelohonua.com collected 2026-09-28 07:05:21 UTC 26,374 bytes, 550 lines download raw bytes

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">&amp;&amp;</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">=&gt;</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">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
449      <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">
449onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</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">&gt;</span><span class="nx">English</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
450</span>      <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</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">&gt;</span><span class="nx">Español</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
451</span>    <span class="o">&lt;</span><span class="sr">/div</span><span class="err">&gt;
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.