GITBOOK-54: github와 gitbook 연결하기 위한 정리 중 2

GoldenPearls · Aug 28, 2024 · 89c3802 · 89c3802
1 parent 60926ba
commit 89c3802
Show file tree

Hide file tree

Showing 41 changed files with 75 additions and 28 deletions.
diff --git a/developLog/.gitbook/assets/image (1).png b/developLog/.gitbook/assets/image (1).png
diff --git a/developLog/.gitbook/assets/image (2) (1) (1) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (2) (1) (1) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (2) (1) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (2) (1) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (2) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (2) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (2) (1) (1) (1).png b/developLog/.gitbook/assets/image (2) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (2) (1) (1).png b/developLog/.gitbook/assets/image (2) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (2) (1).png b/developLog/.gitbook/assets/image (2) (1).png
diff --git a/developLog/.gitbook/assets/image (2).png b/developLog/.gitbook/assets/image (2).png
diff --git a/developLog/.gitbook/assets/image (3) (1) (1) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (3) (1) (1) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (3) (1) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (3) (1) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (3) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (3) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (3) (1) (1) (1).png b/developLog/.gitbook/assets/image (3) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (3) (1) (1).png b/developLog/.gitbook/assets/image (3) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (3) (1).png b/developLog/.gitbook/assets/image (3) (1).png
diff --git a/developLog/.gitbook/assets/image (3).png b/developLog/.gitbook/assets/image (3).png
diff --git a/developLog/.gitbook/assets/image (4) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (4) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (4) (1) (1) (1).png b/developLog/.gitbook/assets/image (4) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (4) (1) (1).png b/developLog/.gitbook/assets/image (4) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (4) (1).png b/developLog/.gitbook/assets/image (4) (1).png
diff --git a/developLog/.gitbook/assets/image (4).png b/developLog/.gitbook/assets/image (4).png
diff --git a/developLog/.gitbook/assets/image (5) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (5) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (5) (1) (1) (1).png b/developLog/.gitbook/assets/image (5) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (5) (1) (1).png b/developLog/.gitbook/assets/image (5) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (5) (1).png b/developLog/.gitbook/assets/image (5) (1).png
diff --git a/developLog/.gitbook/assets/image (5).png b/developLog/.gitbook/assets/image (5).png
diff --git a/developLog/.gitbook/assets/image (6) (1) (1) (1) (1).png b/developLog/.gitbook/assets/image (6) (1) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (6) (1) (1) (1).png b/developLog/.gitbook/assets/image (6) (1) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (6) (1) (1).png b/developLog/.gitbook/assets/image (6) (1) (1).png
diff --git a/developLog/.gitbook/assets/image (6) (1).png b/developLog/.gitbook/assets/image (6) (1).png
diff --git a/developLog/.gitbook/assets/image (6).png b/developLog/.gitbook/assets/image (6).png
diff --git a/developLog/.gitbook/assets/image.png b/developLog/.gitbook/assets/image.png
diff --git a/developLog/README.md b/developLog/README.md
@@ -46,7 +46,7 @@ layout:
 * 📝 저는 기록하고 남들과 정보를 나누는 것을 좋아하기에 [![](https://img.shields.io/badge/Velog-20C997?style=flat-square\&logo=Velog\&logoColor=white\&https://velog.io/@prettylee620)](https://velog.io/@prettylee620) 와 [![](https://img.shields.io/badge/Notion-000000?style=flat-square\&logo=Notion\&logoColor=white)](https://mellona.oopy.io/)에 기록합니다.
 * 📌 최근에 기록하여 많은 공감을 얻었던 글은 **면접에 관련된 글**이며, 그 외의 다수의 글로 공감과 댓글을 받았으며, 2024년 **velog 팔로워 100명 이상**을 달성하였습니다.
 
-<figure><img src=".gitbook/assets/image (3) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src=".gitbook/assets/image (3) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 ### ☎ CONTACT
 

diff --git a/developLog/SUMMARY.md b/developLog/SUMMARY.md
@@ -87,7 +87,7 @@
   * [github.io 블로그 만들기](ci-cd/github/github.io/README.md)
     * [github.io Chipy 테마 연동 하기](ci-cd/github/github.io/github.io-chipy.md)
   * [팀프로젝트때 알아낸 github 지식](ci-cd/github/github-1.md)
-* [Github Action](ci-cd/github-action/README.md)
+* [Github Action](ci-cd/gitaction.md)
   * [Github Action 링크 모음](ci-cd/github-action/github-action.md)
   * [OAuth 앱에 대한 범위 및 gitbook과 github.io를 자동화를 위한 작업](ci-cd/github-action/oauth-gitbook-github.io.md)
 

diff --git a/developLog/algorithm-datastructure/data-structure/undefined.md b/developLog/algorithm-datastructure/data-structure/undefined.md
@@ -45,7 +45,7 @@
 
 ### 2) 노드(Node)
 
-<figure><img src="../../.gitbook/assets/image (3) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (3) (1) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 * 연결리스트에서 사용되는 하나의 데이터 덩어리이며, `데이터 & 링크`이 2가지의 필드를 담고 있는 구조
 * data : 노드가 담고 있는 데이터/값, 문자열, 숫자 등등 원하는 값을 넣고 저장
@@ -54,15 +54,15 @@
 
 ### 3) 연결 리스트의 구조
 
-<figure><img src="../../.gitbook/assets/image (4) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (4) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 1. 마지막 연결할 것은 없기에 null과 연결
 2. 연결리스트의 첫 번째 즉, 시작 지점에 있는 것을 `head`라고 함
 3. 연결리스트의 마지막은 `tail`라고 부름
 
 ### 4) 배열 vs 연결리스트
 
-<figure><img src="../../.gitbook/assets/image (5) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (5) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 #### 배열
 
@@ -85,7 +85,7 @@
 
 #### Singly Linked List(단일 연결 리스트)
 
-<figure><img src="../../.gitbook/assets/image (6) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (6) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 1. 대부분의 연결리스트의 문제의 주력
 2. 다음 노드에 대한 포인터만 가지고 있다

diff --git a/developLog/ci-cd/github-action/README.md → developLog/ci-cd/gitaction.md b/developLog/ci-cd/github-action/README.md → developLog/ci-cd/gitaction.md
@@ -13,5 +13,5 @@ layout:
     visible: false
 ---
 
-# GitAction
+# Github Action
 
diff --git a/developLog/ci-cd/github-action/oauth-gitbook-github.io.md b/developLog/ci-cd/github-action/oauth-gitbook-github.io.md
@@ -25,12 +25,14 @@
 
 * gitbook은 github repo에 동기화가 가능해서 commit이 됨, 잔디심기 가능
 * url 커스텀 가능&#x20;
+* notion이랑 달리.. 카테고리화 및 workspace 안에서 숨긴 글이나 카테고리 지정하면 외부에서는 안보여서 관리하기 좋음
 
 2. 단점
 
 * 문서 홈페이지라서 댓글 기능 x
 * 방문 수 확인을 위해서는 pro로 가야함
 * 핸드폰에서 깨짐... 반응형이 아닌지 글머리 기호도 안보여...
+* h3는 목차로 쳐주지도 않음
 
 > 결론 자동화해서 github.io 블로그로 연동하기 위![](<../../.gitbook/assets/image (33).png>)
 
@@ -64,7 +66,7 @@
 
 2. <mark style="color:red;">repo</mark> ⭐&#x20;
 
-<figure><img src="../../.gitbook/assets/image.png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (5).png" alt=""><figcaption></figcaption></figure>
 
 * 코드, 커밋 상태, 리포지토리 초대, 협력자, 배포 상태 및 리포지토리 웹후크에 대한 읽기 및 쓰기 권한을 포함하여 퍼블릭 및 프라이빗 리포지토리에 대한 모든 권한을 부여합니다.&#x20;
 * **참고**: 리포지토리 관련 리소스 외에도 `repo` 범위는 <mark style="color:red;">프로젝트, 초대, 팀 멤버 자격 및 웹후크를 포함하여 조직 소유 리소스를 관리할 수 있는 액세스 권한을 부여</mark>합니다. 이 범위는 사용자가 소유한 프로젝트를 관리하는 기능도 부여합니다.
@@ -101,7 +103,7 @@
 
 ## repo끼리 연결하기 위한 토큰 발급
 
-### **<< Github PAT 발급 >>**
+### **1. << Github PAT 발급 >>**
 
 > 이 것을 Gitgook이 Github.io로 연결해주기 위한 토근
 
@@ -136,24 +138,69 @@
 
 * 만약 패키지 작업을 하지 않는다면, `repo`, `workflow`, `public_repo` 등의 기본적인 권한만으로 충분합니다.
 
-## 토큰 설정
+### 2. 토큰 설정
 
 > gitbook repo에 push 되거나, 일정 시간마다 github.io에 글을 연결해줄 거임
 
 <figure><img src="../../.gitbook/assets/image (32).png" alt=""><figcaption></figcaption></figure>
 
-### Gitbook repo에 PAT 등록
+### 3. Gitbook repo, Github.io repo에 PAT 등록 ⭐
+
+`Github action` 파일에 개인 레포로 변경사항을 `push`할 수 있도록 하려면\
+위에서 발급 받은 개인 토큰을 함께 보내 내 레포에 `push`할 권한을 받은 사람임을 증명 하기 위함
+
+<figure><img src="../../.gitbook/assets/image.png" alt=""><figcaption></figcaption></figure>
+
+<figure><img src="../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
 
-* GITBOOK 레포의 `⚙️ Settings` 클릭
+* GITBOOK , Github.io레포의 `⚙️ Settings` 클릭
 * `⊞ Secrets and variables`를 펼쳐 `Actions` 클릭
 * `New repository secret` 클릭
 * &#x20;`Name`에는 `.yml` 파일에서 사용할 이름, `Value`에는 아까 발급받은 PAT 작성
 * &#x20;`Add Secret` 클릭
 
+## workflow 작성하기
+
+워크플로우에 작업해야 할 것은 큰 틀은&#x20;
+
+> gitbook에 있는 md 파일을 github.io의 `_posts`에 넣어야 함
+
+<figure><img src="../../.gitbook/assets/image (3).png" alt=""><figcaption></figcaption></figure>
+
+### gitbook 을  가져오기 위한 문제가 있는데
+
+1. gitbook은 한글을 저장하지 못하더라?
+2. 그래서 한글로 된 타이틀의 경우, github repo에 저장 시, undefinded로 저장됨
+
+<figure><img src="../../.gitbook/assets/image (2).png" alt=""><figcaption></figcaption></figure>
+
+3. md 파일 코드 안에는 잘 들어가짐&#x20;
+
+* gitbook이 ##  까지만 목차로 만들어주는데 그 이유가 우리가 gitbook에서 ##로 목차를 하면 ### 로 #로 하면 ##로 <mark style="color:red;"># 을  하나씩 더 붙여지는 꼴임</mark>
+* 즉, 제목이 # 한게 h1임 => 이걸 github io에 넘어가기 전 workflow에서 변경해줘야 함 push가 들어올 때 변경을 하던 아니면 일정시간마다 변경을 하던지
+
+### 즉, workflow에서 작업해야 할 것들을 정리해보면
+
+1. gitbook 커밋 시, <mark style="color:red;">파일 이름</mark>을 다 바꿔줘야 함... md파일 안에 있는 <mark style="color:red;">h1</mark>으로
+2. gitbook의  github.io로 변경사항을 가져올 건데, md 파일들을 찾아야 함(main 브랜치에 `checkout`)
+3. developLog  >  있는 것들 중 아래 두개를 제외하고 전부 가져오고 그 이후는 변경사항이 있을 때만 가져올 거임
+
+<figure><img src="../../.gitbook/assets/image (4).png" alt=""><figcaption></figcaption></figure>
+
+4. **폴더**를 `카테고리`로 분류 할 거임&#x20;
+5. md파일을 수정해줘야 함 둘이 살짝 달라서 gitbook에서 보낼 때 카테고리, 발급날짜, 타이틀 등을 md파일 안에 넣어줘야 함
+
+✅ gitbook의 경우, github.io와 연동이 안되기에 md 파일 안에 있는 상단에 있는 --- ---  을 삭제 시켜줘야함
+
+✅ 그리고 github.io에 맞춰 수정해주어야 함
+
+✅  타이틀도 그것에 맞게 바꿔줘야 함
 
+6. 모든 작업이 끝났다면, github.io \_posts에 `push` 해준다.
 
 > 📁 참고&#x20;
 >
 > * [Github action으로 Sync Fork 자동화하기 - push 될 때마다](https://velog.io/@charming-l/Github-action%EC%9C%BC%EB%A1%9C-push-%EB%90%A0-%EB%95%8C%EB%A7%88%EB%8B%A4-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EC%B5%9C%EC%8B%A0%ED%99%94%ED%95%98%EA%B8%B0to-forked-repo)
 > * [GitAction에서 다른 레포로 접근하려면?](https://stackoverflow.com/questions/71068476/accessing-another-repository-with-github-cli-in-github-actions)
+> * [GitHub Organization 프로젝트를 vercel 무료로 연동하기 (+git actions)](https://velog.io/@rmaomina/organization-vercel-hobby-deploy)
 
diff --git a/developLog/cs/etc/cs.md b/developLog/cs/etc/cs.md
@@ -300,7 +300,7 @@ CF. 여러 개의 브라우저 서버 동시 접속 시도는 지원 되어야
 
 8. **다음의 화면을 구현하기 위한 HTML 코드를 작성해 주세요**
 
-<figure><img src="../../.gitbook/assets/image (2) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (2) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 ```java
 <html>

diff --git a/developLog/ex/knowledge/undefined.md b/developLog/ex/knowledge/undefined.md
@@ -1,6 +1,6 @@
 # 트위터를 통한 모르는 지식을 얻어가기
 
-<figure><img src="../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (6).png" alt=""><figcaption></figcaption></figure>
 
 ## 1. 소나큐브란?
 
@@ -41,15 +41,15 @@
 
 ## 3. 오픈소스 컨트리뷰터
 
-<figure><img src="../../.gitbook/assets/image (2).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (2) (1).png" alt=""><figcaption></figcaption></figure>
 
 {% embed url="https://www.contribution.ac/" %}
 
 ## 4. 타입 스크립트 밈 이해하기
 
-<figure><img src="../../.gitbook/assets/image (3).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (3) (1).png" alt=""><figcaption></figcaption></figure>
 
-<figure><img src="../../.gitbook/assets/image (4).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (4) (1).png" alt=""><figcaption></figcaption></figure>
 
 ### 이게 뭔 뜻이냐?
 
@@ -110,7 +110,7 @@ ChatGPT
 
 ### 댓글 살펴보기
 
-<figure><img src="../../.gitbook/assets/image (5).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (5) (1).png" alt=""><figcaption></figcaption></figure>
 
 ## 5. verse란
 
@@ -122,7 +122,7 @@ ChatGPT
 
 ## 6. 오픈소스 링크
 
-<figure><img src="../../.gitbook/assets/image (6).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (6) (1).png" alt=""><figcaption></figcaption></figure>
 
 {% embed url="https://openapi.tools/#documentation" %}
 

diff --git a/developLog/programming-lanuage/java/grammar/2.md b/developLog/programming-lanuage/java/grammar/2.md
@@ -132,7 +132,7 @@ Person(String name, int age){ //필드를 전달받아 만드는 오버로드
 
 **후**
 
-<figure><img src="../../../.gitbook/assets/image (2) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../../.gitbook/assets/image (2) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 ### 클래스와 getter/setter와 생성자, toString, 모델 클래스 전체코드
 

diff --git a/developLog/programming-lanuage/java/younghan-lecture/undefined.md b/developLog/programming-lanuage/java/younghan-lecture/undefined.md
@@ -36,13 +36,13 @@
 
 #### 인텔리제이를 통한 자바 설치 관리
 
-<figure><img src="../../../.gitbook/assets/image (2) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../../.gitbook/assets/image (2) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 * 내부에 자바를 편리하게 설치하고 관리할 수 있는 기능을 제공
 
 #### 인텔리제이를 통한 자바 컴파일, 실행 과정
 
-<figure><img src="../../../.gitbook/assets/image (3) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../../.gitbook/assets/image (3) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 1. **컴파일**
 
@@ -60,15 +60,15 @@
 
 1. 일반적인 프로그램은 다른 운영체제에서 실행 할 수 없다.
 
-<figure><img src="../../../.gitbook/assets/image (5) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../../.gitbook/assets/image (5) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 2. 자바 프로그램은 자바가 설치된 모든 OS에서 실행할 수 있다.
 
 * 자바 개발자는 특정 OS에 맞추어 개발을 하지 않아도 된다. 자바 개발자는 자바에 맞추어 개발하면 된다.
 * **OS 호환성 문제는 자바가 해결한다.** Hello.class 와 같이 컴파일된 자바 파일은 모든 자바 환경에서 실행할 수 있다.
 * 윈도우 자바는 윈도우 OS가 사용하는 명령어들로 구성되어 있다. MAC이나 리눅스 자바도 본인의 OS가 사용하는 명령어들로 구성되어 있다. 개발자는 각 OS에 맞도록 자바를 설치하기만 하면 된다.
 
-<figure><img src="../../../.gitbook/assets/image (6) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../../.gitbook/assets/image (6) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 #### 자바 개발과 운영 환경
 

diff --git a/developLog/spring/basic/undefined.md b/developLog/spring/basic/undefined.md
@@ -26,7 +26,7 @@ description: 스프링의 핵심은 무엇인가?
 
 object를 의자 s = new 의자();로 **heap**에 올리면 이 s는 만든 메서드가 관리함 단점은 이렇게 되면 **나중에 공유할 때 힘들어진다.**
 
-<figure><img src="../../.gitbook/assets/image (3) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (3) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 <figure><img src="../../.gitbook/assets/image (1) (1) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
@@ -38,7 +38,7 @@ object를 의자 s = new 의자();로 **heap**에 올리면 이 s는 만든 메
 
 * 스프링이 직접 만든다. 스캔하여 heap 메모리에 올려주고 스프링이 직접 관리
 
-<figure><img src="../../.gitbook/assets/image (3) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (3) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 #### ⭐ IoC 컨테이너
 
@@ -69,7 +69,7 @@ object를 의자 s = new 의자();로 **heap**에 올리면 이 s는 만든 메
   * Method Injection (필드 주입)
 * DL 사용시 컨테이너 종속이 증가하기 때문에 주로 DI를 사용한다. DI로 인해 스프링이 만든 것들을 다른 곳에서 사용이 가능하다. **즉, 공유가 가능하다.**
 
-<figure><img src="../../.gitbook/assets/image (4) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (4) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 > 🔗 출처 : [https://dog-developers.tistory.com/12](https://dog-developers.tistory.com/12)
 
@@ -109,7 +109,7 @@ object를 의자 s = new 의자();로 **heap**에 올리면 이 s는 만든 메
   * 리스너로 등록된 빈에게 **이벤트 발생을 알려준다.**
   *
 
-      <figure><img src="../../.gitbook/assets/image (5) (1) (1).png" alt=""><figcaption></figcaption></figure>
+      <figure><img src="../../.gitbook/assets/image (5) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 > 🔗 출처 : [https://dog-developers.tistory.com/12](https://dog-developers.tistory.com/12)
-Original file line number
+Diff line change
@@ Expand Up @@
 . **다음의 화면을 구현하기 위한 HTML 코드를 작성해 주세요**
-    <figure><img src="../../.gitbook/assets/image (2) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+    <figure><img src="../../.gitbook/assets/image (2) (1) (1) (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
     ```java
     <html>
@@ Expand Down @@