Run Prettier

.github/workflows/nextjs.yml

@@ -5,7 +5,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -19,7 +19,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -50,7 +50,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: '16'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
           cache-dependency-path: ./package-lock.json
       - name: Setup Pages
@@ -92,4 +92,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v2

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true
+}

README.md

@@ -1,6 +1,6 @@
 # maps
-NextJS Website for Displaying Project Maps
 
+NextJS Website for Displaying Project Maps
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 

next.config.js

@@ -3,6 +3,6 @@
  */
 const nextConfig = {
   output: 'export',
-  }
-   
-  module.exports = nextConfig
+};
+
+module.exports = nextConfig;

package.json

@@ -28,6 +28,7 @@
     "eslint": "^8",
     "eslint-config-next": "13.5.4",
     "postcss": "^8",
+    "prettier": "3.3.3",
     "tailwindcss": "^3",
     "typescript": "^5"
   }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/app/institutions/DynamicMapComponent.tsx

@@ -3,9 +3,9 @@ import { BrowserRouter } from 'react-router-dom';
 import MapComponent from './MapComponent';
 
 const DynamicMapComponent: React.FC = () => (
-    <BrowserRouter>
-        <MapComponent />
-    </BrowserRouter>
+  <BrowserRouter>
+    <MapComponent />
+  </BrowserRouter>
 );
 
-export default DynamicMapComponent;
+export default DynamicMapComponent;

src/app/institutions/MapComponent.tsx

@@ -19,7 +19,7 @@ const MapComponent: React.FC = () => {
   const [zoom, setZoom] = useState(1);
   const mapRef = useRef<MapRef>(null);
   const [projection, setProjection] = useState('globe');
-  
+
   const handleProjection = () => {
     setProjection(projection === 'globe' ? 'mercator' : 'globe');
   };
@@ -30,7 +30,7 @@ const MapComponent: React.FC = () => {
     zoom: zoom,
     width: '100%',
     height: '100vh',
-    transitionDuration: 300 
+    transitionDuration: 300,
   };
 
   const onMove = (event: MapMoveEvent) => {
@@ -42,12 +42,12 @@ const MapComponent: React.FC = () => {
       ref={mapRef}
       initialViewState={viewState}
       onMove={onMove}
-      mapStyle="mapbox://styles/mapbox/streets-v11"
+      mapStyle='mapbox://styles/mapbox/streets-v11'
       mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
       projection={projection}
     >
       <MapControls mapRef={mapRef} handleProjection={handleProjection} />
-      <MarkersComponent mapRef={mapRef} zoom={zoom}/>
+      <MarkersComponent mapRef={mapRef} zoom={zoom} />
     </Map>
   );
 };