docs: minor seo/accesibility improvements

MIERUNE · Nov 28, 2024 · 9d54602 · 9d54602
1 parent 171c57b
commit 9d54602
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 ![NPM Version](https://img.shields.io/npm/v/svelte-maplibre-gl)
 ![NPM License](https://img.shields.io/npm/l/svelte-maplibre-gl?color=96C902)
 
-[Svelte](https://svelte.dev/) library for using [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) as reactive components.
+Use [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) with the full potential of [Svelte](https://svelte.dev/)'s reactivity.
 
 ⚠️ This project is currently in the early stages of development. Features and APIs are subject to change.
 
@@ -13,7 +13,7 @@ License: MIT or Apache 2.0
 
 ## Installation
 
-Using `svelte-maplibre-gl` requires `svelte >= 5.0.0`.
+⚠️ Using `svelte-maplibre-gl` requires `svelte >= 5.0.0`.
 
 ```bash
 npm install --dev svelte-maplibre-gl

diff --git a/src/app.css b/src/app.css
@@ -53,7 +53,7 @@
 		--docsearch-spacing: 12px;
 		--docsearch-icon-stroke-width: 1.4;
 		--docsearch-highlight-color: var(--docsearch-primary-color);
-		--docsearch-muted-color: rgb(150, 159, 175);
+		--docsearch-muted-color: #666;
 		--docsearch-container-background: rgba(101, 108, 133, 0.8);
 		--docsearch-logo-color: rgba(84, 104, 255);
 
@@ -94,7 +94,7 @@
 		--docsearch-container-background: rgba(9, 10, 17, 0.8);
 		--docsearch-modal-background: #151e2a;
 		--docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9);
-		--docsearch-searchbox-background: rgb(9, 10, 17);
+		--docsearch-searchbox-background: #000;
 		--docsearch-searchbox-focus-background: #000;
 		--docsearch-hit-color: rgb(190, 195, 201);
 		--docsearch-hit-shadow: none;
@@ -106,7 +106,7 @@
 		--docsearch-footer-background: #1f2936;
 		--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 86, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
 		--docsearch-logo-color: rgb(255, 255, 255);
-		--docsearch-muted-color: rgb(127, 132, 151);
+		--docsearch-muted-color: #aaa;
 	}
 }
 

diff --git a/src/lib/assets/fonts/geist.css b/src/lib/assets/fonts/geist.css
@@ -1,8 +1,10 @@
 @font-face {
 	font-family: 'Geist';
 	src: url('./geist.woff2') format('woff2');
+	font-display: swap;
 }
 @font-face {
 	font-family: 'Geist Mono';
 	src: url('./geist-mono.woff2') format('woff2');
+	font-display: swap;
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <div class="mx-auto w-full p-8 py-16 2xl:container">
 	<main class="prose max-w-none dark:prose-invert">
 		<h1>Svelte MapLibre GL</h1>
-		<p>Svelte library for using MapLibre GL JS as reactive components.</p>
+		<p>Use MapLibre GL JS with the full potential of Svelte's reactivity.</p>
 		<p>
 			<a href="/examples/">Examples</a>
 		</p>
@@ -14,4 +14,5 @@
 
 <svelte:head>
 	<title>Svelte MapLibre GL</title>
+	<meta name="description" content="Svelte library for using MapLibre GL JS as reactive components" />
 </svelte:head>
diff --git a/src/routes/DarkModeSelector.svelte b/src/routes/DarkModeSelector.svelte
@@ -9,8 +9,8 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon' })}>
-		<Sun class="!size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-		<Moon class="absolute !size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+		<Sun class="!size-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+		<Moon class="absolute !size-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
 		<span class="sr-only">Toggle theme</span>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content align="end">

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
@@ -51,10 +51,16 @@
 		<div class="mr-4">
 			<div id="docsearch"></div>
 		</div>
-		<Button variant="ghost" size="icon">
-			<a href="https://github.com/MIERUNE/svelte-maplibre-gl" target="_blank"><GitHub class="!size-5" /></a>
+		<Button
+			variant="ghost"
+			size="icon"
+			href="https://github.com/MIERUNE/svelte-maplibre-gl"
+			target="_blank"
+			title="GitHub repository"
+		>
+			<GitHub class="!size-6" />
 		</Button>
-		<div>
+		<div class="ml-1">
 			<DarkModeSelector />
 		</div>
 	</div>

diff --git a/src/routes/components/[slug]/+page.svelte b/src/routes/components/[slug]/+page.svelte
@@ -21,4 +21,5 @@
 
 <svelte:head>
 	<title>{data.meta.title} - Svelte MapLibre GL</title>
+	<meta name="description" content={data.meta.description} />
 </svelte:head>
diff --git a/src/routes/examples/[slug]/+page.svelte b/src/routes/examples/[slug]/+page.svelte
@@ -21,4 +21,5 @@
 
 <svelte:head>
 	<title>{data.meta.title} - Svelte MapLibre GL</title>
+	<meta name="description" content={data.meta.description} />
 </svelte:head>