move the assets to remote location and change blog cover to Next/Image
This commit is contained in:
parent
bea1c3aba3
commit
9ad8e1aa9b
|
|
@ -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
|
||||
|
||||
|
|
|
|||
119
app/page.tsx
119
app/page.tsx
|
|
@ -4,66 +4,73 @@ 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={`bg-neutral-100 bg-opacity-30 flex flex-col py-10`}>
|
||||
<p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
|
||||
SUYONO
|
||||
</p>
|
||||
<p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
|
||||
A Tech Archive
|
||||
</p>
|
||||
</div>
|
||||
<div className={`h-64`}></div> {/* spacer */}
|
||||
<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`}>
|
||||
<Link
|
||||
href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
|
||||
className={`flex flex-row max-w-4xl items-center`}
|
||||
>
|
||||
<Image
|
||||
src="/assets/pthumb.webp"
|
||||
alt="post thumbnail"
|
||||
width={454}
|
||||
height={341}
|
||||
/>
|
||||
<div className={`flex flex-col mx-10`}>
|
||||
<p className={`${syne.className} text-2xl`}>
|
||||
Nginx + SSL Client Certificate Verification: Manage Access to a
|
||||
site
|
||||
<div className={`flex flex-col`}>
|
||||
<div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
|
||||
<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>
|
||||
<p className={`${questrial.className} line-clamp-3 mt-4`}>
|
||||
Access control is a fundamental part of security. Most entities
|
||||
rely on the combination of username and password, sometimes with
|
||||
additional multi-factor authentication to improve security. Some
|
||||
entities also use the SSL client certificate verification to
|
||||
manage access to specific resources. One of the use cases where
|
||||
SSL client certificate verification fits perfectly is managing
|
||||
access to internet-facing development or staging servers. In
|
||||
this post, I'll share how to set up the certificates and
|
||||
configure nginx to verify users based on their certificates.
|
||||
<p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
|
||||
A Tech Archive
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex flex-row justify-center my-8`}>
|
||||
<div className={`border border-slate-100 flex flex-col`}>
|
||||
<Link
|
||||
href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
|
||||
className={`flex flex-row max-w-4xl items-center`}
|
||||
>
|
||||
<Image
|
||||
src="https://assets.suyono.me/pthumb.webp"
|
||||
alt="post thumbnail"
|
||||
width={454}
|
||||
height={341}
|
||||
/>
|
||||
<div className={`flex flex-col mx-10`}>
|
||||
<p className={`${syne.className} text-2xl`}>
|
||||
Nginx + SSL Client Certificate Verification: Manage Access to a
|
||||
site
|
||||
</p>
|
||||
<p className={`${questrial.className} line-clamp-3 mt-4`}>
|
||||
Access control is a fundamental part of security. Most entities
|
||||
rely on the combination of username and password, sometimes with
|
||||
additional multi-factor authentication to improve security. Some
|
||||
entities also use the SSL client certificate verification to
|
||||
manage access to specific resources. One of the use cases where
|
||||
SSL client certificate verification fits perfectly is managing
|
||||
access to internet-facing development or staging servers. In
|
||||
this post, I'll share how to set up the certificates and
|
||||
configure nginx to verify users based on their certificates.
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex flex-row bg-teal-50 justify-center`}>
|
||||
<div className={`max-w-4xl py-28 px-10`}>
|
||||
<p className={`text-3xl ${raleway.className}`}>Hi There</p>
|
||||
<p className={`text-base ${raleway.className} my-4`}>
|
||||
a new take on experience is the best teacher
|
||||
</p>
|
||||
<p className={`${raleway.className} text-sm`}>
|
||||
I started this blog as an archive of my experiences and knowledge.
|
||||
By writing them out, I hope it will help me unlearn and relearn the
|
||||
various knowledge and skills I've accumulated. I hope the
|
||||
articles, source code examples, and server config examples I wrote
|
||||
will help you somehow. Read on and enjoy!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex flex-row bg-teal-50 justify-center`}>
|
||||
<div className={`max-w-4xl py-28 px-10`}>
|
||||
<p className={`text-3xl ${raleway.className}`}>Hi There</p>
|
||||
<p className={`text-base ${raleway.className} my-4`}>
|
||||
a new take on experience is the best teacher
|
||||
</p>
|
||||
<p className={`${raleway.className} text-sm`}>
|
||||
I started this blog as an archive of my experiences and knowledge.
|
||||
By writing them out, I hope it will help me unlearn and relearn the
|
||||
various knowledge and skills I've accumulated. I hope the
|
||||
articles, source code examples, and server config examples I wrote
|
||||
will help you somehow. Read on and enjoy!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,15 @@ const nextConfig = {
|
|||
webpack: (config) => {
|
||||
config.externals = [...config.externals, "jsdom"];
|
||||
return config;
|
||||
},
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "assets.suyono.me",
|
||||
pathname: "/**"
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
|
|
@ -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',
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue