refactor: apply directory alias

EATSTEAK · Aug 23, 2024 · 97f4d43 · 97f4d43
1 parent 7bfa622
commit 97f4d43
Show file tree

Hide file tree

Showing 27 changed files with 954 additions and 925 deletions.
diff --git a/src/components/index/Intro.tsx b/src/components/index/Intro.tsx
@@ -4,7 +4,7 @@ import { Button } from "../ui/Button.tsx";
 import { GrillContainer } from "../shell/GrillContainer.tsx";
 import "./intro.css";
 
-export const Intro: Component<{}> = () => {
+export const Intro: Component = () => {
   return (
     <GrillContainer
       absoluteBackground={<AnimatedLogo class="-mt-16 w-[32rem] h-[32rem]" />}

diff --git a/src/components/post/Comments.tsx b/src/components/post/Comments.tsx
@@ -1,7 +1,7 @@
 import { type Component, createEffect } from "solid-js";
-import theme from "../../signals/theme.ts";
+import theme from "@signals/theme.ts";
 
-export const Comments: Component<{}> = () => {
+export const Comments: Component = () => {
   const [isDarkTheme, _] = theme;
   let sectionRef: HTMLDivElement;
   const utterances = () => {

diff --git a/src/components/post/CompactPostItem.astro b/src/components/post/CompactPostItem.astro
@@ -1,9 +1,6 @@
 ---
 import type {CollectionEntry} from "astro:content";
 import {CategoryLabel} from "../ui/CategoryLabel";
-import {FormattedDate} from "./FormattedDate";
-import {MinutesRead} from "./MinutesRead";
-import {Topics} from "../ui/Topics";
 import cc from "classcat";
 
 interface Props {

diff --git a/src/components/shell/BaseHead.astro b/src/components/shell/BaseHead.astro
@@ -1,8 +1,8 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import "../../styles/global.css";
-import "../../styles/fonts.css";
+import "@styles/global.css";
+import "@styles/fonts.css";
 
 interface Props {
     title: string;

diff --git a/src/components/shell/Footer.tsx b/src/components/shell/Footer.tsx
@@ -1,12 +1,14 @@
 import type { Component } from "solid-js";
 import "./footer.css";
 
-export const Footer: Component<{}> = () => {
+export const Footer: Component = () => {
   const currentYear = new Date().getFullYear();
   return (
     <footer>
-      <span class="font-mono">Copyright 2023-{currentYear} <a href="https://eatsteak.dev">EATSTEAK</a>. All rights
-        reserved.</span>
+      <span class="font-mono">
+        Copyright 2023-{currentYear} <a href="https://eatsteak.dev">EATSTEAK</a>
+        . All rights reserved.
+      </span>
     </footer>
   );
 };
diff --git a/src/components/shell/LightSwitch.tsx b/src/components/shell/LightSwitch.tsx
@@ -1,8 +1,8 @@
 import { type Component, createEffect, Show } from "solid-js";
 import { Switch } from "../ui/Switch.tsx";
-import theme from "../../signals/theme.ts";
+import theme from "@signals/theme.ts";
 
-export const LightSwitch: Component<{}> = () => {
+export const LightSwitch: Component = () => {
   const [isDarkTheme, setDarkTheme] = theme;
   createEffect(() => {
     if (isDarkTheme()) {

diff --git a/src/components/ui/CategoryLabel.tsx b/src/components/ui/CategoryLabel.tsx
@@ -1,5 +1,5 @@
 import { type Component, Show } from "solid-js";
-import { CATEGORIES } from "../../consts.ts";
+import { CATEGORIES } from "@consts";
 
 import "./category_label.css";
 

diff --git a/src/components/ui/Profile.tsx b/src/components/ui/Profile.tsx
@@ -1,5 +1,5 @@
-import { GitHub } from "../../icons/GitHub.tsx";
-import { Threads } from "../../icons/Threads.tsx";
+import { GitHub } from "@icons/GitHub.tsx";
+import { Threads } from "@icons/Threads.tsx";
 
 export const Profile = () => {
   return (

diff --git a/src/components/ui/animated_logo.css b/src/components/ui/animated_logo.css
@@ -1,24 +1,23 @@
 @keyframes burning {
     0% {
-        background-position: 0% 0%;
+        background-position: 0 0;
     }
 
     50% {
         background-position: 170% 70%;
     }
 
     100% {
-        background-position: 0% 0%;
+        background-position: 0 0;
     }
 }
 
 @tailwind components;
 
 @layer components {
     .animated-logo {
-        background: linear-gradient(270deg, #ca5010, #d13438, #ff8c00, #ca5010);
+        background: linear-gradient(270deg, #ca5010, #d13438, #ff8c00, #ca5010) repeat;
         background-size: 200% 200%;
-        background-repeat: repeat;
         mask-image: url("/images/profile.svg");
         mask-repeat: no-repeat;
         mask-size: cover;

diff --git a/src/components/ui/button.css b/src/components/ui/button.css
@@ -5,7 +5,7 @@
         @apply font-mono py-2 px-4 transition-colors border-2 before:bg-white bg-gradient-to-r from-gray-800 to-gray-800 text-gray-800 hover:text-white border-gray-800 dark:before:bg-gray-800 dark:from-white dark:to-white dark:text-white dark:hover:text-gray-800 dark:border-white;
 
         position: relative;
-        background-size: 0% 100%;
+        background-size: 0 100%;
         background-repeat: no-repeat;
         background-position-y: 100%;
         transition: background-size 0.25s ease-out;

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -1,20 +1,20 @@
 ---
 import {getCollection, type CollectionEntry} from "astro:content";
 import Layout from "./Layout.astro";
-import {Profile} from "../components/ui/Profile";
-import {FormattedDate} from "../components/post/FormattedDate";
-import {Topics} from "../components/ui/Topics";
-import {CategoryLabel} from "../components/ui/CategoryLabel";
-import "../styles/prose.css";
-import {Counter} from "../components/post/Counter";
-import {Comments} from "../components/post/Comments";
+import {Profile} from "@components/ui/Profile";
+import {FormattedDate} from "@components/post/FormattedDate";
+import {Topics} from "@components/ui/Topics";
+import {CategoryLabel} from "@components/ui/CategoryLabel";
+import "@styles/prose.css";
+import {Counter} from "@components/post/Counter";
+import {Comments} from "@components/post/Comments";
 import {CATEGORIES} from "../consts";
-import PostItem from "../components/post/PostItem.astro";
-import {getReadingTime} from "../utils/reading-time";
-import {MinutesRead} from "../components/post/MinutesRead";
+import PostItem from "@components/post/PostItem.astro";
+import {getReadingTime} from "@utils/reading-time";
+import {MinutesRead} from "@components/post/MinutesRead";
 import type {MarkdownHeading} from "astro";
-import {TableOfContents} from "../components/post/TableOfContents";
-import Series from "../components/post/Series.astro";
+import {TableOfContents} from "@components/post/TableOfContents";
+import Series from "@components/post/Series.astro";
 
 type Props = CollectionEntry<"blog">["data"] & {
     slug: string;

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,12 +1,12 @@
 ---
-import BaseHead from "../components/shell/BaseHead.astro";
-import {Footer} from "../components/shell/Footer";
-import Header from "../components/shell/Header.astro";
+import BaseHead from "@components/shell/BaseHead.astro";
+import {Footer} from "@components/shell/Footer";
+import Header from "@components/shell/Header.astro";
 
 const {
     title,
     description,
-    image = "/images/blog-placeholder-1.jpg",
+    image = "/images/logo.png",
 } = Astro.props;
 
 const pathname = new URL(Astro.request.url).pathname;

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,16 +1,16 @@
 ---
-import {GrillContainer} from "../components/shell/GrillContainer";
+import {GrillContainer} from "@components/shell/GrillContainer";
 import {SITE_TITLE, SITE_DESCRIPTION} from "../consts";
-import Layout from "../layouts/Layout.astro";
-import {AnimatedLogo} from "../components/ui/AnimatedLogo";
-import {Container} from "../components/shell/Container";
-import {Button} from "../components/ui/Button";
-import {ExperienceCard} from "../components/about/ExperienceCard";
-import {SubExperienceCard} from "../components/about/SubExperienceCard";
-import {Mail} from "../icons/Mail";
-import {GitHub} from "../icons/GitHub";
-import {Threads} from "../icons/Threads";
-import "../styles/about_print.css";
+import Layout from "@layouts/Layout.astro";
+import {AnimatedLogo} from "@components/ui/AnimatedLogo";
+import {Container} from "@components/shell/Container";
+import {Button} from "@components/ui/Button";
+import {ExperienceCard} from "@components/about/ExperienceCard";
+import {SubExperienceCard} from "@components/about/SubExperienceCard";
+import {Mail} from "@icons/Mail";
+import {GitHub} from "@icons/GitHub";
+import {Threads} from "@icons/Threads";
+import "@styles/about_print.css";
 ---
 
 <Layout title={SITE_TITLE} description={SITE_DESCRIPTION}>

diff --git a/src/pages/card/og/[...slug].png.ts b/src/pages/card/og/[...slug].png.ts
@@ -3,8 +3,8 @@ import { getCollection } from "astro:content";
 import satori from "satori";
 import sharp from "sharp";
 import type { APIRoute } from "astro";
-import { CATEGORIES } from "../../../consts";
-import { getReadingTime } from "../../../utils/reading-time";
+import { CATEGORIES } from "@consts";
+import { getReadingTime } from "@utils/reading-time";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -15,12 +15,8 @@ export async function getStaticPaths() {
 }
 
 export const GET: APIRoute = async function GET({ props }) {
-  const jostData = await fs.readFile(
-    "./fonts/Jost-Medium.ttf"
-  );
-  const notoSansKRData = await fs.readFile(
-    "./fonts/NotoSansKR-Medium.ttf"
-  );
+  const jostData = await fs.readFile("./fonts/Jost-Medium.ttf");
+  const notoSansKRData = await fs.readFile("./fonts/NotoSansKR-Medium.ttf");
   const grillPath = [
     "M0,59 h1500 v2 h-1500 z",
     "M0,119 h1500 v2 h-1500 z",
@@ -57,24 +53,27 @@ export const GET: APIRoute = async function GET({ props }) {
     "M1139,0 v900 h2 v-900 z",
     "M1199,0 v900 h2 v-900 z",
   ].join(" ");
-  const logoData = await fs.readFile(
-    "./public/images/logo.png"
-  )
-  const category = CATEGORIES?.[props.data.category] ?? CATEGORIES?.["uncategorized"];
+  const logoData = await fs.readFile("./public/images/logo.png");
+  const category =
+    CATEGORIES?.[props.data.category] ?? CATEGORIES?.["uncategorized"];
 
   const formatter = new Intl.DateTimeFormat("ko", {
     dateStyle: "medium",
     timeStyle: "short",
   });
 
   const hexToRgb = (hex: string) => {
-    let hexsplit = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
-               ,(_m, r, g, b) => '#' + r + r + g + g + b + b)
-      .substring(1).match(/.{2}/g);
-      if(hexsplit == null) return null;
-      return hexsplit.map(x => parseInt(x, 16));
-  }
-
+    let hexsplit = hex
+      .replace(
+        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+        (_m, r, g, b) => "#" + r + r + g + g + b + b,
+      )
+      .substring(1)
+      .match(/.{2}/g);
+    if (hexsplit == null) return null;
+    return hexsplit.map((x) => parseInt(x, 16));
+  };
+
   const bgRgb = hexToRgb(category.color.light.bg);
   const minutesToRead = getReadingTime(props.body) ?? 0;
   const svg = await satori(
@@ -94,9 +93,9 @@ export const GET: APIRoute = async function GET({ props }) {
                 height: "900px",
                 background: `linear-gradient(4deg, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},0) 35%, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},0.1) 72%, rgba(${bgRgb?.[0] ?? 0},${bgRgb?.[1] ?? 0},${bgRgb?.[2] ?? 0},1) 80%)`,
                 clipPath: `path("${grillPath}")`,
-                transform: "translateY(-120px) rotate(-8deg)"
-              }
-            }
+                transform: "translateY(-120px) rotate(-8deg)",
+              },
+            },
           },
           {
             type: "div",
@@ -114,15 +113,15 @@ export const GET: APIRoute = async function GET({ props }) {
                       fontSize: "32px",
                       fontWeight: "500",
                       textTransform: "uppercase",
-                    }
-                  }
-                }
+                    },
+                  },
+                },
               ],
               style: {
                 display: "flex",
                 alignItems: "flex-start",
-              }
-            }
+              },
+            },
           },
           {
             type: "h1",
@@ -135,24 +134,26 @@ export const GET: APIRoute = async function GET({ props }) {
                 textTransform: "uppercase",
                 lineHeight: "1",
                 margin: "0 0 8px 0",
-                wordBreak: "keep-all"
-              }
-            }
+                wordBreak: "keep-all",
+              },
+            },
           },
           {
             type: "p",
             props: {
-              children: `${formatter.format(new Date(props.data.pubDate))} | ${minutesToRead < 1
-                ? "1분 미만 소요"
-                : `약 ${Math.ceil(minutesToRead)}분 소요`}`,
+              children: `${formatter.format(new Date(props.data.pubDate))} | ${
+                minutesToRead < 1
+                  ? "1분 미만 소요"
+                  : `약 ${Math.ceil(minutesToRead)}분 소요`
+              }`,
               style: {
                 color: "rgb(100 116 139)",
                 fontFamily: "'Noto Sans KR'",
                 fontSize: "24px",
                 fontWeight: "500",
                 margin: "0 0",
-              }
-            }
+              },
+            },
           },
           {
             type: "p",
@@ -166,8 +167,8 @@ export const GET: APIRoute = async function GET({ props }) {
                 lineHeight: "1.4",
                 margin: "0 0",
                 wordBreak: "keep-all",
-              }
-            }
+              },
+            },
           },
           {
             type: "div",
@@ -178,17 +179,17 @@ export const GET: APIRoute = async function GET({ props }) {
                   props: {
                     src: `data:image/png;base64,${logoData.toString("base64")}`,
                     width: "200px",
-                  }
-                }
+                  },
+                },
               ],
               style: {
                 display: "flex",
                 flexGrow: "1",
                 alignItems: "flex-end",
                 justifyContent: "flex-end",
-              }
-            }
-          }
+              },
+            },
+          },
         ],
         style: {
           position: "relative",
@@ -218,9 +219,9 @@ export const GET: APIRoute = async function GET({ props }) {
           data: notoSansKRData,
           weight: 500,
           style: "normal",
-        }
+        },
       ],
-    }
+    },
   );
 
   const png = await sharp(Buffer.from(svg)).png().toBuffer();
@@ -230,4 +231,4 @@ export const GET: APIRoute = async function GET({ props }) {
       "Content-Type": "image/png",
     },
   });
-};
+};