Improves image handling, adds favicon, adds umami analytics

Signed-off-by: Sebastian Kawelke <[email protected]>
l3montree-dev · Jul 12, 2024 · d0139d1 · d0139d1
1 parent 76e6a40
commit d0139d1
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 94 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -4,16 +4,13 @@ WORKDIR /usr/app/
 ENV PORT 3000
 EXPOSE 3000
 
-ARG NEXT_PUBLIC_ENVIRONMENT
-ENV NEXT_PUBLIC_ENVIRONMENT=$NEXT_PUBLIC_ENVIRONMENT
-
 COPY package.json .
 COPY package-lock.json .
 RUN npm ci
 
 COPY . .
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 RUN npm run build
 
 # checkov:skip=CKV_DOCKER_3
@@ -24,7 +21,7 @@ USER 53111
 # checkov:skip=CKV_DOCKER_2
 WORKDIR /usr/app/
 ENV PORT 3000
-ENV NODE_ENV production
+ENV NODE_ENV=production
 
 # Copy libs for prisma
 COPY --from=builder --chown=53111:53111 /usr/app/.next /usr/app/.next

diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,38 @@
+const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'unsafe-eval' 'unsafe-inline' https://umami.l3montree.com;
+    style-src 'self' 'unsafe-inline';
+    img-src 'self' blob: data:;
+    font-src 'self';
+    connect-src 'self' https://umami.l3montree.com;
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-src 'none';
+    frame-ancestors 'none';
+    block-all-mixed-content;
+`
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    reactStrictMode: true,
+    swcMinify: true,
+    images: {
+        minimumCacheTTL: 60 * 60 * 24 * 30,
+    },
+    async headers() {
+        return [
+          {
+            source: '/(.*)',
+            headers: [
+              {
+                key: 'Content-Security-Policy',
+                value: cspHeader.replace(/\n/g, ''),
+              },
+            ],
+          },
+        ]
+      },
+}
 
 module.exports = nextConfig
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,22 +12,22 @@
   "dependencies": {
     "@headlessui/react": "^2.1.2",
     "@headlessui/tailwindcss": "^0.2.1",
-    "@heroicons/react": "^2.1.4",
+    "@heroicons/react": "^2.1.5",
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
-    "next": "^14.2.4",
+    "next": "^14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3"
   },
   "devDependencies": {
     "eslint": "8.57.0",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "3.3.2",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -27,20 +27,32 @@ export const metadata: Metadata = {
     'Der Cybersecurity Hackathon 2024 in Bonn ist ein Event für alle, die sich für Open-Source-Software-Sicherheit interessieren. Sei dabei und entwickle innovative Lösungen!',
 }
 
+const env = process.env.NODE_ENV
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
     <html
-      lang="en"
+      lang="de"
       className={clsx(
         'h-full bg-zinc-950 antialiased',
         inter.variable,
         dmSans.variable,
       )}
     >
+      <head>
+        {env === 'production' && (
+          <script
+            async
+            src="https://umami.l3montree.com/script.js"
+            data-website-id="e3572955-12ea-44c9-9581-634e16bf8b74"
+          ></script>
+        )}
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+      </head>
       <body className="flex min-h-full">
         <div className="flex w-full flex-col">{children}</div>
       </body>