blog: Bump to 0.0.4 version.

README.md

@@ -9,5 +9,5 @@ sdk: docker
 app_port: 3000
 pinned: false
 models:
-  - openai/gpt-oss-20b
+  - nvidia/NVIDIA-Nemotron-3-Nano-30B-A3B-BF16
 ---

index.html

@@ -8,10 +8,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />
-    <meta name="description" content="Personal Blog" />
     <meta name="theme-color" content="#ffffff" />
     <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico" />
-    <title>Hadad Darajat</title>
+    <!--SEO_META_TAGS-->
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "personal-blog",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "author": "Hadad Darajat",
   "type": "module",
@@ -17,27 +17,27 @@
   "dependencies": {
     "chokidar": "^4.0.3",
     "cors": "^2.8.5",
-    "express": "^5.0.1",
+    "express": "^5.1.0",
     "front-matter": "^4.0.2",
     "highlight.js": "^11.11.1",
-    "lucide-react": "^0.469.0",
-    "marked": "^15.0.6",
+    "lucide-react": "^0.487.0",
+    "marked": "^15.0.7",
     "marked-highlight": "^2.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
-    "react-router-dom": "^7.1.1"
+    "react-router-dom": "^7.5.0"
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
-    "@types/express": "^5.0.0",
-    "@types/node": "^22.10.5",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/express": "^5.0.1",
+    "@types/node": "^22.14.0",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
     "@vitejs/plugin-react": "^4.3.4",
     "concurrently": "^9.1.2",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.7"
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5"
   }
 }

public/BingSiteAuth.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<users>
+	<user>867CFEF9C4B44CFD5EEA1A6C65ED3F6B</user>
+</users>

public/google15aba15fe250d693.html

@@ -0,0 +1 @@
+google-site-verification: google15aba15fe250d693.html

src/client/App.tsx

@@ -7,6 +7,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { PageProvider } from "./contexts/PageContext";
 import { AnalysisProvider } from "./contexts/AnalysisContext";
+import { TranslationProvider } from "./contexts/TranslationContext";
 import { Layout } from "./components/layout/Layout";
 import { HomePage } from "./pages/HomePage";
 import { PostPage } from "./pages/PostPage";
@@ -16,14 +17,16 @@ export const App = (): JSX.Element => {
     <ThemeProvider>
       <PageProvider>
         <AnalysisProvider>
-          <BrowserRouter>
-            <Layout>
-              <Routes>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/post/:slug" element={<PostPage />} />
-              </Routes>
-            </Layout>
-          </BrowserRouter>
+          <TranslationProvider>
+            <BrowserRouter>
+              <Layout>
+                <Routes>
+                  <Route path="/" element={<HomePage />} />
+                  <Route path="/post/:slug" element={<PostPage />} />
+                </Routes>
+              </Layout>
+            </BrowserRouter>
+          </TranslationProvider>
         </AnalysisProvider>
       </PageProvider>
     </ThemeProvider>

src/client/components/ai/AnalysisModal.tsx

@@ -243,10 +243,11 @@ export const AnalysisModal = ({ analysisState, onClose }: AnalysisModalProps): J
   const reasoningContentRef = useRef<HTMLDivElement>(null);
   const [isReasoningExpanded, setIsReasoningExpanded] = useState<boolean>(false);
   const [userToggledReasoning, setUserToggledReasoning] = useState<boolean>(false);
-  const [userHasScrolledContent, setUserHasScrolledContent] = useState<boolean>(false);
-  const [userHasScrolledReasoning, setUserHasScrolledReasoning] = useState<boolean>(false);
-  const lastContentScrollTopRef = useRef<number>(0);
-  const lastReasoningScrollTopRef = useRef<number>(0);
+  
+  const shouldAutoScrollContentRef = useRef<boolean>(true);
+  const shouldAutoScrollReasoningRef = useRef<boolean>(true);
+  const previousContentHeightRef = useRef<number>(0);
+  const previousReasoningHeightRef = useRef<number>(0);
   const hasAutoCollapsedRef = useRef<boolean>(false);
 
   useEffect((): void => {
@@ -265,56 +266,54 @@ export const AnalysisModal = ({ analysisState, onClose }: AnalysisModalProps): J
   }, [analysisState.isLoading, analysisState.isReasoningComplete, analysisState.reasoning, userToggledReasoning]);
 
   useEffect((): void => {
-    if (contentRef.current && analysisState.content && !userHasScrolledContent) {
-      const element = contentRef.current;
-      const isNearBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 100;
-      if (isNearBottom || lastContentScrollTopRef.current === 0) {
-        element.scrollTop = element.scrollHeight;
-      }
+    if (!contentRef.current) {
+      return;
+    }
+    
+    const element = contentRef.current;
+    const currentHeight = element.scrollHeight;
+    
+    if (shouldAutoScrollContentRef.current && analysisState.content) {
+      element.scrollTop = currentHeight;
     }
-  }, [analysisState.content, userHasScrolledContent]);
+    
+    previousContentHeightRef.current = currentHeight;
+  }, [analysisState.content]);
 
   useEffect((): void => {
-    if (reasoningContentRef.current && analysisState.reasoning && !userHasScrolledReasoning && isReasoningExpanded) {
-      const element = reasoningContentRef.current;
-      const isNearBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 50;
-      if (isNearBottom || lastReasoningScrollTopRef.current === 0) {
-        element.scrollTop = element.scrollHeight;
-      }
+    if (!reasoningContentRef.current || !isReasoningExpanded) {
+      return;
     }
-  }, [analysisState.reasoning, userHasScrolledReasoning, isReasoningExpanded]);
+    
+    const element = reasoningContentRef.current;
+    const currentHeight = element.scrollHeight;
+    
+    if (shouldAutoScrollReasoningRef.current && analysisState.reasoning) {
+      element.scrollTop = currentHeight;
+    }
+    
+    previousReasoningHeightRef.current = currentHeight;
+  }, [analysisState.reasoning, isReasoningExpanded]);
 
   const handleContentScroll = useCallback((): void => {
     if (!contentRef.current) {
       return;
     }
+    
     const element = contentRef.current;
-    const currentScrollTop = element.scrollTop;
-    if (currentScrollTop < lastContentScrollTopRef.current - 10) {
-      setUserHasScrolledContent(true);
-    }
-    const isAtBottom = element.scrollHeight - currentScrollTop - element.clientHeight < 20;
-    if (isAtBottom && analysisState.isLoading) {
-      setUserHasScrolledContent(false);
-    }
-    lastContentScrollTopRef.current = currentScrollTop;
-  }, [analysisState.isLoading]);
+    const isAtBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 50;
+    shouldAutoScrollContentRef.current = isAtBottom;
+  }, []);
 
   const handleReasoningScroll = useCallback((): void => {
     if (!reasoningContentRef.current) {
       return;
     }
+    
     const element = reasoningContentRef.current;
-    const currentScrollTop = element.scrollTop;
-    if (currentScrollTop < lastReasoningScrollTopRef.current - 10) {
-      setUserHasScrolledReasoning(true);
-    }
-    const isAtBottom = element.scrollHeight - currentScrollTop - element.clientHeight < 20;
-    if (isAtBottom && analysisState.isLoading && !analysisState.isReasoningComplete) {
-      setUserHasScrolledReasoning(false);
-    }
-    lastReasoningScrollTopRef.current = currentScrollTop;
-  }, [analysisState.isLoading, analysisState.isReasoningComplete]);
+    const isAtBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 50;
+    shouldAutoScrollReasoningRef.current = isAtBottom;
+  }, []);
 
   useEffect((): (() => void) => {
     const handleEscape = (event: KeyboardEvent): void => {
@@ -332,13 +331,13 @@ export const AnalysisModal = ({ analysisState, onClose }: AnalysisModalProps): J
 
   useEffect((): void => {
     if (!analysisState.isOpen) {
-      setUserHasScrolledContent(false);
-      setUserHasScrolledReasoning(false);
-      setUserToggledReasoning(false);
       setIsReasoningExpanded(false);
-      lastContentScrollTopRef.current = 0;
-      lastReasoningScrollTopRef.current = 0;
+      setUserToggledReasoning(false);
       hasAutoCollapsedRef.current = false;
+      shouldAutoScrollContentRef.current = true;
+      shouldAutoScrollReasoningRef.current = true;
+      previousContentHeightRef.current = 0;
+      previousReasoningHeightRef.current = 0;
     }
   }, [analysisState.isOpen]);
 

src/client/components/ai/TranslationModal.tsx

@@ -0,0 +1,613 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { X, Globe, AlertCircle, Brain, ChevronDown, ChevronUp } from "lucide-react";
+import { siteConfig } from "@shared/config";
+import { renderMarkdown } from "../../utils/markdownRenderer";
+import type { TranslationState, SupportedLanguage } from "@shared/types";
+import type { CSSProperties } from "react";
+
+interface TranslationModalProps {
+  translationState: TranslationState;
+  onClose: () => void;
+  onSelectLanguage: (language: SupportedLanguage) => void;
+}
+
+const overlayStyle: CSSProperties = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 1000,
+  display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "center",
+  padding: "0 var(--spacing-md)",
+  pointerEvents: "none",
+};
+
+const panelStyle: CSSProperties = {
+  width: "100%",
+  maxWidth: "var(--max-width-container)",
+  height: "70vh",
+  backgroundColor: "var(--color-background)",
+  borderRadius: "var(--border-radius-lg) var(--border-radius-lg) 0 0",
+  boxShadow: "0 -8px 32px rgba(0, 0, 0, 0.2)",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  pointerEvents: "auto",
+  animation: "slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
+  border: "1px solid var(--color-border)",
+  borderBottom: "none",
+};
+
+const headerStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "var(--spacing-md) var(--spacing-lg)",
+  borderBottom: "1px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  flexShrink: 0,
+};
+
+const headerLeftStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-sm)",
+};
+
+const headerIconContainerStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "32px",
+  height: "32px",
+  borderRadius: "var(--border-radius-md)",
+  backgroundColor: "var(--color-accent)",
+  color: "#ffffff",
+};
+
+const headerTitleStyle: CSSProperties = {
+  fontSize: "var(--font-size-base)",
+  fontWeight: 600,
+  color: "var(--color-text-primary)",
+};
+
+const headerSubtitleStyle: CSSProperties = {
+  fontSize: "var(--font-size-xs)",
+  color: "var(--color-text-muted)",
+};
+
+const closeButtonStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "32px",
+  height: "32px",
+  borderRadius: "var(--border-radius-md)",
+  border: "2px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  color: "var(--color-text-muted)",
+  cursor: "pointer",
+  transition: "all var(--transition-fast)",
+};
+
+const contentContainerStyle: CSSProperties = {
+  flex: 1,
+  overflowY: "auto",
+  overflowX: "hidden",
+  scrollbarGutter: "stable",
+};
+
+const contentInnerStyle: CSSProperties = {
+  padding: "var(--spacing-lg)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--spacing-lg)",
+};
+
+const languageSelectorContainerStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--spacing-md)",
+};
+
+const languageButtonsContainerStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  gap: "var(--spacing-sm)",
+};
+
+const languageButtonStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-xs)",
+  padding: "var(--spacing-md) var(--spacing-lg)",
+  borderRadius: "var(--border-radius-md)",
+  border: "2px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  color: "var(--color-text-primary)",
+  cursor: "pointer",
+  transition: "all var(--transition-fast)",
+  fontSize: "var(--font-size-base)",
+  fontWeight: 500,
+};
+
+const languageButtonHoverStyle: CSSProperties = {
+  borderColor: "var(--color-accent)",
+  backgroundColor: "var(--color-background)",
+};
+
+const loadingContainerStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "var(--spacing-2xl)",
+  gap: "var(--spacing-md)",
+  color: "var(--color-text-muted)",
+};
+
+const loadingSpinnerStyle: CSSProperties = {
+  animation: "spin 1s linear infinite",
+  color: "var(--color-accent)",
+};
+
+const loadingTextStyle: CSSProperties = {
+  fontSize: "var(--font-size-sm)",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-sm)",
+};
+
+const loadingDotsStyle: CSSProperties = {
+  display: "inline-flex",
+  gap: "4px",
+};
+
+const errorContainerStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "var(--spacing-2xl)",
+  gap: "var(--spacing-md)",
+  color: "var(--color-text-muted)",
+  textAlign: "center",
+};
+
+const errorIconStyle: CSSProperties = {
+  color: "#ef4444",
+};
+
+const reasoningSectionStyle: CSSProperties = {
+  borderRadius: "var(--border-radius-md)",
+  border: "1px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  overflow: "hidden",
+};
+
+const reasoningHeaderStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-sm)",
+  padding: "var(--spacing-sm) var(--spacing-md)",
+  cursor: "pointer",
+  userSelect: "none",
+  backgroundColor: "var(--color-surface)",
+  transition: "background-color var(--transition-fast)",
+};
+
+const reasoningIconStyle: CSSProperties = {
+  color: "var(--color-accent)",
+  flexShrink: 0,
+};
+
+const reasoningTitleStyle: CSSProperties = {
+  flex: 1,
+  fontSize: "var(--font-size-sm)",
+  fontWeight: 600,
+  color: "var(--color-text-primary)",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-xs)",
+};
+
+const pulsingDotStyle: CSSProperties = {
+  width: "6px",
+  height: "6px",
+  borderRadius: "50%",
+  backgroundColor: "var(--color-accent)",
+  animation: "pulse 1.5s ease-in-out infinite",
+};
+
+const chevronStyle: CSSProperties = {
+  color: "var(--color-text-muted)",
+  flexShrink: 0,
+  transition: "transform var(--transition-fast)",
+};
+
+const reasoningContentStyle: CSSProperties = {
+  maxHeight: "350px",
+  overflowY: "auto",
+  padding: "var(--spacing-md)",
+  borderTop: "1px solid var(--color-border)",
+  scrollbarGutter: "stable",
+};
+
+const reasoningTextStyle: CSSProperties = {
+  fontSize: "var(--font-size-sm)",
+  color: "var(--color-text-secondary)",
+  lineHeight: 1.7,
+};
+
+const translationContentStyle: CSSProperties = {
+  fontSize: "var(--font-size-base)",
+  color: "var(--color-text-primary)",
+  lineHeight: 1.8,
+};
+
+const streamingIndicatorStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-sm)",
+  padding: "var(--spacing-sm) 0",
+  color: "var(--color-text-muted)",
+  fontSize: "var(--font-size-sm)",
+};
+
+const streamingDotStyle: CSSProperties = {
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  backgroundColor: "var(--color-accent)",
+  animation: "pulse 1s ease-in-out infinite",
+};
+
+const getHeaderTitle = (translationState: TranslationState): string => {
+  if (!translationState.targetLanguage) {
+    return siteConfig.messages.translationReady;
+  }
+  if (translationState.isLoading) {
+    return siteConfig.messages.translating;
+  }
+  return siteConfig.messages.translationComplete;
+};
+
+const getHeaderSubtitle = (translationState: TranslationState): string => {
+  if (!translationState.targetLanguage) {
+    return siteConfig.messages.selectLanguage;
+  }
+  return siteConfig.languages[translationState.targetLanguage].name;
+};
+
+export const TranslationModal = ({ translationState, onClose, onSelectLanguage }: TranslationModalProps): JSX.Element | null => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const reasoningContentRef = useRef<HTMLDivElement>(null);
+  const [isReasoningExpanded, setIsReasoningExpanded] = useState<boolean>(false);
+  const [userToggledReasoning, setUserToggledReasoning] = useState<boolean>(false);
+  const [hoveredLanguage, setHoveredLanguage] = useState<SupportedLanguage | null>(null);
+  
+  const shouldAutoScrollContentRef = useRef<boolean>(true);
+  const shouldAutoScrollReasoningRef = useRef<boolean>(true);
+
+  useEffect((): void => {
+    if (userToggledReasoning) {
+      return;
+    }
+
+    if (translationState.isLoading && translationState.reasoning.length > 0 && !translationState.isReasoningComplete) {
+      setIsReasoningExpanded(true);
+    }
+
+    if (translationState.isReasoningComplete && translationState.reasoning.length > 0 && !userToggledReasoning) {
+      setIsReasoningExpanded(false);
+    }
+  }, [translationState.isLoading, translationState.isReasoningComplete, translationState.reasoning, userToggledReasoning]);
+
+  useEffect((): void => {
+    if (!contentRef.current) {
+      return;
+    }
+    
+    const element = contentRef.current;
+    
+    if (shouldAutoScrollContentRef.current && translationState.content) {
+      element.scrollTop = element.scrollHeight;
+    }
+  }, [translationState.content]);
+
+  useEffect((): void => {
+    if (!reasoningContentRef.current || !isReasoningExpanded) {
+      return;
+    }
+    
+    const element = reasoningContentRef.current;
+    
+    if (shouldAutoScrollReasoningRef.current && translationState.reasoning) {
+      element.scrollTop = element.scrollHeight;
+    }
+  }, [translationState.reasoning, isReasoningExpanded]);
+
+  const handleContentScroll = useCallback((): void => {
+    if (!contentRef.current) {
+      return;
+    }
+    
+    const element = contentRef.current;
+    const isAtBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 50;
+    shouldAutoScrollContentRef.current = isAtBottom;
+  }, []);
+
+  const handleReasoningScroll = useCallback((): void => {
+    if (!reasoningContentRef.current) {
+      return;
+    }
+    
+    const element = reasoningContentRef.current;
+    const isAtBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 50;
+    shouldAutoScrollReasoningRef.current = isAtBottom;
+  }, []);
+
+  useEffect((): (() => void) => {
+    const handleEscape = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return (): void => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+
+  useEffect((): void => {
+    if (!translationState.isOpen) {
+      setIsReasoningExpanded(false);
+      setUserToggledReasoning(false);
+      setHoveredLanguage(null);
+      shouldAutoScrollContentRef.current = true;
+      shouldAutoScrollReasoningRef.current = true;
+    }
+  }, [translationState.isOpen]);
+
+  if (!translationState.isOpen) {
+    return null;
+  }
+
+  const handleReasoningToggle = (): void => {
+    setUserToggledReasoning(true);
+    setIsReasoningExpanded((previous) => !previous);
+  };
+
+  const handleLanguageSelect = (language: SupportedLanguage): void => {
+    if (!translationState.isLoading) {
+      onSelectLanguage(language);
+    }
+  };
+
+  const renderLanguageSelector = (): JSX.Element | null => {
+    if (translationState.targetLanguage) {
+      return null;
+    }
+
+    const languages: Array<{ code: SupportedLanguage; name: string; flag: string }> = [
+      { code: "id", name: siteConfig.languages.id.name, flag: siteConfig.languages.id.flag },
+      { code: "zh", name: siteConfig.languages.zh.name, flag: siteConfig.languages.zh.flag },
+      { code: "ja", name: siteConfig.languages.ja.name, flag: siteConfig.languages.ja.flag },
+      { code: "fr", name: siteConfig.languages.fr.name, flag: siteConfig.languages.fr.flag },
+      { code: "es", name: siteConfig.languages.es.name, flag: siteConfig.languages.es.flag },
+    ];
+
+    return (
+      <div style={languageSelectorContainerStyle}>
+        <div style={languageButtonsContainerStyle}>
+          {languages.map((language) => (
+            <button
+              key={language.code}
+              type="button"
+              onClick={() => handleLanguageSelect(language.code)}
+              onMouseEnter={() => setHoveredLanguage(language.code)}
+              onMouseLeave={() => setHoveredLanguage(null)}
+              disabled={translationState.isLoading}
+              style={{
+                ...languageButtonStyle,
+                ...(hoveredLanguage === language.code ? languageButtonHoverStyle : {}),
+              }}
+            >
+              <span>{language.flag}</span>
+              <span>{language.name}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const renderSelectedLanguage = (): JSX.Element | null => {
+    if (!translationState.targetLanguage) {
+      return null;
+    }
+
+    const language = siteConfig.languages[translationState.targetLanguage];
+
+    return (
+      <div style={languageSelectorContainerStyle}>
+        <div style={languageButtonsContainerStyle}>
+          <button
+            type="button"
+            disabled
+            style={{
+              ...languageButtonStyle,
+              borderColor: "var(--color-accent)",
+              backgroundColor: "var(--color-accent)",
+              color: "#ffffff",
+              cursor: "default",
+              opacity: 1,
+            }}
+          >
+            <span>{language.flag}</span>
+            <span>{language.name}</span>
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderReasoningSection = (): JSX.Element | null => {
+    if (!translationState.reasoning) {
+      return null;
+    }
+
+    const reasoningHtml = renderMarkdown(translationState.reasoning);
+
+    return (
+      <div style={reasoningSectionStyle}>
+        <div
+          style={reasoningHeaderStyle}
+          onClick={handleReasoningToggle}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(event): void => {
+            if (event.key === "Enter" || event.key === " ") {
+              handleReasoningToggle();
+            }
+          }}
+        >
+          <Brain size={16} style={reasoningIconStyle} />
+          <span style={reasoningTitleStyle}>
+            {siteConfig.messages.reasoning}
+            {translationState.isLoading && !translationState.isReasoningComplete && (
+              <span style={pulsingDotStyle} />
+            )}
+          </span>
+          {isReasoningExpanded ? (
+            <ChevronUp size={16} style={chevronStyle} />
+          ) : (
+            <ChevronDown size={16} style={chevronStyle} />
+          )}
+        </div>
+        {isReasoningExpanded && (
+          <div
+            ref={reasoningContentRef}
+            style={reasoningContentStyle}
+            onScroll={handleReasoningScroll}
+          >
+            <div
+              style={reasoningTextStyle}
+              dangerouslySetInnerHTML={{ __html: reasoningHtml }}
+            />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderContent = (): JSX.Element => {
+    if (translationState.error) {
+      return (
+        <div style={errorContainerStyle}>
+          <AlertCircle size={40} style={errorIconStyle} />
+          <span>{translationState.error}</span>
+        </div>
+      );
+    }
+
+    if (translationState.isLoading && !translationState.reasoning && !translationState.content && translationState.targetLanguage) {
+      return (
+        <div style={loadingContainerStyle}>
+          <Globe size={40} style={loadingSpinnerStyle} />
+          <div style={loadingTextStyle}>
+            <span>{siteConfig.messages.translating}</span>
+            <span style={loadingDotsStyle}>
+              <span style={{ ...pulsingDotStyle, animationDelay: "0s" }} />
+              <span style={{ ...pulsingDotStyle, animationDelay: "0.2s" }} />
+              <span style={{ ...pulsingDotStyle, animationDelay: "0.4s" }} />
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    if (!translationState.targetLanguage) {
+      return (
+        <div style={contentInnerStyle}>
+          {renderLanguageSelector()}
+        </div>
+      );
+    }
+
+    const contentHtml = translationState.content ? renderMarkdown(translationState.content) : "";
+
+    return (
+      <div style={contentInnerStyle}>
+        {renderSelectedLanguage()}
+        {renderReasoningSection()}
+        {translationState.content && (
+          <div
+            style={translationContentStyle}
+            dangerouslySetInnerHTML={{ __html: contentHtml }}
+          />
+        )}
+        {translationState.isLoading && translationState.content && (
+          <div style={streamingIndicatorStyle}>
+            <span style={streamingDotStyle} />
+            <span>{siteConfig.messages.translating}</span>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const headerTitle = getHeaderTitle(translationState);
+  const headerSubtitle = getHeaderSubtitle(translationState);
+
+  const modalContent = (
+    <div style={overlayStyle}>
+      <div style={panelStyle}>
+        <div style={headerStyle}>
+          <div style={headerLeftStyle}>
+            <div style={headerIconContainerStyle}>
+              <Globe size={16} />
+            </div>
+            <div>
+              <div style={headerTitleStyle}>
+                {headerTitle}
+              </div>
+              <div style={headerSubtitleStyle}>
+                {headerSubtitle}
+              </div>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            style={closeButtonStyle}
+            title={siteConfig.messages.closeTranslation}
+          >
+            <X size={18} />
+          </button>
+        </div>
+        <div
+          ref={contentRef}
+          style={contentContainerStyle}
+          onScroll={handleContentScroll}
+        >
+          {renderContent()}
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+};

src/client/components/common/Head.tsx

@@ -28,18 +28,18 @@ export const Head = ({
     <Helmet>
       <title>{fullTitle}</title>
       <meta name="description" content={description} />
-
+      
       <meta property="og:type" content={type} />
       <meta property="og:title" content={fullTitle} />
       <meta property="og:description" content={description} />
       {url && <meta property="og:url" content={url} />}
       {image && <meta property="og:image" content={image} />}
-
+      
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:title" content={fullTitle} />
       <meta name="twitter:description" content={description} />
       {image && <meta name="twitter:image" content={image} />}
-
+      
       <link rel="canonical" href={url} />
     </Helmet>
   );

src/client/components/layout/Header.tsx

@@ -8,7 +8,8 @@ import { siteConfig } from "@shared/config";
 import { useTheme } from "../../contexts/ThemeContext";
 import { usePageContext } from "../../contexts/PageContext";
 import { useAnalysisContext } from "../../contexts/AnalysisContext";
-import { Sun, Moon, MonitorCog, Home, ChevronRight, Sparkles } from "lucide-react";
+import { useTranslationContext } from "../../contexts/TranslationContext";
+import { Sun, Moon, MonitorCog, Home, ChevronRight, Sparkles, Globe } from "lucide-react";
 import type { CSSProperties } from "react";
 
 const headerStyle: CSSProperties = {
@@ -74,6 +75,9 @@ const blogTitleStyle: CSSProperties = {
   color: "var(--color-text-primary)",
   textDecoration: "none",
   whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "clamp(80px, 25vw, 200px)",
 };
 
 const breadcrumbContainerStyle: CSSProperties = {
@@ -96,52 +100,55 @@ const postTitleStyle: CSSProperties = {
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
-  maxWidth: "200px",
+  maxWidth: "clamp(60px, 20vw, 200px)",
 };
 
-const iconButtonStyle: CSSProperties = {
+const iconButtonBaseStyle: CSSProperties = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   width: "36px",
   height: "36px",
   borderRadius: "var(--border-radius-md)",
-  border: "1px solid var(--color-border)",
   backgroundColor: "var(--color-surface)",
-  color: "var(--color-text-primary)",
   cursor: "pointer",
   transition: "background-color var(--transition-fast), border-color var(--transition-fast)",
   textDecoration: "none",
+  flexShrink: 0,
+};
+
+const iconButtonStyle: CSSProperties = {
+  ...iconButtonBaseStyle,
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
 };
 
 const analyzeButtonStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "36px",
-  height: "36px",
-  borderRadius: "var(--border-radius-md)",
+  ...iconButtonBaseStyle,
   border: "1px solid var(--color-accent)",
-  backgroundColor: "var(--color-surface)",
   color: "var(--color-accent)",
-  cursor: "pointer",
-  transition: "all var(--transition-fast)",
-  textDecoration: "none",
 };
 
 const analyzeButtonDisabledStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "36px",
-  height: "36px",
-  borderRadius: "var(--border-radius-md)",
+  ...iconButtonBaseStyle,
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-muted)",
+  cursor: "not-allowed",
+  opacity: 0.6,
+};
+
+const translateButtonStyle: CSSProperties = {
+  ...iconButtonBaseStyle,
+  border: "1px solid var(--color-accent)",
+  color: "var(--color-accent)",
+};
+
+const translateButtonDisabledStyle: CSSProperties = {
+  ...iconButtonBaseStyle,
   border: "1px solid var(--color-border)",
-  backgroundColor: "var(--color-surface)",
   color: "var(--color-text-muted)",
   cursor: "not-allowed",
   opacity: 0.6,
-  textDecoration: "none",
 };
 
 const spinnerIconStyle: CSSProperties = {
@@ -162,6 +169,7 @@ export const Header = (): JSX.Element => {
   const { theme, setTheme } = useTheme();
   const { currentPostTitle } = usePageContext();
   const { analysisState, startAnalysis, postContent } = useAnalysisContext();
+  const { translationState, openTranslation, postContent: translationPostContent } = useTranslationContext();
 
   const cycleTheme = (): void => {
     const themes: Array<"system" | "light" | "dark"> = ["system", "light", "dark"];
@@ -173,6 +181,9 @@ export const Header = (): JSX.Element => {
   const isOnPostPage = currentPostTitle !== null;
   const canAnalyze = isOnPostPage && postContent !== null && !analysisState.isOpen && !analysisState.isLoading;
   const showAnalyzeButton = siteConfig.features.enableAIAnalysis && isOnPostPage;
+  
+  const canTranslate = isOnPostPage && translationPostContent !== null && !translationState.isOpen && !translationState.isLoading;
+  const showTranslateButton = siteConfig.features.enableTranslation && isOnPostPage;
 
   const handleAnalyzeClick = (): void => {
     if (canAnalyze) {
@@ -180,6 +191,12 @@ export const Header = (): JSX.Element => {
     }
   };
 
+  const handleTranslateClick = (): void => {
+    if (canTranslate) {
+      openTranslation();
+    }
+  };
+
   return (
     <header style={headerStyle}>
       <div style={headerContainerStyle}>
@@ -210,6 +227,17 @@ export const Header = (): JSX.Element => {
         </div>
 
         <div style={rightSectionStyle}>
+          {showTranslateButton && (
+            <button
+              type="button"
+              onClick={handleTranslateClick}
+              disabled={!canTranslate}
+              style={canTranslate ? translateButtonStyle : translateButtonDisabledStyle}
+              title={siteConfig.messages.translateArticle}
+            >
+              <Globe size={18} style={translationState.isLoading ? spinnerIconStyle : undefined} />
+            </button>
+          )}
           {showAnalyzeButton && (
             <button
               type="button"

src/client/components/layout/Layout.tsx

@@ -6,6 +6,7 @@
 import { Header } from "./Header";
 import { Footer } from "./Footer";
 import { useAnalysisContext } from "../../contexts/AnalysisContext";
+import { useTranslationContext } from "../../contexts/TranslationContext";
 import type { ReactNode, CSSProperties } from "react";
 
 interface LayoutProps {
@@ -49,7 +50,10 @@ const mainContentStyle: CSSProperties = {
 };
 
 export const Layout = ({ children }: LayoutProps): JSX.Element => {
-  const { isBlurred } = useAnalysisContext();
+  const { isBlurred: isAnalysisBlurred } = useAnalysisContext();
+  const { isBlurred: isTranslationBlurred } = useTranslationContext();
+  
+  const isBlurred = isAnalysisBlurred || isTranslationBlurred;
 
   return (
     <div style={isBlurred ? layoutBlurredStyle : layoutStyle}>

src/client/contexts/TranslationContext.tsx

@@ -0,0 +1,242 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect } from "react";
+import type { ReactNode } from "react";
+import type { TranslationState, SupportedLanguage, AIStreamChunk } from "@shared/types";
+
+const initialTranslationState: TranslationState = {
+  isOpen: false,
+  isLoading: false,
+  targetLanguage: null,
+  reasoning: "",
+  content: "",
+  isReasoningComplete: false,
+  error: null,
+};
+
+interface TranslationContextValue {
+  isBlurred: boolean;
+  translationState: TranslationState;
+  postContent: string | null;
+  postTitle: string | null;
+  setPostInfo: (content: string | null, title: string | null) => void;
+  openTranslation: () => void;
+  startTranslation: (language: SupportedLanguage) => Promise<void>;
+  resetTranslation: () => void;
+}
+
+const TranslationContext = createContext<TranslationContextValue | null>(null);
+
+interface TranslationProviderProps {
+  children: ReactNode;
+}
+
+export const TranslationProvider = ({ children }: TranslationProviderProps): JSX.Element => {
+  const [translationState, setTranslationState] = useState<TranslationState>(initialTranslationState);
+  const [postContent, setPostContent] = useState<string | null>(null);
+  const [postTitle, setPostTitle] = useState<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const isBlurred = translationState.isOpen;
+
+  const setPostInfo = useCallback((content: string | null, title: string | null): void => {
+    setPostContent(content);
+    setPostTitle(title);
+  }, []);
+
+  const openTranslation = useCallback((): void => {
+    setTranslationState({
+      isOpen: true,
+      isLoading: false,
+      targetLanguage: null,
+      reasoning: "",
+      content: "",
+      isReasoningComplete: false,
+      error: null,
+    });
+  }, []);
+
+  const resetTranslation = useCallback((): void => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setTranslationState(initialTranslationState);
+  }, []);
+
+  const startTranslation = useCallback(async (language: SupportedLanguage): Promise<void> => {
+    if (!postContent || !postTitle) {
+      return;
+    }
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    abortControllerRef.current = new AbortController();
+
+    setTranslationState((previous) => ({
+      ...previous,
+      isLoading: true,
+      targetLanguage: language,
+    }));
+
+    try {
+      const response = await fetch("/api/translate", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ content: postContent, title: postTitle, targetLanguage: language }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to start translation");
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("No response stream");
+      }
+
+      const decoder = new TextDecoder("utf-8");
+      let buffer = "";
+      let hasReceivedContent = false;
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+
+        for (const line of lines) {
+          const trimmedLine = line.trim();
+
+          if (!trimmedLine || !trimmedLine.startsWith("data: ")) {
+            continue;
+          }
+
+          const dataContent = trimmedLine.slice(6);
+
+          try {
+            const chunk: AIStreamChunk = JSON.parse(dataContent);
+
+            if (chunk.type === "error") {
+              setTranslationState((previous) => ({
+                ...previous,
+                isLoading: false,
+                error: chunk.content || "An error occurred",
+              }));
+              return;
+            }
+
+            if (chunk.type === "done") {
+              setTranslationState((previous) => ({
+                ...previous,
+                isLoading: false,
+                isReasoningComplete: true,
+              }));
+              return;
+            }
+
+            if (chunk.type === "reasoning" && chunk.content) {
+              setTranslationState((previous) => ({
+                ...previous,
+                reasoning: previous.reasoning + chunk.content,
+              }));
+            }
+
+            if (chunk.type === "content" && chunk.content) {
+              if (!hasReceivedContent) {
+                hasReceivedContent = true;
+                setTranslationState((previous) => ({
+                  ...previous,
+                  isReasoningComplete: true,
+                }));
+              }
+              setTranslationState((previous) => ({
+                ...previous,
+                content: previous.content + chunk.content,
+              }));
+            }
+          } catch {
+            continue;
+          }
+        }
+      }
+
+      setTranslationState((previous) => ({
+        ...previous,
+        isLoading: false,
+        isReasoningComplete: true,
+      }));
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        return;
+      }
+
+      setTranslationState((previous) => ({
+        ...previous,
+        isLoading: false,
+        error: error instanceof Error ? error.message : "An error occurred",
+      }));
+    }
+  }, [postContent, postTitle]);
+
+  useEffect((): (() => void) => {
+    const handlePopState = (): void => {
+      if (translationState.isOpen) {
+        resetTranslation();
+      }
+    };
+
+    window.addEventListener("popstate", handlePopState);
+
+    return (): void => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [translationState.isOpen, resetTranslation]);
+
+  useEffect((): (() => void) => {
+    return (): void => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+    };
+  }, []);
+
+  const contextValue = useMemo((): TranslationContextValue => ({
+    isBlurred,
+    translationState,
+    postContent,
+    postTitle,
+    setPostInfo,
+    openTranslation,
+    startTranslation,
+    resetTranslation,
+  }), [isBlurred, translationState, postContent, postTitle, setPostInfo, openTranslation, startTranslation, resetTranslation]);
+
+  return (
+    <TranslationContext.Provider value={contextValue}>
+      {children}
+    </TranslationContext.Provider>
+  );
+};
+
+export const useTranslationContext = (): TranslationContextValue => {
+  const context = useContext(TranslationContext);
+  if (!context) {
+    throw new Error("useTranslationContext must be used within a TranslationProvider");
+  }
+  return context;
+};

src/client/pages/PostPage.tsx

@@ -8,12 +8,15 @@ import { useEffect, useCallback, useMemo } from "react";
 import { usePost } from "../hooks/usePosts";
 import { usePageContext } from "../contexts/PageContext";
 import { useAnalysisContext } from "../contexts/AnalysisContext";
+import { useTranslationContext } from "../contexts/TranslationContext";
 import { PostContent } from "../components/blog/PostContent";
 import { AnalysisModal } from "../components/ai/AnalysisModal";
+import { TranslationModal } from "../components/ai/TranslationModal";
 import { Head } from "../components/common/Head";
 import { siteConfig } from "@shared/config";
 import { Loader, AlertCircle, ArrowLeft } from "lucide-react";
 import type { CSSProperties } from "react";
+import type { SupportedLanguage } from "@shared/types";
 
 const containerStyle: CSSProperties = {
   display: "flex",
@@ -65,7 +68,8 @@ export const PostPage = (): JSX.Element => {
   const { slug } = useParams<{ slug: string }>();
   const { post, loading, error } = usePost(slug || "");
   const { setCurrentPostTitle } = usePageContext();
-  const { analysisState, setPostInfo, resetAnalysis } = useAnalysisContext();
+  const { analysisState, setPostInfo: setAnalysisPostInfo, resetAnalysis: resetAnalysisState } = useAnalysisContext();
+  const { translationState, setPostInfo: setTranslationPostInfo, resetTranslation: resetTranslationState, startTranslation } = useTranslationContext();
 
   const textContent = useMemo((): string | null => {
     if (post) {
@@ -74,22 +78,40 @@ export const PostPage = (): JSX.Element => {
     return null;
   }, [post]);
 
+  const rawMarkdownContent = useMemo((): string | null => {
+    if (post) {
+      return post.rawContent;
+    }
+    return null;
+  }, [post]);
+
   useEffect((): (() => void) => {
     if (post) {
       setCurrentPostTitle(post.frontMatter.title);
-      setPostInfo(textContent, post.frontMatter.title);
+      setAnalysisPostInfo(textContent, post.frontMatter.title);
+      setTranslationPostInfo(rawMarkdownContent, post.frontMatter.title);
     }
 
     return (): void => {
       setCurrentPostTitle(null);
-      setPostInfo(null, null);
-      resetAnalysis();
+      setAnalysisPostInfo(null, null);
+      setTranslationPostInfo(null, null);
+      resetAnalysisState();
+      resetTranslationState();
     };
-  }, [post, textContent, setCurrentPostTitle, setPostInfo, resetAnalysis]);
+  }, [post, textContent, rawMarkdownContent, setCurrentPostTitle, setAnalysisPostInfo, setTranslationPostInfo, resetAnalysisState, resetTranslationState]);
 
   const handleCloseAnalysis = useCallback((): void => {
-    resetAnalysis();
-  }, [resetAnalysis]);
+    resetAnalysisState();
+  }, [resetAnalysisState]);
+
+  const handleCloseTranslation = useCallback((): void => {
+    resetTranslationState();
+  }, [resetTranslationState]);
+
+  const handleSelectLanguage = useCallback((language: SupportedLanguage): void => {
+    startTranslation(language);
+  }, [startTranslation]);
 
   if (loading) {
     return (
@@ -130,6 +152,11 @@ export const PostPage = (): JSX.Element => {
         analysisState={analysisState}
         onClose={handleCloseAnalysis}
       />
+      <TranslationModal
+        translationState={translationState}
+        onClose={handleCloseTranslation}
+        onSelectLanguage={handleSelectLanguage}
+      />
     </div>
   );
 };

src/client/styles/global.css

@@ -236,7 +236,7 @@ blockquote {
   padding-left: var(--spacing-lg);
   padding-top: var(--spacing-sm);
   padding-bottom: var(--spacing-sm);
-  padding-right: var(--spacing-sm);
+  padding-right: var(--spacing-md);
   margin: var(--spacing-lg) 0;
   font-style: italic;
   color: var(--color-text-secondary);

src/server/index.ts

@@ -11,6 +11,12 @@ import { apiRoutes } from "./routes/apiRoutes.js";
 import { aiRoutes } from "./routes/aiRoutes.js";
 import { initializeFileWatcher } from "./utils/fileWatcher.js";
 import { initializePostService } from "./services/postService.js";
+import { 
+  renderPostPage, 
+  generateRobotsTxt, 
+  generateSitemapXml 
+} from "./services/seoService.js";
+import { siteConfig } from "../shared/config.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -18,41 +24,73 @@ const __dirname = dirname(__filename);
 const HOST: string = "0.0.0.0";
 const PORT: number = 3000;
 
+const getBaseUrl = (): string => {
+  return siteConfig.siteUrl || `http://localhost:${PORT}`;
+};
+
 const app: Application = express();
 
 app.use(cors({
   origin: true,
-  methods: [
-    "GET",
-    "POST"
-  ],
+  methods: ["GET", "POST"],
   allowedHeaders: ["Content-Type"],
 }));
 
-app.use(express.json({ limit: "1mb" }));
+app.use(express.json({ limit: "2mb" }));
 
 app.use("/api", apiRoutes);
 app.use("/api", aiRoutes);
 
+app.get("/robots.txt", (_request: Request, response: Response): void => {
+  const baseUrl = getBaseUrl();
+  response.setHeader("Content-Type", "text/plain");
+  response.send(generateRobotsTxt(baseUrl));
+});
+
+app.get("/sitemap.xml", async (_request: Request, response: Response): Promise<void> => {
+  try {
+    const baseUrl = getBaseUrl();
+    const sitemap = await generateSitemapXml(baseUrl);
+    response.setHeader("Content-Type", "application/xml");
+    response.send(sitemap);
+  } catch (error) {
+    console.error("Error generating sitemap:", error);
+    response.status(500).send("Error generating sitemap");
+  }
+});
+
 const clientDistPath: string = join(__dirname, "../client");
 app.use(express.static(clientDistPath));
 
+app.get("/post/:slug", async (request: Request, response: Response): Promise<void> => {
+  try {
+    const slugParam = request.params.slug;
+    const slug: string = Array.isArray(slugParam) ? slugParam[0] : slugParam;
+    const html = await renderPostPage(slug);
+    response.setHeader("Content-Type", "text/html");
+    response.send(html);
+  } catch (error) {
+    console.error("Error rendering post page:", error);
+    response.status(500).send("Server Error");
+  }
+});
+
 app.use((_request: Request, response: Response, next: NextFunction): void => {
   if (_request.method === "GET" && !_request.path.startsWith("/api")) {
-    const indexPath: string = join(clientDistPath, "index.html");
-    response.sendFile(indexPath);
+    renderPostPage("").then((html) => {
+      response.setHeader("Content-Type", "text/html");
+      response.send(html);
+    }).catch((error) => {
+      console.error("Error rendering page:", error);
+      next();
+    });
     return;
   }
   next();
 });
 
 app.use(
-  (
-    error: Error,
-    _request: Request,
-    response: Response,
-    _next: NextFunction
-  ): void => {
+  (error: Error, _request: Request, response: Response, _next: NextFunction): void => {
     console.error("Server Error:", error.message);
     response.status(500).json({
       success: false,
@@ -64,10 +102,10 @@ app.use(
 const startServer = async (): Promise<void> => {
   await initializePostService();
   initializeFileWatcher();
-
-  app.listen(PORT, HOST, (): void => {
-    console.log(`Server running at http://${HOST}:${PORT}`);
-  });
+  
+  console.log(`Server running at http://${HOST}:${PORT}`);
+  console.log(`Site URL: ${getBaseUrl()}`);
+  console.log(`Environment: ${process.env.NODE_ENV || "development"}`);
 };
 
-startServer();
+app.listen(PORT, HOST, startServer);

src/server/routes/aiRoutes.ts

@@ -4,8 +4,8 @@
 //
 
 import { Router, Request, Response } from "express";
-import { streamAnalysis } from "../services/aiService.js";
-import type { AIAnalysisRequest } from "../../shared/types.js";
+import { streamAnalysis, streamTranslation } from "../services/aiService.js";
+import type { AIAnalysisRequest, TranslationRequest } from "../../shared/types.js";
 
 export const aiRoutes: Router = Router();
 
@@ -30,6 +30,35 @@ aiRoutes.post(
   }
 );
 
+aiRoutes.post(
+  "/translate",
+  async (request: Request, response: Response): Promise<void> => {
+    const { content, title, targetLanguage } = request.body as TranslationRequest;
+
+    if (!content || typeof content !== "string") {
+      response.status(400).json({
+        success: false,
+        error: "Article is required",
+      });
+      return;
+    }
+
+    if (!targetLanguage || typeof targetLanguage !== "string") {
+      response.status(400).json({
+        success: false,
+        error: "Target language is required",
+      });
+      return;
+    }
+
+    response.setHeader("Content-Type", "text/event-stream");
+    response.setHeader("X-Accel-Buffering", "no");
+    response.flushHeaders();
+
+    await streamTranslation(content, title || "Untitled", targetLanguage, response);
+  }
+);
+
 aiRoutes.all(
   "/analyze",
   (_request: Request, response: Response): void => {
@@ -40,4 +69,16 @@ aiRoutes.all(
       });
     }
   }
+);
+
+aiRoutes.all(
+  "/translate",
+  (_request: Request, response: Response): void => {
+    if (_request.method !== "POST") {
+      response.status(405).json({
+        success: false,
+        error: "Method not allowed",
+      });
+    }
+  }
 );

src/server/services/aiService.ts

@@ -5,6 +5,7 @@
 
 import type { Response } from "express";
 import { siteConfig } from "../../shared/config.js";
+import type { SupportedLanguage } from "../../shared/types.js";
 
 const getBaseUrl = (): string => {
   return process.env.BASE_URL || "";
@@ -23,11 +24,54 @@ Do NOT address or speak to the author.
 
 Do NOT use second-person language such as "you", "your", or any motivational or coaching tone.
 
-Do NOT claim to represent the reader’s perspective. Remember that you are only an AI assistant whose role is to help readers understand the content of the article.
+Do NOT claim to represent the reader's perspective. Remember that you are only an AI assistant whose role is to help readers understand the content of the article.
 
 Position yourself as a reader who happens to come across an article from the blog, and provide an explanation stating whether the article is accurate or whether it needs to be rechecked.
 
-Your task is to analyze the article as a reader, not as someone providing improvements, and not as an instructor.`
+Your task is to analyze the article as a reader, not as someone providing improvements, and not as an instructor.`;
+};
+
+const createTranslationSystemPrompt = (targetLanguage: SupportedLanguage): string => {
+  const languageNames: Record<SupportedLanguage, string> = {
+    id: "Indonesian",
+    zh: "Chinese",
+    ja: "Japanese",
+    fr: "French",
+    es: "Spanish",
+  };
+
+  const targetLanguageName = languageNames[targetLanguage];
+
+  return `You are a professional translator specializing in translating English blog posts into ${targetLanguageName}.
+
+Your task is to translate the following article accurately while maintaining:
+
+1. The original meaning and tone
+
+2. Markdown formatting
+
+3. Technical terms appropriately translated or kept in English if commonly used
+
+4. Natural flow and readability in ${targetLanguageName}
+
+Do NOT add explanations about the translation process.
+
+Do NOT modify the structure of the content.
+
+Translate only the text content, preserve all markdown syntax.
+
+Output the translated content directly.
+
+Exclude the following metadata when translating :
+
+---
+title: .....
+date: .....
+description: .....
+author: .....
+tags: .....
+---
+`;
 };
 
 export const streamAnalysis = async (
@@ -54,7 +98,6 @@ export const streamAnalysis = async (
       { role: "user", content: userMessage },
     ],
     max_tokens: siteConfig.ai.maxTokens,
-    reasoning_effort: siteConfig.ai.reasoningEffort,
     stream: true,
   };
 
@@ -88,7 +131,7 @@ export const streamAnalysis = async (
 
     while (true) {
       const { done, value } = await reader.read();
-      
+        
       if (done) {
         response.write(`data: ${JSON.stringify({ type: "done" })}\n\n`);
         break;
@@ -100,13 +143,13 @@ export const streamAnalysis = async (
 
       for (const line of lines) {
         const trimmedLine = line.trim();
-        
+          
         if (!trimmedLine || !trimmedLine.startsWith("data: ")) {
           continue;
         }
 
         const dataContent = trimmedLine.slice(6);
-        
+          
         if (dataContent === "[DONE]") {
           response.write(`data: ${JSON.stringify({ type: "done" })}\n\n`);
           continue;
@@ -137,5 +180,115 @@ export const streamAnalysis = async (
     response.write(`data: ${JSON.stringify({ type: "error", content: "Connection error occurred" })}\n\n`);
   }
 
+  response.end();
+};
+
+export const streamTranslation = async (
+  postContent: string,
+  postTitle: string,
+  targetLanguage: SupportedLanguage,
+  response: Response
+): Promise<void> => {
+  const baseUrl = getBaseUrl();
+  const apiKey = getApiKey();
+
+  if (!baseUrl || !apiKey) {
+    response.write(`data: ${JSON.stringify({ type: "error", content: "AI service is not configured" })}\n\n`);
+    response.end();
+    return;
+  }
+
+  const systemPrompt = createTranslationSystemPrompt(targetLanguage);
+  const userMessage = `Please translate this blog post titled "${postTitle}" into ${siteConfig.languages[targetLanguage].name}:\n\n${postContent}`;
+
+  const requestBody = {
+    model: siteConfig.ai.model,
+    messages: [
+      { role: "system", content: systemPrompt },
+      { role: "user", content: userMessage },
+    ],
+    max_tokens: siteConfig.ai.maxTokens,
+    stream: true,
+  };
+
+  try {
+    const apiResponse = await fetch(`${baseUrl}/v1/chat/completions`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!apiResponse.ok) {
+      const errorText = await apiResponse.text();
+      console.error("AI API Error:", errorText);
+      response.write(`data: ${JSON.stringify({ type: "error", content: "Failed to get AI response" })}\n\n`);
+      response.end();
+      return;
+    }
+
+    const reader = apiResponse.body?.getReader();
+    if (!reader) {
+      response.write(`data: ${JSON.stringify({ type: "error", content: "No response available" })}\n\n`);
+      response.end();
+      return;
+    }
+
+    const decoder = new TextDecoder("utf-8");
+    let buffer = "";
+
+    while (true) {
+      const { done, value } = await reader.read();
+        
+      if (done) {
+        response.write(`data: ${JSON.stringify({ type: "done" })}\n\n`);
+        break;
+      }
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        const trimmedLine = line.trim();
+          
+        if (!trimmedLine || !trimmedLine.startsWith("data: ")) {
+          continue;
+        }
+
+        const dataContent = trimmedLine.slice(6);
+          
+        if (dataContent === "[DONE]") {
+          response.write(`data: ${JSON.stringify({ type: "done" })}\n\n`);
+          continue;
+        }
+
+        try {
+          const parsed = JSON.parse(dataContent);
+          const delta = parsed.choices?.[0]?.delta;
+
+          if (!delta) {
+            continue;
+          }
+
+          if (delta.reasoning_content !== undefined && delta.reasoning_content !== null && delta.reasoning_content !== "") {
+            response.write(`data: ${JSON.stringify({ type: "reasoning", content: delta.reasoning_content })}\n\n`);
+          }
+
+          if (delta.content !== undefined && delta.content !== null && delta.content !== "") {
+            response.write(`data: ${JSON.stringify({ type: "content", content: delta.content })}\n\n`);
+          }
+        } catch {
+          continue;
+        }
+      }
+    }
+  } catch (error) {
+    console.error("Translation Error:", error);
+    response.write(`data: ${JSON.stringify({ type: "error", content: "Connection error occurred" })}\n\n`);
+  }
+
   response.end();
 };

src/server/services/seoService.ts

@@ -0,0 +1,175 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { readFile } from "fs/promises";
+import { join } from "path";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+import { siteConfig } from "../../shared/config.js";
+import { getAllPosts, getPostBySlug } from "./postService.js";
+import type { Post } from "../../shared/types.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const buildDir = join(__dirname, "../../client");
+
+let indexHtmlTemplate: string | null = null;
+
+export const loadIndexHtmlTemplate = async (): Promise<string> => {
+  if (indexHtmlTemplate) {
+    return indexHtmlTemplate;
+  }
+  
+  const indexPath = join(buildDir, "index.html");
+  try {
+    indexHtmlTemplate = await readFile(indexPath, "utf-8");
+    return indexHtmlTemplate;
+  } catch (error) {
+    console.error("Failed to load index.html template:", error);
+    return "";
+  }
+};
+
+const formatKeywords = (keywords: string[]): string => {
+  if (!keywords || keywords.length === 0) {
+    return "";
+  }
+  
+  const cleanedKeywords = keywords
+    .map(keyword => keyword.trim().toLowerCase())
+    .filter(keyword => keyword.length > 0)
+    .filter((keyword, index, self) => self.indexOf(keyword) === index)
+    .slice(0, 10);
+  
+  return cleanedKeywords.join(", ");
+};
+
+const mergeKeywords = (postKeywords: string[] | undefined): string => {
+  const defaultKeywords = siteConfig.keywords || [];
+  const articleKeywords = postKeywords || [];
+  
+  const combinedKeywords = [...articleKeywords, ...defaultKeywords];
+  return formatKeywords(combinedKeywords);
+};
+
+export const generateMetaTags = (post: Post): string => {
+  const title = `${post.frontMatter.title} - ${siteConfig.title}`;
+  const description = post.frontMatter.description || siteConfig.description;
+  const url = `${siteConfig.siteUrl || ""}/post/${post.slug}`;
+  const image = post.frontMatter.image || `${siteConfig.siteUrl || ""}/assets/images/profile.png`;
+  const keywords = mergeKeywords(post.frontMatter.tags);
+  
+  return `
+    <title>${escapeHtml(title)}</title>
+    <meta name="description" content="${escapeHtml(description)}">
+    <meta name="keywords" content="${escapeHtml(keywords)}">
+    <meta name="author" content="${escapeHtml(post.frontMatter.author || siteConfig.author.name)}">
+    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
+    <meta name="google-site-verification" content="m0OGuzVr40bOdghFXVbs3AYpfEcXnrRZ83RR1DCDvoc" />
+    <meta name="msvalidate.01" content="867CFEF9C4B44CFD5EEA1A6C65ED3F6B" />
+    <meta property="og:type" content="article">
+    <meta property="og:url" content="${escapeHtml(url)}">
+    <meta property="og:title" content="${escapeHtml(title)}">
+    <meta property="og:description" content="${escapeHtml(description)}">
+    <meta property="og:image" content="${escapeHtml(image)}">
+    <meta property="og:site_name" content="${escapeHtml(siteConfig.name)}">
+    <meta property="article:published_time" content="${escapeHtml(post.frontMatter.date)}">
+    <meta property="article:author" content="${escapeHtml(post.frontMatter.author || siteConfig.author.name)}">
+    ${post.frontMatter.tags?.map(tag => `<meta property="article:tag" content="${escapeHtml(tag)}">`).join("") || ""}
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="${escapeHtml(url)}">
+    <meta name="twitter:title" content="${escapeHtml(title)}">
+    <meta name="twitter:description" content="${escapeHtml(description)}">
+    <meta name="twitter:image" content="${escapeHtml(image)}">
+  `;
+};
+
+export const generateDefaultMetaTags = (): string => {
+  const keywords = formatKeywords(siteConfig.keywords);
+  
+  return `
+    <title>${escapeHtml(siteConfig.title)}</title>
+    <meta name="description" content="${escapeHtml(siteConfig.description)}">
+    <meta name="keywords" content="${escapeHtml(keywords)}">
+    <meta name="author" content="${escapeHtml(siteConfig.author.name)}">
+    <meta name="robots" content="index, follow">
+    <meta name="google-site-verification" content="m0OGuzVr40bOdghFXVbs3AYpfEcXnrRZ83RR1DCDvoc" />
+    <meta name="msvalidate.01" content="867CFEF9C4B44CFD5EEA1A6C65ED3F6B" />
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="${escapeHtml(siteConfig.title)}">
+    <meta property="og:description" content="${escapeHtml(siteConfig.description)}">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="${escapeHtml(siteConfig.title)}">
+    <meta name="twitter:description" content="${escapeHtml(siteConfig.description)}">
+  `;
+};
+
+export const renderPostPage = async (slug: string): Promise<string> => {
+  const template = await loadIndexHtmlTemplate();
+  
+  if (!slug) {
+    return template.replace("<!--SEO_META_TAGS-->", generateDefaultMetaTags());
+  }
+  
+  const post = await getPostBySlug(slug);
+  
+  if (!post) {
+    return template.replace("<!--SEO_META_TAGS-->", generateDefaultMetaTags());
+  }
+  
+  const metaTags = generateMetaTags(post);
+  return template.replace("<!--SEO_META_TAGS-->", metaTags);
+};
+
+export const generateRobotsTxt = (baseUrl: string): string => {
+  return `User-agent: *
+Allow: /
+Disallow: /api/
+
+Sitemap: ${baseUrl}/sitemap.xml
+`;
+};
+
+export const generateSitemapXml = async (baseUrl: string): Promise<string> => {
+  const posts = await getAllPosts();
+  const currentDate = new Date().toISOString().split("T")[0];
+  
+  const urlEntries: string[] = [];
+  
+  urlEntries.push(`
+  <url>
+    <loc>${escapeHtml(baseUrl)}/</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>`);
+  
+  for (const post of posts) {
+    const lastmod = new Date(post.frontMatter.date).toISOString().split("T")[0];
+    urlEntries.push(`
+  <url>
+    <loc>${escapeHtml(baseUrl)}/post/${post.slug}</loc>
+    <lastmod>${lastmod}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>`);
+  }
+  
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urlEntries.join("")}
+</urlset>`;
+};
+
+const escapeHtml = (text: string): string => {
+  if (!text) return "";
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};

src/shared/config.ts

@@ -7,11 +7,32 @@ export const siteConfig = {
   name: "Hadad Darajat",
   title: "Hadad Darajat",
   description: "Personal Blog",
+  siteUrl: process.env.SITE_URL,
   locale: "en-US",
   author: {
     name: "Hadad Darajat",
     linkedin: "https://linkedin.com/in/hadadrjt",
   },
+  keywords: [
+    "hadad",
+    "hadad darajat",
+    "hadadrjt",
+    "hadadxyz",
+    "hadad blog",
+    "hadad darajat blog",
+    "hadad personal blog",
+    "hadad darajat personal blog",
+    "blog",
+    "personal blog",
+    "technology",
+    "programming",
+    "software development",
+    "tech articles",
+    "huggingface",
+    "hugging face",
+    "hf",
+    "hugging face space"
+  ],
   footer: {
     copyrightYear: "2025",
     copyrightText: "Copyright",
@@ -33,6 +54,14 @@ export const siteConfig = {
     reasoning: "Reasoning",
     closeAnalysis: "Close",
     analysisError: "Failed to analyze article",
+    translateArticle: "Translate this article",
+    translating: "Translating...",
+    translationComplete: "Translation Complete",
+    translationInfo: "AI Translation",
+    selectLanguage: "Select Language",
+    translationError: "Failed to translate article",
+    closeTranslation: "Close",
+    translationReady: "Translation",
   },
   defaults: {
     postTitle: "Untitled",
@@ -46,10 +75,17 @@ export const siteConfig = {
   },
   features: {
     enableAIAnalysis: true,
+    enableTranslation: true,
   },
   ai: {
-    model: "openai/gpt-oss-20b",
-    maxTokens: 8192,
-    reasoningEffort: "high",
+    model: "nvidia/nemotron-3-nano-30b-a3b",
+    maxTokens: 131072,
+  },
+  languages: {
+    id: { name: "Indonesian", flag: "🇮🇩" },
+    zh: { name: "Chinese", flag: "🇨🇳" },
+    ja: { name: "Japanese", flag: "🇯🇵" },
+    fr: { name: "French", flag: "🇫🇷" },
+    es: { name: "Spanish", flag: "🇪🇸" },
   },
 };

src/shared/types.ts

@@ -49,4 +49,22 @@ export interface AnalysisState {
   content: string;
   isReasoningComplete: boolean;
   error: string | null;
+}
+
+export type SupportedLanguage = "id" | "zh" | "ja" | "fr" | "es";
+
+export interface TranslationState {
+  isOpen: boolean;
+  isLoading: boolean;
+  targetLanguage: SupportedLanguage | null;
+  reasoning: string;
+  content: string;
+  isReasoningComplete: boolean;
+  error: string | null;
+}
+
+export interface TranslationRequest {
+  content: string;
+  title: string;
+  targetLanguage: SupportedLanguage;
 }