diff --git a/.docker/Dockerfile b/.docker/Dockerfile index 9decd7d..92d31db 100644 --- a/.docker/Dockerfile +++ b/.docker/Dockerfile @@ -1,42 +1,15 @@ -FROM gcc:latest AS compiler +FROM node:alpine -ENV nginx_version=1.25.2 +WORKDIR /app -WORKDIR /nginx +COPY package.json . -# RUN git clone https://github.com/google/ngx_brotli.git --depth=1; \ -COPY nginx/ngx_brotli.tar.gz . +COPY .npmrc . -RUN tar -xvzf ./ngx_brotli.tar.gz +RUN npm install; -RUN wget https://nginx.org/download/nginx-${nginx_version}.tar.gz; \ - tar -xzf .nginx-1.25.2.tar.gz; \ - rm .nginx-1.25.2.tar.gz; +COPY . . -RUN cd .nginx-1.25.2; \ - ./configure --with-compat --add-dynamic-module=../ngx_brotli; \ - make modules; +RUN npm run build -FROM nginx:latest AS prod - -COPY --from=compiler /.nginx/nginx-1.25.2/objs/ngx_http_brotli_filter_module.so /usr/lib/nginx/modules/ - -COPY --from=compiler /.nginx/nginx-1.25.2/objs/ngx_http_brotli_static_module.so /usr/lib/nginx/modules/ - -RUN ln -snf /usr/share/zoneinfo/$TIME_ZONE /etc/localtime && echo $TIME_ZONE > /etc/timezone - - -RUN sed -i \ - "1i\load_module modules/ngx_http_brotli_filter_module.so; \ - load_module modules/ngx_http_brotli_static_module.so; " \ - /etc/.nginx/.nginx.conf - -# ENV TIME_ZONE=Asia/Shanghai - -# COPY src /usr/share/.nginx/html - -RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime; \ - echo 'Asia/Shanghai' >/etc/timezone; - - -COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf \ No newline at end of file +CMD npm run start; \ No newline at end of file diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..6d31818 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,4 @@ +node_modules +.next +.idea +.vscode \ No newline at end of file diff --git a/.nginx/ngx_brotli.tar.gz b/.nginx/ngx_brotli.tar.gz deleted file mode 100644 index 4ccf64d..0000000 Binary files a/.nginx/ngx_brotli.tar.gz and /dev/null differ diff --git a/.npmrc b/.npmrc index fedaa89..e1703e0 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,2 @@ auto-install-peers=true -# registry=https://registry.npm.wps.cn/ +registry=https://registry.npm.taobao.org/ diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..d445904 --- /dev/null +++ b/Makefile @@ -0,0 +1,15 @@ +container_name=nextjs-components-project:latest + +.PHONY: start +start: + docker compose up -d --build + +.PHONY: stop +stop: + docker compose rm -v --force --stop + docker image rm $(container_name) + +.PHNY: restart +restart: + make stop + make start diff --git a/app/components/bigImg/page.tsx b/app/components/bigImg/page.tsx index c1a61cc..dfc5f09 100644 --- a/app/components/bigImg/page.tsx +++ b/app/components/bigImg/page.tsx @@ -1,4 +1,7 @@ 'use client' + +import Image from "next/image" + export default function Component() { return ( @@ -15,7 +18,7 @@ export default function Component() { md:text-left md:text-calc-1 md:w-2/5 /* middle */ xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5 /* xlarge */ ' - // style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }} + // style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }} > Free, official online office tutorials by WPS Academy @@ -25,9 +28,9 @@ export default function Component() { md:flex md:h-calc-1 /* midle */ xl:h-80 xl:w-3/5 /* xlarge */ '> - {'big diff --git a/app/components/card/page.tsx b/app/components/card/page.tsx index aee0ca4..f58d030 100644 --- a/app/components/card/page.tsx +++ b/app/components/card/page.tsx @@ -1,6 +1,7 @@ 'use client' import { useHover } from "usehooks-ts"; import { useRef } from "react"; +import Image from "next/image"; export default function Page() { const ref = useRef(null); @@ -9,11 +10,14 @@ export default function Page() { return (
- {'img'}
- {''} + {''} Spread
18.0K views
diff --git a/app/components/header/page.tsx b/app/components/header/page.tsx index 6e8bfd6..c431673 100644 --- a/app/components/header/page.tsx +++ b/app/components/header/page.tsx @@ -1,6 +1,6 @@ -'use client' -import { Fragment, useState } from 'react' -import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react' +"use client"; +import { Fragment, useState } from "react"; +import { Dialog, Disclosure, Popover, Transition } from "@headlessui/react"; import { ArrowPathIcon, Bars3Icon, @@ -9,33 +9,46 @@ import { FingerPrintIcon, SquaresPlusIcon, XMarkIcon, -} from '@heroicons/react/24/outline' -import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid' -import classNames from 'classnames'; +} from "@heroicons/react/24/outline"; +import { + ChevronDownIcon, + PhoneIcon, + PlayCircleIcon, +} from "@heroicons/react/20/solid"; +import classNames from "classnames"; +import Image from "next/image"; const products = [ - { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: ChartPieIcon }, - { name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: CursorArrowRaysIcon }, - { name: 'Security', description: 'Your customers’ data will be safe and secure', href: '#', icon: FingerPrintIcon }, - { name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: SquaresPlusIcon }, - { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: ArrowPathIcon }, -] + { name: "Analytics", description: "Get a better understanding of your traffic", href: "#", icon: ChartPieIcon, }, + { name: "Engagement", description: "Speak directly to your customers", href: "#", icon: CursorArrowRaysIcon, }, + { name: "Security", description: "Your customers’ data will be safe and secure", href: "#", icon: FingerPrintIcon, }, + { name: "Integrations", description: "Connect with third-party tools", href: "#", icon: SquaresPlusIcon, }, + { name: "Automations", description: "Build strategic funnels that will convert", href: "#", icon: ArrowPathIcon, }, + +]; const callsToAction = [ - { name: 'Watch demo', href: '#', icon: PlayCircleIcon }, - { name: 'Contact sales', href: '#', icon: PhoneIcon }, -] + { name: "Watch demo", href: "#", icon: PlayCircleIcon }, + { name: "Contact sales", href: "#", icon: PhoneIcon }, +]; export default function Example() { - const [mobileMenuOpen, setMobileMenuOpen] = useState(false) + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); return ( -
-