truncate bio

8 files changed, 30 insertions, 11 deletions

diff --git a/package.json b/package.json
index 0ba0e7b7..2aeecb5e 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
+		"@tailwindcss/line-clamp": "^0.4.2",
 		"@zerodevx/svelte-toast": "^0.7.2",
 		"autoprefixer": "^10.4.13",
 		"bech32": "^2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48eb168b..6bccc4b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@sveltejs/adapter-node': ^1.1.4
   '@sveltejs/kit': ^1.2.10
+  '@tailwindcss/line-clamp': ^0.4.2
   '@zerodevx/svelte-toast': ^0.7.2
   autoprefixer: ^10.4.13
   bech32: ^2.0.0
@@ -44,6 +45,7 @@ dependencies:
   '@sveltejs/kit': [email protected][email protected]
 
 devDependencies:
+  '@tailwindcss/line-clamp': [email protected]
   '@zerodevx/svelte-toast': 0.7.2
   autoprefixer: [email protected]
   bech32: 2.0.0
@@ -604,6 +606,14 @@ packages:
       '@swc/core-win32-x64-msvc': 1.3.24
     dev: true
 
+  /@tailwindcss/line-clamp/[email protected]:
+    resolution: {integrity: sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==}
+    peerDependencies:
+      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
+    dependencies:
+      tailwindcss: [email protected]
+    dev: true
+
   /@types/bn.js/4.11.6:
     resolution: {integrity: sha512-pqr857jrp2kPuO9uRjZ3PwnJTjoQy+fcdxvBTvHm6dkmEL9q+hDD/2j/0ELOBPtPnS8LjCX0gI9nbl8lVkadpg==}
     dependencies:
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index 0e09191e..a718c5ed 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -5,9 +5,7 @@
 	export let sample;
 </script>
 
-<div
-	class="bg-black text-white rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono"
->
+<div class="bg-black text-white rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono">
 	<div class="overflow-x-scroll max-w-full scrollbar-hide">
 		<div class="break-all min-w-[800px]">{samples[sample]}</div>
 	</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index ae69e70a..7520e5d4 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -5,7 +5,7 @@
 	const followLinks = [
 		{ url: 'https://twitter.com/coinoswallet', titleID: 'twitter' },
 		{ url: 'https://t.me/coinoswallet', titleID: 'telegram' },
-		{ url: 'https://linktr.ee/coinos.io', titleID: 'linktree' },
+		{ url: 'https://linktr.ee/coinos.io', titleID: 'linktree' }
 	];
 
 	const companyLinks = [
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 133930b1..bbb2379e 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -59,6 +59,9 @@
 			t++;
 		}, 10);
 	};
+
+	let hideBio = true;
+	let toggleBio = () => (hideBio = false);
 </script>
 
 <div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap">
@@ -66,7 +69,11 @@
 	<div class="w-[240px] lg:absolute space-y-5 left-20 mx-auto lg:mr-10 mb-10">
 		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
 
-		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
+		<div
+			class="text-secondary mx-auto text-center lg:text-left lg:mx-0"
+			class:line-clamp-3={hideBio}
+			on:click={toggleBio}
+		>
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
 
diff --git a/src/routes/(static)/bounties/+page.svelte b/src/routes/(static)/bounties/+page.svelte
index e3670e78..32a962fc 100644
--- a/src/routes/(static)/bounties/+page.svelte
+++ b/src/routes/(static)/bounties/+page.svelte
@@ -54,8 +54,11 @@
 	<p>
 		<b>⚡️750,000</b> will be awarded once the merchant has accepted bitcoin for 6 months. We'll be
 		sending
-		<a href="https://btcmap.org/leaderboard" class="text-black hover:underline" target="_blank" rel="noreferrer"
-			>shadowy supertaggers</a
+		<a
+			href="https://btcmap.org/leaderboard"
+			class="text-black hover:underline"
+			target="_blank"
+			rel="noreferrer">shadowy supertaggers</a
 		> to check up on them periodically.
 	</p>
 
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index cb82bd05..8ddb98cd 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -7,7 +7,7 @@
 	let api = PUBLIC_COINOS_URL + '/api';
 
 	if (!token) token = '<login to see your token here>';
-  let tokenSample = `export token="${token}"`;
+	let tokenSample = `export token="${token}"`;
 </script>
 
 <div class="space-y-8 lg:text-xl mt-20 w-full max-w-full">
@@ -31,8 +31,8 @@
 	<h2 class="text-2xl">Auth Token</h2>
 	<p class="text-secondary">This JWT authorizes you to use the API</p>
 	<div class="bg-black text-white rounded-lg p-4 flex gap-4">
-    <div class="w-full break-all">{tokenSample}</div>
-    <button class="ml-auto my-auto invert opacity-90" on:click={() => copy(tokenSample)}
+		<div class="w-full break-all">{tokenSample}</div>
+		<button class="ml-auto my-auto invert opacity-90" on:click={() => copy(tokenSample)}
 			><Icon icon="copy" style="w-10 max-w-none" /></button
 		>
 	</div>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c57db020..1d082420 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,6 +12,6 @@ module.exports = {
 			}
 		}
 	},
-	plugins: [require('tailwind-scrollbar')],
+	plugins: [require('tailwind-scrollbar'), require('@tailwindcss/line-clamp')],
 	safelist: ['w-16', 'h-16', 'w-20', 'h-20', 'w-24', 'h-24']
 };