feat: add env variables

.gitignore

@@ -3,4 +3,5 @@ build
 node_modules
 
 .idea
-.vscode
\ No newline at end of file
+.vscode
+.env
\ No newline at end of file

package-lock.json

@@ -14,7 +14,7 @@
         "tailwindcss": "^2.0.3"
       },
       "devDependencies": {
-        "@snowpack/plugin-dotenv": "^2.0.5",
+        "@snowpack/plugin-dotenv": "^2.1.0",
         "@snowpack/plugin-postcss": "^1.1.0",
         "@snowpack/plugin-react-refresh": "^2.4.0",
         "@snowpack/plugin-typescript": "^1.2.0",
@@ -349,9 +349,9 @@
       }
     },
     "node_modules/@snowpack/plugin-dotenv": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@snowpack/plugin-dotenv/-/plugin-dotenv-2.0.5.tgz",
-      "integrity": "sha512-y54lwYRDpTfDTU3uopHLND0DKIjjyWiYxhvOPfZvC4OpOd7UIRwMdSOd5XLZJPEBJ4BD38lDLiXh+ODfNDqhnQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@snowpack/plugin-dotenv/-/plugin-dotenv-2.1.0.tgz",
+      "integrity": "sha512-NvwB+kQuxKheZLWrRvOgXB8i0cXhuIkljbgCn02fRGCIOigPIDk1jZrnn3x9skqqtul/XvW9dNulVi6Fa7CN6g==",
       "dev": true,
       "dependencies": {
         "dotenv": "^8.2.0",
@@ -1215,6 +1215,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/heroicons-react/-/heroicons-react-1.3.0.tgz",
       "integrity": "sha512-gz1XE6/BsuVfyBM/RiDMgapPmrf2ZrDcF8GxJ26PJTPQnEbDFs9TPzpJ5IDPQLpUor/qshPbVDv20yWIwhMwyA==",
+      "deprecated": "Official Heroicons V1 released. Please use the following for future projects: https://www.npmjs.com/package/@heroicons/react",
       "peerDependencies": {
         "react": ">=16.13"
       }
@@ -3011,9 +3012,9 @@
       "requires": {}
     },
     "@snowpack/plugin-dotenv": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@snowpack/plugin-dotenv/-/plugin-dotenv-2.0.5.tgz",
-      "integrity": "sha512-y54lwYRDpTfDTU3uopHLND0DKIjjyWiYxhvOPfZvC4OpOd7UIRwMdSOd5XLZJPEBJ4BD38lDLiXh+ODfNDqhnQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@snowpack/plugin-dotenv/-/plugin-dotenv-2.1.0.tgz",
+      "integrity": "sha512-NvwB+kQuxKheZLWrRvOgXB8i0cXhuIkljbgCn02fRGCIOigPIDk1jZrnn3x9skqqtul/XvW9dNulVi6Fa7CN6g==",
       "dev": true,
       "requires": {
         "dotenv": "^8.2.0",

package.json

@@ -15,7 +15,7 @@
     "tailwindcss": "^2.0.3"
   },
   "devDependencies": {
-    "@snowpack/plugin-dotenv": "^2.0.5",
+    "@snowpack/plugin-dotenv": "^2.1.0",
     "@snowpack/plugin-postcss": "^1.1.0",
     "@snowpack/plugin-react-refresh": "^2.4.0",
     "@snowpack/plugin-typescript": "^1.2.0",

snowpack.config.js

@@ -9,6 +9,7 @@ module.exports = {
     '@snowpack/plugin-dotenv',
     '@snowpack/plugin-typescript',
     '@snowpack/plugin-postcss',
+    '@snowpack/plugin-dotenv',
   ],
   routes: [
     /* Enable an SPA Fallback in development: */

src/Map/Map.tsx

@@ -41,7 +41,7 @@ export const Map: React.FC<Props> = (props) => {
         url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
         id="mapbox/streets-v11"
         tileSize={512}
-        accessToken="pk.eyJ1IjoicHJleWEyayIsImEiOiJja202N2JucGowbGU4MnB1aWtxNGkzMW9jIn0.rVBLRZtohLEgdSLO0nlWng"
+        accessToken={import.meta.env.SNOWPACK_PUBLIC_MAPBOX_TOKEN}
         zoomOffset={-1}
         maxZoom={18}
       />

src/Sidebar/SidebarSingleView.tsx

 import React, { CSSProperties } from 'react';
 import SidebarContainer from './SidebarContainer';
 import type { PointOfInterest } from '../types/PointOfInterest';
-import { X as CloseIcon, HomeOutline as HomeIcon } from 'heroicons-react';
+import { X as CloseIcon, HomeOutline as HomeIcon, LocationMarkerOutline as AddressIcon } from 'heroicons-react';
 
 interface Props {
   style?: CSSProperties;
@@ -18,7 +18,6 @@ const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) =>
         className="absolute left-5 top-5 p-1 text-gray-500 inline-block cursor-pointer hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
         onClick={onClose}
       />
-
       <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.image} alt="blog" />
       <div className="p-6">
         <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
@@ -32,6 +31,12 @@ const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) =>
             </a>
           </div>
         )}
+        {value.address && (
+          <div className={'flex items-center mt-3'}>
+            <AddressIcon size={18} className={'text-gray-500 mr-2'} />
+            <div className="text-sm text-gray-500">{value.address}</div>
+          </div>
+        )}
       </div>
     </SidebarContainer>
   );