move assets to static folder for static file serving

Author: andrew-s28

docker-compose.yml

@@ -8,6 +8,7 @@ services:
     volumes:
       - ./mdx:/usr/src/app/mdx
       - ./public:/usr/src/app/public
+      - ./static:/usr/src/app/static
   nginx:
     depends_on:
       - server

nginx/nginx.conf

@@ -53,8 +53,8 @@ server {
         proxy_redirect off;
     }
 
-    location /public/ {
-        alias /usr/src/app/public/;
+    location /static/ {
+        alias /usr/src/app/static/;
     }
 
 }
@@ -97,8 +97,8 @@ server {
         proxy_redirect off;
     }
 
-    location /public/ {
-        alias /usr/src/app/public/;
+    location /static/ {
+        alias /usr/src/app/static//;
     }
 
 }

src/components/mdx.tsx

@@ -181,16 +181,19 @@ function Image({ src, alt }: { src: string; alt: string }) {
   return (
     <div className="relative w-full h-full flex justify-center items-center">
       <img
-        src={src}
+        src={`/static${src}`}
         alt={alt}
         className="rounded-lg shadow-md my-5 mx-auto min-w-[200px] w-2/3 h-auto"
+        onError={() => {
+          setLoading(false);
+        }}
         onLoad={() => {
           setLoading(false);
         }}
         style={{
           display: "block",
-          opacity: loading ? 0 : 1,
-          transition: "opacity 0.3s ease-in-out",
+          opacity: loading ? 0.25 : 0.75,
+          transition: "opacity 1s ease-in-out",
         }}
       />
       <div

src/components/ui/Logos.tsx

@@ -381,7 +381,11 @@ export function PostgresLogo({ className }: { className: string }) {
 
 export function TanstackLogo({ className }: { className: string }) {
   return (
-    <img src="/tanstack-logo.png" alt="Tanstack Logo" className={className} />
+    <img
+      src="static/tanstack-logo.png"
+      alt="Tanstack Logo"
+      className={className}
+    />
   );
 }
 

src/routes/about.tsx

@@ -43,7 +43,7 @@ function AboutComponent() {
         frontmatter={frontmatter}
         leadImage={
           <img
-            src="/self_portrait.jpg"
+            src="static/self_portrait.jpg"
             alt="A picture of the author on a rainy day surrounded by cherry blossom trees"
             className="rounded-lg shadow-md my-5 mx-auto min-w-[200px] w-1/2"
           />

src/utils/mdx-fetcher.tsx

@@ -34,8 +34,8 @@ const bundler = (file: string, directory: string): Promise<IMDX> => {
   return bundleMDX({
     file: path.join(BASE_DIRECTORY, directory, file),
     cwd: BASE_DIRECTORY,
-    bundleDirectory: path.join(BASE_DIRECTORY, "public/" + fileName),
-    bundlePath: "/" + fileName + "/",
+    bundleDirectory: path.join(BASE_DIRECTORY, directory),
+    bundlePath: directory,
     mdxOptions(options: Options) {
       options.rehypePlugins = [
         ...(options.rehypePlugins ?? []),
@@ -115,7 +115,6 @@ function getCategories(frontmatters: IFrontMatter[]) {
 
 export const fetchMDXCode = createServerFn({ method: "GET" })
   .validator((data: { directory: string; slug: string }) => {
-    console.log(data);
     return {
       directory: data.directory.toLowerCase(),
       slug: data.slug.toLowerCase(),