간단한 css 작성

weniv · Jan 8, 2024 · 42b9509 · 42b9509
1 parent 028ec93
commit 42b9509
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 깃헙 정적 페이지 블로그 오픈소스
 
 * github에서 fork로 blog를 만들 수 있는 정적 페이지 제공 프로젝트
+* https://github.blog/category/engineering/ 스타일을 표본으로 제작
 
 1. github pages를 활성화 해서 `https://사용자이름.github.io/저장소이름/`라는 URL 생성
 2. 바닐라 JS의 fetch로 해당 URL의 `https://사용자이름.github.io/저장소이름/blog/블로그글.md`에서 데이터를 가져와 JSON 형식으로 변환

diff --git a/basic.css b/basic.css
@@ -0,0 +1,83 @@
+
+/* 기본 스타일링 */
+body {
+    font-family: 'Arial', sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: #333;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+header, main {
+    width: 100%;
+    margin: auto;
+    padding: 20px 0;
+}
+
+main {
+    width: 80%;
+    margin-top: 20px;
+    padding: 0 20px;
+}
+
+/* 헤더 및 메뉴 스타일링 */
+header {
+    background: #333;
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 15px;
+}
+
+#blog-title {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+}
+
+nav {
+    display: flex;
+    justify-content: right;
+    margin-right: 15px;
+}
+
+nav a {
+    margin: 0 15px;
+    color: white;
+}
+
+/* 블로그 포스트 및 컨텐츠 영역 */
+#blog-posts a {
+    background: white;
+    border: 1px solid #ddd;
+    display: block;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s ease;
+}
+
+#blog-posts a:hover {
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+#contents {
+    background: white;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+}
+
diff --git a/config.js b/config.js
@@ -4,5 +4,5 @@ const siteConfig = {
     repositoryName: "github_blog", // GitHub 저장소 이름
     mainColor: "#3498db", // 사이트의 주 색상
     textColor: "#333333", // 기본 텍스트 색상
-    // 추가 설정 변수들...
+    blogTitle: "" // 블로그 제목
 };
diff --git a/index.html b/index.html
@@ -5,15 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GitHub Blog</title>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <style>
-        body {
-            color: black;
-            background-color: white;
-        }
-    </style>
+    <link rel="stylesheet" href="basic.css">
 </head>
 <body>
     <header>
+        <!-- 블로그 제목 영역 -->
+        <h1 id="blog-title">hello world</h1>
+        <!-- //블로그 제목 영역 -->
+
         <!-- 메뉴 영역 -->
         <nav id="menu"></nav>
         <!-- //메뉴 영역 -->
@@ -32,8 +31,22 @@
     <script src="config.js"></script>
     <script>
         // config.js에서 가져온 설정을 사용
-        document.documentElement.style.setProperty('--main-color', siteConfig.mainColor);
-        document.documentElement.style.setProperty('--text-color', siteConfig.textColor);
+        // document.documentElement.style.setProperty('--main-color', siteConfig.mainColor);
+        // document.documentElement.style.setProperty('--text-color', siteConfig.textColor);
+
+        // config에서 값이 없을 경우 URL에서 추출
+        const urlConfig = extractFromUrl();
+        siteConfig.username = siteConfig.username || urlConfig.username;
+        siteConfig.repositoryName = siteConfig.repositoryName || urlConfig.repositoryName;
+
+        // 블로그 제목 설정
+        const $blogTitle = document.getElementById('blog-title')
+        $blogTitle.innerText = siteConfig.blogTitle || 'GitHub Blog';
+        // 클릭했을 때 메인페이지로 이동
+        $blogTitle.onclick = () => {
+            window.location.href = `https://${siteConfig.username}.github.io/${siteConfig.repositoryName}/`;
+        };
+
 
         // URL에서 username과 repositoryName 추출
         function extractFromUrl() {
@@ -51,11 +64,6 @@
             return { username: '', repositoryName: '' };
         }
 
-        // config에서 값이 없을 경우 URL에서 추출
-        const urlConfig = extractFromUrl();
-        siteConfig.username = siteConfig.username || urlConfig.username;
-        siteConfig.repositoryName = siteConfig.repositoryName || urlConfig.repositoryName;
-
         // GitHub API를 사용하여 폴더 내의 파일 목록 가져오기
         async function loadFolderContents(folderPath) {
             const response = await fetch(`https://api.github.com/repos/${siteConfig.username}/${siteConfig.repositoryName}/contents/${folderPath}`);
@@ -70,31 +78,65 @@
                 const link = document.createElement('a');
                 link.classList.add(`${file.name}`);
                 link.href = file.download_url;
-                link.innerText = file.name;
+                // 확장자를 제외하고 이름만 innerText로 사용
+                const fileName = file.name.split('.')[0];
+                link.innerText = fileName;
                 link.onclick = () => {
                     // 메뉴 링크 클릭 시 이벤트 중지 후 file 내용을 읽어와 contents 영역에 렌더링
                     event.preventDefault();
-                    fetch(file.download_url)
-                        .then(response => response.text())
-                        .then(text => {
-                            document.getElementById('contents').innerHTML = marked.parse(text);
-                        });
+
+                    if (file.name === 'blog.md') {
+                        // 만약 블로그라면 contents 영역을 없애고 블로그 포스트 목록을 보여줌
+                        document.getElementById('contents').style.display = 'none';
+                        document.getElementById('blog-posts').style.display = 'block';
+                        readPostList();
+                    } else {
+                        // 그렇지 않으면 blog-posts를 비우고 contents 영역에 파일 내용을 렌더링
+                        document.getElementById('blog-posts').style.display = 'none';
+                        document.getElementById('contents').style.display = 'block';
+                        fetch(file.download_url)
+                            .then(response => response.text())
+                            .then(text => {
+                                document.getElementById('contents').innerHTML = marked.parse(text);
+                            });
+                    }
 
                 };
                 document.getElementById('menu').appendChild(link);
             });
         });
 
-        // 블로그 포스트 생성
-        loadFolderContents('blog').then(files => {
-            files.forEach(file => {
-                // 블로그 게시글 링크 생성
-                const postLink = document.createElement('a');
-                postLink.href = `./blogPost.html?post=${file.name}`;
-                postLink.innerText = file.name;
-                document.getElementById('blog-posts').appendChild(postLink);
+        function readPostList(){
+            // 포스트 목록 읽어오는 함수
+            loadFolderContents('blog').then(files => {
+                // blog-posts 영역을 초기화, 초기화 하지 않으면 중복으로 렌더링됨
+                document.getElementById('blog-posts').innerHTML = '';
+                files.forEach(file => {
+                    // 블로그 게시글 링크 생성
+                    const postLink = document.createElement('a');
+                    postLink.href = `#`;
+                    postLink.innerText = file.name;
+                    postLink.onclick = () => {
+                        // 블로그 게시글 링크 클릭 시 이벤트 중지 후 file 내용을 읽어와 contents 영역에 렌더링
+                        event.preventDefault();
+                        // contents 영역을 보이게 처리
+                        document.getElementById('contents').style.display = 'block';
+                        // blog-posts 영역을 보이지 않게 처리
+                        document.getElementById('blog-posts').style.display = 'none';
+                        fetch(file.download_url)
+                            .then(response => response.text())
+                            .then(text => {
+                                document.getElementById('contents').innerHTML = marked.parse(text);
+                            });
+                    };
+                    document.getElementById('blog-posts').appendChild(postLink);
+                });
             });
-        });
+            // contents 영역을 보이지 않게 처리
+            document.getElementById('contents').style.display = 'none';
+        }
+
+        readPostList()
     </script>
 </body>
 </html>