Merge pull request #10 from vim/frontend-theme

Frontend theme

Author: manuel-pross

.development.docker-compose.yml

@@ -1,14 +1,14 @@
 version: "3"
 services:
-  app:
+  web:
     container_name: app
     environment:
       - CMS_API=http://cms:1337/api
     build:
-      context: ./app
-      dockerfile: Dockerfile
+      context: ./web
+      dockerfile: Dockerfile.dev
     volumes:
-      - ./app/src/app:/opt/app/src/app
+      - ./web/src:/app/src
     ports:
       - 3000:3000
     networks:

cms/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:18.18-alpine3.17
 # Installing libvips-dev for sharp Compatibility
 RUN apk update && apk add --no-cache build-base gcc autoconf automake zlib-dev libpng-dev nasm bash vips-dev git
 ARG NODE_ENV=development

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "website_next_generation",
+  "version": "1.0.0",
+  "description": "Next generation of Vim Landing Page",
+  "scripts": {
+    "dev": "docker compose -f .development.docker-compose.yml up -d --build",
+    "setup": "node ./cms/init-env.js"
+  },
+  "author": "",
+  "license": "ISC"
+}

web/.eslintrc.json

@@ -1,3 +1,36 @@
 {
-  "extends": "next/core-web-vitals"
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "**/tsconfig.json",
+        "tsconfigRootDir": "__dirname",
+        "sourceType": "module"
+    },
+    "plugins": ["@typescript-eslint", "eslint-plugin-import-helpers"],
+    "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+    "rules": {
+        "@typescript-eslint/no-unused-vars": "error",
+        "@typescript-eslint/no-explicit-any": "error",
+        "react/no-unescaped-entities": "off",
+        "no-console": "warn",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "import-helpers/order-imports": [
+            "error",
+            {
+                "newlinesBetween": "never",
+                "groups": [
+                    "/^react$/",
+                    "/next/",
+                    "module",
+                    "/@components/",
+                    "/@helpers/",
+                    "/@hooks/",
+                    "/types/",
+                    "/module.scss/",
+                    "/public/",
+                    ["parent", "sibling", "index"]
+                ],
+                "alphabetize": { "order": "desc", "ignoreCase": true }
+            }
+        ]
+    }
 }

web/.prettierrc

@@ -1,6 +1,8 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 4,
+  "printWidth": 120,
+  "useTabs": false
 }

web/Dockerfile

@@ -0,0 +1,28 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then npm ci; \
+    elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
+    # Allow install without lockfile, so example works even without Node.js installed locally
+    else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \
+    fi
+
+COPY src ./src
+COPY public ./public
+COPY next.config.js .
+COPY tsconfig.json .
+COPY postcss.config.js .
+COPY tailwind.config.ts .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD \
+    if [ -f yarn.lock ]; then yarn dev; \
+    elif [ -f package-lock.json ]; then npm run dev; \
+    elif [ -f pnpm-lock.yaml ]; then pnpm dev; \
+    else yarn dev; \
+    fi

web/Dockerfile.dev

@@ -0,0 +1,66 @@
+FROM node:18-alpine AS base
+
+# Step 1. Rebuild the source code only when needed
+FROM base AS builder
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+# Omit --production flag for TypeScript devDependencies
+RUN \
+    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then npm ci; \
+    elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
+    # Allow install without lockfile, so example works even without Node.js installed locally
+    else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \
+    fi
+
+COPY src ./src
+COPY public ./public
+COPY next.config.js .
+COPY tsconfig.json .
+
+# Environment variables must be present at build time
+# https://github.com/vercel/next.js/discussions/14030
+ARG ENV_VARIABLE
+ENV ENV_VARIABLE=${ENV_VARIABLE}
+ARG NEXT_PUBLIC_ENV_VARIABLE
+ENV NEXT_PUBLIC_ENV_VARIABLE=${NEXT_PUBLIC_ENV_VARIABLE}
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Build Next.js based on the preferred package manager
+RUN \
+    if [ -f yarn.lock ]; then yarn build; \
+    elif [ -f package-lock.json ]; then npm run build; \
+    elif [ -f pnpm-lock.yaml ]; then pnpm build; \
+    else yarn build; \
+    fi
+
+
+# Step 2. Production image, copy all the files and run next
+FROM base AS runner
+
+WORKDIR /app
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+COPY --from=builder /app/public ./public
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Environment variables must be redefined at run time
+ARG ENV_VARIABLE
+ENV ENV_VARIABLE=${ENV_VARIABLE}
+ARG NEXT_PUBLIC_ENV_VARIABLE
+ENV NEXT_PUBLIC_ENV_VARIABLE=${NEXT_PUBLIC_ENV_VARIABLE}
+
+# Uncomment the following line to disable telemetry at run time
+ENV NEXT_TELEMETRY_DISABLED 1
+
+
+CMD ["node", "server.js"]

web/Dockerfile.prod

@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    webpackDevMiddleware: (config) => {
+        config.watchOptions = {
+            poll: 1000,
+            aggregateTimeout: 300,
+        };
+        return config;
+    },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;