move the assets to remote location and change blog cover to Next/Image

Dockerfile

@@ -4,7 +4,7 @@ FROM base as builder
 USER 1000:1000
 ADD --chown=1000:1000 . /home/node/nextts
 WORKDIR /home/node/nextts
-RUN wget -qO- https://get.pnpm.io/install.sh | ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
+RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
 ENV PATH=/home/node/.local/share/pnpm:$PATH
 RUN pnpm install && pnpm run build
 
@@ -29,7 +29,7 @@ ENV NODE_ENV production
 ENV HOME /home/node
 ENV HOSTNAME "0.0.0.0"
 
-RUN wget -qO- https://get.pnpm.io/install.sh | ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
+RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
 ENV PATH=/home/node/.local/share/pnpm:$PATH
 RUN pnpm install
 

app/page.tsx

@@ -5,8 +5,16 @@ import { raleway, syne, questrial } from "@/app/fonts";
 export default function Home() {
   return (
       <div className={`flex flex-col`}>
-      <div className={`bg-cover bg-center flex flex-col-reverse bg-blog-cover`}>
+        <div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
-        <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10`}>
+          <Image
+              src={`https://assets.suyono.me/placeholder.webp`}
+              alt={`blog cover`}
+              className={`object-cover col-start-1 row-start-1 w-screen h-192 z-0`}
+              width={1581}
+              height={759}
+          />
+          <div className={`flex flex-col-reverse col-start-1 row-start-1 w-screen`}>
+            <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10 z-10`}>
               <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
                 SUYONO
               </p>
@@ -14,8 +22,7 @@ export default function Home() {
                 A Tech Archive
               </p>
             </div>
-        <div className={`h-64`}></div> {/* spacer */}
+          </div>
-        <div className={`h-64`}></div> {/* spacer */}
         </div>
         <div className={`flex flex-row justify-center my-8`}>
           <div className={`border border-slate-100 flex flex-col`}>
@@ -24,7 +31,7 @@ export default function Home() {
                 className={`flex flex-row max-w-4xl items-center`}
             >
               <Image
-              src="/assets/pthumb.webp"
+                  src="https://assets.suyono.me/pthumb.webp"
                   alt="post thumbnail"
                   width={454}
                   height={341}

next.config.js

@@ -4,6 +4,15 @@ const nextConfig = {
     webpack: (config) => {
         config.externals = [...config.externals, "jsdom"];
         return config;
+    },
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "assets.suyono.me",
+                pathname: "/**"
+            },
+        ]
     }
 }
 

tailwind.config.ts

@@ -12,10 +12,12 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'blog-cover': "url('/assets/placeholder.webp')"
       },
       width: {
         '224': '56rem',
+      },
+      height: {
+        '192': '48rem',
       }
     },
   },