neuro_llc/NwBlog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: added docker

Browse Source
This commit is contained in:
Sergey Elpashev
2025-01-22 12:36:05 +03:00
parent ac4f0b0be8
commit eb21d5f73d
9 changed files with 111 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.dockerignore Normal file
View File

@@ -0,0 +1,6 @@
Dockerfile
.dockerignore
node_modules
README.md
.next
.git

10
.prettierrc Normal file
View File

@@ -0,0 +1,10 @@
{
"tabWidth": 2,
"printWidth": 120,
"arrowParens": "always",
"singleQuote": false,
"trailingComma": "all",
"useTabs": false,
"semi": true,
"bracketSpacing": true
}

50
Dockerfile Normal file
View File

@@ -0,0 +1,50 @@
FROM oven/bun:1-alpine AS base
FROM base AS deps
RUN apk update && apk upgrade && apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json bun.lockb ./
RUN \
if [ -f bun.lockb ]; then bun i --frozen-lockfile; \
else echo "Lockfile not found." && exit 1; \
fi
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_TELEMETRY_DISABLED=1
RUN \
if [ -f bun.lockb ]; then bun run build; \
else echo "Lockfile not found." && exit 1; \
fi
FROM base AS runner
WORKDIR /app
RUN apk update && apk upgrade && apk add --no-cache dumb-init
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 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
USER nextjs
EXPOSE 3000
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"
CMD ["dumb-init", "bun", "run", "server.js"]

5
next.config.ts
View File

@@ -1,7 +1,10 @@
import type { NextConfig } from "next"; import type { NextConfig } from "next";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
/* config options here */ output: "standalone",
experimental: {
optimizePackageImports: ["@chakra-ui/react"],
},
}; };
export default nextConfig; export default nextConfig;

4
src/app/blog/[slug]/page.tsx
View File

@@ -1,5 +1,5 @@
export default async function Post({ params }: { params: { slug: string } }) { export default async function Post({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = params; const { slug } = await params;
return ( return (
<div> <div>
<h1>Post: {slug}</h1> <h1>Post: {slug}</h1>

18
src/app/globals.css
View File

@@ -1,21 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

9
src/app/layout.tsx
View File

@@ -1,3 +1,4 @@
import { Provider } from "@/components/ui/provider";
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
@@ -23,11 +24,9 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="ru" suppressHydrationWarning>
<body <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
className={`${geistSans.variable} ${geistMono.variable} antialiased`} <Provider>{children}</Provider>
>
{children}
</body> </body>
</html> </html>
); );

102
src/app/page.tsx
View File

@@ -1,101 +1,11 @@
import Image from "next/image"; import { Button } from "@/components/ui/button";
import { VStack } from "@chakra-ui/react";
export default function Home() { export default function Home() {
return ( return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <VStack>
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"> <Button>Test 1</Button>
<Image <Button>Test 2</Button>
className="dark:invert" </VStack>
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
src/app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
); );
} }

58
src/components/ui/color-mode.tsx
View File

@@ -1,57 +1,57 @@
"use client" "use client";
import type { IconButtonProps } from "@chakra-ui/react" import type { IconButtonProps } from "@chakra-ui/react";
import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react" import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react";
import { ThemeProvider, useTheme } from "next-themes" import type { ThemeProviderProps } from "next-themes";
import type { ThemeProviderProps } from "next-themes" import { ThemeProvider, useTheme } from "next-themes";
import * as React from "react" import * as React from "react";
import { LuMoon, LuSun } from "react-icons/lu" import { LuMoon, LuSun } from "react-icons/lu";
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface ColorModeProviderProps extends ThemeProviderProps {} export interface ColorModeProviderProps extends ThemeProviderProps {}
export function ColorModeProvider(props: ColorModeProviderProps) { export function ColorModeProvider(props: ColorModeProviderProps) {
return ( return <ThemeProvider attribute="class" disableTransitionOnChange {...props} />;
<ThemeProvider attribute="class" disableTransitionOnChange {...props} />
)
} }
export type ColorMode = "light" | "dark" export type ColorMode = "light" | "dark";
export interface UseColorModeReturn { export interface UseColorModeReturn {
colorMode: ColorMode colorMode: ColorMode;
setColorMode: (colorMode: ColorMode) => void setColorMode: (colorMode: ColorMode) => void;
toggleColorMode: () => void toggleColorMode: () => void;
} }
export function useColorMode(): UseColorModeReturn { export function useColorMode(): UseColorModeReturn {
const { resolvedTheme, setTheme } = useTheme() const { resolvedTheme, setTheme } = useTheme();
const toggleColorMode = () => { const toggleColorMode = () => {
setTheme(resolvedTheme === "light" ? "dark" : "light") setTheme(resolvedTheme === "light" ? "dark" : "light");
} };
return { return {
colorMode: resolvedTheme as ColorMode, colorMode: resolvedTheme as ColorMode,
setColorMode: setTheme, setColorMode: setTheme,
toggleColorMode, toggleColorMode,
} };
} }
export function useColorModeValue<T>(light: T, dark: T) { export function useColorModeValue<T>(light: T, dark: T) {
const { colorMode } = useColorMode() const { colorMode } = useColorMode();
return colorMode === "dark" ? dark : light return colorMode === "dark" ? dark : light;
} }
export function ColorModeIcon() { export function ColorModeIcon() {
const { colorMode } = useColorMode() const { colorMode } = useColorMode();
return colorMode === "dark" ? <LuMoon /> : <LuSun /> return colorMode === "dark" ? <LuMoon /> : <LuSun />;
} }
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {} interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
export const ColorModeButton = React.forwardRef< export const ColorModeButton = React.forwardRef<HTMLButtonElement, ColorModeButtonProps>(function ColorModeButton(
HTMLButtonElement, props,
ColorModeButtonProps ref,
>(function ColorModeButton(props, ref) { ) {
const { toggleColorMode } = useColorMode() const { toggleColorMode } = useColorMode();
return ( return (
<ClientOnly fallback={<Skeleton boxSize="8" />}> <ClientOnly fallback={<Skeleton boxSize="8" />}>
<IconButton <IconButton
@@ -71,5 +71,5 @@ export const ColorModeButton = React.forwardRef<
<ColorModeIcon /> <ColorModeIcon />
</IconButton> </IconButton>
</ClientOnly> </ClientOnly>
) );
}) });