Speed up Docker image builds using multi-stage parallel pipelines (#987)

## Objective Improve build speed and size of khoj docker images ## Changes ### Improve docker image build speeds - Decouple web app and server build steps - Build the web app and server in parallel - Cache docker layers for reuse across dockerize github workflow runs - Split Docker build layers for improved cacheability (e.g separate `yarn install` and `yarn build` steps) ### Reduce size of khoj docker images - Use an up-to-date `.dockerignore` to exclude unnecessary directories - Do not installing cuda python packages for cpu builds ### Improve web app builds - Use consistent mechanism to get fonts for web app - Make tailwind extensions production instead of dev dependencies - Make next.js create production builds for the web app (via `NODE_ENV=production` env var)
2026-03-03 13:19:16 +00:00 · 2024-11-24 21:49:46 -08:00
parent 9368699b2c 4a5646c8da
commit 5723a3778e
13 changed files with 112 additions and 82 deletions
--- a/src/interface/web/app/agents/layout.tsx
+++ b/src/interface/web/app/agents/layout.tsx
@@ -1,9 +1,7 @@
 import type { Metadata } from "next";
-import { Noto_Sans } from "next/font/google";
+import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../globals.css";

-const inter = Noto_Sans({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
    title: "Khoj AI - Agents",
    description: "Find a specialized agent that can help you address more specific needs.",
@@ -33,7 +31,7 @@ export default function RootLayout({
    children: React.ReactNode;
 }>) {
    return (
-        <html lang="en">
+        <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
            <meta
                httpEquiv="Content-Security-Policy"
                content="default-src 'self' https://assets.khoj.dev;
@@ -46,7 +44,7 @@ export default function RootLayout({
                       child-src 'none';
                       object-src 'none';"
            ></meta>
-            <body className={inter.className}>{children}</body>
+            <body>{children}</body>
        </html>
    );
 }
--- a/src/interface/web/app/chat/layout.tsx
+++ b/src/interface/web/app/chat/layout.tsx
@@ -1,9 +1,7 @@
 import type { Metadata } from "next";
-import { Noto_Sans } from "next/font/google";
+import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../globals.css";

-const inter = Noto_Sans({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
    title: "Khoj AI - Chat",
    description:
@@ -34,7 +32,7 @@ export default function RootLayout({
    children: React.ReactNode;
 }>) {
    return (
-        <html lang="en">
+        <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
            <meta
                httpEquiv="Content-Security-Policy"
                content="default-src 'self' https://assets.khoj.dev;
@@ -47,7 +45,7 @@ export default function RootLayout({
                       child-src 'none';
                       object-src 'none';"
            ></meta>
-            <body className={inter.className}>
+            <body>
                {children}
                <script
                    dangerouslySetInnerHTML={{
--- a/src/interface/web/app/fonts.ts
+++ b/src/interface/web/app/fonts.ts
@@ -0,0 +1,13 @@
+import { Noto_Sans, Noto_Sans_Arabic } from "next/font/google";
+
+export const noto_sans = Noto_Sans({
+    subsets: ["latin", "latin-ext", "cyrillic", "cyrillic-ext", "devanagari", "vietnamese"],
+    display: "swap",
+    variable: "--font-noto-sans",
+});
+
+export const noto_sans_arabic = Noto_Sans_Arabic({
+    subsets: ["arabic"],
+    display: "swap",
+    variable: "--font-noto-sans-arabic",
+});
--- a/src/interface/web/app/globals.css
+++ b/src/interface/web/app/globals.css
@@ -1,7 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

@layer base {
    :root {
@@ -25,7 +24,7 @@
        --input: 220 13% 91%;
        --ring: 24.6 95% 53.1%;
        --radius: 0.5rem;
-        --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
+        --font-family: var(--font-noto-sans), var(--font-noto-sans-arabic), sans-serif !important;

        /* Khoj Custom Colors */
        --frosted-background-color: 20 13% 95%;
@@ -188,7 +187,7 @@
        --border: 0 0% 9%;
        --input: 0 0% 9%;
        --ring: 20.5 90.2% 48.2%;
-        --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
+        --font-family: var(--font-noto-sans), var(--font-noto-sans-arabic), sans-serif !important;

        /* Imported from highlight.js */
        pre code.hljs {
--- a/src/interface/web/app/layout.tsx
+++ b/src/interface/web/app/layout.tsx
@@ -1,9 +1,7 @@
 import type { Metadata } from "next";
-import { Noto_Sans } from "next/font/google";
+import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "./globals.css";

-const inter = Noto_Sans({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
    title: "Khoj AI - Home",
    description: "Your Second Brain.",
@@ -39,7 +37,7 @@ export default function RootLayout({
    children: React.ReactNode;
 }>) {
    return (
-        <html lang="en">
+        <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
            <meta
                httpEquiv="Content-Security-Policy"
                content="default-src 'self' https://assets.khoj.dev;
@@ -52,7 +50,7 @@ export default function RootLayout({
                       child-src 'none';
                       object-src 'none';"
            ></meta>
-            <body className={inter.className}>{children}</body>
+            <body>{children}</body>
        </html>
    );
 }
--- a/src/interface/web/app/settings/layout.tsx
+++ b/src/interface/web/app/settings/layout.tsx
@@ -1,10 +1,8 @@
 import type { Metadata } from "next";
-import { Noto_Sans } from "next/font/google";
+import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../globals.css";
 import { Toaster } from "@/components/ui/toaster";

-const inter = Noto_Sans({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
    title: "Khoj AI - Settings",
    description: "Configure Khoj to get personalized, deeper assistance.",
@@ -34,7 +32,7 @@ export default function RootLayout({
    children: React.ReactNode;
 }>) {
    return (
-        <html lang="en">
+        <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
            <meta
                httpEquiv="Content-Security-Policy"
                content="default-src 'self' https://assets.khoj.dev;
@@ -46,7 +44,7 @@ export default function RootLayout({
                        child-src 'none';
                        object-src 'none';"
            ></meta>
-            <body className={inter.className}>
+            <body>
                {children}
                <Toaster />
            </body>
--- a/src/interface/web/app/share/chat/layout.tsx
+++ b/src/interface/web/app/share/chat/layout.tsx
@@ -1,9 +1,7 @@
 import type { Metadata } from "next";
-import { Noto_Sans } from "next/font/google";
+import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../../globals.css";

-const inter = Noto_Sans({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
    title: "Khoj AI - Chat",
    description: "Use this page to view a chat with Khoj AI.",
@@ -15,7 +13,7 @@ export default function RootLayout({
    children: React.ReactNode;
 }>) {
    return (
-        <html lang="en">
+        <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
            <meta
                httpEquiv="Content-Security-Policy"
                content="default-src 'self' https://assets.khoj.dev;
@@ -27,7 +25,7 @@ export default function RootLayout({
                       child-src 'none';
                       object-src 'none';"
            ></meta>
-            <body className={inter.className}>
+            <body>
                {children}
                <script
                    dangerouslySetInnerHTML={{
--- a/src/interface/web/package.json
+++ b/src/interface/web/package.json
@@ -62,6 +62,9 @@
        "react-hook-form": "^7.52.1",
        "shadcn-ui": "^0.8.0",
        "swr": "^2.2.5",
+        "tailwind-merge": "^2.3.0",
+        "tailwindcss": "^3.4.6",
+        "tailwindcss-animate": "^1.0.7",
        "typescript": "^5",
        "vaul": "^0.9.1",
        "zod": "^3.23.8"
@@ -82,9 +85,6 @@
        "lint-staged": "^15.2.7",
        "nodemon": "^3.1.3",
        "prettier": "3.3.3",
-        "tailwind-merge": "^2.3.0",
-        "tailwindcss": "^3.4.6",
-        "tailwindcss-animate": "^1.0.7",
        "typescript": "^5"
    },
    "prettier": {
--- a/src/interface/web/tailwind.config.ts
+++ b/src/interface/web/tailwind.config.ts
@@ -55,6 +55,9 @@ const config = {
            },
        },
        extend: {
+            fontFamily: {
+                sans: ["var(--font-noto-sans)", "var(--font-noto-sans-arabic)"],
+            },
            colors: {
                border: "hsl(var(--border))",
                input: "hsl(var(--input))",