#43 fontastic icons setup

packages/gui/vite.config.ts

@@ -16,6 +16,11 @@ const config: UserConfig = {
 			$libs: path.resolve('./src/libs'),
 			$appcss: path.resolve('./src/app.css')
 		}
+	},
+	server: {
+		fs: {
+			allow: ['..']
+		}
 	}
 };
 

packages/ui/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+scripts/*.zip
+scripts/*.css

packages/ui/README.md

@@ -11,6 +11,12 @@ $ pnpm install # assuming you have not done so
 $ pnpm dev
 ```
 
+### How to update icons
+
+1. update fontastic.me tea-icons, you would probably need tom's credentials
+2. run `pnpm update-icons`
+3. stage and commit the changes
+
 ## Todo
 
 [] setup a scaffolding script to make it easier making elements
@@ -21,3 +27,4 @@ This library is dependent on the following
 
 - [svelte](https://svelte.dev/)
 - [tailwind](https://tailwindcss.com/)
+- [fontastic](https://fontastic.me)

packages/ui/package.json

@@ -11,7 +11,8 @@
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
 		"dev": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
+		"build-storybook": "storybook build",
+		"update-icons": "node scripts/update-icons.js"
 	},
 	"files": [
 		"src/**/*",

packages/ui/scripts/update-icons.js

@@ -0,0 +1,53 @@
+import https from 'https';
+import fs from 'fs';
+import path from 'path';
+
+const fontasticDownloadURI = 'https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css';
+// i tried the zip dl unfortunately its auth protected so have to hack our way into the resources
+
+const downloadFileTo = async (uri, path) => {
+	return new Promise((resolve) => {
+		const file = fs.createWriteStream(path);
+		https.get(uri, (res) => {
+			res.pipe(file);
+			file.on('finish', () => {
+				file.close();
+				console.log(`downloaded: ${uri}`);
+				resolve();
+			});
+		});
+	});
+};
+
+const getFontURIs = (version) => {
+	const exts = ['eot', 'woff', 'ttf', 'svg'];
+	return exts.map(
+		(ext) => `https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/fonts/${version}.${ext}`
+	);
+};
+
+async function main() {
+	const tmpIconsCss = './scripts/icons.css';
+	const iconsFolder = './src/icons/';
+	// await downloadFileTo(fontasticDownloadURI, tmpIconsCss); // works
+
+	const cssFile = fs.readFileSync(tmpIconsCss, 'utf-8');
+
+	const matches = cssFile.matchAll(/url\(.*?\)/gi);
+	const [url] = matches.next().value;
+	const fileVersion = url.split('/').pop().split('.')[0];
+
+	const exts = ['eot', 'woff', 'ttf', 'svg'];
+
+	for (const ext of exts) {
+		const uri = `https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/fonts/${fileVersion}.${ext}`;
+		await downloadFileTo(uri, path.join(iconsFolder, `fonts/tea-icons.${ext}`));
+	}
+
+	const newCssFile = cssFile
+		.replaceAll('https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/', '')
+		.replaceAll('1669684803', 'tea-icons');
+	await fs.writeFileSync(path.join(iconsFolder, 'icons.css'), newCssFile, { encoding: 'utf-8' });
+}
+
+main();

packages/ui/src/PackageCard/PackageCard.css

@@ -1 +0,0 @@
-@import '../app.css';

packages/ui/src/PackageCard/PackageCard.svelte

@@ -1,5 +1,5 @@
 <script type="ts">
-	import './PackageCard.css';
+	import '../app.css';
 	import type { Package } from '../types';
 	export let pkg: Package;
 	export let link: string;

packages/ui/src/SearchInput/SearchInput.css

@@ -1 +0,0 @@
-@import '../app.css';

packages/ui/src/SearchInput/SearchInput.svelte

@@ -1,5 +1,5 @@
 <script type="ts">
-	import './SearchInput.css';
+	import '../app.css';
 
 	export let size: 'small' | 'medium' | 'large' = 'small';
 	export let onSearch: (text: string) => void;
@@ -14,29 +14,26 @@
 	};
 </script>
 
-<section class={`flex items-center ${size}`}>
-	<div class="icon">
+<section class={`flex py-2 items-center ${size}`}>
+	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>
-	<input type="search" placeholder="search_" on:keyup={onChange} />
+	<input type="search" class="pb-2" placeholder="search_" on:keyup={onChange} />
 </section>
 
 <!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
 <style>
 	.icon-search-icon {
-		font-size: 30px;
 		color: #949494;
 		margin-right: 20px;
 		position: relative;
 		top: 2px;
 	}
 
-	section {
-		padding: 0px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+	section.medium .icon-search-icon {
+		font-size: 30px;
 	}
+
 	section.medium {
 		height: 75px;
 	}

packages/ui/src/app.css

@@ -1,3 +1,5 @@
+@import url(./icons/icons.css);
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/ui/src/icons/fonts/tea-icons.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="tea-icons" horiz-adv-x="512">
+<font-face font-family="tea-icons" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph glyph-name="discord" unicode="&#97;" d="M436 423c-34 16-70 27-107 34-4-9-9-20-13-29-39 6-79 6-118 0-3 9-9 20-13 29-37-7-73-18-107-34-60-88-87-194-76-300 39-30 83-52 130-67 11 15 20 30 28 46-15 6-30 13-44 22l11 8c82-40 178-40 260 0 4-3 7-6 11-8-14-9-28-16-44-22 8-16 18-32 28-46 47 14 91 37 130 67 11 106-16 212-76 300z m-264-239c-28 2-48 25-47 53-1 27 19 51 47 52 13 0 25-6 34-16 8-10 13-23 12-36 2-28-19-51-46-53z m170 0c-27 2-47 25-46 53-2 27 19 51 46 52 14 0 26-6 35-16 8-10 13-23 12-36 1-28-19-52-47-53z"/>
+<glyph glyph-name="download-arrow" unicode="&#98;" d="M66 9l0 34 394 0 0-34z m176 63l-4 5-1 0 0 1-195 198 24 24 171-174 0 382 34 0 0-384 171 172 24-24-199-200z"/>
+<glyph glyph-name="enter-arrow" unicode="&#99;" d="M297 31c-2 3-4 7-4 11 0 5 2 10 5 13 4 2 7 5 11 6l146 84-438 0c-7 0-13 6-13 13l0 315c0 7 6 13 13 13 8 0 13-6 13-13l0-302 424 0-145 84c-4 2-7 5-11 7-3 3-5 8-5 13 0 4 2 8 4 11 3 2 6 4 9 4 3 0 5-1 7-2l176-101c5-3 8-6 12-10 4-5 6-11 6-18l0-1c0-7-2-13-6-18-3-4-7-7-12-10l-176-101c-2-1-4-2-7-2-3 0-7 1-9 4z"/>
+<glyph glyph-name="github" unicode="&#100;" d="M253 505c-124 1-230-89-250-211-20-123 52-241 170-280 12-2 17 5 17 12 0 6 0 26 0 47-64-12-80 15-85 30-6 13-15 26-26 35-9 5-22 17 0 17 16-2 30-12 38-26 7-12 19-22 33-26 14-3 28-2 41 5 1 13 7 25 16 34-56 6-115 28-115 124 0 25 9 50 26 68-8 22-7 46 3 67 0 0 21 6 69-26 41 11 85 11 126 0 49 33 70 26 70 26 9-21 10-45 2-67 17-18 27-43 26-68 0-96-59-118-115-124 12-12 18-29 17-47 0-33 0-60 0-69 0-7 4-14 17-12 117 39 189 158 169 280-20 122-126 211-249 211z"/>
+<glyph glyph-name="instagram" unicode="&#101;" d="M259 465c69 0 78 0 105-1 16 0 33-3 48-9 23-9 41-27 49-49 6-16 9-32 9-48 1-28 2-36 2-105 0-69 0-78-2-105 0-16-3-33-9-48-8-23-26-41-49-49-15-6-32-9-48-9-27-1-36-2-105-2-69 0-77 0-105 2-16 0-32 3-47 9-23 8-41 26-50 49-5 15-9 32-9 48-1 27-1 36-1 105 0 69 0 77 1 105 0 16 3 32 9 47 4 12 11 22 19 30 9 9 19 16 31 20 15 6 31 9 47 9 28 1 36 1 105 1m0 47c-70 0-79 0-107-2-21 0-43-4-63-12-17-6-32-16-45-29-14-13-24-29-30-46-8-20-12-42-12-63-2-28-2-37-2-107 0-71 0-79 2-107 0-22 4-43 12-63 6-17 16-33 29-46 13-13 29-23 46-29 20-8 42-12 63-13 28-1 37-1 107-1 70 0 79 0 107 1 21 1 43 5 63 12 35 14 62 41 76 76 7 20 11 41 12 63 1 28 1 36 1 107 0 70 0 79-1 107-1 21-5 42-12 63-7 17-17 32-30 45-13 13-29 24-46 30-20 8-41 12-63 12-28 2-36 2-107 2z m0-126c-73 0-133-60-133-133 0-74 60-133 133-133 74 0 133 59 133 133 0 73-59 133-133 133z m0-220c-47 0-86 39-86 87 0 47 39 86 86 86 48 0 86-39 86-86 0-48-38-87-86-87z m170 225c0-17-14-31-31-31-18 0-32 14-32 31 0 17 14 31 32 31 17 0 31-14 31-31z"/>
+<glyph glyph-name="reddit" unicode="&#102;" d="M512 252c0 31-25 56-56 56-14 0-28-6-38-16-45 30-97 47-150 48l25 120 84-17c1-22 19-38 40-39 11 0 21 5 28 12 8 8 12 18 12 28 0 11-4 21-12 29-7 7-17 11-28 11-15 0-29-8-36-22l-94 21c-2 0-5 0-7-2-2-1-4-3-5-6l-28-134c-55 0-107-17-152-47-17 15-40 19-61 11-21-9-34-29-34-52 0-22 13-42 33-51-1-6-1-12-1-17 0-87 100-157 224-157 124 0 225 70 225 157 0 5-1 11-1 17 20 9 32 28 32 50z m-384-40c0 22 18 40 40 40 22 0 39-18 39-40 0-22-17-40-39-40-22 0-40 18-40 40z m223-106c-27-28-80-30-95-30-16 0-68 2-95 30-4 4-4 11 0 15 4 4 10 4 14 0 18-17 55-24 81-24 26 0 63 7 80 24 4 4 11 4 15 0 4-4 4-11 0-15z m-7 66c-22 0-40 18-40 40 0 22 17 40 39 40 23 0 40-18 40-40 1-11-3-21-11-28-8-8-18-12-28-12z"/>
+<glyph glyph-name="right-arrow" unicode="&#103;" d="M297 128c-2 3-4 7-4 11 0 4 2 9 5 12 4 2 7 5 11 7l146 84-438 0c-7 0-13 5-13 13 0 7 6 13 13 13l13 0 0 0 424 0-145 84c-4 1-7 4-11 6-3 4-5 8-5 13 0 4 2 8 4 11 2 3 6 4 9 4 3 0 5-1 7-2l176-101c5-3 8-6 12-10 4-5 6-11 6-17l0-2c0-7-2-13-6-18-3-4-7-7-12-10l-176-101c-2-1-4-2-7-2-3 0-7 2-9 5z"/>
+<glyph glyph-name="telegram" unicode="&#104;" d="M509 459c-2 6-4 7-7 8-7 2-14 1-21-1 0 0-446-161-472-178-3-2-6-5-8-9-2-7 2-15 9-18l115-38c2 0 4 0 6 0 26 17 263 167 277 172 2 0 3 0 3-2-5-19-211-202-211-202-1-1-1-2-2-2l-10-114c0 0-5-35 30 0 25 24 49 45 60 55 41-27 83-58 101-73 7-6 15-9 24-9 11 1 20 9 22 19 0 0 81 328 84 372 0 4 1 7 1 10 0 3 0 7-1 10z"/>
+<glyph glyph-name="twitter" unicode="&#105;" d="M161 51c194 0 299 159 299 297 0 5 0 9 0 14 20 14 38 33 52 54-19-9-40-14-61-16 23 12 39 33 47 57-21-12-43-20-67-25-20 21-47 33-76 33-28 0-55-11-74-31-20-19-31-46-31-73 0-9 1-17 3-24-85 4-164 43-217 109-28-48-14-109 33-140-17 1-33 5-48 13l0-1c0-50 36-93 85-103-9-2-19-3-28-3-7 0-13 0-20 2 14-43 53-72 98-73-37-29-83-44-131-44-8 0-17 0-25 1 48-31 104-47 161-47z"/>
+<glyph glyph-name="tea-logo-iconasset-1" unicode="&#106;" d="M475 187c6-3 11-8 15-14 12-20 5-47-15-59l-75-52c-3-3-8-4-12-4-6 0-12 3-16 8-7 10-5 23 4 30l76 53 2 1 0 1-2 1-76 53c0 1-1 1-2 2-9 7-10 20-3 29 7 9 20 11 29 4l75-53 0 0z m-194 7c8 6 10 17 4 25 0 0 0 0 0 0-12 17-48 40-97 12-6-3-12-7-17-12-16-13-39-23-62 2-6 7-18 8-25 1-7-7-8-18-1-25 14-17 34-27 56-27 20 1 40 9 55 22 3 3 7 6 12 9 31 18 47 1 50-2 6-8 17-11 25-5 0 0 0 0 0 0z m35 70c-11-3-17-15-14-26 0-1 34-118-35-198-8-9-7-22 2-30 8-7 22-6 29 3 85 97 46 231 45 237-4 11-15 18-27 14l0 0z m-249-26c3 11-4 23-15 26-11 3-22-3-25-14-2-6-41-140 44-237 4-5 10-8 16-8 5 0 10 2 13 5 9 8 10 21 3 30l0 0c-70 80-37 197-36 198z m157-196l-81 0c-11 0-21-9-21-21 0-11 10-21 21-21l81 0c11 0 21 10 21 21 0 12-10 21-21 21l0 0z m-38 236c2-2 5-3 8-3 5 0 10 2 13 6 51 72 2 146 0 149-5 7-14 9-21 4-7-5-9-14-4-21 1-2 39-60 0-115-5-7-3-16 4-20z m-31 72c3 0 6 1 9 2 6 5 8 14 4 21-2 3-40 60 0 115 5 7 3 16-4 21-6 5-16 3-21-3-51-72-2-146 0-149 3-4 7-7 12-7z"/>
+<glyph glyph-name="tea-circle" unicode="&#107;" d="M512 256c0-141-115-256-256-256-141 0-256 115-256 256 0 141 115 256 256 256 141 0 256-115 256-256z"/>
+<glyph glyph-name="clipboard" unicode="&#108;" d="M403 464l-67 0-20 47-120 0-20-47-67 0c-15 0-27-12-27-27l0-409c0-15 12-27 27-27l294 0c15 0 27 12 27 27l0 409c0 15-12 27-27 27z m-189 20l84 0 8-20-100 0 8 20z m188-456l-292 0 0 408 292 0 0-408z m-254 362l216 0c4 0 7 4 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-7 7-7z m0-45l216 0c4 0 7 3 7 6 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-6 7-6z m0-46l216 0c4 0 7 3 7 7 0 3-3 6-7 6l-216 0c-4 0-7-3-7-6 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-45l216 0c4 0 7 3 7 6 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-6 7-6z m0-46l124 0c4 0 7 3 7 7 0 3-3 6-7 6l-124 0c-4 0-7-3-7-6 0-4 3-7 7-7z"/>
+<glyph glyph-name="tea-checkmark" unicode="&#109;" d="M481 512l-450 0c-17 0-31-14-31-31l0-450c0-17 14-31 31-31l450 0c17 0 31 14 31 31l0 450c0 17-14 31-31 31z m-436-467l0 422 406 0-207-311-116 70c-11 7-25 3-31-7-7-11-3-25 7-31l154-93 209 314 0-364z"/>
+<glyph glyph-name="pattern-random-21" unicode="&#110;" d="M0 0l335 0 0 20-315 0 0 78 157 0 0 79-19 0 0-59-138 0 0 138 59 0 0-79 19 0 0 79 256 0 0 20-334 0 0 216 177 0 0-59 20 0 0 59 177 0 0-59 20 0 0 59 78 0 0-118-177 0 0 59-20 0 0-59-177 0 0 59-20 0 0-79 394 0 0-157-157 0 0-20 157 0 0-157-59 0 0 98-157 0 0 59-20 0 0-79 158 0 0-98 98 0 0 512-512 0z"/>
+<glyph glyph-name="pattern-random-15" unicode="&#111;" d="M59 512l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z"/>
+<glyph glyph-name="pattern-random-19" unicode="&#112;" d="M439 512l-201 0 0-91-37 0 0 91-201 0 0-201 91 0 0-110-91 0 0-201 512 0 0 421-73 0z m-183-18l165 0 0-73-165 0z m0-92l165 0 0-73-165 0z m-238-73l0 165 165 0 0-73-92 0 0-92z m165 73l0-73-73 0 0 73z m-165-384l0 165 73 0 0-165z m92 0l0 165 73 0 0-165z m384 384l0-384-293 0 0 183-91 0 0 110 91 0 0 91 37 0 0-91 201 0 0 91z m-256-347l201 0 0 201-201 0z m18 183l165 0 0-165-165 0z"/>
+<glyph glyph-name="click-copy-icon" unicode="&#113;" d="M380 440l0 71-325 0 0-439 77 0 0-71 325 0 0 439z m-304-347l0 397 284 0 0-50-228 0 0-347z m360-71l-284 0 0 397 284 0z"/>
+<glyph glyph-name="search-icon" unicode="&#114;" d="M422 340c0 92-74 166-166 166-92 0-166-74-166-166 0-85 64-156 147-165l0-169 38 0 0 169c83 9 147 80 147 165z m-166-128c-71 0-128 57-128 128 0 71 57 128 128 128 71 0 128-57 128-128 0-71-57-128-128-128z"/>
+</font></defs></svg>

packages/ui/src/icons/icons.css

@@ -0,0 +1,93 @@
+@charset "UTF-8";
+
+/* tea-icons */
+@font-face {
+	font-family: 'tea-icons';
+	src: url('fonts/tea-icons.eot');
+	src: url('fonts/tea-icons.eot?#iefix') format('embedded-opentype'),
+		url('fonts/tea-icons.woff') format('woff'), url('fonts/tea-icons.ttf') format('truetype'),
+		url('fonts/tea-icons.svg#tea-icons') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[data-icon]:before {
+	font-family: 'tea-icons' !important;
+	content: attr(data-icon);
+	font-style: normal !important;
+	font-weight: normal !important;
+	font-variant: normal !important;
+	text-transform: none !important;
+	speak: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+[class^='icon-']:before,
+[class*=' icon-']:before {
+	font-family: 'tea-icons' !important;
+	font-style: normal !important;
+	font-weight: normal !important;
+	font-variant: normal !important;
+	text-transform: none !important;
+	speak: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-discord:before {
+	content: '\61';
+}
+.icon-download-arrow:before {
+	content: '\62';
+}
+.icon-enter-arrow:before {
+	content: '\63';
+}
+.icon-github:before {
+	content: '\64';
+}
+.icon-instagram:before {
+	content: '\65';
+}
+.icon-reddit:before {
+	content: '\66';
+}
+.icon-right-arrow:before {
+	content: '\67';
+}
+.icon-telegram:before {
+	content: '\68';
+}
+.icon-twitter:before {
+	content: '\69';
+}
+.icon-tea-logo-iconasset-1:before {
+	content: '\6a';
+}
+.icon-tea-circle:before {
+	content: '\6b';
+}
+.icon-clipboard:before {
+	content: '\6c';
+}
+.icon-tea-checkmark:before {
+	content: '\6d';
+}
+.icon-pattern-random-21:before {
+	content: '\6e';
+}
+.icon-pattern-random-15:before {
+	content: '\6f';
+}
+.icon-pattern-random-19:before {
+	content: '\70';
+}
+.icon-click-copy-icon:before {
+	content: '\71';
+}
+.icon-search-icon:before {
+	content: '\72';
+}