feat: astro update && lit migration

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

package.json

@@ -12,11 +12,11 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/lit": "^4.3.0",
-    "@astrojs/mdx": "^3.1.9",
-    "@astrojs/react": "^3.6.2",
-    "@astrojs/rss": "^4.0.9",
+    "@astrojs/mdx": "^4.0.3",
+    "@astrojs/react": "^4.1.2",
+    "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.2",
+    "@astrojs/tailwind": "^5.1.4",
     "@lit-labs/ssr": "^3.2.2",
     "@lit-labs/ssr-client": "^1.1.7",
     "@lit/task": "^1.0.0",
@@ -25,7 +25,7 @@
     "@react-three/fiber": "^8.16.8",
     "@react-three/rapier": "^1.3.1",
     "@webcomponents/template-shadowroot": "^0.2.1",
-    "astro": "^4.16.10",
+    "astro": "^5.1.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.3.8",
     "fs-extra": "^11.1.1",
@@ -60,5 +60,5 @@
     "prettier-plugin-astro": "^0.13.0",
     "typescript": "^5.4.5"
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.6.0"
 }

src/content/blog/2024_1분기.mdx

@@ -187,7 +187,7 @@ next 14로 된 프로젝트 위에 얹으면서 서버 컴포넌트와 아주 
 랩터 엔진도 3세대 까지 나왔다. 이미지만 봐도 엄청 보기에 심플해졌다. 일론이 언급하기로도 보기엔 심플해보이지만 실제로도 많은 것을 단순화 하였다고 한다.\
 그만큼 complexity가 숨겨져 있다고 한다. 그러기 위해 heat shield도 제거하고 기능들을 내부로 넣었다고 한다.
 
-<YouTube src="https://youtu.be/t705r8ICkRw" />
+<youtube-element src="https://youtu.be/t705r8ICkRw" />
 21년 당시 인터뷰.
 
 평소 말하던 엔지니어링 원칙이 잘 들어나는 사례라고 생각한다. 

src/content/blog/Axios 요청을 Cancel해보자 [1].mdx

@@ -9,7 +9,7 @@ categories: ["axios"]
 
 import { YouTube } from '../../components/lit/youtube-element';
 
-<YouTube src="https://youtu.be/K1pBEpFMDuY?si=m3eoY_QgiaANQGd5" />
+<youtube-element src="https://youtu.be/K1pBEpFMDuY?si=m3eoY_QgiaANQGd5" />
 
 ## Axios 요청을 Cancel해보자
 

src/content/blog/Axios 요청을 Cancel해보자 [2].mdx

@@ -9,7 +9,7 @@ categories: ["axios"]
 
 import { YouTube } from '../../components/lit/youtube-element';
 
-<YouTube src="https://youtu.be/AKflm82wVLk?si=i0Gx3DLVGIUpIS5b" />
+<youtube-element src="https://youtu.be/AKflm82wVLk?si=i0Gx3DLVGIUpIS5b" />
 
 ## Axios 요청을 Cancel해보자 [2]
 

src/content/blog/HTML element attributes 에 대해 알아보자.mdx

@@ -10,7 +10,7 @@ heroImage: "/blog-placeholder-3.jpg"
 import { YouTube } from '../../components/lit/youtube-element';
 
 
-<YouTube src="https://youtu.be/z2q1Hs_Ok24?si=CGN522KjVXSTZhVS&t=172" />
+<youtube-element src="https://youtu.be/z2q1Hs_Ok24?si=CGN522KjVXSTZhVS&t=172" />
 
 요 발표의 내용의 일부를 보충해서 정리해보았다.
 

src/content/blog/React_Compiler_3.mdx

@@ -361,7 +361,7 @@ bb1 (block):
 
 Detach!
 
-<YouTube src="https://youtu.be/_GdEsdEfZvc?t=154" />
+<youtube-element src="https://youtu.be/_GdEsdEfZvc?t=154" />
 
 
 ## 다시 lower 함수로

src/content/blog/React_Compiler_4.mdx

@@ -10,7 +10,7 @@ heroImage: "/post/images/ReactCompiler4/thumb.png"
 import LinkPreview from '@components/LinkPreview.astro'
 import  { YouTube } from "@components/lit/youtube-element"
 
-<YouTube src="https://youtu.be/HwRcz-Yu29I" />
+<youtube-element src="https://youtu.be/HwRcz-Yu29I" />
 
 
 ## 이전이야기

src/content/blog/en/React_Compiler_3.mdx

@@ -362,7 +362,7 @@ Therefore, you can move on to the next part right away.
 
 Detach!
 
-<YouTube src="https://youtu.be/_GdEsdEfZvc?t=154" />
+<youtube-element src="https://youtu.be/_GdEsdEfZvc?t=154" />
 
 
 ## Back to the lower function

src/content/blog/en/React_Compiler_4.mdx

@@ -10,7 +10,7 @@ heroImage: "/post/images/ReactCompiler4/en/thumb.png"
 import LinkPreview from '@components/LinkPreview.astro'
 import  { YouTube } from "@components/lit/youtube-element"
 
-<YouTube src="https://youtu.be/HwRcz-Yu29I" />
+<youtube-element src="https://youtu.be/HwRcz-Yu29I" />
 
 
 ## Previously

src/content/blog/quantum_computing.mdx

@@ -62,7 +62,7 @@ Q#에 관한 자료도 많긴 하지만 IBM이 양자컴퓨팅이나 Qiskit관
 
 
 
-<YouTube src="https://youtu.be/Qndz54SGCAs?si=fkfGZjSjistMuP08"/>
+<youtube-element src="https://youtu.be/Qndz54SGCAs?si=fkfGZjSjistMuP08"/>
 
 
 

src/content/blog/내가 궁금한 것들에 대한 기록.mdx

@@ -9,7 +9,7 @@ categories: ["style"]
 
 import { YouTube } from '../../components/lit/youtube-element';
 
-<YouTube src="https://youtu.be/nrBMcHCQ_5k?si=SqSg46gGiKSX6leg" />
+<youtube-element src="https://youtu.be/nrBMcHCQ_5k?si=SqSg46gGiKSX6leg" />
 
 ## 맘스터치 매콤 김떡만
 

src/content/blog/단순함이_가장_어려운것.mdx

@@ -35,7 +35,7 @@ import  { YouTube } from "../../components/lit/youtube-element"
 영상에서 소개되었듯이 랩터 엔진도 3세대 까지 나왔다. 이미지만 봐도 엄청 보기에 심플해졌다. 일론이 언급하기로도 겉보기에 심플해보이지만 실제로도 많은 것을 단순화 하였다고 한다.\
 그만큼 complexity가 숨겨져 있다고 한다. 그러기 위해 heat shield도 제거하고 기능들을 내부로 통합하였다고 한다.
 
-<YouTube src="https://youtu.be/t705r8ICkRw?si=WFw_15A-noLqfqVw&t=810" />
+<youtube-element src="https://youtu.be/t705r8ICkRw?si=WFw_15A-noLqfqVw&t=810" />
 21년 당시 인터뷰.
 
 평소 말하던 엔지니어링 원칙이 잘 들어나는 사례라고 생각한다. 

src/content/blog/붕어빵.mdx

@@ -150,6 +150,6 @@ export class YouTube extends FigureElement {
 
 
 
-<YouTube src="https://youtu.be/-om5KeRqfq4?si=H-PkLgafhbh2wIgC" 
+<youtube-element src="https://youtu.be/-om5KeRqfq4?si=H-PkLgafhbh2wIgC" 
   caption="Creep - Radiohead"
 />

src/content/blog/블로그.mdx

@@ -5,12 +5,10 @@ author: "Yongseok"
 pubDate: "Jan 14 2024"
 date: "2024-01-14"
 categories: ["blog"]
----
 
-import { ThumbnailElement } from '../../components/thumbnail-element';
-import { YouTube } from '../../components/lit/youtube-element';
+---
 
-<ThumbnailElement client:only="lit" />
+<thumbnail-element />
 
 # Astro 4.0
 
@@ -32,7 +30,7 @@ import { YouTube } from '../../components/lit/youtube-element';
 # Lit
 
 애증의 Lit. 가랑비에도 덜덜 떨고 있는 강아지 마냥 느껴져 컴포넌트 하나 만들어 보냈다.
-<YouTube src="https://youtu.be/Yis6ZXu-9pY" client:only="lit" ></YouTube>
+<youtube-element src="https://youtu.be/Yis6ZXu-9pY" ></youtube-element>
 겨울 답지 않게 비가 내리던 날과 같이 듣던 노래. <br/>
 세상 참.. 기술의 발전으로 집에서 짐레이너의 노래를 들을 수 있다니. 경험의 영역이 넓어지는 것 같다.
 
@@ -41,7 +39,7 @@ import { YouTube } from '../../components/lit/youtube-element';
 컴포넌트 사용법은 아래와 같다.
 
 ```mdx
-<YouTube src="https://youtu.be/Yis6ZXu-9pY" ></YouTube>
+<youtube-element src="https://youtu.be/Yis6ZXu-9pY" ></youtube-element>
 ```
 [코드는 여기](https://github.com/yongsk0066/yongsk0066.github.io/blob/main/src/components/lit/youtube/youtube-element.ts)
 

src/content/blog/블로그의 미래.mdx

@@ -9,7 +9,7 @@ categories: ["blog"]
 
 import { YouTube } from '../../components/lit/youtube-element';
 
-<YouTube src="https://youtu.be/rO6bLlYrBXE?si=_sNICtB3wGYpBpom" />
+<youtube-element src="https://youtu.be/rO6bLlYrBXE?si=_sNICtB3wGYpBpom" />
 
 ## 블로그의 미래
 

src/content/blog/서버에서 styled 컴포넌트 사용하기(부제 : React.cache).mdx

@@ -12,7 +12,7 @@ import { YouTube } from '../../components/lit/youtube-element';
 > 제목은 이런데, 사실 찐 styled-components를 사용하는 내용은 아니다.
 
 
-<YouTube src="https://youtu.be/eF7mP_Qq9ck?si=Cv1wQ70glhd0IT1v" />
+<youtube-element src="https://youtu.be/eF7mP_Qq9ck?si=Cv1wQ70glhd0IT1v" />
 
 ## dream-css-tool
 [dream-css-tool](https://github.com/joshwcomeau/dream-css-tool)라는 시도를 하고 계신 분을 발견했다.

src/content/blog/스발바르_1.mdx

@@ -28,7 +28,7 @@ import { GoogleMap } from '../../components/lit/google-map-element';
 주말 아침에 점호 하고나면 모두가 아직 자고 있었다. 커튼은 다 내려져 방은 어둡고, 점호를 하고온 나는 잠이 오지 않아 혼자 EBS 세계테마기행을 보곤 했다.
 아마 이때 쯤 스발바르에 대한 에피소드를 본 것 같다.
 
-<YouTube src="https://youtu.be/jghe7AeaDOM?si=A37eNqjBSoyOMvnD" caption="아마 이 영상일 것이다" client:only="lit"></YouTube>
+<youtube-element src="https://youtu.be/jghe7AeaDOM?si=A37eNqjBSoyOMvnD" caption="아마 이 영상일 것이다" client:only="lit"></youtube-element>
 
 큰 이유는 없었지만, 그때부터 스발바르에 대한 동경이 생겼다.<br/>
 그 뒤로 벌써 한 6년 정도 흘렀다. 마침 리멤버에서도 3년. 리프레시 휴가가 나오는 2024년.
@@ -38,7 +38,7 @@ import { GoogleMap } from '../../components/lit/google-map-element';
 
 ## 언제가 좋을까?
 
-<YouTube src="https://youtu.be/cgZCC4uf-RY?si=ke_Iy2pKVl2k7S-c" client:only="lit" ></YouTube>
+<youtube-element src="https://youtu.be/cgZCC4uf-RY?si=ke_Iy2pKVl2k7S-c"  ></youtube-element>
 
 스발바르의 수도 `롱위에아르비엔(longyearbyen)`에 대해 찾다가 나온 스발바르 인플루언서(?)의 영상이다.<br/>
 스발바르에서의 1년이 다 담겨있는 영상인데, 1년 중에 언제를 보고 싶을지 정할 때 다시한번 참고해보자.

src/content/blog/어떻게 문제를 풀 것인가.mdx

@@ -113,4 +113,4 @@ AI는 예술 작품을 일종의 정사영처럼 보이는 표면적인 픽셀
 책을 읽다보면, 대부분의 내용들은 '당연하지..'라는 생각들이 든다. 하지만 당연한 것들이라고 해서 우리가 행동하고 있는 것은 아니다.
 그것을 다시 한번 상기시키는 것이 중요하다고 생각한다.
 
-<YouTube src="https://youtu.be/YyOn5Djx_0I?si=LfL_DhnTggUGvAQU" />
+<youtube-element src="https://youtu.be/YyOn5Djx_0I?si=LfL_DhnTggUGvAQU" />

src/content/blog/여가활동 [1].mdx

@@ -15,7 +15,7 @@ import { AsciiElement } from '../../components/lit/asciiScreen/ascii-element';
 
 [미드저니 랜딩페이지](https://www.midjourney.com/home)가 너무 맘에들어서 무슨 라이브러리 썼나 찾아보다가. 클로닝한 영상을 찾게되었다.
 
-<YouTube src="https://youtu.be/YCJgQI71jEE?si=KOp-YtU2n-yCZR8z" />
+<youtube-element src="https://youtu.be/YCJgQI71jEE?si=KOp-YtU2n-yCZR8z" />
 
 이분 작업을 보니깐 코드양이 그리 많지는 않아서, 나도 한번 클로닝을 해보았다.
 
@@ -28,7 +28,7 @@ import { AsciiElement } from '../../components/lit/asciiScreen/ascii-element';
 
 <AsciiElement 
   transforms={[]}
-  client:only="lit"/>
+  />
 
 ### 미드저니 스타일 spiral
 
@@ -39,7 +39,7 @@ import { AsciiElement } from '../../components/lit/asciiScreen/ascii-element';
 
 <AsciiElement 
   transforms={['spiral']}
-  client:only="lit"/>
+  />
 
 ### spiral -> zoom -> wave
 
@@ -50,14 +50,14 @@ import { AsciiElement } from '../../components/lit/asciiScreen/ascii-element';
 
 <AsciiElement 
   transforms={['spiral', 'zoom', 'wave']}
-  client:only="lit"/>
+  />
 
 
 ### 기다리다 보면 은하 모양이됨
 
 <AsciiElement 
   transforms={['hurricane', 'spiral']}
-  client:only="lit"/>
+  />
 
 
 

src/content/wip/ascii 스크린 만들기.mdx

@@ -10,6 +10,6 @@ heroImage: "/blog-placeholder-4.jpg"
 import { YouTube } from '../../components/lit/youtube-element';
 
 
-<YouTube src="https://youtu.be/AKflm82wVLk?si=i0Gx3DLVGIUpIS5b" />
+<youtube-element src="https://youtu.be/AKflm82wVLk?si=i0Gx3DLVGIUpIS5b" />
 
 

src/pages/blog/[...slug].astro

@@ -43,6 +43,10 @@ const { Content } = await post.render();
 const t = useTranslations(currentLocale as any);
 ---
 
+<script>
+  import "../../components/thumbnail-element";
+  import "../../components/lit/youtube-element";
+</script>
 <PageLayout
   title={post.data.title}
   description={post.data.description ?? ""}

src/pages/index.astro

@@ -1,24 +1,27 @@
 ---
 import PageLayout from "@layouts/PageLayout.astro";
 import BaseHead from "../components/BaseHead.astro";
-import { HomeCoverElement } from "../components/lit/asciiScreen/home-cover-element";
 import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
 ---
 
-<!doctype html>
 <html lang="ko">
-  <head>
-    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-    <style>
-      main {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-  </head>
+  <script>
+    import "../components/lit/asciiScreen/home-cover-element";
+    import "../components/thumbnail-element";
+    import "../components/lit/youtube-element";
+  </script>
+
+  <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  <style>
+    main {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
   <body>
     <!-- Google Tag Manager (noscript) -->
     <noscript
@@ -32,8 +35,7 @@ import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
     <!-- <Header title={SITE_TITLE} /> -->
     <PageLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
       <div class="mx-auto animate-expand px-8 max-sm:px-4 max-sm:-mt-8">
-        <!-- <SolarSystem client:only="react" /> -->
-        <HomeCoverElement client:only="lit" />
+        <home-cover-element></home-cover-element>
       </div>
     </PageLayout>
   </body>