메인 페이지에 최신글 추가

astro.config.mjs

@@ -17,6 +17,7 @@ export default defineConfig({
 			favicon: 'favicon.png',
 			social: {
 				github: 'https://github.com/rlaisqls',
+				linkedin: 'https://www.linkedin.com/in/%EC%9D%80%EB%B9%88-%EA%B9%80-248452250/',
 			},
 			components: {
 				Sidebar: './src/components/Sidebar.astro',

src/components/Footer.astro

@@ -41,48 +41,82 @@ const allDocuments = flatten(Astro.props.sidebar)
 const currentIndex = allDocuments
     .findIndex((e) => Astro.props.entry.data.title === e.label)
 const documents = getSurroundingElements(allDocuments, currentIndex)
-
 const getParentFolder = (fullPath) => fullPath.split('/').reverse()[2]
 ---
 
+<!--<script>-->
+<!--    const encodedPath = encodeURIComponent(window.location.pathname);-->
+<!--    let pageViews-->
+<!--    try {-->
+<!--        const response = await fetch(`/api/pageViews?path=${encodedPath}`, {-->
+<!--            method: 'GET',-->
+<!--            headers: {-->
+<!--                'Content-Type': 'application/json',-->
+<!--            },-->
+<!--        });-->
+<!--        if (!response.ok) {-->
+<!--            pageViews = 1;-->
+<!--        } else {-->
+<!--            const { count } = await response.json();-->
+<!--            pageViews = Number(count) + 1;-->
+<!--        }-->
+<!--    } catch (err) {-->
+<!--        pageViews = 1;-->
+<!--    }-->
+
+<!--    fetch('/api/pageViews', {-->
+<!--        method: 'PUT',-->
+<!--        referrerPolicy: 'same-origin',-->
+<!--        body: JSON.stringify({-->
+<!--            path: encodedPath,-->
+<!--        }),-->
+<!--        headers: {-->
+<!--            'Content-Type': 'application/json',-->
+<!--        },-->
+<!--    });-->
+<!--</script>-->
+
+
 {
     currentIndex != -1 &&
-    <div class="mt-[75px]">
-        <span>관련글</span>
-        <div class="line"/>
-        {
-            documents.map((entry) => (
-                    <a
-                            class="links"
-                            href={entry.href}
-                            {...entry.attrs}
-                    >
-                        <span style="color: var(--sl-color-gray-4)">{getParentFolder(entry.href)} </span>
-                        <span>{entry.label}</span>
-                    </a>
-            ))
-        }
-    </div>
-    <script src="https://giscus.app/client.js"
-            data-repo="rlaisqls/blog-comments"
-            data-repo-id="R_kgDOLbAcAA"
-            data-category="Announcements"
-            data-category-id="DIC_kwDOLbAcAM4Cdrwc"
-            data-mapping="pathname"
-            data-strict="0"
-            data-reactions-enabled="1"
-            data-emit-metadata="0"
-            data-input-position="top"
-            data-theme="noborder_dark"
-            data-lang="ko"
-            crossorigin="anonymous"
-            async>
-    </script>
-    <script>
-        document.querySelector('script[data-repo="rlaisqls/blog-comments"]').dataset.theme =
-            document.documentElement.dataset.theme === 'light' ? 'noborder_light' : 'noborder_dark'
-    </script>
-    }
+    <>
+        <div class="mt-[75px]">
+            <span>관련글</span>
+            <div class="line"/>
+            {
+                documents.map((entry) => (
+                        <a
+                                class="links"
+                                href={entry.href}
+                                {...entry.attrs}
+                        >
+                            <span style="color: var(--sl-color-gray-4)">{getParentFolder(entry.href)} </span>
+                            <span>{entry.label}</span>
+                        </a>
+                ))
+            }
+        </div>
+        <script src="https://giscus.app/client.js"
+                data-repo="rlaisqls/blog-comments"
+                data-repo-id="R_kgDOLbAcAA"
+                data-category="Announcements"
+                data-category-id="DIC_kwDOLbAcAM4Cdrwc"
+                data-mapping="pathname"
+                data-strict="0"
+                data-reactions-enabled="1"
+                data-emit-metadata="0"
+                data-input-position="top"
+                data-theme="noborder_dark"
+                data-lang="ko"
+                crossorigin="anonymous"
+                async>
+        </script>
+        <script>
+            document.querySelector('script[data-repo="rlaisqls/blog-comments"]').dataset.theme =
+                document.documentElement.dataset.theme === 'light' ? 'noborder_light' : 'noborder_dark'
+        </script>
+    </>
+}
 
 <style>
     .line {

src/components/FormattedDate.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+	date: Date;
+}
+
+const { date } = Astro.props;
+---
+
+<time datetime={date?.toISOString()}>
+	{
+		date?.toLocaleDateString('ko', {
+			year: 'numeric',
+			month: 'numeric',
+			day: 'numeric',
+		})
+	}
+</time>

src/components/RecentPosts.astro

@@ -0,0 +1,76 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import FormattedDate from "./FormattedDate.astro";
+
+export type StarlightDocsEntry = Omit<CollectionEntry<"docs">, "slug"> & {
+  slug: string;
+};
+const docs: StarlightDocsEntry[] = ((await getCollection("docs")) ?? [])
+  .filter((d) => d.data.lastUpdated)
+  .sort((a, b) => b.data.lastUpdated - a.data.lastUpdated)
+  .slice(0, 7);
+
+console.log(docs);
+
+const getParentFolder = (fullPath) => fullPath.split("/").reverse()[1];
+---
+
+<>
+  <div class="mt-[75px]">
+    <span>최신글</span>
+    <div class="line"></div>
+    <div class="flex flex-col gap-3">
+      {
+        docs.map((post) => {
+          let content = post.body
+            .replace(/>\s|#|-|import.*?;|<[^>]*>?/g, "")
+            .slice(0, 200)
+            .replace(/\`\`\`/g, "")
+            .replace(/https:\/\/\S+/g, "")
+            .replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1");
+
+          function convertToCodeTag(content: string) {
+            const regex = /\`([^\`]+)\`/g;
+            const parts = [];
+            let lastIndex = 0;
+            content.replace(regex, (match, p1, offset) => {
+              parts.push(content.slice(lastIndex, offset));
+              parts.push(<code>{p1}</code>);
+              lastIndex = offset + match.length;
+            });
+            parts.push(content.slice(lastIndex));
+            return parts;
+          }
+          return (
+            <div>
+              <a class="no-underline" href={`/${post.slug}/`}>
+                <div class="flex flex-row gap-2">
+                  <span class="text-lg title font-bold">{post.data.title}</span>
+                  <div
+                    style="background-color: var(--sl-color-gray-4)"
+                    class="w-[1px] h-[20px] my-auto"
+                  />
+                  <span style="color: var(--sl-color-gray-3)">
+                    {getParentFolder(post.slug)}{" "}
+                  </span>
+                </div>
+                <FormattedDate date={post.data.lastUpdated} />
+                <span class="line-clamp-2 overflow-hidden bg-blue m-0 btext-ellipsis">
+                  {convertToCodeTag(content)}
+                </span>
+              </a>
+            </div>
+          );
+        })
+      }
+    </div>
+  </div>
+</>
+
+<style>
+  .line {
+    margin-top: 0.5rem;
+    height: 0.07rem;
+    background: var(--sl-color-gray-3);
+  }
+</style>

src/content/docs/index.mdx

@@ -1,9 +1,30 @@
 ---
 title: 김은빈
-description: Get started building your docs site with Starlight.
+description: 글이나 코드를 읽고 짜는 걸 좋아합니다. 글과 코드를 쓸 때는 무엇을 어떻게 표현할지 끊임없이 고민해야 하고, 완성도를 높이기 위해 많은 공부가 필요합니다. 글과 코드를 읽을 때에도 텍스트 사이의 구조와 의미를 파악하는 것이 똑같이 핵심이 됩니다. 앞으로도 많이 읽고 쓰고 배우고 생각하면서 살고 싶습니다. 그리고 그걸 다른 사람과 나눌 수 있다면 더욱 행복할 것 같습니다. 저는 서투른 부분이 많고, 제가 모르고 있는 부족한 점도 아직 더 있는데요. 누구나 그렇듯이 더 나은 사람이 되기 위해 고민하면서 살고 있습니다. 그리고 그 과정에서 배우고 느끼는 점을 이곳에 기록하고 있습니다.
 ---
 
-안녕하세요 :) 김은빈입니다.
+import RecentPosts from '../../components/RecentPosts.astro';
 
-누구나 그렇듯이 더 나은 사람이 되기 위해서 항상 고민하고 있습니다. <br/>
-그리고 그 과정에서 배우고 느끼는 점을 기록하고 있습니다.
+안녕하세요 :) 김은빈입니다. <br/>
+지금은 대덕SW마이스터고등학교 3학년으로 재학하면서 데브옵스를 공부하고 있는 학생입니다.
+
+
+글이나 코드를 읽고 짜는 걸 좋아합니다. <br/>
+목적성을 가지고 구조적인 텍스트를 작성한다는 점이 비슷한 것 같아요.<br/>
+
+글과 코드를 쓸 때는 무엇을 어떻게 표현할지 끊임없이 고민해야 하고, 완성도를 높이기 위해 많은 공부가 필요합니다. 글과 코드를 읽을 때에도 텍스트 사이의 구조와 의미를 파악하는 것이 똑같이 핵심이 됩니다.
+
+저에게는 그 과정이 너무 재밌는 것 같습니다. <br/>
+앞으로도 많이 읽고 쓰고 배우고 생각하면서 살고 싶습니다. <br/>
+그리고 그걸 다른 사람과 나눌 수 있다면 더욱 행복할 것 같습니다.
+
+저는 서투른 부분이 많고, 제가 모르고 있는 부족한 점도 아직 더 있는데요. <br/>
+누구나 그렇듯이 더 나은 사람이 되기 위해 열심히 고민하고 있습니다. <br/>
+그리고 그 과정에서 배우고 느끼는 점을 이곳에 기록하고 있습니다.
+
+들러주셔서 감사합니다.  <br/>
+좋은 하루 보내세요 :)
+
+<div class="h-16"/>
+
+<RecentPosts/>

src/content/docs/thoughts/생각들/about-retrospect.md

@@ -1,6 +1,6 @@
 ---
 title: 비구조적인 회고에 대하여
-lastUpdated: 2024-12-03T08:47:16
+lastUpdated: 2023-12-03T08:47:16
 ---
 
 이 블로그에 작성하는 회고는 정말 구조 없이 주절주절 쓰는 글이다. 다른 분들이 작성하시는 회고에 비해서 가독성이 떨어지고 결론이 뭔지 알아보기 어렵다는 것을 알고 있다. 효율적으로 회고하기 위해선 회고로부터 깔끔한 느낀 점과 개선 계획이 나와야 한다는 것 또한 알고 있다.

tailwind.config.mjs

@@ -7,7 +7,19 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-				accent: colors.gray,
+				accent: {
+				  '50': '#ffffff',
+				  '100': '#ffffff',
+				  '200': '#ffffff',
+				  '300': '#ffffff',
+				  '400': '#ffffff',
+				  '500': '#000000',
+				  '600': '#000000',
+				  '700': '#000000',
+				  '800': '#000000',
+				  '900': '#000000',
+				  '950': '#000000'
+				},
 				gray: colors.zinc,
 			},
 		},