doc: change select color (#65)

* fix: change selected color for language * add metatag * fix * prerender * prerender
watergis · Mar 10, 2024 · a3dcb70 · a3dcb70
1 parent d149f53
commit a3dcb70
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,19 @@
 # malibre-gl-export
 
+![License](https://img.shields.io/github/license/watergis/maplibre-gl-export)
+![build](https://github.com/watergis/maplibre-gl-export/workflows/build/badge.svg)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/2ca781c3-2680-4c17-9219-4992c1f2a44e/deploy-status)](https://app.netlify.com/sites/maplibre-gl-export/deploys)
+![GitHub repo size](https://img.shields.io/github/repo-size/watergis/maplibre-gl-export)
 
 This monorepo manages the source code and demo page for `@watergis/maplibre-gl-export` and `@watergis/mapbox-gl-export`.
 
 ## Repositories
 
-| repository | description | changelog |
-|---|---|---|
-|[@watergis/maplibre-gl-export](./packages/maplibre-gl-export/)| To manage maplibre export plugin source code|[CHANGELOG](./packages/maplibre-gl-export/CHANGELOG.md)|
-|[@watergis/mapbox-gl-export](./packages/mapbox-gl-export/)| To manage mapbox export plugin source code|[CHANGELOG](./packages/mapbox-gl-export/CHANGELOG.md)|
-|[demo](./sites/demo/)| Demo website code for maplibre/mapbox export plugins |-|
+| repository | version | description | changelog |
+|---|---|---|---|
+|[@watergis/maplibre-gl-export](./packages/maplibre-gl-export/)| [![version](https://img.shields.io/npm/v/@watergis/mapbox-gl-export.svg)](https://www.npmjs.com/package/@watergis/mapbox-gl-export) | To manage maplibre export plugin source code|[CHANGELOG](./packages/maplibre-gl-export/CHANGELOG.md)|
+|[@watergis/mapbox-gl-export](./packages/mapbox-gl-export/)| [![version](https://img.shields.io/npm/v/@watergis/maplibre-gl-export.svg)](https://www.npmjs.com/package/@watergis/maplibre-gl-export) | To manage mapbox export plugin source code|[CHANGELOG](./packages/mapbox-gl-export/CHANGELOG.md)|
+|[demo](./sites/demo/)| - | Demo website code for maplibre/mapbox export plugins |-|
 
 ## Usage of the plugin
 

diff --git a/packages/mapbox-gl-export/README.md b/packages/mapbox-gl-export/README.md
@@ -1,7 +1,6 @@
 # mapbox-gl-export
 
-![build](https://github.com/watergis/maplibre-gl-export/workflows/build/badge.svg)
-![GitHub](https://img.shields.io/github/license/watergis/maplibre-gl-export)
+[![version](https://img.shields.io/npm/v/@watergis/mapbox-gl-export.svg)](https://www.npmjs.com/package/@watergis/mapbox-gl-export)
 
 This module adds control which can export PDF and images.
 

diff --git a/packages/maplibre-gl-export/README.md b/packages/maplibre-gl-export/README.md
@@ -1,7 +1,6 @@
 # maplibre-gl-export
 
-![build](https://github.com/watergis/maplibre-gl-export/workflows/build/badge.svg)
-![GitHub](https://img.shields.io/github/license/watergis/maplibre-gl-export)
+[![version](https://img.shields.io/npm/v/@watergis/maplibre-gl-export.svg)](https://www.npmjs.com/package/@watergis/maplibre-gl-export)
 
 This module adds control which can export PDF and images. It was forked from [mapbox-gl-export](https://github.com/watergis/mapbox-gl-export).
 

diff --git a/sites/demo/src/app.html b/sites/demo/src/app.html
@@ -3,7 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"
+		/>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" data-theme="skeleton">

diff --git a/sites/demo/src/lib/LanguageSelector.svelte b/sites/demo/src/lib/LanguageSelector.svelte
@@ -77,7 +77,7 @@
 >
 	{#each languages as lang}
 		<button
-			class="lang-button"
+			class="lang-button {language === lang ? 'selected' : ''}"
 			on:click={() => {
 				handleClickLanguage(lang);
 			}}
@@ -91,5 +91,14 @@
 	.lang-button {
 		min-width: 150px;
 		padding: 0 0.5rem !important;
+
+		&.selected {
+			background-color: #006eb5;
+			color: white;
+
+			&:hover {
+				color: black;
+			}
+		}
 	}
 </style>
diff --git a/sites/demo/src/routes/(demo)/mapbox/+page.svelte b/sites/demo/src/routes/(demo)/mapbox/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import mapboxgl, { Map } from 'mapbox-gl';
+	import mapboxgl, { Map, NavigationControl } from 'mapbox-gl';
 	import {
 		MapboxExportControl,
 		Size,
@@ -37,6 +37,8 @@
 			Local: language
 		});
 
+		map.addControl(new NavigationControl(), 'bottom-right');
+
 		map.addControl(exportControl, 'top-right');
 	};
 

diff --git a/sites/demo/src/routes/(demo)/mapbox/+page.ts b/sites/demo/src/routes/(demo)/mapbox/+page.ts
@@ -1,2 +1,16 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	const title = 'Mapbox GL Export';
+	const site_name = 'Mapbox GL Export Demo';
+	const site_description = 'Demo website for mapbox-gl-export plugin';
+
+	return {
+		title,
+		site_name,
+		site_description
+	};
+};
+
 export const prerender = true;
 export const ssr = false;
diff --git a/sites/demo/src/routes/(demo)/maplibre/+page.svelte b/sites/demo/src/routes/(demo)/maplibre/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { addProtocol, Map } from 'maplibre-gl';
+	import { addProtocol, Map, NavigationControl } from 'maplibre-gl';
 	import {
 		MaplibreExportControl,
 		Size,
@@ -48,6 +48,8 @@
 			hash: true
 		});
 
+		map.addControl(new NavigationControl(), 'bottom-right');
+
 		initExportControl();
 	});
 

diff --git a/sites/demo/src/routes/(demo)/maplibre/+page.ts b/sites/demo/src/routes/(demo)/maplibre/+page.ts
@@ -1,2 +1,16 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	const title = 'Maplibre GL Export';
+	const site_name = 'Maplibre GL Export Demo';
+	const site_description = 'Demo website for maplibre-gl-export plugin';
+
+	return {
+		title,
+		site_name,
+		site_description
+	};
+};
+
 export const prerender = true;
 export const ssr = false;
diff --git a/sites/demo/src/routes/(doc)/+layout.svelte b/sites/demo/src/routes/(doc)/+layout.svelte
@@ -10,14 +10,29 @@
 	import css from 'highlight.js/lib/languages/css';
 	import javascript from 'highlight.js/lib/languages/javascript';
 	import typescript from 'highlight.js/lib/languages/typescript';
+	import type { PageData } from './$types';
 
 	hljs.registerLanguage('xml', xml); // for HTML
 	hljs.registerLanguage('css', css);
 	hljs.registerLanguage('javascript', javascript);
 	hljs.registerLanguage('typescript', typescript);
 	storeHighlightJs.set(hljs);
+
+	export let data: PageData;
 </script>
 
+<svelte:head>
+	<title>{data.title}</title>
+	<meta property="og:site_name" content={data.site_name} />
+	<meta property="og:type" content="article" />
+	<meta name="description" content={data.site_description} />
+	<meta property="og:description" content={data.site_description} />
+	<meta name="twitter:description" content={data.site_description} />
+	<meta property="og:title" content={data.title} />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content={data.title} />
+</svelte:head>
+
 <!-- App Shell -->
 <AppShell>
 	<svelte:fragment slot="header">
@@ -50,10 +65,8 @@
 	<slot />
 
 	<svelte:fragment slot="footer">
-		<div class="flex flex-col justify-center space-x-2 py-4">
-			<p class="flex justify-center space-x-2">
-				maplibre-gl-export and mapbox-gl-export by JinIgarashi.
-			</p>
+		<div class="space-y-2 py-4">
+			<p class="flex justify-center space-x-2">Maplibre/Mapbox GL Export by JinIgarashi.</p>
 			<p class="flex justify-center space-x-2">The source code is licensed MIT.</p>
 			<p class="flex justify-center space-x-2">The website content is licensed CC BY NC SA 4.0.</p>
 		</div>

diff --git a/sites/demo/src/routes/(doc)/+layout.ts b/sites/demo/src/routes/(doc)/+layout.ts
@@ -0,0 +1,16 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+	const title = 'Maplibre/Mapbox GL Export';
+	const site_name = 'Maplibre/Mapbox GL Export Demo';
+	const site_description = 'Demo website for maplibre-gl-export and mapbox-gl-export plugins';
+
+	return {
+		title,
+		site_name,
+		site_description
+	};
+};
+
+export const prerender = true;
+export const ssr = false;
diff --git a/sites/demo/src/routes/(doc)/+page.svelte b/sites/demo/src/routes/(doc)/+page.svelte
@@ -2,13 +2,13 @@
 </script>
 
 <div class="container h-full mx-auto flex justify-center items-center">
-	<div class="space-y-10 text-center flex flex-col items-center">
+	<div class="space-y-10 text-center flex flex-col items-center px-2">
 		<h2 class="h2">Welcome to Maplibre/Mapbox GL Export</h2>
 
 		<div class="flex justify-center space-x-2">
 			<p>Look at the following demo of the plugin:</p>
 		</div>
-		<div class="flex justify-center space-x-4">
+		<div class="flex justify-center space-x-2">
 			<a class="btn variant-filled" href="/maplibre" target="_blank" rel="noreferrer">
 				maplibre-gl-export
 			</a>

diff --git a/sites/demo/src/routes/(doc)/+page.ts b/sites/demo/src/routes/(doc)/+page.ts
diff --git a/sites/demo/static/favicon.png b/sites/demo/static/favicon.png
diff --git a/sites/demo/vite.config.ts b/sites/demo/vite.config.ts
@@ -11,5 +11,8 @@ export default defineConfig({
 				greedy: [/^hljs-/]
 			}
 		})
-	]
+	],
+	ssr: {
+		noExternal: ['maplibre-gl', 'mapbox-gl']
+	}
 });