Skip to content

Commit c71d5f3

Browse files
Multilingualization (#5)
* Multilingualization and URL path fixing: - Insert Flowbite using CDN on bottom - Add popover to select lang on top - Fix URL paths and target attributes * Add Japanese language directory * Change in the ja directory: - Absolute path URLs to "/ja/*" from "/*" - Language code to "ja" from "en" on html tag
1 parent 450435f commit c71d5f3

8 files changed

Lines changed: 2615 additions & 57 deletions

File tree

features.html

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
2222

2323
<!-- External config & theme -->
24-
<script src="tailwind-config.js"></script>
25-
<script src="theme.js" defer></script>
24+
<script src="/tailwind-config.js"></script>
25+
<script src="/theme.js" defer></script>
2626

2727
<!-- Custom styles (no @apply so it works with CDN) -->
2828
<style>
@@ -247,7 +247,7 @@
247247
</style>
248248

249249
<!-- Site styles -->
250-
<link rel="stylesheet" href="styles.css" />
250+
<link rel="stylesheet" href="/styles.css" />
251251
</head>
252252
<body class="bg-white text-gray-800 dark:bg-basisbg dark:text-gray-100 antialiased">
253253
<!-- Backdrop -->
@@ -269,14 +269,48 @@
269269
class="h-9 w-9 rounded-xl ring-1 ring-gray-200 dark:ring-white/10" />
270270
<span class="font-semibold">BasisVR</span>
271271
</a>
272-
273-
<nav class="hidden md:flex items-center gap-6 text-sm">
274-
<a href="./features.html" class="text-gray-900 dark:text-gray-100 font-semibold">Features</a>
275-
<a href="https://docs.basisvr.org/docs" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-brand">Documentation</a>
276-
<a href="./funding" class="text-gray-600 dark:text-gray-300 hover:text-brand">Funding</a>
277-
<a href="./philosophy" class="text-gray-600 dark:text-gray-300 hover:text-brand">Philosophy</a>
278-
<a href="https://github.com/BasisVR/basis" class="text-gray-600 dark:text-gray-300 hover:text-brand">GitHub</a>
279-
</nav>
272+
<div class="flex items-center">
273+
<!-- Nav -->
274+
<nav class="flex items-center gap-3 md:gap-6">
275+
<a href="/features"
276+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Features</a>
277+
<a href="https://docs.basisvr.org/docs" target="_blank"
278+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Documentation</a>
279+
<a href="/funding"
280+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Funding</a>
281+
<a href="/philosophy"
282+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Philosophy</a>
283+
</nav>
284+
<!-- Language and github -->
285+
<div class="flex items-center sm:border-l border-slate-100 ml-6 pl-6">
286+
<button data-popover-target="chg-lang" data-popover-trigger="click" type="button" class="text-gray-500 hover:text-gray-700">
287+
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
288+
<path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
289+
<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
290+
</svg>
291+
</button>
292+
<div data-popover id="chg-lang" role="tooltip" class="absolute z-10 invisible inline-block w-32 text-sm text-body transition-opacity duration-300 rounded-2xl border border-gray-200 bg-white shadow-xs opacity-0">
293+
<div class="px-6 py-4">
294+
<div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/' )">English</a></div>
295+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/cn' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/cn/')">简体中文</a></div> -->
296+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/tw' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/tw/')">繁體中文</a></div> -->
297+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/es' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/es/')">Español</a></div> -->
298+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/fr' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/fr/')">Français</a></div> -->
299+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/de' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/de/')">Deutsch</a></div> -->
300+
<div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/ja' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/ja/')">日本語</a></div>
301+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/ko' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/ko/')">한국어</a></div> -->
302+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/pt' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/pt/')">Português</a></div> -->
303+
</div>
304+
<div data-popper-arrow></div>
305+
</div>
306+
<a href="https://github.com/BasisVR/basis" target="_blank" class="ml-6 block text-gray-500 hover:text-gray-700">
307+
<span class="sr-only">BasisVR on GitHub</span>
308+
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
309+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
310+
</svg>
311+
</a>
312+
</div>
313+
</div>
280314
</div>
281315

282316
<!-- Hero -->
@@ -841,7 +875,9 @@ <h2 class="text-2xl font-bold">Roadmap</h2>
841875
</div>
842876

843877
<!-- Footer JS -->
844-
<script src="footer.js" defer></script>
878+
<script src="/footer.js" defer></script>
879+
<!-- Flowbite -->
880+
<script src="https://cdn.jsdelivr.net/npm/flowbite@4.0.1/dist/flowbite.min.js"></script>
845881

846882
<!-- Interactions: filter + search + scrollspy + layout toggle -->
847883
<script>

funding.html

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@
2121
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
2222

2323
<!-- External config & theme -->
24-
<script src="tailwind-config.js"></script>
25-
<script src="theme.js" defer></script>
24+
<script src="/tailwind-config.js"></script>
25+
<script src="/theme.js" defer></script>
2626

2727
<!-- Custom styles (contains .animated-gradient & selection styles) -->
28-
<link rel="stylesheet" href="styles.css" />
28+
<link rel="stylesheet" href="/styles.css" />
2929
</head>
3030
<body class="bg-white text-gray-800 dark:bg-basisbg dark:text-gray-100 antialiased">
3131

@@ -77,13 +77,48 @@
7777
class="h-10 w-10 rounded-lg ring-1 ring-gray-200 dark:ring-white/10 group-hover:scale-105 transition" loading="lazy" />
7878
<span class="font-semibold text-lg">BasisVR</span>
7979
</a>
80-
<nav class="hidden sm:flex items-center gap-5 text-sm">
81-
<a href="./features" class="text-gray-600 dark:text-gray-300 hover:text-brand">Features</a>
82-
<a href="https://docs.basisvr.org/docs" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-brand">Documentation</a>
83-
<a href="./funding" class="text-gray-900 dark:text-gray-100 font-semibold">Funding</a>
84-
<a href="./philosophy" class="text-gray-600 dark:text-gray-300 hover:text-brand">Philosophy</a>
85-
<a href="https://github.com/BasisVR/basis" class="text-gray-600 dark:text-gray-300 hover:text-brand">GitHub</a>
86-
</nav>
80+
<div class="flex items-center">
81+
<!-- Nav -->
82+
<nav class="flex items-center gap-3 md:gap-6">
83+
<a href="/features"
84+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Features</a>
85+
<a href="https://docs.basisvr.org/docs" target="_blank"
86+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Documentation</a>
87+
<a href="/funding"
88+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Funding</a>
89+
<a href="/philosophy"
90+
class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Philosophy</a>
91+
</nav>
92+
<!-- Language and github -->
93+
<div class="flex items-center sm:border-l border-slate-100 ml-6 pl-6">
94+
<button data-popover-target="chg-lang" data-popover-trigger="click" type="button" class="text-gray-500 hover:text-gray-700">
95+
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
96+
<path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
97+
<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
98+
</svg>
99+
</button>
100+
<div data-popover id="chg-lang" role="tooltip" class="absolute z-10 invisible inline-block w-32 text-sm text-body transition-opacity duration-300 rounded-2xl border border-gray-200 bg-white shadow-xs opacity-0">
101+
<div class="px-6 py-4">
102+
<div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/' )">English</a></div>
103+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/cn' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/cn/')">简体中文</a></div> -->
104+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/tw' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/tw/')">繁體中文</a></div> -->
105+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/es' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/es/')">Español</a></div> -->
106+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/fr' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/fr/')">Français</a></div> -->
107+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/de' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/de/')">Deutsch</a></div> -->
108+
<div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/ja' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/ja/')">日本語</a></div>
109+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/ko' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/ko/')">한국어</a></div> -->
110+
<!-- <div class="px-2 py-1"><a href="javascript:void(0)" onclick="this.href=location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '') === location.pathname ? '/pt' + location.pathname : location.pathname.replace(/^\/(cn|tw|es|fr|de|ja|ko|pt)\//, '/pt/')">Português</a></div> -->
111+
</div>
112+
<div data-popper-arrow></div>
113+
</div>
114+
<a href="https://github.com/BasisVR/basis" target="_blank" class="ml-6 block text-gray-500 hover:text-gray-700">
115+
<span class="sr-only">BasisVR on GitHub</span>
116+
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
117+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
118+
</svg>
119+
</a>
120+
</div>
121+
</div>
87122
</div>
88123

89124
<!-- Hero -->
@@ -542,6 +577,8 @@ <h2 class="text-2xl font-bold">Help Drive Open VR Forward</h2>
542577
</div>
543578

544579
<!-- Footer Year -->
545-
<script src="footer.js" defer></script>
580+
<script src="/footer.js" defer></script>
581+
<!-- Flowbite -->
582+
<script src="https://cdn.jsdelivr.net/npm/flowbite@4.0.1/dist/flowbite.min.js"></script>
546583
</body>
547584
</html>

0 commit comments

Comments
 (0)