Merge pull request #1 from yongsk0066/test/newTheme

새 테마 적용

package.json

@@ -21,22 +21,28 @@
     "@lit-labs/ssr-client": "^1.1.7",
     "@lit/task": "^1.0.0",
     "@mermaid-js/mermaid-cli": "^10.8.0",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@react-three/drei": "^9.105.5",
+    "@react-three/fiber": "^8.16.3",
+    "@react-three/rapier": "^1.3.1",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "astro": "4.7.0",
+    "clsx": "^2.1.1",
     "fs-extra": "^11.1.1",
     "jsdom": "^24.0.0",
     "lit": "^3.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "meshline": "^3.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rehype-katex": "^7.0.0",
     "rehype-mathjax": "^6.0.0",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.1",
-    "three": "^0.160.0",
+    "three": "^0.164.1",
     "to-vfile": "^8.0.0",
     "unified": "^11.0.3",
     "unist-util-visit": "^5.0.0",
@@ -47,10 +53,10 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
     "@types/jsdom": "^21.1.6",
-    "@types/three": "^0.160.0",
+    "@types/three": "^0.164.0",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.5"
   },
   "packageManager": "[email protected]"
 }

src/components/LinkPreview.astro

@@ -18,103 +18,53 @@ const image = document
   ?.getAttribute("content");
 ---
 
-<a class="link-preview" href={src} target="_blank" rel="noopener noreferrer">
-  <div class="info">
-    <h3>{title}</h3>
-    <p>{description}</p>
-    <span>{src}</span>
+<a
+  class="link-preview group/item
+  bg-white dark:bg-zinc-800 text-black/50 dark:text-white/75
+  border border-black/15 dark:border-white/20
+  rounded-md overflow-hidden max-h-40 mb-4
+  hover:-translate-y-2 transition-transform duration-200 ease-in-out
+    hover:shadow-lg"
+  href={src}
+  target="_blank"
+  rel="noopener noreferrer"
+>
+  <div class="p-4 h-auto box-border">
+    <h3
+      class="m-0 line-clamp-2 whitespace-normal break-all text-base text-semibold"
+    >
+      {title}
+    </h3>
+    <p
+      class="text-black/50 dark:text-white/75
+    text-sm line-clamp-2 whitespace-normal break-all"
+    >
+      {description}
+    </p>
+    <span class="text-xs line-clamp-1">{src}</span>
   </div>
-  {image && <img class="link-image" src={image} alt={title} />}
+  {
+    image && (
+      <div class="overflow-hidden">
+        <img
+          class="object-cover h-full max-h-40 w-full object-center
+        group-hover/item:scale-110 transition-transform duration-200 ease-in-out
+        "
+          src={image}
+          alt={title}
+        />
+      </div>
+    )
+  }
 </a>
 <style>
   .link-preview {
     display: grid;
-    grid-template-columns: 80% auto;
-    height: 180px;
-    max-height: 180px;
-    overflow: hidden;
-    box-sizing: border-box;
-    padding: 1em;
-    border-radius: 0.5em;
+    grid-template-columns: 70% auto;
     text-decoration: none;
-    border: 1px solid rgb(var(--gray-light));
     column-gap: 1em;
-    margin: 1em 0 2em;
-    font-size: 16px;
-    background-color: white;
-
-    @media (max-width: 768px) {
-      height: 120px;
-      max-height: 120px;
-      padding: 0.5em;
-      margin: 0.5em 0 1em;
-      font-size: 12px;
-    }
   }
-
-  .link-preview:hover {
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    color: black;
-  }
-
-  .info {
-    display: flex;
-    flex-direction: column;
-    padding-right: 1em;
-    border-right: 1px solid rgb(var(--gray-light));
-  }
-
   .link-preview:not(:has(img)) {
     grid-template-columns: 1fr;
   }
-  .link-preview:not(:has(img)) > .info {
-    border-right: none;
-  }
-  .info h3 {
-    margin: 0;
-    font-size: 1.2em;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    @media (max-width: 768px) {
-      font-size: 1em;
-    }
-  }
-
-  .info p {
-    margin: 0;
-    color: rgb(var(--gray-dark));
-    font-size: 0.9em;
-    height: fit-content;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    @media (max-width: 768px) {
-      font-size: 0.8em;
-    }
-  }
-
-  .info span {
-    color: rgb(var(--gray));
-    font-size: 0.7em;
-    margin-top: auto;
-
-    @media (max-width: 768px) {
-      font-size: 0.6em;
-    }
-  }
-
-  .link-image {
-    object-fit: cover;
-    margin: 0;
-    width: -webkit-fill-available;
-    max-height: calc(180px - 2em);
-    border-radius: 0.25em;
-  }
 </style>

src/components/Nano/ArrowCard.astro

@@ -0,0 +1,45 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+type Props = {
+  entry: CollectionEntry<"blog">;
+};
+
+const { entry } = Astro.props;
+---
+
+<a
+  href={`/${entry.collection}/${entry.slug}`}
+  class="relative group flex flex-nowrap py-3 pr-10 rounded-lg hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out antialiased"
+>
+  <div class="flex flex-col flex-1 truncate">
+    <div
+      class="font-bold text-zinc-600 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 ease-in-out"
+    >
+      {entry.data.title}
+    </div>
+    <div class="text-sm line-clamp-2 whitespace-normal break-all text-semibold">
+      {entry.data.description}
+    </div>
+    <!-- <div class="text-xs text-gray-500 dark:text-gray-400">
+      {entry.data.date}
+    </div> -->
+  </div>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class="absolute top-1/2 right-2 -translate-y-1/2 size-5 stroke-2 fill-none stroke-current"
+  >
+    <line
+      x1="5"
+      y1="12"
+      x2="19"
+      y2="12"
+      class="translate-x-3 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"
+    ></line>
+    <polyline
+      points="12 5 19 12 12 19"
+      class="-translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"
+    ></polyline>
+  </svg>
+</a>

src/components/Nano/BackToPrev.astro

@@ -0,0 +1,20 @@
+---
+type Props = {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<a href={href} class="relative group w-fit flex pl-7 pr-3 py-1.5 flex-nowrap rounded border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24"
+    class="absolute top-1/2 left-2 -translate-y-1/2 size-4 stroke-2 fill-none stroke-current">
+    <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out" />
+    <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out" />
+  </svg>
+  <div class="text-sm">
+    <slot/>
+  </div>
+</a>

src/components/Nano/BackToTop.astro

@@ -0,0 +1,23 @@
+<button
+  id="back-to-top"
+  class="relative group w-fit flex pl-8 pr-3 py-1.5 flex-nowrap rounded border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class="absolute top-1/2 left-2 -translate-y-1/2 size-4 stroke-2 fill-none stroke-current rotate-90"
+  >
+    <line
+      x1="5"
+      y1="12"
+      x2="19"
+      y2="12"
+      class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"
+    ></line>
+    <polyline
+      points="12 5 5 12 12 19"
+      class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"
+    ></polyline>
+  </svg>
+  <div class="text-sm">위로 올라가요</div>
+</button>

src/components/Nano/Container.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="mx-auto max-w-screen-md px-5">
+  <slot />
+</div>

src/components/Nano/Footer.astro

@@ -0,0 +1,91 @@
+---
+import Container from "./Container.astro";
+import BackToTop from "./BackToTop.astro";
+---
+
+<footer class="animate">
+  <Container>
+    <div class="relative">
+      <div class="absolute right-0 -top-20">
+        <BackToTop />
+      </div>
+    </div>
+    <div class="flex justify-between items-center">
+      <div>
+        &copy; 2024 {`|`} 장용석 블로그
+      </div>
+      <div class="flex flex-wrap gap-1 items-center">
+        <button
+          id="light-theme-button"
+          aria-label="Light theme"
+          class="group size-8 flex items-center justify-center rounded-full"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="group-hover:stroke-black group-hover:dark:stroke-white transition-colors duration-300 ease-in-out"
+          >
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+        </button>
+        <button
+          id="dark-theme-button"
+          aria-label="Dark theme"
+          class="group size-8 flex items-center justify-center rounded-full"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="group-hover:stroke-black group-hover:dark:stroke-white transition-colors duration-300 ease-in-out"
+          >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        </button>
+        <button
+          id="system-theme-button"
+          aria-label="System theme"
+          class="group size-8 flex items-center justify-center rounded-full"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="group-hover:stroke-black group-hover:dark:stroke-white transition-colors duration-300 ease-in-out"
+          >
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+            <line x1="8" y1="21" x2="16" y2="21"></line>
+            <line x1="12" y1="17" x2="12" y2="21"></line>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </Container>
+</footer>

src/components/Nano/FormattedDate.astro

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