Merge pull request #93 from brklntmhwk/92-tweak

refactor(overall): ✨ tweak

astro.config.ts

@@ -146,7 +146,7 @@ export default defineConfig({
       [
         remarkVideo,
         {
-          baseUrl: SITE_URL,
+          baseUrl: '',
           publicDir: './public',
           videoContainerTag: 'figure',
           fallbackContent: h('p.fallback-content', VIDEO_FALLBACK_MESSAGE),

src/components/elements/Card/Card.astro

@@ -43,6 +43,9 @@ const { class: cardClass, ...restProps } = Astro.props;
       }
     }
     & :global(.content-container) {
+      & :global(br:first-child) {
+        display: none;
+      }
       font-size: 0.725rem;
       padding: 0.175rem 0.325rem;
       overflow-y: auto;

src/components/elements/Figure/Image.astro

@@ -20,7 +20,7 @@ const { alt, placeholder, src, ...props } = Astro.props;
         {alt}
         {src}
         class="object-contain text-transparent bg-cover bg-repeat bg-center"
-        formats={['avif']}
+        formats={['avif', 'webp']}
         widths={[240, 540, 720, src.width]}
         pictureAttributes={{
           style: {

src/components/models/BlogList/BlogList.astro

@@ -37,7 +37,7 @@ const { entries, taxonomies } = Astro.props;
         <li class="animate-fadeInUp">
           <article class="double-border pt-4 pr-2 pb-3.5 pl-3.5 flex flex-col gap-3.5">
             <a
-              class="font-bold text-xl sm:text-2xl md:text-3xl hover:bg-default-mixed"
+              class="font-bold text-xl xs:text-2xl xl:text-3xl hover:bg-default-mixed"
               href={translatePath(
                 `/${entry.collection}/${entry.slug.split('/').pop()}`
               )}

src/components/models/Taxonomy/taxonomy.ts

@@ -12,7 +12,7 @@ export const colors = [
 ] as const;
 
 export const style = tv({
-  base: 'text-neutral-100 text-center',
+  base: 'text-neutral-100 text-center text-sm sm:text-base',
   variants: {
     color: {
       primary: 'bg-primary',

src/components/ui/Balloon/Balloon.astro

@@ -24,7 +24,7 @@ const t = await getEntry('i18n', `${locale}/translation`);
 >
   <div class="flex flex-col place-items-center place-self-end gap-1 shrink-0">
     <ProfileIcon
-      class="message-icon"
+      class="my-0"
       src={image ? image.src : profileImage}
       alt={image ? image.alt : t.data.message.fallback_icon_alt}
       size={90}

src/components/ui/ProfileIcon/ProfileIcon.astro

@@ -17,7 +17,7 @@ const { src, size, alt, class: className, ...rest } = Astro.props;
     <img
       {alt}
       {src}
-      class:list={['rounded-full object-cover m-0', className]}
+      class:list={['rounded-full object-cover !m-0', className]}
       width={size}
       height={size}
       {...rest}
@@ -26,7 +26,7 @@ const { src, size, alt, class: className, ...rest } = Astro.props;
     <Image
       {alt}
       {src}
-      class:list={['rounded-full object-cover m-0', className]}
+      class:list={['rounded-full object-cover !m-0', className]}
       width={size}
       height={size}
       loading="eager"

src/content/blog/en/total-newbie-builds-mini-itx-linux-pc.mdx

@@ -5,7 +5,7 @@ type: blog
 title: Total newbie builds Mini-ITX Linux PC (Error after Error)
 publishedAt: 2024-09-19T01:48:09.453Z
 fmContentType: blog
-modifiedAt: 2024-11-12T04:11:48.862Z
+modifiedAt: 2024-11-13T05:48:14.239Z
 category:
   metadata: en/categories
   slug: learning
@@ -153,8 +153,8 @@ The power cable almost touches the fans of the GPU, the extremely thick cable of
 Incidentally, I recommend you get velcro tapes for tieing cables. I bought them at DAISO. They are very versatile as you can see in the photo above!
 
 > [!note] Lessons
-> - Cable management is a very deep subject
-> - Velcro tapes are very useful for tieing cables
+> \> Cable management is a very deep subject
+> \> Velcro tapes are very useful for tieing cables
 
 #### Trouble 2: Black screen
 
@@ -176,10 +176,10 @@ As a result, it turned out that the error lay in the memories so I tried to plug
 Surprisingly, replacing the memories fixed the error and the BIOS/UEFI menu successfully appeared on the monitor. How unfortunate I am drawing the short straw from the beginning...
 
 > [!note] Lessons
-> - Go get the motherboard buzzer, LED indicators, and preferably switch module just in case your PC doesn't work
-> - Apparently, it often happens that you pick up defective PC parts
-> - Keep it in mind that you can receive support like free replacement if they are under warranty and it covers the support
-> - Make sure to keep the warranties in a safe place
+> \> Go get the motherboard buzzer, LED indicators, and preferably switch module just in case your PC doesn't work
+> \> Apparently, it often happens that you pick up defective PC parts
+> \> Keep it in mind that you can receive support like free replacement if they are under warranty and it covers the support
+> \> Make sure to keep the warranties in a safe place
 
 #### Trouble 3: SSD not recognized
 
@@ -209,8 +209,8 @@ By the way, did you notice that the SSD in [the photo](#start-building-a-mini-it
 At any rate, how clumsy I am, wasting a lot of time not setting up the SSD securely and a lot of money overlooking the support list...
 
 > [!note] Lessons
-> - Make sure to have your SSD seated in the slot securely. They don't make any sounds that tell you it's positioned correctly.
-> - Check the support list for your motherboard carefully before you buy the SSD, memory, CPU, etc.
+> \> Make sure to have your SSD seated in the slot securely. They don't make any sounds that tell you it's positioned correctly.
+> \> Check the support list for your motherboard carefully before you buy the SSD, memory, CPU, etc.
 
 ### Install the Linux OS
 

src/content/blog/ja/total-newbie-builds-mini-itx-linux-pc.mdx

@@ -5,7 +5,7 @@ type: blog
 title: 【エラーだらけ】PC 自作初心者が Mini-ITX の Linux PC を組み立てる
 publishedAt: 2024-09-19T01:48:03.469Z
 fmContentType: blog
-modifiedAt: 2024-11-12T04:11:48.862Z
+modifiedAt: 2024-11-13T05:19:17.300Z
 category:
   metadata: ja/categories
   slug: learning
@@ -152,8 +152,8 @@ PC の組み立て自体は数日程度しかかかりませんでしたが、
 ちなみに、ケーブル類をまとめるのにマジックテープの結束バンドがあると便利です。私は DAISO で購入しました。上記の写真から分かるように、とても汎用性が高いです。
 
 > [!note] 教訓
-> - ケーブル配線まわりはとても奥深い
-> - マジックテープの結束バンドはケーブルをまとめるのに非常に役立つ
+> \> ケーブル配線まわりはとても奥深い
+> \> マジックテープの結束バンドはケーブルをまとめるのに非常に役立つ
 
 #### トラブル其の二: 真っ黒なモニター
 
@@ -175,10 +175,10 @@ PC の組み立て自体は数日程度しかかかりませんでしたが、
 驚いたことに、メモリを交換しただけでエラーは解消され、無事に BIOS/UEFI メニューがモニターに表示されました。最初からいきなりはずれを引くという不運・・。
 
 > [!note] 教訓
-> - PCが動かない場合に備えて、マザーボードの検証用ブザースピーカーとLEDランプ、スイッチモジュールも持っておくとよい
-> - PCのパーツにおいては今回のように不良品を引くということはざらにあるらしい
-> - メーカーや販売店の保証期間内でかつ保証の範囲内であれば、パーツの無償交換などのサポートを受けられることを心得るべし
-> - 保証書類は安全な場所に保管するべし
+> \> PCが動かない場合に備えて、マザーボードの検証用ブザースピーカーとLEDランプ、スイッチモジュールも持っておくとよい
+> \> PCのパーツにおいては今回のように不良品を引くということはざらにあるらしい
+> \> メーカーや販売店の保証期間内でかつ保証の範囲内であれば、パーツの無償交換などのサポートを受けられることを心得るべし
+> \> 保証書類は安全な場所に保管するべし
 
 #### トラブル其の三: SSDが認識されない
 
@@ -210,8 +210,8 @@ Linux OS のインストールも初めてだったからか、初めは自分
 何にせよ、SSD をしっかり取り付けていなかったがために多大な時間を、マザーボードのサポートリストを見落としていたがためにお金を浪費するという下手をこいてしまいました・・。
 
 > [!note] 教訓
-> - SSDはスロットにしっかり入っているか注意深く確認すべし。他のパーツと違って正しく設置された時に音を立てたりしてはくれない
-> - 購入したマザーボードとの対応が確認されているSSDやメモリ、CPUのサポートリストは必ず確認すべし
+> \> SSDはスロットにしっかり入っているか注意深く確認すべし。他のパーツと違って正しく設置された時に音を立てたりしてはくれない
+> \> 購入したマザーボードとの対応が確認されているSSDやメモリ、CPUのサポートリストは必ず確認すべし
 
 ### Linux OS をインストールする
 

src/layouts/AboutLayout.astro

@@ -29,7 +29,7 @@ const { headings } = Astro.props;
   <main data-pagefind-ignore="all">
     <Article kind="about">
       <section slot="metadata" class="flex flex-col gap-4">
-        <h1 class="text-4xl md:text-5xl font-extrabold">{t.data.pages.about.title}</h1>
+        <h1 class="text-4xl xl:text-5xl font-extrabold">{t.data.pages.about.title}</h1>
         <div class="flex flex-col justify-center lg:justify-start md:flex-row place-items-center gap-4 md:gap-9 lg:gap-10 py-2 md:py-6 lg:py-9">
           <ProfileIcon
             alt={t.data.pages.about.my_name}

src/layouts/BlogLayout.astro

@@ -83,7 +83,7 @@ const tags = await getBlogTags(blogTags);
             />
           )
         } -->
-        <h1 class="text-center text-3xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-snug md:leading-snug">{title}</h1>
+        <h1 class="text-center text-3xl sm:text-4xl xl:text-5xl font-extrabold leading-snug sm:leading-snug md:leading-snug">{title}</h1>
         <div class="text-[0.825rem] sm:text-[1.045rem] pt-2.5 pb-3.5 flex flex-wrap justify-center items-center gap-y-7 gap-x-3">
           {
             category && (

src/layouts/NewsLayout.astro

@@ -37,7 +37,7 @@ const slugWithoutLocale = getSlugWithoutLocale(slug);
   <main>
     <Article kind="news">
       <section slot="metadata" class="flex flex-col gap-4">
-        <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-snug md:leading-snug">{title}</h1>
+        <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold leading-snug sm:leading-snug md:leading-snug">{title}</h1>
         <div class="text-sm xs:text-base sm:text-lg flex flex-wrap gap-x-4 gap-y-1">
           <div class="flex items-center gap-1.5">
             <Icon iconName="publish" width={20} height={20} />

src/layouts/PageLayout.astro

@@ -19,7 +19,7 @@ const { title, description, modifiedAt } = page.data;
   <main data-pagefind-ignore="all">
     <Article kind="page">
       <section slot="metadata" class="flex flex-col gap-4">
-        <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-snug md:leading-snug">{title}</h1>
+        <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold leading-snug sm:leading-snug md:leading-snug">{title}</h1>
         <div class="text-sm xs:text-base sm:text-lg flex flex-wrap gap-x-4 gap-y-1">
           {
             modifiedAt && (

src/lib/mode.ts

@@ -1 +1 @@
-export const isDev = import.meta.env.MODE === 'development';
+export const isDev = import.meta.env.DEV;

src/lib/unified/plugins/remark-callout.ts

@@ -40,9 +40,8 @@ const remarkCallout: Plugin<[], Root> = (): ReturnType<RemarkPlugin> => {
       if (!isParent(node)) return;
       if (node.children.length === 0) return;
 
-      const paragraphNode = node.children[0]!;
+      const paragraphNode = node.children[0];
       if (!isParagraph(paragraphNode)) return;
-
       if (!isParent(paragraphNode)) return;
       if (paragraphNode.children.length === 0) return;
 
@@ -75,6 +74,7 @@ const remarkCallout: Plugin<[], Root> = (): ReturnType<RemarkPlugin> => {
         },
         ...node.children.splice(1),
       ];
+
       if (!isParagraph(contentNode[0])) return;
       if (calloutContent.length > 0) {
         contentNode[0].children.push({

src/pages/[locale]/index.astro

@@ -40,23 +40,23 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
   <main class="flex flex-col gap-5 xl:gap-9 xl:pt-10 xl:px-24 xl:pb-24" data-pagefind-ignore="all">
     <BulletinBoard newsList={latestNews} />
     <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
-      <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.about_section.title}</h2>
+      <h2 class="text-3xl md:text-4xl font-bold leading-snug">{t.data.pages.home.about_section.title}</h2>
       <span>{t.data.pages.home.about_section.description}</span>
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/about')}>
         {t.data.pages.home.about_section.read_more}
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
     <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
-      <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.blog_section.title}</h2>
+      <h2 class="text-3xl md:text-4xl font-bold leading-snug">{t.data.pages.home.blog_section.title}</h2>
       <BlogList taxonomies={{ show: true, shouldDisplay: ['category', 'tags'] }} entries={latestBlogEntries} />
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/blog')}>
         {t.data.pages.home.blog_section.read_more}
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
     <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
-      <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.photo_section.title}</h2>
+      <h2 class="text-3xl md:text-4xl font-bold leading-snug">{t.data.pages.home.photo_section.title}</h2>
       <span>{t.data.pages.home.photo_section.description}</span>
       <PhotoGallery {photos} />
       <a

src/pages/[locale]/news/[...page].astro

@@ -44,7 +44,7 @@ const t = await getEntry('i18n', `${locale}/translation`);
           page.data.map((entry) => (
             <li class="[&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:border-solid [&:not(:last-child)]:border-line-solid [&:not(:last-child)]:pb-5">
               <article class="flex flex-col gap-3">
-                <section class="pt-4 flex gap-3.5">
+                <section class="pt-4 flex flex-wrap gap-x-3.5 gap-y-1.5">
                   <div class="flex items-center gap-1.5">
                     <Icon iconName="publish" width={20} height={20} />
                     <FormattedDate
@@ -64,7 +64,7 @@ const t = await getEntry('i18n', `${locale}/translation`);
                 </section>
                 <a
                   href={`/${locale}/${entry.collection}/${entry.slug.split('/').pop()}`}
-                  class="text-default text-2xl md:text-3xl font-bold leading-6 no-underline hover:underline hover:underline-offset-4"
+                  class="text-default text-2xl md:text-3xl font-bold leading-normal no-underline hover:underline hover:underline-offset-4"
                 >
                   {entry.data.title}
                 </a>

src/pages/index.astro

@@ -34,23 +34,23 @@ const latestNews = newsList.slice(0, NEWS_LATEST_MAXIMUM_COUNT);
   <main class="flex flex-col gap-5 xl:gap-9 xl:pt-10 xl:px-24 xl:pb-24" data-pagefind-ignore="all">
     <BulletinBoard newsList={latestNews} />
     <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
-      <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.about_section.title}</h2>
+      <h2 class="text-3xl md:text-4xl font-bold leading-snug">{t.data.pages.home.about_section.title}</h2>
       <span>{t.data.pages.home.about_section.description}</span>
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/about')}>
         {t.data.pages.home.about_section.read_more}
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
     <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
-      <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.blog_section.title}</h2>
+      <h2 class="text-3xl md:text-4xl font-bold leading-snug">{t.data.pages.home.blog_section.title}</h2>
       <BlogList taxonomies={{ show: true, shouldDisplay: ['category', 'tags'] }} entries={latestBlogEntries} />
       <a class="flex items-center gap-1 self-end text-lg md:text-xl text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href={translatePath('/blog')}>
         {t.data.pages.home.blog_section.read_more}
         <Icon iconName="right-arrow" width={18} height={18} />
       </a>
     </section>
     <section class="py-3 px-4 border-2 border-solid border-line-solid rounded-sm flex flex-col gap-2 md:py-6 md:px-9">
-      <h2 class="text-3xl md:text-4xl font-bold">{t.data.pages.home.photo_section.title}</h2>
+      <h2 class="text-3xl md:text-4xl font-bold leading-snug">{t.data.pages.home.photo_section.title}</h2>
       <span>{t.data.pages.home.photo_section.description}</span>
       <PhotoGallery {photos} />
       <a

src/pages/news/[...page].astro

@@ -35,7 +35,7 @@ const t = await getEntry('i18n', `${defaultLang}/translation`);
           page.data.map((entry) => (
             <li class="[&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:border-solid [&:not(:last-child)]:border-line-solid [&:not(:last-child)]:pb-5">
               <article class="flex flex-col gap-3">
-                <section class="pt-4 flex gap-3.5">
+                <section class="pt-4 flex flex-wrap gap-3.5">
                   <div class="flex items-center gap-1.5">
                     <Icon iconName="publish" width={20} height={20} />
                     <FormattedDate
@@ -55,7 +55,7 @@ const t = await getEntry('i18n', `${defaultLang}/translation`);
                 </section>
                 <a
                   href={`/${entry.collection}/${entry.slug.split('/').pop()}`}
-                  class="text-default text-2xl md:text-3xl font-bold leading-6 no-underline hover:underline hover:underline-offset-4"
+                  class="text-default text-2xl md:text-3xl font-bold leading-normal no-underline hover:underline hover:underline-offset-4"
                 >
                   {entry.data.title}
                 </a>

tailwind.config.ts

@@ -167,6 +167,9 @@ export default {
               marginTop: '0',
               marginBottom: '0',
             },
+            'li::marker': {
+              color: theme('colors.neutral.500')
+            },
             'ul li': {
               listStyleType: 'square',
             },