Merge pull request #32 from elecbug/elecbug-master

[UI] 간단한 새 UI 추가
docker-ko · Feb 15, 2025 · da2cc6a · da2cc6a
2 parents 39f2841 + f50cbaf
commit da2cc6a
Show file tree

Hide file tree

Showing 26 changed files with 250 additions and 5,267 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@
    git commit -m "translate : Get Started"
    # 선택2) UI
    git commit -m "ui : What is an image"
-   git push origin [USERNAME]-[translate | ui]
+   git push origin [USERNAME]/[translate | ui]
    ```
 5. 원본 저장소로 Pull Request를 생성합니다.
    - `origin/master` <- `[USERNAME]/[translate | ui]`

diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,5 @@
+remote_theme: pages-themes/minimal@v0.2.0
+plugins:
+- jekyll-remote-theme
+title: Docker Korea
+description: Docker의 한국어 번역 페이지
diff --git a/docs/get-started.md b/docs/get-started.md
@@ -0,0 +1,5 @@
+# Get started
+
+Docker를 처음 사용하는 분을 위해 본 섹션에서는 Docker를 시작하는 데 필요한 필수 리소스를 안내합니다.
+
+가이드를 따라, Docker가 어떻게 개발 워크플로를 최적화할 수 있는지 알아보세요.
diff --git a/docs/home.md b/docs/home.md
@@ -0,0 +1 @@
+a
diff --git a/docs/side_nav.json b/docs/side_nav.json
@@ -0,0 +1,23 @@
+{
+    "get-started": {
+        "title": "시작하기",
+        "links": [
+            { "name": "Get Docker", "url": "#get-started/get-docker" },
+            { "name": "What is Docker?", "url": "#get-started/what-is-docker" },
+            {
+                "name": "Docker concepts",
+                "children": [
+                    {
+                        "name": "The basics",
+                        "children": [
+                            { "name": "What is a container?","url": "#get-started/docker-concepts/the-basics/what-is-a-container" },
+                            { "name": "What is an image?","url": "#get-started/docker-concepts/the-basics/what-is-an-image" },
+                            { "name": "What is a registry?","url": "#get-started/docker-concepts/the-basics/what-is-a-registry" },
+                            { "name": "What is a Docker Compose?","url": "#get-started/docker-concepts/the-basics/what-is-a-docker-compose" }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}
diff --git a/eslint.config.js b/eslint.config.js
diff --git a/index.html b/index.html
@@ -1,13 +1,125 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Vite + React + TS</title>
-	</head>
-	<body>
-		<div id="root"></div>
-		<script type="module" src="/src/main.tsx"></script>
-	</body>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Docker Korea</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <style>
+        body {
+            font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+            line-height: 1.5;
+            font-weight: 400;
+        }
+        .navbar {
+            background-color: #0d6efd;
+        }
+        .navbar-brand, .nav-link {
+            color: white !important;
+        }
+        .container-fluid {
+            display: flex;
+            width: 100%;
+            margin: 0;
+            padding: 20px;
+        }
+        .sidebar {
+            width: 250px;
+            min-width: 220px;  /* 최소 크기 지정 */
+            padding: 20px;
+            border-right: 1px solid #ddd;
+            background-color: #f8f9fa;
+        }
+        .sidebar ul {
+            list-style: none;
+            padding: 0;
+        }
+        .sidebar li {
+            margin: 8px 0;
+        }
+        .sidebar ul ul {
+            padding-left: 20px;
+            border-left: 2px solid #ddd;
+            margin-left: 10px;
+        }
+        .sidebar button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-weight: bold;
+            padding-left: 5px;
+        }
+        .sidebar a {
+            text-decoration: none;
+            color: #007bff;
+        }
+        .sidebar button::before {
+            content: "▶";
+            margin-right: 5px;
+            transition: transform 0.2s;
+        }
+        .sidebar button.open::before {
+            content: "▼";
+        }
+        .content {
+            flex-grow: 1;
+            max-width: calc(100% - 250px);  /* 사이드바 크기 고려 */
+            min-width: 700px; /* 너무 작아지는 것 방지 */
+            padding: 20px;
+            overflow: hidden;  /* 부모 컨테이너를 벗어나지 않도록 제한 */
+        }
+        .footer {
+            background-color: #343a40;
+            color: white;
+            text-align: center;
+            padding: 10px;
+            margin-top: 20px;
+        }
+        .markdown-body img {
+            max-width: 100%;  /* 부모 요소의 크기를 넘지 않도록 설정 */
+            height: auto;     /* 가로 크기에 비례하여 세로 크기 조정 */
+            display: block;   /* 블록 요소로 설정하여 정렬 오류 방지 */
+            margin: 10px auto; /* 중앙 정렬 */
+        }
+    </style>
+</head>
+<body>
+
+    <!-- 네비게이션 바 -->
+    <nav class="navbar navbar-expand-lg">
+        <div class="container">
+            <a class="navbar-brand" href="#">Docker Korea</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link" href="#get-started">시작하기</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#guide">가이드</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#manual">메뉴얼</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#reference">참고</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 컨텐츠 & 사이드바 -->
+    <div class="container-fluid d-flex">
+        <div id="sidebar" class="sidebar">
+            <h4>로딩 중...</h4>
+            <ul id="side-nav"></ul>
+        </div>
+        <div id="content" class="content markdown-body">
+            로딩 중...
+        </div>
+    </div>
+
+    <!-- 푸터 -->
+    <footer class="footer">
+        <p>© 2025 Docker 한국어 문서 프로젝트 | <a href="https://github.com/docker-ko/docker-ko.github.io" style="color: #b0c4de;">GitHub</a></p>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
 </html>