Clean up CSS imports and fix icon SSR size.

ecds · Oct 23, 2024 · 2a68b56 · 2a68b56
1 parent e1082c5
commit 2a68b56
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/app/components/relatedRecords/RelatedPlaces.tsx b/app/components/relatedRecords/RelatedPlaces.tsx
@@ -11,11 +11,10 @@ import RelatedSection from "./RelatedSection";
 import { MapContext, PlaceContext } from "~/contexts";
 import { toFeatureCollection } from "~/utils/toFeatureCollection";
 import PlacePopup from "../PlacePopup";
-import "maplibre-gl/dist/maplibre-gl.css";
-import type { TRelatedPlaceRecord } from "~/types";
 import { orderLayers } from "~/utils/orderLayers";
 import { cluster, clusterCount, singlePoint } from "~/mapStyles/geoJSON";
 import { Link } from "@remix-run/react";
+import type { TRelatedPlaceRecord } from "~/types";
 
 interface Props {
   places: TRelatedPlaceRecord[];

diff --git a/app/root.tsx b/app/root.tsx
@@ -15,12 +15,19 @@ import Loading from "./components/layout/Loading";
 import RouteError from "./components/errorResponses/RouteError";
 import CodeError from "./components/errorResponses/CodeError";
 import { MapContext } from "./contexts";
-import type { LinksFunction } from "@remix-run/node";
-import type { Map as TMap } from "maplibre-gl";
 import { ClientOnly } from "remix-utils/client-only";
 import StyleSwitcher from "./components/mapping/StyleSwitcher";
 import Map from "./components/mapping/Map.client";
 import { topBarHeight } from "./config";
+// https://stackoverflow.com/a/59429852/1792144
+// The following import prevents a Font Awesome icon server-side rendering bug,
+// where the icons flash from a very large icon down to a properly sized one:
+import "@fortawesome/fontawesome-svg-core/styles.css";
+// Prevent fontawesome from adding its CSS since we did it manually above:
+import { config } from "@fortawesome/fontawesome-svg-core";
+config.autoAddCss = false; /* eslint-disable import/first */
+import type { LinksFunction } from "@remix-run/node";
+import type { Map as TMap } from "maplibre-gl";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,6 +1,5 @@
 import { NavLink } from "@remix-run/react";
 import { useEffect } from "react";
-import "maplibre-gl/dist/maplibre-gl.css";
 
 export default function Index() {
   useEffect(() => {
@@ -25,14 +24,23 @@ export default function Index() {
       <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 z-1"></div>
 
       <div className="relative z-20 flex flex-col items-center justify-center h-full text-center text-white px-4">
-        <h1 className="text-5xl font-bold mb-2 tracking-widest" style={{ fontFamily: 'Barlow, sans-serif' }}>
+        <h1
+          className="text-5xl font-bold mb-2 tracking-widest"
+          style={{ fontFamily: "Barlow, sans-serif" }}
+        >
           WELCOME TO THE
         </h1>
-        <h2 className="text-6xl font-bold mb-8 tracking-widest" style={{ fontFamily: 'Barlow, sans-serif' }}>
+        <h2
+          className="text-6xl font-bold mb-8 tracking-widest"
+          style={{ fontFamily: "Barlow, sans-serif" }}
+        >
           GEORGIA COAST ATLAS
         </h2>
         <hr className="w-1/4 border-t-2 border-gray-300 mb-8" />
-        <p className="text-lg max-w-3xl leading-relaxed mb-8" style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 400 }}>
+        <p
+          className="text-lg max-w-3xl leading-relaxed mb-8"
+          style={{ fontFamily: "Barlow, sans-serif", fontWeight: 400 }}
+        >
           The Georgia coast, approximately 100 miles long, is defined by its
           barrier islands and their back-barrier environments. With a variety of
           life in maritime forests, salt marshes, tidal channels and creeks,
@@ -49,14 +57,24 @@ export default function Index() {
           <NavLink
             to="/explore"
             className="bg-blue-300 hover:bg-blue-400 text-black font-bold py-3 px-6 rounded-md text-lg tracking-wide border border-gray-300"
-            style={{ backgroundColor: '#98c1d9', color: '#333', fontFamily: 'Barlow, sans-serif', fontWeight: 600 }}
+            style={{
+              backgroundColor: "#98c1d9",
+              color: "#333",
+              fontFamily: "Barlow, sans-serif",
+              fontWeight: 600,
+            }}
           >
             Explore the Coast
           </NavLink>
           <NavLink
             to="/search"
             className="bg-blue-300 hover:bg-blue-400 text-black font-bold py-3 px-6 rounded-md text-lg tracking-wide border border-gray-300"
-            style={{ backgroundColor: '#98c1d9', color: '#333', fontFamily: 'Barlow, sans-serif', fontWeight: 600 }}
+            style={{
+              backgroundColor: "#98c1d9",
+              color: "#333",
+              fontFamily: "Barlow, sans-serif",
+              fontWeight: 600,
+            }}
           >
             Search by Place
           </NavLink>

diff --git a/app/routes/explore.tsx b/app/routes/explore.tsx
@@ -4,15 +4,14 @@ import { useLoaderData, defer, Link, useNavigation } from "@remix-run/react";
 import { ClientOnly } from "remix-utils/client-only";
 import { fetchPlacesByType } from "~/data/coredata";
 import { placesToFeatureCollection } from "~/utils/toFeatureCollection";
-import type { TPlace } from "~/types";
-import type { LoaderFunction } from "@remix-run/node";
-import "maplibre-gl/dist/maplibre-gl.css";
 import IntroModal from "~/components/layout/IntroModal";
 import Loading from "~/components/layout/Loading";
 import Sidebar from "~/components/layout/Sidebar";
 import PlacePopup from "~/components/PlacePopup";
-import type { MapMouseEvent, MapGeoJSONFeature } from "maplibre-gl";
 import { defaultBounds, topBarHeight } from "~/config";
+import type { MapMouseEvent, MapGeoJSONFeature } from "maplibre-gl";
+import type { TPlace } from "~/types";
+import type { LoaderFunction } from "@remix-run/node";
 
 export const loader: LoaderFunction = async () => {
   const islands: TPlace[] = await fetchPlacesByType("Barrier Island");