properly import and optimize/cache images in markdown files

components/Link/Link.module.css

@@ -1,23 +1,28 @@
 .link {
   color: var(--colors-link);
   text-decoration: none;
-}
 
-.link.underline {
+  /* fancy underline */
   background-image: linear-gradient(var(--colors-linkUnderline), var(--colors-linkUnderline));
   background-position: 0% 100%;
   background-repeat: no-repeat;
   background-size: 0% 2px;
+  transition: background-size 0.2s ease-in-out;
   padding-bottom: 3px;
 }
 
-.link.underline:hover,
-.link.underline:focus-visible {
+.link:hover,
+.link:focus-visible {
   background-size: 100% 2px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .link.underline {
-    transition: background-size var(--transitions-linkHover);
+.link.plain {
+  background: none !important;
+  transition: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .link {
+    transition: none !important;
   }
 }

components/Link/Link.tsx

@@ -1,33 +1,20 @@
 import NextLink from "next/link";
 import clsx from "clsx";
 import objStr from "obj-str";
+import config from "../../lib/config";
 import type { ComponentPropsWithoutRef } from "react";
 
 import styles from "./Link.module.css";
 
 export type LinkProps = ComponentPropsWithoutRef<typeof NextLink> & {
-  underline?: boolean;
+  plain?: boolean; // disable fancy text-decoration effect
   openInNewTab?: boolean;
 };
 
-const Link = ({
-  href,
-  rel,
-  target,
-  prefetch = false,
-  underline = true,
-  openInNewTab,
-  className,
-  ...rest
-}: LinkProps) => {
+const Link = ({ href, rel, target, prefetch = false, plain, openInNewTab, className, ...rest }: LinkProps) => {
   // This component auto-detects whether or not this link should open in the same window (the default for internal
   // links) or a new tab (the default for external links). Defaults can be overridden with `openInNewTab={true}`.
-  const isExternal =
-    typeof href === "string" &&
-    !(
-      ["/", "#"].includes(href[0]) ||
-      (process.env.NEXT_PUBLIC_BASE_URL && href.startsWith(process.env.NEXT_PUBLIC_BASE_URL))
-    );
+  const isExternal = typeof href === "string" && !(["/", "#"].includes(href[0]) || href.startsWith(config.baseUrl));
 
   if (openInNewTab || isExternal) {
     return (
@@ -40,7 +27,7 @@ const Link = ({
           noreferrer: isExternal, // don't add "noreferrer" if link isn't external, and only opening in a new tab
         })}
         prefetch={false}
-        className={clsx(styles.link, underline && styles.underline, className)}
+        className={clsx(styles.link, plain && styles.plain, className)}
         {...rest}
       />
     );
@@ -49,7 +36,7 @@ const Link = ({
   // If link is to an internal page, simply pass *everything* along as-is to next/link.
   return (
     <NextLink
-      className={clsx(styles.link, underline && styles.underline, className)}
+      className={clsx(styles.link, plain && styles.plain, className)}
       {...{ href, rel, target, prefetch, ...rest }}
     />
   );