Skip to content

Commit

Permalink
ui: test 2
Browse files Browse the repository at this point in the history
  • Loading branch information
elecbug committed Feb 17, 2025
1 parent f78a870 commit bcf1699
Show file tree
Hide file tree
Showing 23 changed files with 206 additions and 38 deletions.
31 changes: 15 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,9 @@
<title>Docker Korea</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="./imgs/logo/organization-logo.jpg" />
<link rel="stylesheet" href="./src/style.css" />
<script src="https://kit.fontawesome.com/6984a5c98e.js" crossorigin="anonymous"></script>
<script type="module" src="./src/script.js"></script>
<script type="module" src="./src/scripts/main.ts"></script>
<link rel="icon" type="image/svg+xml" href="./imgs/logo/organization-logo.jpg" />
</head>
<body class="h-full flex-col bg-background-light text-base dark:bg-background-dark dark:text-white">
<!-- 네비게이션 바 -->
Expand All @@ -20,16 +19,16 @@
<nav class="mt-1">
<ul class="flex text-sm md:text-base lg:gap-4">
<li class="border-b-4 border-transparent hover:border-white/20 cursor-pointer">
<a class="block px-2 py-1 whitespace-nowrap" href="./get-started">Get started</a>
<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">
<a class="block px-2 py-1 whitespace-nowrap" href="./guides">Guides</a>
<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">
<a class="block px-2 py-1 whitespace-nowrap" href="./manuals">Manuals</a>
<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">
<a class="block px-2 py-1 whitespace-nowrap" href="./reference">Reference</a>
<a class="block px-2 py-1 whitespace-nowrap" href="/reference">Reference</a>
</li>
</ul>
</nav>
Expand All @@ -43,7 +42,7 @@
<div class="z-50 w-full p-4 dark:bg-gray-dark-100 md:block md:w-[300px]">
<div id="nav__get-started" class="py-2 px-4 text-black">
<div class="flex w-full items-center justify-between">
<a class="hover:text-blue-light dark:hover:text-blue-dark text-black flex items-center" href="./get-started">
<a class="hover:text-blue-light dark:hover:text-blue-dark text-black flex items-center" href="/get-started">
<span class="p-0 m-0 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
Expand Down Expand Up @@ -72,15 +71,15 @@
<div id="nav__content" class="md:text-sm flex flex-col text-black">
<ul>
<li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark">
<a class="py-2 w-full truncate block" href="./get-started/get-docker">Get Docker</a>
<a class="py-2 w-full truncate block" href="/get-started/get-docker">Get Docker</a>
</li>
<li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark">
<a class="py-2 w-full truncate block" href="./get-started/docker-overview">What is Docker?</a>
<a class="py-2 w-full truncate block" href="/get-started/docker-overview">What is Docker?</a>
</li>
<li>
<div class="rounded px-4 w-full flex items-center justify-between">
<div class="w-full py-2 truncate">
<a class="block select-none hover:text-blue-light hover:dark:text-blue-dark" href="./get-started/introduction">Introduction</a>
<a class="block select-none hover:text-blue-light hover:dark:text-blue-dark" href="/get-started/introduction">Introduction</a>
</div>
<button>
<span>
Expand Down Expand Up @@ -122,7 +121,7 @@
<li>
<div class="rounded px-4 w-full flex items-center justify-between">
<div class="w-full py-2 truncate">
<a class="block select-none hover:text-blue-light hover:dark:text-blue-dark" href="./get-started/docker-workshop" >Docker workshop</a>
<a class="block select-none hover:text-blue-light hover:dark:text-blue-dark" href="/get-started/docker-workshop" >Docker workshop</a>
</div>
<button>
<span>
Expand All @@ -141,19 +140,19 @@
</div>
</li>
<li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark">
<a class="py-2 w-full truncate block" href="./get-started/resources" >Educational resources</a >
<a class="py-2 w-full truncate block" href="/get-started/resources" >Educational resources</a >
</li>
</ul>
</div>
</div>
</nav>

<!-- app: content(마크다운 파일) 표시 공간 : 오른쪽 부분 -->
<div id="app"></div>
<!-- content: (마크다운 파일) 표시 공간 : 오른쪽 부분 -->
<div id="content"></div>
</main>

<!-- 푸터 -->
<footer class="w-screen text-center py-4 bg-[#086dd7] text-white absolute bottom-0">
<footer class="w-screen text-center py-4 bg-[#086dd7] text-white relative bottom-0">
© 2025 Docker 한국어 문서 프로젝트 | <a href="https://github.com/docker-ko/docker-ko.github.io" class="hover:underline text-[#b0c4de]">GitHub</a>
</footer>
</body>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
4 changes: 0 additions & 4 deletions src/main.ts

This file was deleted.

17 changes: 0 additions & 17 deletions src/script.js

This file was deleted.

55 changes: 55 additions & 0 deletions src/scripts/load_md.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { marked } from "marked";

async function loadMarkdown(page: string) {
try {
console.log(`Fetching Markdown: /docs/${page}.md`); // 디버깅 로그 추가

const response = await fetch(`/docs/${page}.md?cache=${Date.now()}`);
if (!response.ok) throw new Error(`페이지를 찾을 수 없습니다: ${page}`);

const mdText = await response.text();
if (mdText.trim().startsWith("<!DOCTYPE html>") || mdText.includes("<html")) throw new Error(`요청된 경로가 Markdown이 아닌 HTML을 반환합니다: ${page}`);
if (!mdText.trim()) throw new Error(`Markdown 파일이 비어 있습니다: ${page}`);

const htmlContent = marked.parse(mdText);

const contentElement = document.getElementById("content")!;
contentElement.innerHTML = await htmlContent; // HTML 삽입

console.log(`Markdown 로드 완료! ${mdText}`);
} catch (error) {
console.error(error);
document.getElementById("content")!.innerHTML = `
<div class="not-found">
<h2>페이지를 찾을 수 없습니다.</h2>
<p>요청하신 문서를 찾을 수 없습니다. 경로를 확인해 주세요.</p>
<a href="/" class="back-home">홈으로 돌아가기</a>
</div>
`;
}
}


export function initializeMarkdownLoader() {
function updateMarkdown() {
let page: string;

if (location.hash) {
page = location.hash.substring(1); // 해시(#)를 제거한 경로
} else {
// 해시가 없는 경우 location.pathname 사용
page = location.pathname.startsWith("/") ? location.pathname.substring(1) : location.pathname;
}

console.log(`현재 location.pathname: ${location.pathname}`);
console.log(`현재 location.hash: ${location.hash}`);
console.log(`페이지 변경 감지: ${page}`);

loadMarkdown(page);
}

window.addEventListener("hashchange", updateMarkdown);
window.addEventListener("popstate", updateMarkdown); // 브라우저 뒤로 가기/앞으로 가기 감지
updateMarkdown(); // 초기 실행
}

7 changes: 7 additions & 0 deletions src/scripts/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import '../styles/content_style.css';
import '../styles/not_found.css';
import '../styles/style.css';
import './load_md';
import { initializeMarkdownLoader } from './load_md';

initializeMarkdownLoader();
File renamed without changes.
83 changes: 83 additions & 0 deletions src/styles/content_style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
#content {
color: black !important;
background-color: white;
padding: 1rem;
border-radius: 5px;
}

#content h1 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
color: #333;
}

#content h2 {
font-size: 1.75rem;
font-weight: bold;
margin-bottom: 1rem;
color: #444;
}

#content h3 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
color: #444;
}

#content p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1rem;
color: #222;
}

#content ul, #content ol {
margin-left: 1.5rem;
padding-left: 1rem;
}

#content ul {
list-style-type: disc;
}

#content ol {
list-style-type: decimal;
}

#content li {
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.6;
}

#content ul ul, #content ol ol, #content ul ol, #content ol ul {
margin-left: 1.5rem;
padding-left: 1rem;
}

#content code {
font-family: monospace;
background-color: #f4f4f4;
padding: 0.2rem 0.4rem;
border-radius: 4px;
color: #d63384;
}

#content pre {
background: #1e1e1e;
color: white;
padding: 1rem;
border-radius: 5px;
overflow-x: auto;
}

#content blockquote {
border-left: 4px solid #007bff;
padding: 0.75rem 1rem;
margin: 1rem 0;
background-color: #f8f9fa;
font-style: italic;
color: #555;
}
44 changes: 44 additions & 0 deletions src/styles/not_found.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.not-found {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

text-align: center;
padding: 20px;
max-width: 600px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.not-found h2 {
color: #d9534f;
font-size: 24px;
margin-bottom: 10px;
}

.not-found p {
font-size: 16px;
color: #555;
}

.not-found .back-home {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
}

.not-found .back-home:hover {
background: #0056b3;
}
File renamed without changes.
3 changes: 2 additions & 1 deletion vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ export default defineConfig({
base: './',
build: {
outDir: 'dist',
}
},
publicDir: 'public',
});

0 comments on commit bcf1699

Please sign in to comment.