Added support for hosting from a subfolder (#248)

* dynamic base path and relative urls * support pathnames with trailing index.html * fix wrong subpath without trailing slash
DarkFlorist · Jan 18, 2024 · f8cee3c · f8cee3c
1 parent 0e7465f
commit f8cee3c
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/app/index.html b/app/index.html
@@ -5,6 +5,17 @@
 	<title>Lunaria</title>
 	<meta charset='utf-8' />
 	<meta name='viewport' content='width=device-width, initial-scale=1.0' />
+
+	<!-- support hosting from a subpath such as ipfs -->
+	<script>
+		const subPath = window.location.pathname.replace('index.html', '').replace(/\/$/, '')
+		if (subPath) {
+			const baseElement = document.createElement('base')
+			baseElement.setAttribute('href', `${subPath}/`)
+			document.head.appendChild(baseElement)
+		}
+	</script>
+
 	<link rel="icon" type="image/svg+xml" href="./img/icon-lunaria.svg" />
 	<link rel='stylesheet' href='./css/index.css' />
 	<style>
@@ -85,7 +96,7 @@
 	<main></main>
 
 	<section class='splash-screen'>
-		<img class='w-10 h-10' src='/img/icon-lunaria.svg' />
+		<img class='w-10 h-10' src='./img/icon-lunaria.svg' />
 		<h1>Lunaria</h1>
 		<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'>
 			<circle cx='4' cy='12' r='3' />

diff --git a/app/ts/components/Favorites.tsx b/app/ts/components/Favorites.tsx
@@ -33,7 +33,7 @@ export const Favorites = () => {
 						<a class={removeNonStringsAndTrim('grid gap-2 items-center bg-white/10 px-4 py-3', manage.value ? 'grid-cols-[min-content,minmax(0,1fr),min-content]' : 'grid-cols-1 hover:bg-white/30')} href={`#saved/${index}`}>
 							<MoveUpButton show={manage.value === true} favorite={favorite} index={index} />
 							<div class='grid gap-2 grid-cols-[auto,minmax(0,1fr)] items-center'>
-								{favorite.token ? <img class='w-8 h-8' src={`/img/${favorite.token.address.toLowerCase()}.svg`} /> : <img class='w-8 h-8' src={`/img/ethereum.svg`} />}
+								{favorite.token ? <img class='w-8 h-8' src={`./img/${favorite.token.address.toLowerCase()}.svg`} /> : <img class='w-8 h-8' src={`./img/ethereum.svg`} />}
 								<div class='text-left'>
 									<div>{favorite.label}</div>
 									<div class='overflow-hidden text-ellipsis whitespace-nowrap text-sm text-white/50'>

diff --git a/app/ts/components/TokenPicker.tsx b/app/ts/components/TokenPicker.tsx
@@ -102,7 +102,7 @@ const AssetCard = ({ token }: { token?: ERC20Token }) => {
 	const radioRef = useRef<HTMLInputElement>(null)
 	const { stage } = useTokenManager()
 	const { input } = useTransfer()
-	const iconPath = token ? `/img/${token.address.toLowerCase()}.svg` : `/img/ethereum.svg`
+	const iconPath = token ? `./img/${token.address.toLowerCase()}.svg` : `./img/ethereum.svg`
 
 	const setId = 'transfer_asset'
 	const uniqueId = token?.address || 'ether'

diff --git a/app/ts/components/TransactionPage/index.tsx b/app/ts/components/TransactionPage/index.tsx
@@ -65,7 +65,7 @@ const LeftPanel = () => {
 
 			<div class='mb-4 p-4'>
 				<div class='flex items-center gap-2'>
-					<img class='w-10 h-10' src='/img/icon-lunaria.svg' />
+					<img class='w-10 h-10' src='./img/icon-lunaria.svg' />
 					<div>
 						<div class='text-3xl font-bold leading-none'>Lunaria</div>
 						<div class='text-white/50 leading-none'>Decentralized Wallet</div>

diff --git a/app/ts/components/TransferPage/index.tsx b/app/ts/components/TransferPage/index.tsx
@@ -81,7 +81,7 @@ const LeftPanel = () => {
 
 			<div class='mb-4 p-4'>
 				<div class='flex items-center gap-2'>
-					<img class='w-10 h-10' src='/img/icon-lunaria.svg' />
+					<img class='w-10 h-10' src='./img/icon-lunaria.svg' />
 					<div>
 						<div class='text-3xl font-bold leading-none'>Lunaria</div>
 						<div class='text-white/50 leading-none'>Decentralized Wallet</div>
@@ -91,7 +91,7 @@ const LeftPanel = () => {
 
 			<div class='pl-4 mb-4'>
 				<div class='text-white/30 text-sm'>Actions</div>
-				<a href='/'>
+				<a href={window.location.href}>
 					<div class='grid grid-cols-[auto,1fr] items-center gap-4 mb-4'>
 						<div class='bg-white/30 w-10 h-10 rounded-full' />
 						<div class='py-2 leading-tight'>