style: convert emoji into iconify

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.vercel

package.json

@@ -12,8 +12,12 @@
 		"format": "prettier --plugin prettier-plugin-svelte --write ."
 	},
 	"devDependencies": {
+		"@iconify-json/akar-icons": "^1.1.19",
 		"@iconify-json/material-symbols": "^1.1.59",
+		"@iconify-json/solar": "^1.1.5",
+		"@iconify/iconify": "^3.1.1",
 		"@iconify/tailwind": "^0.1.3",
+		"@iconify/utils": "^2.1.11",
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/adapter-static": "^2.0.3",

src/lib/components/Line.svelte

@@ -46,13 +46,17 @@
 				{data.name}
 			</a>
 		{/if}
-		<span class="whitespace-nowrap text-right text-xs self-center">
+		<span class="flex items-center justify-end whitespace-nowrap text-xs">
 			{#if isFile}
 				{isFile && data.size != '0 B' ? data.size : '-'}
 				{#if data.size != '0 B'}
-					<button class="text-lg ml-3" on:click={downloadFile}>📥</button>
+					<button class="flex text-lg ml-3" on:click={downloadFile}>
+						<span class="text-accent text-3xl icon-[solar--download-square-bold]"></span>
+					</button>
 				{:else}
-					<button disabled class="text-lg ml-3" style="mix-blend-mode: luminosity">📥</button>
+					<button disabled class="flex text-lg ml-3" on:click={downloadFile}>
+						<span class="text-neutral text-3xl icon-[solar--download-square-bold]"></span>
+					</button>
 				{/if}
 			{/if}
 		</span>

src/lib/settings.ts

@@ -1,6 +1,6 @@
 import { persisted } from 'svelte-local-storage-store';
 
-export const themes = ['halloween', 'retro', 'dracula'] as const;
+export const themes = ['halloween', 'autumn', 'dracula'] as const;
 type Theme = (typeof themes)[number];
 
 export interface Settings {

src/routes/[...dir]/[zfile=dir]/+page.svelte

@@ -12,8 +12,6 @@
 	import type { PageData } from './$types';
 	export let data: PageData;
 
-	import githubIco from '$lib/assets/github-mark-white.svg';
-
 	let editUrls = EDIT_URLS($page.url.pathname);
 	let searchActive = false;
 	let searchInput: HTMLInputElement;
@@ -101,29 +99,47 @@
 		<div class="navbar-center">
 			<div class="lg:text-lg breadcrumbs text-sm font-semibold">
 				<ul>
-					<li><a class="ml-1" href="/">🏠 Risorse</a></li>
+					<li>
+						<a class="ml-1 flex items-center" href="/">
+							<span class="text-xl icon-[akar-icons--home-alt1]"></span>
+						</a>
+					</li>
 					{#each urlParts as part}
 						{@const href = getPartHref(part)}
 						<li><a {href}>{part}</a></li>
 					{/each}
 				</ul>
 			</div>
 			<div class="flex flex-1 justify-content-start">
-				<a class="sm:ml-2 p-1 rounded-lg btn-ghost flex-shrink-0 w-8" href={editUrls.github_repo}>
-					<img src={githubIco} alt="github logo" />
+				<a
+					class="sm:ml-2 p-1 flex items-center rounded-lg btn-ghost flex-shrink-0 w-8"
+					href={editUrls.github_repo}
+				>
+					<span class="text-2xl icon-[akar-icons--github-fill]"></span>
 				</a>
 			</div>
 		</div>
 		<div class="flex flex-1 justify-end mr-2">
 			<button
-				class="lg:ml-2 p-1 bg-base-300 rounded-lg btn-ghost"
+				class="lg:ml-2 p-2 flex items-center bg-base-300 rounded-xl btn-ghost"
 				title="ctrl + k"
 				on:click|preventDefault={() => viewMobileFinder()}
 			>
-				🔍 <kbd class="kbd-sm hidden lg:inline-block">ctrl + k </kbd>
+				<span class="text-primary icon-[akar-icons--search]"></span>
+				<kbd class="kbd-sm hidden lg:inline-block">ctrl + k </kbd>
 			</button>
 		</div>
 	</div>
+	<!-- TODO uncomment when #111 is merged -->
+	<!-- <div class="flex flex-1 justify-end mr-4 mb-3">
+		<button
+			class="lg:ml-2 p-1 flex items-center rounded-xl bg-primary text-base"
+			on:click={toggleReverse}
+		>
+			<span class="text-xl icon-[solar--sort-vertical-bold-duotone]" class:flip={reverseMode}
+			></span>
+		</button>
+	</div> -->
 
 	<div class="grid gap-5 grid-cols-dir md:grid-cols-dir-full mx-4 text-lg">
 		{#if data.manifest.directories}

src/routes/build/+page.svelte

@@ -14,8 +14,10 @@
 		<div class="navbar-start">
 			<h1 class="text-xl font-semibold text-base-content">Stato delle raccolte</h1>
 		</div>
-		<div class="navbar-end">
-			<a class="btn btn-square btn-ghost" title="Indietro" href="/"> ⬆️ </a>
+		<div class="navbar-end flex items-center">
+			<a class="btn btn-square btn-ghost" title="Indietro" href="/">
+				<span class="text-primary icon-[akar-icons--arrow-back-thick-fill]"></span>
+			</a>
 		</div>
 	</nav>
 	<div class="m-8">

src/routes/dash/[course]/+page.svelte

@@ -69,8 +69,10 @@
 					{data.course.name}
 				</h1>
 			</div>
-			<div class="navbar-end">
-				<a class="btn btn-square btn-ghost" title="Indietro" href="/"> ⬆️ </a>
+			<div class="navbar-end flex items-center">
+				<a class="btn btn-square btn-ghost" title="Indietro" href="/">
+					<span class="text-primary icon-[akar-icons--arrow-back-thick-fill]"></span>
+				</a>
 			</div>
 		</nav>
 		<ListTeaching years={filteredCourses.mandatory} {activeYears} title={''} />

src/routes/dash/[course]/ListTeaching.svelte

@@ -28,9 +28,12 @@
 							</a>
 							{#if teaching.chat != null && teaching.chat !== ''}
 								<a
-									href="https://{teaching.chat}"
-									class="text-center text-lg join-item border-base-content border-l-2">👥</a
+									href={disabled ? null : 'https://' + teaching.chat}
+									class="text-center join-item border-l-2"
+									title="Link alla community"
 								>
+									<span class="text-2xl icon-[akar-icons--people-group]"></span>
+								</a>
 							{/if}
 						</li>
 					</a>