Merge pull request #125 from krsy0411/krsy0411-bug

버그 수정 & 문서 작성

Author: elecbug

index.html

@@ -27,13 +27,13 @@
       <nav
         id="sidebar"
         style="scroll-behavior: smooth"
-        class="dark:bg-gray-dark-100 fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto bg-[#f9f9fa] text-[12px] md:sticky md:top-12 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[240px]"
+        class="dark:bg-gray-dark-100 fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto bg-[#f9f9fa] md:sticky md:top-12 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]"
       >
         <div class="dark:bg-gray-dark-100 z-50 w-full p-4 md:block">
           <div id="nav__get-started" class="px-2 py-2 text-black">
             <div class="flex w-full items-center justify-between">
               <a
-                class="flex items-center text-sm font-light text-black hover:text-blue-500 md:text-base dark:hover:text-blue-500"
+                class="flex items-center font-light text-black hover:text-blue-500 md:text-base dark:hover:text-blue-500"
                 href="#/get-started"
               >
                 <span class="m-0 p-0 pr-2">
@@ -83,7 +83,7 @@
           <hr class="text-gray-light-200 dark:text-gray-dark-300 m-2" />
           <div
             id="nav__content"
-            class="flex flex-col text-sm font-light text-black md:text-base"
+            class="flex flex-col font-light text-black md:text-base"
           >
             <ul>
               <li
@@ -665,7 +665,7 @@
         id="aside-toc"
         class="sticky top-12 h-full min-w-80 overflow-y-auto px-2 py-4 lg:block"
       >
-        <div id="toc" class="text-[16px] text-black"></div>
+        <div id="toc" class="text-[14px] text-black font-bold"></div>
       </aside>
     </main>
 

public/docs/get-started/docker-workshop.md

@@ -0,0 +1,31 @@
+# Overview of the Docker workshop
+
+이번 45분 워크숍에서는 도커를 시작하는 방법에 대한 단계별 지침을 제공합니다. 이번 워크숍에서는 다음 내용에 대해 알려줍니다 :
+
+- 컨테이너로 이미지를 빌드하고 실행합니다.
+- 도커 허브를 사용하여 이미지를 공유합니다.
+- 데이터베이스와 함께 여러 컨테이너를 사용하여 도커 애플리케이션을 배포합니다.
+- 도커 컴포즈(Docker Compose)를 사용하여 애플리케이션을 실행합니다.
+
+## What is a container?
+
+컨테이너는 해당 호스트 머신에서 실행되는 다른 모든 프로세스와 격리된 호스트 머신에서 실행되는 샌드박스 프로세스입니다. 이러한 격리는 오랫동안 리눅스에서 사용해 온 [kernel namespaces and cgroups](https://medium.com/@saschagrunert/demystifying-containers-part-i-kernel-space-2c53d6979504) 기능을 활용합니다. 도커는 이러한 기능을 접근성 있고 사용하기 쉽게 만듭니다. 요약하자면, 컨테이너는 : 
+
+- 실행 가능한 이미지 인스턴스입니다. 도커 API 또는 CLI를 사용하여 컨테이너를 생성, 시작, 중지, 이동 또는 삭제할 수 있습니다.
+- 로컬 머신, 가상 머신에서 실행하거나 클라우드에 배포할 수 있습니다.
+- 휴대성이 좋습니다(아무 OS에서 실행 가능합니다).
+- 다른 컨테이너와 격리되고 자체 소프트웨어, 바이너리, 구성 등을 실행합니다.
+
+`chroot`에 익숙하다면, 컨테이너를 `chroot`의 확장된 버전으로 생각해 보세요. 파일 시스템은 이미지에서 생성됩니다. 하지만, 컨테이너는 chroot를 사용할 때는 사용 못 하는 추가 격리 기능을 제공합니다.
+
+## What is an image?
+
+실행 중인 컨테이너는 격리된 파일 시스템을 사용합니다. 이미지가 이러한 격리된 파일시스템을 제공하며, 이미지는 애플리케이션 실행에 필요한 모든 것(모든 종속성, 구성, 스크립트, 바이너리 등)을 포함해야 합니다. 이미지는 환경 변수, 실행할 기본 명령어, 기타 메타데이터와 같은 컨테이너를 위한 다른 구성도 포함합니다.
+
+## Next steps
+
+이 섹션에서는, 컨테이너와 이미지에 대해 알아보았습니다. 
+
+다음 내용에서는, 간단한 애플리케이션을 컨테이너화 해보고 개념을 직접 살펴보겠습니다.
+
+<button-component href="/#/get-started/workshop/02_our_app" title="Containerize an application" />

src/scripts/components/button-component.ts

@@ -21,7 +21,7 @@ class ButtonComponent extends HTMLElement {
 
     this.innerHTML = `
             <button type="button" class="not-prose my-4">
-                <a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-[#086dd7] text-white!">
+                <a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-[#086dd7] hover:bg-[#2560ff] text-white!">
                     ${title}
                 </a>
             </button>

src/scripts/components/header-component.ts

@@ -3,9 +3,28 @@ class HeaderComponent extends HTMLElement {
     super();
   }
 
+  setupNavigationListeners() {
+    // URL 해시 변경 감지
+    window.addEventListener('hashchange', () => {
+      const currentPath = window.location.hash.replace('#', '');
+      const navItems = this.querySelectorAll('.nav-item');
+
+      navItems.forEach((item) => {
+        const itemPath = item.getAttribute('data-path');
+        if (itemPath && currentPath.startsWith(itemPath)) {
+          item.classList.remove('border-b-transparent');
+          item.classList.add('border-b-white');
+        } else {
+          item.classList.remove('border-b-white');
+          item.classList.add('border-b-transparent');
+        }
+      });
+    });
+  }
+
   connectedCallback() {
     this.innerHTML = `
-      <header class="w-full sticky top-0 z-20 h-12 px-6 text-white bg-[#086dd7]">
+      <header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-[#086dd7]">
             <div class="max-w-[1920px] mx-auto flex lg:gap-8 gap-2 h-full items-center justify-between">
                 <div class="flex h-full items-center lg:gap-8 gap-2">
                     <div>
@@ -18,18 +37,18 @@ class HeaderComponent extends HTMLElement {
                             />
                         </a>
                     </div>
-                    <nav class="mt-1">
+                    <nav class="mt-1 hidden md:block">
                         <ul class="flex text-sm md:text-base lg:gap-4">
-                            <li class="border-b-4 border-transparent hover:border-white/20 cursor-pointer">
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/get-started">
                                 <a class="block px-2 py-1 whitespace-nowrap" href="#/get-started">Get started</a>
                             </li>
-                            <li class="border-b-4 border-transparent hover:border-white/20 cursor-pointer">
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/guides">
                                 <a class="block px-2 py-1 whitespace-nowrap" href="#/guides">Guides</a>
                             </li>
-                            <li class="border-b-4 border-transparent hover:border-white/20 cursor-pointer">
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/manuals">
                                 <a class="block px-2 py-1 whitespace-nowrap" href="#/manuals">Manuals</a>
                             </li>
-                            <li class="border-b-4 border-transparent hover:border-white/20 cursor-pointer">
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/reference">
                                 <a class="block px-2 py-1 whitespace-nowrap" href="#/reference">Reference</a>
                             </li>
                         </ul>
@@ -38,6 +57,8 @@ class HeaderComponent extends HTMLElement {
             </div>
         </header>
     `;
+
+    this.setupNavigationListeners();
   }
 }
 

src/scripts/table-contents.ts

@@ -23,13 +23,14 @@ export const initializeTableContents = () => {
   const toc = document.getElementById('toc') as HTMLElement;
 
   toc.innerHTML = '';
-  if (!content.querySelector('h1')) return;
+
+  const headings = content.querySelectorAll('h2, h3');
+  if (headings.length === 0) return;
 
   const tocTitle = document.createElement('p');
   const tocList = document.createElement('ul');
-  const headings = content.querySelectorAll('h2, h3');
 
-  tocTitle.classList.add('text-black', 'font-light', 'text-2xl', 'pb-5');
+  tocTitle.classList.add('text-black', 'font-light', 'text-lg', 'pb-5');
   tocTitle.textContent = 'Table of contents';
 
   const headingMap: Record<string, HTMLLIElement> = {};
@@ -40,13 +41,30 @@ export const initializeTableContents = () => {
       'max-w-64',
       'font-extralight',
       'hover:bg-gray-300',
-      'hover:font-light',
+      'hover:font-semibold',
       'cursor-pointer',
       'truncate'
     );
     const link = document.createElement('a');
     link.classList.add('flex', 'justify-start', 'items-stretch', 'p-1');
-    link.textContent = heading.textContent || '';
+
+    const headingText = heading.textContent || '';
+    link.textContent =
+      headingText.length > 30
+        ? headingText.substring(0, 30) + '...'
+        : headingText;
+
+    // 클릭 시 해당 heading으로 스크롤 이동
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const headingRect = heading.getBoundingClientRect();
+      const offsetTop = window.scrollY + headingRect.top - 60; // 60px 위로 조정
+
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth',
+      });
+    });
 
     listItem.appendChild(link);
     tocList.appendChild(listItem);