Merge pull request #125 from brklntmhwk/124-enhance-page-performance

perf(some): ⚡️tweak deps, config, and ui

astro.config.ts

@@ -4,19 +4,16 @@ import sitemap from '@astrojs/sitemap';
 import solidJs from '@astrojs/solid-js';
 import tailwind from '@astrojs/tailwind';
 import compress from 'astro-compress';
+import purgecss from 'astro-purgecss';
 import { defineConfig, passthroughImageService } from 'astro/config';
 import { h } from 'hastscript';
 import rehypeAutolinkHeadings, {
   type Options as RehypeAutoLinkHeadingsOptions,
 } from 'rehype-autolink-headings';
 import rehypeKatex from 'rehype-katex';
-import rehypePrettyCode, {
-  type Options as RehypePrettyCodeOptions,
-} from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
 import remarkCard, { type Config as RemarkCardConfig } from 'remark-card';
 import remarkDirective from 'remark-directive';
-import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import remarkRubyDirective from 'remark-ruby-directive';
 import remarkVideo, { type Config as RemarkVideoConfig } from 'remark-video';
@@ -30,14 +27,16 @@ import remarkEmbed, {
   type RemarkEmbedOptions,
 } from './src/lib/unified/plugins/remark-embed';
 import remarkFootnote from './src/lib/unified/plugins/remark-footnote';
-import remarkLineBreaks from './src/lib/unified/plugins/remark-line-breaks';
 import remarkLinkCard from './src/lib/unified/plugins/remark-link-card';
 import {
   canvaTransformer,
   googleSlidesTransformer,
   oEmbedTransformer,
   youTubeTransformer,
 } from './src/lib/unified/transformers';
+import expressiveCode from "astro-expressive-code";
+import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
+
 
 // https://astro.build/config
 export default defineConfig({
@@ -53,6 +52,10 @@ export default defineConfig({
     service: passthroughImageService(),
   },
   integrations: [
+    expressiveCode({
+      themes: ['github-dark', 'catppuccin-latte'],
+      plugins: [pluginLineNumbers()],
+    }),
     mdx(),
     tailwind({
       applyBaseStyles: false,
@@ -69,12 +72,26 @@ export default defineConfig({
       SVG: false,
       Logger: 1,
     }),
+    purgecss({
+      fontFace: true,
+      keyframes: true,
+      safelist: {
+        standard: [/hover:/, /before:/, /after:/, /^peer-checked:/, /^\[&>\*\]/],
+      },
+      extractors: [
+        {
+          extractor: (content) =>
+            content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
+          extensions: ['astro', 'html'],
+        },
+      ],
+    }),
   ],
   prefetch: {
     defaultStrategy: 'viewport',
     prefetchAll: true,
   },
-  trailingSlash: "always",
+  trailingSlash: 'always',
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'ja'],
@@ -104,7 +121,6 @@ export default defineConfig({
     },
     remarkPlugins: [
       remarkMath,
-      remarkGfm,
       remarkDirective,
       remarkAstroImageAssets,
       remarkCallout,
@@ -139,7 +155,6 @@ export default defineConfig({
       ],
       remarkLinkCard,
       remarkRubyDirective,
-      remarkLineBreaks,
     ],
     rehypePlugins: [
       rehypeKatex,
@@ -157,16 +172,6 @@ export default defineConfig({
           ),
         } satisfies RehypeAutoLinkHeadingsOptions,
       ],
-      [
-        rehypePrettyCode,
-        {
-          theme: {
-            light: 'catppuccin-latte',
-            dark: 'github-dark',
-          },
-          grid: false,
-        } satisfies RehypePrettyCodeOptions,
-      ],
       rehypePagefindIgnore,
     ],
   },

package.json

@@ -34,16 +34,16 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/solid-js": "^4.4.2",
     "@astrojs/tailwind": "^5.1.2",
-    "@fontsource-variable/piazzolla": "^5.1.2",
-    "@fontsource/dotgothic16": "^5.1.0",
-    "@fontsource/shippori-mincho-b1": "^5.1.1",
+    "@fontsource-variable/inter": "^5.1.1",
     "@kobalte/core": "^0.13.7",
     "@modular-forms/solid": "^0.23.0",
     "@solid-primitives/event-listener": "^2.3.3",
     "@solid-primitives/keyboard": "^1.2.8",
-    "@unocss/reset": "^0.63.6",
     "astro": "^4.16.8",
+    "astro-expressive-code": "^0.38.3",
+    "astro-purgecss": "^5.1.0",
     "drizzle-orm": "^0.36.0",
+    "purgecss": "^7.0.2",
     "resend": "^4.0.1-alpha.0",
     "solid-js": "^1.9.3",
     "solid-motionone": "^1.0.2",
@@ -55,10 +55,10 @@
     "@astrojs/ts-plugin": "^1.10.4",
     "@biomejs/biome": "1.9.4",
     "@cloudflare/workers-types": "^4.20241022.0",
+    "@expressive-code/plugin-line-numbers": "^0.38.3",
     "@mdx-js/typescript-plugin": "^0.0.6",
     "@nanostores/solid": "^0.5.0",
     "@pagefind/default-ui": "^1.1.1",
-    "@tailwindcss/typography": "^0.5.15",
     "@types/better-sqlite3": "^7.6.11",
     "@types/bun": "^1.1.12",
     "@types/hast": "^3.0.4",

src/components/common/BaseHead/BaseHead.astro

@@ -1,8 +1,6 @@
 ---
 // import '@unocss/reset/tailwind-compat.css';
-import '@/styles/global.css';
 import { getAbsoluteLocaleUrl } from 'astro:i18n';
-import { CustomStyles } from '@/components/functional/CustomStyles';
 import type { Props as BaseLayoutProps } from '@/layouts/BaseLayout.astro';
 import { languages } from '@/utils/i18n/data';
 
@@ -76,4 +74,3 @@ const { title, description, og } = Astro.props;
     </>
   )
 }
-<CustomStyles />

src/components/common/LocalePicker/LocalePicker.tsx

@@ -1,3 +1,4 @@
+import '@/styles/pixel-m-plus.css';
 import { locale } from '@/components/functional/LocaleStore/locale-store';
 import { url } from '@/components/functional/UrlStore/url-store';
 import { defaultLang, languages } from '@/utils/i18n/data';
@@ -12,7 +13,7 @@ export const LocalePicker: Component = () => {
   return (
     <ul class="grid gap-6 ml-5">
       {Object.entries(languages).map(([lang, label]) => (
-        <li class="text-xl font-pixelMPlus">
+        <li class="text-xl font-pixel">
           {lang === $locale() ? (
             <span class="font-bold">{label}</span>
           ) : (

src/components/common/Navigation/Navigation.astro

@@ -1,4 +1,5 @@
 ---
+import '@/styles/pixel-m-plus.css';
 import { getEntry } from 'astro:content';
 import { LocalePicker } from '@/components/common/LocalePicker/LocalePicker';
 import { Search } from '@/components/common/Search/Search';
@@ -27,32 +28,32 @@ const t = await getEntry('i18n', `${locale}/translation`);
   lg:grid-cols-[1fr]
   "
   data-pagefind-ignore="all">
-  <a class="hidden xxs:font-pixelMPlus xxs:text-lg xxs:flex xxs:justify-center xxs:items-center lg:place-self-center lg:area-blog-title" href={translatePath('/')}>
+  <a class="hidden xxs:font-pixel xxs:text-lg xxs:flex xxs:justify-center xxs:items-center lg:place-self-center lg:area-blog-title" href={translatePath('/')}>
     {t.data.blog_name}
   </a>
   <NavMenuContainer>
     <div class="
     flex flex-col self-center lg:self-start gap-6 lg:gap-8 py-3 lg:p-0 px-11 ml-5 lg:ml-6"
     slot="inside-drawer">
-      <NavLink class="font-pixelMPlus relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
+      <NavLink class="font-pixel relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
       href={translatePath('/')}>{t.data.nav.nav_links.home}</NavLink>
-      <NavLink class="font-pixelMPlus relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
+      <NavLink class="font-pixel relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
       href={translatePath('/blog/')}
         >{t.data.nav.nav_links.blog}</NavLink
       >
-      <NavLink class="font-pixelMPlus relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
+      <NavLink class="font-pixel relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
       href={translatePath('/news/')}
         >{t.data.nav.nav_links.news}</NavLink
       >
-      <NavLink class="font-pixelMPlus relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
+      <NavLink class="font-pixel relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
       href={translatePath('/about/')}
         >{t.data.nav.nav_links.about}</NavLink
       >
-      <NavLink class="font-pixelMPlus relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
+      <NavLink class="font-pixel relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
       href={translatePath('/work/')}
         >{t.data.nav.nav_links.work}</NavLink
       >
-      <NavLink class="font-pixelMPlus relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
+      <NavLink class="font-pixel relative text-lg sm:text-xl lg:text-base active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
       href={translatePath('/tools/')}
         >{t.data.nav.nav_links.tools}</NavLink
       >

src/components/common/Search/Search.tsx

@@ -1,3 +1,4 @@
+import '@/styles/pixel-m-plus.css';
 import type { I18nData } from '@/lib/collections/types';
 import { isDev } from '@/lib/mode';
 import {
@@ -96,7 +97,7 @@ export const Search: Component<Props> = (props) => {
             placeholder={props.t.placeholder}
             onInput={(e) => setQuery(e.currentTarget.value)}
             onKeyDown={handleKeyDown}
-            class="font-pixelMPlus w-full text-lg bg-transparent outline-none"
+            class="font-pixel w-full text-lg bg-transparent outline-none"
             autocomplete="off"
           />
         </div>

src/components/elements/Figure/Figure.astro

@@ -1,24 +1,17 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import AstroCode from './Code.astro';
 import AstroVideo from './Video.astro';
 
 type Props = HTMLAttributes<'figure'> & {
-  'data-rehype-pretty-code-figure'?: '';
   'data-remark-video-figure'?: '';
 };
 
 const props = Astro.props;
-const isCodeFigure = Object.hasOwn(props, 'data-rehype-pretty-code-figure');
 const isVideoFigure = Object.hasOwn(props, 'data-remark-video-figure');
 ---
 
 {
-  isCodeFigure ? (
-    <AstroCode {...props}>
-      <slot />
-    </AstroCode>
-  ) : isVideoFigure ? (
+  isVideoFigure ? (
     <AstroVideo {...props}>
       <slot />
     </AstroVideo>