From bcf1699a2e2fdfe8e5248ce3df62edf32311633f Mon Sep 17 00:00:00 2001 From: elecbug Date: Mon, 17 Feb 2025 22:49:15 +0900 Subject: [PATCH] ui: test 2 --- index.html | 31 ++++--- public/{ => docs}/get-started.md | 0 .../build-tag-and-publish-an-image.md | 0 .../building-images/multi-stage-builds.md | 0 .../understanding-image-layers.md | 0 .../building-images/using-the-build-cache.md | 0 .../building-images/writing-a-dockerfile.md | 0 .../the-basics/what-is-a-container.md | 0 .../the-basics/what-is-a-registry.md | 0 .../the-basics/what-is-an-image.md | 0 .../the-basics/what-is-docker-compose.md | 0 public/{ => docs}/get-started/get-docker.md | 0 .../{ => docs}/get-started/what-is-docker.md | 0 public/{ => docs}/home.md | 0 src/main.ts | 4 - src/script.js | 17 ---- src/scripts/load_md.ts | 55 ++++++++++++ src/scripts/main.ts | 7 ++ src/{ => scripts}/vite-env.d.ts | 0 src/styles/content_style.css | 83 +++++++++++++++++++ src/styles/not_found.css | 44 ++++++++++ src/{ => styles}/style.css | 0 vite.config.ts | 3 +- 23 files changed, 206 insertions(+), 38 deletions(-) rename public/{ => docs}/get-started.md (100%) rename public/{ => docs}/get-started/docker-concepts/building-images/build-tag-and-publish-an-image.md (100%) rename public/{ => docs}/get-started/docker-concepts/building-images/multi-stage-builds.md (100%) rename public/{ => docs}/get-started/docker-concepts/building-images/understanding-image-layers.md (100%) rename public/{ => docs}/get-started/docker-concepts/building-images/using-the-build-cache.md (100%) rename public/{ => docs}/get-started/docker-concepts/building-images/writing-a-dockerfile.md (100%) rename public/{ => docs}/get-started/docker-concepts/the-basics/what-is-a-container.md (100%) rename public/{ => docs}/get-started/docker-concepts/the-basics/what-is-a-registry.md (100%) rename public/{ => docs}/get-started/docker-concepts/the-basics/what-is-an-image.md (100%) rename public/{ => docs}/get-started/docker-concepts/the-basics/what-is-docker-compose.md (100%) rename public/{ => docs}/get-started/get-docker.md (100%) rename public/{ => docs}/get-started/what-is-docker.md (100%) rename public/{ => docs}/home.md (100%) delete mode 100644 src/main.ts delete mode 100644 src/script.js create mode 100644 src/scripts/load_md.ts create mode 100644 src/scripts/main.ts rename src/{ => scripts}/vite-env.d.ts (100%) create mode 100644 src/styles/content_style.css create mode 100644 src/styles/not_found.css rename src/{ => styles}/style.css (100%) diff --git a/index.html b/index.html index 39181c6..c2b2fca 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,9 @@ Docker Korea - - - + + @@ -20,16 +19,16 @@ @@ -43,7 +42,7 @@
- + @@ -72,15 +71,15 @@
- -
+ +
-
+ `; + } +} + + +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(); // 초기 실행 +} + diff --git a/src/scripts/main.ts b/src/scripts/main.ts new file mode 100644 index 0000000..8e90b1c --- /dev/null +++ b/src/scripts/main.ts @@ -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(); \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/scripts/vite-env.d.ts similarity index 100% rename from src/vite-env.d.ts rename to src/scripts/vite-env.d.ts diff --git a/src/styles/content_style.css b/src/styles/content_style.css new file mode 100644 index 0000000..93bf48d --- /dev/null +++ b/src/styles/content_style.css @@ -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; +} \ No newline at end of file diff --git a/src/styles/not_found.css b/src/styles/not_found.css new file mode 100644 index 0000000..6ae3a96 --- /dev/null +++ b/src/styles/not_found.css @@ -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; +} \ No newline at end of file diff --git a/src/style.css b/src/styles/style.css similarity index 100% rename from src/style.css rename to src/styles/style.css diff --git a/vite.config.ts b/vite.config.ts index 1ff8e4e..2e90fa6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,5 +6,6 @@ export default defineConfig({ base: './', build: { outDir: 'dist', - } + }, + publicDir: 'public', });