chore(env): rename env and adjust loading style

Author: json-q

.env.example

@@ -1,5 +1,5 @@
 NEXT_PUBLIC_SITE_HOST=https://example.com
-NEXT_PUBLIC_SITE_DOMAIN=example.com
+NEXT_PUBLIC_IMAGE_DOMAIN=example.com
 
 # http 无法访问 https，也可使用 next dev --experimental-https 生成证书
 NODE_TLS_REJECT_UNAUTHORIZED=0

app/post/[slug]/loading.tsx

@@ -1,6 +1,6 @@
 export default function Loading() {
   return (
-    <div className="mt-16 flex flex-col items-center justify-center space-y-2">
+    <div className="my-16 flex flex-col items-center justify-center space-y-2">
       <div className="inline-block size-12 animate-spin rounded-full border-[3px] border-t-slate-400"></div>
       <span>Loading...</span>
     </div>

next.config.ts

@@ -1,4 +1,16 @@
 import type { NextConfig } from 'next';
+import type { RemotePattern } from 'next/dist/shared/lib/image-config';
+
+const imageRemotes: RemotePattern[] = [
+  'testingcf.jsdelivr.net',
+  'cdn.jsdelivr.net',
+  process.env.NEXT_PUBLIC_IMAGE_DOMAIN || '',
+].map((hostname) => ({
+  protocol: 'https',
+  hostname,
+  port: '',
+  pathname: '/**',
+}));
 
 const nextConfig: NextConfig = {
   output: 'standalone',
@@ -7,26 +19,7 @@ const nextConfig: NextConfig = {
   // https://github.com/hashicorp/next-mdx-remote?tab=readme-ov-file#installation
   transpilePackages: ['next-mdx-remote'],
   images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'testingcf.jsdelivr.net',
-        port: '',
-        pathname: '/**',
-      },
-      {
-        protocol: 'https',
-        hostname: 'cdn.jsdelivr.net',
-        port: '',
-        pathname: '/**',
-      },
-      {
-        protocol: 'https',
-        hostname: process.env.NEXT_PUBLIC_SITE_DOMAIN || '',
-        port: '',
-        pathname: '/**',
-      },
-    ],
+    remotePatterns: imageRemotes,
   },
   async headers() {
     return [