Add logo to TOC

docs/02_ko.html

@@ -42,7 +42,7 @@
 </p>
 <h3>Stackoverflow survey @ 2022</h3>
 </div>
-<p>2022년 Stack Overflow 개발자 설문조사 기준으로 Rust는 "가장 사랑받는 언어" 부문에서 <code>7년 연속</code>으로 1위를 차지할 정도입니다.</p>
+<p>2022년 Stack Overflow 개발자 설문조사 기준으로<br/>Rust는 "가장 사랑받는 언어" 부문에서 <code>7년 연속</code>으로 1위를 차지할 정도입니다.</p>
 <p>실제 예로 IT 대기업들 Facebook, Google, Mozilla 등이 Rust를 사용하고 있습니다.</p>
 <ul>
 <li><code>Facebook</code>은 Rust를 기반으로 하는 Libra, 디지털 자산을 위한 글로벌 금융 시스템을 구축하는 것을 목표 블록체인 프로젝트를 진행, HHVM, API etc</li>

docs/08_ko.html

@@ -48,7 +48,7 @@
             </div>
             </div>
             <div class="code">
-            <iframe id="rust-playground" width="100%" src="https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&code=fn%20main()%20%7B%0A%20%20%20%20let%20mut%20x%20%3D%2042%3B%0A%20%20%20%20println!(%22%7B%7D%22%2C%20x)%3B%0A%20%20%20%20x%20%3D%2013%3B%0A%20%20%20%20println!(%22%7B%7D%22%2C%20x)%3B%0A%7D%0A" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals" title="Rust Playground" loading="lazy"></iframe>
+            <iframe id="rust-playground" width="100%" src="https://play.rust-lang.org/?version=stable&mode=debug&edition=2021&code=fn+main%28%29+%7B%0A++++let+mut+x+%3D+42%3B%0A++++println%21%28%22%7B%7D%22%2C+x%29%3B%0A++++x+%3D+13%3B%0A++++println%21%28%22%7B%7D%22%2C+x%29%3B%0A%0A++++let+y+%3D+23%3B%0A++++println%21%28%22%7B%7D%22%2C+y%29%3B%0A++++%2F%2F+y+%3D+9%3B++%2F%2F+%EC%97%90%EB%9F%AC%0A%7D%0A" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals" title="Rust Playground" loading="lazy"></iframe>
             </div>
         </div>
         <!-- <script>

docs/09_ko.html

@@ -48,8 +48,8 @@
 <li>slices - 런타임에 길이가 알려진 비슷한 요소의 집합입니다.</li>
 <li><code>str</code>(문자열 슬라이스) - 런타임에 길이가 알려진 텍스트입니다.</li>
 </ul>
-<p>다른 언어에서 사용하는 것보다 텍스트는 더 복잡할 수 있습니다.
-Rust가 시스템 프로그래밍 언어이기 때문에, 기존에 익숙하지 않은 메모리 문제에 대해서도 신경쓰고 있습니다.
+<p>다른 언어에서 사용하는 것보다 텍스트는 더 복잡할 수 있습니다.<br />
+Rust가 시스템 프로그래밍 언어이기 때문에, 기존에 익숙하지 않은 메모리 문제에 대해서도 신경쓰고 있습니다.<br />
 이에 대해서는 나중에 자세히 다룰 예정입니다.</p>
 <p>숫자형은 숫자 끝에 유형을 명시하여 명시적으로 지정할 수 있습니다(예: <code>13u32</code>, <code>2u8</code>).</p>
             <div class="bottomnav">

docs/12_ko.html

@@ -37,9 +37,9 @@
             <div class="page">
             <h1>Arrays</h1>
             <p><em>배열</em>은 동일한 유형의 데이터 요소들의 <strong>고정된 길이 집합</strong>입니다.</p>
-<p><em>배열</em>의 데이터 유형은 <code>[T;N]</code> 입니다.
+<p><em>배열</em>의 데이터 유형은 <code>[T;N]</code> 입니다.<br />
 (T는 요소의 유형이고, N은 컴파일 시간에 알려진 고정 길이)</p>
-<p>개별 요소는 <code>[x]</code> 연산자를 사용하여 가져올 수 있습니다.
+<p>개별 요소는 <code>[x]</code> 연산자를 사용하여 가져올 수 있습니다.<br />
 여기서 x는 원하는 요소의 <em>usize</em> 인덱스(0부터 시작)입니다.</p>
 <p>가변 길이의 컬렉션, 즉 가변 배열은 나중에 <strong>Vectors</strong>에 대한 챕터에서 소개됩니다.</p>
             <div class="bottomnav">

docs/13_ko.html

@@ -40,8 +40,22 @@
 <p>이 예제에서 <em>add</em> 함수는 <code>i32</code>(32비트 길이의 부호 있는 정수)형 두 개의 인수를 취합니다.</p>
 <p><em>subtract</em> 함수에서와 같이 표현식만 반환하려면 <code>return</code> 키워드와 세미콜론을 삭제할 수 있습니다.</p>
 <p>함수 이름은 항상 <code>snake_case</code>로 지정됩니다.</p>
-<p>힌트: 함수를 정의하는 경우, 해당 함수가 수신하는 데이터를 매개변수 (parameter)라고합니다.
+<p>힌트: 함수를 정의하는 경우, 해당 함수가 수신하는 데이터를 매개변수 (parameter)라고합니다.<br />
 그 함수를 호출하고 데이터를 전달하면 인수(argument)라고합니다.</p>
+<pre><code class="python language-python">def add(x: int, y: int) -&gt; int:
+    return x + y
+
+def subtract(x: int, y: int) -&gt; int:
+    return x - y
+
+def main():
+    print(f"42 + 13 = {add(42, 13)}")
+    print(f"42 - 13 = {subtract(42, 13)}")
+
+
+if __name__ == "__main__":
+    main()
+</code></pre>
             <div class="bottomnav">
                 <span class="back"><a href="12_ko.html" rel="prev">❮ 이전</a></span>
                 <span class="next"><a href="14_ko.html" rel="next">다음 ❯</a></span>

docs/14_ko.html

@@ -38,7 +38,7 @@
             <h1>Multiple Return Values</h1>
             <p>함수는 값의 <strong>튜플</strong>을 반환하여 여러 값을 반환할 수 있습니다.</p>
 <p>튜플 요소는 인덱스 번호를 사용하여 참조할 수 있습니다.</p>
-<p>Rust는 여러 형식의 destructuring을 지원합니다.
+<p>Rust는 여러 형식의 destructuring을 지원합니다.<br />
 우리는 더 많은 형태로 볼 것이며, 이를 통해 데이터 구조의 하위 요소를 직관적으로 추출할 수 있습니다.</p>
             <div class="bottomnav">
                 <span class="back"><a href="13_ko.html" rel="prev">❮ 이전</a></span>

docs/16_ko.html

@@ -42,10 +42,10 @@
 <pre><code class="rust">struct Person {
   name: String,
   age: u8,
-} %end
-구조체의 인스턴스를 생성하려면, 구조체 이름 뒤에 중괄호를 사용하고 필드에 값을 할당합니다.
-예를 들면:
-%rust% let person = Person { name: String::from("Alice"), age: 30 };</code></pre>
+}</code></pre>
+<p>구조체의 인스턴스를 생성하려면, 구조체 이름 뒤에 중괄호를 사용하고 필드에 값을 할당합니다.<br />
+예를 들면:</p>
+<pre><code class="rust">let person = Person { name: String::from("Alice"), age: 30 };</code></pre>
 <hr />
 <p><strong>열거형 (Enum)</strong></p>
 <p>열거형(enum, "enumeration"의 줄임말)은 고정된 명명된 값 집합인 "변종(variants)"을 가진 타입을 나타냅니다.</p>
@@ -107,7 +107,7 @@ fn main() {
     }
 }</code></pre>
 <hr />
-<p><strong>Nested</strong>
+<p><strong>Nested</strong><br />
 중첩된 Struct과 Enum을 만들고 싶다면?</p>
 <pre><code class="rust">// 중첩된 구조체 (Nested Struct)
 struct Address {

docs/TOC_ko.html

@@ -74,6 +74,10 @@
 <li><a href="34_ko.html">Hey</a></li>
             </ul>
             </div>
+            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
+              <img style="display: block; margin: 0 auto;" src="/ajou.webp"></img><br/>
+              <p>이 컨텐츠는 2022년 과학기술정보통신부 및 정보통신기획평가원의 SW중심대학사업의 연구결과로 제작되었습니다.<br/>(2022-0-01077)</p>
+            </div>
         </div>
     </body>
     </html>
\ No newline at end of file

docs/chapter_2_ko.html

@@ -54,7 +54,7 @@
 <li><p>가비지 컬렉터가 메모리를 추적하고 회수하는 과정에서 시스템 리소스가 소모됩니다.</p></li>
 <li><p>가비지 컬렉션 동작 중에는 프로그램 실행이 일시 중단되거나 느려질 수 있어, 실시간 처리가 중요한 시스템에서는 문제가 될 수 있습니다.</p></li>
 </ul>
-<p>이러한 문제들에 대한 해결책으로 Rust는 소유권, 빌림, 그리고 수명을 기반으로 한 메모리 관리 시스템을 도입하였습니다.
+<p>이러한 문제들에 대한 해결책으로 Rust는 소유권, 빌림, 그리고 수명을 기반으로 한 메모리 관리 시스템을 도입하였습니다.<br />
 이를 통해 컴파일 시간에 메모리 안전성을 보장하며, 가비지 컬렉터의 성능 오버헤드를 피할 수 있습니다.</p>
             <div class="bottomnav">
                 <span class="back"><a href="19_ko.html" rel="prev">❮ 이전</a></span>

docs/index.html

@@ -37,14 +37,17 @@
             <div class="page">
             <h1>Hello World!</h1>
             <p><img src="/intro.webp" alt="Welcome to Rust" style="width: 100%; margin-bottom: 20px; border-radius: 10px;"></p>
+<p><strong>튜토리얼 소개 🎉</strong></p>
+<p>Rust 튜토리얼 기본편 영상을 위한 웹사이트입니다.</p>
+<p>키보드 <span class="emoji">⬅️</span>/<span class="emoji">➡️</span> 버튼으로 페이지를 이동할 수 있습니다.</p>
+<p>프로그래밍 기초 지식이 있는 분들을 대상으로 만들었습니다. (C, Python, Java 등)</p>
+<p>X분짜리 영상 총 Y편으로 구성되어 있고, 튜토리얼의 콘텐츠는 아래 링크들로 볼 수 있습니다.</p>
 <p>Mirror 1: <a href="http://rust-study.ajousw.kr/index.html" target="_blank" rel="noopener">http://rust-study.ajousw.kr/</a></p>
 <p>Mirror 2: <a href="https://hi-rust.github.io/index.html" target="_blank" rel="noopener">https://hi-rust.github.io/</a></p>
 <p>Binary: Windows/Mac/Ubuntu22.04 <a href="https://github.com/Hi-Rust/hi-rust.github.io/releases" target="_blank" rel="noopener">@다운로드</a></p>
-<p><strong>자기주도프로젝트 🎉</strong></p>
-<p>안녕하세요. 자기주도프로젝트 Rust 튜토리얼 영상을 위한 웹사이트입니다.</p>
-<p><code>프로그래밍 기초 지식이 있는 분들을 타겟</code>으로 만들었습니다. (C &amp; Python)</p>
-<p>키보드 <span class="emoji">⬅️</span>/<span class="emoji">➡️</span> 버튼으로 페이지를 이동할 수 있습니다.</p>
 <p>질문이 있다면 <code>ikr@kakao.com</code> 로 메일 남겨주세요.</p>
+<hr />
+<p><strong>챕터 🎯</strong></p>
 <ul>
 <li>Rust 언어 소개</li>
 <li>Rust 언어 기본 문법</li>
@@ -53,6 +56,9 @@
 <li>Rust 언어로 Python 언어 라이브러리 제작</li>
 <li>Rust 언어 웹 프레임워크를 이용한 카카오톡 챗봇 서버 제작</li>
 </ul>
+<blockquote>
+  <p>이 컨텐츠는 2022년 과학기술정보통신부 및 정보통신기획평가원의 SW중심대학사업의 연구결과로 제작되었습니다. (2022-0-01077)</p>
+</blockquote>
             <div class="bottomnav">
                 
                 <span class="next"><a href="01_ko.html" rel="next">다음 ❯</a></span>

docs/tour.css

@@ -12,7 +12,6 @@ a:focus {
 }
 
 pre > code,
-code,
 .code-badge {
   font-family: "Fira Code", monospace;
 }
@@ -64,7 +63,7 @@ blockquote {
 }
 
 code {
-  /* font-family: Consolas, monospace; */
+  font-family: "Noto Sans KR", sans-serif;
   font-size: 1.1em;
   font-weight: 500;
   padding: 0.3em;

docs/tour.js

-// var page = document.querySelector("div.tour");
-
-// console.log(page);
-
-// var hammer = new Hammer(document.body);
-
-// hammer.on("swipeleft", function () {
-//   console.log("Left");
-//   triggerLinkClick("next");
-// });
-
-// hammer.on("swiperight", function () {
-//   triggerLinkClick("back");
-// });
-
 const triggerLinkClick = direction => {
   const link = document.querySelector(`.${direction} a`);
   if (link) {
@@ -66,6 +51,15 @@ const handleTouchMove = evt => {
   }
 };
 
+let activeEl = null;
+document.addEventListener(
+  "focus",
+  event => {
+    activeEl = event.target;
+  },
+  true
+);
+
 const setupKeys = () => {
   // PC
   document.body.addEventListener("keyup", e => {
@@ -78,6 +72,20 @@ const setupKeys = () => {
       return;
     }
 
+    // check if the active element has a scrollable parent
+    const hasScrollableParent = el => el.scrollWidth > el.clientWidth;
+    let el = document.activeElement;
+    while (el) {
+      if (el === document.body) {
+        break; // stop checking if we reach the body element
+      }
+      if (hasScrollableParent(el) && el.tagName !== "A") {
+        e.preventDefault();
+        return;
+      }
+      el = el.parentElement;
+    }
+
     if (e.key === "Right" || e.key === "ArrowRight") {
       triggerLinkClick("next");
     }

frontend/.gitignore

@@ -3,3 +3,4 @@ docs/*.html
 node_modules
 .vscode
 node_modules
+__pycache__
\ No newline at end of file

frontend/generate.js

@@ -136,6 +136,7 @@ const converter = new showdown.Converter({
 });
 
 converter.setOption("parseImgDimensions", true);
+converter.setOption("simpleLineBreaks", true);
 
 /**
  * @param {string[]} words
@@ -413,6 +414,10 @@ languages.forEach(lang => {
           .join("\n")}
             </ul>
             </div>
+            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
+              <img style="display: block; margin: 0 auto;" src="/ajou.webp"></img><br/>
+              <p>이 컨텐츠는 2022년 과학기술정보통신부 및 정보통신기획평가원의 SW중심대학사업의 연구결과로 제작되었습니다.<br/>(2022-0-01077)</p>
+            </div>
         </div>
     </body>
     </html>`

frontend/lessons/ko/chapter_0.yaml

@@ -5,29 +5,43 @@
   content_markdown: |
     <img src="/intro.webp" alt="Welcome to Rust" style="width: 100%; margin-bottom: 20px; border-radius: 10px;">
 
-    Mirror 1: [http://rust-study.ajousw.kr/](http://rust-study.ajousw.kr/index.html)
+    **튜토리얼 소개 🎉**
 
-    Mirror 2: [https://hi-rust.github.io/](https://hi-rust.github.io/index.html)
 
-    Binary: Windows/Mac/Ubuntu22.04 [@다운로드](https://github.com/Hi-Rust/hi-rust.github.io/releases)
+    Rust 튜토리얼 기본편 영상을 위한 웹사이트입니다.
 
 
-    **자기주도프로젝트 🎉**
+    키보드 <span class="emoji">⬅️</span>/<span class="emoji">➡️</span> 버튼으로 페이지를 이동할 수 있습니다.
 
-    안녕하세요. 자기주도프로젝트 Rust 튜토리얼 영상을 위한 웹사이트입니다.
 
-    `프로그래밍 기초 지식이 있는 분들을 타겟`으로 만들었습니다. (C & Python)
+    프로그래밍 기초 지식이 있는 분들을 대상으로 만들었습니다. (C, Python, Java 등)
 
-    키보드 <span class="emoji">⬅️</span>/<span class="emoji">➡️</span> 버튼으로 페이지를 이동할 수 있습니다.
+
+    X분짜리 영상 총 Y편으로 구성되어 있고, 튜토리얼의 콘텐츠는 아래 링크들로 볼 수 있습니다.
+
+
+    Mirror 1: [http://rust-study.ajousw.kr/](http://rust-study.ajousw.kr/index.html)
+
+    Mirror 2: [https://hi-rust.github.io/](https://hi-rust.github.io/index.html)
+
+    Binary: Windows/Mac/Ubuntu22.04 [@다운로드](https://github.com/Hi-Rust/hi-rust.github.io/releases)
 
     질문이 있다면 <code>ikr@kakao.com</code> 로 메일 남겨주세요.
 
+    ---
+
+    **챕터 🎯**
+
     - Rust 언어 소개
     - Rust 언어 기본 문법
     - Rust 언어 고급 (비동기, Unsafe, 매크로 등)
     - Rust 언어 간단한 유저 라이브러리 제작 및 업로드
     - Rust 언어로 Python 언어 라이브러리 제작
     - Rust 언어 웹 프레임워크를 이용한 카카오톡 챗봇 서버 제작
+
+
+
+    > 이 컨텐츠는 2022년 과학기술정보통신부 및 정보통신기획평가원의 SW중심대학사업의 연구결과로 제작되었습니다. (2022-0-01077)
 - title: >-
     Rust 언어 소개
   code: >-
@@ -72,7 +86,7 @@
     <h3>Stackoverflow survey @ 2022</h3>
     </div>
 
-    2022년 Stack Overflow 개발자 설문조사 기준으로 Rust는 "가장 사랑받는 언어" 부문에서 `7년 연속`으로 1위를 차지할 정도입니다.
+    2022년 Stack Overflow 개발자 설문조사 기준으로<br/>Rust는 "가장 사랑받는 언어" 부문에서 `7년 연속`으로 1위를 차지할 정도입니다.
 
     실제 예로 IT 대기업들 Facebook, Google, Mozilla 등이 Rust를 사용하고 있습니다.
 

frontend/lessons/ko/chapter_1.yaml

@@ -83,7 +83,7 @@
 
 - title: 변수 업데이트
   code: >-
-    https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&code=fn%20main()%20%7B%0A%20%20%20%20let%20mut%20x%20%3D%2042%3B%0A%20%20%20%20println!(%22%7B%7D%22%2C%20x)%3B%0A%20%20%20%20x%20%3D%2013%3B%0A%20%20%20%20println!(%22%7B%7D%22%2C%20x)%3B%0A%7D%0A
+    https://play.rust-lang.org/?version=stable&mode=debug&edition=2021&code=fn+main%28%29+%7B%0A++++let+mut+x+%3D+42%3B%0A++++println%21%28%22%7B%7D%22%2C+x%29%3B%0A++++x+%3D+13%3B%0A++++println%21%28%22%7B%7D%22%2C+x%29%3B%0A%0A++++let+y+%3D+23%3B%0A++++println%21%28%22%7B%7D%22%2C+y%29%3B%0A++++%2F%2F+y+%3D+9%3B++%2F%2F+%EC%97%90%EB%9F%AC%0A%7D%0A
   content_markdown: >
     Rust는 변수가 변경 가능한지 여부에 대해 많은 주의를 기울입니다.
 
@@ -187,6 +187,24 @@
     힌트: 함수를 정의하는 경우, 해당 함수가 수신하는 데이터를 매개변수 (parameter)라고합니다.
 
     그 함수를 호출하고 데이터를 전달하면 인수(argument)라고합니다.
+
+
+    ```python
+
+    def add(x: int, y: int) -> int:
+        return x + y
+
+    def subtract(x: int, y: int) -> int:
+        return x - y
+
+    def main():
+        print(f"42 + 13 = {add(42, 13)}")
+        print(f"42 - 13 = {subtract(42, 13)}")
+
+
+    if __name__ == "__main__":
+        main()
+    ```
 - title: Multiple Return Values
   code: >-
     https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&code=fn%20swap(x%3A%20i32%2C%20y%3A%20i32)%20-%3E%20(i32%2C%20i32)%20%7B%0A%20%20%20%20return%20(y%2C%20x)%3B%0A%7D%0A%0Afn%20main()%20%7B%0A%20%20%20%20%2F%2F%20return%20a%20tuple%20of%20return%20values%0A%20%20%20%20let%20result%20%3D%20swap(123%2C%20321)%3B%0A%20%20%20%20println!(%22%7B%7D%20%7B%7D%22%2C%20result.0%2C%20result.1)%3B%0A%0A%20%20%20%20%2F%2F%20destructure%20the%20tuple%20into%20two%20variables%20names%0A%20%20%20%20let%20(a%2C%20b)%20%3D%20swap(result.0%2C%20result.1)%3B%0A%20%20%20%20println!(%22%7B%7D%20%7B%7D%22%2C%20a%2C%20b)%3B%0A%7D%0A
@@ -270,7 +288,7 @@
       name: String,
       age: u8,
     }
-    %end
+    %end%
 
     구조체의 인스턴스를 생성하려면, 구조체 이름 뒤에 중괄호를 사용하고 필드에 값을 할당합니다.