feat: TOC 추가

wish0ne · Dec 9, 2023 · bef8386 · bef8386
1 parent c8cb2ae
commit bef8386
Show file tree

Hide file tree

Showing 11 changed files with 189 additions and 125 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules/
 .cache/
 public
 src/gatsby-types.d.ts
-.env
+.env
+.DS_Store
diff --git a/posts/post1/image1-1.png b/posts/post1/image1-1.png
diff --git a/posts/post1/index.mdx b/posts/post1/index.mdx
@@ -47,7 +47,7 @@ tags: "#JavaScript #Compile"
 프로그래머가 작성하는 소스코드는 컴퓨터가 이해할 수 없다. 컴퓨터는 0과 1로 이루어진 기계어만 이해할 수 있기 때문에 작성한 소스코드를 기계어로 번역하는 컴파일 과정이 필요하다.
 
 소스코드는 컴파일을 통해 기계어로 이루어진 실행파일이 된다. 이 파일을 실행하면 실행파일 내용이 운영체제를 통해 메모리에 적재되어 프로그램이 실행된다.
-![](https://velog.velcdn.com/images/wish/post/73d4f325-3943-46e0-95c2-21c78bb13e50/image.png)_이미지 캡션_
+![](https://velog.velcdn.com/images/wish/post/73d4f325-3943-46e0-95c2-21c78bb13e50/image.png)
 
 컴파일 과정은 여러 단계로 나누어진다. 이 모든 단계를 통틀어서 **컴파일, 빌드**라고 부르기도 하며 컴파일과 링킹 과정을 따로 나눠서 부르기도 한다. 보통 빌드는 컴파일보다 넓은 의미(빌드 = 컴파일 + 링킹)으로 사용되는데, 상황에 맞게 적절히 이해하는 것이 좋을 것 같다.
 (즉 소스코드를 중간코드로 번역하는 과정을 컴파일이라고도 하며, 소스코드가 기게어로 번역되는 전체 과정을 컴파일 과정이라고도 부르는 것 같다.)

diff --git a/posts/test2/index.mdx b/posts/test2/index.mdx
diff --git a/posts/test2/michiel-annaert-qXdb_erAnqQ-unsplash.jpg b/posts/test2/michiel-annaert-qXdb_erAnqQ-unsplash.jpg
diff --git a/src/components/GlobalStyles.tsx b/src/components/GlobalStyles.tsx
@@ -8,6 +8,7 @@ const globalStyles = css`
     background-color: #fbfbfb;
     height: 100%;
     background: rgb(247, 247, 252);
+    scroll-padding-top: 10rem;
   }
 
   button {
@@ -22,7 +23,6 @@ const globalStyles = css`
 
   body {
     font-family: "Pretendard Variable", -apple-system, Roboto, sans-serif, serif;
-    margin: 10rem 4rem;
     height: 100%;
   }
 `;

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -27,7 +27,11 @@ const Layout = ({ children }: Props) => {
   return (
     <div style={pageStyles}>
       <GlobalStyles />
-      <div>
+      <div
+        css={css`
+          scroll-padding-top: 10rem;
+        `}
+      >
         <header
           css={css`
             position: fixed;
@@ -40,6 +44,7 @@ const Layout = ({ children }: Props) => {
             padding: 2rem;
             box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
             background-color: white;
+            z-index: 10;
           `}
         >
           <div
@@ -90,7 +95,15 @@ const Layout = ({ children }: Props) => {
           </nav>
         </header>
       </div>
-      <main>{children}</main>
+      <main
+        css={css`
+          margin: 10rem 4rem;
+          scroll-padding-top: 10rem;
+          scroll-margin-top: 10rem;
+        `}
+      >
+        {children}
+      </main>
       <footer>{/* Add your footer content here */}</footer>
     </div>
   );
@@ -101,11 +114,5 @@ export default Layout;
 export const Head: HeadFC = () => (
   <>
     <title>dev-wish.com</title>
-    <link
-      rel="stylesheet"
-      as="style"
-      crossOrigin=""
-      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
-    />
   </>
 );
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Global, css } from "@emotion/react";
+import { Link, useStaticQuery, graphql, HeadFC } from "gatsby";
+
+interface toc {
+  title: string;
+  url: string;
+  items?: toc[];
+}
+
+interface Props {
+  tableOfContents: {
+    items: toc[];
+  };
+}
+
+const getSubItems = (items: toc[], depth: number) => {
+  return items.map((item) => {
+    return (
+      <div key={item.title}>
+        <a href={item.url} key={item.title} css={css``}>
+          <h3
+            css={css`
+              font-size: 1.4rem;
+              font-weight: 500;
+              color: gray;
+              padding-left: ${depth * 2}rem;
+            `}
+          >
+            {item.title}
+          </h3>
+        </a>
+        {item?.items && getSubItems(item?.items, depth + 1)}
+      </div>
+    );
+  });
+};
+
+const Toc = ({ tableOfContents }: Props) => {
+  return (
+    <aside
+      css={css`
+        font-size: 1.4rem;
+        font-weight: 500;
+        position: sticky;
+        top: 10rem;
+        align-self: flex-start;
+      `}
+    >
+      {getSubItems(tableOfContents?.items, 0)}
+    </aside>
+  );
+};
+
+export default Toc;
diff --git a/src/images/icon.png b/src/images/icon.png
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -16,13 +16,16 @@ const HomePage = ({ data }: PageProps<DataProps>) => {
       <div
         css={css`
           display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(50%, auto));
           gap: 4rem;
         `}
       >
         <div
           css={css`
-            display: flex;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            @media (max-width: 1200px) {
+              grid-template-columns: 1fr;
+            }
             gap: 4rem;
           `}
         >
@@ -36,7 +39,6 @@ const HomePage = ({ data }: PageProps<DataProps>) => {
               -webkit-backdrop-filter: blur(5px);
               border: 1px solid rgba(255, 255, 255, 0.3);
               padding: 2rem;
-              width: 50%;
             `}
           >
             <h1
@@ -56,77 +58,86 @@ const HomePage = ({ data }: PageProps<DataProps>) => {
                 gap: 4rem;
               `}
             >
-              {data.allMdx.nodes.map((node) => (
-                <Link
-                  to={`/posts/${node.frontmatter.slug}`}
-                  key={node.id}
-                  css={css`
-                    display: flex;
-                    gap: 2rem;
-                  `}
-                >
-                  <GatsbyImage
-                    image={getImage(node.frontmatter.thumbnail_image)}
-                    alt={node.frontmatter.thumbnail_image_alt}
+              {data.allMdx.nodes.map((node) => {
+                const image = getImage(node.frontmatter.thumbnail_image);
+                return (
+                  <Link
+                    to={`/posts/${node.frontmatter.slug}`}
+                    key={node.id}
                     css={css`
-                      flex-shrink: 0;
-                      border-radius: 10px;
-                      box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
-                        rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
+                      display: flex;
+                      @media (max-width: 550px) {
+                        flex-direction: column;
+                      }
+                      gap: 2rem;
                     `}
-                  />
-                  <div>
-                    <p
-                      css={css`
-                        color: gray;
-                        font-size: 1.2rem;
-                        margin: 0;
-                      `}
-                    >
-                      {node.frontmatter.date}
-                    </p>
+                  >
+                    {image && (
+                      <GatsbyImage
+                        image={image}
+                        alt={node.frontmatter.thumbnail_image_alt}
+                        css={css`
+                          border-radius: 10px;
+                          box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
+                            rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
+                        `}
+                      />
+                    )}
+                    <div>
+                      <p
+                        css={css`
+                          color: gray;
+                          font-size: 1.2rem;
+                          margin: 0;
+                        `}
+                      >
+                        {node.frontmatter.date}
+                      </p>
 
-                    <div
-                      css={css`
-                        display: flex;
-                        gap: 1rem;
-                        margin-top: 1rem;
-                      `}
-                    >
-                      {node.frontmatter.tags?.split(" ").map((tag: string) => (
-                        <span
-                          key={tag}
-                          css={css`
-                            font-size: 1.4rem;
-                            color: #7c93c3;
-                            background-color: #eef5ff;
-                            padding: 0.4rem;
-                            border-radius: 10px;
-                          `}
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
+                      <div
+                        css={css`
+                          display: flex;
+                          gap: 1rem;
+                          margin-top: 1rem;
+                        `}
+                      >
+                        {node.frontmatter.tags
+                          ?.split(" ")
+                          .map((tag: string) => (
+                            <span
+                              key={tag}
+                              css={css`
+                                font-size: 1.4rem;
+                                color: #7c93c3;
+                                background-color: #eef5ff;
+                                padding: 0.4rem;
+                                border-radius: 10px;
+                              `}
+                            >
+                              {tag}
+                            </span>
+                          ))}
+                      </div>
 
-                    <h2
-                      css={css`
-                        color: black;
-                      `}
-                    >
-                      {node.frontmatter.title}
-                    </h2>
-                    <p
-                      css={css`
-                        font-size: "1.8rem";
-                        color: black;
-                      `}
-                    >
-                      {node.frontmatter.subtitle}
-                    </p>
-                  </div>
-                </Link>
-              ))}
+                      <h2
+                        css={css`
+                          color: black;
+                        `}
+                      >
+                        {node.frontmatter.title}
+                      </h2>
+                      <p
+                        css={css`
+                          font-size: "1.8rem";
+                          color: black;
+                        `}
+                      >
+                        {node.frontmatter.subtitle}
+                      </p>
+                    </div>
+                  </Link>
+                );
+              })}
             </div>
           </div>
 
@@ -139,7 +150,6 @@ const HomePage = ({ data }: PageProps<DataProps>) => {
               -webkit-backdrop-filter: blur(5px);
               border: 1px solid rgba(255, 255, 255, 0.3);
               padding: 2rem;
-              width: 50%;
               text-align: center;
             `}
           >
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ node_modules/ @@
     .cache/
     public
     src/gatsby-types.d.ts
-    .env
+    .env
+    .DS_Store