fix: 💫 update environment variable handling

Author: rodneylab

.env.EXAMPLE

@@ -1 +1 @@
-VITE_MAPBOX_ACCESS_TOKEN="your.mapbox.access.token"
+PUBLIC_MAPBOX_ACCESS_TOKEN="your.mapbox.access.token"

README.md

@@ -206,19 +206,7 @@ Add a map to your SvelteKit site using <a aria-label="Learn more about Map box"
 ">LeafletJS</a>. Requires a Mapbox access token, just add it your to the `.env` file in your project:
 
 ```plaintext
-VITE_MAPBOX_ACCESS_TOKEN=your.token
-```
-
-If you don't yet have environment variables configured in your project, add the `dotenv` package:
-
-```shell
-pnpm install -D dotenv
-```
-
-And the add it in your `svelte.config.js` file:
-
-```javascript
-import 'dotenv/config';
+PUBLIC_MAPBOX_ACCESS_TOKEN=your.token
 ```
 
 Add the component to a `.svelte` file in your project:

package.json

@@ -35,7 +35,6 @@
 		"@typescript-eslint/eslint-plugin": "^5.38.0",
 		"@typescript-eslint/parser": "^5.38.0",
 		"@vitejs/plugin-basic-ssl": "^0.1.2",
-		"dotenv": "^16.0.2",
 		"eslint": "^8.23.1",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",

pnpm-lock.yaml

@@ -1,5 +1,7 @@
+import { PUBLIC_MAPBOX_ACCESS_TOKEN } from '$env/static/public';
+
 const website = {
-	mapboxAccessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN as string,
+	mapboxAccessToken: PUBLIC_MAPBOX_ACCESS_TOKEN,
 };
 
 export { website as default };

src/lib/config/website.ts

@@ -1,5 +1,4 @@
 import adapter from '@sveltejs/adapter-static';
-import 'dotenv/config';
 import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */